function Helper() { this.withOpacityValue = function (variable) { return ({ opacityValue }) => { if (opacityValue === undefined) { return `rgb(var(${variable}))`; } return `rgb(var(${variable}) / ${opacityValue})`; }; }; this.makeSkinTextColors = function (key) { let obj = {}; obj[key] = this.withOpacityValue(`--color-${key}-text-base`); obj[`${key}-muted`] = this.withOpacityValue(`--color-${key}-text-muted`); obj[`${key}-inverted`] = this.withOpacityValue(`--color-${key}-text-inverted`); return obj; }; this.makeSkinBackgrounds = function (key) { let obj = {}; obj[key] = this.withOpacityValue(`--color-${key}`); obj[`${key}-disabled`] = this.withOpacityValue(`--color-${key}-disabled`); obj[`${key}-hover`] = this.withOpacityValue(`--color-${key}-hover`); obj[`${key}-disabled-hover`] = this.withOpacityValue(`--color-${key}-disabled-hover`); return obj; }; this.makeSkinBorder = function (key) { let obj = {}; obj[key] = this.withOpacityValue(`--color-${key}-border`); obj[`${key}-hover`] = this.withOpacityValue(`--color-${key}-border-hover`); return obj; }; this.makeSkinShadows = function (key) { let obj = {}; obj[key] = this.withOpacityValue(`--color-${key}-glow`); obj[`${key}-disabled`] = this.withOpacityValue(`--color-${key}-glow`); return obj; }; this.luminanced = function (key, additionalStops = []) { let obj = {}; obj['50'] = this.withOpacityValue(`--color-${key}-50`); for (let index = 0; index < additionalStops.length; index++) { const element = additionalStops[index]; obj[element] = this.withOpacityValue(`--color-${key}-${element}`); } for (let index = 100; index <= 900; index += 100) { obj[index.toString()] = this.withOpacityValue(`--color-${key}-${index}`); } return obj; }; } const ColorHelper = new Helper(); /** * @type { import('@types/tailwindcss/tailwind-config').TailwindConfig } */ module.exports = { content: ['./src/**/*.{jsx,tsx}'], plugins: [ function ({ addComponents }) { addComponents({ '.container': { maxWidth: '100%', paddingLeft: '0.5rem', paddingRight: '0.5rem', '@screen sm': { maxWidth: 'calc(100% - 30px)', }, '@screen md': { maxWidth: 'calc(100% - 30px)', }, '@screen lg': { maxWidth: '960px', }, '@screen xl': { maxWidth: '1080px', }, '@screen 2xl': { maxWidth: '1080px', }, }, }); }, ], theme: { extend: { screens: { tall: { raw: '(min-height: 1200px) and (orientation: portrait)' }, skewed: { raw: '(max-height: 600px)' }, "1.5xl": '1300px', }, height: { 'half-screen': '50vh', }, minHeight: { 'half-screen': '50vh', }, colors: { aside: 'var(--color-aside)', main: 'var(--color-body)', header: '#191D2B', transparent: 'transparent', current: 'currentColor', white: '#ffffff', black: '#000000', serv: ColorHelper.luminanced('serv'), blue: ColorHelper.luminanced('blue'), gray: ColorHelper.luminanced('gray', [75]), }, gridTemplateColumns: { 'layout': 'min-content 7fr', }, gridTemplateRows: { 'page': '3.5rem calc(100vh - 3.5rem)' } }, }, };