Merge pull request #98 from lambda-curry/fix-styles

Author: jaruesink

apps/docs/src/main.css

@@ -4,76 +4,75 @@
 :root {
   --background: hsl(0 0% 100%);
   --foreground: hsl(222.2 47.4% 11.2%);
-
   --muted: hsl(210 40% 96.1%);
   --muted-foreground: hsl(215.4 16.3% 46.9%);
-
   --popover: hsl(0 0% 100%);
   --popover-foreground: hsl(222.2 47.4% 11.2%);
-
   --border: hsl(214.3 31.8% 91.4%);
   --input: hsl(214.3 31.8% 91.4%);
-
   --card: hsl(0 0% 100%);
   --card-foreground: hsl(222.2 47.4% 11.2%);
-
   --primary: hsl(222.2 47.4% 11.2%);
   --primary-foreground: hsl(210 40% 98%);
-
   --secondary: hsl(210 40% 96.1%);
   --secondary-foreground: hsl(222.2 47.4% 11.2%);
-
   --accent: hsl(210 40% 96.1%);
   --accent-foreground: hsl(222.2 47.4% 11.2%);
-
   --destructive: hsl(0 100% 50%);
   --destructive-foreground: hsl(210 40% 98%);
-
   --ring: hsl(215 20.2% 65.1%);
-
   --radius: 0.5rem;
 }
 
 .dark {
   --background: hsl(224 71% 4%);
   --foreground: hsl(213 31% 91%);
-
   --muted: hsl(223 47% 11%);
   --muted-foreground: hsl(215.4 16.3% 56.9%);
-
   --accent: hsl(216 34% 17%);
   --accent-foreground: hsl(210 40% 98%);
-
   --popover: hsl(224 71% 4%);
   --popover-foreground: hsl(215 20.2% 65.1%);
-
   --border: hsl(216 34% 17%);
   --input: hsl(216 34% 17%);
-
   --card: hsl(224 71% 4%);
   --card-foreground: hsl(213 31% 91%);
-
   --primary: hsl(210 40% 98%);
   --primary-foreground: hsl(222.2 47.4% 1.2%);
-
-  --secondary: hsl(222.2 84% 4.9%);
+  --secondary: hsl(222.2 47.4% 11.2%);
   --secondary-foreground: hsl(210 40% 98%);
-
   --destructive: hsl(0 63% 31%);
   --destructive-foreground: hsl(210 40% 98%);
-
   --ring: hsl(216 34% 17%);
-
   --radius: 0.5rem;
 }
-
-* {
-  border-color: hsl(var(--border));
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-ring: var(--ring);
 }
 
-body {
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
-  font-feature-settings: "rlig" 1, "calt" 1;
+@layer base {
+  * {
+    @apply border-[var(--color-border)];
+  }
+  body {
+    @apply bg-[var(--color-background)] text-[var(--color-foreground)];
+  }
 }
-