126 lines
3.5 KiB
JavaScript
126 lines
3.5 KiB
JavaScript
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: '840px',
|
|
paddingLeft: '0.5rem',
|
|
paddingRight: '0.5rem',
|
|
'@screen sm': {
|
|
maxWidth: 'calc(100% - 30px)',
|
|
},
|
|
'@screen md': {
|
|
maxWidth: 'calc(100% - 30px)',
|
|
},
|
|
'@screen lg': {
|
|
maxWidth: '840px',
|
|
},
|
|
'@screen xl': {
|
|
maxWidth: '840px',
|
|
},
|
|
'@screen 2xl': {
|
|
maxWidth: '840px',
|
|
},
|
|
},
|
|
});
|
|
},
|
|
],
|
|
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)'
|
|
}
|
|
},
|
|
},
|
|
};
|