diff --git a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx index a37518cba..9a1f7bdc3 100644 --- a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx +++ b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx @@ -22,7 +22,7 @@ export const AnalyticsYearWiseIssues: React.FC = ({ defaultAnalytics }) = data={[ { id: "issues_closed", - color: "rgb(var(--color-accent))", + color: "rgb(var(--color-primary-100))", data: MONTHS_LIST.map((month) => ({ x: month.label.substring(0, 3), y: @@ -50,7 +50,7 @@ export const AnalyticsYearWiseIssues: React.FC = ({ defaultAnalytics }) = )} theme={{ - background: "rgb(var(--color-bg-base))", + background: "rgb(var(--color-background-100))", }} enableArea /> diff --git a/apps/app/components/core/custom-theme-selector.tsx b/apps/app/components/core/custom-theme-selector.tsx deleted file mode 100644 index 59aed8b2b..000000000 --- a/apps/app/components/core/custom-theme-selector.tsx +++ /dev/null @@ -1,198 +0,0 @@ -import React, { useEffect, useState } from "react"; - -import { useTheme } from "next-themes"; - -import { useForm } from "react-hook-form"; - -// hooks -import useUser from "hooks/use-user"; -// ui -import { PrimaryButton } from "components/ui"; -import { ColorPickerInput } from "components/core"; -// services -import userService from "services/user.service"; -// helper -import { applyTheme } from "helpers/theme.helper"; -// types -import { ICustomTheme } from "types"; - -type Props = { - preLoadedData?: Partial | null; -}; - -export const CustomThemeSelector: React.FC = ({ preLoadedData }) => { - const [darkPalette, setDarkPalette] = useState(false); - - const defaultValues = { - accent: preLoadedData?.accent ?? "#FE5050", - bgBase: preLoadedData?.bgBase ?? "#FFF7F7", - bgSurface1: preLoadedData?.bgSurface1 ?? "#FFE0E0", - bgSurface2: preLoadedData?.bgSurface2 ?? "#FFF7F7", - border: preLoadedData?.border ?? "#FFC9C9", - darkPalette: preLoadedData?.darkPalette ?? false, - palette: preLoadedData?.palette ?? "", - sidebar: preLoadedData?.sidebar ?? "#FFFFFF", - textBase: preLoadedData?.textBase ?? "#430000", - textSecondary: preLoadedData?.textSecondary ?? "#323232", - }; - - const { - register, - formState: { errors, isSubmitting }, - handleSubmit, - watch, - setValue, - reset, - } = useForm({ - defaultValues, - }); - - const { setTheme } = useTheme(); - const { mutateUser } = useUser(); - - const handleFormSubmit = async (formData: any) => { - await userService - .updateUser({ - theme: { - accent: formData.accent, - bgBase: formData.bgBase, - bgSurface1: formData.bgSurface1, - bgSurface2: formData.bgSurface2, - border: formData.border, - darkPalette: darkPalette, - palette: `${formData.bgBase},${formData.bgSurface1},${formData.bgSurface2},${formData.border},${formData.sidebar},${formData.accent},${formData.textBase},${formData.textSecondary}`, - sidebar: formData.sidebar, - textBase: formData.textBase, - textSecondary: formData.textSecondary, - }, - }) - .then((res) => { - mutateUser((prevData) => { - if (!prevData) return prevData; - return { ...prevData, user: res }; - }, false); - applyTheme(formData.palette, darkPalette); - setTheme("custom"); - }) - .catch((err) => console.log(err)); - }; - - const handleUpdateTheme = async (formData: any) => { - await handleFormSubmit({ ...formData, darkPalette }); - - reset({ - ...defaultValues, - }); - }; - - useEffect(() => { - reset({ - ...defaultValues, - ...preLoadedData, - }); - }, [preLoadedData, reset]); - - return ( -
-
-

Customize your theme

-
-
-
-

Background

- -
- -
-

Background surface 1

- -
- -
-

Background surface 2

- -
- -
-

Border

- -
- -
-

Sidebar

- -
- -
-

Accent

- -
- -
-

Text primary

- -
- -
-

Text secondary

- -
-
-
-
-
- - {isSubmitting ? "Creating Theme..." : "Set Theme"} - -
-
- ); -}; diff --git a/apps/app/components/core/index.ts b/apps/app/components/core/index.ts index 1eb52590c..b91944abf 100644 --- a/apps/app/components/core/index.ts +++ b/apps/app/components/core/index.ts @@ -5,10 +5,8 @@ export * from "./gantt-chart-view"; export * from "./list-view"; export * from "./modals"; export * from "./spreadsheet-view"; +export * from "./theme"; export * from "./sidebar"; export * from "./issues-view"; export * from "./image-picker-popover"; export * from "./feeds"; -export * from "./theme-switch"; -export * from "./custom-theme-selector"; -export * from "./color-picker-input"; diff --git a/apps/app/components/core/color-picker-input.tsx b/apps/app/components/core/theme/color-picker-input.tsx similarity index 85% rename from apps/app/components/core/color-picker-input.tsx rename to apps/app/components/core/theme/color-picker-input.tsx index 28b6c4e2c..8582023a2 100644 --- a/apps/app/components/core/color-picker-input.tsx +++ b/apps/app/components/core/theme/color-picker-input.tsx @@ -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; setValue: UseFormSetValue; error: FieldError | Merge> | undefined; @@ -31,31 +33,25 @@ export const ColorPickerInput: React.FC = ({ 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 ( -
+
| null; +}; + +const defaultValues: ICustomTheme = { + background: "#fff7f7", + text: "#ffc9c9", + primary: "#fe5050", + sidebarBackground: "#ffffff", + sidebarText: "#000000", + darkPalette: false, + palette: "", +}; + +export const CustomThemeSelector: React.FC = ({ preLoadedData }) => { + const [darkPalette, setDarkPalette] = useState(false); + + const { + register, + formState: { errors, isSubmitting }, + handleSubmit, + watch, + setValue, + reset, + } = useForm({ + defaultValues, + }); + + const { setTheme } = useTheme(); + const { mutateUser } = useUser(); + + const handleFormSubmit = async (formData: ICustomTheme) => { + const payload: ICustomTheme = { + background: formData.background, + text: formData.text, + primary: formData.primary, + sidebarBackground: formData.sidebarBackground, + sidebarText: formData.sidebarText, + darkPalette: darkPalette, + palette: `${formData.background},${formData.text},${formData.primary},${formData.sidebarBackground},${formData.sidebarText}`, + }; + + await userService + .updateUser({ + theme: payload, + }) + .then((res) => { + mutateUser((prevData) => { + if (!prevData) return prevData; + + return { ...prevData, ...res }; + }, false); + + applyTheme(payload.palette, darkPalette); + setTheme("custom"); + }) + .catch((err) => console.log(err)); + }; + + const handleUpdateTheme = async (formData: any) => { + await handleFormSubmit({ ...formData, darkPalette }); + }; + + useEffect(() => { + reset({ + ...defaultValues, + ...preLoadedData, + }); + }, [preLoadedData, reset]); + + return ( +
+
+

Customize your theme

+
+
+
+

+ Background color +

+ +
+ +
+

Text color

+ +
+ +
+

+ Primary(Theme) color +

+ +
+ +
+

+ Sidebar background color +

+ +
+ +
+

+ Sidebar text color +

+ +
+
+
+
+
+ + {isSubmitting ? "Creating Theme..." : "Set Theme"} + +
+
+ ); +}; diff --git a/apps/app/components/core/theme/index.ts b/apps/app/components/core/theme/index.ts new file mode 100644 index 000000000..145b3862a --- /dev/null +++ b/apps/app/components/core/theme/index.ts @@ -0,0 +1,3 @@ +export * from "./color-picker-input"; +export * from "./custom-theme-selector"; +export * from "./theme-switch"; diff --git a/apps/app/components/core/theme-switch.tsx b/apps/app/components/core/theme/theme-switch.tsx similarity index 87% rename from apps/app/components/core/theme-switch.tsx rename to apps/app/components/core/theme/theme-switch.tsx index e38375c2e..1d67c8ef5 100644 --- a/apps/app/components/core/theme-switch.tsx +++ b/apps/app/components/core/theme/theme-switch.tsx @@ -6,8 +6,6 @@ import { useTheme } from "next-themes"; import { THEMES_OBJ } from "constants/themes"; // ui import { CustomSelect } from "components/ui"; -// helper -import { applyTheme } from "helpers/theme.helper"; // types import { ICustomTheme, IUser } from "types"; @@ -79,19 +77,14 @@ export const ThemeSwitch: React.FC = ({ if (!customThemeSelectorOptions) setCustomThemeSelectorOptions(true); } else { if (customThemeSelectorOptions) setCustomThemeSelectorOptions(false); - const cssVars = [ - "--color-bg-base", - "--color-bg-surface-1", - "--color-bg-surface-2", - "--color-border", - "--color-bg-sidebar", - "--color-accent", - - "--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-sidebar-background-${i}`); + document.documentElement.style.removeProperty(`--color-sidebar-text-${i}`); + } } setTheme(value); document.documentElement.style.setProperty("color-scheme", type); diff --git a/apps/app/constants/graph.ts b/apps/app/constants/graph.ts index 6c2f20a3e..f279b5a42 100644 --- a/apps/app/constants/graph.ts +++ b/apps/app/constants/graph.ts @@ -2,27 +2,27 @@ import { Theme } from "@nivo/core"; export const CHARTS_THEME: Theme = { - background: "rgb(var(--color-bg-surface-1))", - textColor: "rgb(var(--color-text-secondary))", + background: "rgb(var(--color-background-90))", + textColor: "rgb(var(--color-text-200))", axis: { domain: { line: { - stroke: "rgb(var(--color-border))", + stroke: "rgb(var(--color-background-80))", strokeWidth: 0.5, }, }, }, tooltip: { container: { - background: "rgb(var(--color-bg-surface-2))", - color: "rgb(var(--color-text-secondary))", + background: "rgb(var(--color-background-80))", + color: "rgb(var(--color-text-200))", fontSize: "0.8rem", - border: "1px solid rgb(var(--color-border))", + border: "1px solid rgb(var(--color-background-80))", }, }, grid: { line: { - stroke: "rgb(var(--color-border))", + stroke: "rgb(var(--color-background-80))", }, }, }; diff --git a/apps/app/helpers/color.helper.ts b/apps/app/helpers/color.helper.ts new file mode 100644 index 000000000..a1f915a1e --- /dev/null +++ b/apps/app/helpers/color.helper.ts @@ -0,0 +1,19 @@ +export type TRgb = { r: number; g: number; b: number }; + +export const hexToRgb = (hex: string): TRgb => { + const r = parseInt(hex.slice(1, 3), 16); + const g = parseInt(hex.slice(3, 5), 16); + const b = parseInt(hex.slice(5, 7), 16); + + return { r, g, b }; +}; + +export const rgbToHex = (rgb: TRgb): string => { + const { r, g, b } = rgb; + + const hexR = r.toString(16).padStart(2, "0"); + const hexG = g.toString(16).padStart(2, "0"); + const hexB = b.toString(16).padStart(2, "0"); + + return `#${hexR}${hexG}${hexB}`; +}; diff --git a/apps/app/helpers/theme.helper.ts b/apps/app/helpers/theme.helper.ts index d3d76f3e5..fdb6c0a79 100644 --- a/apps/app/helpers/theme.helper.ts +++ b/apps/app/helpers/theme.helper.ts @@ -1,35 +1,102 @@ -export const hexToRgb = (hex: string) => { - hex = hex.toLowerCase(); - var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - return result - ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)].join(",") - : null; +import { TRgb, hexToRgb } from "helpers/color.helper"; + +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; + 400: TRgb; + 500: TRgb; + 600: TRgb; + 700: TRgb; + 800: TRgb; + 900: TRgb; +}; + +const calculateShades = (hexValue: string): TShades => { + const shades: Partial = {}; + const { r, g, b } = hexToRgb(hexValue); + + const convertHexToSpecificShade = (shade: number): TRgb => { + 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, + b: newB, + }; + } + }; + + 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) => { - const values: string[] = []; - palette.split(",").map((color: string) => { - const cssVarColor = hexToRgb(color); - if (cssVarColor) values.push(cssVarColor); - }); - - const cssVars = [ - "--color-bg-base", - "--color-bg-surface-1", - "--color-bg-surface-2", - "--color-border", - "--color-bg-sidebar", - "--color-accent", - "--color-text-base", - "--color-text-secondary", - "color-scheme", - ]; - + // palette: [bg, text, primary, sidebarBg, sidebarText] + const values: string[] = palette.split(","); values.push(isDarkPalette ? "dark" : "light"); - cssVars.forEach((cssVar, i) => + const bgShades = calculateShades(values[0]); + const textShades = calculateShades(values[1]); + const primaryShades = calculateShades(values[2]); + const sidebarBackgroundShades = calculateShades(values[3]); + const sidebarTextShades = calculateShades(values[4]); + + 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 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("[data-theme='custom']") - ?.style.setProperty(cssVar, values[i]) - ); + ?.style.setProperty(`--color-background-${shade}`, bgRgbValues); + document + .querySelector("[data-theme='custom']") + ?.style.setProperty(`--color-text-${shade}`, textRgbValues); + document + .querySelector("[data-theme='custom']") + ?.style.setProperty(`--color-primary-${shade}`, primaryRgbValues); + document + .querySelector("[data-theme='custom']") + ?.style.setProperty(`--color-sidebar-background-${shade}`, sidebarBackgroundRgbValues); + document + .querySelector("[data-theme='custom']") + ?.style.setProperty(`--color-sidebar-text-${shade}`, sidebarTextRgbValues); + } + + document + .querySelector("[data-theme='custom']") + ?.style.setProperty("--color-scheme", values[5]); }; diff --git a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx index a061491cf..60546a412 100644 --- a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx +++ b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx @@ -94,10 +94,10 @@ const ProjectAuthorizationWrapped: React.FC = ({
= ({
{ - if (opacityValue !== undefined) return `rgba(var(${variableName}), ${opacityValue})`; - - return `rgb(var(${variableName}))`; - }; -} - -function convertToRGB(variableName) { - return `rgb(var(${variableName}))`; -} +const convertToRGB = (variableName) => `rgb(var(${variableName}))`; module.exports = { darkMode: "class", content: ["./pages/**/*.tsx", "./components/**/*.tsx", "./layouts/**/*.tsx", "./ui/**/*.tsx"], theme: { extend: { - colors: { - brand: { - accent: withOpacity("--color-accent"), - base: withOpacity("--color-bg-base"), - }, - }, borderColor: { brand: { - base: withOpacity("--color-border"), - "surface-1": withOpacity("--color-bg-surface-1"), - "surface-2": withOpacity("--color-bg-surface-2"), + base: convertToRGB("--color-background-80"), + secondary: convertToRGB("--color-background-90"), }, }, backgroundColor: { brand: { - base: withOpacity("--color-bg-base"), - "surface-1": withOpacity("--color-bg-surface-1"), - "surface-2": withOpacity("--color-bg-surface-2"), - sidebar: withOpacity("--color-bg-sidebar"), + 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: withOpacity("--color-text-base"), - secondary: withOpacity("--color-text-secondary"), + 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: { @@ -60,7 +169,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")}`, diff --git a/apps/app/types/users.d.ts b/apps/app/types/users.d.ts index eaa75b75a..d5810b4d3 100644 --- a/apps/app/types/users.d.ts +++ b/apps/app/types/users.d.ts @@ -29,16 +29,13 @@ export interface IUser { } export interface ICustomTheme { - accent: string; - bgBase: string; - bgSurface1: string; - bgSurface2: string; - border: string; + background: string; + text: string; + primary: string; + sidebarBackground: string; + sidebarText: string; darkPalette: boolean; palette: string; - sidebar: string; - textBase: string; - textSecondary: string; } export interface ICurrentUserResponse extends IUser {