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

Updated New color Schene

Browse Source
This commit is contained in:
Clintchiz
2025-08-19 15:54:50 +05:30
parent 8b1b3f2c78
commit eb6e6faf5b
3 changed files with 138 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Base.astro
+1 -1
View File
@@ -15,7 +15,7 @@ const attributes = Astro.props;
</head>
<body
class={cn(
"wr:bg-white wr:dark:bg-background wr:text-black wr:dark:text-white",
"wr:bg-white wr:dark:bg-background-800 wr:text-black wr:dark:text-white",
attributes.class,
)}
{...attributes}
src/styles/global.css
+4 -4
View File
@@ -36,22 +36,22 @@
--color-foreground: hsl(var(--foreground));
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));
--color-popover: hsl(var(--popover));
--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));
--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));
--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
--color-background: var(--background);
--color-background-0: var(--background-default);
--color-background: hsl(var(--background));
--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-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);
--color-background-950: var(--background-950);
}
src/styles/style.css
+133 -36
View File
@@ -27,10 +27,21 @@
--popover: 0 0% 100%;
--popover-foreground: 222 47% 11%;
--muted: 220 14% 96%;
--muted-foreground: 215 16% 46%;
--muted-foreground: 215 16% 46%;
--border: 214 31% 91%;
--input: 214 31% 91%;
--ring: 221 83% 53%;
--background-50: hsl(230.8 86.7% 97.1%);
--background-100: hsl(231.7 87.9% 93.5%);
--background-200: hsl(230 90.9% 87.1%);
--background-300: hsl(230 90% 80.4%);
--background-400: hsl(228.3 89.8% 73.1%);
--background-500: hsl(225.5 89.9% 64.9%);
--background-600: hsl(221 83.3% 53.1%);
--background-700: hsl(221.2 75.7% 40.4%);
--background-800: hsl(221.1 79.9% 27.3%);
--background-900: hsl(221.1 88% 16.3%);
--background-950: hsl(223.2 89.3% 11%);
}
/* ---------- Brand palettes (swap only role colors) ---------- */
@@ -53,6 +64,17 @@
--danger-foreground: 0 0% 100%;
--neutral: 215 16% 47%;
--neutral-foreground: 210 40% 98%;
--background-50: hsl(212.5 100% 95.3%);
--background-100: hsl(210.7 100% 91.2%);
--background-200: hsl(208.4 97.9% 81%);
--background-300: hsl(203.5 98.9% 65.1%);
--background-400: hsl(199 89.3% 47.8%);
--background-500: hsl(199.2 91.1% 39.6%);
--background-600: hsl(199.2 93.6% 30.8%);
--background-700: hsl(199.5 95% 23.5%);
--background-800: hsl(200.3 97.6% 16.1%);
--background-900: hsl(202 96.1% 10%);
--background-950: hsl(203.2 100% 6.1%);
}
/* forest */
@@ -74,6 +96,17 @@
--danger-foreground: 0 0% 100%;
--neutral: 215 16% 47%;
--neutral-foreground: 210 40% 98%;
--background-50: hsl(132.3 95.7% 91%);
--background-100: hsl(135.4 98.4% 75.9%);
--background-200: hsl(141.7 81% 54.5%);
--background-300: hsl(141.7 68% 47.8%);
--background-400: hsl(141.8 69.5% 41.2%);
--background-500: hsl(141.7 70.9% 35.1%);
--background-600: hsl(141.8 73.9% 27.1%);
--background-700: hsl(142 78.2% 19.8%);
--background-800: hsl(141.1 85.1% 13.1%);
--background-900: hsl(136.4 89.2% 7.3%);
--background-950: hsl(133 92% 4.9%);
}
/* sunset */
@@ -95,6 +128,17 @@
--danger-foreground: 0 0% 100%;
--neutral: 215 16% 47%;
--neutral-foreground: 210 40% 98%;
--background-50: hsl(6.7 81.8% 95.7%);
--background-100: hsl(6.5 86% 91.6%);
--background-200: hsl(7.1 86.4% 82.7%);
--background-300: hsl(8.9 88.9% 71.8%);
--background-400: hsl(14 90% 57.1%);
--background-500: hsl(13.9 68.9% 46.7%);
--background-600: hsl(14 71.1% 36.7%);
--background-700: hsl(14 73.8% 28.4%);
--background-800: hsl(14.4 79.8% 19.4%);
--background-900: hsl(12 86.2% 11.4%);
--background-950: hsl(8.6 89.7% 7.6%);
}
/* grape */
@@ -116,6 +160,17 @@
--danger-foreground: 0 0% 100%;
--neutral: 215 16% 47%;
--neutral-foreground: 210 40% 98%;
--background-50: hsl(254.3 84% 95.1%);
--background-100: hsl(253.2 83.7% 90.4%);
--background-200: hsl(255 85.7% 80.8%);
--background-300: hsl(257.1 84% 70.6%);
--background-400: hsl(261.9 83.2% 58%);
--background-500: hsl(263.9 71% 48.6%);
--background-600: hsl(264.1 73.1% 39.4%);
--background-700: hsl(263.9 74.7% 31%);
--background-800: hsl(264.1 79.3% 22.7%);
--background-900: hsl(263.2 86.1% 14.1%);
--background-950: hsl(261.7 88.7% 10.4%);
}
/* slate (low-chroma) */
@@ -137,6 +192,17 @@
--danger-foreground: 0 0% 100%;
--neutral: 216 10% 40%;
--neutral-foreground: 210 40% 98%;
--background-50: hsl(220 29% 93.9%);
--background-100: hsl(219 32.3% 87.8%);
--background-200: hsl(218 33.3% 75.9%);
--background-300: hsl(215.2 33% 62.5%);
--background-400: hsl(215.3 20% 50%);
--background-500: hsl(214.9 20.2% 41.8%);
--background-600: hsl(215 21.4% 32.9%);
--background-700: hsl(216.4 21.5% 25.5%);
--background-800: hsl(217.1 23.6% 17.5%);
--background-900: hsl(216 27.3% 10.8%);
--background-950: hsl(218.2 35.5% 6.1%);
}
/* mint */
@@ -158,6 +224,17 @@
--danger-foreground: 0 0% 100%;
--neutral: 215 16% 47%;
--neutral-foreground: 210 40% 98%;
--background-50: hsl(149.4 95.9% 90.4%);
--background-100: hsl(152.1 98.2% 77.6%);
--background-200: hsl(158 83.6% 57.1%);
--background-300: hsl(157.7 65.6% 51%);
--background-400: hsl(158 64.2% 44.9%);
--background-500: hsl(158 65.8% 36.7%);
--background-600: hsl(158 68.1% 28.2%);
--background-700: hsl(157.9 71.7% 20.8%);
--background-800: hsl(158.6 80% 13.7%);
--background-900: hsl(156.4 89.2% 7.3%);
--background-950: hsl(152.7 91.7% 4.7%);
}
/* amber */
@@ -179,6 +256,17 @@
--danger-foreground: 0 0% 100%;
--neutral: 215 16% 47%;
--neutral-foreground: 210 40% 98%;
--background-50: hsl(26.7 100% 96.5%);
--background-100: hsl(25.7 94.6% 92.7%);
--background-200: hsl(28.1 97.5% 84.5%);
--background-300: hsl(32.1 98.6% 72.2%);
--background-400: hsl(38.1 93.9% 54.9%);
--background-500: hsl(38.1 79% 44.9%);
--background-600: hsl(37.9 80.9% 34.9%);
--background-700: hsl(38 84.8% 25.9%);
--background-800: hsl(37.2 90.8% 17.1%);
--background-900: hsl(35.7 92.2% 10%);
--background-950: hsl(33.1 93.5% 6.1%);
}
/* crimson */
@@ -200,6 +288,17 @@
--danger-foreground: 0 0% 100%;
--neutral: 215 16% 47%;
--neutral-foreground: 210 40% 98%;
--background-50: hsl(357 83.3% 95.3%);
--background-100: hsl(355.5 83.3% 90.6%);
--background-200: hsl(355.7 85.6% 81%);
--background-300: hsl(354.6 88.1% 70.4%);
--background-400: hsl(350.2 85.2% 55.1%);
--background-500: hsl(349.9 70.9% 45.9%);
--background-600: hsl(350.2 72.2% 36.7%);
--background-700: hsl(350.4 75.7% 27.5%);
--background-800: hsl(350 81.3% 18.8%);
--background-900: hsl(352.2 87.1% 12.2%);
--background-950: hsl(354.9 89.7% 7.6%);
}
/* indigo */
@@ -221,6 +320,17 @@
--danger-foreground: 0 0% 100%;
--neutral: 215 16% 47%;
--neutral-foreground: 210 40% 98%;
--background-50: hsl(234.5 91.7% 95.3%);
--background-100: hsl(235.9 91.7% 90.6%);
--background-200: hsl(235.7 89.2% 81.8%);
--background-300: hsl(234.4 90.2% 72%);
--background-400: hsl(231.1 89.2% 60%);
--background-500: hsl(228.2 78.6% 50.6%);
--background-600: hsl(228.1 78.6% 40.4%);
--background-700: hsl(228.2 81.5% 31.8%);
--background-800: hsl(228.5 86.1% 22.5%);
--background-900: hsl(229.7 89.7% 15.3%);
--background-950: hsl(231.6 92.6% 10.6%);
}
[data-color="neutral"] {
@@ -241,6 +351,17 @@
--danger-foreground: 0 0% 100%;
--neutral: 215 16% 47%;
--neutral-foreground: 210 40% 98%;
--background-50: hsl(217.5 25% 93.7%);
--background-100: hsl(218.8 24.6% 86.5%);
--background-200: hsl(215.7 27% 73.1%);
--background-300: hsl(215 24% 60.8%);
--background-400: hsl(214.7 15.8% 47.1%);
--background-500: hsl(214.5 16.4% 39.4%);
--background-600: hsl(214.6 16.7% 30.6%);
--background-700: hsl(214.3 17.6% 23.3%);
--background-800: hsl(216 18.1% 16.3%);
--background-900: hsl(212.7 22.4% 9.6%);
--background-950: hsl(217.5 26.7% 5.9%);
}
[data-color="gray"] {
@@ -261,6 +382,17 @@
--danger-foreground: 0 0% 100%;
--neutral: 220 10% 40%;
--neutral-foreground: 210 40% 98%;
--color-background-50: hsl(225 10.5% 92.5%);
--color-background-100: hsl(220 12.7% 86.1%);
--color-background-200: hsl(220 12.9% 72.5%);
--color-background-300: hsl(219.2 12.6% 59.6%);
--color-background-400: hsl(220 8.9% 46.1%);
--color-background-500: hsl(218.8 8.7% 38.2%);
--color-background-600: hsl(222.9 9% 30.6%);
--color-background-700: hsl(220 10.2% 23.1%);
--color-background-800: hsl(220 10.8% 16.3%);
--color-background-900: hsl(220 12% 9.8%);
--color-background-950: hsl(225 13.3% 5.9%);
}
/* =======================
@@ -431,39 +563,4 @@
--muted-foreground: 215 18% 74%;
--border: 220 9% 23%;
--input: 220 9% 23%;
}
/* Light: base from primary, then darken toward black */
[data-color]:not(.dark [data-color]) {
--bg-tint: 4%;
--background-default: color-mix(in hsl, hsl(var(--primary)) var(--bg-tint), white);
--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: base from primary as well (tint toward black), then lighten toward white */
.dark [data-color],
:root.dark [data-color] {
--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%);
}