WorkRoot/Astro-Component
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added New color Schene

Browse Source
This commit is contained in:
Clintchiz
2025-08-19 14:48:06 +05:30
parent 4cf60184f8
commit 92f2c5d84c
2 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+1
View File
@@ -43,6 +43,7 @@
--color-muted-foreground: hsl(var(--muted-foreground)); --color-muted-foreground: hsl(var(--muted-foreground));
--color-border: hsl(var(--border)); --color-border: hsl(var(--border));
--color-input: hsl(var(--input)); --color-input: hsl(var(--input));
--color-background-0: var(--background-default);
--color-background-50: var(--background-50); --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-200: var(--background-200);
src/styles/style.css
+28 -23
View File
@@ -433,33 +433,38 @@
--input: 220 9% 23%; --input: 220 9% 23%;
} }
/* Light: start from current background and mix toward black */ /* Light: base from primary, then darken toward black */
:root { :root {
--bg-tint: 4%; --bg-tint: 4%;
/* make the actual background derived from primary */
--background-default: color-mix(in hsl, hsl(var(--primary)) var(--bg-tint), white); --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: var(--background-default);
--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-50: color-mix(in hsl, var(--background-default) 99%, black 1%);
--background-300: color-mix(in hsl, hsl(var(--background-default)) 88%, black 12%); --background-100: color-mix(in hsl, var(--background-default) 97%, black 3%);
--background-400: color-mix(in hsl, hsl(var(--background-default)) 80%, black 20%); --background-200: color-mix(in hsl, var(--background-default) 94%, black 6%);
--background-500: color-mix(in hsl, hsl(var(--background-default)) 72%, black 28%); --background-300: color-mix(in hsl, var(--background-default) 88%, black 12%);
--background-600: color-mix(in hsl, hsl(var(--background-default)) 60%, black 40%); --background-400: color-mix(in hsl, var(--background-default) 80%, black 20%);
--background-700: color-mix(in hsl, hsl(var(--background-default)) 48%, black 52%); --background-500: color-mix(in hsl, var(--background-default) 72%, black 28%);
--background-800: color-mix(in hsl, hsl(var(--background-default)) 36%, black 64%); --background-600: color-mix(in hsl, var(--background-default) 60%, black 40%);
--background-900: color-mix(in hsl, hsl(var(--background-default)) 24%, black 76%); --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 { :root.dark {
--background-default: color-mix(in hsl, hsl(var(--primary)) var(--bg-tint), white); --background-default: color-mix(in hsl, hsl(var(--primary)) var(--bg-tint), black);
--background-50: color-mix(in hsl, hsl(var(--background-default)) 24%, white 76%); --background: var(--background-default);
--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-50: color-mix(in hsl, var(--background-default) 24%, white 76%);
--background-300: color-mix(in hsl, hsl(var(--background-default)) 60%, white 40%); --background-100: color-mix(in hsl, var(--background-default) 36%, white 64%);
--background-400: color-mix(in hsl, hsl(var(--background-default)) 72%, white 28%); --background-200: color-mix(in hsl, var(--background-default) 48%, white 52%);
--background-500: color-mix(in hsl, hsl(var(--background-default)) 80%, white 20%); --background-300: color-mix(in hsl, var(--background-default) 60%, white 40%);
--background-600: color-mix(in hsl, hsl(var(--background-default)) 88%, white 12%); --background-400: color-mix(in hsl, var(--background-default) 72%, white 28%);
--background-700: color-mix(in hsl, hsl(var(--background-default)) 94%, white 6%); --background-500: color-mix(in hsl, var(--background-default) 80%, white 20%);
--background-800: color-mix(in hsl, hsl(var(--background-default)) 97%, white 3%); --background-600: color-mix(in hsl, var(--background-default) 88%, white 12%);
--background-900: color-mix(in hsl, hsl(var(--background-default)) 99%, white 1%); --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%);
} }