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 <jaayden.halko@gmail.com>
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

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: 23 additions & 20 deletions
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy