|
5 | 5 | :root { |
6 | 6 | --background: hsl(0 0% 100%); |
7 | 7 | --foreground: hsl(222.2 47.4% 11.2%); |
8 | | - |
9 | 8 | --muted: hsl(210 40% 96.1%); |
10 | 9 | --muted-foreground: hsl(215.4 16.3% 46.9%); |
11 | | - |
12 | 10 | --popover: hsl(0 0% 100%); |
13 | 11 | --popover-foreground: hsl(222.2 47.4% 11.2%); |
14 | | - |
15 | 12 | --border: hsl(214.3 31.8% 91.4%); |
16 | 13 | --input: hsl(214.3 31.8% 91.4%); |
17 | | - |
18 | 14 | --card: hsl(0 0% 100%); |
19 | 15 | --card-foreground: hsl(222.2 47.4% 11.2%); |
20 | | - |
21 | 16 | --primary: hsl(222.2 47.4% 11.2%); |
22 | 17 | --primary-foreground: hsl(210 40% 98%); |
23 | | - |
24 | 18 | --secondary: hsl(210 40% 96.1%); |
25 | 19 | --secondary-foreground: hsl(222.2 47.4% 11.2%); |
26 | | - |
27 | 20 | --accent: hsl(210 40% 96.1%); |
28 | 21 | --accent-foreground: hsl(222.2 47.4% 11.2%); |
29 | | - |
30 | 22 | --destructive: hsl(0 100% 50%); |
31 | 23 | --destructive-foreground: hsl(210 40% 98%); |
32 | | - |
33 | 24 | --ring: hsl(215 20.2% 65.1%); |
34 | | - |
35 | 25 | --radius: 0.5rem; |
36 | 26 | } |
37 | 27 |
|
38 | 28 | .dark { |
39 | 29 | --background: hsl(224 71% 4%); |
40 | 30 | --foreground: hsl(213 31% 91%); |
41 | | - |
42 | 31 | --muted: hsl(223 47% 11%); |
43 | 32 | --muted-foreground: hsl(215.4 16.3% 56.9%); |
44 | | - |
45 | 33 | --accent: hsl(216 34% 17%); |
46 | 34 | --accent-foreground: hsl(210 40% 98%); |
47 | | - |
48 | 35 | --popover: hsl(224 71% 4%); |
49 | 36 | --popover-foreground: hsl(215 20.2% 65.1%); |
50 | | - |
51 | 37 | --border: hsl(216 34% 17%); |
52 | 38 | --input: hsl(216 34% 17%); |
53 | | - |
54 | 39 | --card: hsl(224 71% 4%); |
55 | 40 | --card-foreground: hsl(213 31% 91%); |
56 | | - |
57 | 41 | --primary: hsl(210 40% 98%); |
58 | 42 | --primary-foreground: hsl(222.2 47.4% 1.2%); |
59 | | - |
60 | | - --secondary: hsl(222.2 84% 4.9%); |
| 43 | + --secondary: hsl(222.2 47.4% 11.2%); |
61 | 44 | --secondary-foreground: hsl(210 40% 98%); |
62 | | - |
63 | 45 | --destructive: hsl(0 63% 31%); |
64 | 46 | --destructive-foreground: hsl(210 40% 98%); |
65 | | - |
66 | 47 | --ring: hsl(216 34% 17%); |
67 | | - |
68 | 48 | --radius: 0.5rem; |
69 | 49 | } |
70 | | - |
71 | | -* { |
72 | | - border-color: hsl(var(--border)); |
| 50 | +@theme inline { |
| 51 | + --color-background: var(--background); |
| 52 | + --color-foreground: var(--foreground); |
| 53 | + --color-muted: var(--muted); |
| 54 | + --color-muted-foreground: var(--muted-foreground); |
| 55 | + --color-popover: var(--popover); |
| 56 | + --color-popover-foreground: var(--popover-foreground); |
| 57 | + --color-border: var(--border); |
| 58 | + --color-input: var(--input); |
| 59 | + --color-card: var(--card); |
| 60 | + --color-card-foreground: var(--card-foreground); |
| 61 | + --color-primary: var(--primary); |
| 62 | + --color-primary-foreground: var(--primary-foreground); |
| 63 | + --color-secondary: var(--secondary); |
| 64 | + --color-secondary-foreground: var(--secondary-foreground); |
| 65 | + --color-accent: var(--accent); |
| 66 | + --color-accent-foreground: var(--accent-foreground); |
| 67 | + --color-destructive: var(--destructive); |
| 68 | + --color-destructive-foreground: var(--destructive-foreground); |
| 69 | + --color-ring: var(--ring); |
73 | 70 | } |
74 | 71 |
|
75 | | -body { |
76 | | - background-color: hsl(var(--background)); |
77 | | - color: hsl(var(--foreground)); |
78 | | - font-feature-settings: "rlig" 1, "calt" 1; |
| 72 | +@layer base { |
| 73 | + * { |
| 74 | + @apply border-[var(--color-border)]; |
| 75 | + } |
| 76 | + body { |
| 77 | + @apply bg-[var(--color-background)] text-[var(--color-foreground)]; |
| 78 | + } |
79 | 79 | } |
0 commit comments