New variables

Author: kjeske

templates/tailwind/tailwind.config.js

@@ -5,15 +5,9 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+        main: {
+          DEFAULT: "hsl(var(--main))",
+          foreground: "hsl(var(--main-foreground))"
         },
         primary: {
           DEFAULT: "hsl(var(--primary))",
@@ -24,19 +18,15 @@ module.exports = {
           DEFAULT: "hsl(var(--secondary))",
           foreground: "hsl(var(--secondary-foreground))",
         },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
         accent: {
           DEFAULT: "hsl(var(--accent))",
           foreground: "hsl(var(--accent-foreground))",
         },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+        error: {
+          DEFAULT: "hsl(var(--error))",
+          foreground: "hsl(var(--error-foreground))",
         },
-        border: "hsl(var(--border))",
+        control: "hsl(var(--control))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
       }

templates/tailwind/wwwroot/css/input.css

@@ -4,46 +4,33 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
+    --main: 0 0% 100%;
+    --main-foreground: 240 10% 3.9%;
     --primary: 220 75% 50%;
     --primary-accent: 220 75% 55%;
     --primary-foreground: 0 0% 98%;
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
     --accent: 240 4.8% 95.9%;
     --accent-foreground: 240 5.9% 40%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 240 5.9% 90%;
-    --input: 240 4.9% 83.9%;
-    --ring: 240 5% 64.9%;
-    --radius: 0.5rem;
+    --error: 0 84.2% 60.2%;
+    --error-foreground: 0 0% 100%;
+    --control: 240 5.9% 90%;
+    --input: 240 4.9% 84%;
+    --ring: 240 5% 65%;
   }
   .dark {
-    --background: 221.25 19.51% 16.08%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
+    --main: 221.25 19.51% 16.08%;
+    --main-foreground: 0 0% 98%;
     --primary: 221.21 77.08% 51.35%;
     --primary-foreground: 0 0% 90%;
     --secondary: 220 19% 20%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 240 5.9% 10%;
-    --muted-foreground: 240 4.4% 58%;
     --accent: 221.25 19.51% 14%;
     --accent-foreground: 221.25 19.51% 55%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 217.5 13.11% 25%;
+    --error: 0 84.2% 60.2%;
+    --error-foreground: 0 0% 100%;
+    --control: 217.5 13.11% 25%;
     --input: 217.5 13.11% 30%;
     --ring: 240 3.8% 46.1%;
   }

templates/tailwind/wwwroot/css/output.css

@@ -107,7 +107,7 @@
 }
 
 /*
-! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -550,32 +550,25 @@ video {
 
 /* Make elements with the HTML hidden attribute stay hidden by default */
 
-[hidden]:where(:not([hidden="until-found"])) {
+[hidden] {
   display: none;
 }
 
 :root {
-  --background: 0 0% 100%;
-  --foreground: 240 10% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 240 10% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 240 10% 3.9%;
+  --main: 0 0% 100%;
+  --main-foreground: 240 10% 3.9%;
   --primary: 220 75% 50%;
   --primary-accent: 220 75% 55%;
   --primary-foreground: 0 0% 98%;
   --secondary: 240 4.8% 95.9%;
   --secondary-foreground: 240 5.9% 10%;
-  --muted: 240 4.8% 95.9%;
-  --muted-foreground: 240 3.8% 46.1%;
   --accent: 240 4.8% 95.9%;
   --accent-foreground: 240 5.9% 40%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 100%;
-  --border: 240 5.9% 90%;
-  --input: 240 4.9% 83.9%;
-  --ring: 240 5% 64.9%;
-  --radius: 0.5rem;
+  --error: 0 84.2% 60.2%;
+  --error-foreground: 0 0% 100%;
+  --control: 240 5.9% 90%;
+  --input: 240 4.9% 84%;
+  --ring: 240 5% 65%;
 }
 
 .absolute {