From 261f134450fb71e72bbd258f2e7f47d01ffb12a1 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Thu, 6 Jul 2023 14:33:56 +0530 Subject: [PATCH] chore: update color scheming --- .../components/core/color-picker-input.tsx | 32 ++-- .../components/core/custom-theme-selector.tsx | 41 +++-- apps/app/components/core/theme-switch.tsx | 37 +--- apps/app/helpers/theme.helper.ts | 67 ++----- apps/app/pages/colors.tsx | 171 ++++++++++++------ apps/app/tailwind.config.js | 141 +++++++-------- apps/app/types/users.d.ts | 5 +- 7 files changed, 249 insertions(+), 245 deletions(-) diff --git a/apps/app/components/core/color-picker-input.tsx b/apps/app/components/core/color-picker-input.tsx index 28b6c4e2c..8582023a2 100644 --- a/apps/app/components/core/color-picker-input.tsx +++ b/apps/app/components/core/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 = { +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 = ({ 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 = ({ preLoadedData }) => {

Customize your theme

-
+

Background color @@ -115,10 +117,12 @@ export const CustomThemeSelector: React.FC = ({ preLoadedData }) => {

-

Accent color

+

+ Primary(Theme) color +

= ({ preLoadedData }) => { Sidebar background color +
+ +
+

+ Sidebar text color +

+ = ({ 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); diff --git a/apps/app/helpers/theme.helper.ts b/apps/app/helpers/theme.helper.ts index 42ff56103..fdb6c0a79 100644 --- a/apps/app/helpers/theme.helper.ts +++ b/apps/app/helpers/theme.helper.ts @@ -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("[data-theme='custom']") - ?.style.setProperty(`--color-bg-${shade}`, bgRgbValues); + ?.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-accent-${shade}`, accentRgbValues); + ?.style.setProperty(`--color-primary-${shade}`, primaryRgbValues); document .querySelector("[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("[data-theme='custom']") - ?.style.setProperty(`--color-bg-${shade}`, bgRgbValues); - document - .querySelector("[data-theme='custom']") - ?.style.setProperty(`--color-text-${shade}`, textRgbValues); - document - .querySelector("[data-theme='custom']") - ?.style.setProperty(`--color-accent-${shade}`, accentRgbValues); - document - .querySelector("[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("[data-theme='custom']") - ?.style.setProperty(`--color-bg-${950}`, bgRgbValues); - document - .querySelector("[data-theme='custom']") - ?.style.setProperty(`--color-text-${950}`, textRgbValues); - document - .querySelector("[data-theme='custom']") - ?.style.setProperty(`--color-accent-${950}`, accentRgbValues); - document - .querySelector("[data-theme='custom']") - ?.style.setProperty(`--color-sidebar-${950}`, sidebarRgbValues); - - document - .querySelector("[data-theme='custom']") - ?.style.setProperty("--color-scheme", values[4]); + ?.style.setProperty("--color-scheme", values[5]); }; diff --git a/apps/app/pages/colors.tsx b/apps/app/pages/colors.tsx index 9fa9cd8d0..d52e2cf41 100644 --- a/apps/app/pages/colors.tsx +++ b/apps/app/pages/colors.tsx @@ -11,75 +11,128 @@ const Colors: NextPage = () => (
- Accent: + Primary:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Background:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- Sidebar background: + Text:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sidebar Background: +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sidebar Text: +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js index e2c04312a..749ba9f12 100644 --- a/apps/app/tailwind.config.js +++ b/apps/app/tailwind.config.js @@ -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")}`, diff --git a/apps/app/types/users.d.ts b/apps/app/types/users.d.ts index a9db3b993..d5810b4d3 100644 --- a/apps/app/types/users.d.ts +++ b/apps/app/types/users.d.ts @@ -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; }