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

Added New color

Browse Source
This commit is contained in:
Clintchiz
2025-08-19 14:13:19 +05:30
parent 87d02b8b0a
commit 394086bde7
2 changed files with 40 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+10
View File
@@ -43,4 +43,14 @@
--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-50: var(--background-50);
--color-background-100: var(--background-100);
--color-background-200: var(--background-200);
--color-background-300: var(--background-300);
--color-background-400: var(--background-400);
--color-background-500: var(--background-500);
--color-background-600: var(--background-600);
--color-background-700: var(--background-700);
--color-background-800: var(--background-800);
--color-background-900: var(--background-900);
} }
src/styles/style.css
+28
View File
@@ -222,6 +222,7 @@
--neutral: 215 16% 47%; --neutral: 215 16% 47%;
--neutral-foreground: 210 40% 98%; --neutral-foreground: 210 40% 98%;
} }
[data-color="neutral"] { [data-color="neutral"] {
--primary: 215 16% 47%; --primary: 215 16% 47%;
--primary-foreground: 210 40% 98%; --primary-foreground: 210 40% 98%;
@@ -431,3 +432,30 @@
--border: 220 9% 23%; --border: 220 9% 23%;
--input: 220 9% 23%; --input: 220 9% 23%;
} }
/* Light: start from current background and mix toward black */
:root {
--background-50: color-mix(in hsl, hsl(var(--background)) 99%, black 1%);
--background-100: color-mix(in hsl, hsl(var(--background)) 97%, black 3%);
--background-200: color-mix(in hsl, hsl(var(--background)) 94%, black 6%);
--background-300: color-mix(in hsl, hsl(var(--background)) 88%, black 12%);
--background-400: color-mix(in hsl, hsl(var(--background)) 80%, black 20%);
--background-500: color-mix(in hsl, hsl(var(--background)) 72%, black 28%);
--background-600: color-mix(in hsl, hsl(var(--background)) 60%, black 40%);
--background-700: color-mix(in hsl, hsl(var(--background)) 48%, black 52%);
--background-800: color-mix(in hsl, hsl(var(--background)) 36%, black 64%);
--background-900: color-mix(in hsl, hsl(var(--background)) 24%, black 76%);
}
/* Dark: start from current background and mix toward white */
:root.dark {
--background-50: color-mix(in hsl, hsl(var(--background)) 24%, white 76%);
--background-100: color-mix(in hsl, hsl(var(--background)) 36%, white 64%);
--background-200: color-mix(in hsl, hsl(var(--background)) 48%, white 52%);
--background-300: color-mix(in hsl, hsl(var(--background)) 60%, white 40%);
--background-400: color-mix(in hsl, hsl(var(--background)) 72%, white 28%);
--background-500: color-mix(in hsl, hsl(var(--background)) 80%, white 20%);
--background-600: color-mix(in hsl, hsl(var(--background)) 88%, white 12%);
--background-700: color-mix(in hsl, hsl(var(--background)) 94%, white 6%);
--background-800: color-mix(in hsl, hsl(var(--background)) 97%, white 3%);
--background-900: color-mix(in hsl, hsl(var(--background)) 99%, white 1%);
}