Skip to content

Commit 9e3f715

Browse files
tuanphung2308tuanphung2308
committed
feat: add new CSS themes for styling with Tailwind CSS v4
1 parent 8fbdf59 commit 9e3f715

19 files changed

+1507
-668
lines changed

‎packages/shadcn/src/css/amethyst-haze.css‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
@import "tailwindcss";
2+
3+
:root {
4+
--background: oklch(0.9777 0.0041 301.4256);
5+
--foreground: oklch(0.3651 0.0325 287.0807);
6+
--card: oklch(1.0000 0 0);
7+
--card-foreground: oklch(0.3651 0.0325 287.0807);
8+
--popover: oklch(1.0000 0 0);
9+
--popover-foreground: oklch(0.3651 0.0325 287.0807);
10+
--primary: oklch(0.6104 0.0767 299.7335);
11+
--primary-foreground: oklch(0.9777 0.0041 301.4256);
12+
--secondary: oklch(0.8957 0.0265 300.2416);
13+
--secondary-foreground: oklch(0.3651 0.0325 287.0807);
14+
--muted: oklch(0.8906 0.0139 299.7754);
15+
--muted-foreground: oklch(0.5288 0.0375 290.7895);
16+
--accent: oklch(0.7889 0.0802 359.9375);
17+
--accent-foreground: oklch(0.3394 0.0441 1.7583);
18+
--destructive: oklch(0.6332 0.1578 22.6734);
19+
--destructive-foreground: oklch(0.9777 0.0041 301.4256);
20+
--border: oklch(0.8447 0.0226 300.1421);
21+
--input: oklch(0.9329 0.0124 301.2783);
22+
--ring: oklch(0.6104 0.0767 299.7335);
23+
--chart-1: oklch(0.6104 0.0767 299.7335);
24+
--chart-2: oklch(0.7889 0.0802 359.9375);
25+
--chart-3: oklch(0.7321 0.0749 169.8670);
26+
--chart-4: oklch(0.8540 0.0882 76.8292);
27+
--chart-5: oklch(0.7857 0.0645 258.0839);
28+
--sidebar: oklch(0.9554 0.0082 301.3541);
29+
--sidebar-foreground: oklch(0.3651 0.0325 287.0807);
30+
--sidebar-primary: oklch(0.6104 0.0767 299.7335);
31+
--sidebar-primary-foreground: oklch(0.9777 0.0041 301.4256);
32+
--sidebar-accent: oklch(0.7889 0.0802 359.9375);
33+
--sidebar-accent-foreground: oklch(0.3394 0.0441 1.7583);
34+
--sidebar-border: oklch(0.8719 0.0198 302.1690);
35+
--sidebar-ring: oklch(0.6104 0.0767 299.7335);
36+
--font-sans: Geist, sans-serif;
37+
--font-serif: "Lora", Georgia, serif;
38+
--font-mono: "Fira Code", "Courier New", monospace;
39+
--radius: 0.5rem;
40+
--shadow-2xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
41+
--shadow-xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
42+
--shadow-sm: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
43+
--shadow: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
44+
--shadow-md: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 2px 4px 0px hsl(0 0% 0% / 0.06);
45+
--shadow-lg: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 4px 6px 0px hsl(0 0% 0% / 0.06);
46+
--shadow-xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 8px 10px 0px hsl(0 0% 0% / 0.06);
47+
--shadow-2xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.15);
48+
--tracking-normal: 0em;
49+
--spacing: 0.25rem;
50+
}
51+
52+
.dark {
53+
--background: oklch(0.2166 0.0215 292.8474);
54+
--foreground: oklch(0.9053 0.0245 293.5570);
55+
--card: oklch(0.2544 0.0301 292.7315);
56+
--card-foreground: oklch(0.9053 0.0245 293.5570);
57+
--popover: oklch(0.2544 0.0301 292.7315);
58+
--popover-foreground: oklch(0.9053 0.0245 293.5570);
59+
--primary: oklch(0.7058 0.0777 302.0489);
60+
--primary-foreground: oklch(0.2166 0.0215 292.8474);
61+
--secondary: oklch(0.4604 0.0472 295.5578);
62+
--secondary-foreground: oklch(0.9053 0.0245 293.5570);
63+
--muted: oklch(0.2560 0.0320 294.8380);
64+
--muted-foreground: oklch(0.6974 0.0282 300.0614);
65+
--accent: oklch(0.3181 0.0321 308.6149);
66+
--accent-foreground: oklch(0.8391 0.0692 2.6681);
67+
--destructive: oklch(0.6875 0.1420 21.4566);
68+
--destructive-foreground: oklch(0.2166 0.0215 292.8474);
69+
--border: oklch(0.3063 0.0359 293.3367);
70+
--input: oklch(0.2847 0.0346 291.2726);
71+
--ring: oklch(0.7058 0.0777 302.0489);
72+
--chart-1: oklch(0.7058 0.0777 302.0489);
73+
--chart-2: oklch(0.8391 0.0692 2.6681);
74+
--chart-3: oklch(0.7321 0.0749 169.8670);
75+
--chart-4: oklch(0.8540 0.0882 76.8292);
76+
--chart-5: oklch(0.7857 0.0645 258.0839);
77+
--sidebar: oklch(0.1985 0.0200 293.6639);
78+
--sidebar-foreground: oklch(0.9053 0.0245 293.5570);
79+
--sidebar-primary: oklch(0.7058 0.0777 302.0489);
80+
--sidebar-primary-foreground: oklch(0.2166 0.0215 292.8474);
81+
--sidebar-accent: oklch(0.3181 0.0321 308.6149);
82+
--sidebar-accent-foreground: oklch(0.8391 0.0692 2.6681);
83+
--sidebar-border: oklch(0.2847 0.0346 291.2726);
84+
--sidebar-ring: oklch(0.7058 0.0777 302.0489);
85+
--font-sans: Geist, sans-serif;
86+
--font-serif: "Lora", Georgia, serif;
87+
--font-mono: "Fira Code", "Courier New", monospace;
88+
--radius: 0.5rem;
89+
--shadow-2xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
90+
--shadow-xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
91+
--shadow-sm: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
92+
--shadow: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
93+
--shadow-md: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 2px 4px 0px hsl(0 0% 0% / 0.06);
94+
--shadow-lg: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 4px 6px 0px hsl(0 0% 0% / 0.06);
95+
--shadow-xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 8px 10px 0px hsl(0 0% 0% / 0.06);
96+
--shadow-2xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.15);
97+
}
98+
99+
@theme inline {
100+
--color-background: var(--background);
101+
--color-foreground: var(--foreground);
102+
--color-card: var(--card);
103+
--color-card-foreground: var(--card-foreground);
104+
--color-popover: var(--popover);
105+
--color-popover-foreground: var(--popover-foreground);
106+
--color-primary: var(--primary);
107+
--color-primary-foreground: var(--primary-foreground);
108+
--color-secondary: var(--secondary);
109+
--color-secondary-foreground: var(--secondary-foreground);
110+
--color-muted: var(--muted);
111+
--color-muted-foreground: var(--muted-foreground);
112+
--color-accent: var(--accent);
113+
--color-accent-foreground: var(--accent-foreground);
114+
--color-destructive: var(--destructive);
115+
--color-destructive-foreground: var(--destructive-foreground);
116+
--color-border: var(--border);
117+
--color-input: var(--input);
118+
--color-ring: var(--ring);
119+
--color-chart-1: var(--chart-1);
120+
--color-chart-2: var(--chart-2);
121+
--color-chart-3: var(--chart-3);
122+
--color-chart-4: var(--chart-4);
123+
--color-chart-5: var(--chart-5);
124+
--color-sidebar: var(--sidebar);
125+
--color-sidebar-foreground: var(--sidebar-foreground);
126+
--color-sidebar-primary: var(--sidebar-primary);
127+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
128+
--color-sidebar-accent: var(--sidebar-accent);
129+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
130+
--color-sidebar-border: var(--sidebar-border);
131+
--color-sidebar-ring: var(--sidebar-ring);
132+
133+
--font-sans: var(--font-sans);
134+
--font-mono: var(--font-mono);
135+
--font-serif: var(--font-serif);
136+
137+
--radius-sm: calc(var(--radius) - 4px);
138+
--radius-md: calc(var(--radius) - 2px);
139+
--radius-lg: var(--radius);
140+
--radius-xl: calc(var(--radius) + 4px);
141+
142+
--shadow-2xs: var(--shadow-2xs);
143+
--shadow-xs: var(--shadow-xs);
144+
--shadow-sm: var(--shadow-sm);
145+
--shadow: var(--shadow);
146+
--shadow-md: var(--shadow-md);
147+
--shadow-lg: var(--shadow-lg);
148+
--shadow-xl: var(--shadow-xl);
149+
--shadow-2xl: var(--shadow-2xl);
150+
}

‎packages/shadcn/src/css/blue.css‎

Lines changed: 0 additions & 71 deletions
This file was deleted.

‎packages/shadcn/src/css/caffeine.css‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
@import "tailwindcss";
2+
3+
:root {
4+
--background: oklch(0.9821 0 0);
5+
--foreground: oklch(0.2435 0 0);
6+
--card: oklch(0.9911 0 0);
7+
--card-foreground: oklch(0.2435 0 0);
8+
--popover: oklch(0.9911 0 0);
9+
--popover-foreground: oklch(0.2435 0 0);
10+
--primary: oklch(0.4341 0.0392 41.9938);
11+
--primary-foreground: oklch(1.0000 0 0);
12+
--secondary: oklch(0.9200 0.0651 74.3695);
13+
--secondary-foreground: oklch(0.3499 0.0685 40.8288);
14+
--muted: oklch(0.9521 0 0);
15+
--muted-foreground: oklch(0.5032 0 0);
16+
--accent: oklch(0.9310 0 0);
17+
--accent-foreground: oklch(0.2435 0 0);
18+
--destructive: oklch(0.6271 0.1936 33.3390);
19+
--destructive-foreground: oklch(1.0000 0 0);
20+
--border: oklch(0.8822 0 0);
21+
--input: oklch(0.8822 0 0);
22+
--ring: oklch(0.4341 0.0392 41.9938);
23+
--chart-1: oklch(0.4341 0.0392 41.9938);
24+
--chart-2: oklch(0.9200 0.0651 74.3695);
25+
--chart-3: oklch(0.9310 0 0);
26+
--chart-4: oklch(0.9367 0.0523 75.5009);
27+
--chart-5: oklch(0.4338 0.0437 41.6746);
28+
--sidebar: oklch(0.9881 0 0);
29+
--sidebar-foreground: oklch(0.2645 0 0);
30+
--sidebar-primary: oklch(0.3250 0 0);
31+
--sidebar-primary-foreground: oklch(0.9881 0 0);
32+
--sidebar-accent: oklch(0.9761 0 0);
33+
--sidebar-accent-foreground: oklch(0.3250 0 0);
34+
--sidebar-border: oklch(0.9401 0 0);
35+
--sidebar-ring: oklch(0.7731 0 0);
36+
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
37+
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
38+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
39+
--radius: 0.5rem;
40+
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
41+
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
42+
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
43+
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
44+
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
45+
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
46+
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
47+
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
48+
--tracking-normal: 0em;
49+
--spacing: 0.25rem;
50+
}
51+
52+
.dark {
53+
--background: oklch(0.1776 0 0);
54+
--foreground: oklch(0.9491 0 0);
55+
--card: oklch(0.2134 0 0);
56+
--card-foreground: oklch(0.9491 0 0);
57+
--popover: oklch(0.2134 0 0);
58+
--popover-foreground: oklch(0.9491 0 0);
59+
--primary: oklch(0.9247 0.0524 66.1732);
60+
--primary-foreground: oklch(0.2029 0.0240 200.1962);
61+
--secondary: oklch(0.3163 0.0190 63.6992);
62+
--secondary-foreground: oklch(0.9247 0.0524 66.1732);
63+
--muted: oklch(0.2520 0 0);
64+
--muted-foreground: oklch(0.7699 0 0);
65+
--accent: oklch(0.2850 0 0);
66+
--accent-foreground: oklch(0.9491 0 0);
67+
--destructive: oklch(0.6271 0.1936 33.3390);
68+
--destructive-foreground: oklch(1.0000 0 0);
69+
--border: oklch(0.2351 0.0115 91.7467);
70+
--input: oklch(0.4017 0 0);
71+
--ring: oklch(0.9247 0.0524 66.1732);
72+
--chart-1: oklch(0.9247 0.0524 66.1732);
73+
--chart-2: oklch(0.3163 0.0190 63.6992);
74+
--chart-3: oklch(0.2850 0 0);
75+
--chart-4: oklch(0.3481 0.0219 67.0001);
76+
--chart-5: oklch(0.9245 0.0533 67.0855);
77+
--sidebar: oklch(0.2103 0.0059 285.8852);
78+
--sidebar-foreground: oklch(0.9674 0.0013 286.3752);
79+
--sidebar-primary: oklch(0.4882 0.2172 264.3763);
80+
--sidebar-primary-foreground: oklch(1.0000 0 0);
81+
--sidebar-accent: oklch(0.2739 0.0055 286.0326);
82+
--sidebar-accent-foreground: oklch(0.9674 0.0013 286.3752);
83+
--sidebar-border: oklch(0.2739 0.0055 286.0326);
84+
--sidebar-ring: oklch(0.8711 0.0055 286.2860);
85+
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
86+
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
87+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
88+
--radius: 0.5rem;
89+
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
90+
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
91+
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
92+
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
93+
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
94+
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
95+
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
96+
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
97+
}
98+
99+
@theme inline {
100+
--color-background: var(--background);
101+
--color-foreground: var(--foreground);
102+
--color-card: var(--card);
103+
--color-card-foreground: var(--card-foreground);
104+
--color-popover: var(--popover);
105+
--color-popover-foreground: var(--popover-foreground);
106+
--color-primary: var(--primary);
107+
--color-primary-foreground: var(--primary-foreground);
108+
--color-secondary: var(--secondary);
109+
--color-secondary-foreground: var(--secondary-foreground);
110+
--color-muted: var(--muted);
111+
--color-muted-foreground: var(--muted-foreground);
112+
--color-accent: var(--accent);
113+
--color-accent-foreground: var(--accent-foreground);
114+
--color-destructive: var(--destructive);
115+
--color-destructive-foreground: var(--destructive-foreground);
116+
--color-border: var(--border);
117+
--color-input: var(--input);
118+
--color-ring: var(--ring);
119+
--color-chart-1: var(--chart-1);
120+
--color-chart-2: var(--chart-2);
121+
--color-chart-3: var(--chart-3);
122+
--color-chart-4: var(--chart-4);
123+
--color-chart-5: var(--chart-5);
124+
--color-sidebar: var(--sidebar);
125+
--color-sidebar-foreground: var(--sidebar-foreground);
126+
--color-sidebar-primary: var(--sidebar-primary);
127+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
128+
--color-sidebar-accent: var(--sidebar-accent);
129+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
130+
--color-sidebar-border: var(--sidebar-border);
131+
--color-sidebar-ring: var(--sidebar-ring);
132+
133+
--font-sans: var(--font-sans);
134+
--font-mono: var(--font-mono);
135+
--font-serif: var(--font-serif);
136+
137+
--radius-sm: calc(var(--radius) - 4px);
138+
--radius-md: calc(var(--radius) - 2px);
139+
--radius-lg: var(--radius);
140+
--radius-xl: calc(var(--radius) + 4px);
141+
142+
--shadow-2xs: var(--shadow-2xs);
143+
--shadow-xs: var(--shadow-xs);
144+
--shadow-sm: var(--shadow-sm);
145+
--shadow: var(--shadow);
146+
--shadow-md: var(--shadow-md);
147+
--shadow-lg: var(--shadow-lg);
148+
--shadow-xl: var(--shadow-xl);
149+
--shadow-2xl: var(--shadow-2xl);
150+
}

0 commit comments

Comments
 (0)