Skip to content

Commit da0070d

Browse files
karinevieirakarinevieira
committed
Use shadcn classes
1 parent 5322e0c commit da0070d

File tree

2 files changed

+87
-74
lines changed

2 files changed

+87
-74
lines changed

‎lib/generators/ruby_ui/install/install_generator.rb

+1-8
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,7 @@ def add_tailwind_config
6565
def install_tailwind_animate
6666
say "Installing tw-animate-css plugin"
6767

68-
package = "tw-animate-css"
69-
if File.exist?(Rails.root.join("yarn.lock"))
70-
run "yarn add #{package}"
71-
elsif File.exist?(Rails.root.join("package-lock.json"))
72-
run "npm install #{package}"
73-
else
74-
say "Could not detect the package manager, you need to install '#{package}' manually", :red
75-
end
68+
install_js_package("tw-animate-css")
7669
end
7770

7871
def add_ruby_ui_base

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

+86-66
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,45 @@
11
@import "tailwindcss";
22
@import "tw-animate-css";
33

4+
@plugin "@tailwindcss/forms";
5+
@plugin "@tailwindcss/typography";
6+
47
@custom-variant dark (&:is(.dark *));
58

69
:root {
7-
/* Base colors */
8-
--background: hsl(0 0% 100%);
9-
--foreground: hsl(240 10% 3.9%);
10-
--card: hsl(0 0% 100%);
11-
--card-foreground: hsl(240 10% 3.9%);
12-
--popover: hsl(0 0% 100%);
13-
--popover-foreground: hsl(240 10% 3.9%);
14-
--primary: hsl(240 5.9% 10%);
15-
--primary-foreground: hsl(0 0% 98%);
16-
--secondary: hsl(240 4.8% 95.9%);
17-
--secondary-foreground: hsl(240 5.9% 10%);
18-
--muted: hsl(240 4.8% 95.9%);
19-
--muted-foreground: hsl(240 3.8% 46.1%);
20-
--accent: hsl(240 4.8% 95.9%);
21-
--accent-foreground: hsl(240 5.9% 10%);
22-
--destructive: hsl(0 84.2% 60.2%);
23-
--destructive-foreground: hsl(0 0% 98%);
24-
--border: hsl(240 5.9% 90%);
25-
--input: hsl(240 5.9% 90%);
26-
--ring: hsl(240 5.9% 10%);
27-
--radius: hsl(0.5rem);
10+
--background: oklch(1 0 0);
11+
--foreground: oklch(0.145 0 0);
12+
--card: oklch(1 0 0);
13+
--card-foreground: oklch(0.145 0 0);
14+
--popover: oklch(1 0 0);
15+
--popover-foreground: oklch(0.145 0 0);
16+
--primary: oklch(0.205 0 0);
17+
--primary-foreground: oklch(0.985 0 0);
18+
--secondary: oklch(0.97 0 0);
19+
--secondary-foreground: oklch(0.205 0 0);
20+
--muted: oklch(0.97 0 0);
21+
--muted-foreground: oklch(0.556 0 0);
22+
--accent: oklch(0.97 0 0);
23+
--accent-foreground: oklch(0.205 0 0);
24+
--destructive: oklch(0.577 0.245 27.325);
25+
--destructive-foreground: oklch(0.577 0.245 27.325);
26+
--border: oklch(0.922 0 0);
27+
--input: oklch(0.922 0 0);
28+
--ring: oklch(0.708 0 0);
29+
--chart-1: oklch(0.646 0.222 41.116);
30+
--chart-2: oklch(0.6 0.118 184.704);
31+
--chart-3: oklch(0.398 0.07 227.392);
32+
--chart-4: oklch(0.828 0.189 84.429);
33+
--chart-5: oklch(0.769 0.188 70.08);
34+
--radius: 0.625rem;
35+
--sidebar: oklch(0.985 0 0);
36+
--sidebar-foreground: oklch(0.145 0 0);
37+
--sidebar-primary: oklch(0.205 0 0);
38+
--sidebar-primary-foreground: oklch(0.985 0 0);
39+
--sidebar-accent: oklch(0.97 0 0);
40+
--sidebar-accent-foreground: oklch(0.205 0 0);
41+
--sidebar-border: oklch(0.922 0 0);
42+
--sidebar-ring: oklch(0.708 0 0);
2843

2944
/* ruby_ui specific */
3045
--warning: hsl(38 92% 50%);
@@ -33,30 +48,44 @@
3348
--success-foreground: hsl(0 0% 100%);
3449

3550
/* Container settings */
51+
--container-center: true;
3652
--container-padding: hsl(2rem);
3753
--container-max-width-2xl: hsl(1400px);
3854
}
3955

4056
.dark {
41-
--background: hsl(240 10% 3.9%);
42-
--foreground: hsl(0 0% 98%);
43-
--card: hsl(240 10% 3.9%);
44-
--card-foreground: hsl(0 0% 98%);
45-
--popover: hsl(240 10% 3.9%);
46-
--popover-foreground: hsl(0 0% 98%);
47-
--primary: hsl(0 0% 98%);
48-
--primary-foreground: hsl(240 5.9% 10%);
49-
--secondary: hsl(240 3.7% 15.9%);
50-
--secondary-foreground: hsl(0 0% 98%);
51-
--muted: hsl(240 3.7% 15.9%);
52-
--muted-foreground: hsl(240 5% 64.9%);
53-
--accent: hsl(240 3.7% 15.9%);
54-
--accent-foreground: hsl(0 0% 98%);
55-
--destructive: hsl(0 62.8% 30.6%);
56-
--destructive-foreground: hsl(0 0% 98%);
57-
--border: hsl(240 3.7% 15.9%);
58-
--input: hsl(240 3.7% 15.9%);
59-
--ring: hsl(240 4.9% 83.9%);
57+
--background: oklch(0.145 0 0);
58+
--foreground: oklch(0.985 0 0);
59+
--card: oklch(0.145 0 0);
60+
--card-foreground: oklch(0.985 0 0);
61+
--popover: oklch(0.145 0 0);
62+
--popover-foreground: oklch(0.985 0 0);
63+
--primary: oklch(0.985 0 0);
64+
--primary-foreground: oklch(0.205 0 0);
65+
--secondary: oklch(0.269 0 0);
66+
--secondary-foreground: oklch(0.985 0 0);
67+
--muted: oklch(0.269 0 0);
68+
--muted-foreground: oklch(0.708 0 0);
69+
--accent: oklch(0.269 0 0);
70+
--accent-foreground: oklch(0.985 0 0);
71+
--destructive: oklch(0.396 0.141 25.723);
72+
--destructive-foreground: oklch(0.637 0.237 25.331);
73+
--border: oklch(0.269 0 0);
74+
--input: oklch(0.269 0 0);
75+
--ring: oklch(0.439 0 0);
76+
--chart-1: oklch(0.488 0.243 264.376);
77+
--chart-2: oklch(0.696 0.17 162.48);
78+
--chart-3: oklch(0.769 0.188 70.08);
79+
--chart-4: oklch(0.627 0.265 303.9);
80+
--chart-5: oklch(0.645 0.246 16.439);
81+
--sidebar: oklch(0.205 0 0);
82+
--sidebar-foreground: oklch(0.985 0 0);
83+
--sidebar-primary: oklch(0.488 0.243 264.376);
84+
--sidebar-primary-foreground: oklch(0.985 0 0);
85+
--sidebar-accent: oklch(0.269 0 0);
86+
--sidebar-accent-foreground: oklch(0.985 0 0);
87+
--sidebar-border: oklch(0.269 0 0);
88+
--sidebar-ring: oklch(0.439 0 0);
6089

6190
/* ruby_ui specific */
6291
--warning: hsl(38 92% 50%);
@@ -85,32 +114,23 @@
85114
--color-border: var(--border);
86115
--color-input: var(--input);
87116
--color-ring: var(--ring);
88-
--color-radius: var(--radius);
89-
--color-warning: var(--warning);
90-
--color-warning-foreground: var(--warning-foreground);
91-
--color-success: var(--success);
92-
--color-success-foreground: var(--success-foreground);
93-
--color-container-padding: var(--container-padding);
94-
--color-container-max-width-2xl: var(--container-max-width-2xl);
95-
--color-background: var(--background);
96-
--color-foreground: var(--foreground);
97-
--color-card: var(--card);
98-
--color-card-foreground: var(--card-foreground);
99-
--color-popover: var(--popover);
100-
--color-popover-foreground: var(--popover-foreground);
101-
--color-primary: var(--primary);
102-
--color-primary-foreground: var(--primary-foreground);
103-
--color-secondary: var(--secondary);
104-
--color-secondary-foreground: var(--secondary-foreground);
105-
--color-muted: var(--muted);
106-
--color-muted-foreground: var(--muted-foreground);
107-
--color-accent: var(--accent);
108-
--color-accent-foreground: var(--accent-foreground);
109-
--color-destructive: var(--destructive);
110-
--color-destructive-foreground: var(--destructive-foreground);
111-
--color-border: var(--border);
112-
--color-input: var(--input);
113-
--color-ring: var(--ring);
117+
--color-chart-1: var(--chart-1);
118+
--color-chart-2: var(--chart-2);
119+
--color-chart-3: var(--chart-3);
120+
--color-chart-4: var(--chart-4);
121+
--color-chart-5: var(--chart-5);
122+
--radius-sm: calc(var(--radius) - 4px);
123+
--radius-md: calc(var(--radius) - 2px);
124+
--radius-lg: var(--radius);
125+
--radius-xl: calc(var(--radius) + 4px);
126+
--color-sidebar: var(--sidebar);
127+
--color-sidebar-foreground: var(--sidebar-foreground);
128+
--color-sidebar-primary: var(--sidebar-primary);
129+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
130+
--color-sidebar-accent: var(--sidebar-accent);
131+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
132+
--color-sidebar-border: var(--sidebar-border);
133+
--color-sidebar-ring: var(--sidebar-ring);
114134
--color-warning: var(--warning);
115135
--color-warning-foreground: var(--warning-foreground);
116136
--color-success: var(--success);

0 commit comments

Comments
 (0)