Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 308df17

Browse files
BrunoQuaresmajaaydenh
BrunoQuaresma
and
jaaydenh
authored
chore: use hsl for tailwind and shadcn theming (#15453)
Co-authored-by: Jaayden Halko <[email protected]>
1 parent 111029e commit 308df17

File tree

2 files changed

+65
-50
lines changed

2 files changed

+65
-50
lines changed

‎site/src/index.css

+42-30
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

+23-20
Original file line numberDiff line numberDiff line change
@@ -7,40 +7,43 @@ module.exports = {
77
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
88
important: ["#root", "#storybook-root"],
99
theme: {
10-
fontSize: {
11-
"2xs": ["0.626rem","0.875rem"],
12-
sm: ["0.875rem", "1.5rem"],
13-
"3xl": ["2rem", "2.5rem"],
14-
},
1510
extend: {
11+
fontSize: {
12+
"2xs": ["0.626rem", "0.875rem"],
13+
sm: ["0.875rem", "1.5rem"],
14+
"3xl": ["2rem", "2.5rem"],
15+
},
1616
borderRadius: {
1717
lg: "var(--radius)",
1818
md: "calc(var(--radius) - 2px)",
1919
sm: "calc(var(--radius) - 4px)",
2020
},
2121
colors: {
2222
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)",
23+
primary: "hsl(var(--content-primary))",
24+
secondary: "hsl(var(--content-secondary))",
25+
disabled: "hsl(var(--content-disabled))",
26+
invert: "hsl(var(--content-invert))",
27+
success: "hsl(var(--content-success))",
28+
danger: "hsl(var(--content-danger))",
29+
link: "hsl(var(--content-link))",
3030
},
3131
surface: {
32-
primary: "var(--surface-primary)",
33-
secondary: "var(--surface-secondary)",
34-
tertiary: "var(--surface-tertiary)",
32+
primary: "hsl(var(--surface-primary))",
33+
secondary: "hsl(var(--surface-secondary))",
34+
tertiary: "hsl(var(--surface-tertiary))",
3535
invert: {
36-
primary: "var(--surface-invert-primary)",
37-
secondary: "var(--surface-invert-secondary)",
36+
primary: "hsl(var(--surface-invert-primary))",
37+
secondary: "hsl(var(--surface-invert-secondary))",
3838
},
39-
error: "var(--surface-error)",
39+
error: "hsl(var(--surface-error))",
4040
},
4141
border: {
42-
default: "var(--border-default)",
43-
error: "var(--border-error)",
42+
DEFAULT: "hsl(var(--border-default))",
43+
error: "hsl(var(--border-error))",
44+
},
45+
background: {
46+
DEFAULT: "hsl(var(--background))",
4447
},
4548
},
4649
},

0 commit comments

Comments
 (0)