Skip to content

Commit 163e071

Browse files
sethhorsleysethhorsley
committedMar 6, 2025
update application css
1 parent cf00f66 commit 163e071

File tree

1 file changed

+121
-57
lines changed

1 file changed

+121
-57
lines changed
 

‎lib/generators/ruby_ui/install/templates/application.tailwind.css.erb

+121-57
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,126 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import "tailwindcss";
42

5-
@layer base {
6-
:root {
7-
--background: 0 0% 100%;
8-
--foreground: 240 10% 3.9%;
9-
--card: 0 0% 100%;
10-
--card-foreground: 240 10% 3.9%;
11-
--popover: 0 0% 100%;
12-
--popover-foreground: 240 10% 3.9%;
13-
--primary: 240 5.9% 10%;
14-
--primary-foreground: 0 0% 98%;
15-
--secondary: 240 4.8% 95.9%;
16-
--secondary-foreground: 240 5.9% 10%;
17-
--muted: 240 4.8% 95.9%;
18-
--muted-foreground: 240 3.8% 46.1%;
19-
--accent: 240 4.8% 95.9%;
20-
--accent-foreground: 240 5.9% 10%;
21-
--destructive: 0 84.2% 60.2%;
22-
--destructive-foreground: 0 0% 98%;
23-
--border: 240 5.9% 90%;
24-
--input: 240 5.9% 90%;
25-
--ring: 240 5.9% 10%;
26-
--radius: 0.5rem;
3+
@custom-variant dark (&:is(.dark *));
274

28-
/* ruby_ui especific */
29-
--warning: 38 92% 50%;
30-
--warning-foreground: 0 0% 100%;
31-
--success: 87 100% 37%;
32-
--success-foreground: 0 0% 100%;
33-
}
5+
@source "./app/views/**/*.rb"; /* Phlex views */
6+
@source "./app/components/**/*.rb"; /* Phlex components */
7+
@source "./app/views/**/*.html.erb";
8+
@source "./app/helpers/**/*.rb";
9+
@source "./app/assets/stylesheets/**/*.css";
10+
@source "./app/javascript/**/*.js";
3411

35-
.dark {
36-
--background: 240 10% 3.9%;
37-
--foreground: 0 0% 98%;
38-
--card: 240 10% 3.9%;
39-
--card-foreground: 0 0% 98%;
40-
--popover: 240 10% 3.9%;
41-
--popover-foreground: 0 0% 98%;
42-
--primary: 0 0% 98%;
43-
--primary-foreground: 240 5.9% 10%;
44-
--secondary: 240 3.7% 15.9%;
45-
--secondary-foreground: 0 0% 98%;
46-
--muted: 240 3.7% 15.9%;
47-
--muted-foreground: 240 5% 64.9%;
48-
--accent: 240 3.7% 15.9%;
49-
--accent-foreground: 0 0% 98%;
50-
--destructive: 0 62.8% 30.6%;
51-
--destructive-foreground: 0 0% 98%;
52-
--border: 240 3.7% 15.9%;
53-
--input: 240 3.7% 15.9%;
54-
--ring: 240 4.9% 83.9%;
12+
:root {
13+
/* Base colors */
14+
--background: hsl(0 0% 100%);
15+
--foreground: hsl(240 10% 3.9%);
16+
--card: hsl(0 0% 100%);
17+
--card-foreground: hsl(240 10% 3.9%);
18+
--popover: hsl(0 0% 100%);
19+
--popover-foreground: hsl(240 10% 3.9%);
20+
--primary: hsl(240 5.9% 10%);
21+
--primary-foreground: hsl(0 0% 98%);
22+
--secondary: hsl(240 4.8% 95.9%);
23+
--secondary-foreground: hsl(240 5.9% 10%);
24+
--muted: hsl(240 4.8% 95.9%);
25+
--muted-foreground: hsl(240 3.8% 46.1%);
26+
--accent: hsl(240 4.8% 95.9%);
27+
--accent-foreground: hsl(240 5.9% 10%);
28+
--destructive: hsl(0 84.2% 60.2%);
29+
--destructive-foreground: hsl(0 0% 98%);
30+
--border: hsl(240 5.9% 90%);
31+
--input: hsl(240 5.9% 90%);
32+
--ring: hsl(240 5.9% 10%);
33+
--radius: hsl(0.5rem);
5534

56-
/* ruby_ui especific */
57-
--warning: 38 92% 50%;
58-
--warning-foreground: 0 0% 100%;
59-
--success: 84 81% 44%;
60-
--success-foreground: 0 0% 100%;
61-
}
35+
/* ruby_ui specific */
36+
--warning: hsl(38 92% 50%);
37+
--warning-foreground: hsl(0 0% 100%);
38+
--success: hsl(87 100% 37%);
39+
--success-foreground: hsl(0 0% 100%);
40+
41+
/* Container settings */
42+
--container-padding: hsl(2rem);
43+
--container-max-width-2xl: hsl(1400px);
44+
}
45+
46+
.dark {
47+
--background: hsl(240 10% 3.9%);
48+
--foreground: hsl(0 0% 98%);
49+
--card: hsl(240 10% 3.9%);
50+
--card-foreground: hsl(0 0% 98%);
51+
--popover: hsl(240 10% 3.9%);
52+
--popover-foreground: hsl(0 0% 98%);
53+
--primary: hsl(0 0% 98%);
54+
--primary-foreground: hsl(240 5.9% 10%);
55+
--secondary: hsl(240 3.7% 15.9%);
56+
--secondary-foreground: hsl(0 0% 98%);
57+
--muted: hsl(240 3.7% 15.9%);
58+
--muted-foreground: hsl(240 5% 64.9%);
59+
--accent: hsl(240 3.7% 15.9%);
60+
--accent-foreground: hsl(0 0% 98%);
61+
--destructive: hsl(0 62.8% 30.6%);
62+
--destructive-foreground: hsl(0 0% 98%);
63+
--border: hsl(240 3.7% 15.9%);
64+
--input: hsl(240 3.7% 15.9%);
65+
--ring: hsl(240 4.9% 83.9%);
66+
67+
/* ruby_ui specific */
68+
--warning: hsl(38 92% 50%);
69+
--warning-foreground: hsl(0 0% 100%);
70+
--success: hsl(84 81% 44%);
71+
--success-foreground: hsl(0 0% 100%);
72+
}
73+
74+
@theme inline {
75+
--color-background: var(--background);
76+
--color-foreground: var(--foreground);
77+
--color-card: var(--card);
78+
--color-card-foreground: var(--card-foreground);
79+
--color-popover: var(--popover);
80+
--color-popover-foreground: var(--popover-foreground);
81+
--color-primary: var(--primary);
82+
--color-primary-foreground: var(--primary-foreground);
83+
--color-secondary: var(--secondary);
84+
--color-secondary-foreground: var(--secondary-foreground);
85+
--color-muted: var(--muted);
86+
--color-muted-foreground: var(--muted-foreground);
87+
--color-accent: var(--accent);
88+
--color-accent-foreground: var(--accent-foreground);
89+
--color-destructive: var(--destructive);
90+
--color-destructive-foreground: var(--destructive-foreground);
91+
--color-border: var(--border);
92+
--color-input: var(--input);
93+
--color-ring: var(--ring);
94+
--color-radius: var(--radius);
95+
--color-warning: var(--warning);
96+
--color-warning-foreground: var(--warning-foreground);
97+
--color-success: var(--success);
98+
--color-success-foreground: var(--success-foreground);
99+
--color-container-padding: var(--container-padding);
100+
--color-container-max-width-2xl: var(--container-max-width-2xl);
101+
--color-background: var(--background);
102+
--color-foreground: var(--foreground);
103+
--color-card: var(--card);
104+
--color-card-foreground: var(--card-foreground);
105+
--color-popover: var(--popover);
106+
--color-popover-foreground: var(--popover-foreground);
107+
--color-primary: var(--primary);
108+
--color-primary-foreground: var(--primary-foreground);
109+
--color-secondary: var(--secondary);
110+
--color-secondary-foreground: var(--secondary-foreground);
111+
--color-muted: var(--muted);
112+
--color-muted-foreground: var(--muted-foreground);
113+
--color-accent: var(--accent);
114+
--color-accent-foreground: var(--accent-foreground);
115+
--color-destructive: var(--destructive);
116+
--color-destructive-foreground: var(--destructive-foreground);
117+
--color-border: var(--border);
118+
--color-input: var(--input);
119+
--color-ring: var(--ring);
120+
--color-warning: var(--warning);
121+
--color-warning-foreground: var(--warning-foreground);
122+
--color-success: var(--success);
123+
--color-success-foreground: var(--success-foreground);
62124
}
63125

64126
@layer base {
@@ -75,3 +137,5 @@
75137
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
76138
}
77139
}
140+
141+
@plugin "tailwindcss-animate";

0 commit comments

Comments
 (0)