298 lines
8.6 KiB
TypeScript
298 lines
8.6 KiB
TypeScript
import plugin from "tailwindcss/plugin";
|
|
import { typography } from "./typography";
|
|
// @ts-expect-error: lib of tailwind has no types
|
|
import { parseColor } from "tailwindcss/lib/util/color";
|
|
|
|
/* Converts HEX color to RGB */
|
|
const toRGB = (value: string) =>
|
|
"rgb(" + parseColor(value).color.join(" ") + ")";
|
|
|
|
const mkBorderUtils = (
|
|
theme: (n: string) => unknown,
|
|
prefix: string,
|
|
cssProperty: string,
|
|
) => ({
|
|
// - def colors
|
|
[`.${prefix}-def-1`]: {
|
|
[cssProperty]: theme("colors.secondary.50"),
|
|
},
|
|
[`.${prefix}-def-2`]: {
|
|
[cssProperty]: theme("colors.secondary.100"),
|
|
},
|
|
[`.${prefix}-def-3`]: {
|
|
[cssProperty]: theme("colors.secondary.200"),
|
|
},
|
|
[`.${prefix}-def-4`]: {
|
|
[cssProperty]: theme("colors.secondary.300"),
|
|
},
|
|
[`.${prefix}-def-5`]: {
|
|
[cssProperty]: theme("colors.secondary.400"),
|
|
},
|
|
// - inverse colors
|
|
[`.${prefix}-inv-1`]: {
|
|
[cssProperty]: theme("colors.secondary.800"),
|
|
},
|
|
[`.${prefix}-inv-2`]: {
|
|
[cssProperty]: theme("colors.secondary.900"),
|
|
},
|
|
[`.${prefix}-inv-3`]: {
|
|
[cssProperty]: theme("colors.secondary.900"),
|
|
},
|
|
[`.${prefix}-inv-4`]: {
|
|
[cssProperty]: theme("colors.secondary.950"),
|
|
},
|
|
[`.${prefix}-inv-5`]: {
|
|
[cssProperty]: theme("colors.black"),
|
|
},
|
|
|
|
[`.${prefix}-int-1`]: {
|
|
[cssProperty]: theme("colors.info.500"),
|
|
},
|
|
[`.${prefix}-int-2`]: {
|
|
[cssProperty]: theme("colors.info.600"),
|
|
},
|
|
[`.${prefix}-int-3`]: {
|
|
[cssProperty]: theme("colors.info.700"),
|
|
},
|
|
[`.${prefix}-int-4`]: {
|
|
[cssProperty]: theme("colors.info.800"),
|
|
},
|
|
|
|
[`.${prefix}-semantic-1`]: {
|
|
[cssProperty]: theme("colors.error.500"),
|
|
},
|
|
[`.${prefix}-semantic-2`]: {
|
|
[cssProperty]: theme("colors.error.600"),
|
|
},
|
|
[`.${prefix}-semantic-3`]: {
|
|
[cssProperty]: theme("colors.error.700"),
|
|
},
|
|
[`.${prefix}-semantic-4`]: {
|
|
[cssProperty]: theme("colors.error.800"),
|
|
},
|
|
});
|
|
|
|
export default plugin.withOptions(
|
|
(_options = {}) =>
|
|
({ addUtilities, theme, addVariant, e }) => {
|
|
// @ts-expect-error: lib of tailwind has no types
|
|
addVariant("popover-open", ({ modifySelectors, separator }) => {
|
|
// @ts-expect-error: lib of tailwind has no types
|
|
modifySelectors(({ className }) => {
|
|
return `.${e(`popover-open${separator}${className}`)}:popover-open`;
|
|
});
|
|
});
|
|
addUtilities({
|
|
// Background colors
|
|
".bg-def-1": {
|
|
backgroundColor: theme("colors.white"),
|
|
},
|
|
".bg-def-2": {
|
|
backgroundColor: theme("colors.secondary.50"),
|
|
},
|
|
".bg-def-3": {
|
|
backgroundColor: theme("colors.secondary.100"),
|
|
},
|
|
".bg-def-4": {
|
|
backgroundColor: theme("colors.secondary.200"),
|
|
},
|
|
".bg-def-5": {
|
|
backgroundColor: theme("colors.secondary.300"),
|
|
},
|
|
// bg inverse
|
|
".bg-inv-1": {
|
|
backgroundColor: theme("colors.primary.600"),
|
|
},
|
|
".bg-inv-2": {
|
|
backgroundColor: theme("colors.primary.700"),
|
|
},
|
|
".bg-inv-3": {
|
|
backgroundColor: theme("colors.primary.800"),
|
|
},
|
|
".bg-inv-4": {
|
|
backgroundColor: theme("colors.primary.900"),
|
|
},
|
|
".bg-inv-5": {
|
|
backgroundColor: theme("colors.primary.950"),
|
|
},
|
|
// bg inverse accent
|
|
".bg-acc-1": {
|
|
backgroundColor: theme("colors.primary.50"),
|
|
},
|
|
".bg-acc-2": {
|
|
backgroundColor: theme("colors.secondary.100"),
|
|
},
|
|
".bg-acc-3": {
|
|
backgroundColor: theme("colors.secondary.200"),
|
|
},
|
|
".bg-acc-4": {
|
|
backgroundColor: theme("colors.secondary.300"),
|
|
},
|
|
|
|
// bg inverse accent
|
|
".bg-semantic-1": {
|
|
backgroundColor: theme("colors.error.50"),
|
|
},
|
|
".bg-semantic-2": {
|
|
backgroundColor: theme("colors.error.100"),
|
|
},
|
|
".bg-semantic-3": {
|
|
backgroundColor: theme("colors.error.200"),
|
|
},
|
|
".bg-semantic-4": {
|
|
backgroundColor: theme("colors.error.300"),
|
|
},
|
|
|
|
// bg inverse accent
|
|
".bg-inv-acc-1": {
|
|
backgroundColor: theme("colors.secondary.500"),
|
|
},
|
|
".bg-inv-acc-2": {
|
|
backgroundColor: theme("colors.secondary.600"),
|
|
},
|
|
".bg-inv-acc-3": {
|
|
backgroundColor: theme("colors.secondary.700"),
|
|
},
|
|
".bg-inv-acc-4": {
|
|
backgroundColor: theme("colors.primary.900"),
|
|
},
|
|
|
|
// Text colors
|
|
".fg-def-1": {
|
|
color: theme("colors.secondary.950"),
|
|
},
|
|
".fg-def-2": {
|
|
color: theme("colors.secondary.900"),
|
|
},
|
|
".fg-def-3": {
|
|
color: theme("colors.secondary.700"),
|
|
},
|
|
".fg-def-4": {
|
|
color: theme("colors.secondary.500"),
|
|
},
|
|
// fg inverse
|
|
".fg-inv-1": {
|
|
color: theme("colors.white"),
|
|
},
|
|
".fg-inv-2": {
|
|
color: theme("colors.secondary.100"),
|
|
},
|
|
".fg-inv-3": {
|
|
color: theme("colors.secondary.300"),
|
|
},
|
|
".fg-inv-4": {
|
|
color: theme("colors.secondary.400"),
|
|
},
|
|
|
|
".fg-semantic-1": {
|
|
color: theme("colors.error.500"),
|
|
},
|
|
".fg-semantic-2": {
|
|
color: theme("colors.error.600"),
|
|
},
|
|
".fg-semantic-3": {
|
|
color: theme("colors.error.700"),
|
|
},
|
|
".fg-semantic-4": {
|
|
color: theme("colors.error.800"),
|
|
},
|
|
|
|
...mkBorderUtils(theme, "border", "borderColor"),
|
|
...mkBorderUtils(theme, "outline", "outlineColor"),
|
|
|
|
// Example: dark mode utilities (all elements within <html class="dark"> )
|
|
// ".dark .bg-def-1": {
|
|
// backgroundColor: theme("colors.black"),
|
|
// },
|
|
// ".dark .bg-def-2": {
|
|
// backgroundColor: theme("colors.primary.900"),
|
|
// },
|
|
// ".dark .bg-def-3": {
|
|
// backgroundColor: theme("colors.primary.800"),
|
|
// },
|
|
// ".dark .bg-def-4": {
|
|
// backgroundColor: theme("colors.primary.700"),
|
|
// },
|
|
// ".dark .bg-def-5": {
|
|
// backgroundColor: theme("colors.primary.600"),
|
|
// },
|
|
});
|
|
// add more base styles
|
|
},
|
|
// add configuration which is merged with the final config
|
|
() => ({
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
white: toRGB("#ffffff"),
|
|
black: toRGB("#000000"),
|
|
primary: {
|
|
50: toRGB("#f4f9f9"),
|
|
100: toRGB("#dbeceb"),
|
|
200: toRGB("#b6d9d6"),
|
|
300: toRGB("#8abebc"),
|
|
400: toRGB("#478585"),
|
|
500: toRGB("#526f6f"),
|
|
600: toRGB("#4b6667"),
|
|
700: toRGB("#345253"),
|
|
800: toRGB("#2a4647"),
|
|
900: toRGB("#1f3536"),
|
|
950: toRGB("#162324"),
|
|
},
|
|
secondary: {
|
|
50: toRGB("#f7f9f9"),
|
|
100: toRGB("#e7f2f4"),
|
|
200: toRGB("#d7e8ea"),
|
|
300: toRGB("#afc6ca"),
|
|
400: toRGB("#8fb2b6"),
|
|
500: toRGB("#7b9a9e"),
|
|
600: toRGB("#4f747a"),
|
|
700: toRGB("#415e63"),
|
|
800: toRGB("#445f64"),
|
|
900: toRGB("#2b4347"),
|
|
950: toRGB("#0d1415"),
|
|
},
|
|
info: {
|
|
50: toRGB("#eff9ff"),
|
|
100: toRGB("#dff2ff"),
|
|
200: toRGB("#b8e8ff"),
|
|
300: toRGB("#78d6ff"),
|
|
400: toRGB("#2cc0ff"),
|
|
500: toRGB("#06aaf1"),
|
|
600: toRGB("#006ca7"),
|
|
700: toRGB("#006ca7"),
|
|
800: toRGB("#025b8a"),
|
|
900: toRGB("#084c72"),
|
|
950: toRGB("#06304b"),
|
|
},
|
|
error: {
|
|
50: toRGB("#fcf3f8"),
|
|
100: toRGB("#f9eaf4"),
|
|
200: toRGB("#f5d5e9"),
|
|
300: toRGB("#ea9ecb"),
|
|
400: toRGB("#e383ba"),
|
|
500: toRGB("#d75d9f"),
|
|
600: toRGB("#c43e81"),
|
|
700: toRGB("#a82e67"),
|
|
800: toRGB("#8c2855"),
|
|
900: toRGB("#75264a"),
|
|
950: toRGB("#461129"),
|
|
},
|
|
},
|
|
boxShadow: {
|
|
"input-active": "0px 0px 0px 1px #FFF, 0px 0px 0px 2px #203637",
|
|
"inner-primary":
|
|
"2px 2px 0px 0px var(--clr-bg-inv-acc-3, #415E63) inset",
|
|
"inner-primary-active":
|
|
"0px 0px 0px 1px #FFF, 0px 0px 0px 2px var(--clr-bg-inv-acc-4, #203637)",
|
|
"inner-secondary":
|
|
"-2px -2px 0px 0px #CEDFE2 inset, 2px 2px 0px 0px white inset",
|
|
"inner-secondary-active":
|
|
"0px 0px 0px 1px white, 0px 0px 0px 2px var(--clr-bg-inv-acc-4, #203637), 2px 2px 0px 0px var(--clr-bg-inv-acc-2, #4F747A) inset",
|
|
},
|
|
},
|
|
...typography,
|
|
},
|
|
}),
|
|
);
|