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