mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
chore: update color scheming
This commit is contained in:
Aaryan Khandelwal
parent
6c0335261b
commit
261f134450
@ -16,9 +16,11 @@ import { Popover, Transition } from "@headlessui/react";
|
||||
import { Input } from "components/ui";
|
||||
// icons
|
||||
import { ColorPickerIcon } from "components/icons";
|
||||
// types
|
||||
import { ICustomTheme } from "types";
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
name: keyof ICustomTheme;
|
||||
watch: UseFormWatch<any>;
|
||||
setValue: UseFormSetValue<any>;
|
||||
error: FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
|
||||
@ -31,31 +33,25 @@ export const ColorPickerInput: React.FC<Props> = ({ name, watch, setValue, error
|
||||
setValue(name, hex);
|
||||
};
|
||||
|
||||
const getColorText = (colorName: string) => {
|
||||
const getColorText = (colorName: keyof ICustomTheme) => {
|
||||
switch (colorName) {
|
||||
case "accent":
|
||||
return "Accent";
|
||||
case "bgBase":
|
||||
case "background":
|
||||
return "Background";
|
||||
case "bgSurface1":
|
||||
return "Background surface 1";
|
||||
case "bgSurface2":
|
||||
return "Background surface 2";
|
||||
case "border":
|
||||
return "Border";
|
||||
case "sidebar":
|
||||
return "Sidebar";
|
||||
case "textBase":
|
||||
return "Text primary";
|
||||
case "textSecondary":
|
||||
return "Text secondary";
|
||||
case "text":
|
||||
return "Text";
|
||||
case "primary":
|
||||
return "Primary(Theme)";
|
||||
case "sidebarBackground":
|
||||
return "Sidebar Background";
|
||||
case "sidebarText":
|
||||
return "Sidebar Text";
|
||||
default:
|
||||
return "Color";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative ">
|
||||
<div className="relative">
|
||||
<Input
|
||||
id={name}
|
||||
name={name}
|
||||
|
||||
@ -20,11 +20,12 @@ type Props = {
|
||||
preLoadedData?: Partial<ICustomTheme> | null;
|
||||
};
|
||||
|
||||
const defaultValues = {
|
||||
const defaultValues: ICustomTheme = {
|
||||
background: "#fff7f7",
|
||||
text: "#ffc9c9",
|
||||
accent: "#fe5050",
|
||||
sidebar: "#ffffff",
|
||||
primary: "#fe5050",
|
||||
sidebarBackground: "#ffffff",
|
||||
sidebarText: "#000000",
|
||||
darkPalette: false,
|
||||
palette: "",
|
||||
};
|
||||
@ -50,10 +51,11 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
|
||||
const payload: ICustomTheme = {
|
||||
background: formData.background,
|
||||
text: formData.text,
|
||||
accent: formData.accent,
|
||||
sidebar: formData.sidebar,
|
||||
primary: formData.primary,
|
||||
sidebarBackground: formData.sidebarBackground,
|
||||
sidebarText: formData.sidebarText,
|
||||
darkPalette: darkPalette,
|
||||
palette: `${formData.background},${formData.text},${formData.accent},${formData.sidebar}`,
|
||||
palette: `${formData.background},${formData.text},${formData.primary},${formData.sidebarBackground},${formData.sidebarText}`,
|
||||
};
|
||||
|
||||
await userService
|
||||
@ -89,7 +91,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-2 md:grid-cols-4">
|
||||
<div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2 md:grid-cols-3">
|
||||
<div className="flex flex-col items-start gap-2">
|
||||
<h3 className="text-left text-sm font-medium text-brand-secondary">
|
||||
Background color
|
||||
@ -115,10 +117,12 @@ 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">Accent color</h3>
|
||||
<h3 className="text-left text-sm font-medium text-brand-secondary">
|
||||
Primary(Theme) color
|
||||
</h3>
|
||||
<ColorPickerInput
|
||||
name="accent"
|
||||
error={errors.accent}
|
||||
name="primary"
|
||||
error={errors.primary}
|
||||
watch={watch}
|
||||
setValue={setValue}
|
||||
register={register}
|
||||
@ -130,8 +134,21 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
|
||||
Sidebar background color
|
||||
</h3>
|
||||
<ColorPickerInput
|
||||
name="sidebar"
|
||||
error={errors.sidebar}
|
||||
name="sidebarBackground"
|
||||
error={errors.sidebarBackground}
|
||||
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 text color
|
||||
</h3>
|
||||
<ColorPickerInput
|
||||
name="sidebarText"
|
||||
error={errors.sidebarText}
|
||||
watch={watch}
|
||||
setValue={setValue}
|
||||
register={register}
|
||||
|
||||
@ -77,37 +77,14 @@ export const ThemeSwitch: React.FC<Props> = ({
|
||||
if (!customThemeSelectorOptions) setCustomThemeSelectorOptions(true);
|
||||
} else {
|
||||
if (customThemeSelectorOptions) setCustomThemeSelectorOptions(false);
|
||||
const cssVars = [
|
||||
"--color-bg-50",
|
||||
"--color-bg-100",
|
||||
"--color-bg-200",
|
||||
"--color-bg-300",
|
||||
"--color-bg-400",
|
||||
"--color-bg-500",
|
||||
"--color-bg-600",
|
||||
"--color-bg-700",
|
||||
"--color-bg-800",
|
||||
"--color-bg-900",
|
||||
|
||||
"--color-bg-sidebar",
|
||||
|
||||
"--color-border",
|
||||
|
||||
"--color-accent-50",
|
||||
"--color-accent-100",
|
||||
"--color-accent-200",
|
||||
"--color-accent-300",
|
||||
"--color-accent-400",
|
||||
"--color-accent-500",
|
||||
"--color-accent-600",
|
||||
"--color-accent-700",
|
||||
"--color-accent-800",
|
||||
"--color-accent-900",
|
||||
|
||||
"--color-text-base",
|
||||
"--color-text-secondary",
|
||||
];
|
||||
cssVars.forEach((cssVar) => document.documentElement.style.removeProperty(cssVar));
|
||||
for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10)) {
|
||||
document.documentElement.style.removeProperty(`--color-background-${i}`);
|
||||
document.documentElement.style.removeProperty(`--color-text-${i}`);
|
||||
document.documentElement.style.removeProperty(`--color-primary-${i}`);
|
||||
document.documentElement.style.removeProperty(`--color-sidebarBackground-${i}`);
|
||||
document.documentElement.style.removeProperty(`--color-sidebarText-${i}`);
|
||||
}
|
||||
}
|
||||
setTheme(value);
|
||||
document.documentElement.style.setProperty("color-scheme", type);
|
||||
|
||||
@ -19,7 +19,6 @@ type TShades = {
|
||||
700: TRgb;
|
||||
800: TRgb;
|
||||
900: TRgb;
|
||||
950: TRgb;
|
||||
};
|
||||
|
||||
const calculateShades = (hexValue: string): TShades => {
|
||||
@ -54,86 +53,50 @@ const calculateShades = (hexValue: string): TShades => {
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10))
|
||||
shades[i as keyof TShades] = convertHexToSpecificShade(i);
|
||||
|
||||
return shades as TShades;
|
||||
};
|
||||
|
||||
export const applyTheme = (palette: string, isDarkPalette: boolean) => {
|
||||
// palette: [bg, text, accent, sidebarBg]
|
||||
// palette: [bg, text, primary, sidebarBg, sidebarText]
|
||||
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]);
|
||||
const primaryShades = calculateShades(values[2]);
|
||||
const sidebarBackgroundShades = calculateShades(values[3]);
|
||||
const sidebarTextShades = calculateShades(values[4]);
|
||||
|
||||
for (let i = 10; i <= 90; i += 10) {
|
||||
for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (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}`;
|
||||
const primaryRgbValues = `${primaryShades[shade].r}, ${primaryShades[shade].g}, ${primaryShades[shade].b}`;
|
||||
const sidebarBackgroundRgbValues = `${sidebarBackgroundShades[shade].r}, ${sidebarBackgroundShades[shade].g}, ${sidebarBackgroundShades[shade].b}`;
|
||||
const sidebarTextRgbValues = `${sidebarTextShades[shade].r}, ${sidebarTextShades[shade].g}, ${sidebarTextShades[shade].b}`;
|
||||
|
||||
document
|
||||
.querySelector<HTMLElement>("[data-theme='custom']")
|
||||
?.style.setProperty(`--color-bg-${shade}`, bgRgbValues);
|
||||
?.style.setProperty(`--color-background-${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);
|
||||
?.style.setProperty(`--color-primary-${shade}`, primaryRgbValues);
|
||||
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}`;
|
||||
|
||||
?.style.setProperty(`--color-sidebar-background-${shade}`, sidebarBackgroundRgbValues);
|
||||
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);
|
||||
?.style.setProperty(`--color-sidebar-text-${shade}`, sidebarTextRgbValues);
|
||||
}
|
||||
|
||||
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]);
|
||||
?.style.setProperty("--color-scheme", values[5]);
|
||||
};
|
||||
|
||||
@ -11,75 +11,128 @@ const Colors: NextPage = () => (
|
||||
<DefaultLayout>
|
||||
<div className="space-y-8 p-8">
|
||||
<div>
|
||||
Accent:
|
||||
Primary:
|
||||
<div className="flex flex-wrap">
|
||||
<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 className="h-12 w-12 bg-custom-primary-0" />
|
||||
<div className="h-12 w-12 bg-custom-primary-10" />
|
||||
<div className="h-12 w-12 bg-custom-primary-20" />
|
||||
<div className="h-12 w-12 bg-custom-primary-30" />
|
||||
<div className="h-12 w-12 bg-custom-primary-40" />
|
||||
<div className="h-12 w-12 bg-custom-primary-50" />
|
||||
<div className="h-12 w-12 bg-custom-primary-60" />
|
||||
<div className="h-12 w-12 bg-custom-primary-70" />
|
||||
<div className="h-12 w-12 bg-custom-primary-80" />
|
||||
<div className="h-12 w-12 bg-custom-primary-90" />
|
||||
<div className="h-12 w-12 bg-custom-primary-100" />
|
||||
<div className="h-12 w-12 bg-custom-primary-200" />
|
||||
<div className="h-12 w-12 bg-custom-primary-300" />
|
||||
<div className="h-12 w-12 bg-custom-primary-400" />
|
||||
<div className="h-12 w-12 bg-custom-primary-500" />
|
||||
<div className="h-12 w-12 bg-custom-primary-600" />
|
||||
<div className="h-12 w-12 bg-custom-primary-700" />
|
||||
<div className="h-12 w-12 bg-custom-primary-800" />
|
||||
<div className="h-12 w-12 bg-custom-primary-900" />
|
||||
<div className="h-12 w-12 bg-custom-primary-1000" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
Background:
|
||||
<div className="flex flex-wrap">
|
||||
<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 className="h-12 w-12 bg-custom-background-0" />
|
||||
<div className="h-12 w-12 bg-custom-background-10" />
|
||||
<div className="h-12 w-12 bg-custom-background-20" />
|
||||
<div className="h-12 w-12 bg-custom-background-30" />
|
||||
<div className="h-12 w-12 bg-custom-background-40" />
|
||||
<div className="h-12 w-12 bg-custom-background-50" />
|
||||
<div className="h-12 w-12 bg-custom-background-60" />
|
||||
<div className="h-12 w-12 bg-custom-background-70" />
|
||||
<div className="h-12 w-12 bg-custom-background-80" />
|
||||
<div className="h-12 w-12 bg-custom-background-90" />
|
||||
<div className="h-12 w-12 bg-custom-background-100" />
|
||||
<div className="h-12 w-12 bg-custom-background-200" />
|
||||
<div className="h-12 w-12 bg-custom-background-300" />
|
||||
<div className="h-12 w-12 bg-custom-background-400" />
|
||||
<div className="h-12 w-12 bg-custom-background-500" />
|
||||
<div className="h-12 w-12 bg-custom-background-600" />
|
||||
<div className="h-12 w-12 bg-custom-background-700" />
|
||||
<div className="h-12 w-12 bg-custom-background-800" />
|
||||
<div className="h-12 w-12 bg-custom-background-900" />
|
||||
<div className="h-12 w-12 bg-custom-background-1000" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
Sidebar background:
|
||||
Text:
|
||||
<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 className="h-12 w-12 bg-custom-text-0" />
|
||||
<div className="h-12 w-12 bg-custom-text-10" />
|
||||
<div className="h-12 w-12 bg-custom-text-20" />
|
||||
<div className="h-12 w-12 bg-custom-text-30" />
|
||||
<div className="h-12 w-12 bg-custom-text-40" />
|
||||
<div className="h-12 w-12 bg-custom-text-50" />
|
||||
<div className="h-12 w-12 bg-custom-text-60" />
|
||||
<div className="h-12 w-12 bg-custom-text-70" />
|
||||
<div className="h-12 w-12 bg-custom-text-80" />
|
||||
<div className="h-12 w-12 bg-custom-text-90" />
|
||||
<div className="h-12 w-12 bg-custom-text-100" />
|
||||
<div className="h-12 w-12 bg-custom-text-200" />
|
||||
<div className="h-12 w-12 bg-custom-text-300" />
|
||||
<div className="h-12 w-12 bg-custom-text-400" />
|
||||
<div className="h-12 w-12 bg-custom-text-500" />
|
||||
<div className="h-12 w-12 bg-custom-text-600" />
|
||||
<div className="h-12 w-12 bg-custom-text-700" />
|
||||
<div className="h-12 w-12 bg-custom-text-800" />
|
||||
<div className="h-12 w-12 bg-custom-text-900" />
|
||||
<div className="h-12 w-12 bg-custom-text-1000" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
Sidebar Background:
|
||||
<div className="flex flex-wrap">
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-0" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-10" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-20" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-30" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-40" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-50" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-60" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-70" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-80" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-90" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-100" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-200" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-300" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-400" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-500" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-600" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-700" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-800" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-900" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-background-1000" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
Sidebar Text:
|
||||
<div className="flex flex-wrap">
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-0" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-10" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-20" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-30" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-40" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-50" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-60" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-70" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-80" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-90" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-100" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-200" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-300" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-400" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-500" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-600" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-700" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-800" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-900" />
|
||||
<div className="h-12 w-12 bg-custom-sidebar-text-1000" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,3 @@
|
||||
function withOpacity(variableName) {
|
||||
return ({ opacityValue }) => {
|
||||
if (opacityValue !== undefined) return `rgba(var(${variableName}), ${opacityValue})`;
|
||||
|
||||
return `rgb(var(${variableName}))`;
|
||||
};
|
||||
}
|
||||
|
||||
const convertToRGB = (variableName) => `rgb(var(${variableName}))`;
|
||||
|
||||
module.exports = {
|
||||
@ -16,50 +8,53 @@ module.exports = {
|
||||
colors: {
|
||||
custom: {
|
||||
primary: {
|
||||
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"),
|
||||
400: convertToRGB("--color-accent-400"),
|
||||
500: convertToRGB("--color-accent-500"),
|
||||
600: convertToRGB("--color-accent-600"),
|
||||
700: convertToRGB("--color-accent-700"),
|
||||
800: convertToRGB("--color-accent-800"),
|
||||
900: convertToRGB("--color-accent-900"),
|
||||
950: convertToRGB("--color-accent-950"),
|
||||
DEFAULT: convertToRGB("--color-accent-100"),
|
||||
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: {
|
||||
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"),
|
||||
400: convertToRGB("--color-bg-400"),
|
||||
500: convertToRGB("--color-bg-500"),
|
||||
600: convertToRGB("--color-bg-600"),
|
||||
700: convertToRGB("--color-bg-700"),
|
||||
800: convertToRGB("--color-bg-800"),
|
||||
900: convertToRGB("--color-bg-900"),
|
||||
950: convertToRGB("--color-bg-950"),
|
||||
DEFAULT: convertToRGB("--color-bg-100"),
|
||||
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"),
|
||||
@ -78,33 +73,35 @@ module.exports = {
|
||||
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"),
|
||||
1000: "rgb(0, 0, 0)",
|
||||
DEFAULT: convertToRGB("--color-text-100"),
|
||||
},
|
||||
sidebar: {
|
||||
background: {
|
||||
10: convertToRGB("--color-sidebar-bg-10"),
|
||||
20: convertToRGB("--color-sidebar-bg-20"),
|
||||
30: convertToRGB("--color-sidebar-bg-30"),
|
||||
40: convertToRGB("--color-sidebar-bg-40"),
|
||||
50: convertToRGB("--color-sidebar-bg-50"),
|
||||
60: convertToRGB("--color-sidebar-bg-60"),
|
||||
70: convertToRGB("--color-sidebar-bg-70"),
|
||||
80: convertToRGB("--color-sidebar-bg-80"),
|
||||
90: convertToRGB("--color-sidebar-bg-90"),
|
||||
100: convertToRGB("--color-sidebar-bg-100"),
|
||||
200: convertToRGB("--color-sidebar-bg-200"),
|
||||
300: convertToRGB("--color-sidebar-bg-300"),
|
||||
400: convertToRGB("--color-sidebar-bg-400"),
|
||||
500: convertToRGB("--color-sidebar-bg-500"),
|
||||
600: convertToRGB("--color-sidebar-bg-600"),
|
||||
700: convertToRGB("--color-sidebar-bg-700"),
|
||||
800: convertToRGB("--color-sidebar-bg-800"),
|
||||
900: convertToRGB("--color-sidebar-bg-900"),
|
||||
950: convertToRGB("--color-sidebar-bg-950"),
|
||||
DEFAULT: convertToRGB("--color-sidebar-bg-100"),
|
||||
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"),
|
||||
@ -123,7 +120,7 @@ module.exports = {
|
||||
700: convertToRGB("--color-sidebar-text-700"),
|
||||
800: convertToRGB("--color-sidebar-text-800"),
|
||||
900: convertToRGB("--color-sidebar-text-900"),
|
||||
950: convertToRGB("--color-sidebar-text-950"),
|
||||
1000: "rgb(0, 0, 0)",
|
||||
DEFAULT: convertToRGB("--color-sidebar-text-100"),
|
||||
},
|
||||
},
|
||||
@ -146,7 +143,7 @@ module.exports = {
|
||||
"--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-accent")}`,
|
||||
"--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")}`,
|
||||
|
||||
5
apps/app/types/users.d.ts
vendored
5
apps/app/types/users.d.ts
vendored
@ -31,8 +31,9 @@ export interface IUser {
|
||||
export interface ICustomTheme {
|
||||
background: string;
|
||||
text: string;
|
||||
accent: string;
|
||||
sidebar: string;
|
||||
primary: string;
|
||||
sidebarBackground: string;
|
||||
sidebarText: string;
|
||||
darkPalette: boolean;
|
||||
palette: string;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user