|
1 | 1 | @import "tailwindcss"; |
2 | 2 |
|
3 | | -@layer base { |
4 | | - :root { |
5 | | - --background: 0 0% 100%; |
6 | | - --foreground: 0 0% 3.9%; |
7 | | - --card: 0 0% 100%; |
8 | | - --card-foreground: 0 0% 3.9%; |
9 | | - --popover: 0 0% 100%; |
10 | | - --popover-foreground: 0 0% 3.9%; |
11 | | - --primary: 0 0% 9%; |
12 | | - --primary-foreground: 0 0% 98%; |
13 | | - --secondary: 0 0% 96.1%; |
14 | | - --secondary-foreground: 0 0% 9%; |
15 | | - --muted: 0 0% 96.1%; |
16 | | - --muted-foreground: 0 0% 45.1%; |
17 | | - --accent: 0 0% 96.1%; |
18 | | - --accent-foreground: 0 0% 9%; |
19 | | - --destructive: 0 84.2% 60.2%; |
20 | | - --destructive-foreground: 0 0% 98%; |
21 | | - --border: 0 0% 89.8%; |
22 | | - --input: 0 0% 89.8%; |
23 | | - --ring: 0 0% 3.9%; |
24 | | - --radius: 0.5rem; |
25 | | - --chart-1: 12 76% 61%; |
26 | | - --chart-2: 173 58% 39%; |
27 | | - --chart-3: 197 37% 24%; |
28 | | - --chart-4: 43 74% 66%; |
29 | | - --chart-5: 27 87% 67%; |
30 | | - } |
| 3 | +:root { |
| 4 | + --background: hsl(0 0% 100%); |
| 5 | + --foreground: hsl(0 0% 3.9%); |
| 6 | + --card: hsl(0 0% 100%); |
| 7 | + --card-foreground: hsl(0 0% 3.9%); |
| 8 | + --popover: hsl(0 0% 100%); |
| 9 | + --popover-foreground: hsl(0 0% 3.9%); |
| 10 | + --primary: hsl(0 0% 9%); |
| 11 | + --primary-foreground: hsl(0 0% 98%); |
| 12 | + --secondary: hsl(0 0% 96.1%); |
| 13 | + --secondary-foreground: hsl(0 0% 9%); |
| 14 | + --muted: hsl(0 0% 96.1%); |
| 15 | + --muted-foreground: hsl(0 0% 45.1%); |
| 16 | + --accent: hsl(0 0% 96.1%); |
| 17 | + --accent-foreground: hsl(0 0% 9%); |
| 18 | + --destructive: hsl(0 84.2% 60.2%); |
| 19 | + --destructive-foreground: hsl(0 0% 98%); |
| 20 | + --border: hsl(0 0% 89.8%); |
| 21 | + --input: hsl(0 0% 89.8%); |
| 22 | + --ring: hsl(0 0% 3.9%); |
| 23 | + --radius: 0.5rem; |
| 24 | + --chart-1: hsl(12 76% 61%); |
| 25 | + --chart-2: hsl(173 58% 39%); |
| 26 | + --chart-3: hsl(197 37% 24%); |
| 27 | + --chart-4: hsl(43 74% 66%); |
| 28 | + --chart-5: hsl(27 87% 67%); |
| 29 | +} |
31 | 30 |
|
32 | | - .dark { |
33 | | - --background: 0 0% 3.9%; /* #0a0a0a */ |
34 | | - --foreground: 0 0% 98%; /* #ededed */ |
35 | | - --card: 0 0% 3.9%; |
36 | | - --card-foreground: 0 0% 98%; |
37 | | - --popover: 0 0% 3.9%; |
38 | | - --popover-foreground: 0 0% 98%; |
39 | | - --primary: 0 0% 98%; |
40 | | - --primary-foreground: 0 0% 9%; |
41 | | - --secondary: 0 0% 14.9%; |
42 | | - --secondary-foreground: 0 0% 98%; |
43 | | - --muted: 0 0% 14.9%; |
44 | | - --muted-foreground: 0 0% 63.9%; |
45 | | - --accent: 0 0% 14.9%; |
46 | | - --accent-foreground: 0 0% 98%; |
47 | | - --destructive: 0 62.8% 30.6%; |
48 | | - --destructive-foreground: 0 0% 98%; |
49 | | - --border: 0 0% 14.9%; /* #262626 - slightly lighter than bg */ |
50 | | - --input: 0 0% 14.9%; |
51 | | - --ring: 0 0% 83.1%; |
52 | | - --chart-1: 220 70% 50%; |
53 | | - --chart-2: 160 60% 45%; |
54 | | - --chart-3: 30 80% 55%; |
55 | | - --chart-4: 280 65% 60%; |
56 | | - --chart-5: 340 75% 55%; |
57 | | - } |
| 31 | +.dark { |
| 32 | + --background: hsl(0 0% 3.9%); |
| 33 | + --foreground: hsl(0 0% 98%); |
| 34 | + --card: hsl(0 0% 3.9%); |
| 35 | + --card-foreground: hsl(0 0% 98%); |
| 36 | + --popover: hsl(0 0% 3.9%); |
| 37 | + --popover-foreground: hsl(0 0% 98%); |
| 38 | + --primary: hsl(0 0% 98%); |
| 39 | + --primary-foreground: hsl(0 0% 9%); |
| 40 | + --secondary: hsl(0 0% 14.9%); |
| 41 | + --secondary-foreground: hsl(0 0% 98%); |
| 42 | + --muted: hsl(0 0% 14.9%); |
| 43 | + --muted-foreground: hsl(0 0% 63.9%); |
| 44 | + --accent: hsl(0 0% 14.9%); |
| 45 | + --accent-foreground: hsl(0 0% 98%); |
| 46 | + --destructive: hsl(0 62.8% 30.6%); |
| 47 | + --destructive-foreground: hsl(0 0% 98%); |
| 48 | + --border: hsl(0 0% 14.9%); |
| 49 | + --input: hsl(0 0% 14.9%); |
| 50 | + --ring: hsl(0 0% 83.1%); |
| 51 | + --chart-1: hsl(220 70% 50%); |
| 52 | + --chart-2: hsl(160 60% 45%); |
| 53 | + --chart-3: hsl(30 80% 55%); |
| 54 | + --chart-4: hsl(280 65% 60%); |
| 55 | + --chart-5: hsl(340 75% 55%); |
| 56 | +} |
| 57 | + |
| 58 | +@theme inline { |
| 59 | + --color-background: var(--background); |
| 60 | + --color-foreground: var(--foreground); |
| 61 | + --color-card: var(--card); |
| 62 | + --color-card-foreground: var(--card-foreground); |
| 63 | + --color-popover: var(--popover); |
| 64 | + --color-popover-foreground: var(--popover-foreground); |
| 65 | + --color-primary: var(--primary); |
| 66 | + --color-primary-foreground: var(--primary-foreground); |
| 67 | + --color-secondary: var(--secondary); |
| 68 | + --color-secondary-foreground: var(--secondary-foreground); |
| 69 | + --color-muted: var(--muted); |
| 70 | + --color-muted-foreground: var(--muted-foreground); |
| 71 | + --color-accent: var(--accent); |
| 72 | + --color-accent-foreground: var(--accent-foreground); |
| 73 | + --color-destructive: var(--destructive); |
| 74 | + --color-destructive-foreground: var(--destructive-foreground); |
| 75 | + --color-border: var(--border); |
| 76 | + --color-input: var(--input); |
| 77 | + --color-ring: var(--ring); |
| 78 | + --color-chart-1: var(--chart-1); |
| 79 | + --color-chart-2: var(--chart-2); |
| 80 | + --color-chart-3: var(--chart-3); |
| 81 | + --color-chart-4: var(--chart-4); |
| 82 | + --color-chart-5: var(--chart-5); |
| 83 | + --radius-lg: var(--radius); |
| 84 | + --radius-md: calc(var(--radius) - 2px); |
| 85 | + --radius-sm: calc(var(--radius) - 4px); |
58 | 86 | } |
59 | 87 |
|
60 | 88 | @layer base { |
|
0 commit comments