From 92f2c5d84c07e29e706f79d5976bed4e278a2481 Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Tue, 19 Aug 2025 14:48:06 +0530 Subject: [PATCH] Added New color Schene --- src/styles/global.css | 5 ++-- src/styles/style.css | 53 +++++++++++++++++++++++-------------------- 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index f93035a..020c433 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -35,7 +35,7 @@ --color-neutral-foreground: hsl(var(--neutral-foreground)); --color-background: hsl(var(--background)); --color-foreground: hsl(var(--foreground)); - --color-card: hsl(var(--card)); + --color-card: hsl(var(--card)); --color-card-foreground: hsl(var(--card-foreground)); --color-popover: hsl(var(--popover)); --color-popover-foreground: hsl(var(--popover-foreground)); @@ -43,8 +43,9 @@ --color-muted-foreground: hsl(var(--muted-foreground)); --color-border: hsl(var(--border)); --color-input: hsl(var(--input)); + --color-background-0: var(--background-default); --color-background-50: var(--background-50); - --color-background-100: var(--background-100); + --color-background-100: var(--background-100); --color-background-200: var(--background-200); --color-background-300: var(--background-300); --color-background-400: var(--background-400); diff --git a/src/styles/style.css b/src/styles/style.css index 6c7f3e9..0d9bbb8 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -25,7 +25,7 @@ --card: 0 0% 100%; --card-foreground: 222 47% 11%; --popover: 0 0% 100%; - --popover-foreground: 222 47% 11%; + --popover-foreground: 222 47% 11%; --muted: 220 14% 96%; --muted-foreground: 215 16% 46%; --border: 214 31% 91%; @@ -433,33 +433,38 @@ --input: 220 9% 23%; } -/* Light: start from current background and mix toward black */ +/* Light: base from primary, then darken toward black */ :root { --bg-tint: 4%; + /* make the actual background derived from primary */ --background-default: color-mix(in hsl, hsl(var(--primary)) var(--bg-tint), white); - --background-50: color-mix(in hsl, hsl(var(--background-default)) 99%, black 1%); - --background-100: color-mix(in hsl, hsl(var(--background-default)) 97%, black 3%); - --background-200: color-mix(in hsl, hsl(var(--background-default)) 94%, black 6%); - --background-300: color-mix(in hsl, hsl(var(--background-default)) 88%, black 12%); - --background-400: color-mix(in hsl, hsl(var(--background-default)) 80%, black 20%); - --background-500: color-mix(in hsl, hsl(var(--background-default)) 72%, black 28%); - --background-600: color-mix(in hsl, hsl(var(--background-default)) 60%, black 40%); - --background-700: color-mix(in hsl, hsl(var(--background-default)) 48%, black 52%); - --background-800: color-mix(in hsl, hsl(var(--background-default)) 36%, black 64%); - --background-900: color-mix(in hsl, hsl(var(--background-default)) 24%, black 76%); + --background: var(--background-default); + + --background-50: color-mix(in hsl, var(--background-default) 99%, black 1%); + --background-100: color-mix(in hsl, var(--background-default) 97%, black 3%); + --background-200: color-mix(in hsl, var(--background-default) 94%, black 6%); + --background-300: color-mix(in hsl, var(--background-default) 88%, black 12%); + --background-400: color-mix(in hsl, var(--background-default) 80%, black 20%); + --background-500: color-mix(in hsl, var(--background-default) 72%, black 28%); + --background-600: color-mix(in hsl, var(--background-default) 60%, black 40%); + --background-700: color-mix(in hsl, var(--background-default) 48%, black 52%); + --background-800: color-mix(in hsl, var(--background-default) 36%, black 64%); + --background-900: color-mix(in hsl, var(--background-default) 24%, black 76%); } -/* Dark: start from current background and mix toward white */ +/* Dark: base from primary as well (tint toward black), then lighten toward white */ :root.dark { - --background-default: color-mix(in hsl, hsl(var(--primary)) var(--bg-tint), white); - --background-50: color-mix(in hsl, hsl(var(--background-default)) 24%, white 76%); - --background-100: color-mix(in hsl, hsl(var(--background-default)) 36%, white 64%); - --background-200: color-mix(in hsl, hsl(var(--background-default)) 48%, white 52%); - --background-300: color-mix(in hsl, hsl(var(--background-default)) 60%, white 40%); - --background-400: color-mix(in hsl, hsl(var(--background-default)) 72%, white 28%); - --background-500: color-mix(in hsl, hsl(var(--background-default)) 80%, white 20%); - --background-600: color-mix(in hsl, hsl(var(--background-default)) 88%, white 12%); - --background-700: color-mix(in hsl, hsl(var(--background-default)) 94%, white 6%); - --background-800: color-mix(in hsl, hsl(var(--background-default)) 97%, white 3%); - --background-900: color-mix(in hsl, hsl(var(--background-default)) 99%, white 1%); + --background-default: color-mix(in hsl, hsl(var(--primary)) var(--bg-tint), black); + --background: var(--background-default); + + --background-50: color-mix(in hsl, var(--background-default) 24%, white 76%); + --background-100: color-mix(in hsl, var(--background-default) 36%, white 64%); + --background-200: color-mix(in hsl, var(--background-default) 48%, white 52%); + --background-300: color-mix(in hsl, var(--background-default) 60%, white 40%); + --background-400: color-mix(in hsl, var(--background-default) 72%, white 28%); + --background-500: color-mix(in hsl, var(--background-default) 80%, white 20%); + --background-600: color-mix(in hsl, var(--background-default) 88%, white 12%); + --background-700: color-mix(in hsl, var(--background-default) 94%, white 6%); + --background-800: color-mix(in hsl, var(--background-default) 97%, white 3%); + --background-900: color-mix(in hsl, var(--background-default) 99%, white 1%); } \ No newline at end of file