Skip to content

Commit d628bb2

Browse files
Copilotxuyushun441-sys
Copilot
and
xuyushun441-sys
committed
Fix Tailwind 4 CSS structure and add @theme directive
Co-authored-by: xuyushun441-sys <255036401+xuyushun441-sys@users.noreply.github.com>
1 parent 952cbd4 commit d628bb2

2 files changed

Lines changed: 157 additions & 103 deletions

File tree

‎packages/components/src/index.css‎

Lines changed: 78 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -6,76 +6,103 @@
66
/* Tailwind plugin for animations */
77
@plugin 'tailwindcss-animate';
88

9+
/* Define theme colors for Tailwind 4 */
10+
@theme {
11+
/* Border radius tokens */
12+
--radius-lg: var(--radius);
13+
--radius-md: calc(var(--radius) - 2px);
14+
--radius-sm: calc(var(--radius) - 4px);
15+
16+
/* Color tokens mapped to CSS variables */
17+
--color-border: hsl(var(--border));
18+
--color-input: hsl(var(--input));
19+
--color-ring: hsl(var(--ring));
20+
--color-background: hsl(var(--background));
21+
--color-foreground: hsl(var(--foreground));
22+
--color-primary: hsl(var(--primary));
23+
--color-primary-foreground: hsl(var(--primary-foreground));
24+
--color-secondary: hsl(var(--secondary));
25+
--color-secondary-foreground: hsl(var(--secondary-foreground));
26+
--color-destructive: hsl(var(--destructive));
27+
--color-destructive-foreground: hsl(var(--destructive-foreground));
28+
--color-muted: hsl(var(--muted));
29+
--color-muted-foreground: hsl(var(--muted-foreground));
30+
--color-accent: hsl(var(--accent));
31+
--color-accent-foreground: hsl(var(--accent-foreground));
32+
--color-popover: hsl(var(--popover));
33+
--color-popover-foreground: hsl(var(--popover-foreground));
34+
--color-card: hsl(var(--card));
35+
--color-card-foreground: hsl(var(--card-foreground));
36+
}
37+
938
/* CSS custom properties for theme */
10-
@layer base {
11-
:root {
12-
--background: 0 0% 100%;
13-
--foreground: 222.2 84% 4.9%;
39+
:root {
40+
--background: 0 0% 100%;
41+
--foreground: 222.2 84% 4.9%;
1442

15-
--card: 0 0% 100%;
16-
--card-foreground: 222.2 84% 4.9%;
43+
--card: 0 0% 100%;
44+
--card-foreground: 222.2 84% 4.9%;
1745

18-
--popover: 0 0% 100%;
19-
--popover-foreground: 222.2 84% 4.9%;
46+
--popover: 0 0% 100%;
47+
--popover-foreground: 222.2 84% 4.9%;
2048

21-
--primary: 222.2 47.4% 11.2%;
22-
--primary-foreground: 210 40% 98%;
49+
--primary: 222.2 47.4% 11.2%;
50+
--primary-foreground: 210 40% 98%;
2351

24-
--secondary: 210 40% 96.1%;
25-
--secondary-foreground: 222.2 47.4% 11.2%;
52+
--secondary: 210 40% 96.1%;
53+
--secondary-foreground: 222.2 47.4% 11.2%;
2654

27-
--muted: 210 40% 96.1%;
28-
--muted-foreground: 215.4 16.3% 46.9%;
55+
--muted: 210 40% 96.1%;
56+
--muted-foreground: 215.4 16.3% 46.9%;
2957

30-
--accent: 210 40% 96.1%;
31-
--accent-foreground: 222.2 47.4% 11.2%;
58+
--accent: 210 40% 96.1%;
59+
--accent-foreground: 222.2 47.4% 11.2%;
3260

33-
--destructive: 0 84.2% 60.2%;
34-
--destructive-foreground: 210 40% 98%;
61+
--destructive: 0 84.2% 60.2%;
62+
--destructive-foreground: 210 40% 98%;
3563

36-
--border: 214.3 31.8% 91.4%;
37-
--input: 214.3 31.8% 91.4%;
38-
--ring: 222.2 84% 4.9%;
64+
--border: 214.3 31.8% 91.4%;
65+
--input: 214.3 31.8% 91.4%;
66+
--ring: 222.2 84% 4.9%;
3967

40-
--radius: 0.5rem;
41-
}
68+
--radius: 0.5rem;
69+
}
4270

43-
.dark {
44-
--background: 222.2 84% 4.9%;
45-
--foreground: 210 40% 98%;
71+
.dark {
72+
--background: 222.2 84% 4.9%;
73+
--foreground: 210 40% 98%;
4674

47-
--card: 222.2 84% 4.9%;
48-
--card-foreground: 210 40% 98%;
75+
--card: 222.2 84% 4.9%;
76+
--card-foreground: 210 40% 98%;
4977

50-
--popover: 222.2 84% 4.9%;
51-
--popover-foreground: 210 40% 98%;
78+
--popover: 222.2 84% 4.9%;
79+
--popover-foreground: 210 40% 98%;
5280

53-
--primary: 210 40% 98%;
54-
--primary-foreground: 222.2 47.4% 11.2%;
81+
--primary: 210 40% 98%;
82+
--primary-foreground: 222.2 47.4% 11.2%;
5583

56-
--secondary: 217.2 32.6% 17.5%;
57-
--secondary-foreground: 210 40% 98%;
84+
--secondary: 217.2 32.6% 17.5%;
85+
--secondary-foreground: 210 40% 98%;
5886

59-
--muted: 217.2 32.6% 17.5%;
60-
--muted-foreground: 215 20.2% 65.1%;
87+
--muted: 217.2 32.6% 17.5%;
88+
--muted-foreground: 215 20.2% 65.1%;
6189

62-
--accent: 217.2 32.6% 17.5%;
63-
--accent-foreground: 210 40% 98%;
90+
--accent: 217.2 32.6% 17.5%;
91+
--accent-foreground: 210 40% 98%;
6492

65-
--destructive: 0 62.8% 30.6%;
66-
--destructive-foreground: 210 40% 98%;
93+
--destructive: 0 62.8% 30.6%;
94+
--destructive-foreground: 210 40% 98%;
95+
96+
--border: 217.2 32.6% 17.5%;
97+
--input: 217.2 32.6% 17.5%;
98+
--ring: 212.7 26.8% 83.9%;
99+
}
67100

68-
--border: 217.2 32.6% 17.5%;
69-
--input: 217.2 32.6% 17.5%;
70-
--ring: 212.7 26.8% 83.9%;
71-
}
101+
* {
102+
border-color: hsl(var(--border));
72103
}
73104

74-
@layer base {
75-
* {
76-
@apply border-border;
77-
}
78-
body {
79-
@apply bg-background text-foreground;
80-
}
105+
body {
106+
background-color: hsl(var(--background));
107+
color: hsl(var(--foreground));
81108
}

‎packages/runner/src/index.css‎

Lines changed: 79 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -10,75 +10,102 @@
1010
/* Tailwind plugin for animations */
1111
@plugin 'tailwindcss-animate';
1212

13-
@layer base {
14-
:root {
15-
--background: 0 0% 100%;
16-
--foreground: 222.2 84% 4.9%;
13+
/* Define theme colors for Tailwind 4 */
14+
@theme {
15+
/* Border radius tokens */
16+
--radius-lg: var(--radius);
17+
--radius-md: calc(var(--radius) - 2px);
18+
--radius-sm: calc(var(--radius) - 4px);
1719

18-
--card: 0 0% 100%;
19-
--card-foreground: 222.2 84% 4.9%;
20+
/* Color tokens mapped to CSS variables */
21+
--color-border: hsl(var(--border));
22+
--color-input: hsl(var(--input));
23+
--color-ring: hsl(var(--ring));
24+
--color-background: hsl(var(--background));
25+
--color-foreground: hsl(var(--foreground));
26+
--color-primary: hsl(var(--primary));
27+
--color-primary-foreground: hsl(var(--primary-foreground));
28+
--color-secondary: hsl(var(--secondary));
29+
--color-secondary-foreground: hsl(var(--secondary-foreground));
30+
--color-destructive: hsl(var(--destructive));
31+
--color-destructive-foreground: hsl(var(--destructive-foreground));
32+
--color-muted: hsl(var(--muted));
33+
--color-muted-foreground: hsl(var(--muted-foreground));
34+
--color-accent: hsl(var(--accent));
35+
--color-accent-foreground: hsl(var(--accent-foreground));
36+
--color-popover: hsl(var(--popover));
37+
--color-popover-foreground: hsl(var(--popover-foreground));
38+
--color-card: hsl(var(--card));
39+
--color-card-foreground: hsl(var(--card-foreground));
40+
}
41+
42+
:root {
43+
--background: 0 0% 100%;
44+
--foreground: 222.2 84% 4.9%;
45+
46+
--card: 0 0% 100%;
47+
--card-foreground: 222.2 84% 4.9%;
2048

21-
--popover: 0 0% 100%;
22-
--popover-foreground: 222.2 84% 4.9%;
49+
--popover: 0 0% 100%;
50+
--popover-foreground: 222.2 84% 4.9%;
2351

24-
--primary: 222.2 47.4% 11.2%;
25-
--primary-foreground: 210 40% 98%;
52+
--primary: 222.2 47.4% 11.2%;
53+
--primary-foreground: 210 40% 98%;
2654

27-
--secondary: 210 40% 96.1%;
28-
--secondary-foreground: 222.2 47.4% 11.2%;
55+
--secondary: 210 40% 96.1%;
56+
--secondary-foreground: 222.2 47.4% 11.2%;
2957

30-
--muted: 210 40% 96.1%;
31-
--muted-foreground: 215.4 16.3% 46.9%;
58+
--muted: 210 40% 96.1%;
59+
--muted-foreground: 215.4 16.3% 46.9%;
3260

33-
--accent: 210 40% 96.1%;
34-
--accent-foreground: 222.2 47.4% 11.2%;
61+
--accent: 210 40% 96.1%;
62+
--accent-foreground: 222.2 47.4% 11.2%;
3563

36-
--destructive: 0 84.2% 60.2%;
37-
--destructive-foreground: 210 40% 98%;
64+
--destructive: 0 84.2% 60.2%;
65+
--destructive-foreground: 210 40% 98%;
3866

39-
--border: 214.3 31.8% 91.4%;
40-
--input: 214.3 31.8% 91.4%;
41-
--ring: 222.2 84% 4.9%;
67+
--border: 214.3 31.8% 91.4%;
68+
--input: 214.3 31.8% 91.4%;
69+
--ring: 222.2 84% 4.9%;
4270

43-
--radius: 0.5rem;
44-
}
71+
--radius: 0.5rem;
72+
}
4573

46-
.dark {
47-
--background: 222.2 84% 4.9%;
48-
--foreground: 210 40% 98%;
74+
.dark {
75+
--background: 222.2 84% 4.9%;
76+
--foreground: 210 40% 98%;
4977

50-
--card: 222.2 84% 4.9%;
51-
--card-foreground: 210 40% 98%;
78+
--card: 222.2 84% 4.9%;
79+
--card-foreground: 210 40% 98%;
5280

53-
--popover: 222.2 84% 4.9%;
54-
--popover-foreground: 210 40% 98%;
81+
--popover: 222.2 84% 4.9%;
82+
--popover-foreground: 210 40% 98%;
5583

56-
--primary: 210 40% 98%;
57-
--primary-foreground: 222.2 47.4% 11.2%;
84+
--primary: 210 40% 98%;
85+
--primary-foreground: 222.2 47.4% 11.2%;
5886

59-
--secondary: 217.2 32.6% 17.5%;
60-
--secondary-foreground: 210 40% 98%;
87+
--secondary: 217.2 32.6% 17.5%;
88+
--secondary-foreground: 210 40% 98%;
6189

62-
--muted: 217.2 32.6% 17.5%;
63-
--muted-foreground: 215 20.2% 65.1%;
90+
--muted: 217.2 32.6% 17.5%;
91+
--muted-foreground: 215 20.2% 65.1%;
6492

65-
--accent: 217.2 32.6% 17.5%;
66-
--accent-foreground: 210 40% 98%;
93+
--accent: 217.2 32.6% 17.5%;
94+
--accent-foreground: 210 40% 98%;
6795

68-
--destructive: 0 62.8% 30.6%;
69-
--destructive-foreground: 210 40% 98%;
96+
--destructive: 0 62.8% 30.6%;
97+
--destructive-foreground: 210 40% 98%;
7098

71-
--border: 217.2 32.6% 17.5%;
72-
--input: 217.2 32.6% 17.5%;
73-
--ring: 212.7 26.8% 83.9%;
74-
}
99+
--border: 217.2 32.6% 17.5%;
100+
--input: 217.2 32.6% 17.5%;
101+
--ring: 212.7 26.8% 83.9%;
75102
}
76-
77-
@layer base {
78-
* {
79-
@apply border-border;
80-
}
81-
body {
82-
@apply bg-background text-foreground;
83-
}
103+
104+
* {
105+
border-color: hsl(var(--border));
106+
}
107+
108+
body {
109+
background-color: hsl(var(--background));
110+
color: hsl(var(--foreground));
84111
}

0 commit comments

Comments
 (0)