Skip to content

Commit 8bcb587

Browse files
BrunoQuaresmaBrunoQuaresma
committed
chore: uses hsl for tailwind and shadcn theming
1 parent 7b33ab0 commit 8bcb587

File tree

2 files changed

+62
-46
lines changed

2 files changed

+62
-46
lines changed

‎site/src/index.css

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,50 @@
44

55
@layer base {
66
:root {
7-
--content-primary: #27272a;
8-
--content-secondary: #52525b;
9-
--content-link: #2563eb;
10-
--content-invert: #fafafa;
11-
--content-disabled: #a1a1aa;
12-
--content-success: #15803d;
13-
--content-danger: #ef4444;
14-
--surface-primary: #fafafa;
15-
--surface-secondary: #f4f4f5;
16-
--surface-tertiary: #e4e4e7;
17-
--surface-invert-primary: #27272a;
18-
--surface-invert-secondary: #3f3f46;
19-
--surface-error: #450a0a;
20-
--border-default: #e4e4e7;
21-
--border-error: #ef4444;
7+
--content-primary: 240, 3%, 15%;
8+
--content-secondary: 240, 4%, 32%;
9+
--content-link: 217, 84%, 54%;
10+
--content-invert: 0, 0%, 98%;
11+
--content-disabled: 240, 4%, 66%;
12+
--content-success: 144, 83%, 32%;
13+
--content-danger: 0, 82%, 63%;
14+
--surface-primary: 0, 0%, 98%;
15+
--surface-secondary: 240, 4%, 96%;
16+
--surface-tertiary: 240, 4%, 89%;
17+
--surface-invert-primary: 240, 3%, 15%;
18+
--surface-invert-secondary: 240, 4%, 25%;
19+
--surface-error: 0, 100%, 14%;
20+
--border-default: 240, 4%, 89%;
21+
--border-error: 0, 82%, 63%;
2222
--radius: 0.5rem;
23+
--chart-1: 12 76% 61%;
24+
--chart-2: 173 58% 39%;
25+
--chart-3: 197 37% 24%;
26+
--chart-4: 43 74% 66%;
27+
--chart-5: 27 87% 67%;
28+
--background: 0, 0%, 98%;
2329
}
2430
.dark {
25-
--content-primary: #fafafa;
26-
--content-secondary: #a1a1aa;
27-
--content-link: #60a5fa;
28-
--content-invert: #09090b;
29-
--content-disabled: #3f3f46;
30-
--content-success: #16a34a;
31-
--content-danger: #f87171;
32-
--surface-primary: #09090b;
33-
--surface-secondary: #18181b;
34-
--surface-tertiary: #27272a;
35-
--surface-invert-primary: #e4e4e7;
36-
--surface-invert-secondary: #a1a1aa;
37-
--surface-error: #450a0a;
38-
--border-default: #27272a;
39-
--border-error: #f87171;
31+
--content-primary: 0, 0%, 98%;
32+
--content-secondary: 240, 4%, 66%;
33+
--content-link: 217, 92%, 67%;
34+
--content-invert: 240, 5%, 4%;
35+
--content-disabled: 240, 4%, 25%;
36+
--content-success: 144, 83%, 35%;
37+
--content-danger: 0, 82%, 71%;
38+
--surface-primary: 240, 5%, 4%;
39+
--surface-secondary: 240, 5%, 9%;
40+
--surface-tertiary: 240, 3%, 15%;
41+
--surface-invert-primary: 240, 4%, 89%;
42+
--surface-invert-secondary: 240, 4%, 66%;
43+
--surface-error: 0, 100%, 14%;
44+
--border-default: 240, 3%, 15%;
45+
--border-error: 0, 82%, 71%;
46+
--chart-1: 220 70% 50%;
47+
--chart-2: 160 60% 45%;
48+
--chart-3: 30 80% 55%;
49+
--chart-4: 280 65% 60%;
50+
--chart-5: 340 75% 55%;
51+
--background: 240, 5%, 4%;
4052
}
4153
}

‎site/tailwind.config.js

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ module.exports = {
88
important: ["#root", "#storybook-root"],
99
theme: {
1010
fontSize: {
11-
"2xs": ["0.626rem","0.875rem"],
11+
"2xs": ["0.626rem", "0.875rem"],
12+
xs: ["0.75rem", "1rem"],
1213
sm: ["0.875rem", "1.5rem"],
1314
"3xl": ["2rem", "2.5rem"],
1415
},
@@ -20,27 +21,30 @@ module.exports = {
2021
},
2122
colors: {
2223
content: {
23-
primary: "var(--content-primary)",
24-
secondary: "var(--content-secondary)",
25-
disabled: "var(--content-disabled)",
26-
invert: "var(--content-invert)",
27-
success: "var(--content-success)",
28-
danger: "var(--content-danger)",
29-
link: "var(--content-link)",
24+
primary: "hsl(var(--content-primary))",
25+
secondary: "hsl(var(--content-secondary))",
26+
disabled: "hsl(var(--content-disabled))",
27+
invert: "hsl(var(--content-invert))",
28+
success: "hsl(var(--content-success))",
29+
danger: "hsl(var(--content-danger))",
30+
link: "hsl(var(--content-link))",
3031
},
3132
surface: {
32-
primary: "var(--surface-primary)",
33-
secondary: "var(--surface-secondary)",
34-
tertiary: "var(--surface-tertiary)",
33+
primary: "hsl(var(--surface-primary))",
34+
secondary: "hsl(var(--surface-secondary))",
35+
tertiary: "hsl(var(--surface-tertiary))",
3536
invert: {
36-
primary: "var(--surface-invert-primary)",
37-
secondary: "var(--surface-invert-secondary)",
37+
primary: "hsl(var(--surface-invert-primary))",
38+
secondary: "hsl(var(--surface-invert-secondary))",
3839
},
39-
error: "var(--surface-error)",
40+
error: "hsl(var(--surface-error))",
4041
},
4142
border: {
42-
default: "var(--border-default)",
43-
error: "var(--border-error)",
43+
DEFAULT: "hsl(var(--border-default))",
44+
error: "hsl(var(--border-error))",
45+
},
46+
background: {
47+
DEFAULT: "hsl(var(--background))",
4448
},
4549
},
4650
},

0 commit comments

Comments
 (0)