Added New color Schene
This commit is contained in:
+21
-21
@@ -24,7 +24,7 @@
|
||||
--foreground: 222 47% 11%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222 47% 11%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222 47% 11%;
|
||||
--muted: 220 14% 96%;
|
||||
--muted-foreground: 215 16% 46%;
|
||||
@@ -437,29 +437,29 @@
|
||||
:root {
|
||||
--bg-tint: 4%;
|
||||
--background-default: color-mix(in hsl, hsl(var(--primary)) var(--bg-tint), white);
|
||||
--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%);
|
||||
--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%);
|
||||
}
|
||||
|
||||
/* Dark: start from current background and mix 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)) 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%);
|
||||
--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%);
|
||||
}
|
||||
Reference in New Issue
Block a user