chore: update styled kit global.css template

Author: maiieul

packages/kit-styled/src/templates/global.css

@@ -191,27 +191,27 @@
     --card-foreground: 222.2 47.4% 11.2%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --secondary: 212.7 26.8% 83.9%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 0 0% 100%;
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
     --alert: 0 84.2% 60.2%;
     --alert-foreground: 210 40% 98%;
     --ring: 222.2 47.4% 11.2%;
   }
   .dark.base-slate {
-    --background: 222.2 47.4% 11.2%;
+    --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
-    --popover: 222.2 47.4% 11.2%;
+    --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
-    --card: 222.2 47.4% 11.2%;
+    --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
-    --secondary: 215.3 25% 26.7%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 0 0% 0%;
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
     --alert: 0 84.2% 60.2%;
@@ -230,27 +230,27 @@
     --card-foreground: 220.9 39.3% 11%;
     --border: 220 13% 91%;
     --input: 220 13% 91%;
-    --secondary: 216 12.2% 83.9%;
-    --secondary-foreground: 220.9 39.3% 11%;
+    --secondary: 220.9 39.3% 11%;
+    --secondary-foreground: 0 0% 100%;
     --accent: 220 14.3% 95.9%;
     --accent-foreground: 220.9 39.3% 11%;
     --alert: 0 84.2% 60.2%;
     --alert-foreground: 210 20% 98%;
     --ring: 220.9 39.3% 11%;
   }
   .dark.base-gray {
-    --background: 220.9 39.3% 11%;
+    --background: 224 71.4% 4.1%;
     --foreground: 210 20% 98%;
     --muted: 215 27.9% 16.9%;
     --muted-foreground: 217.9 10.6% 64.9%;
-    --popover: 220.9 39.3% 11%;
+    --popover: 224 71.4% 4.1%;
     --popover-foreground: 210 20% 98%;
-    --card: 220.9 39.3% 11%;
+    --card: 224 71.4% 4.1%;
     --card-foreground: 210 20% 98%;
     --border: 215 27.9% 16.9%;
     --input: 215 27.9% 16.9%;
-    --secondary: 216.9 19.1% 26.7%;
-    --secondary-foreground: 210 20% 98%;
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 0 0% 0%;
     --accent: 215 27.9% 16.9%;
     --accent-foreground: 210 20% 98%;
     --alert: 0 84.2% 60.2%;
@@ -269,27 +269,27 @@
     --card-foreground: 240 5.9% 10%;
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
-    --secondary: 240 4.9% 83.9%;
-    --secondary-foreground: 240 5.9% 10%;
+    --secondary: 240 5.9% 10%;
+    --secondary-foreground: 0 0% 100%;
     --accent: 240 4.8% 95.9%;
     --accent-foreground: 240 5.9% 10%;
     --alert: 0 84.2% 60.2%;
     --alert-foreground: 0 0% 98%;
     --ring: 240 5.9% 10%;
   }
   .dark.base-zinc {
-    --background: 240 5.9% 10%;
+    --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
     --muted: 240 3.7% 15.9%;
     --muted-foreground: 240 5% 64.9%;
-    --popover: 240 5.9% 10%;
+    --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --card: 240 5.9% 10%;
+    --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
-    --secondary: 240 5.3% 26.1%;
-    --secondary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 0 0% 0%;
     --accent: 240 3.7% 15.9%;
     --accent-foreground: 0 0% 98%;
     --alert: 0 84.2% 60.2%;
@@ -308,27 +308,27 @@
     --card-foreground: 0 0% 9%;
     --border: 0 0% 89.8%;
     --input: 0 0% 89.8%;
-    --secondary: 0 0% 83.1%;
-    --secondary-foreground: 0 0% 9%;
+    --secondary: 0 0% 9%;
+    --secondary-foreground: 0 0% 100%;
     --accent: 0 0% 96.1%;
     --accent-foreground: 0 0% 9%;
     --alert: 0 84.2% 60.2%;
     --alert-foreground: 0 0% 98%;
     --ring: 0 0% 9%;
   }
   .dark.base-neutral {
-    --background: 0 0% 9%;
+    --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
     --muted: 0 0% 14.9%;
     --muted-foreground: 0 0% 63.9%;
-    --popover: 0 0% 9%;
+    --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --card: 0 0% 9%;
+    --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
     --border: 0 0% 14.9%;
     --input: 0 0% 14.9%;
-    --secondary: 0 0% 25.1%;
-    --secondary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 0%;
     --accent: 0 0% 14.9%;
     --accent-foreground: 0 0% 98%;
     --alert: 0 84.2% 60.2%;
@@ -347,41 +347,39 @@
     --card-foreground: 24 9.8% 10%;
     --border: 20 5.9% 90%;
     --input: 20 5.9% 90%;
-    --secondary: 24 5.7% 82.9%;
-    --secondary-foreground: 24 9.8% 10%;
+    --secondary: 24 9.8% 10%;
+    --secondary-foreground: 0 0% 100%;
     --accent: 60 4.8% 95.9%;
     --accent-foreground: 24 9.8% 10%;
     --alert: 0 84.2% 60.2%;
     --alert-foreground: 60 9.1% 97.8%;
     --ring: 24 9.8% 10%;
   }
   .dark.base-stone {
-    --background: 24 9.8% 10%;
+    --background: 20 14.3% 4.1%;
     --foreground: 60 9.1% 97.8%;
     --muted: 12 6.5% 15.1%;
     --muted-foreground: 24 5.4% 63.9%;
-    --popover: 24 9.8% 10%;
+    --popover: 20 14.3% 4.1%;
     --popover-foreground: 60 9.1% 97.8%;
-    --card: 24 9.8% 10%;
+    --card: 20 14.3% 4.1%;
     --card-foreground: 60 9.1% 97.8%;
     --border: 12 6.5% 15.1%;
     --input: 12 6.5% 15.1%;
-    --secondary: 30 6.3% 25.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 0 0% 0%;
     --accent: 12 6.5% 15.1%;
     --accent-foreground: 60 9.1% 97.8%;
     --alert: 0 84.2% 60.2%;
     --alert-foreground: 0 0% 98%;
     --ring: 24 5.7% 82.9%;
   }
 
-  .primary-slate-100,
-  .dark.primary-slate-900 {
+  .primary-slate-100 {
     --primary: 210 40% 96.1%;
     --primary-foreground: 0 0% 0%;
   }
-  .primary-slate-200,
-  .dark.primary-slate-800 {
+  .primary-slate-200 {
     --primary: 214.3 31.8% 91.4%;
     --primary-foreground: 0 0% 0%;
   }
@@ -414,13 +412,11 @@
     --primary-foreground: 0 0% 100%;
   }
 
-  .primary-gray-100,
-  .dark.primary-gray-900 {
+  .primary-gray-100 {
     --primary: 220 14.3% 95.9%;
     --primary-foreground: 0 0% 0%;
   }
-  .primary-gray-200,
-  .dark.primary-gray-800 {
+  .primary-gray-200 {
     --primary: 220 13% 91%;
     --primary-foreground: 0 0% 0%;
   }
@@ -453,13 +449,11 @@
     --primary-foreground: 0 0% 100%;
   }
 
-  .primary-zinc-100,
-  .dark.primary-zinc-900 {
+  .primary-zinc-100 {
     --primary: 240 4.8% 95.9%;
     --primary-foreground: 0 0% 0%;
   }
-  .primary-zinc-200,
-  .dark.primary-zinc-800 {
+  .primary-zinc-200 {
     --primary: 240 5.9% 90%;
     --primary-foreground: 0 0% 0%;
   }
@@ -492,13 +486,11 @@
     --primary-foreground: 0 0% 100%;
   }
 
-  .primary-neutral-100,
-  .dark.primary-neutral-900 {
+  .primary-neutral-100 {
     --primary: 0 0% 96.1%;
     --primary-foreground: 0 0% 0%;
   }
-  .primary-neutral-200,
-  .dark.primary-neutral-800 {
+  .primary-neutral-200 {
     --primary: 0 0% 89.8%;
     --primary-foreground: 0 0% 0%;
   }
@@ -531,13 +523,11 @@
     --primary-foreground: 0 0% 100%;
   }
 
-  .primary-stone-100,
-  .dark.primary-stone-900 {
+  .primary-stone-100 {
     --primary: 60 4.8% 95.9%;
     --primary-foreground: 0 0% 0%;
   }
-  .primary-stone-200,
-  .dark.primary-stone-800 {
+  .primary-stone-200 {
     --primary: 20 5.9% 90%;
     --primary-foreground: 0 0% 0%;
   }
@@ -1336,6 +1326,6 @@ body {
 /* Not used yet - could be used for the colored text on the landing page when the make-it-yours color is too bright in light mode or too dim in dark mode */
 @layer components {
   .text-outlined {
-    @apply [text-shadow:-1px_0_black,_0_1px_black,_1px_0_black,_0_-1px_black] dark:[text-shadow:-1px_0_white,_0_1px_white,_1px_0_white,_0_-1px_white];
+    @apply [text-shadow:-1px_0_#aaa,_0_1px_#aaa,_1px_0_#aaa,_0_-1px_#aaa] dark:[text-shadow:-1px_0_#777,_0_1px_#777,_1px_0_#777,_0_-1px_#777];
   }
 }