New Style Setup Config

2025-08-16 10:37:07 +05:30
parent a87108e70a
commit 24b775aa2f
3 changed files with 238 additions and 238 deletions
@@ -0,0 +1,234 @@
+:root {
+    /* Roles (defaults) */
+    --primary: 221 83% 53%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 262 83% 58%;
+    --secondary-foreground: 210 40% 98%;
+    --tertiary: 26 95% 55%;
+    --tertiary-foreground: 26 100% 10%;
+    --accent: 173 80% 40%;
+    --accent-foreground: 168 75% 97%;
+    --info: 199 89% 48%;
+    --info-foreground: 210 40% 98%;
+    --success: 142 71% 45%;
+    --success-foreground: 144 60% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+    --link: 221 83% 53%;
+    --link-visited: 262 83% 58%;
+}
+
+/* ---------- Brand palettes (swap only role colors) ---------- */
+/* ocean */
+[data-color="ocean"] {
+    --primary: 199 89% 48%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 172 66% 45%;
+    --secondary-foreground: 168 75% 97%;
+    --tertiary: 260 84% 60%;
+    --tertiary-foreground: 260 100% 98%;
+    --accent: 205 100% 36%;
+    --accent-foreground: 210 40% 98%;
+    --info: 199 95% 62%;
+    --success: 145 65% 43%;
+    --success-foreground: 144 60% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* forest */
+[data-color="forest"] {
+    --primary: 142 71% 35%;
+    --primary-foreground: 144 60% 98%;
+    --secondary: 84 64% 35%;
+    --secondary-foreground: 60 30% 96%;
+    --tertiary: 25 86% 50%;
+    --tertiary-foreground: 26 100% 10%;
+    --accent: 160 84% 39%;
+    --accent-foreground: 150 80% 96%;
+    --info: 199 89% 48%;
+    --success: 142 71% 42%;
+    --success-foreground: 144 60% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* sunset */
+[data-color="sunset"] {
+    --primary: 14 90% 57%;
+    --primary-foreground: 24 100% 97%;
+    --secondary: 340 82% 52%;
+    --secondary-foreground: 0 0% 100%;
+    --tertiary: 48 96% 53%;
+    --tertiary-foreground: 26 100% 12%;
+    --accent: 262 83% 58%;
+    --accent-foreground: 210 40% 98%;
+    --info: 199 89% 48%;
+    --success: 142 71% 45%;
+    --success-foreground: 144 60% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* grape */
+[data-color="grape"] {
+    --primary: 262 83% 58%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 292 84% 61%;
+    --secondary-foreground: 210 40% 98%;
+    --tertiary: 199 89% 48%;
+    --tertiary-foreground: 210 40% 98%;
+    --accent: 316 73% 52%;
+    --accent-foreground: 0 0% 100%;
+    --info: 199 89% 48%;
+    --success: 150 70% 40%;
+    --success-foreground: 150 40% 96%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* slate (low-chroma) */
+[data-color="slate"] {
+    --primary: 215 20% 50%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 220 14% 34%;
+    --secondary-foreground: 210 40% 98%;
+    --tertiary: 220 10% 60%;
+    --tertiary-foreground: 222 47% 10%;
+    --accent: 215 16% 47%;
+    --accent-foreground: 210 40% 98%;
+    --info: 215 20% 65%;
+    --success: 142 25% 45%;
+    --success-foreground: 144 40% 96%;
+    --warning: 38 60% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 70% 55%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 216 10% 40%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* mint */
+[data-color="mint"] {
+    --primary: 158 64% 45%;
+    --primary-foreground: 160 84% 98%;
+    --secondary: 174 60% 40%;
+    --secondary-foreground: 168 75% 97%;
+    --tertiary: 192 84% 40%;
+    --tertiary-foreground: 210 40% 98%;
+    --accent: 173 80% 40%;
+    --accent-foreground: 168 75% 97%;
+    --info: 199 90% 50%;
+    --success: 156 72% 36%;
+    --success-foreground: 158 70% 96%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 2 83% 63%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* amber */
+[data-color="amber"] {
+    --primary: 38 94% 55%;
+    --primary-foreground: 26 83% 12%;
+    --secondary: 14 90% 57%;
+    --secondary-foreground: 24 100% 97%;
+    --tertiary: 26 100% 55%;
+    --tertiary-foreground: 26 100% 12%;
+    --accent: 199 89% 48%;
+    --accent-foreground: 210 40% 98%;
+    --info: 199 89% 48%;
+    --success: 142 71% 45%;
+    --success-foreground: 144 60% 98%;
+    --warning: 38 94% 55%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* crimson */
+[data-color="crimson"] {
+    --primary: 350 85% 55%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 84% 60%;
+    --secondary-foreground: 0 0% 100%;
+    --tertiary: 17 88% 60%;
+    --tertiary-foreground: 26 100% 12%;
+    --accent: 262 83% 58%;
+    --accent-foreground: 210 40% 98%;
+    --info: 199 89% 48%;
+    --success: 142 71% 45%;
+    --success-foreground: 144 60% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* indigo */
+[data-color="indigo"] {
+    --primary: 231 89% 60%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 262 83% 58%;
+    --secondary-foreground: 210 40% 98%;
+    --tertiary: 173 80% 40%;
+    --tertiary-foreground: 168 75% 97%;
+    --accent: 199 89% 48%;
+    --accent-foreground: 210 40% 98%;
+    --info: 201 96% 48%;
+    --success: 142 71% 45%;
+    --success-foreground: 144 60% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+@theme {
+    --color-primary: hsl(var(--primary));
+    --color-primary-foreground: hsl(var(--primary-foreground));
+    --color-secondary: hsl(var(--secondary));
+    --color-secondary-foreground: hsl(var(--secondary-foreground));
+    --color-tertiary: hsl(var(--tertiary));
+    --color-tertiary-foreground: hsl(var(--tertiary-foreground));
+    --color-accent: hsl(var(--accent));
+    --color-accent-foreground: hsl(var(--accent-foreground));
+    --color-info: hsl(var(--info));
+    --color-info-foreground: hsl(var(--info-foreground));
+    --color-success: hsl(var(--success));
+    --color-success-foreground: hsl(var(--success-foreground));
+    --color-warning: hsl(var(--warning));
+    --color-warning-foreground: hsl(var(--warning-foreground));
+    --color-danger: hsl(var(--danger));
+    --color-danger-foreground: hsl(var(--danger-foreground));
+    --color-neutral: hsl(var(--neutral));
+    --color-neutral-foreground: hsl(var(--neutral-foreground));
+}