mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
chore: update shades calculation logic
This commit is contained in:
Aaryan Khandelwal
parent
f71481b2e4
commit
8acf7c34ed
@ -21,14 +21,12 @@ type Props = {
|
||||
};
|
||||
|
||||
const defaultValues = {
|
||||
accent: "#fe5050",
|
||||
background: "#fff7f7",
|
||||
border: "#ffc9c9",
|
||||
text: "#ffc9c9",
|
||||
accent: "#fe5050",
|
||||
sidebar: "#ffffff",
|
||||
darkPalette: false,
|
||||
palette: "",
|
||||
sidebar: "#ffffff",
|
||||
textBase: "#430000",
|
||||
textSecondary: "#323232",
|
||||
};
|
||||
|
||||
export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
|
||||
@ -50,14 +48,12 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
|
||||
|
||||
const handleFormSubmit = async (formData: ICustomTheme) => {
|
||||
const payload: ICustomTheme = {
|
||||
accent: formData.accent,
|
||||
background: formData.background,
|
||||
border: formData.border,
|
||||
darkPalette: darkPalette,
|
||||
palette: `${formData.background},${formData.border},${formData.sidebar},${formData.accent},${formData.textBase},${formData.textSecondary}`,
|
||||
text: formData.text,
|
||||
accent: formData.accent,
|
||||
sidebar: formData.sidebar,
|
||||
textBase: formData.textBase,
|
||||
textSecondary: formData.textSecondary,
|
||||
darkPalette: darkPalette,
|
||||
palette: `${formData.background},${formData.text},${formData.accent},${formData.sidebar}`,
|
||||
};
|
||||
|
||||
await userService
|
||||
@ -93,7 +89,7 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
|
||||
<div className="space-y-5">
|
||||
<h3 className="text-lg font-semibold text-brand-base">Customize your theme</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-3">
|
||||
<div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2 md:grid-cols-4">
|
||||
<div className="flex flex-col items-start gap-2">
|
||||
<h3 className="text-left text-sm font-medium text-brand-secondary">
|
||||
Background color
|
||||
@ -108,23 +104,10 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-start gap-2">
|
||||
<h3 className="text-left text-sm font-medium text-brand-secondary">Border color</h3>
|
||||
<h3 className="text-left text-sm font-medium text-brand-secondary">Text color</h3>
|
||||
<ColorPickerInput
|
||||
name="border"
|
||||
error={errors.border}
|
||||
watch={watch}
|
||||
setValue={setValue}
|
||||
register={register}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-start gap-2">
|
||||
<h3 className="text-left text-sm font-medium text-brand-secondary">
|
||||
Sidebar background color
|
||||
</h3>
|
||||
<ColorPickerInput
|
||||
name="sidebar"
|
||||
error={errors.sidebar}
|
||||
name="text"
|
||||
error={errors.text}
|
||||
watch={watch}
|
||||
setValue={setValue}
|
||||
register={register}
|
||||
@ -144,24 +127,11 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
|
||||
|
||||
<div className="flex flex-col items-start gap-2">
|
||||
<h3 className="text-left text-sm font-medium text-brand-secondary">
|
||||
Primary text color
|
||||
Sidebar background color
|
||||
</h3>
|
||||
<ColorPickerInput
|
||||
name="textBase"
|
||||
error={errors.textBase}
|
||||
watch={watch}
|
||||
setValue={setValue}
|
||||
register={register}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-start gap-2">
|
||||
<h3 className="text-left text-sm font-medium text-brand-secondary">
|
||||
Secondary text color
|
||||
</h3>
|
||||
<ColorPickerInput
|
||||
name="textSecondary"
|
||||
error={errors.textSecondary}
|
||||
name="sidebar"
|
||||
error={errors.sidebar}
|
||||
watch={watch}
|
||||
setValue={setValue}
|
||||
register={register}
|
||||
|
||||
@ -1,56 +1,15 @@
|
||||
import { TRgb, hexToRgb } from "helpers/color.helper";
|
||||
|
||||
export const applyTheme = (palette: string, isDarkPalette: boolean) => {
|
||||
// palette: [bg, border, sidebarBg, accent, textBase, textSecondary, scheme]
|
||||
const values: string[] = palette.split(",");
|
||||
values.push(isDarkPalette ? "dark" : "light");
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const bgShades = calculateShades(values[0]);
|
||||
const accentShades = calculateShades(values[3]);
|
||||
|
||||
const shade = (i === 0 ? 50 : i * 100) as keyof TShades;
|
||||
|
||||
const bgRgbValues = `${bgShades[shade].r}, ${bgShades[shade].g}, ${bgShades[shade].b}`;
|
||||
const accentRgbValues = `${accentShades[shade].r}, ${accentShades[shade].g}, ${accentShades[shade].b}`;
|
||||
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty(`--color-bg-${shade}`, bgRgbValues);
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty(`--color-accent-${shade}`, accentRgbValues);
|
||||
}
|
||||
|
||||
const border = hexToRgb(values[1]);
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty("--color-border", `${border.r}, ${border.g}, ${border.b}`);
|
||||
|
||||
const sidebarBg = hexToRgb(values[2]);
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty("--color-bg-sidebar", `${sidebarBg.r}, ${sidebarBg.g}, ${sidebarBg.b}`);
|
||||
|
||||
const textBase = hexToRgb(values[4]);
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty("--color-text-base", `${textBase.r}, ${textBase.g}, ${textBase.b}`);
|
||||
|
||||
const textSecondary = hexToRgb(values[5]);
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty(
|
||||
"--color-text-secondary",
|
||||
`${textSecondary.r}, ${textSecondary.g}, ${textSecondary.b}`
|
||||
);
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty("--color-scheme", values[6]);
|
||||
};
|
||||
|
||||
type TShades = {
|
||||
10: TRgb;
|
||||
20: TRgb;
|
||||
30: TRgb;
|
||||
40: TRgb;
|
||||
50: TRgb;
|
||||
60: TRgb;
|
||||
70: TRgb;
|
||||
80: TRgb;
|
||||
90: TRgb;
|
||||
100: TRgb;
|
||||
200: TRgb;
|
||||
300: TRgb;
|
||||
@ -60,38 +19,33 @@ type TShades = {
|
||||
700: TRgb;
|
||||
800: TRgb;
|
||||
900: TRgb;
|
||||
950: TRgb;
|
||||
};
|
||||
|
||||
const calculateShades = (hexValue: string): TShades => {
|
||||
const shades: Partial<TShades> = {};
|
||||
const { r, g, b } = hexToRgb(hexValue);
|
||||
|
||||
const convertHexToSpecificShade = (shade: number): TRgb => {
|
||||
const { r, g, b } = hexToRgb(hexValue);
|
||||
|
||||
if (shade > 500) {
|
||||
let decimalValue = 0.1;
|
||||
|
||||
if (shade === 600) decimalValue = 0.9;
|
||||
else if (shade === 700) decimalValue = 0.8;
|
||||
else if (shade === 800) decimalValue = 0.7;
|
||||
else if (shade === 900) decimalValue = 0.6;
|
||||
|
||||
const newR = Math.ceil(r * decimalValue);
|
||||
const newG = Math.ceil(g * decimalValue);
|
||||
const newB = Math.ceil(b * decimalValue);
|
||||
|
||||
return {
|
||||
r: newR,
|
||||
g: newG,
|
||||
b: newB,
|
||||
};
|
||||
} else {
|
||||
const decimalValue = 1 - (shade * 2) / 1000;
|
||||
if (shade <= 100) {
|
||||
const decimalValue = (100 - shade) / 100;
|
||||
|
||||
const newR = Math.floor(r + (255 - r) * decimalValue);
|
||||
const newG = Math.floor(g + (255 - g) * decimalValue);
|
||||
const newB = Math.floor(b + (255 - b) * decimalValue);
|
||||
|
||||
return {
|
||||
r: newR,
|
||||
g: newG,
|
||||
b: newB,
|
||||
};
|
||||
} else {
|
||||
const decimalValue = 1 - Math.ceil((shade - 100) / 100) / 10;
|
||||
|
||||
const newR = Math.ceil(r * decimalValue);
|
||||
const newG = Math.ceil(g * decimalValue);
|
||||
const newB = Math.ceil(b * decimalValue);
|
||||
|
||||
return {
|
||||
r: newR,
|
||||
g: newG,
|
||||
@ -100,8 +54,86 @@ const calculateShades = (hexValue: string): TShades => {
|
||||
}
|
||||
};
|
||||
|
||||
shades[50] = convertHexToSpecificShade(50);
|
||||
for (let i = 10; i <= 90; i += 10) shades[i as keyof TShades] = convertHexToSpecificShade(i);
|
||||
for (let i = 100; i <= 900; i += 100) shades[i as keyof TShades] = convertHexToSpecificShade(i);
|
||||
|
||||
shades[950 as keyof TShades] = convertHexToSpecificShade(950);
|
||||
|
||||
return shades as TShades;
|
||||
};
|
||||
|
||||
export const applyTheme = (palette: string, isDarkPalette: boolean) => {
|
||||
// palette: [bg, text, accent, sidebarBg]
|
||||
const values: string[] = palette.split(",");
|
||||
values.push(isDarkPalette ? "dark" : "light");
|
||||
|
||||
const bgShades = calculateShades(values[0]);
|
||||
const textShades = calculateShades(values[1]);
|
||||
const accentShades = calculateShades(values[2]);
|
||||
const sidebarShades = calculateShades(values[3]);
|
||||
|
||||
for (let i = 10; i <= 90; i += 10) {
|
||||
const shade = i as keyof TShades;
|
||||
|
||||
const bgRgbValues = `${bgShades[shade].r}, ${bgShades[shade].g}, ${bgShades[shade].b}`;
|
||||
const textRgbValues = `${textShades[shade].r}, ${textShades[shade].g}, ${textShades[shade].b}`;
|
||||
const accentRgbValues = `${accentShades[shade].r}, ${accentShades[shade].g}, ${accentShades[shade].b}`;
|
||||
const sidebarRgbValues = `${sidebarShades[shade].r}, ${sidebarShades[shade].g}, ${sidebarShades[shade].b}`;
|
||||
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty(`--color-bg-${shade}`, bgRgbValues);
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty(`--color-text-${shade}`, textRgbValues);
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty(`--color-accent-${shade}`, accentRgbValues);
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty(`--color-sidebar-${shade}`, sidebarRgbValues);
|
||||
}
|
||||
for (let i = 100; i <= 900; i += 100) {
|
||||
const shade = i as keyof TShades;
|
||||
|
||||
const bgRgbValues = `${bgShades[shade].r}, ${bgShades[shade].g}, ${bgShades[shade].b}`;
|
||||
const textRgbValues = `${textShades[shade].r}, ${textShades[shade].g}, ${textShades[shade].b}`;
|
||||
const accentRgbValues = `${accentShades[shade].r}, ${accentShades[shade].g}, ${accentShades[shade].b}`;
|
||||
const sidebarRgbValues = `${sidebarShades[shade].r}, ${sidebarShades[shade].g}, ${sidebarShades[shade].b}`;
|
||||
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty(`--color-bg-${shade}`, bgRgbValues);
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty(`--color-text-${shade}`, textRgbValues);
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty(`--color-accent-${shade}`, accentRgbValues);
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty(`--color-sidebar-${shade}`, sidebarRgbValues);
|
||||
}
|
||||
|
||||
const bgRgbValues = `${bgShades[950].r}, ${bgShades[950].g}, ${bgShades[950].b}`;
|
||||
const textRgbValues = `${textShades[950].r}, ${textShades[950].g}, ${textShades[950].b}`;
|
||||
const accentRgbValues = `${accentShades[950].r}, ${accentShades[950].g}, ${accentShades[950].b}`;
|
||||
const sidebarRgbValues = `${sidebarShades[950].r}, ${sidebarShades[950].g}, ${sidebarShades[950].b}`;
|
||||
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty(`--color-bg-${950}`, bgRgbValues);
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty(`--color-text-${950}`, textRgbValues);
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty(`--color-accent-${950}`, accentRgbValues);
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty(`--color-sidebar-${950}`, sidebarRgbValues);
|
||||
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty("--color-scheme", values[4]);
|
||||
};
|
||||
|
||||
@ -13,31 +13,73 @@ const Colors: NextPage = () => (
|
||||
<div>
|
||||
Accent:
|
||||
<div className="flex flex-wrap">
|
||||
<div className="h-20 w-20 bg-brand-accent-50" />
|
||||
<div className="h-20 w-20 bg-brand-accent-100" />
|
||||
<div className="h-20 w-20 bg-brand-accent-200" />
|
||||
<div className="h-20 w-20 bg-brand-accent-300" />
|
||||
<div className="h-20 w-20 bg-brand-accent-400" />
|
||||
<div className="h-20 w-20 bg-brand-accent-500" />
|
||||
<div className="h-20 w-20 bg-brand-accent-600" />
|
||||
<div className="h-20 w-20 bg-brand-accent-700" />
|
||||
<div className="h-20 w-20 bg-brand-accent-800" />
|
||||
<div className="h-20 w-20 bg-brand-accent-900" />
|
||||
<div className="h-12 w-12 bg-custom-accent-10" />
|
||||
<div className="h-12 w-12 bg-custom-accent-20" />
|
||||
<div className="h-12 w-12 bg-custom-accent-30" />
|
||||
<div className="h-12 w-12 bg-custom-accent-40" />
|
||||
<div className="h-12 w-12 bg-custom-accent-50" />
|
||||
<div className="h-12 w-12 bg-custom-accent-60" />
|
||||
<div className="h-12 w-12 bg-custom-accent-70" />
|
||||
<div className="h-12 w-12 bg-custom-accent-80" />
|
||||
<div className="h-12 w-12 bg-custom-accent-90" />
|
||||
<div className="h-12 w-12 bg-custom-accent-100" />
|
||||
<div className="h-12 w-12 bg-custom-accent-200" />
|
||||
<div className="h-12 w-12 bg-custom-accent-300" />
|
||||
<div className="h-12 w-12 bg-custom-accent-400" />
|
||||
<div className="h-12 w-12 bg-custom-accent-500" />
|
||||
<div className="h-12 w-12 bg-custom-accent-600" />
|
||||
<div className="h-12 w-12 bg-custom-accent-700" />
|
||||
<div className="h-12 w-12 bg-custom-accent-800" />
|
||||
<div className="h-12 w-12 bg-custom-accent-900" />
|
||||
<div className="h-12 w-12 bg-custom-accent-950" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
Background:
|
||||
<div className="flex flex-wrap">
|
||||
<div className="h-20 w-20 bg-brand-bg-50" />
|
||||
<div className="h-20 w-20 bg-brand-bg-100" />
|
||||
<div className="h-20 w-20 bg-brand-bg-200" />
|
||||
<div className="h-20 w-20 bg-brand-bg-300" />
|
||||
<div className="h-20 w-20 bg-brand-bg-400" />
|
||||
<div className="h-20 w-20 bg-brand-bg-500" />
|
||||
<div className="h-20 w-20 bg-brand-bg-600" />
|
||||
<div className="h-20 w-20 bg-brand-bg-700" />
|
||||
<div className="h-20 w-20 bg-brand-bg-800" />
|
||||
<div className="h-20 w-20 bg-brand-bg-900" />
|
||||
<div className="h-12 w-12 bg-custom-bg-10" />
|
||||
<div className="h-12 w-12 bg-custom-bg-20" />
|
||||
<div className="h-12 w-12 bg-custom-bg-30" />
|
||||
<div className="h-12 w-12 bg-custom-bg-40" />
|
||||
<div className="h-12 w-12 bg-custom-bg-50" />
|
||||
<div className="h-12 w-12 bg-custom-bg-60" />
|
||||
<div className="h-12 w-12 bg-custom-bg-70" />
|
||||
<div className="h-12 w-12 bg-custom-bg-80" />
|
||||
<div className="h-12 w-12 bg-custom-bg-90" />
|
||||
<div className="h-12 w-12 bg-custom-bg-100" />
|
||||
<div className="h-12 w-12 bg-custom-bg-200" />
|
||||
<div className="h-12 w-12 bg-custom-bg-300" />
|
||||
<div className="h-12 w-12 bg-custom-bg-400" />
|
||||
<div className="h-12 w-12 bg-custom-bg-500" />
|
||||
<div className="h-12 w-12 bg-custom-bg-600" />
|
||||
<div className="h-12 w-12 bg-custom-bg-700" />
|
||||
<div className="h-12 w-12 bg-custom-bg-800" />
|
||||
<div className="h-12 w-12 bg-custom-bg-900" />
|
||||
<div className="h-12 w-12 bg-custom-bg-950" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
Sidebar background:
|
||||
<div className="flex flex-wrap">
|
||||
<div className="h-12 w-12 bg-custom-sidebar-10" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-20" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-30" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-40" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-50" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-60" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-70" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-80" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-90" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-100" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-200" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-300" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-400" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-500" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-600" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-700" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-800" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-900" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-950" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -14,9 +14,17 @@ module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
brand: {
|
||||
custom: {
|
||||
accent: {
|
||||
10: convertToRGB("--color-accent-10"),
|
||||
20: convertToRGB("--color-accent-20"),
|
||||
30: convertToRGB("--color-accent-30"),
|
||||
40: convertToRGB("--color-accent-40"),
|
||||
50: convertToRGB("--color-accent-50"),
|
||||
60: convertToRGB("--color-accent-60"),
|
||||
70: convertToRGB("--color-accent-70"),
|
||||
80: convertToRGB("--color-accent-80"),
|
||||
90: convertToRGB("--color-accent-90"),
|
||||
100: convertToRGB("--color-accent-100"),
|
||||
200: convertToRGB("--color-accent-200"),
|
||||
300: convertToRGB("--color-accent-300"),
|
||||
@ -26,10 +34,19 @@ module.exports = {
|
||||
700: convertToRGB("--color-accent-700"),
|
||||
800: convertToRGB("--color-accent-800"),
|
||||
900: convertToRGB("--color-accent-900"),
|
||||
DEFAULT: convertToRGB("--color-accent-500"),
|
||||
950: convertToRGB("--color-accent-950"),
|
||||
DEFAULT: convertToRGB("--color-accent-100"),
|
||||
},
|
||||
bg: {
|
||||
10: convertToRGB("--color-bg-10"),
|
||||
20: convertToRGB("--color-bg-20"),
|
||||
30: convertToRGB("--color-bg-30"),
|
||||
40: convertToRGB("--color-bg-40"),
|
||||
50: convertToRGB("--color-bg-50"),
|
||||
60: convertToRGB("--color-bg-60"),
|
||||
70: convertToRGB("--color-bg-70"),
|
||||
80: convertToRGB("--color-bg-80"),
|
||||
90: convertToRGB("--color-bg-90"),
|
||||
100: convertToRGB("--color-bg-100"),
|
||||
200: convertToRGB("--color-bg-200"),
|
||||
300: convertToRGB("--color-bg-300"),
|
||||
@ -39,31 +56,55 @@ module.exports = {
|
||||
700: convertToRGB("--color-bg-700"),
|
||||
800: convertToRGB("--color-bg-800"),
|
||||
900: convertToRGB("--color-bg-900"),
|
||||
DEFAULT: convertToRGB("--color-bg-500"),
|
||||
950: convertToRGB("--color-bg-950"),
|
||||
DEFAULT: convertToRGB("--color-bg-100"),
|
||||
},
|
||||
sidebar: {
|
||||
10: convertToRGB("--color-sidebar-10"),
|
||||
20: convertToRGB("--color-sidebar-20"),
|
||||
30: convertToRGB("--color-sidebar-30"),
|
||||
40: convertToRGB("--color-sidebar-40"),
|
||||
50: convertToRGB("--color-sidebar-50"),
|
||||
60: convertToRGB("--color-sidebar-60"),
|
||||
70: convertToRGB("--color-sidebar-70"),
|
||||
80: convertToRGB("--color-sidebar-80"),
|
||||
90: convertToRGB("--color-sidebar-90"),
|
||||
100: convertToRGB("--color-sidebar-100"),
|
||||
200: convertToRGB("--color-sidebar-200"),
|
||||
300: convertToRGB("--color-sidebar-300"),
|
||||
400: convertToRGB("--color-sidebar-400"),
|
||||
500: convertToRGB("--color-sidebar-500"),
|
||||
600: convertToRGB("--color-sidebar-600"),
|
||||
700: convertToRGB("--color-sidebar-700"),
|
||||
800: convertToRGB("--color-sidebar-800"),
|
||||
900: convertToRGB("--color-sidebar-900"),
|
||||
950: convertToRGB("--color-sidebar-950"),
|
||||
DEFAULT: convertToRGB("--color-sidebar-100"),
|
||||
},
|
||||
base: withOpacity("--color-bg-base"),
|
||||
},
|
||||
},
|
||||
borderColor: {
|
||||
brand: {
|
||||
base: withOpacity("--color-bg-400"),
|
||||
"surface-1": withOpacity("--color-bg-surface-1"),
|
||||
"surface-2": withOpacity("--color-bg-surface-2"),
|
||||
},
|
||||
},
|
||||
backgroundColor: {
|
||||
brand: {
|
||||
base: withOpacity("--color-bg-500"),
|
||||
"surface-1": withOpacity("--color-bg-700"),
|
||||
"surface-2": withOpacity("--color-bg-900"),
|
||||
sidebar: withOpacity("--color-bg-sidebar"),
|
||||
backdrop: "#131313",
|
||||
},
|
||||
},
|
||||
textColor: {
|
||||
brand: {
|
||||
base: withOpacity("--color-text-base"),
|
||||
secondary: withOpacity("--color-text-secondary"),
|
||||
custom: {
|
||||
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"),
|
||||
950: convertToRGB("--color-text-950"),
|
||||
DEFAULT: convertToRGB("--color-text-500"),
|
||||
},
|
||||
},
|
||||
keyframes: {
|
||||
|
||||
8
apps/app/types/users.d.ts
vendored
8
apps/app/types/users.d.ts
vendored
@ -29,14 +29,12 @@ export interface IUser {
|
||||
}
|
||||
|
||||
export interface ICustomTheme {
|
||||
accent: string;
|
||||
background: string;
|
||||
border: string;
|
||||
text: string;
|
||||
accent: string;
|
||||
sidebar: string;
|
||||
darkPalette: boolean;
|
||||
palette: string;
|
||||
sidebar: string;
|
||||
textBase: string;
|
||||
textSecondary: string;
|
||||
}
|
||||
|
||||
export interface ICurrentUserResponse extends IUser {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user