Fixed Some Bugs

2025-08-17 15:05:44 +05:30
parent f8a0e82076
commit b362d10519
16 changed files with 549 additions and 306 deletions
@@ -33,4 +33,14 @@
    --color-danger-foreground: hsl(var(--danger-foreground));
    --color-neutral: hsl(var(--neutral));
    --color-neutral-foreground: hsl(var(--neutral-foreground));
+    --color-background: hsl(var(--background));
+        --color-foreground: hsl(var(--foreground));
+        --color-card: hsl(var(--card));
+        --color-card-foreground: hsl(var(--card-foreground));
+        --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));
 }
@@ -20,6 +20,17 @@
    --neutral-foreground: 210 40% 98%;
    --link: 221 83% 53%;
    --link-visited: 262 83% 58%;
+    --background: 0 0% 100%;
+        --foreground: 222 47% 11%;
+        --card: 0 0% 100%;
+        --card-foreground: 222 47% 11%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 222 47% 11%;
+        --muted: 220 14% 96%;
+        --muted-foreground: 215 16% 46%;
+        --border: 214 31% 91%;
+        --input: 214 31% 91%;
+        --ring: 221 83% 53%;
 }

 /* ---------- Brand palettes (swap only role colors) ---------- */
@@ -210,4 +221,213 @@
    --danger-foreground: 0 0% 100%;
    --neutral: 215 16% 47%;
    --neutral-foreground: 210 40% 98%;
+}
+[data-color="neutral"] {
+    --primary: 215 16% 47%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 220 14% 34%;
+    --secondary-foreground: 210 40% 98%;
+    --tertiary: 220 10% 60%;
+    --tertiary-foreground: 222 47% 10%;
+    --accent: 216 12% 52%;
+    --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%;
+}
+
+[data-color="gray"] {
+    --primary: 220 9% 46%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 220 7% 38%;
+    --secondary-foreground: 210 40% 98%;
+    --tertiary: 220 10% 60%;
+    --tertiary-foreground: 222 47% 10%;
+    --accent: 220 12% 52%;
+    --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: 220 10% 40%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* =======================
+   Dark surfaces baseline
+   ======================= */
+:root.dark {
+    color-scheme: dark;
+    --background: 222 14% 12%;
+    --foreground: 210 40% 96%;
+    --card: 222 12% 14%;
+    --card-foreground: 210 40% 96%;
+    --popover: 222 12% 14%;
+    --popover-foreground: 210 40% 96%;
+    --muted: 220 10% 18%;
+    --muted-foreground: 215 20% 72%;
+    --border: 220 12% 22%;
+    --input: 220 12% 22%;
+    --ring: 217 91% 60%;
+}
+
+/* =======================
+   Dark platters (surface-only)
+   ======================= */
+
+/* gray */
+:root.dark[data-color="ocean"] {
+    --background: 201 20% 13%;
+    --foreground: 210 40% 96%;
+    --card: 201 18% 15%;
+    --card-foreground: 210 40% 96%;
+    --popover: 201 18% 15%;
+    --popover-foreground: 210 40% 96%;
+    --muted: 201 16% 20%;
+    --muted-foreground: 200 20% 78%;
+    --border: 201 16% 24%;
+    --input: 201 16% 24%;
+}
+
+:root.dark[data-color="forest"] {
+    --background: 150 16% 12%;
+    --foreground: 160 30% 96%;
+    --card: 150 14% 14%;
+    --card-foreground: 160 30% 96%;
+    --popover: 150 14% 14%;
+    --popover-foreground: 160 30% 96%;
+    --muted: 150 12% 19%;
+    --muted-foreground: 150 16% 78%;
+    --border: 150 12% 23%;
+    --input: 150 12% 23%;
+}
+
+:root.dark[data-color="sunset"] {
+    --background: 18 20% 12%;
+    --foreground: 24 30% 96%;
+    --card: 18 18% 14%;
+    --card-foreground: 24 30% 96%;
+    --popover: 18 18% 14%;
+    --popover-foreground: 24 30% 96%;
+    --muted: 18 16% 20%;
+    --muted-foreground: 20 20% 80%;
+    --border: 18 16% 24%;
+    --input: 18 16% 24%;
+}
+
+:root.dark[data-color="grape"] {
+    --background: 275 22% 13%;
+    --foreground: 0 0% 98%;
+    --card: 275 20% 15%;
+    --card-foreground: 0 0% 98%;
+    --popover: 275 20% 15%;
+    --popover-foreground: 0 0% 98%;
+    --muted: 275 18% 21%;
+    --muted-foreground: 275 14% 78%;
+    --border: 275 16% 25%;
+    --input: 275 16% 25%;
+}
+
+:root.dark[data-color="slate"] {
+    --background: 220 12% 12%;
+    --foreground: 210 40% 96%;
+    --card: 220 11% 14%;
+    --card-foreground: 210 40% 96%;
+    --popover: 220 11% 14%;
+    --popover-foreground: 210 40% 96%;
+    --muted: 220 8% 20%;
+    --muted-foreground: 215 18% 74%;
+    --border: 220 10% 24%;
+    --input: 220 10% 24%;
+}
+
+:root.dark[data-color="indigo"] {
+    --background: 238 22% 14%;
+    --foreground: 210 40% 96%;
+    --card: 238 20% 16%;
+    --card-foreground: 210 40% 96%;
+    --popover: 238 20% 16%;
+    --popover-foreground: 210 40% 96%;
+    --muted: 238 18% 22%;
+    --muted-foreground: 220 25% 80%;
+    --border: 238 18% 26%;
+    --input: 238 18% 26%;
+}
+
+/* Aliases for the remaining brands */
+:root.dark[data-color="mint"] {
+    /* use forest surfaces */
+    --background: 150 16% 12%;
+    --foreground: 160 30% 96%;
+    --card: 150 14% 14%;
+    --card-foreground: 160 30% 96%;
+    --popover: 150 14% 14%;
+    --popover-foreground: 160 30% 96%;
+    --muted: 150 12% 19%;
+    --muted-foreground: 150 16% 78%;
+    --border: 150 12% 23%;
+    --input: 150 12% 23%;
+}
+
+:root.dark[data-color="amber"] {
+    /* use sunset surfaces */
+    --background: 18 20% 12%;
+    --foreground: 24 30% 96%;
+    --card: 18 18% 14%;
+    --card-foreground: 24 30% 96%;
+    --popover: 18 18% 14%;
+    --popover-foreground: 24 30% 96%;
+    --muted: 18 16% 20%;
+    --muted-foreground: 20 20% 80%;
+    --border: 18 16% 24%;
+    --input: 18 16% 24%;
+}
+
+:root.dark[data-color="crimson"] {
+    /* use gray baseline surfaces */
+    --background: 222 14% 12%;
+    --foreground: 210 40% 96%;
+    --card: 222 12% 14%;
+    --card-foreground: 210 40% 96%;
+    --popover: 222 12% 14%;
+    --popover-foreground: 210 40% 96%;
+    --muted: 220 10% 18%;
+    --muted-foreground: 215 20% 72%;
+    --border: 220 12% 22%;
+    --input: 220 12% 22%;
+}
+
+:root.dark[data-color="neutral"] {
+    --background: 220 12% 12%;
+    --foreground: 210 40% 96%;
+    --card: 220 11% 14%;
+    --card-foreground: 210 40% 96%;
+    --popover: 220 11% 14%;
+    --popover-foreground: 210 40% 96%;
+    --muted: 220 8% 20%;
+    --muted-foreground: 215 18% 74%;
+    --border: 220 10% 24%;
+    --input: 220 10% 24%;
+}
+
+:root.dark[data-color="gray"] {
+    --background: 220 10% 12%;
+    --foreground: 210 40% 96%;
+    --card: 220 9% 14%;
+    --card-foreground: 210 40% 96%;
+    --popover: 220 9% 14%;
+    --popover-foreground: 210 40% 96%;
+    --muted: 220 8% 19%;
+    --muted-foreground: 215 18% 74%;
+    --border: 220 9% 23%;
+    --input: 220 9% 23%;
 }