Skip to content

Commit 2cda679

Browse files
hotlonghotlong
committed
feat: enhance styling with custom CSS variables and extend Tailwind theme
1 parent d355f31 commit 2cda679

File tree

2 files changed

+149
-60
lines changed

2 files changed

+149
-60
lines changed

‎examples/prototype/src/index.css‎

Lines changed: 83 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,71 +2,95 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
7-
line-height: 1.5;
8-
font-weight: 400;
9-
10-
color-scheme: light dark;
11-
color: rgba(255, 255, 255, 0.87);
12-
background-color: #242424;
13-
14-
font-synthesis: none;
15-
text-rendering: optimizeLegibility;
16-
-webkit-font-smoothing: antialiased;
17-
-moz-osx-font-smoothing: grayscale;
18-
}
5+
@layer base {
6+
:root {
7+
--background: 0 0% 100%;
8+
--foreground: 240 10% 3.9%;
199

20-
a {
21-
font-weight: 500;
22-
color: #646cff;
23-
text-decoration: inherit;
24-
}
25-
a:hover {
26-
color: #535bf2;
27-
}
10+
--card: 0 0% 100%;
11+
--card-foreground: 240 10% 3.9%;
2812

29-
body {
30-
margin: 0;
31-
display: flex;
32-
place-items: center;
33-
min-width: 320px;
34-
min-height: 100vh;
35-
}
13+
--popover: 0 0% 100%;
14+
--popover-foreground: 240 10% 3.9%;
3615

37-
h1 {
38-
font-size: 3.2em;
39-
line-height: 1.1;
40-
}
16+
--primary: 240 5.9% 10%;
17+
--primary-foreground: 0 0% 98%;
4118

42-
button {
43-
border-radius: 8px;
44-
border: 1px solid transparent;
45-
padding: 0.6em 1.2em;
46-
font-size: 1em;
47-
font-weight: 500;
48-
font-family: inherit;
49-
background-color: #1a1a1a;
50-
cursor: pointer;
51-
transition: border-color 0.25s;
52-
}
53-
button:hover {
54-
border-color: #646cff;
55-
}
56-
button:focus,
57-
button:focus-visible {
58-
outline: 4px auto -webkit-focus-ring-color;
59-
}
19+
--secondary: 240 4.8% 95.9%;
20+
--secondary-foreground: 240 5.9% 10%;
6021

61-
@media (prefers-color-scheme: light) {
62-
:root {
63-
color: #213547;
64-
background-color: #ffffff;
22+
--muted: 240 4.8% 95.9%;
23+
--muted-foreground: 240 3.8% 46.1%;
24+
25+
--accent: 240 4.8% 95.9%;
26+
--accent-foreground: 240 5.9% 10%;
27+
28+
--destructiuve: 0 84.2% 60.2%;
29+
--destructive-foreground: 0 0% 98%;
30+
31+
--border: 240 5.9% 90%;
32+
--input: 240 5.9% 90%;
33+
--ring: 240 10% 3.9%;
34+
35+
--radius: 0.5rem;
36+
37+
--sidebar-background: 0 0% 98%;
38+
--sidebar-foreground: 240 5.3% 26.1%;
39+
--sidebar-primary: 240 5.9% 10%;
40+
--sidebar-primary-foreground: 0 0% 98%;
41+
--sidebar-accent: 240 4.8% 95.9%;
42+
--sidebar-accent-foreground: 240 5.9% 10%;
43+
--sidebar-border: 220 13% 91%;
44+
--sidebar-ring: 217.2 91.2% 59.8%;
6545
}
66-
a:hover {
67-
color: #747bff;
46+
47+
.dark {
48+
--background: 240 10% 3.9%;
49+
--foreground: 0 0% 98%;
50+
51+
--card: 240 10% 3.9%;
52+
--card-foreground: 0 0% 98%;
53+
54+
--popover: 240 10% 3.9%;
55+
--popover-foreground: 0 0% 98%;
56+
57+
--primary: 0 0% 98%;
58+
--primary-foreground: 240 5.9% 10%;
59+
60+
--secondary: 240 3.7% 15.9%;
61+
--secondary-foreground: 0 0% 98%;
62+
63+
--muted: 240 3.7% 15.9%;
64+
--muted-foreground: 240 5% 64.9%;
65+
66+
--accent: 240 3.7% 15.9%;
67+
--accent-foreground: 0 0% 98%;
68+
69+
--destructive: 0 62.8% 30.6%;
70+
--destructive-foreground: 0 0% 98%;
71+
72+
--border: 240 3.7% 15.9%;
73+
--input: 240 3.7% 15.9%;
74+
--ring: 240 4.9% 83.9%;
75+
76+
--sidebar-background: 240 5.9% 10%;
77+
--sidebar-foreground: 240 4.8% 95.9%;
78+
--sidebar-primary: 224.3 76.3% 48%;
79+
--sidebar-primary-foreground: 0 0% 100%;
80+
--sidebar-accent: 240 3.7% 15.9%;
81+
--sidebar-accent-foreground: 240 4.8% 95.9%;
82+
--sidebar-border: 240 3.7% 15.9%;
83+
--sidebar-ring: 217.2 91.2% 59.8%;
6884
}
69-
button {
70-
background-color: #f9f9f9;
85+
}
86+
87+
@layer base {
88+
* {
89+
@apply border-border;
90+
}
91+
body {
92+
@apply bg-background text-foreground;
7193
}
7294
}
95+
96+

‎examples/prototype/tailwind.config.js‎

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,72 @@ export default {
66
"../../packages/ui/src/**/*.{js,ts,jsx,tsx}"
77
],
88
theme: {
9-
extend: {},
9+
extend: {
10+
colors: {
11+
border: "hsl(var(--border))",
12+
input: "hsl(var(--input))",
13+
ring: "hsl(var(--ring))",
14+
background: "hsl(var(--background))",
15+
foreground: "hsl(var(--foreground))",
16+
primary: {
17+
DEFAULT: "hsl(var(--primary))",
18+
foreground: "hsl(var(--primary-foreground))",
19+
},
20+
secondary: {
21+
DEFAULT: "hsl(var(--secondary))",
22+
foreground: "hsl(var(--secondary-foreground))",
23+
},
24+
destructive: {
25+
DEFAULT: "hsl(var(--destructive))",
26+
foreground: "hsl(var(--destructive-foreground))",
27+
},
28+
muted: {
29+
DEFAULT: "hsl(var(--muted))",
30+
foreground: "hsl(var(--muted-foreground))",
31+
},
32+
accent: {
33+
DEFAULT: "hsl(var(--accent))",
34+
foreground: "hsl(var(--accent-foreground))",
35+
},
36+
popover: {
37+
DEFAULT: "hsl(var(--popover))",
38+
foreground: "hsl(var(--popover-foreground))",
39+
},
40+
card: {
41+
DEFAULT: "hsl(var(--card))",
42+
foreground: "hsl(var(--card-foreground))",
43+
},
44+
sidebar: {
45+
DEFAULT: "hsl(var(--sidebar-background))",
46+
foreground: "hsl(var(--sidebar-foreground))",
47+
primary: "hsl(var(--sidebar-primary))",
48+
'primary-foreground': "hsl(var(--sidebar-primary-foreground))",
49+
accent: "hsl(var(--sidebar-accent))",
50+
'accent-foreground': "hsl(var(--sidebar-accent-foreground))",
51+
border: "hsl(var(--sidebar-border))",
52+
ring: "hsl(var(--sidebar-ring))",
53+
}
54+
},
55+
borderRadius: {
56+
lg: "var(--radius)",
57+
md: "calc(var(--radius) - 2px)",
58+
sm: "calc(var(--radius) - 4px)",
59+
},
60+
keyframes: {
61+
"accordion-down": {
62+
from: { height: "0" },
63+
to: { height: "var(--radix-accordion-content-height)" },
64+
},
65+
"accordion-up": {
66+
from: { height: "var(--radix-accordion-content-height)" },
67+
to: { height: "0" },
68+
},
69+
},
70+
animation: {
71+
"accordion-down": "accordion-down 0.2s ease-out",
72+
"accordion-up": "accordion-up 0.2s ease-out",
73+
},
74+
},
1075
},
1176
plugins: [],
1277
}

0 commit comments

Comments
 (0)