mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
a14f8c281b
* chore: store various shades of accent color
* refactor: custom theme selector
* refactor: custom theme selector
* chore: update custom theme input labels
* fix: color generator function logic
* fix: accent color preloaded data
* chore: new theming structure
* chore: update shades calculation logic
* refactor: variable names
* chore: update color scheming
* chore: new color scheming
* refactor: themes folder structure
* chore: update classnames according to new variables
* Revert "chore: update classnames according to new variables"
This reverts commit 60a87453b2.
* chore: remove temp file
194 lines
8.6 KiB
JavaScript
194 lines
8.6 KiB
JavaScript
const convertToRGB = (variableName) => `rgb(var(${variableName}))`;
|
|
|
|
module.exports = {
|
|
darkMode: "class",
|
|
content: ["./pages/**/*.tsx", "./components/**/*.tsx", "./layouts/**/*.tsx", "./ui/**/*.tsx"],
|
|
theme: {
|
|
extend: {
|
|
borderColor: {
|
|
brand: {
|
|
base: convertToRGB("--color-background-80"),
|
|
secondary: convertToRGB("--color-background-90"),
|
|
},
|
|
},
|
|
backgroundColor: {
|
|
brand: {
|
|
base: convertToRGB("--color-background-100"),
|
|
"surface-1": convertToRGB("--color-background-90"),
|
|
"surface-2": convertToRGB("--color-background-80"),
|
|
sidebar: convertToRGB("--color-sidebar-background-100"),
|
|
backdrop: "#131313",
|
|
},
|
|
},
|
|
textColor: {
|
|
brand: {
|
|
base: convertToRGB("--color-text-100"),
|
|
secondary: convertToRGB("--color-text-200"),
|
|
},
|
|
},
|
|
colors: {
|
|
brand: {
|
|
base: convertToRGB("--color-background-100"),
|
|
accent: convertToRGB("--color-primary-100"),
|
|
backdrop: "#131313",
|
|
},
|
|
custom: {
|
|
primary: {
|
|
0: "rgb(255, 255, 255)",
|
|
10: convertToRGB("--color-primary-10"),
|
|
20: convertToRGB("--color-primary-20"),
|
|
30: convertToRGB("--color-primary-30"),
|
|
40: convertToRGB("--color-primary-40"),
|
|
50: convertToRGB("--color-primary-50"),
|
|
60: convertToRGB("--color-primary-60"),
|
|
70: convertToRGB("--color-primary-70"),
|
|
80: convertToRGB("--color-primary-80"),
|
|
90: convertToRGB("--color-primary-90"),
|
|
100: convertToRGB("--color-primary-100"),
|
|
200: convertToRGB("--color-primary-200"),
|
|
300: convertToRGB("--color-primary-300"),
|
|
400: convertToRGB("--color-primary-400"),
|
|
500: convertToRGB("--color-primary-500"),
|
|
600: convertToRGB("--color-primary-600"),
|
|
700: convertToRGB("--color-primary-700"),
|
|
800: convertToRGB("--color-primary-800"),
|
|
900: convertToRGB("--color-primary-900"),
|
|
1000: "rgb(0, 0, 0)",
|
|
DEFAULT: convertToRGB("--color-primary-100"),
|
|
},
|
|
background: {
|
|
0: "rgb(255, 255, 255)",
|
|
10: convertToRGB("--color-background-10"),
|
|
20: convertToRGB("--color-background-20"),
|
|
30: convertToRGB("--color-background-30"),
|
|
40: convertToRGB("--color-background-40"),
|
|
50: convertToRGB("--color-background-50"),
|
|
60: convertToRGB("--color-background-60"),
|
|
70: convertToRGB("--color-background-70"),
|
|
80: convertToRGB("--color-background-80"),
|
|
90: convertToRGB("--color-background-90"),
|
|
100: convertToRGB("--color-background-100"),
|
|
200: convertToRGB("--color-background-200"),
|
|
300: convertToRGB("--color-background-300"),
|
|
400: convertToRGB("--color-background-400"),
|
|
500: convertToRGB("--color-background-500"),
|
|
600: convertToRGB("--color-background-600"),
|
|
700: convertToRGB("--color-background-700"),
|
|
800: convertToRGB("--color-background-800"),
|
|
900: convertToRGB("--color-background-900"),
|
|
1000: "rgb(0, 0, 0)",
|
|
DEFAULT: convertToRGB("--color-background-100"),
|
|
},
|
|
text: {
|
|
0: "rgb(255, 255, 255)",
|
|
10: convertToRGB("--color-text-10"),
|
|
20: convertToRGB("--color-text-20"),
|
|
30: convertToRGB("--color-text-30"),
|
|
40: convertToRGB("--color-text-40"),
|
|
50: convertToRGB("--color-text-50"),
|
|
60: convertToRGB("--color-text-60"),
|
|
70: convertToRGB("--color-text-70"),
|
|
80: convertToRGB("--color-text-80"),
|
|
90: convertToRGB("--color-text-90"),
|
|
100: convertToRGB("--color-text-100"),
|
|
200: convertToRGB("--color-text-200"),
|
|
300: convertToRGB("--color-text-300"),
|
|
400: convertToRGB("--color-text-400"),
|
|
500: convertToRGB("--color-text-500"),
|
|
600: convertToRGB("--color-text-600"),
|
|
700: convertToRGB("--color-text-700"),
|
|
800: convertToRGB("--color-text-800"),
|
|
900: convertToRGB("--color-text-900"),
|
|
1000: "rgb(0, 0, 0)",
|
|
DEFAULT: convertToRGB("--color-text-100"),
|
|
},
|
|
sidebar: {
|
|
background: {
|
|
0: "rgb(255, 255, 255)",
|
|
10: convertToRGB("--color-sidebar-background-10"),
|
|
20: convertToRGB("--color-sidebar-background-20"),
|
|
30: convertToRGB("--color-sidebar-background-30"),
|
|
40: convertToRGB("--color-sidebar-background-40"),
|
|
50: convertToRGB("--color-sidebar-background-50"),
|
|
60: convertToRGB("--color-sidebar-background-60"),
|
|
70: convertToRGB("--color-sidebar-background-70"),
|
|
80: convertToRGB("--color-sidebar-background-80"),
|
|
90: convertToRGB("--color-sidebar-background-90"),
|
|
100: convertToRGB("--color-sidebar-background-100"),
|
|
200: convertToRGB("--color-sidebar-background-200"),
|
|
300: convertToRGB("--color-sidebar-background-300"),
|
|
400: convertToRGB("--color-sidebar-background-400"),
|
|
500: convertToRGB("--color-sidebar-background-500"),
|
|
600: convertToRGB("--color-sidebar-background-600"),
|
|
700: convertToRGB("--color-sidebar-background-700"),
|
|
800: convertToRGB("--color-sidebar-background-800"),
|
|
900: convertToRGB("--color-sidebar-background-900"),
|
|
1000: "rgb(0, 0, 0)",
|
|
DEFAULT: convertToRGB("--color-sidebar-background-100"),
|
|
},
|
|
text: {
|
|
0: "rgb(255, 255, 255)",
|
|
10: convertToRGB("--color-sidebar-text-10"),
|
|
20: convertToRGB("--color-sidebar-text-20"),
|
|
30: convertToRGB("--color-sidebar-text-30"),
|
|
40: convertToRGB("--color-sidebar-text-40"),
|
|
50: convertToRGB("--color-sidebar-text-50"),
|
|
60: convertToRGB("--color-sidebar-text-60"),
|
|
70: convertToRGB("--color-sidebar-text-70"),
|
|
80: convertToRGB("--color-sidebar-text-80"),
|
|
90: convertToRGB("--color-sidebar-text-90"),
|
|
100: convertToRGB("--color-sidebar-text-100"),
|
|
200: convertToRGB("--color-sidebar-text-200"),
|
|
300: convertToRGB("--color-sidebar-text-300"),
|
|
400: convertToRGB("--color-sidebar-text-400"),
|
|
500: convertToRGB("--color-sidebar-text-500"),
|
|
600: convertToRGB("--color-sidebar-text-600"),
|
|
700: convertToRGB("--color-sidebar-text-700"),
|
|
800: convertToRGB("--color-sidebar-text-800"),
|
|
900: convertToRGB("--color-sidebar-text-900"),
|
|
1000: "rgb(0, 0, 0)",
|
|
DEFAULT: convertToRGB("--color-sidebar-text-100"),
|
|
},
|
|
},
|
|
},
|
|
},
|
|
keyframes: {
|
|
leftToaster: {
|
|
"0%": { left: "-20rem" },
|
|
"100%": { left: "0" },
|
|
},
|
|
rightToaster: {
|
|
"0%": { right: "-20rem" },
|
|
"100%": { right: "0" },
|
|
},
|
|
},
|
|
typography: ({ theme }) => ({
|
|
brand: {
|
|
css: {
|
|
"--tw-prose-body": `${convertToRGB("--color-text-base")}`,
|
|
"--tw-prose-p": `${convertToRGB("--color-text-base")}`,
|
|
"--tw-prose-headings": `${convertToRGB("--color-text-base")}`,
|
|
"--tw-prose-lead": `${convertToRGB("--color-text-base")}`,
|
|
"--tw-prose-links": `${convertToRGB("--color-primary-100")}`,
|
|
"--tw-prose-bold": `${convertToRGB("--color-text-base")}`,
|
|
"--tw-prose-counters": `${convertToRGB("--color-text-base")}`,
|
|
"--tw-prose-bullets": `${convertToRGB("--color-text-base")}`,
|
|
"--tw-prose-hr": `${convertToRGB("--color-text-base")}`,
|
|
"--tw-prose-quotes": `${convertToRGB("--color-text-base")}`,
|
|
"--tw-prose-quote-borders": `${convertToRGB("--color-border")}`,
|
|
"--tw-prose-code": `${convertToRGB("--color-text-base")}`,
|
|
"--tw-prose-pre-code": `${convertToRGB("--color-text-base")}`,
|
|
"--tw-prose-pre-bg": `${convertToRGB("--color-bg-base")}`,
|
|
"--tw-prose-th-borders": `${convertToRGB("--color-border")}`,
|
|
"--tw-prose-td-borders": `${convertToRGB("--color-border")}`,
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
fontFamily: {
|
|
custom: ["Inter", "sans-serif"],
|
|
},
|
|
},
|
|
plugins: [require("@tailwindcss/typography")],
|
|
};
|