mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
382 lines
11 KiB
JavaScript
382 lines
11 KiB
JavaScript
import colors from "tailwindcss/colors";
|
|
|
|
const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
export const darkMode = "class";
|
|
export const content = {
|
|
relative: true,
|
|
files: [
|
|
"./components/**/*.tsx",
|
|
"./constants/**/*.{js,ts,jsx,tsx}",
|
|
"./layouts/**/*.tsx",
|
|
"./pages/**/*.tsx",
|
|
"./ui/**/*.tsx",
|
|
"../packages/ui/**/*.{js,ts,jsx,tsx}",
|
|
"../packages/editor/**/src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
};
|
|
export const theme = {
|
|
boxShadow: {
|
|
"custom-shadow-2xs": "var(--color-shadow-2xs)",
|
|
"custom-shadow-xs": "var(--color-shadow-xs)",
|
|
"custom-shadow-sm": "var(--color-shadow-sm)",
|
|
"custom-shadow-rg": "var(--color-shadow-rg)",
|
|
"custom-shadow-md": "var(--color-shadow-md)",
|
|
"custom-shadow-lg": "var(--color-shadow-lg)",
|
|
"custom-shadow-xl": "var(--color-shadow-xl)",
|
|
"custom-shadow-2xl": "var(--color-shadow-2xl)",
|
|
"custom-shadow-3xl": "var(--color-shadow-3xl)",
|
|
"custom-shadow-4xl": "var(--color-shadow-4xl)",
|
|
"custom-sidebar-shadow-2xs": "var(--color-sidebar-shadow-2xs)",
|
|
"custom-sidebar-shadow-xs": "var(--color-sidebar-shadow-xs)",
|
|
"custom-sidebar-shadow-sm": "var(--color-sidebar-shadow-sm)",
|
|
"custom-sidebar-shadow-rg": "var(--color-sidebar-shadow-rg)",
|
|
"custom-sidebar-shadow-md": "var(--color-sidebar-shadow-md)",
|
|
"custom-sidebar-shadow-lg": "var(--color-sidebar-shadow-lg)",
|
|
"custom-sidebar-shadow-xl": "var(--color-sidebar-shadow-xl)",
|
|
"custom-sidebar-shadow-2xl": "var(--color-sidebar-shadow-2xl)",
|
|
"custom-sidebar-shadow-3xl": "var(--color-sidebar-shadow-3xl)",
|
|
"custom-sidebar-shadow-4xl": "var(--color-sidebar-shadow-4xl)",
|
|
"onboarding-shadow-sm": "var(--color-onboarding-shadow-sm)",
|
|
},
|
|
colors: {
|
|
white: colors.white,
|
|
black: colors.black,
|
|
primary: {
|
|
page: {
|
|
"surface-default": "var(--color-primary-0)",
|
|
"surface-light": "var(--color-primary-10)",
|
|
"surface-medium": "var(--color-primary-20)",
|
|
},
|
|
component: {
|
|
"surface-light": "var(--color-primary-30)",
|
|
"surface-medium": "var(--color-primary-40)",
|
|
"surface-dark": "var(--color-primary-50)",
|
|
},
|
|
border: {
|
|
subtle: "var(--color-primary-60)",
|
|
medium: "var(--color-primary-70)",
|
|
strong: "var(--color-primary-80)",
|
|
},
|
|
solid: "var(--color-primary-90)",
|
|
text: {
|
|
subtle: "var(--color-primary-100)",
|
|
medium: "var(--color-primary-110)",
|
|
strong: "var(--color-primary-120)",
|
|
},
|
|
DEFAULT: "var(--color-primary-90)",
|
|
},
|
|
neutral: {
|
|
page: {
|
|
"surface-default": "var(--color-neutral-0)",
|
|
"surface-light": "var(--color-neutral-10)",
|
|
"surface-medium": "var(--color-neutral-20)",
|
|
},
|
|
component: {
|
|
"surface-light": "var(--color-neutral-30)",
|
|
"surface-medium": "var(--color-neutral-40)",
|
|
"surface-dark": "var(--color-neutral-50)",
|
|
},
|
|
border: {
|
|
subtle: "var(--color-neutral-60)",
|
|
medium: "var(--color-neutral-70)",
|
|
strong: "var(--color-neutral-80)",
|
|
},
|
|
solid: "var(--color-neutral-90)",
|
|
text: {
|
|
subtle: "var(--color-neutral-100)",
|
|
medium: "var(--color-neutral-110)",
|
|
strong: "var(--color-neutral-120)",
|
|
},
|
|
DEFAULT: "var(--color-neutral-90)",
|
|
},
|
|
success: {
|
|
page: {
|
|
"surface-default": "var(--color-success-0)",
|
|
"surface-light": "var(--color-success-10)",
|
|
"surface-medium": "var(--color-success-20)",
|
|
},
|
|
component: {
|
|
"surface-light": "var(--color-success-30)",
|
|
"surface-medium": "var(--color-success-40)",
|
|
"surface-dark": "var(--color-success-50)",
|
|
},
|
|
border: {
|
|
subtle: "var(--color-success-60)",
|
|
medium: "var(--color-success-70)",
|
|
strong: "var(--color-success-80)",
|
|
},
|
|
solid: "var(--color-success-90)",
|
|
text: {
|
|
subtle: "var(--color-success-100)",
|
|
medium: "var(--color-success-110)",
|
|
strong: "var(--color-success-120)",
|
|
},
|
|
DEFAULT: "var(--color-success-90)",
|
|
},
|
|
warning: {
|
|
page: {
|
|
"surface-default": "var(--color-warning-0)",
|
|
"surface-light": "var(--color-warning-10)",
|
|
"surface-medium": "var(--color-warning-20)",
|
|
},
|
|
component: {
|
|
"surface-light": "var(--color-warning-30)",
|
|
"surface-medium": "var(--color-warning-40)",
|
|
"surface-dark": "var(--color-warning-50)",
|
|
},
|
|
border: {
|
|
subtle: "var(--color-warning-60)",
|
|
medium: "var(--color-warning-70)",
|
|
strong: "var(--color-warning-80)",
|
|
},
|
|
solid: "var(--color-warning-90)",
|
|
text: {
|
|
subtle: "var(--color-warning-100)",
|
|
medium: "var(--color-warning-110)",
|
|
strong: "var(--color-warning-120)",
|
|
},
|
|
DEFAULT: "var(--color-warning-90)",
|
|
},
|
|
error: {
|
|
page: {
|
|
"surface-default": "var(--color-error-0)",
|
|
"surface-light": "var(--color-error-10)",
|
|
"surface-medium": "var(--color-error-20)",
|
|
},
|
|
component: {
|
|
"surface-light": "var(--color-error-30)",
|
|
"surface-medium": "var(--color-error-40)",
|
|
"surface-dark": "var(--color-error-50)",
|
|
},
|
|
border: {
|
|
subtle: "var(--color-error-60)",
|
|
medium: "var(--color-error-70)",
|
|
strong: "var(--color-error-80)",
|
|
},
|
|
solid: "var(--color-error-90)",
|
|
text: {
|
|
subtle: "var(--color-error-100)",
|
|
medium: "var(--color-error-110)",
|
|
strong: "var(--color-error-120)",
|
|
},
|
|
DEFAULT: "var(--color-error-90)",
|
|
},
|
|
info: {
|
|
page: {
|
|
"surface-default": "var(--color-info-0)",
|
|
"surface-light": "var(--color-info-10)",
|
|
"surface-medium": "var(--color-info-20)",
|
|
},
|
|
component: {
|
|
"surface-light": "var(--color-info-30)",
|
|
"surface-medium": "var(--color-info-40)",
|
|
"surface-dark": "var(--color-info-50)",
|
|
},
|
|
border: {
|
|
subtle: "var(--color-info-60)",
|
|
medium: "var(--color-info-70)",
|
|
strong: "var(--color-info-80)",
|
|
},
|
|
solid: "var(--color-info-90)",
|
|
text: {
|
|
subtle: "var(--color-info-100)",
|
|
medium: "var(--color-info-110)",
|
|
strong: "var(--color-info-120)",
|
|
},
|
|
DEFAULT: "var(--color-info-90)",
|
|
},
|
|
},
|
|
extend: {
|
|
keyframes: {
|
|
leftToaster: {
|
|
"0%": { left: "-20rem" },
|
|
"100%": { left: "0" },
|
|
},
|
|
rightToaster: {
|
|
"0%": { right: "-20rem" },
|
|
"100%": { right: "0" },
|
|
},
|
|
"bar-loader": {
|
|
from: { left: "-100%" },
|
|
to: { left: "100%" },
|
|
},
|
|
},
|
|
typography: () => ({
|
|
brand: {
|
|
css: {
|
|
"--tw-prose-body": convertToRGB("--color-text-100"),
|
|
"--tw-prose-p": convertToRGB("--color-text-100"),
|
|
"--tw-prose-headings": convertToRGB("--color-text-100"),
|
|
"--tw-prose-lead": convertToRGB("--color-text-100"),
|
|
"--tw-prose-links": convertToRGB("--color-primary-100"),
|
|
"--tw-prose-bold": convertToRGB("--color-text-100"),
|
|
"--tw-prose-counters": convertToRGB("--color-text-100"),
|
|
"--tw-prose-bullets": convertToRGB("--color-text-100"),
|
|
"--tw-prose-hr": convertToRGB("--color-text-100"),
|
|
"--tw-prose-quotes": convertToRGB("--color-text-100"),
|
|
"--tw-prose-quote-borders": convertToRGB("--color-border-200"),
|
|
"--tw-prose-code": convertToRGB("--color-text-100"),
|
|
"--tw-prose-pre-code": convertToRGB("--color-text-100"),
|
|
"--tw-prose-pre-bg": convertToRGB("--color-background-100"),
|
|
"--tw-prose-th-borders": convertToRGB("--color-border-200"),
|
|
"--tw-prose-td-borders": convertToRGB("--color-border-200"),
|
|
},
|
|
},
|
|
}),
|
|
screens: {
|
|
"3xl": "1792px",
|
|
},
|
|
// scale down font sizes to 90% of default
|
|
fontSize: {
|
|
xs: "0.675rem",
|
|
sm: "0.7875rem",
|
|
base: "0.9rem",
|
|
lg: "1.0125rem",
|
|
xl: "1.125rem",
|
|
"2xl": "1.35rem",
|
|
"3xl": "1.6875rem",
|
|
"4xl": "2.25rem",
|
|
"5xl": "2.7rem",
|
|
"6xl": "3.375rem",
|
|
"7xl": "4.05rem",
|
|
"8xl": "5.4rem",
|
|
"9xl": "7.2rem",
|
|
},
|
|
// scale down spacing to 90% of default
|
|
padding: {
|
|
0: "0",
|
|
0.5: "0.1125rem",
|
|
1: "0.225rem",
|
|
1.5: "0.3375rem",
|
|
2: "0.45rem",
|
|
2.5: "0.5625rem",
|
|
3: "0.675rem",
|
|
3.5: "0.7875rem",
|
|
4: "0.9rem",
|
|
5: "1.125rem",
|
|
6: "1.35rem",
|
|
7: "1.575rem",
|
|
8: "1.8rem",
|
|
9: "2.025rem",
|
|
10: "2.25rem",
|
|
11: "2.475rem",
|
|
12: "2.7rem",
|
|
16: "3.6rem",
|
|
20: "4.5rem",
|
|
24: "5.4rem",
|
|
32: "7.2rem",
|
|
40: "9rem",
|
|
48: "10.8rem",
|
|
56: "12.6rem",
|
|
64: "14.4rem",
|
|
72: "16.2rem",
|
|
80: "18rem",
|
|
96: "21.6rem",
|
|
},
|
|
margin: {
|
|
0: "0",
|
|
0.5: "0.1125rem",
|
|
1: "0.225rem",
|
|
1.5: "0.3375rem",
|
|
2: "0.45rem",
|
|
2.5: "0.5625rem",
|
|
3: "0.675rem",
|
|
3.5: "0.7875rem",
|
|
4: "0.9rem",
|
|
5: "1.125rem",
|
|
6: "1.35rem",
|
|
7: "1.575rem",
|
|
8: "1.8rem",
|
|
9: "2.025rem",
|
|
10: "2.25rem",
|
|
11: "2.475rem",
|
|
12: "2.7rem",
|
|
16: "3.6rem",
|
|
20: "4.5rem",
|
|
24: "5.4rem",
|
|
32: "7.2rem",
|
|
40: "9rem",
|
|
48: "10.8rem",
|
|
56: "12.6rem",
|
|
64: "14.4rem",
|
|
72: "16.2rem",
|
|
80: "18rem",
|
|
96: "21.6rem",
|
|
},
|
|
space: {
|
|
0: "0",
|
|
0.5: "0.1125rem",
|
|
1: "0.225rem",
|
|
1.5: "0.3375rem",
|
|
2: "0.45rem",
|
|
2.5: "0.5625rem",
|
|
3: "0.675rem",
|
|
3.5: "0.7875rem",
|
|
4: "0.9rem",
|
|
5: "1.125rem",
|
|
6: "1.35rem",
|
|
7: "1.575rem",
|
|
8: "1.8rem",
|
|
9: "2.025rem",
|
|
10: "2.25rem",
|
|
11: "2.475rem",
|
|
12: "2.7rem",
|
|
16: "3.6rem",
|
|
20: "4.5rem",
|
|
24: "5.4rem",
|
|
32: "7.2rem",
|
|
40: "9rem",
|
|
48: "10.8rem",
|
|
56: "12.6rem",
|
|
64: "14.4rem",
|
|
72: "16.2rem",
|
|
80: "18rem",
|
|
96: "21.6rem",
|
|
},
|
|
gap: {
|
|
0: "0",
|
|
0.5: "0.1125rem",
|
|
1: "0.225rem",
|
|
1.5: "0.3375rem",
|
|
2: "0.45rem",
|
|
2.5: "0.5625rem",
|
|
3: "0.675rem",
|
|
3.5: "0.7875rem",
|
|
4: "0.9rem",
|
|
5: "1.125rem",
|
|
6: "1.35rem",
|
|
7: "1.575rem",
|
|
8: "1.8rem",
|
|
9: "2.025rem",
|
|
10: "2.25rem",
|
|
11: "2.475rem",
|
|
12: "2.7rem",
|
|
16: "3.6rem",
|
|
20: "4.5rem",
|
|
24: "5.4rem",
|
|
32: "7.2rem",
|
|
40: "9rem",
|
|
48: "10.8rem",
|
|
56: "12.6rem",
|
|
64: "14.4rem",
|
|
72: "16.2rem",
|
|
80: "18rem",
|
|
96: "21.6rem",
|
|
},
|
|
backgroundImage: {
|
|
"onboarding-gradient-100": "var( --gradient-onboarding-100)",
|
|
"onboarding-gradient-200": "var( --gradient-onboarding-200)",
|
|
"onboarding-gradient-300": "var( --gradient-onboarding-300)",
|
|
},
|
|
},
|
|
fontFamily: {
|
|
custom: ["Inter", "sans-serif"],
|
|
},
|
|
};
|
|
export const plugins = [
|
|
require("tailwindcss-animate"),
|
|
require("@tailwindcss/typography"),
|
|
];
|