From 8acf7c34ed88b5c763c7d814e84e151b296623ee Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Tue, 4 Jul 2023 23:08:27 +0530 Subject: [PATCH] chore: update shades calculation logic --- .../components/core/custom-theme-selector.tsx | 58 ++---- apps/app/helpers/theme.helper.ts | 174 +++++++++++------- apps/app/pages/colors.tsx | 82 +++++++-- apps/app/tailwind.config.js | 87 ++++++--- apps/app/types/users.d.ts | 8 +- 5 files changed, 246 insertions(+), 163 deletions(-) diff --git a/apps/app/components/core/custom-theme-selector.tsx b/apps/app/components/core/custom-theme-selector.tsx index 76883f864..4c23b83ad 100644 --- a/apps/app/components/core/custom-theme-selector.tsx +++ b/apps/app/components/core/custom-theme-selector.tsx @@ -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 = ({ preLoadedData }) => { @@ -50,14 +48,12 @@ export const CustomThemeSelector: React.FC = ({ 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 = ({ preLoadedData }) => {

Customize your theme

-
+

Background color @@ -108,23 +104,10 @@ export const CustomThemeSelector: React.FC = ({ preLoadedData }) => {

-

Border color

+

Text color

-
- -
-

- Sidebar background color -

- = ({ preLoadedData }) => {

- Primary text color + Sidebar background color

-
- -
-

- Secondary text color -

- { - // 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("[data-theme='custom']") - ?.style.setProperty(`--color-bg-${shade}`, bgRgbValues); - document - .querySelector("[data-theme='custom']") - ?.style.setProperty(`--color-accent-${shade}`, accentRgbValues); - } - - const border = hexToRgb(values[1]); - document - .querySelector("[data-theme='custom']") - ?.style.setProperty("--color-border", `${border.r}, ${border.g}, ${border.b}`); - - const sidebarBg = hexToRgb(values[2]); - document - .querySelector("[data-theme='custom']") - ?.style.setProperty("--color-bg-sidebar", `${sidebarBg.r}, ${sidebarBg.g}, ${sidebarBg.b}`); - - const textBase = hexToRgb(values[4]); - document - .querySelector("[data-theme='custom']") - ?.style.setProperty("--color-text-base", `${textBase.r}, ${textBase.g}, ${textBase.b}`); - - const textSecondary = hexToRgb(values[5]); - document - .querySelector("[data-theme='custom']") - ?.style.setProperty( - "--color-text-secondary", - `${textSecondary.r}, ${textSecondary.g}, ${textSecondary.b}` - ); - document - .querySelector("[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 = {}; + 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("[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); + } + 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("[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); + } + + 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]); +}; diff --git a/apps/app/pages/colors.tsx b/apps/app/pages/colors.tsx index e26d26145..9fa9cd8d0 100644 --- a/apps/app/pages/colors.tsx +++ b/apps/app/pages/colors.tsx @@ -13,31 +13,73 @@ const Colors: NextPage = () => (
Accent:
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Background:
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sidebar background: +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js index c132bd669..9ef120ac3 100644 --- a/apps/app/tailwind.config.js +++ b/apps/app/tailwind.config.js @@ -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: { diff --git a/apps/app/types/users.d.ts b/apps/app/types/users.d.ts index bc9984c64..a9db3b993 100644 --- a/apps/app/types/users.d.ts +++ b/apps/app/types/users.d.ts @@ -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 {