euv_ui/style/var/fn.rs
1use crate::*;
2
3vars! {
4 pub c_theme_light {
5 // ═══════════════════════════════════════════════════════════════════════
6 // Monochrome Design Tokens (Black & White only)
7 // ═══════════════════════════════════════════════════════════════════════
8
9 // ─── Surface ───
10 background: "#ffffff";
11 foreground: "#000000";
12
13 // ─── Secondary / Muted ───
14 muted-foreground: "#000000";
15
16 // ─── Accent ───
17 accent: "#000000";
18
19 // ─── Border & Input ───
20 border: "#000000";
21 ring: "#000000";
22
23 // ═══════════════════════════════════════════════════════════════════════
24 // Legacy Surface Aliases
25 // ═══════════════════════════════════════════════════════════════════════
26 bg-overlay: "rgba(0, 0, 0, 0.45)";
27
28 // ─── Text Colors ───
29 text-on-accent: "#ffffff";
30
31 // ═══════════════════════════════════════════════════════════════════════
32 // Brand / Accent (Black for minimalist)
33 // ═══════════════════════════════════════════════════════════════════════
34 accent: "#000000";
35 accent-muted: "#ffffff";
36
37 // ═══════════════════════════════════════════════════════════════════════
38 // Spacing Scale (shadcn/ui Tailwind spacing)
39 // ═══════════════════════════════════════════════════════════════════════
40 space-2xs: "2px";
41 space-xs: "4px";
42 space-sm: "8px";
43 space-md: "12px";
44 space-lg: "16px";
45 space-xl: "20px";
46 space-2xl: "24px";
47 space-3xl: "32px";
48 space-4xl: "40px";
49 space-7xl: "80px";
50
51 // ═══════════════════════════════════════════════════════════════════════
52 // Font Size Scale (shadcn/ui)
53 // ═══════════════════════════════════════════════════════════════════════
54 font-xs: "0.75rem";
55 font-sm: "0.875rem";
56 font-base: "1rem";
57 font-md: "1.125rem";
58 font-lg: "1.125rem";
59 font-xl: "1.25rem";
60 font-2xl: "1.5rem";
61 font-3xl: "1.875rem";
62 font-4xl: "2.25rem";
63 font-5xl: "3rem";
64 font-6xl: "3.75rem";
65
66 // ═══════════════════════════════════════════════════════════════════════
67 // Transition Durations (shadcn/ui)
68 // ═══════════════════════════════════════════════════════════════════════
69 duration-fast: "0.15s";
70 duration-normal: "0.2s";
71 duration-slower: "0.4s";
72 duration-overlay: "0.2s";
73 duration-modal-overlay: "0.15s";
74 duration-modal-content: "0.3s";
75
76 // ═══════════════════════════════════════════════════════════════════════
77 // Easing Functions (shadcn/ui)
78 // ═══════════════════════════════════════════════════════════════════════
79 ease-out: "cubic-bezier(0.4, 0, 0.2, 1)";
80 ease-in: "cubic-bezier(0.4, 0, 1, 1)";
81 ease-in-out: "cubic-bezier(0.4, 0, 0.2, 1)";
82 ease-bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)";
83
84 // ═══════════════════════════════════════════════════════════════════════
85 // Layout (shadcn/ui aligned)
86 // ═══════════════════════════════════════════════════════════════════════
87 safe-area-inset-top: "env(safe-area-inset-top, 0px)";
88 safe-area-inset-right: "env(safe-area-inset-right, 0px)";
89 safe-area-inset-bottom: "env(safe-area-inset-bottom, 0px)";
90 safe-area-inset-left: "env(safe-area-inset-left, 0px)";
91 padding-shell-top: var!(safe-area-inset-top);
92 padding-shell-bottom: var!(safe-area-inset-bottom);
93 padding-main-top: "24px";
94 padding-main-bottom: "24px";
95 padding-main-horizontal: "28px";
96 padding-main-horizontal-mobile: "16px";
97 gap-page-header: "16px";
98 gap-page-title: "6px";
99 min-height-base: "36px";
100 min-height-sm: "36px";
101 nav-width: "248px";
102 content-max-width: "820px";
103 mobile-header-height: "52px";
104
105 // ═══════════════════════════════════════════════════════════════════════
106 // Component Spacing Scale
107 // ═══════════════════════════════════════════════════════════════════════
108 gap-section: "16px";
109 gap-section-mobile: "12px";
110 gap-component: "12px";
111 gap-component-mobile: "10px";
112 gap-element: "8px";
113 gap-inline: "8px";
114
115 // ═══════════════════════════════════════════════════════════════════════
116 // Page Block Vertical Spacing
117 // ═══════════════════════════════════════════════════════════════════════
118 page-block-gap: "24px";
119 page-block-gap-mobile: "20px";
120
121 // ═══════════════════════════════════════════════════════════════════════
122 // Shadows (black alpha only)
123 // ═══════════════════════════════════════════════════════════════════════
124 shadow-sm: "0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04)";
125 shadow-modal: "0 25px 50px -12px rgba(0, 0, 0, 0.18)";
126 shadow-drawer: "4px 0 20px rgba(0, 0, 0, 0.08)";
127 shadow-accent-sm: "0 1px 3px rgba(0, 0, 0, 0.08)";
128 shadow-accent-lg: "0 10px 15px -3px rgba(0, 0, 0, 0.12)";
129
130 // ═══════════════════════════════════════════════════════════════════════
131 // Scrollbar
132 // ═══════════════════════════════════════════════════════════════════════
133 scrollbar-track: "transparent";
134 scrollbar-thumb: "rgba(0, 0, 0, 0.15)";
135 scrollbar-thumb-hover: "rgba(0, 0, 0, 0.30)";
136 scrollbar-thumb-active: "rgba(0, 0, 0, 0.45)";
137
138 // ═══════════════════════════════════════════════════════════════════════
139 // Console / VConsole
140 // ═══════════════════════════════════════════════════════════════════════
141 shadow-console-button: "0 4px 14px rgba(0, 0, 0, 0.15)";
142 shadow-console-panel: "0 -8px 32px rgba(0, 0, 0, 0.06)";
143 }
144
145 pub c_theme_dark {
146 // ═══════════════════════════════════════════════════════════════════════
147 // Monochrome Design Tokens (Black & White only)
148 // ═══════════════════════════════════════════════════════════════════════
149
150 // ─── Surface ───
151 background: "#000000";
152 foreground: "#ffffff";
153
154 // ─── Secondary / Muted ───
155 muted-foreground: "#ffffff";
156
157 // ─── Accent ───
158 accent: "#ffffff";
159
160 // ─── Border & Input ───
161 border: "#ffffff";
162 ring: "#ffffff";
163
164 // ═══════════════════════════════════════════════════════════════════════
165 // Legacy Surface Aliases
166 // ═══════════════════════════════════════════════════════════════════════
167 bg-overlay: "rgba(0, 0, 0, 0.60)";
168
169 // ─── Text Colors ───
170 text-on-accent: "#000000";
171
172 // ═══════════════════════════════════════════════════════════════════════
173 // Brand / Accent (White for dark minimalist)
174 // ═══════════════════════════════════════════════════════════════════════
175 accent: "#ffffff";
176 accent-muted: "#000000";
177
178 // ═══════════════════════════════════════════════════════════════════════
179 // Spacing Scale (same as light)
180 // ═══════════════════════════════════════════════════════════════════════
181 space-2xs: "2px";
182 space-xs: "4px";
183 space-sm: "8px";
184 space-md: "12px";
185 space-lg: "16px";
186 space-xl: "20px";
187 space-2xl: "24px";
188 space-3xl: "32px";
189 space-4xl: "40px";
190 space-7xl: "80px";
191
192 // ═══════════════════════════════════════════════════════════════════════
193 // Font Size Scale (same as light)
194 // ═══════════════════════════════════════════════════════════════════════
195 font-xs: "0.75rem";
196 font-sm: "0.875rem";
197 font-base: "1rem";
198 font-md: "1.125rem";
199 font-lg: "1.125rem";
200 font-xl: "1.25rem";
201 font-2xl: "1.5rem";
202 font-3xl: "1.875rem";
203 font-4xl: "2.25rem";
204 font-5xl: "3rem";
205 font-6xl: "3.75rem";
206
207 // ═══════════════════════════════════════════════════════════════════════
208 // Transition Durations (same as light)
209 // ═══════════════════════════════════════════════════════════════════════
210 duration-fast: "0.15s";
211 duration-normal: "0.2s";
212 duration-slower: "0.4s";
213 duration-overlay: "0.2s";
214 duration-modal-overlay: "0.15s";
215 duration-modal-content: "0.3s";
216
217 // ═══════════════════════════════════════════════════════════════════════
218 // Easing Functions (same as light)
219 // ═══════════════════════════════════════════════════════════════════════
220 ease-out: "cubic-bezier(0.4, 0, 0.2, 1)";
221 ease-in: "cubic-bezier(0.4, 0, 1, 1)";
222 ease-in-out: "cubic-bezier(0.4, 0, 0.2, 1)";
223 ease-bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)";
224
225 // ═══════════════════════════════════════════════════════════════════════
226 // Layout (same as light)
227 // ═══════════════════════════════════════════════════════════════════════
228 safe-area-inset-top: "env(safe-area-inset-top, 0px)";
229 safe-area-inset-right: "env(safe-area-inset-right, 0px)";
230 safe-area-inset-bottom: "env(safe-area-inset-bottom, 0px)";
231 safe-area-inset-left: "env(safe-area-inset-left, 0px)";
232 padding-shell-top: var!(safe-area-inset-top);
233 padding-shell-bottom: var!(safe-area-inset-bottom);
234 padding-main-top: "24px";
235 padding-main-bottom: "24px";
236 padding-main-horizontal: "28px";
237 padding-main-horizontal-mobile: "16px";
238 gap-page-header: "16px";
239 gap-page-title: "6px";
240 min-height-base: "36px";
241 min-height-sm: "36px";
242 nav-width: "248px";
243 content-max-width: "820px";
244 mobile-header-height: "52px";
245
246 // ═══════════════════════════════════════════════════════════════════════
247 // Component Spacing Scale (same as light)
248 // ═══════════════════════════════════════════════════════════════════════
249 gap-section: "16px";
250 gap-section-mobile: "12px";
251 gap-component: "12px";
252 gap-component-mobile: "10px";
253 gap-element: "8px";
254 gap-inline: "8px";
255
256 // ═══════════════════════════════════════════════════════════════════════
257 // Page Block Vertical Spacing (same as light)
258 // ═══════════════════════════════════════════════════════════════════════
259 page-block-gap: "24px";
260 page-block-gap-mobile: "20px";
261
262 // ═══════════════════════════════════════════════════════════════════════
263 // Shadows (white alpha for dark)
264 // ═══════════════════════════════════════════════════════════════════════
265 shadow-sm: "0 1px 3px rgba(255, 255, 255, 0.12), 0 1px 2px rgba(255, 255, 255, 0.06)";
266 shadow-modal: "0 25px 50px -12px rgba(255, 255, 255, 0.25)";
267 shadow-drawer: "4px 0 20px rgba(255, 255, 255, 0.12)";
268 shadow-accent-sm: "0 1px 3px rgba(255, 255, 255, 0.15)";
269 shadow-accent-lg: "0 10px 15px -3px rgba(255, 255, 255, 0.18)";
270
271 // ═══════════════════════════════════════════════════════════════════════
272 // Scrollbar
273 // ═══════════════════════════════════════════════════════════════════════
274 scrollbar-track: "transparent";
275 scrollbar-thumb: "rgba(255, 255, 255, 0.18)";
276 scrollbar-thumb-hover: "rgba(255, 255, 255, 0.35)";
277 scrollbar-thumb-active: "rgba(255, 255, 255, 0.50)";
278
279 // ═══════════════════════════════════════════════════════════════════════
280 // Console / VConsole
281 // ═══════════════════════════════════════════════════════════════════════
282 shadow-console-button: "0 4px 14px rgba(255, 255, 255, 0.15)";
283 shadow-console-panel: "0 -8px 32px rgba(255, 255, 255, 0.08)";
284 }
285}