135 lines
3.8 KiB
JavaScript
Executable File
135 lines
3.8 KiB
JavaScript
Executable File
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",
|
|
},
|
|
},
|
|
});
|
|
},
|
|
require("@tailwindcss/line-clamp"),
|
|
require("tailwind-scrollbar")({ nocompatible: true }),
|
|
],
|
|
theme: {
|
|
extend: {
|
|
backgroundImage: {
|
|
'main': "url('/src/assets/svg/background.svg')",
|
|
},
|
|
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)",
|
|
},
|
|
},
|
|
},
|
|
};
|