odt-ui-rails 2.0.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +80 -18
  3. data/app/assets/stylesheets/odt_ui/styles.css +907 -3195
  4. data/app/assets/stylesheets/odt_ui/theme.css +126 -0
  5. data/app/assets/stylesheets/odt_ui/tokens.css +189 -46
  6. data/lib/generators/odt/install_generator.rb +45 -4
  7. data/lib/odt_ui/helper.rb +628 -241
  8. data/lib/odt_ui/version.rb +1 -1
  9. data/sig/odt_ui.rbs +230 -0
  10. metadata +3 -1
data/app/assets/stylesheets/odt_ui/styles.css CHANGED
@@ -1,3463 +1,1175 @@
1
- /* ODT Design Tokens */
2
- :root {
3
- /* ==========================================================================
4
- * Primary Brand Colors (ODT)
5
- * ========================================================================== */
6
- --color-primary-0: hsl(240 78.3% 100%);
7
- --color-primary-50: hsl(240 78.3% 95%);
8
- --color-primary-100: hsl(240 78.3% 90%);
9
- --color-primary-200: hsl(240 78.3% 85%);
10
- --color-primary-300: hsl(240 78.3% 80%);
11
- --color-primary-400: hsl(240 78.3% 75%);
12
- --color-primary-500: hsl(240 78.3% 65%);
13
- --color-primary-600: hsl(240 78.3% 60%);
14
- --color-primary-700: hsl(240 78.3% 55%);
15
- --color-primary-800: hsl(240 78.3% 45%);
16
- --color-primary-900: hsl(240 78.3% 34.3%);
17
-
18
- /* ==========================================================================
19
- * Secondary Brand Colors (ODT)
20
- * ========================================================================== */
21
- --color-secondary-0: hsl(47 100% 100%);
22
- --color-secondary-50: hsl(47 100% 95%);
23
- --color-secondary-100: hsl(47 100% 85%);
24
- --color-secondary-200: hsl(47 100% 80%);
25
- --color-secondary-300: hsl(47 100% 75%);
26
- --color-secondary-400: hsl(47 100% 70%);
27
- --color-secondary-500: hsl(47 100% 65%);
28
- --color-secondary-600: hsl(47 100% 60%);
29
- --color-secondary-700: hsl(47 100% 55%);
30
- --color-secondary-800: hsl(47 100% 50%);
31
- --color-secondary-900: hsl(47 100% 45%);
32
-
33
- /* ==========================================================================
34
- * Neutral Palette
35
- * ========================================================================== */
36
- --color-neutral-0: hsl(0 0% 100%);
37
- --color-neutral-50: hsl(240 10% 98%);
38
- --color-neutral-100: hsl(240 10% 96%);
39
- --color-neutral-200: hsl(240 9% 90%);
40
- --color-neutral-300: hsl(240 8% 82%);
41
- --color-neutral-400: hsl(240 8% 64%);
42
- --color-neutral-500: hsl(240 7% 46%);
43
- --color-neutral-600: hsl(240 7% 32%);
44
- --color-neutral-700: hsl(240 8% 25%);
45
- --color-neutral-800: hsl(240 10% 15%);
46
- --color-neutral-900: hsl(240 12% 9%);
47
- --color-neutral-950: hsl(240 14% 4%);
48
-
49
- /* ==========================================================================
50
- * Semantic Colors
51
- * ========================================================================== */
52
- --color-success: hsl(142 71% 45%);
53
- --color-warning: hsl(38 92% 50%);
54
- --color-danger: hsl(0 84% 60%);
55
- --color-info: hsl(217 91% 60%);
56
-
57
- /* Semantic surface tint */
58
- --color-success-subtle: hsl(142 71% 96%);
59
- --color-warning-subtle: hsl(38 92% 96%);
60
- --color-danger-subtle: hsl(0 84% 97%);
61
- --color-info-subtle: hsl(217 91% 97%);
62
-
63
- /* ==========================================================================
64
- * Foreground (Text & Icon)
65
- * ========================================================================== */
66
- /* Base */
67
- --color-fg-strong: var(--color-neutral-800);
68
- --color-fg: var(--color-neutral-700);
69
- --color-fg-muted: var(--color-neutral-500);
70
- --color-fg-subtle: var(--color-neutral-400);
71
- --color-fg-disabled: var(--color-neutral-300);
72
-
73
- /* Inverse */
74
- --color-fg-inverse-strong: var(--color-neutral-0);
75
- --color-fg-inverse: var(--color-neutral-50);
76
- --color-fg-inverse-muted: var(--color-neutral-100);
77
- --color-fg-inverse-subtle: var(--color-neutral-300);
78
- --color-fg-inverse-disabled: var(--color-neutral-400);
79
-
80
- /* Brand Foreground */
81
- --color-fg-primary: var(--color-primary-900);
82
- --color-fg-secondary: var(--color-secondary-900);
83
-
84
- /* Semantic Foreground */
85
- --color-fg-success: var(--color-success);
86
- --color-fg-warning: var(--color-warning);
87
- --color-fg-danger: var(--color-danger);
88
- --color-fg-info: var(--color-info);
89
-
90
- /* ==========================================================================
91
- * Focus Ring
92
- * ========================================================================== */
93
- --color-ring: var(--color-primary-500);
94
- }
95
-
96
- :root {
97
- /* ==========================================================================
98
- * Surfaces & Backgrounds
99
- * ========================================================================== */
100
- --color-surface: var(--color-neutral-0);
101
- --color-surface-muted: var(--color-neutral-50);
102
- --color-surface-subtle: var(--color-neutral-100);
103
- --color-surface-elevated: var(--color-neutral-0);
104
-
105
- --color-surface-primary: var(--color-primary-500);
106
- --color-surface-secondary: var(--color-secondary-500);
107
-
108
- --color-surface-success: hsl(142 71% 96%);
109
- --color-surface-warning: hsl(38 92% 96%);
110
- --color-surface-danger: hsl(0 84% 97%);
111
- --color-surface-info: hsl(217 91% 97%);
112
-
113
- /* ==========================================================================
114
- * Borders & Lines
115
- * ========================================================================== */
116
- --color-line: var(--color-neutral-200);
117
- --color-line-muted: var(--color-neutral-100);
118
- --color-line-strong: var(--color-neutral-300);
119
-
120
- --color-line-primary: var(--color-primary-500);
121
- --color-line-success: var(--color-success);
122
- --color-line-warning: var(--color-warning);
123
- --color-line-danger: var(--color-danger);
124
-
125
- /* ==========================================================================
126
- * Overlays & Backdrops
127
- * ========================================================================== */
128
- --color-overlay-light: rgb(255 255 255 / 0.6);
129
- --color-overlay-dark: rgb(0 0 0 / 0.4);
130
- --color-overlay-backdrop: rgb(0 0 0 / 0.3);
131
-
132
- /* ==========================================================================
133
- * Gradients (ODT Standard)
134
- * ========================================================================== */
135
- /* Primary subtle background gradient */
136
- --gradient-subtle: linear-gradient(to top right, var(--color-primary-50), var(--color-primary-0) 60%, var(--color-secondary-50));
137
- --gradient-hero-primary: var(--gradient-subtle);
138
-
139
- /* Vibrant accent gradient */
140
- --gradient-vibrant: linear-gradient(to top right, var(--color-primary-200), var(--color-primary-50) 50%, var(--color-secondary-100));
141
- --gradient-hero-vibrant: var(--gradient-vibrant);
142
-
143
- /* Card surface gradients */
144
- --gradient-card: linear-gradient(to bottom, var(--color-primary-50), var(--color-neutral-0));
145
- --gradient-primary-to-white: linear-gradient(to bottom right, var(--color-primary-50), #ffffff);
146
- --gradient-secondary-to-white: linear-gradient(to bottom right, var(--color-secondary-50), #ffffff);
147
- --gradient-primary-h: linear-gradient(to right, var(--color-primary-50), #ffffff);
148
- --gradient-secondary-h: linear-gradient(to right, var(--color-secondary-50), #ffffff);
149
-
150
- /* ==========================================================================
151
- * Frosted Glass Tokens
152
- * ========================================================================== */
153
- --frosted-blur: 16px;
154
- --frosted-surface-bg: rgb(255 255 255 / 0.60);
155
- --frosted-surface-border: rgb(255 255 255 / 0.70);
156
- --frosted-muted-bg: hsl(240 10% 98% / 0.60);
157
- --frosted-muted-border: hsl(240 10% 98% / 0.70);
158
- --frosted-subtle-bg: hsl(240 10% 96% / 0.60);
159
- --frosted-subtle-border: hsl(240 10% 96% / 0.70);
160
- --frosted-gradient-primary: linear-gradient(to bottom right, hsl(240 78.3% 95% / 0.60), hsl(0 0% 100% / 0.60));
161
- --frosted-gradient-secondary: linear-gradient(to bottom right, hsl(47 100% 95% / 0.60), hsl(0 0% 100% / 0.60));
162
- }
163
-
164
- :root {
165
- /* ==========================================================================
166
- * Shadows (Tinted with brand shadow color)
167
- * ========================================================================== */
168
- --color-shadow: hsl(240 78.3% 70%);
169
-
170
- --shadow-card: 0 8px 26px hsl(from var(--color-shadow) h s l / 0.10);
171
- --shadow-dropdown: 0 8px 24px hsl(from var(--color-shadow) h s l / 0.12);
172
- --shadow-modal: 0 16px 40px hsl(from var(--color-shadow) h s l / 0.16);
173
- --shadow-popover: 0 24px 64px hsl(from var(--color-shadow) h s l / 0.20);
174
- }
175
-
176
- :root {
177
- /* ==========================================================================
178
- * Border Radius Scale
179
- * ========================================================================== */
180
- --radius-xs: 0.125rem; /* 2px */
181
- --radius-sm: 0.25rem; /* 4px */
182
- --radius-md: 0.375rem; /* 6px */
183
- --radius-lg: 0.5rem; /* 8px */
184
- --radius-xl: 0.75rem; /* 12px */
185
- --radius-2xl: 1rem; /* 16px */
186
- --radius-3xl: 1.5rem; /* 24px */
187
- --radius-4xl: 2rem; /* 32px */
188
- --radius-full: 9999px;
189
- }
190
-
191
- :root {
192
- /* ==========================================================================
193
- * Spacing Scale
194
- * ========================================================================== */
195
- --spacing-0: 0px;
196
- --spacing-0-5: 0.125rem; /* 2px */
197
- --spacing-1: 0.25rem; /* 4px */
198
- --spacing-1-5: 0.375rem; /* 6px */
199
- --spacing-2: 0.5rem; /* 8px */
200
- --spacing-2-5: 0.625rem; /* 10px */
201
- --spacing-3: 0.75rem; /* 12px */
202
- --spacing-3-5: 0.875rem; /* 14px */
203
- --spacing-4: 1rem; /* 16px */
204
- --spacing-5: 1.25rem; /* 20px */
205
- --spacing-6: 1.5rem; /* 24px */
206
- --spacing-8: 2rem; /* 32px */
207
- --spacing-10: 2.5rem; /* 40px */
208
- --spacing-12: 3rem; /* 48px */
209
- --spacing-16: 4rem; /* 64px */
210
- --spacing-20: 5rem; /* 80px */
211
- --spacing-24: 6rem; /* 96px */
212
- }
213
-
214
- :root {
215
- /* ==========================================================================
216
- * Typography System
217
- * ========================================================================== */
218
- --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
219
- --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
220
-
221
- /* Font Sizes */
222
- --font-size-xs: 0.75rem; /* 12px */
223
- --font-size-sm: 0.875rem; /* 14px */
224
- --font-size-base: 1rem; /* 16px */
225
- --font-size-lg: 1.125rem; /* 18px */
226
- --font-size-xl: 1.25rem; /* 20px */
227
- --font-size-2xl: 1.5rem; /* 24px */
228
- --font-size-3xl: 1.875rem; /* 30px */
229
- --font-size-4xl: 2.25rem; /* 36px */
230
- --font-size-5xl: 3rem; /* 48px */
231
-
232
- /* Line Heights */
233
- --line-height-none: 1;
234
- --line-height-tight: 1.25;
235
- --line-height-snug: 1.375;
236
- --line-height-normal: 1.5;
237
- --line-height-relaxed: 1.625;
238
- --line-height-loose: 2;
239
-
240
- /* Font Weights */
241
- --font-weight-light: 300;
242
- --font-weight-normal: 400;
243
- --font-weight-medium: 500;
244
- --font-weight-semibold: 600;
245
- --font-weight-bold: 700;
246
- --font-weight-extrabold: 800;
247
- }
1
+ /* ==========================================================================
2
+ * ODT Lightweight UI - Standalone Component Styles (Rails)
3
+ * ========================================================================== */
248
4
 
249
5
  /* ==========================================================================
250
- * ODT Lightweight UI - Dark Mode Theme Tokens
251
- * Active when [data-theme="dark"] or class="dark" is applied
6
+ * 1. Utility Tokens & Base Resets
252
7
  * ========================================================================== */
8
+ .odt-radius-none { border-radius: var(--radius-none, 0px) !important; }
9
+ .odt-radius-xs { border-radius: var(--radius-xs, 0.125rem) !important; }
10
+ .odt-radius-sm { border-radius: var(--radius-sm, 0.25rem) !important; }
11
+ .odt-radius-md { border-radius: var(--radius-md, 0.375rem) !important; }
12
+ .odt-radius-lg { border-radius: var(--radius-lg, 0.5rem) !important; }
13
+ .odt-radius-xl { border-radius: var(--radius-xl, 0.75rem) !important; }
14
+ .odt-radius-2xl { border-radius: var(--radius-2xl, 1rem) !important; }
15
+ .odt-radius-3xl { border-radius: var(--radius-3xl, 1.5rem) !important; }
16
+ .odt-radius-4xl { border-radius: var(--radius-4xl, 2rem) !important; }
17
+ .odt-radius-full { border-radius: var(--radius-full, 9999px) !important; }
18
+
19
+ .odt-shadow-none { box-shadow: none !important; }
20
+ .odt-shadow-card { box-shadow: var(--shadow-card) !important; }
21
+ .odt-shadow-dropdown { box-shadow: var(--shadow-dropdown) !important; }
22
+ .odt-shadow-modal { box-shadow: var(--shadow-modal) !important; }
23
+ .odt-shadow-popover { box-shadow: var(--shadow-popover) !important; }
24
+
25
+ .odt-spinner {
26
+ display: inline-block;
27
+ width: 1em;
28
+ height: 1em;
29
+ border: 2px solid currentColor;
30
+ border-right-color: transparent;
31
+ border-radius: 50%;
32
+ animation: odt-spin 0.75s linear infinite;
33
+ }
253
34
 
254
- :root[data-theme="dark"],
255
- [data-theme="dark"],
256
- .dark {
257
- /* Foreground Hierarchy (Auto Swapped to Inverse for Dark Theme) */
258
- --color-fg-strong: var(--color-neutral-0);
259
- --color-fg: var(--color-neutral-100);
260
- --color-fg-muted: var(--color-neutral-400);
261
- --color-fg-subtle: var(--color-neutral-500);
262
- --color-fg-disabled: var(--color-neutral-600);
263
-
264
- /* Brand Foregrounds on Dark */
265
- --color-fg-primary: var(--color-primary-400);
266
- --color-fg-secondary: var(--color-secondary-400);
267
-
268
- /* Surfaces on Dark */
269
- --color-surface: var(--color-neutral-900);
270
- --color-surface-elevated: var(--color-neutral-800);
271
- --color-surface-muted: var(--color-neutral-950);
272
- --color-surface-subtle: var(--color-neutral-850, hsl(240 10% 15%));
273
-
274
- /* Lines & Borders on Dark */
275
- --color-line: var(--color-neutral-800);
276
- --color-line-muted: var(--color-neutral-850, hsl(240 10% 12%));
277
- --color-line-strong: var(--color-neutral-700);
278
-
279
- /* Shadows on Dark */
280
- --color-shadow: hsl(240 12% 4%);
281
- --shadow-card: 0 8px 26px rgba(0, 0, 0, 0.45);
282
- --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.55);
283
- --shadow-modal: 0 16px 40px rgba(0, 0, 0, 0.70);
284
- --shadow-popover: 0 24px 64px rgba(0, 0, 0, 0.85);
285
-
286
- /* Overlays on Dark */
287
- --color-overlay-light: rgba(255, 255, 255, 0.1);
288
- --color-overlay-dark: rgba(0, 0, 0, 0.7);
289
-
290
- /* Frosted Glass on Dark */
291
- --frosted-surface-bg: rgba(24, 24, 38, 0.65);
292
- --frosted-surface-border: rgba(255, 255, 255, 0.12);
293
- --frosted-muted-bg: rgba(11, 11, 20, 0.65);
294
- --frosted-muted-border: rgba(255, 255, 255, 0.08);
295
- --frosted-subtle-bg: rgba(36, 36, 52, 0.65);
296
- --frosted-subtle-border: rgba(255, 255, 255, 0.15);
297
- --frosted-gradient-primary: linear-gradient(to bottom right, rgba(79, 70, 229, 0.25), rgba(24, 24, 38, 0.75));
298
- --frosted-gradient-secondary: linear-gradient(to bottom right, rgba(234, 179, 8, 0.2), rgba(24, 24, 38, 0.75));
299
-
300
- /* Card Gradients on Dark */
301
- --gradient-card: linear-gradient(to bottom, hsl(240 78.3% 20% / 0.4), var(--color-neutral-900));
302
- }
303
-
304
-
305
- /* Base Styles */
306
-
307
-
308
- /* Base Typography Reset */
309
- body {
310
- font-family: var(--font-family-sans);
311
- color: var(--color-fg);
312
- -webkit-font-smoothing: antialiased;
313
- -moz-osx-font-smoothing: grayscale;
35
+ @keyframes odt-spin {
36
+ from { transform: rotate(0deg); }
37
+ to { transform: rotate(360deg); }
38
+ }
39
+
40
+ @keyframes odt-pop {
41
+ 0% { opacity: 0; transform: scale(0.5); }
42
+ 100% { opacity: 1; transform: scale(1); }
314
43
  }
315
44
 
316
- /* Component Styles */
317
- .odt_Badge-module__badge___viR1- {
45
+ /* ==========================================================================
46
+ * 2. Button Component (.odt-btn)
47
+ * ========================================================================== */
48
+ .odt-btn {
318
49
  display: inline-flex;
319
50
  align-items: center;
320
- gap: var(--spacing-1-5, 0.375rem);
321
- border-radius: var(--radius-full, 9999px);
322
- font-weight: var(--font-weight-semibold, 600);
323
- line-height: 1;
51
+ justify-content: center;
52
+ gap: var(--spacing-2, 0.5rem);
53
+ font-family: inherit;
54
+ font-weight: var(--font-weight-medium, 500);
55
+ line-height: var(--line-height-tight, 1.25);
56
+ border: 1px solid transparent;
57
+ border-radius: var(--radius-xl, 0.75rem);
58
+ cursor: pointer;
59
+ text-decoration: none;
324
60
  white-space: nowrap;
61
+ user-select: none;
62
+ transition: all 0.15s ease-in-out;
63
+ outline: none;
64
+ position: relative;
325
65
  box-sizing: border-box;
326
- width: fit-content;
327
66
  }
328
67
 
329
- /* ==========================================================================
330
- * Sizes
331
- * ========================================================================== */
332
- .odt_Badge-module__size-sm___KiAyV {
68
+ .odt-btn:focus-visible {
69
+ box-shadow: 0 0 0 3px var(--color-ring), var(--shadow-card);
70
+ }
71
+
72
+ /* Button Sizes */
73
+ .odt-btn--xs {
333
74
  padding: 0.25rem 0.625rem;
334
75
  font-size: var(--font-size-xs, 0.75rem);
76
+ border-radius: var(--radius-md, 0.375rem);
77
+ gap: 0.25rem;
335
78
  }
336
79
 
337
- .odt_Badge-module__size-md___4zRo4 {
80
+ .odt-btn--sm {
338
81
  padding: 0.375rem 0.875rem;
339
- font-size: var(--font-size-sm, 0.875rem);
82
+ font-size: var(--font-size-xs, 0.75rem);
83
+ border-radius: var(--radius-lg, 0.5rem);
84
+ gap: 0.375rem;
340
85
  }
341
86
 
342
- /* ==========================================================================
343
- * Subtle Variant (Default in ODT)
344
- * ========================================================================== */
345
- .odt_Badge-module__style-subtle___cDh7i.odt_Badge-module__color-primary___7ji7B {
346
- background-color: var(--color-primary-50);
347
- color: var(--color-primary-600);
87
+ .odt-btn--md {
88
+ padding: 0.625rem 1.25rem;
89
+ font-size: var(--font-size-sm, 0.875rem);
90
+ border-radius: var(--radius-xl, 0.75rem);
91
+ gap: 0.5rem;
348
92
  }
349
93
 
350
- .odt_Badge-module__style-subtle___cDh7i.odt_Badge-module__color-secondary___MQrzD {
351
- background-color: var(--color-secondary-100);
352
- color: var(--color-secondary-900);
94
+ .odt-btn--lg {
95
+ padding: 0.75rem 1.75rem;
96
+ font-size: var(--font-size-base, 1rem);
97
+ border-radius: var(--radius-2xl, 1rem);
98
+ gap: 0.625rem;
353
99
  }
354
100
 
355
- .odt_Badge-module__style-subtle___cDh7i.odt_Badge-module__color-success___Pxq0o {
356
- background-color: var(--color-surface-success);
357
- color: var(--color-success);
101
+ .odt-btn--xl {
102
+ padding: 0.875rem 2rem;
103
+ font-size: var(--font-size-lg, 1.125rem);
104
+ border-radius: var(--radius-2xl, 1rem);
105
+ gap: 0.75rem;
358
106
  }
359
107
 
360
- .odt_Badge-module__style-subtle___cDh7i.odt_Badge-module__color-warning___ct-zv {
361
- background-color: var(--color-surface-warning);
362
- color: var(--color-warning);
108
+ /* Button Modifiers */
109
+ .odt-btn--full-width {
110
+ width: 100%;
363
111
  }
364
112
 
365
- .odt_Badge-module__style-subtle___cDh7i.odt_Badge-module__color-danger___aR7Bn {
366
- background-color: var(--color-surface-danger);
367
- color: var(--color-danger);
113
+ .odt-btn--loading {
114
+ cursor: wait;
115
+ pointer-events: none;
368
116
  }
369
117
 
370
- .odt_Badge-module__style-subtle___cDh7i.odt_Badge-module__color-info___uCh-3 {
371
- background-color: var(--color-surface-info);
372
- color: var(--color-info);
118
+ .odt-btn:disabled,
119
+ .odt-btn--disabled {
120
+ opacity: 0.6;
121
+ cursor: not-allowed;
122
+ pointer-events: none;
123
+ box-shadow: none;
373
124
  }
374
125
 
375
- .odt_Badge-module__style-subtle___cDh7i.odt_Badge-module__color-neutral___k17wr {
376
- background-color: var(--color-surface-muted);
377
- color: var(--color-fg-muted);
126
+ .odt-btn--icon-only {
127
+ padding: 0 !important;
128
+ flex-shrink: 0;
378
129
  }
130
+ .odt-btn--icon-only.odt-btn--xs { width: 1.75rem; height: 1.75rem; }
131
+ .odt-btn--icon-only.odt-btn--sm { width: 2rem; height: 2rem; }
132
+ .odt-btn--icon-only.odt-btn--md { width: 2.5rem; height: 2.5rem; }
133
+ .odt-btn--icon-only.odt-btn--lg { width: 3rem; height: 3rem; }
134
+ .odt-btn--icon-only.odt-btn--xl { width: 3.5rem; height: 3.5rem; }
379
135
 
380
- /* ==========================================================================
381
- * Filled Variant
382
- * ========================================================================== */
383
- .odt_Badge-module__style-filled___5sW--.odt_Badge-module__color-primary___7ji7B {
136
+ /* Button - Filled Variant (Default) */
137
+ .odt-btn--filled {
138
+ box-shadow: var(--shadow-card);
139
+ }
140
+ .odt-btn--filled-primary {
384
141
  background-color: var(--color-primary-500);
385
- color: #fff;
142
+ color: var(--color-btn-primary-fg, #ffffff);
143
+ }
144
+ .odt-btn--filled-primary:hover:not(:disabled) {
145
+ background-color: var(--color-primary-600);
146
+ }
147
+ .odt-btn--filled-primary:active:not(:disabled) {
148
+ background-color: var(--color-primary-700);
386
149
  }
387
150
 
388
- .odt_Badge-module__style-filled___5sW--.odt_Badge-module__color-secondary___MQrzD {
151
+ .odt-btn--filled-secondary {
389
152
  background-color: var(--color-secondary-500);
390
- color: hsl(240 10% 12%);
153
+ color: var(--color-btn-secondary-fg, hsl(224 25% 6%));
154
+ }
155
+ .odt-btn--filled-secondary:hover:not(:disabled) {
156
+ background-color: var(--color-secondary-400);
157
+ }
158
+ .odt-btn--filled-secondary:active:not(:disabled) {
159
+ background-color: var(--color-secondary-600);
160
+ }
161
+
162
+ .odt-btn--filled-surface {
163
+ background-color: var(--color-surface);
164
+ color: var(--color-btn-surface-fg, var(--color-fg-strong));
165
+ }
166
+ .odt-btn--filled-surface:hover:not(:disabled) {
167
+ background-color: var(--color-surface-muted);
168
+ }
169
+ .odt-btn--filled-surface:active:not(:disabled) {
170
+ background-color: var(--color-surface-subtle);
171
+ }
172
+
173
+ .odt-btn--filled-muted {
174
+ background-color: var(--color-surface-muted);
175
+ color: var(--color-btn-muted-fg, var(--color-fg));
176
+ }
177
+ .odt-btn--filled-muted:hover:not(:disabled) {
178
+ background-color: var(--color-surface-subtle);
179
+ color: var(--color-fg-strong);
180
+ }
181
+ .odt-btn--filled-muted:active:not(:disabled) {
182
+ background-color: var(--color-surface);
391
183
  }
392
184
 
393
- .odt_Badge-module__style-filled___5sW--.odt_Badge-module__color-success___Pxq0o {
185
+ .odt-btn--filled-inverse {
186
+ background-color: var(--color-fg-strong);
187
+ color: var(--color-btn-inverse-fg, var(--color-surface));
188
+ }
189
+ .odt-btn--filled-inverse:hover:not(:disabled) { opacity: 0.9; }
190
+ .odt-btn--filled-inverse:active:not(:disabled) { opacity: 0.8; }
191
+
192
+ .odt-btn--filled-success {
394
193
  background-color: var(--color-success);
395
- color: #ffffff;
194
+ color: var(--color-btn-success-fg, #ffffff);
396
195
  }
196
+ .odt-btn--filled-success:hover:not(:disabled) { opacity: 0.9; }
197
+ .odt-btn--filled-success:active:not(:disabled) { opacity: 0.8; }
397
198
 
398
- .odt_Badge-module__style-filled___5sW--.odt_Badge-module__color-warning___ct-zv {
199
+ .odt-btn--filled-warning {
399
200
  background-color: var(--color-warning);
400
- color: hsl(240 10% 12%);
201
+ color: var(--color-btn-warning-fg, var(--color-fg-strong));
401
202
  }
203
+ .odt-btn--filled-warning:hover:not(:disabled) { opacity: 0.9; }
204
+ .odt-btn--filled-warning:active:not(:disabled) { opacity: 0.8; }
402
205
 
403
- .odt_Badge-module__style-filled___5sW--.odt_Badge-module__color-danger___aR7Bn {
206
+ .odt-btn--filled-danger {
404
207
  background-color: var(--color-danger);
405
- color: #fff;
208
+ color: var(--color-btn-danger-fg, #ffffff);
406
209
  }
210
+ .odt-btn--filled-danger:hover:not(:disabled) { opacity: 0.9; }
211
+ .odt-btn--filled-danger:active:not(:disabled) { opacity: 0.8; }
407
212
 
408
- .odt_Badge-module__style-filled___5sW--.odt_Badge-module__color-info___uCh-3 {
213
+ .odt-btn--filled-info {
409
214
  background-color: var(--color-info);
410
- color: #fff;
215
+ color: var(--color-btn-info-fg, #ffffff);
411
216
  }
217
+ .odt-btn--filled-info:hover:not(:disabled) { opacity: 0.9; }
218
+ .odt-btn--filled-info:active:not(:disabled) { opacity: 0.8; }
412
219
 
413
- .odt_Badge-module__style-filled___5sW--.odt_Badge-module__color-neutral___k17wr {
220
+ .odt-btn--filled-neutral {
414
221
  background-color: var(--color-neutral-800);
415
- color: #fff;
222
+ color: #ffffff;
416
223
  }
417
-
418
- /* ==========================================================================
419
- * Outlined Variant
420
- * ========================================================================== */
421
- .odt_Badge-module__style-outlined___XFjTz {
422
- background-color: transparent;
423
- border: 1px solid currentColor;
224
+ .odt-btn--filled-neutral:hover:not(:disabled) {
225
+ background-color: var(--color-neutral-900);
424
226
  }
425
227
 
426
- .odt_Badge-module__style-outlined___XFjTz.odt_Badge-module__color-primary___7ji7B {
427
- color: var(--color-primary-600);
428
- border-color: var(--color-primary-300);
228
+ /* Button - Capsule Variant */
229
+ .odt-btn--capsule {
230
+ border-radius: var(--radius-full, 9999px) !important;
231
+ box-shadow: var(--shadow-card);
429
232
  }
233
+ .odt-btn--capsule.odt-btn--sm { padding: 0.375rem 1.125rem; }
234
+ .odt-btn--capsule.odt-btn--md { padding: 0.625rem 1.5rem; }
235
+ .odt-btn--capsule.odt-btn--lg { padding: 0.75rem 2rem; }
430
236
 
431
- .odt_Badge-module__style-outlined___XFjTz.odt_Badge-module__color-secondary___MQrzD {
432
- color: var(--color-secondary-800);
433
- border-color: var(--color-secondary-300);
237
+ /* Button - Frosted Variant */
238
+ .odt-btn--frosted {
239
+ backdrop-filter: blur(var(--frosted-blur, 16px));
240
+ -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
241
+ box-shadow: var(--shadow-card);
434
242
  }
435
-
436
- .odt_Badge-module__style-outlined___XFjTz.odt_Badge-module__color-success___Pxq0o {
437
- color: var(--color-success);
438
- border-color: var(--color-line-success);
243
+ .odt-btn--frosted-primary {
244
+ background-color: hsl(from var(--color-primary-500) h s l / 0.85);
245
+ color: var(--color-btn-primary-fg, #ffffff);
439
246
  }
440
-
441
- .odt_Badge-module__style-outlined___XFjTz.odt_Badge-module__color-warning___ct-zv {
442
- color: var(--color-warning);
443
- border-color: var(--color-line-warning);
247
+ .odt-btn--frosted-primary:hover:not(:disabled) {
248
+ background-color: hsl(from var(--color-primary-500) h s l / 0.95);
444
249
  }
445
-
446
- .odt_Badge-module__style-outlined___XFjTz.odt_Badge-module__color-danger___aR7Bn {
447
- color: var(--color-danger);
448
- border-color: var(--color-line-danger);
250
+ .odt-btn--frosted-secondary {
251
+ background-color: hsl(from var(--color-secondary-500) h s l / 0.85);
252
+ color: var(--color-btn-secondary-fg, hsl(224 25% 6%));
449
253
  }
450
-
451
- .odt_Badge-module__style-outlined___XFjTz.odt_Badge-module__color-info___uCh-3 {
452
- color: var(--color-info);
453
- border-color: var(--color-info);
254
+ .odt-btn--frosted-secondary:hover:not(:disabled) {
255
+ background-color: hsl(from var(--color-secondary-500) h s l / 0.95);
256
+ }
257
+ .odt-btn--frosted-surface {
258
+ background-color: var(--frosted-surface-bg);
259
+ color: var(--color-btn-surface-fg, var(--color-fg-strong));
260
+ }
261
+ .odt-btn--frosted-surface:hover:not(:disabled) {
262
+ background-color: var(--frosted-muted-bg);
263
+ }
264
+ .odt-btn--frosted-muted {
265
+ background-color: var(--frosted-muted-bg);
266
+ color: var(--color-btn-muted-fg, var(--color-fg));
267
+ }
268
+ .odt-btn--frosted-muted:hover:not(:disabled) {
269
+ background-color: var(--frosted-subtle-bg);
270
+ }
271
+ .odt-btn--frosted-inverse {
272
+ background-color: hsl(from var(--color-fg-strong) h s l / 0.85);
273
+ color: var(--color-btn-inverse-fg, var(--color-surface));
274
+ }
275
+ .odt-btn--frosted-inverse:hover:not(:disabled) {
276
+ background-color: hsl(from var(--color-fg-strong) h s l / 0.95);
277
+ }
278
+ .odt-btn--frosted-success {
279
+ background-color: hsl(from var(--color-success) h s l / 0.85);
280
+ color: var(--color-btn-success-fg, #ffffff);
281
+ }
282
+ .odt-btn--frosted-warning {
283
+ background-color: hsl(from var(--color-warning) h s l / 0.85);
284
+ color: var(--color-btn-warning-fg, var(--color-fg-strong));
285
+ }
286
+ .odt-btn--frosted-danger {
287
+ background-color: hsl(from var(--color-danger) h s l / 0.85);
288
+ color: var(--color-btn-danger-fg, #ffffff);
289
+ }
290
+ .odt-btn--frosted-info {
291
+ background-color: hsl(from var(--color-info) h s l / 0.85);
292
+ color: var(--color-btn-info-fg, #ffffff);
454
293
  }
455
294
 
456
- .odt_Badge-module__style-outlined___XFjTz.odt_Badge-module__color-neutral___k17wr {
457
- color: var(--color-fg-muted);
458
- border-color: var(--color-line);
295
+ /* Button - Ghost Variant */
296
+ .odt-btn--ghost {
297
+ background-color: transparent;
298
+ box-shadow: none;
459
299
  }
300
+ .odt-btn--ghost-primary { color: var(--color-fg-primary); }
301
+ .odt-btn--ghost-primary:hover:not(:disabled) { background-color: var(--color-primary-50); }
302
+ .odt-btn--ghost-primary:active:not(:disabled) { background-color: var(--color-primary-100); }
303
+
304
+ .odt-btn--ghost-secondary { color: var(--color-fg-secondary); }
305
+ .odt-btn--ghost-secondary:hover:not(:disabled) { background-color: var(--color-secondary-50); }
306
+ .odt-btn--ghost-secondary:active:not(:disabled) { background-color: var(--color-secondary-100); }
307
+
308
+ .odt-btn--ghost-surface,
309
+ .odt-btn--ghost-muted,
310
+ .odt-btn--ghost-inverse { color: var(--color-fg-strong); }
311
+ .odt-btn--ghost-surface:hover:not(:disabled),
312
+ .odt-btn--ghost-muted:hover:not(:disabled),
313
+ .odt-btn--ghost-inverse:hover:not(:disabled) { background-color: var(--color-surface-muted); }
314
+
315
+ .odt-btn--ghost-success { color: var(--color-fg-success); }
316
+ .odt-btn--ghost-success:hover:not(:disabled) { background-color: var(--color-surface-success); }
317
+
318
+ .odt-btn--ghost-warning { color: var(--color-fg-warning); }
319
+ .odt-btn--ghost-warning:hover:not(:disabled) { background-color: var(--color-surface-warning); }
320
+
321
+ .odt-btn--ghost-danger { color: var(--color-fg-danger); }
322
+ .odt-btn--ghost-danger:hover:not(:disabled) { background-color: var(--color-surface-danger); }
323
+
324
+ .odt-btn--ghost-info { color: var(--color-fg-info); }
325
+ .odt-btn--ghost-info:hover:not(:disabled) { background-color: var(--color-surface-info); }
326
+
327
+ .odt-btn--ghost-neutral { color: var(--color-fg-muted); }
328
+ .odt-btn--ghost-neutral:hover:not(:disabled) { color: var(--color-fg); background-color: var(--color-surface-muted); }
329
+
330
+ /* Legacy / Secondary Button Variants Compatibility */
331
+ .odt-btn--light-primary { background-color: var(--color-primary-50); color: var(--color-primary-700); }
332
+ .odt-btn--light-primary:hover:not(:disabled) { background-color: var(--color-primary-100); }
333
+ .odt-btn--light-secondary { background-color: var(--color-secondary-50); color: var(--color-secondary-900); }
334
+ .odt-btn--light-secondary:hover:not(:disabled) { background-color: var(--color-secondary-100); }
335
+ .odt-btn--light-success { background-color: var(--color-surface-success); color: var(--color-fg-success); }
336
+ .odt-btn--light-warning { background-color: var(--color-surface-warning); color: var(--color-fg-warning); }
337
+ .odt-btn--light-danger { background-color: var(--color-surface-danger); color: var(--color-fg-danger); }
338
+ .odt-btn--light-neutral { background-color: var(--color-surface-muted); color: var(--color-fg-muted); }
339
+
340
+ .odt-btn--outline-primary, .odt-btn--outlined-primary { border-color: var(--color-primary-300); color: var(--color-primary-600); background-color: transparent; }
341
+ .odt-btn--outline-primary:hover:not(:disabled) { background-color: var(--color-primary-50); }
342
+ .odt-btn--outline-secondary, .odt-btn--outlined-secondary { border-color: var(--color-secondary-300); color: var(--color-secondary-900); background-color: transparent; }
343
+ .odt-btn--outline-secondary:hover:not(:disabled) { background-color: var(--color-secondary-50); }
344
+ .odt-btn--outline-danger, .odt-btn--outlined-danger { border-color: var(--color-danger); color: var(--color-danger); background-color: transparent; }
345
+ .odt-btn--outline-danger:hover:not(:disabled) { background-color: var(--color-surface-danger); }
346
+ .odt-btn--outline-neutral, .odt-btn--outlined-neutral { border-color: var(--color-line); color: var(--color-fg); background-color: transparent; }
347
+ .odt-btn--outline-neutral:hover:not(:disabled) { background-color: var(--color-surface-subtle); }
348
+
349
+ .odt-btn--subtle-primary { background-color: transparent; color: var(--color-primary-600); }
350
+ .odt-btn--subtle-primary:hover:not(:disabled) { background-color: var(--color-primary-50); }
351
+ .odt-btn--subtle-secondary { background-color: transparent; color: var(--color-secondary-900); }
352
+ .odt-btn--subtle-secondary:hover:not(:disabled) { background-color: var(--color-secondary-50); }
353
+ .odt-btn--subtle-neutral { background-color: transparent; color: var(--color-fg); }
354
+ .odt-btn--subtle-neutral:hover:not(:disabled) { background-color: var(--color-surface-subtle); }
355
+ .odt-btn--subtle-danger { background-color: transparent; color: var(--color-danger); }
356
+ .odt-btn--subtle-danger:hover:not(:disabled) { background-color: var(--color-surface-danger); }
460
357
 
461
358
  /* ==========================================================================
462
- * Dot Indicator
359
+ * 3. Badge Component (.odt-badge)
463
360
  * ========================================================================== */
464
- .odt_Badge-module__dot___ahAsv {
465
- width: 0.5rem;
466
- height: 0.5rem;
467
- border-radius: 50%;
468
- background-color: currentColor;
469
- display: inline-block;
470
- }
471
-
472
- .odt_Avatar-module__avatar___wPwGr {
361
+ .odt-badge {
473
362
  display: inline-flex;
474
363
  align-items: center;
475
- justify-content: center;
364
+ gap: var(--spacing-1-5, 0.375rem);
476
365
  border-radius: var(--radius-full, 9999px);
477
- overflow: hidden;
478
- position: relative;
479
- user-select: none;
480
- font-weight: var(--font-weight-bold, 700);
366
+ font-family: inherit;
367
+ font-weight: var(--font-weight-semibold, 600);
368
+ line-height: 1;
369
+ white-space: nowrap;
481
370
  box-sizing: border-box;
371
+ width: fit-content;
482
372
  flex-shrink: 0;
483
373
  }
484
374
 
485
- .odt_Avatar-module__image___3wWaf {
486
- width: 100%;
487
- height: 100%;
488
- object-fit: cover;
489
- }
490
-
491
- .odt_Avatar-module__fallback___7mwVh {
492
- width: 100%;
493
- height: 100%;
494
- display: flex;
495
- align-items: center;
496
- justify-content: center;
497
- text-transform: uppercase;
498
- }
499
-
500
- /* ==========================================================================
501
- * Sizes
502
- * ========================================================================== */
503
- .odt_Avatar-module__size-xs___-dujg {
504
- width: 1.5rem;
505
- height: 1.5rem;
506
- font-size: 0.625rem;
507
- }
508
-
509
- .odt_Avatar-module__size-sm___7pE8- {
510
- width: 2rem;
511
- height: 2rem;
375
+ .odt-badge--sm {
376
+ padding: 0.25rem 0.625rem;
512
377
  font-size: var(--font-size-xs, 0.75rem);
513
378
  }
514
379
 
515
- .odt_Avatar-module__size-md___hjrCq {
516
- width: 2.5rem;
517
- height: 2.5rem;
380
+ .odt-badge--md {
381
+ padding: 0.375rem 0.875rem;
518
382
  font-size: var(--font-size-sm, 0.875rem);
519
383
  }
520
384
 
521
- .odt_Avatar-module__size-lg___J-i6f {
522
- width: 3rem;
523
- height: 3rem;
524
- font-size: var(--font-size-base, 1rem);
385
+ .odt-badge__dot {
386
+ width: 0.5rem;
387
+ height: 0.5rem;
388
+ border-radius: 50%;
389
+ background-color: currentColor;
390
+ display: inline-block;
391
+ flex-shrink: 0;
525
392
  }
526
393
 
527
- .odt_Avatar-module__size-xl___DUieS {
528
- width: 4rem;
529
- height: 4rem;
530
- font-size: var(--font-size-xl, 1.25rem);
394
+ /* Badge - Subtle Variant */
395
+ .odt-badge--subtle-primary { background-color: var(--color-primary-50); color: var(--color-primary-600); }
396
+ .odt-badge--subtle-secondary { background-color: var(--color-secondary-100); color: var(--color-secondary-900); }
397
+ .odt-badge--subtle-success { background-color: var(--color-surface-success); color: var(--color-success); }
398
+ .odt-badge--subtle-warning { background-color: var(--color-surface-warning); color: var(--color-warning); }
399
+ .odt-badge--subtle-danger { background-color: var(--color-surface-danger); color: var(--color-danger); }
400
+ .odt-badge--subtle-info { background-color: var(--color-surface-info); color: var(--color-info); }
401
+ .odt-badge--subtle-neutral { background-color: var(--color-surface-muted); color: var(--color-fg-muted); }
402
+
403
+ /* Badge - Filled Variant */
404
+ .odt-badge--filled-primary { background-color: var(--color-primary-500); color: var(--color-badge-primary-fg, #ffffff); }
405
+ .odt-badge--filled-secondary { background-color: var(--color-secondary-500); color: var(--color-badge-secondary-fg, var(--color-fg-strong)); }
406
+ .odt-badge--filled-success { background-color: var(--color-success); color: var(--color-badge-success-fg, #ffffff); }
407
+ .odt-badge--filled-warning { background-color: var(--color-warning); color: var(--color-badge-warning-fg, var(--color-fg-strong)); }
408
+ .odt-badge--filled-danger { background-color: var(--color-danger); color: var(--color-badge-danger-fg, #ffffff); }
409
+ .odt-badge--filled-info { background-color: var(--color-info); color: var(--color-badge-info-fg, #ffffff); }
410
+ .odt-badge--filled-neutral { background-color: var(--color-neutral-800); color: var(--color-badge-neutral-fg, #ffffff); }
411
+
412
+ /* Badge - Outlined Variant */
413
+ .odt-badge--outlined, .odt-badge--outline { background-color: transparent; border: 1px solid currentColor; }
414
+ .odt-badge--outlined-primary, .odt-badge--outline-primary { color: var(--color-primary-600); border-color: var(--color-primary-300); }
415
+ .odt-badge--outlined-secondary, .odt-badge--outline-secondary { color: var(--color-secondary-800); border-color: var(--color-secondary-300); }
416
+ .odt-badge--outlined-success, .odt-badge--outline-success { color: var(--color-success); border-color: var(--color-line-success); }
417
+ .odt-badge--outlined-warning, .odt-badge--outline-warning { color: var(--color-warning); border-color: var(--color-line-warning); }
418
+ .odt-badge--outlined-danger, .odt-badge--outline-danger { color: var(--color-danger); border-color: var(--color-line-danger); }
419
+ .odt-badge--outlined-info, .odt-badge--outline-info { color: var(--color-info); border-color: var(--color-info); }
420
+ .odt-badge--outlined-neutral, .odt-badge--outline-neutral { color: var(--color-fg-muted); border-color: var(--color-line); }
421
+
422
+ /* ==========================================================================
423
+ * 4. Card Component (.odt-card)
424
+ * ========================================================================== */
425
+ .odt-card {
426
+ box-sizing: border-box;
427
+ border-radius: var(--radius-2xl, 1rem);
428
+ padding: var(--spacing-6, 1.5rem);
429
+ display: flex;
430
+ flex-direction: column;
431
+ gap: var(--spacing-4, 1rem);
432
+ position: relative;
433
+ transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
434
+ border: 1px solid transparent;
531
435
  }
532
436
 
533
- .odt_Avatar-module__size-2xl___KqqEi {
534
- width: 4.5rem;
535
- height: 4.5rem;
536
- font-size: var(--font-size-2xl, 1.5rem);
437
+ .odt-card--elevated {
438
+ background-color: var(--color-surface-base);
439
+ box-shadow: var(--shadow-card);
537
440
  }
538
441
 
539
- /* ==========================================================================
540
- * Color Variants
541
- * ========================================================================== */
542
- .odt_Avatar-module__color-secondary___Lk80j {
543
- background-color: var(--color-secondary-100);
544
- color: var(--color-secondary-900);
442
+ .odt-card--outlined {
443
+ background-color: var(--color-surface-base);
444
+ border: 1px solid var(--color-line);
545
445
  }
546
446
 
547
- .odt_Avatar-module__color-primary___rrGpe {
548
- background-color: var(--color-primary-100);
549
- color: var(--color-primary-600);
447
+ .odt-card--subtle {
448
+ background-color: var(--color-surface-subtle);
550
449
  }
551
450
 
552
- .odt_Avatar-module__color-neutral___SDBrs {
451
+ .odt-card--muted {
553
452
  background-color: var(--color-surface-muted);
554
- color: var(--color-fg);
555
453
  }
556
454
 
557
- .odt_Typography-module__heading___4m44d,
558
- .odt_Typography-module__text___FnVVT {
559
- margin: 0;
560
- box-sizing: border-box;
455
+ .odt-card--ghost {
456
+ background-color: transparent;
561
457
  }
562
458
 
563
- /* ==========================================================================
564
- * Font Sizes
565
- * ========================================================================== */
566
- .odt_Typography-module__size-5xl___M3F0j {
567
- font-size: var(--font-size-5xl, 3rem);
568
- line-height: var(--line-height-none, 1);
459
+ .odt-card--frosted {
460
+ background-color: var(--frosted-surface-bg);
461
+ backdrop-filter: blur(var(--frosted-blur, 16px));
462
+ -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
463
+ box-shadow: var(--shadow-card);
464
+ border: 1px solid var(--frosted-surface-border);
465
+ }
466
+
467
+ /* Card Background Modifiers */
468
+ .odt-card--bg-base, .odt-card--bg-surface-base { background-color: var(--color-surface-base); }
469
+ .odt-card--bg-surface { background-color: var(--color-surface); }
470
+ .odt-card--bg-surface-elevated { background-color: var(--color-surface-elevated); }
471
+ .odt-card--bg-surface-muted { background-color: var(--color-surface-muted); }
472
+ .odt-card--bg-surface-subtle { background-color: var(--color-surface-subtle); }
473
+ .odt-card--bg-gradient-primary { background: var(--gradient-card); }
474
+ .odt-card--bg-gradient-secondary { background: var(--gradient-secondary-to-white); }
475
+ .odt-card--bg-gradient-vibrant { background: var(--gradient-vibrant); }
476
+ .odt-card--bg-gradient-hero { background: var(--gradient-hero-primary); }
477
+ .odt-card--bg-transparent { background-color: transparent; }
478
+
479
+ .odt-card--bg-frosted,
480
+ .odt-card--bg-frosted-muted,
481
+ .odt-card--bg-frosted-subtle,
482
+ .odt-card--bg-frosted-gradient-primary,
483
+ .odt-card--bg-frosted-gradient-secondary {
484
+ backdrop-filter: blur(var(--frosted-blur, 16px));
485
+ -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
569
486
  }
570
-
571
- .odt_Typography-module__size-4xl___txy32 {
572
- font-size: var(--font-size-4xl, 2.25rem);
573
- line-height: 2.5rem;
487
+ .odt-card--bg-frosted { background-color: var(--frosted-surface-bg); }
488
+ .odt-card--bg-frosted-muted { background-color: var(--frosted-muted-bg); }
489
+ .odt-card--bg-frosted-subtle { background-color: var(--frosted-subtle-bg); }
490
+ .odt-card--bg-frosted-gradient-primary { background: var(--frosted-gradient-primary); }
491
+ .odt-card--bg-frosted-gradient-secondary { background: var(--frosted-gradient-secondary); }
492
+
493
+ /* Card Border Modifiers */
494
+ .odt-card--border-none { border: none; }
495
+ .odt-card--border-muted { border: 1px solid var(--color-line-muted); }
496
+ .odt-card--border-base { border: 1px solid var(--color-line); }
497
+ .odt-card--border-strong { border: 1px solid var(--color-line-strong); }
498
+ .odt-card--border-primary { border: 1px solid var(--color-line-primary); }
499
+ .odt-card--border-secondary { border: 1px solid var(--color-secondary-500); }
500
+ .odt-card--border-danger { border: 1px solid var(--color-line-danger); }
501
+ .odt-card--border-success { border: 1px solid var(--color-line-success); }
502
+
503
+ /* Card Padding Modifiers */
504
+ .odt-card--padding-none { padding: 0; }
505
+ .odt-card--padding-xs { padding: var(--spacing-2, 0.5rem); }
506
+ .odt-card--padding-sm { padding: var(--spacing-3, 0.75rem); }
507
+ .odt-card--padding-md { padding: var(--spacing-4, 1rem); }
508
+ .odt-card--padding-lg { padding: var(--spacing-6, 1.5rem); }
509
+ .odt-card--padding-xl { padding: var(--spacing-8, 2rem); }
510
+ .odt-card--padding-2xl { padding: var(--spacing-10, 2.5rem); }
511
+
512
+ .odt-card--hoverable {
513
+ cursor: pointer;
514
+ }
515
+ .odt-card--hoverable:hover {
516
+ transform: translateY(-2px);
517
+ box-shadow: var(--shadow-dropdown);
574
518
  }
575
519
 
576
- .odt_Typography-module__size-3xl___7SnHs {
577
- font-size: var(--font-size-3xl, 1.875rem);
578
- line-height: 2.25rem;
520
+ /* Card Sub-components */
521
+ .odt-card__header {
522
+ display: flex;
523
+ flex-direction: column;
524
+ gap: var(--spacing-1, 0.25rem);
579
525
  }
580
526
 
581
- .odt_Typography-module__size-2xl___fjmZ2 {
582
- font-size: var(--font-size-2xl, 1.5rem);
583
- line-height: 2rem;
527
+ .odt-card__header-with-action {
528
+ display: flex;
529
+ flex-direction: row;
530
+ align-items: flex-start;
531
+ justify-content: space-between;
532
+ gap: var(--spacing-3, 0.75rem);
533
+ width: 100%;
584
534
  }
585
535
 
586
- .odt_Typography-module__size-xl___hc6Qz {
536
+ .odt-card__title {
587
537
  font-size: var(--font-size-xl, 1.25rem);
588
- line-height: 1.75rem;
538
+ font-weight: var(--font-weight-bold, 700);
539
+ color: var(--color-fg-strong);
540
+ margin: 0;
541
+ line-height: var(--line-height-tight, 1.25);
589
542
  }
590
543
 
591
- .odt_Typography-module__size-lg___4i-2V {
592
- font-size: var(--font-size-lg, 1.125rem);
593
- line-height: 1.75rem;
544
+ .odt-card__subtitle,
545
+ .odt-card__description {
546
+ font-size: var(--font-size-sm, 0.875rem);
547
+ color: var(--color-fg-muted);
548
+ margin: 0;
594
549
  }
595
550
 
596
- .odt_Typography-module__size-base___0Opr- {
551
+ .odt-card__content {
552
+ color: var(--color-fg);
597
553
  font-size: var(--font-size-base, 1rem);
598
554
  line-height: var(--line-height-normal, 1.5);
555
+ flex: 1 1 auto;
599
556
  }
600
557
 
601
- .odt_Typography-module__size-sm___OSlfm {
602
- font-size: var(--font-size-sm, 0.875rem);
603
- line-height: 1.25rem;
604
- }
605
-
606
- .odt_Typography-module__size-xs___Pf3fz {
607
- font-size: var(--font-size-xs, 0.75rem);
608
- line-height: 1rem;
558
+ .odt-card__footer {
559
+ display: flex;
560
+ align-items: center;
561
+ gap: var(--spacing-3, 0.75rem);
562
+ margin-top: auto;
609
563
  }
610
564
 
611
565
  /* ==========================================================================
612
- * Font Weights
566
+ * 5. Alert Component (.odt-alert)
613
567
  * ========================================================================== */
614
- .odt_Typography-module__weight-light___Tn5if {
615
- font-weight: var(--font-weight-light, 300);
568
+ .odt-alert {
569
+ display: flex;
570
+ align-items: flex-start;
571
+ gap: var(--spacing-3, 0.75rem);
572
+ padding: var(--spacing-4, 1rem);
573
+ border-radius: var(--radius-2xl, 1rem);
574
+ font-size: var(--font-size-sm, 0.875rem);
575
+ box-sizing: border-box;
576
+ border: 1px solid transparent;
577
+ box-shadow: var(--shadow-card);
616
578
  }
617
579
 
618
- .odt_Typography-module__weight-normal___fSM-z {
619
- font-weight: var(--font-weight-normal, 400);
620
- }
621
-
622
- .odt_Typography-module__weight-medium___mvwSV {
623
- font-weight: var(--font-weight-medium, 500);
624
- }
625
-
626
- .odt_Typography-module__weight-semibold___lHmg3 {
627
- font-weight: var(--font-weight-semibold, 600);
628
- }
629
-
630
- .odt_Typography-module__weight-bold___BIoHk {
631
- font-weight: var(--font-weight-bold, 700);
632
- }
633
-
634
- .odt_Typography-module__weight-extrabold___goOLr {
635
- font-weight: var(--font-weight-extrabold, 800);
636
- }
637
-
638
- /* ==========================================================================
639
- * Colors
640
- * ========================================================================== */
641
- .odt_Typography-module__color-strong___WMXYB {
642
- color: var(--color-fg-strong);
643
- }
644
-
645
- .odt_Typography-module__color-default___06L1t {
646
- color: var(--color-fg);
647
- }
648
-
649
- .odt_Typography-module__color-muted___UXdTw {
650
- color: var(--color-fg-muted);
651
- }
652
-
653
- .odt_Typography-module__color-subtle___gQwA6 {
654
- color: var(--color-fg-subtle);
655
- }
656
-
657
- .odt_Typography-module__color-disabled___DCW3j {
658
- color: var(--color-fg-disabled);
659
- }
660
-
661
- .odt_Typography-module__color-inverse-strong___D3wAq {
662
- color: var(--color-fg-inverse-strong);
663
- }
664
-
665
- .odt_Typography-module__color-inverse___23mIy {
666
- color: var(--color-fg-inverse);
667
- }
668
-
669
- .odt_Typography-module__color-inverse-muted___Nd30N {
670
- color: var(--color-fg-inverse-muted);
671
- }
672
-
673
- .odt_Typography-module__color-inverse-subtle___rRdDT {
674
- color: var(--color-fg-inverse-subtle);
675
- }
676
-
677
- .odt_Typography-module__color-inverse-disabled___kcuNc {
678
- color: var(--color-fg-inverse-disabled);
679
- }
680
-
681
- .odt_Typography-module__color-primary___H9l1C {
682
- color: var(--color-fg-primary);
683
- }
684
-
685
- .odt_Typography-module__color-secondary___3XejJ {
686
- color: var(--color-fg-secondary);
687
- }
688
-
689
- .odt_Typography-module__color-success___JIO1h {
690
- color: var(--color-fg-success);
691
- }
692
-
693
- .odt_Typography-module__color-warning___mN41f {
694
- color: var(--color-fg-warning);
695
- }
696
-
697
- .odt_Typography-module__color-danger___ozevM {
698
- color: var(--color-fg-danger);
699
- }
700
-
701
- .odt_Typography-module__color-info___o9WcJ {
702
- color: var(--color-fg-info);
703
- }
704
-
705
- .odt_Typography-module__truncate___O2Bgp {
706
- overflow: hidden;
707
- text-overflow: ellipsis;
708
- white-space: nowrap;
709
- }
710
-
711
- .odt_Checkbox-module__wrapper___iDRDR {
712
- display: inline-flex;
713
- flex-direction: column;
714
- gap: 0.25rem;
715
- }
716
-
717
- .odt_Checkbox-module__container___HRFGC {
718
- display: inline-flex;
719
- align-items: flex-start;
720
- gap: var(--spacing-2-5, 0.625rem);
721
- cursor: pointer;
722
- user-select: none;
723
- }
724
-
725
- .odt_Checkbox-module__checkbox___7GYu8 {
726
- position: relative;
727
- display: inline-flex;
728
- align-items: center;
729
- justify-content: center;
730
- flex-shrink: 0;
731
- width: 1.125rem; /* 18px (md) */
732
- height: 1.125rem;
733
- background-color: var(--color-surface-subtle, #e4e4e9);
734
- border: none;
735
- border-radius: var(--radius-md, 0.375rem);
736
- color: #ffffff;
737
- cursor: pointer;
738
- padding: 0;
739
- outline: none;
740
- box-sizing: border-box;
741
- transition: background-color 140ms ease, box-shadow 140ms ease, transform 100ms ease;
742
- margin-top: 0.125rem;
743
- }
744
-
745
- .odt_Checkbox-module__checkbox___7GYu8:active:not(:disabled) {
746
- transform: scale(0.94);
747
- }
748
-
749
- /* --------------------------------------------------------------------------
750
- * Unchecked Hover per Color Theme
751
- * -------------------------------------------------------------------------- */
752
- .odt_Checkbox-module__color-primary___mXTKg:hover:not(:disabled):not(.odt_Checkbox-module__checked___XpFj0):not(.odt_Checkbox-module__indeterminate___sVvMo) {
753
- background-color: var(--color-primary-50);
754
- }
755
-
756
- .odt_Checkbox-module__color-secondary___D-YLv:hover:not(:disabled):not(.odt_Checkbox-module__checked___XpFj0):not(.odt_Checkbox-module__indeterminate___sVvMo) {
757
- background-color: var(--color-secondary-50);
758
- }
759
-
760
- .odt_Checkbox-module__color-success___OuIJr:hover:not(:disabled):not(.odt_Checkbox-module__checked___XpFj0):not(.odt_Checkbox-module__indeterminate___sVvMo) {
761
- background-color: var(--color-surface-success);
762
- }
763
-
764
- .odt_Checkbox-module__color-warning___wGvmb:hover:not(:disabled):not(.odt_Checkbox-module__checked___XpFj0):not(.odt_Checkbox-module__indeterminate___sVvMo) {
765
- background-color: var(--color-surface-warning);
766
- }
767
-
768
- .odt_Checkbox-module__color-danger___27GHi:hover:not(:disabled):not(.odt_Checkbox-module__checked___XpFj0):not(.odt_Checkbox-module__indeterminate___sVvMo) {
769
- background-color: var(--color-surface-danger);
770
- }
771
-
772
- .odt_Checkbox-module__color-dark___L6Thg:hover:not(:disabled):not(.odt_Checkbox-module__checked___XpFj0):not(.odt_Checkbox-module__indeterminate___sVvMo) {
773
- background-color: var(--color-surface-subtle);
774
- }
775
-
776
- /* --------------------------------------------------------------------------
777
- * Focus Rings per Color Theme
778
- * -------------------------------------------------------------------------- */
779
- .odt_Checkbox-module__color-primary___mXTKg:focus-visible {
780
- box-shadow: 0 0 0 3px hsl(from var(--color-primary-500) h s l / 0.35);
781
- }
782
- .odt_Checkbox-module__color-secondary___D-YLv:focus-visible {
783
- box-shadow: 0 0 0 3px hsl(from var(--color-secondary-500) h s l / 0.35);
784
- }
785
- .odt_Checkbox-module__color-success___OuIJr:focus-visible {
786
- box-shadow: 0 0 0 3px hsl(from var(--color-success) h s l / 0.35);
787
- }
788
- .odt_Checkbox-module__color-warning___wGvmb:focus-visible {
789
- box-shadow: 0 0 0 3px hsl(from var(--color-warning) h s l / 0.35);
790
- }
791
- .odt_Checkbox-module__color-danger___27GHi:focus-visible {
792
- box-shadow: 0 0 0 3px hsl(from var(--color-danger) h s l / 0.35);
793
- }
794
- .odt_Checkbox-module__color-dark___L6Thg:focus-visible {
795
- box-shadow: 0 0 0 3px hsl(from var(--color-fg) h s l / 0.25);
796
- }
797
-
798
- /* --------------------------------------------------------------------------
799
- * Checked & Indeterminate Active per Color Theme
800
- * -------------------------------------------------------------------------- */
801
- .odt_Checkbox-module__color-primary___mXTKg.odt_Checkbox-module__checked___XpFj0,
802
- .odt_Checkbox-module__color-primary___mXTKg.odt_Checkbox-module__indeterminate___sVvMo {
803
- background-color: var(--color-primary-500);
804
- color: #ffffff;
805
- }
806
- .odt_Checkbox-module__color-primary___mXTKg.odt_Checkbox-module__checked___XpFj0:hover:not(:disabled),
807
- .odt_Checkbox-module__color-primary___mXTKg.odt_Checkbox-module__indeterminate___sVvMo:hover:not(:disabled) {
808
- background-color: var(--color-primary-600);
809
- }
810
-
811
- .odt_Checkbox-module__color-secondary___D-YLv.odt_Checkbox-module__checked___XpFj0,
812
- .odt_Checkbox-module__color-secondary___D-YLv.odt_Checkbox-module__indeterminate___sVvMo {
813
- background-color: var(--color-secondary-500);
814
- color: #18181b;
815
- }
816
- .odt_Checkbox-module__color-secondary___D-YLv.odt_Checkbox-module__checked___XpFj0:hover:not(:disabled),
817
- .odt_Checkbox-module__color-secondary___D-YLv.odt_Checkbox-module__indeterminate___sVvMo:hover:not(:disabled) {
818
- background-color: var(--color-secondary-600);
819
- }
820
-
821
- .odt_Checkbox-module__color-success___OuIJr.odt_Checkbox-module__checked___XpFj0,
822
- .odt_Checkbox-module__color-success___OuIJr.odt_Checkbox-module__indeterminate___sVvMo {
823
- background-color: var(--color-success);
824
- color: #ffffff;
825
- }
826
- .odt_Checkbox-module__color-success___OuIJr.odt_Checkbox-module__checked___XpFj0:hover:not(:disabled),
827
- .odt_Checkbox-module__color-success___OuIJr.odt_Checkbox-module__indeterminate___sVvMo:hover:not(:disabled) {
828
- filter: brightness(0.92);
829
- }
830
-
831
- .odt_Checkbox-module__color-warning___wGvmb.odt_Checkbox-module__checked___XpFj0,
832
- .odt_Checkbox-module__color-warning___wGvmb.odt_Checkbox-module__indeterminate___sVvMo {
833
- background-color: var(--color-warning);
834
- color: #18181b;
835
- }
836
- .odt_Checkbox-module__color-warning___wGvmb.odt_Checkbox-module__checked___XpFj0:hover:not(:disabled),
837
- .odt_Checkbox-module__color-warning___wGvmb.odt_Checkbox-module__indeterminate___sVvMo:hover:not(:disabled) {
838
- filter: brightness(0.92);
839
- }
840
-
841
- .odt_Checkbox-module__color-danger___27GHi.odt_Checkbox-module__checked___XpFj0,
842
- .odt_Checkbox-module__color-danger___27GHi.odt_Checkbox-module__indeterminate___sVvMo {
843
- background-color: var(--color-danger);
844
- color: #ffffff;
845
- }
846
- .odt_Checkbox-module__color-danger___27GHi.odt_Checkbox-module__checked___XpFj0:hover:not(:disabled),
847
- .odt_Checkbox-module__color-danger___27GHi.odt_Checkbox-module__indeterminate___sVvMo:hover:not(:disabled) {
848
- filter: brightness(0.92);
849
- }
850
-
851
- .odt_Checkbox-module__color-dark___L6Thg.odt_Checkbox-module__checked___XpFj0,
852
- .odt_Checkbox-module__color-dark___L6Thg.odt_Checkbox-module__indeterminate___sVvMo {
853
- background-color: var(--color-neutral-900);
854
- color: #ffffff;
855
- }
856
- .odt_Checkbox-module__color-dark___L6Thg.odt_Checkbox-module__checked___XpFj0:hover:not(:disabled),
857
- .odt_Checkbox-module__color-dark___L6Thg.odt_Checkbox-module__indeterminate___sVvMo:hover:not(:disabled) {
858
- filter: brightness(1.15);
859
- }
860
-
861
- /* --------------------------------------------------------------------------
862
- * Icon Indicator
863
- * -------------------------------------------------------------------------- */
864
- .odt_Checkbox-module__icon___HTKmo {
865
- display: block;
866
- pointer-events: none;
867
- animation: odt_Checkbox-module__checkmarkPop___cI6gs 140ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
868
- }
869
-
870
- @keyframes odt_Checkbox-module__checkmarkPop___cI6gs {
871
- 0% {
872
- opacity: 0;
873
- transform: scale(0.5);
874
- }
875
- 100% {
876
- opacity: 1;
877
- transform: scale(1);
878
- }
879
- }
880
-
881
- /* --------------------------------------------------------------------------
882
- * Sizes
883
- * -------------------------------------------------------------------------- */
884
- .odt_Checkbox-module__size-sm___0SWpr.odt_Checkbox-module__checkbox___7GYu8 {
885
- width: 0.9375rem; /* 15px */
886
- height: 0.9375rem;
887
- margin-top: 0.1875rem;
888
- }
889
- .odt_Checkbox-module__size-sm___0SWpr .odt_Checkbox-module__icon___HTKmo {
890
- width: 10px;
891
- height: 10px;
892
- }
893
-
894
- .odt_Checkbox-module__size-md___aZAlB.odt_Checkbox-module__checkbox___7GYu8 {
895
- width: 1.125rem; /* 18px */
896
- height: 1.125rem;
897
- margin-top: 0.125rem;
898
- }
899
- .odt_Checkbox-module__size-md___aZAlB .odt_Checkbox-module__icon___HTKmo {
900
- width: 13px;
901
- height: 13px;
902
- }
903
-
904
- .odt_Checkbox-module__size-lg___QOtIA.odt_Checkbox-module__checkbox___7GYu8 {
905
- width: 1.375rem; /* 22px */
906
- height: 1.375rem;
907
- margin-top: 0.0625rem;
908
- }
909
- .odt_Checkbox-module__size-lg___QOtIA .odt_Checkbox-module__icon___HTKmo {
910
- width: 16px;
911
- height: 16px;
912
- }
913
-
914
- /* --------------------------------------------------------------------------
915
- * Radius
916
- * -------------------------------------------------------------------------- */
917
- .odt_Checkbox-module__radius-none___FX-vm { border-radius: var(--radius-none); }
918
- .odt_Checkbox-module__radius-xs___m-NeK { border-radius: var(--radius-xs); }
919
- .odt_Checkbox-module__radius-sm___nxftf { border-radius: var(--radius-sm); }
920
- .odt_Checkbox-module__radius-md___7-ISe { border-radius: var(--radius-md); }
921
- .odt_Checkbox-module__radius-lg___n3x0t { border-radius: var(--radius-lg); }
922
- .odt_Checkbox-module__radius-full___r6xYw { border-radius: var(--radius-full); }
923
-
924
- /* --------------------------------------------------------------------------
925
- * Error & Disabled States
926
- * -------------------------------------------------------------------------- */
927
- .odt_Checkbox-module__hasError___6D-AW .odt_Checkbox-module__checkbox___7GYu8 {
928
- background-color: var(--color-surface-danger, hsl(0 84% 94%));
929
- }
930
- .odt_Checkbox-module__hasError___6D-AW .odt_Checkbox-module__checkbox___7GYu8.odt_Checkbox-module__checked___XpFj0,
931
- .odt_Checkbox-module__hasError___6D-AW .odt_Checkbox-module__checkbox___7GYu8.odt_Checkbox-module__indeterminate___sVvMo {
932
- background-color: var(--color-danger);
933
- }
934
- .odt_Checkbox-module__hasError___6D-AW .odt_Checkbox-module__checkbox___7GYu8:focus-visible {
935
- box-shadow: 0 0 0 3px hsl(0 84% 85%);
936
- }
937
-
938
- .odt_Checkbox-module__disabled___5Xkd0,
939
- .odt_Checkbox-module__checkbox___7GYu8:disabled {
940
- opacity: 0.45;
941
- cursor: not-allowed;
942
- pointer-events: none;
943
- }
944
-
945
- /* --------------------------------------------------------------------------
946
- * Label & Description
947
- * -------------------------------------------------------------------------- */
948
- .odt_Checkbox-module__labelContent___v32kN {
949
- display: flex;
950
- flex-direction: column;
951
- gap: 0.125rem;
952
- }
953
-
954
- .odt_Checkbox-module__label___MmvCw {
955
- font-size: var(--font-size-sm, 0.875rem);
956
- color: var(--color-fg);
957
- font-weight: 500;
958
- line-height: 1.25rem;
959
- }
960
-
961
- .odt_Checkbox-module__description___bG7Aj {
962
- font-size: var(--font-size-xs, 0.75rem);
963
- color: var(--color-fg-muted);
964
- line-height: 1rem;
965
- }
966
-
967
- .odt_Checkbox-module__errorMessage___3dlke {
968
- font-size: var(--font-size-xs, 0.75rem);
969
- color: var(--color-danger);
970
- line-height: 1rem;
971
- padding-left: 1.75rem;
972
- }
973
-
974
- .odt_Card-module__card___N-f1C {
975
- box-sizing: border-box;
976
- border-radius: var(--radius-2xl, 1rem);
977
- padding: var(--spacing-6, 1.5rem);
978
- display: flex;
979
- flex-direction: column;
980
- gap: var(--spacing-4, 1rem);
981
- position: relative;
982
- transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
983
- }
984
-
985
- /* ==========================================================================
986
- * Card Variants (Pre-packaged Presets)
987
- * ========================================================================== */
988
- .odt_Card-module__variant-elevated___qp-wF {
989
- background-color: var(--color-surface-elevated, #fff);
990
- box-shadow: var(--shadow-card);
991
- }
992
-
993
- .odt_Card-module__variant-subtle___8XlI3 {
994
- background-color: var(--color-surface-subtle);
995
- border: 1px solid transparent;
996
- }
997
-
998
- .odt_Card-module__variant-muted___2DZvE {
999
- background-color: var(--color-surface-muted);
1000
- border: 1px solid transparent;
1001
- }
1002
-
1003
- .odt_Card-module__variant-outlined___dZ37X {
1004
- background-color: var(--color-surface);
1005
- border: 1px solid var(--color-line);
1006
- }
1007
-
1008
- .odt_Card-module__variant-gradient___qqlsB {
1009
- background: var(--gradient-card, linear-gradient(to bottom, var(--color-primary-50), #fff));
1010
- box-shadow: var(--shadow-card);
1011
- border: 1px solid var(--color-line-muted, transparent);
1012
- }
1013
-
1014
- .odt_Card-module__variant-gradient-secondary___DSzrp {
1015
- background: var(--gradient-secondary-to-white, linear-gradient(to bottom right, var(--color-secondary-50), #fff));
1016
- box-shadow: var(--shadow-card);
1017
- border: 1px solid var(--color-line-muted, transparent);
1018
- }
1019
-
1020
- /* Frosted Glassmorphism Variants */
1021
- .odt_Card-module__variant-frosted___e-Qrr {
1022
- background-color: var(--frosted-surface-bg, rgba(255, 255, 255, 0.60));
1023
- backdrop-filter: blur(var(--frosted-blur, 16px));
1024
- -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
1025
- border: 1px solid transparent;
1026
- border-top: 1px solid var(--frosted-surface-border, rgba(255, 255, 255, 0.70));
1027
- box-shadow: var(--shadow-card);
1028
- }
1029
-
1030
- .odt_Card-module__variant-frosted-muted___n7F6g {
1031
- background-color: var(--frosted-muted-bg, hsl(240 10% 98% / 0.60));
1032
- backdrop-filter: blur(var(--frosted-blur, 16px));
1033
- -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
1034
- border: 1px solid transparent;
1035
- border-top: 1px solid var(--frosted-muted-border, hsl(240 10% 98% / 0.70));
1036
- box-shadow: var(--shadow-card);
1037
- }
1038
-
1039
- .odt_Card-module__variant-frosted-subtle___q7PdU {
1040
- background-color: var(--frosted-subtle-bg, hsl(240 10% 96% / 0.60));
1041
- backdrop-filter: blur(var(--frosted-blur, 16px));
1042
- -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
1043
- border: 1px solid transparent;
1044
- border-top: 1px solid var(--frosted-subtle-border, hsl(240 10% 96% / 0.70));
1045
- box-shadow: var(--shadow-card);
1046
- }
1047
-
1048
- .odt_Card-module__variant-frosted-gradient-primary___iwb2W {
1049
- background: var(--frosted-gradient-primary, linear-gradient(to bottom right, hsl(240 78.3% 95% / 0.60), hsl(0 0% 100% / 0.60)));
1050
- backdrop-filter: blur(var(--frosted-blur, 16px));
1051
- -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
1052
- border: 1px solid transparent;
1053
- border-top: 1px solid var(--frosted-surface-border, rgba(255, 255, 255, 0.70));
1054
- box-shadow: var(--shadow-card);
1055
- }
1056
-
1057
- .odt_Card-module__variant-frosted-gradient-secondary___zxR4U {
1058
- background: var(--frosted-gradient-secondary, linear-gradient(to bottom right, hsl(47 100% 95% / 0.60), hsl(0 0% 100% / 0.60)));
1059
- backdrop-filter: blur(var(--frosted-blur, 16px));
1060
- -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
1061
- border: 1px solid transparent;
1062
- border-top: 1px solid var(--frosted-surface-border, rgba(255, 255, 255, 0.70));
1063
- box-shadow: var(--shadow-card);
1064
- }
1065
-
1066
- /* ==========================================================================
1067
- * Radius Scale Modifiers
1068
- * ========================================================================== */
1069
- .odt_Card-module__radius-none___toGCq { border-radius: var(--radius-none, 0px); }
1070
- .odt_Card-module__radius-xs___eGNq1 { border-radius: var(--radius-xs, 0.125rem); }
1071
- .odt_Card-module__radius-sm___edqQX { border-radius: var(--radius-sm, 0.25rem); }
1072
- .odt_Card-module__radius-md___GfjDD { border-radius: var(--radius-md, 0.375rem); }
1073
- .odt_Card-module__radius-lg___RpBJI { border-radius: var(--radius-lg, 0.5rem); }
1074
- .odt_Card-module__radius-xl___hISrv { border-radius: var(--radius-xl, 0.75rem); }
1075
- .odt_Card-module__radius-2xl___s-8wN { border-radius: var(--radius-2xl, 1rem); }
1076
- .odt_Card-module__radius-3xl___5tK9J { border-radius: var(--radius-3xl, 1.5rem); }
1077
- .odt_Card-module__radius-4xl___LV8pz { border-radius: var(--radius-4xl, 2rem); }
1078
- .odt_Card-module__radius-full___GMvkW { border-radius: var(--radius-full, 9999px); }
1079
-
1080
- /* ==========================================================================
1081
- * Padding Scale Modifiers
1082
- * ========================================================================== */
1083
- .odt_Card-module__padding-none___QrXKp { padding: 0; }
1084
- .odt_Card-module__padding-xs___H2WxG { padding: var(--spacing-2, 0.5rem); }
1085
- .odt_Card-module__padding-sm___rU7OW { padding: var(--spacing-3, 0.75rem); }
1086
- .odt_Card-module__padding-md___AXERP { padding: var(--spacing-4, 1rem); }
1087
- .odt_Card-module__padding-lg___ergQz { padding: var(--spacing-6, 1.5rem); }
1088
- .odt_Card-module__padding-xl___JQy1d { padding: var(--spacing-8, 2rem); }
1089
- .odt_Card-module__padding-2xl___QYRHw { padding: var(--spacing-10, 2.5rem); }
1090
-
1091
- /* ==========================================================================
1092
- * Shadow Elevation Modifiers
1093
- * ========================================================================== */
1094
- .odt_Card-module__shadow-none___OzL8D { box-shadow: none; }
1095
- .odt_Card-module__shadow-card___C7hSN { box-shadow: var(--shadow-card); }
1096
- .odt_Card-module__shadow-dropdown___En5qa { box-shadow: var(--shadow-dropdown); }
1097
- .odt_Card-module__shadow-modal___yPEz2 { box-shadow: var(--shadow-modal); }
1098
- .odt_Card-module__shadow-popover___QAAn2 { box-shadow: var(--shadow-popover); }
1099
-
1100
- /* ==========================================================================
1101
- * Border Style Modifiers
1102
- * ========================================================================== */
1103
- .odt_Card-module__border-none___AkX5W { border: none; }
1104
- .odt_Card-module__border-subtle___N0x0c { border: 1px solid var(--color-line-muted); }
1105
- .odt_Card-module__border-muted___1O1k7 { border: 1px solid var(--color-line-muted); }
1106
- .odt_Card-module__border-default___dzbsy { border: 1px solid var(--color-line); }
1107
- .odt_Card-module__border-strong___c53G4 { border: 1px solid var(--color-line-strong); }
1108
- .odt_Card-module__border-primary___auwrn { border: 1px solid var(--color-line-primary); }
1109
- .odt_Card-module__border-secondary___M-5ZC { border: 1px solid var(--color-secondary-500); }
1110
- .odt_Card-module__border-danger___-iDUO { border: 1px solid var(--color-line-danger); }
1111
- .odt_Card-module__border-success___6DhCb { border: 1px solid var(--color-line-success); }
1112
-
1113
- /* ==========================================================================
1114
- * Background Surface & Gradient Modifiers
1115
- * ========================================================================== */
1116
- .odt_Card-module__bg-surface___sN03F { background-color: var(--color-surface); }
1117
- .odt_Card-module__bg-surface-elevated___foS88 { background-color: var(--color-surface-elevated); }
1118
- .odt_Card-module__bg-surface-muted___zZU2I { background-color: var(--color-surface-muted); }
1119
- .odt_Card-module__bg-surface-subtle___1QgJX { background-color: var(--color-surface-subtle); }
1120
- .odt_Card-module__bg-neutral-900___qy-RL { background-color: var(--color-neutral-900); }
1121
- .odt_Card-module__bg-gradient-primary___Vatjd { background: var(--gradient-card); }
1122
- .odt_Card-module__bg-gradient-secondary___KNcmi { background: var(--gradient-secondary-to-white); }
1123
- .odt_Card-module__bg-gradient-vibrant___eWupX { background: var(--gradient-vibrant); }
1124
- .odt_Card-module__bg-gradient-hero___nGWMB { background: var(--gradient-hero-primary); }
1125
- .odt_Card-module__bg-frosted___fXakt {
1126
- background-color: var(--frosted-surface-bg, rgba(255, 255, 255, 0.60));
1127
- backdrop-filter: blur(var(--frosted-blur, 16px));
1128
- -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
1129
- border-top: 1px solid var(--frosted-surface-border, rgba(255, 255, 255, 0.70));
1130
- }
1131
- .odt_Card-module__bg-frosted-muted___0s-xH {
1132
- background-color: var(--frosted-muted-bg, hsl(240 10% 98% / 0.60));
1133
- backdrop-filter: blur(var(--frosted-blur, 16px));
1134
- -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
1135
- border-top: 1px solid var(--frosted-muted-border, hsl(240 10% 98% / 0.70));
1136
- }
1137
- .odt_Card-module__bg-frosted-subtle___V-iJq {
1138
- background-color: var(--frosted-subtle-bg, hsl(240 10% 96% / 0.60));
1139
- backdrop-filter: blur(var(--frosted-blur, 16px));
1140
- -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
1141
- border-top: 1px solid var(--frosted-subtle-border, hsl(240 10% 96% / 0.70));
1142
- }
1143
- .odt_Card-module__bg-transparent___CGbmG { background-color: transparent; }
1144
-
1145
- .odt_Card-module__hoverable___9as5H {
1146
- cursor: pointer;
1147
- }
1148
-
1149
- .odt_Card-module__hoverable___9as5H:hover {
1150
- transform: translateY(-2px);
1151
- box-shadow: var(--shadow-dropdown);
1152
- }
1153
-
1154
- /* ==========================================================================
1155
- * Card Sub-components
1156
- * ========================================================================== */
1157
- .odt_Card-module__header___bjF2F {
1158
- display: flex;
1159
- flex-direction: column;
1160
- gap: var(--spacing-1, 0.25rem);
1161
- }
1162
-
1163
- .odt_Card-module__headerWithAction___WWhF- {
1164
- display: flex;
1165
- align-items: flex-start;
1166
- justify-content: space-between;
1167
- gap: var(--spacing-3, 0.75rem);
1168
- }
1169
-
1170
- .odt_Card-module__headerContent___b35i6 {
1171
- display: flex;
1172
- flex-direction: column;
1173
- gap: var(--spacing-1, 0.25rem);
1174
- flex: 1 1 auto;
1175
- }
1176
-
1177
- .odt_Card-module__headerAction___jWNIR {
1178
- display: flex;
1179
- align-items: center;
1180
- flex-shrink: 0;
1181
- }
1182
-
1183
- .odt_Card-module__title___0gfPe {
1184
- font-size: var(--font-size-xl, 1.25rem);
1185
- font-weight: var(--font-weight-bold, 700);
1186
- color: var(--color-fg-strong);
1187
- margin: 0;
1188
- }
1189
-
1190
- .odt_Card-module__description___EQnAu {
1191
- font-size: var(--font-size-sm, 0.875rem);
1192
- color: var(--color-fg-muted);
1193
- margin: 0;
1194
- }
1195
-
1196
- .odt_Card-module__content___adpMb {
1197
- color: var(--color-fg);
1198
- font-size: var(--font-size-base, 1rem);
1199
- line-height: var(--line-height-normal, 1.5);
1200
- flex: 1 1 auto;
1201
- }
1202
-
1203
- .odt_Card-module__footer___-zkbX {
1204
- display: flex;
1205
- align-items: center;
1206
- gap: var(--spacing-3, 0.75rem);
1207
- margin-top: auto;
1208
- }
1209
-
1210
- .odt_Input-module__container___cl9L- {
1211
- display: inline-flex;
1212
- flex-direction: column;
1213
- gap: var(--spacing-1-5, 0.375rem);
1214
- box-sizing: border-box;
1215
- font-family: inherit;
1216
- }
1217
-
1218
- .odt_Input-module__fullWidth___h6IdH {
1219
- width: 100%;
1220
- }
1221
-
1222
- .odt_Input-module__label___P-L6t {
1223
- font-size: var(--font-size-sm, 0.875rem);
1224
- font-weight: 500;
1225
- color: var(--color-fg-strong);
1226
- line-height: 1.25rem;
1227
- }
1228
-
1229
- /* --------------------------------------------------------------------------
1230
- * Addon Group Wrapper
1231
- * -------------------------------------------------------------------------- */
1232
- .odt_Input-module__addonGroup___FzOus {
1233
- display: flex;
1234
- align-items: stretch;
1235
- width: 100%;
1236
- }
1237
-
1238
- .odt_Input-module__addonBefore___W9PKe,
1239
- .odt_Input-module__addonAfter___eazYa {
1240
- display: inline-flex;
1241
- align-items: center;
1242
- justify-content: center;
1243
- padding: 0 var(--spacing-3, 0.75rem);
1244
- background-color: var(--color-surface, #ffffff);
1245
- color: var(--color-fg-muted);
1246
- font-size: var(--font-size-sm, 0.875rem);
1247
- font-weight: 500;
1248
- white-space: nowrap;
1249
- user-select: none;
1250
- border: 1px solid var(--color-line, #e4e4e9);
1251
- }
1252
-
1253
- .odt_Input-module__addonBefore___W9PKe {
1254
- border-right: none;
1255
- border-top-left-radius: var(--radius-xl, 0.75rem);
1256
- border-bottom-left-radius: var(--radius-xl, 0.75rem);
1257
- }
1258
-
1259
- .odt_Input-module__addonAfter___eazYa {
1260
- border-left: none;
1261
- border-top-right-radius: var(--radius-xl, 0.75rem);
1262
- border-bottom-right-radius: var(--radius-xl, 0.75rem);
1263
- }
1264
-
1265
- .odt_Input-module__hasAddonBefore___Z4ooG .odt_Input-module__inputWrapper___fOLS4,
1266
- .odt_Input-module__hasAddonBefore___Z4ooG .odt_Input-module__input___Se3cu {
1267
- border-top-left-radius: 0 !important;
1268
- border-bottom-left-radius: 0 !important;
1269
- }
1270
-
1271
- .odt_Input-module__hasAddonAfter___0NgNU .odt_Input-module__inputWrapper___fOLS4,
1272
- .odt_Input-module__hasAddonAfter___0NgNU .odt_Input-module__input___Se3cu {
1273
- border-top-right-radius: 0 !important;
1274
- border-bottom-right-radius: 0 !important;
1275
- }
1276
-
1277
- /* --------------------------------------------------------------------------
1278
- * Input Box, TextArea & Wrapper
1279
- * -------------------------------------------------------------------------- */
1280
- .odt_Input-module__inputWrapper___fOLS4 {
1281
- position: relative;
1282
- display: flex;
1283
- align-items: center;
1284
- width: 100%;
1285
- box-sizing: border-box;
1286
- }
1287
-
1288
- .odt_Input-module__input___Se3cu,
1289
- .odt_Input-module__textarea___6eOLP {
1290
- width: 100%;
1291
- box-sizing: border-box;
1292
- background-color: var(--color-surface, #ffffff);
1293
- color: var(--color-fg);
1294
- font-family: inherit;
1295
- outline: none;
1296
- border: 1px solid transparent;
1297
- transition: border-color 140ms ease, box-shadow 140ms ease;
1298
- }
1299
-
1300
- .odt_Input-module__input___Se3cu {
1301
- line-height: 1.25;
1302
- }
1303
-
1304
- .odt_Input-module__textarea___6eOLP {
1305
- line-height: 1.5;
1306
- height: auto;
1307
- min-height: 5rem;
1308
- }
1309
-
1310
- .odt_Input-module__input___Se3cu::placeholder,
1311
- .odt_Input-module__textarea___6eOLP::placeholder {
1312
- color: var(--color-fg-subtle);
1313
- }
1314
-
1315
- /* Disable native browser search decoration & cancel button in WebKit/Blink */
1316
- .odt_Input-module__input___Se3cu[type="search"]::-webkit-search-decoration,
1317
- .odt_Input-module__input___Se3cu[type="search"]::-webkit-search-cancel-button,
1318
- .odt_Input-module__input___Se3cu[type="search"]::-webkit-search-results-button,
1319
- .odt_Input-module__input___Se3cu[type="search"]::-webkit-search-results-decoration {
1320
- -webkit-appearance: none;
1321
- appearance: none;
1322
- display: none;
1323
- }
1324
-
1325
- /* Disable native Edge/IE password reveal & clear buttons */
1326
- .odt_Input-module__input___Se3cu[type="password"]::-ms-reveal,
1327
- .odt_Input-module__input___Se3cu[type="password"]::-ms-clear {
1328
- display: none;
1329
- }
1330
-
1331
- /* --------------------------------------------------------------------------
1332
- * Variants (Shared across Input, TextArea, PinInput)
1333
- * -------------------------------------------------------------------------- */
1334
- /* Outlined (Default): Pure white surface with thin soft border */
1335
- .odt_Input-module__variant-outlined___l2GwN {
1336
- background-color: var(--color-surface, #ffffff);
1337
- border: 1px solid var(--color-line, #e4e4e9);
1338
- }
1339
- .odt_Input-module__variant-outlined___l2GwN:hover:not(:disabled):not(:focus) {
1340
- border-color: var(--color-line-strong, #d4d4db);
1341
- }
1342
- .odt_Input-module__variant-outlined___l2GwN:focus {
1343
- border-color: var(--color-primary-300);
1344
- }
1345
-
1346
- /* Filled: Pure white surface, transparent border at rest */
1347
- .odt_Input-module__variant-filled___FClCG {
1348
- background-color: var(--color-surface, #ffffff);
1349
- border: 1px solid transparent;
1350
- }
1351
- .odt_Input-module__variant-filled___FClCG:focus {
1352
- border-color: var(--color-primary-300);
1353
- }
1354
-
1355
- /* Frosted: Glassmorphism translucent with blur and card shadow */
1356
- .odt_Input-module__variant-frosted___IkiB2 {
1357
- background-color: hsl(from var(--color-surface) h s l / 0.85);
1358
- backdrop-filter: blur(16px);
1359
- -webkit-backdrop-filter: blur(16px);
1360
- border: 1px solid transparent;
1361
- box-shadow: var(--shadow-card);
1362
- }
1363
- .odt_Input-module__variant-frosted___IkiB2:focus {
1364
- border-color: var(--color-primary-300);
1365
- }
1366
-
1367
- /* Unstyled: Pure text field reset */
1368
- .odt_Input-module__variant-unstyled___eNzxt {
1369
- background: transparent;
1370
- border: none;
1371
- padding: 0;
1372
- box-shadow: none;
1373
- }
1374
-
1375
- /* --------------------------------------------------------------------------
1376
- * Sizes (Input vs TextArea)
1377
- * -------------------------------------------------------------------------- */
1378
- .odt_Input-module__input___Se3cu.odt_Input-module__size-sm___O7uT2 {
1379
- height: 2rem; /* 32px */
1380
- padding: 0 var(--spacing-3, 0.75rem);
1381
- font-size: var(--font-size-xs, 0.75rem);
1382
- }
1383
-
1384
- .odt_Input-module__input___Se3cu.odt_Input-module__size-md___M1oCr {
1385
- height: 2.625rem; /* 42px */
1386
- padding: 0 var(--spacing-4, 1rem);
1387
- font-size: var(--font-size-sm, 0.875rem);
1388
- }
1389
-
1390
- .odt_Input-module__input___Se3cu.odt_Input-module__size-lg___N-PAc {
1391
- height: 3.125rem; /* 50px */
1392
- padding: 0 var(--spacing-5, 1.25rem);
1393
- font-size: var(--font-size-base, 1rem);
1394
- }
1395
-
1396
- .odt_Input-module__textarea___6eOLP.odt_Input-module__size-sm___O7uT2 {
1397
- padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
1398
- font-size: var(--font-size-xs, 0.75rem);
1399
- min-height: 4rem;
1400
- }
1401
-
1402
- .odt_Input-module__textarea___6eOLP.odt_Input-module__size-md___M1oCr {
1403
- padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
1404
- font-size: var(--font-size-sm, 0.875rem);
1405
- min-height: 5rem;
1406
- }
1407
-
1408
- .odt_Input-module__textarea___6eOLP.odt_Input-module__size-lg___N-PAc {
1409
- padding: var(--spacing-4, 1rem) var(--spacing-5, 1.25rem);
1410
- font-size: var(--font-size-base, 1rem);
1411
- min-height: 6.5rem;
1412
- }
1413
-
1414
- /* --------------------------------------------------------------------------
1415
- * Radius Tokens
1416
- * -------------------------------------------------------------------------- */
1417
- .odt_Input-module__radius-none___6pzk4 { border-radius: var(--radius-none, 0) !important; }
1418
- .odt_Input-module__radius-xs___sBcOp { border-radius: var(--radius-xs) !important; }
1419
- .odt_Input-module__radius-sm___EhoZ6 { border-radius: var(--radius-sm) !important; }
1420
- .odt_Input-module__radius-md___eAHon { border-radius: var(--radius-md) !important; }
1421
- .odt_Input-module__radius-lg___aZVHa { border-radius: var(--radius-lg) !important; }
1422
- .odt_Input-module__radius-xl___WiMwH { border-radius: var(--radius-xl) !important; }
1423
- .odt_Input-module__radius-2xl___WCbFw { border-radius: var(--radius-2xl) !important; }
1424
- .odt_Input-module__radius-3xl___2vZXf { border-radius: var(--radius-3xl) !important; }
1425
- .odt_Input-module__radius-4xl___oNvDw { border-radius: var(--radius-4xl) !important; }
1426
- .odt_Input-module__radius-full___cBAP- { border-radius: var(--radius-full) !important; }
1427
-
1428
- /* --------------------------------------------------------------------------
1429
- * Prefix, Suffix & Icons
1430
- * -------------------------------------------------------------------------- */
1431
- .odt_Input-module__leftIcon___InMKC {
1432
- position: absolute;
1433
- left: var(--spacing-3, 0.75rem);
1434
- display: flex;
1435
- align-items: center;
1436
- justify-content: center;
1437
- color: var(--color-fg-muted);
1438
- pointer-events: none;
1439
- z-index: 1;
1440
- }
1441
-
1442
- .odt_Input-module__rightIcon___TO9CO {
1443
- position: absolute;
1444
- right: var(--spacing-3, 0.75rem);
1445
- display: flex;
1446
- align-items: center;
1447
- justify-content: center;
1448
- color: var(--color-fg-muted);
1449
- z-index: 2;
1450
- }
1451
-
1452
- .odt_Input-module__prefix___Gtxoa,
1453
- .odt_Input-module__suffix___UvRsY {
1454
- position: absolute;
1455
- display: inline-flex;
1456
- align-items: center;
1457
- font-size: var(--font-size-sm, 0.875rem);
1458
- color: var(--color-fg-muted);
1459
- font-weight: 500;
1460
- user-select: none;
1461
- pointer-events: none;
1462
- z-index: 1;
1463
- }
1464
-
1465
- .odt_Input-module__prefix___Gtxoa {
1466
- left: var(--spacing-3, 0.75rem);
1467
- }
1468
-
1469
- .odt_Input-module__suffix___UvRsY {
1470
- right: var(--spacing-3, 0.75rem);
1471
- }
1472
-
1473
- /* Icon / Prefix Padding Adjustments */
1474
- .odt_Input-module__hasLeftIcon___LGHVm.odt_Input-module__size-sm___O7uT2,
1475
- .odt_Input-module__hasPrefix___xHGrM.odt_Input-module__size-sm___O7uT2 {
1476
- padding-left: 2rem;
1477
- }
1478
- .odt_Input-module__hasLeftIcon___LGHVm.odt_Input-module__size-md___M1oCr,
1479
- .odt_Input-module__hasPrefix___xHGrM.odt_Input-module__size-md___M1oCr {
1480
- padding-left: 2.5rem;
1481
- }
1482
- .odt_Input-module__hasLeftIcon___LGHVm.odt_Input-module__size-lg___N-PAc,
1483
- .odt_Input-module__hasPrefix___xHGrM.odt_Input-module__size-lg___N-PAc {
1484
- padding-left: 3rem;
1485
- }
1486
-
1487
- .odt_Input-module__hasRightIcon___MiIoZ.odt_Input-module__size-sm___O7uT2,
1488
- .odt_Input-module__hasSuffix___wEfyi.odt_Input-module__size-sm___O7uT2 {
1489
- padding-right: 2rem;
1490
- }
1491
- .odt_Input-module__hasRightIcon___MiIoZ.odt_Input-module__size-md___M1oCr,
1492
- .odt_Input-module__hasSuffix___wEfyi.odt_Input-module__size-md___M1oCr {
1493
- padding-right: 2.5rem;
1494
- }
1495
- .odt_Input-module__hasRightIcon___MiIoZ.odt_Input-module__size-lg___N-PAc,
1496
- .odt_Input-module__hasSuffix___wEfyi.odt_Input-module__size-lg___N-PAc {
1497
- padding-right: 3rem;
1498
- }
1499
-
1500
- /* --------------------------------------------------------------------------
1501
- * Action Buttons (Clear Button & Password Eye Toggle)
1502
- * -------------------------------------------------------------------------- */
1503
- .odt_Input-module__actionButton___ZDJbN {
1504
- display: inline-flex;
1505
- align-items: center;
1506
- justify-content: center;
1507
- background: transparent;
1508
- border: none;
1509
- padding: 0.25rem;
1510
- color: var(--color-fg-muted);
1511
- cursor: pointer;
1512
- border-radius: var(--radius-md, 0.375rem);
1513
- outline: none;
1514
- transition: color 120ms ease, background-color 120ms ease;
1515
- pointer-events: auto;
1516
- user-select: none;
1517
- }
1518
-
1519
- .odt_Input-module__actionButton___ZDJbN:hover {
1520
- color: var(--color-fg-strong);
1521
- background-color: var(--color-neutral-100);
1522
- }
1523
-
1524
- .odt_Input-module__actionButton___ZDJbN:focus-visible {
1525
- border-radius: var(--radius-sm, 0.25rem);
1526
- box-shadow: 0 0 0 1px var(--color-primary-300);
1527
- }
1528
-
1529
- /* --------------------------------------------------------------------------
1530
- * Error & Success States
1531
- * -------------------------------------------------------------------------- */
1532
- .odt_Input-module__errorInput___zIxrL,
1533
- .odt_Input-module__errorInput___zIxrL:focus {
1534
- border-color: var(--color-danger) !important;
1535
- }
1536
-
1537
- .odt_Input-module__successInput___SVNNT,
1538
- .odt_Input-module__successInput___SVNNT:focus {
1539
- border-color: var(--color-success) !important;
1540
- }
1541
-
1542
- .odt_Input-module__input___Se3cu:disabled,
1543
- .odt_Input-module__textarea___6eOLP:disabled {
1544
- background-color: var(--color-surface-subtle);
1545
- color: var(--color-fg-disabled);
1546
- cursor: not-allowed;
1547
- border-color: var(--color-line-muted, rgba(0, 0, 0, 0.05));
1548
- opacity: 0.7;
1549
- }
1550
-
1551
- /* --------------------------------------------------------------------------
1552
- * Helper, Error & Counter Footers
1553
- * -------------------------------------------------------------------------- */
1554
- .odt_Input-module__footer___NjZXj {
1555
- display: flex;
1556
- align-items: center;
1557
- justify-content: space-between;
1558
- gap: 0.5rem;
1559
- }
1560
-
1561
- .odt_Input-module__helperText___QAt9L {
1562
- font-size: var(--font-size-xs, 0.75rem);
1563
- color: var(--color-fg-muted);
1564
- margin: 0;
1565
- line-height: 1rem;
1566
- }
1567
-
1568
- .odt_Input-module__errorMessage___0Wbo0 {
1569
- font-size: var(--font-size-xs, 0.75rem);
1570
- color: var(--color-danger);
1571
- font-weight: 500;
1572
- margin: 0;
1573
- line-height: 1rem;
1574
- }
1575
-
1576
- .odt_Input-module__successMessage___HGdyk {
1577
- font-size: var(--font-size-xs, 0.75rem);
1578
- color: var(--color-success);
1579
- font-weight: 500;
1580
- margin: 0;
1581
- line-height: 1rem;
1582
- }
1583
-
1584
- .odt_Input-module__charCount___3DjSo {
1585
- font-size: var(--font-size-xs, 0.75rem);
1586
- color: var(--color-fg-subtle);
1587
- margin-left: auto;
1588
- white-space: nowrap;
1589
- }
1590
-
1591
- /* --------------------------------------------------------------------------
1592
- * TextArea Specific
1593
- * -------------------------------------------------------------------------- */
1594
- .odt_Input-module__resize-none___YR8VM { resize: none; }
1595
- .odt_Input-module__resize-vertical___P6SGT { resize: vertical; }
1596
- .odt_Input-module__resize-horizontal___1XWKQ { resize: horizontal; }
1597
- .odt_Input-module__resize-both___RbrLm { resize: both; }
1598
-
1599
- /* --------------------------------------------------------------------------
1600
- * Pin / OTP Input
1601
- * -------------------------------------------------------------------------- */
1602
- .odt_Input-module__pinContainer___L-3iw {
1603
- display: inline-flex;
1604
- flex-direction: column;
1605
- gap: var(--spacing-1-5, 0.375rem);
1606
- }
1607
-
1608
- .odt_Input-module__pinGroup___Jfgyq {
1609
- display: inline-flex;
1610
- align-items: center;
1611
- gap: var(--spacing-2-5, 0.625rem);
1612
- }
1613
-
1614
- .odt_Input-module__pinCell___DBcE5 {
1615
- text-align: center;
1616
- font-family: inherit;
1617
- font-weight: 600;
1618
- outline: none;
1619
- box-sizing: border-box;
1620
- transition: border-color 140ms ease, box-shadow 140ms ease;
1621
- }
1622
-
1623
- .odt_Input-module__pinCell___DBcE5.odt_Input-module__size-sm___O7uT2 {
1624
- width: 2rem;
1625
- height: 2.25rem;
1626
- font-size: var(--font-size-sm, 0.875rem);
1627
- padding: 0;
1628
- }
1629
-
1630
- .odt_Input-module__pinCell___DBcE5.odt_Input-module__size-md___M1oCr {
1631
- width: 2.75rem;
1632
- height: 3rem;
1633
- font-size: var(--font-size-lg, 1.125rem);
1634
- padding: 0;
1635
- }
1636
-
1637
- .odt_Input-module__pinCell___DBcE5.odt_Input-module__size-lg___N-PAc {
1638
- width: 3.5rem;
1639
- height: 3.75rem;
1640
- font-size: var(--font-size-2xl, 1.5rem);
1641
- padding: 0;
1642
- }
1643
-
1644
- .odt_Radio-module__groupWrapper___9Ykds {
1645
- display: inline-flex;
1646
- flex-direction: column;
1647
- gap: 0.5rem;
1648
- }
1649
-
1650
- .odt_Radio-module__groupLabel___F6fBY {
1651
- font-size: var(--font-size-sm, 0.875rem);
1652
- font-weight: 600;
1653
- color: var(--color-neutral-900);
1654
- line-height: 1.25rem;
1655
- }
1656
-
1657
- .odt_Radio-module__groupDescription___K3bZS {
1658
- font-size: var(--font-size-xs, 0.75rem);
1659
- color: var(--color-neutral-500);
1660
- line-height: 1rem;
1661
- }
1662
-
1663
- .odt_Radio-module__itemsContainer___JGhzd {
1664
- display: flex;
1665
- }
1666
-
1667
- .odt_Radio-module__orientation-vertical___AWmdg {
1668
- flex-direction: column;
1669
- gap: 0.75rem;
1670
- }
1671
-
1672
- .odt_Radio-module__orientation-horizontal___xqfED {
1673
- flex-direction: row;
1674
- flex-wrap: wrap;
1675
- align-items: center;
1676
- gap: 1.25rem;
1677
- }
1678
-
1679
- /* --------------------------------------------------------------------------
1680
- * Radio Item (Borderless & Lightweight)
1681
- * -------------------------------------------------------------------------- */
1682
- .odt_Radio-module__radioContainer___kj5dA {
1683
- display: inline-flex;
1684
- align-items: flex-start;
1685
- gap: var(--spacing-2-5, 0.625rem);
1686
- cursor: pointer;
1687
- user-select: none;
1688
- }
1689
-
1690
- .odt_Radio-module__radio___7-xIv {
1691
- position: relative;
1692
- display: inline-flex;
1693
- align-items: center;
1694
- justify-content: center;
1695
- flex-shrink: 0;
1696
- width: 1.125rem; /* 18px (md) */
1697
- height: 1.125rem;
1698
- border-radius: var(--radius-full, 9999px);
1699
- background-color: var(--color-surface-subtle, #e4e4e9);
1700
- border: none;
1701
- color: #ffffff;
1702
- cursor: pointer;
1703
- padding: 0;
1704
- outline: none;
1705
- box-sizing: border-box;
1706
- transition: background-color 140ms ease, box-shadow 140ms ease, transform 100ms ease;
1707
- margin-top: 0.125rem;
1708
- }
1709
-
1710
- .odt_Radio-module__radio___7-xIv:active:not(:disabled) {
1711
- transform: scale(0.94);
1712
- }
1713
-
1714
- /* --------------------------------------------------------------------------
1715
- * Unchecked Hover per Color Theme
1716
- * -------------------------------------------------------------------------- */
1717
- .odt_Radio-module__color-primary___ht6xk:hover:not(:disabled):not(.odt_Radio-module__checked___RDcfc) {
1718
- background-color: var(--color-primary-50);
1719
- }
1720
- .odt_Radio-module__color-secondary___i3Nqg:hover:not(:disabled):not(.odt_Radio-module__checked___RDcfc) {
1721
- background-color: var(--color-secondary-50);
1722
- }
1723
- .odt_Radio-module__color-success___f--qk:hover:not(:disabled):not(.odt_Radio-module__checked___RDcfc) {
1724
- background-color: var(--color-surface-success);
1725
- }
1726
- .odt_Radio-module__color-warning___4DojD:hover:not(:disabled):not(.odt_Radio-module__checked___RDcfc) {
1727
- background-color: var(--color-surface-warning);
1728
- }
1729
- .odt_Radio-module__color-danger___fl0S8:hover:not(:disabled):not(.odt_Radio-module__checked___RDcfc) {
1730
- background-color: var(--color-surface-danger);
1731
- }
1732
- .odt_Radio-module__color-dark___bIMbD:hover:not(:disabled):not(.odt_Radio-module__checked___RDcfc) {
1733
- background-color: var(--color-surface-subtle);
1734
- }
1735
-
1736
- /* --------------------------------------------------------------------------
1737
- * Focus Rings per Color Theme
1738
- * -------------------------------------------------------------------------- */
1739
- .odt_Radio-module__color-primary___ht6xk:focus-visible {
1740
- box-shadow: 0 0 0 3px hsl(from var(--color-primary-500) h s l / 0.35);
1741
- }
1742
- .odt_Radio-module__color-secondary___i3Nqg:focus-visible {
1743
- box-shadow: 0 0 0 3px hsl(from var(--color-secondary-500) h s l / 0.35);
1744
- }
1745
- .odt_Radio-module__color-success___f--qk:focus-visible {
1746
- box-shadow: 0 0 0 3px hsl(from var(--color-success) h s l / 0.35);
1747
- }
1748
- .odt_Radio-module__color-warning___4DojD:focus-visible {
1749
- box-shadow: 0 0 0 3px hsl(from var(--color-warning) h s l / 0.35);
1750
- }
1751
- .odt_Radio-module__color-danger___fl0S8:focus-visible {
1752
- box-shadow: 0 0 0 3px hsl(from var(--color-danger) h s l / 0.35);
1753
- }
1754
- .odt_Radio-module__color-dark___bIMbD:focus-visible {
1755
- box-shadow: 0 0 0 3px hsl(from var(--color-fg) h s l / 0.25);
1756
- }
1757
-
1758
- /* --------------------------------------------------------------------------
1759
- * Checked States & Colors
1760
- * -------------------------------------------------------------------------- */
1761
- .odt_Radio-module__color-primary___ht6xk.odt_Radio-module__checked___RDcfc {
1762
- background-color: var(--color-primary-500);
1763
- color: #ffffff;
1764
- }
1765
- .odt_Radio-module__color-primary___ht6xk.odt_Radio-module__checked___RDcfc:hover:not(:disabled) {
1766
- background-color: var(--color-primary-600);
1767
- }
1768
-
1769
- .odt_Radio-module__color-secondary___i3Nqg.odt_Radio-module__checked___RDcfc {
1770
- background-color: var(--color-secondary-500);
1771
- color: #18181b;
1772
- }
1773
- .odt_Radio-module__color-secondary___i3Nqg.odt_Radio-module__checked___RDcfc:hover:not(:disabled) {
1774
- background-color: var(--color-secondary-600);
1775
- }
1776
-
1777
- .odt_Radio-module__color-success___f--qk.odt_Radio-module__checked___RDcfc {
1778
- background-color: var(--color-success);
1779
- color: #ffffff;
1780
- }
1781
- .odt_Radio-module__color-success___f--qk.odt_Radio-module__checked___RDcfc:hover:not(:disabled) {
1782
- filter: brightness(0.92);
1783
- }
1784
-
1785
- .odt_Radio-module__color-warning___4DojD.odt_Radio-module__checked___RDcfc {
1786
- background-color: var(--color-warning);
1787
- color: #18181b;
1788
- }
1789
- .odt_Radio-module__color-warning___4DojD.odt_Radio-module__checked___RDcfc:hover:not(:disabled) {
1790
- filter: brightness(0.92);
1791
- }
1792
-
1793
- .odt_Radio-module__color-danger___fl0S8.odt_Radio-module__checked___RDcfc {
1794
- background-color: var(--color-danger);
1795
- color: #ffffff;
1796
- }
1797
- .odt_Radio-module__color-danger___fl0S8.odt_Radio-module__checked___RDcfc:hover:not(:disabled) {
1798
- filter: brightness(0.92);
1799
- }
1800
-
1801
- .odt_Radio-module__color-dark___bIMbD.odt_Radio-module__checked___RDcfc {
1802
- background-color: var(--color-neutral-900);
1803
- color: #ffffff;
1804
- }
1805
- .odt_Radio-module__color-dark___bIMbD.odt_Radio-module__checked___RDcfc:hover:not(:disabled) {
1806
- filter: brightness(1.15);
1807
- }
1808
-
1809
- /* --------------------------------------------------------------------------
1810
- * Dot Indicator
1811
- * -------------------------------------------------------------------------- */
1812
- .odt_Radio-module__dot___zqQyB {
1813
- display: block;
1814
- width: 0.5rem; /* 8px (md) */
1815
- height: 0.5rem;
1816
- border-radius: var(--radius-full, 9999px);
1817
- background-color: currentColor;
1818
- pointer-events: none;
1819
- animation: odt_Radio-module__dotPop___bXNpj 140ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
1820
- }
1821
-
1822
- @keyframes odt_Radio-module__dotPop___bXNpj {
1823
- 0% {
1824
- opacity: 0;
1825
- transform: scale(0);
1826
- }
1827
- 100% {
1828
- opacity: 1;
1829
- transform: scale(1);
1830
- }
1831
- }
1832
-
1833
- /* --------------------------------------------------------------------------
1834
- * Sizes
1835
- * -------------------------------------------------------------------------- */
1836
- .odt_Radio-module__size-sm___sQrtM.odt_Radio-module__radio___7-xIv {
1837
- width: 0.9375rem; /* 15px */
1838
- height: 0.9375rem;
1839
- margin-top: 0.1875rem;
1840
- }
1841
- .odt_Radio-module__size-sm___sQrtM .odt_Radio-module__dot___zqQyB {
1842
- width: 0.375rem; /* 6px */
1843
- height: 0.375rem;
1844
- }
1845
-
1846
- .odt_Radio-module__size-md___JgwTr.odt_Radio-module__radio___7-xIv {
1847
- width: 1.125rem; /* 18px */
1848
- height: 1.125rem;
1849
- margin-top: 0.125rem;
1850
- }
1851
- .odt_Radio-module__size-md___JgwTr .odt_Radio-module__dot___zqQyB {
1852
- width: 0.5rem; /* 8px */
1853
- height: 0.5rem;
1854
- }
1855
-
1856
- .odt_Radio-module__size-lg___ZG4Vh.odt_Radio-module__radio___7-xIv {
1857
- width: 1.375rem; /* 22px */
1858
- height: 1.375rem;
1859
- margin-top: 0.0625rem;
1860
- }
1861
- .odt_Radio-module__size-lg___ZG4Vh .odt_Radio-module__dot___zqQyB {
1862
- width: 0.625rem; /* 10px */
1863
- height: 0.625rem;
1864
- }
1865
-
1866
- /* --------------------------------------------------------------------------
1867
- * Error & Disabled States
1868
- * -------------------------------------------------------------------------- */
1869
- .odt_Radio-module__hasError___vtYDv .odt_Radio-module__radio___7-xIv {
1870
- background-color: var(--color-surface-danger, hsl(0 84% 94%));
1871
- }
1872
- .odt_Radio-module__hasError___vtYDv .odt_Radio-module__radio___7-xIv.odt_Radio-module__checked___RDcfc {
1873
- background-color: var(--color-danger);
1874
- }
1875
- .odt_Radio-module__hasError___vtYDv .odt_Radio-module__radio___7-xIv:focus-visible {
1876
- box-shadow: 0 0 0 3px hsl(0 84% 85%);
1877
- }
1878
-
1879
- .odt_Radio-module__disabled___u1Cm1,
1880
- .odt_Radio-module__radio___7-xIv:disabled {
1881
- opacity: 0.45;
1882
- cursor: not-allowed;
1883
- pointer-events: none;
1884
- }
1885
-
1886
- /* --------------------------------------------------------------------------
1887
- * Labels & Text
1888
- * -------------------------------------------------------------------------- */
1889
- .odt_Radio-module__labelContent___l1yZP {
1890
- display: flex;
1891
- flex-direction: column;
1892
- gap: 0.125rem;
1893
- }
1894
-
1895
- .odt_Radio-module__label___6vnI4 {
1896
- font-size: var(--font-size-sm, 0.875rem);
1897
- color: var(--color-fg);
1898
- font-weight: 500;
1899
- line-height: 1.25rem;
1900
- }
1901
-
1902
- .odt_Radio-module__description___UHeuw {
1903
- font-size: var(--font-size-xs, 0.75rem);
1904
- color: var(--color-fg-muted);
1905
- line-height: 1rem;
1906
- }
1907
-
1908
- .odt_Radio-module__errorMessage___fXtg0 {
1909
- font-size: var(--font-size-xs, 0.75rem);
1910
- color: var(--color-danger);
1911
- line-height: 1rem;
1912
- }
1913
-
1914
- .odt_StatCard-module__statCard___mLkKM {
1915
- box-sizing: border-box;
1916
- background-color: var(--color-surface-elevated, #fff);
1917
- border-radius: var(--radius-2xl, 1rem);
1918
- padding: var(--spacing-6, 1.5rem);
1919
- box-shadow: var(--shadow-card);
1920
- display: flex;
1921
- flex-direction: column;
1922
- gap: var(--spacing-4, 1rem);
1923
- }
1924
-
1925
- .odt_StatCard-module__border-none___h0gKk { border: none; }
1926
- .odt_StatCard-module__border-subtle___oHCYG { border: 1px solid var(--color-line-muted); }
1927
- .odt_StatCard-module__border-muted___5xamx { border: 1px solid var(--color-line-muted); }
1928
- .odt_StatCard-module__border-default___KrXlV { border: 1px solid var(--color-line); }
1929
- .odt_StatCard-module__border-strong___ZESaH { border: 1px solid var(--color-line-strong); }
1930
- .odt_StatCard-module__border-primary___6KnUo { border: 1px solid var(--color-line-primary); }
1931
- .odt_StatCard-module__border-secondary___JsoQ3 { border: 1px solid var(--color-secondary-500); }
1932
- .odt_StatCard-module__border-danger___jz16J { border: 1px solid var(--color-line-danger); }
1933
- .odt_StatCard-module__border-success___qbCLA { border: 1px solid var(--color-line-success); }
1934
-
1935
- .odt_StatCard-module__topRow___qGHee {
1936
- display: flex;
1937
- align-items: center;
1938
- gap: var(--spacing-3, 0.75rem);
1939
- }
1940
-
1941
- .odt_StatCard-module__iconWrapper___vbF2H {
1942
- display: flex;
1943
- align-items: center;
1944
- justify-content: center;
1945
- width: 2.5rem;
1946
- height: 2.5rem;
1947
- border-radius: var(--radius-xl, 0.75rem);
1948
- }
1949
-
1950
- .odt_StatCard-module__iconWrapper___vbF2H.odt_StatCard-module__color-info___iLYzh {
1951
- background-color: var(--color-surface-info);
1952
- color: var(--color-info);
1953
- }
1954
-
1955
- .odt_StatCard-module__iconWrapper___vbF2H.odt_StatCard-module__color-primary___lFRCx {
1956
- background-color: var(--color-primary-50);
1957
- color: var(--color-primary-600);
1958
- }
1959
-
1960
- .odt_StatCard-module__iconWrapper___vbF2H.odt_StatCard-module__color-secondary___Zvnyf {
1961
- background-color: var(--color-secondary-50);
1962
- color: var(--color-secondary-700);
1963
- }
1964
-
1965
- .odt_StatCard-module__iconWrapper___vbF2H.odt_StatCard-module__color-success___M9MIK {
1966
- background-color: var(--color-surface-success);
1967
- color: var(--color-success);
1968
- }
1969
-
1970
- .odt_StatCard-module__iconWrapper___vbF2H.odt_StatCard-module__color-warning___Dotbn {
1971
- background-color: var(--color-surface-warning);
1972
- color: var(--color-warning);
1973
- }
1974
-
1975
- .odt_StatCard-module__iconWrapper___vbF2H.odt_StatCard-module__color-danger___fbytc {
1976
- background-color: var(--color-surface-danger);
1977
- color: var(--color-danger);
1978
- }
1979
-
1980
- .odt_StatCard-module__title___uzThQ {
1981
- font-size: var(--font-size-lg, 1.125rem);
1982
- font-weight: var(--font-weight-semibold, 600);
1983
- color: var(--color-fg-strong);
1984
- margin: 0;
1985
- }
1986
-
1987
- .odt_StatCard-module__valueRow___2O-d3 {
1988
- display: flex;
1989
- align-items: flex-end;
1990
- gap: var(--spacing-2, 0.5rem);
1991
- }
1992
-
1993
- .odt_StatCard-module__value___ybqHR {
1994
- font-size: var(--font-size-4xl, 2.25rem);
1995
- font-weight: var(--font-weight-bold, 700);
1996
- color: var(--color-fg-strong);
1997
- line-height: 1;
1998
- }
1999
-
2000
- .odt_StatCard-module__trend___hyE89 {
2001
- font-size: var(--font-size-sm, 0.875rem);
2002
- font-weight: var(--font-weight-medium, 500);
2003
- margin-bottom: 0.125rem;
2004
- }
2005
-
2006
- .odt_StatCard-module__trend___hyE89.odt_StatCard-module__positive___uSbVm {
2007
- color: var(--color-success);
2008
- }
2009
-
2010
- .odt_StatCard-module__trend___hyE89.odt_StatCard-module__negative___-toBF {
2011
- color: var(--color-danger);
2012
- }
2013
-
2014
- .odt_StatCard-module__trend___hyE89.odt_StatCard-module__neutral___qMfgR {
2015
- color: var(--color-fg-muted);
2016
- }
2017
-
2018
- /* ==========================================================================
2019
- * ProgressBar
2020
- * ========================================================================== */
2021
- .odt_StatCard-module__progressTrack___TUDUq {
2022
- width: 100%;
2023
- background-color: var(--color-surface-muted);
2024
- border-radius: var(--radius-full, 9999px);
2025
- overflow: hidden;
2026
- box-sizing: border-box;
2027
- }
2028
-
2029
- .odt_StatCard-module__progressBar___IrQAM {
2030
- height: 100%;
2031
- border-radius: var(--radius-full, 9999px);
2032
- transition: width 0.3s ease;
2033
- }
2034
-
2035
- .odt_StatCard-module__track-size-sm___dkUV- {
2036
- height: 0.375rem; /* 6px */
2037
- }
2038
-
2039
- .odt_StatCard-module__track-size-md___ehhst {
2040
- height: 0.5rem; /* 8px */
2041
- }
2042
-
2043
- .odt_StatCard-module__track-size-lg___x5f1o {
2044
- height: 0.75rem; /* 12px */
2045
- }
2046
-
2047
- .odt_StatCard-module__bar-color-primary___-WjuG {
2048
- background-color: var(--color-primary-500);
2049
- }
2050
-
2051
- .odt_StatCard-module__bar-color-secondary___e4nm6 {
2052
- background-color: var(--color-secondary-500);
2053
- }
2054
-
2055
- .odt_StatCard-module__bar-color-info___ecplg {
2056
- background-color: var(--color-info);
2057
- }
2058
-
2059
- .odt_StatCard-module__bar-color-success___XhPc1 {
2060
- background-color: var(--color-success);
2061
- }
2062
-
2063
- .odt_StatCard-module__bar-color-warning___gY4Qh {
2064
- background-color: var(--color-warning);
2065
- }
2066
-
2067
- .odt_StatCard-module__bar-color-danger___Y6bll {
2068
- background-color: var(--color-danger);
2069
- }
2070
-
2071
- /* ==========================================================================
2072
- * Toast Container & Stacking Viewport
2073
- * ========================================================================== */
2074
- .odt_Toast-module__toaster___NG3fc {
2075
- position: fixed;
2076
- z-index: 9999;
2077
- box-sizing: border-box;
2078
- font-family: inherit;
2079
- width: 100%;
2080
- max-width: 24rem; /* 384px */
2081
- padding: var(--spacing-4, 1rem);
2082
- pointer-events: none;
2083
- }
2084
-
2085
- .odt_Toast-module__inline___rf1TP {
2086
- position: absolute !important;
2087
- }
2088
-
2089
- /* Positions */
2090
- .odt_Toast-module__pos-top-right___3LTPj {
2091
- top: 0;
2092
- right: 0;
2093
- }
2094
-
2095
- .odt_Toast-module__pos-top-center___-7FYI {
2096
- top: 0;
2097
- left: 50%;
2098
- transform: translateX(-50%);
2099
- }
2100
-
2101
- .odt_Toast-module__pos-top-left___27V-S {
2102
- top: 0;
2103
- left: 0;
2104
- }
2105
-
2106
- .odt_Toast-module__pos-bottom-right___S1Ta9 {
2107
- bottom: 0;
2108
- right: 0;
2109
- }
2110
-
2111
- .odt_Toast-module__pos-bottom-center___hhq4v {
2112
- bottom: 0;
2113
- left: 50%;
2114
- transform: translateX(-50%);
2115
- }
2116
-
2117
- .odt_Toast-module__pos-bottom-left___n9AM0 {
2118
- bottom: 0;
2119
- left: 0;
2120
- }
2121
-
2122
- /* Wrapper list */
2123
- .odt_Toast-module__toastList___cck6Y {
2124
- position: relative;
2125
- width: 100%;
2126
- height: 100%;
2127
- min-height: 4.5rem;
2128
- pointer-events: none;
2129
- }
2130
-
2131
- /* ==========================================================================
2132
- * Toast Item Card & Transitions
2133
- * ========================================================================== */
2134
- .odt_Toast-module__toast___NX87H {
2135
- position: absolute;
2136
- left: 0;
2137
- right: 0;
2138
- width: 100%;
2139
- box-sizing: border-box;
2140
- display: flex;
2141
- align-items: flex-start;
2142
- gap: var(--spacing-3, 0.75rem);
2143
- padding: var(--spacing-4, 1rem);
2144
- background-color: var(--color-surface-elevated, #ffffff);
2145
- color: var(--color-fg);
2146
- border-radius: var(--radius-2xl, 1rem);
2147
- box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.07), 0 2px 6px -2px rgba(0, 0, 0, 0.03);
2148
- border: none;
2149
- pointer-events: auto;
2150
- user-select: none;
2151
- font-family: inherit;
2152
- transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
2153
- opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
2154
- box-shadow 0.25s ease;
2155
- will-change: transform, opacity;
2156
- overflow: hidden;
2157
- }
2158
-
2159
- .odt_Toast-module__pos-top-right___3LTPj .odt_Toast-module__toast___NX87H,
2160
- .odt_Toast-module__pos-top-center___-7FYI .odt_Toast-module__toast___NX87H,
2161
- .odt_Toast-module__pos-top-left___27V-S .odt_Toast-module__toast___NX87H {
2162
- top: 0;
2163
- bottom: auto;
2164
- transform-origin: top center;
2165
- }
2166
-
2167
- .odt_Toast-module__pos-bottom-right___S1Ta9 .odt_Toast-module__toast___NX87H,
2168
- .odt_Toast-module__pos-bottom-center___hhq4v .odt_Toast-module__toast___NX87H,
2169
- .odt_Toast-module__pos-bottom-left___n9AM0 .odt_Toast-module__toast___NX87H {
2170
- bottom: 0;
2171
- top: auto;
2172
- transform-origin: bottom center;
2173
- }
2174
-
2175
- /* Frosted glass variant */
2176
- .odt_Toast-module__variant-frosted___dLAtk {
2177
- background-color: var(--frosted-surface-bg, rgba(255, 255, 255, 0.70));
2178
- backdrop-filter: blur(16px);
2179
- -webkit-backdrop-filter: blur(16px);
2180
- border: none;
2181
- box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.05), 0 2px 6px -2px rgba(0, 0, 0, 0.02);
2182
- }
2183
-
2184
- .odt_Toast-module__variant-subtle___gvlj6 {
2185
- background-color: var(--color-surface-subtle);
2186
- border: none;
2187
- box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.05);
2188
- }
2189
-
2190
- .odt_Toast-module__variant-outlined___YN7Wm {
2191
- background-color: var(--color-surface);
2192
- border: 1px solid var(--color-line-muted);
2193
- box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.04);
2194
- }
2195
-
2196
- /* ==========================================================================
2197
- * Rich Color Tints
2198
- * ========================================================================== */
2199
- .odt_Toast-module__richColor-success___Y0JSb {
2200
- background-color: hsl(142 71% 96%);
2201
- border-color: hsl(142 71% 85%);
2202
- }
2203
-
2204
- .odt_Toast-module__richColor-error___zJQ6I {
2205
- background-color: hsl(0 84% 97%);
2206
- border-color: hsl(0 84% 88%);
2207
- }
2208
-
2209
- .odt_Toast-module__richColor-warning___-9yCF {
2210
- background-color: hsl(38 92% 96%);
2211
- border-color: hsl(38 92% 85%);
2212
- }
2213
-
2214
- .odt_Toast-module__richColor-info___4ZdFh {
2215
- background-color: hsl(217 91% 97%);
2216
- border-color: hsl(217 91% 88%);
2217
- }
2218
-
2219
- /* ==========================================================================
2220
- * Toast Content Elements
2221
- * ========================================================================== */
2222
- .odt_Toast-module__iconWrapper___lHqFE {
2223
- display: flex;
2224
- align-items: center;
2225
- justify-content: center;
2226
- width: 1.375rem;
2227
- height: 1.375rem;
2228
- flex-shrink: 0;
2229
- }
2230
-
2231
- .odt_Toast-module__icon-success___KXgq4 { color: var(--color-success, #16a34a); }
2232
- .odt_Toast-module__icon-error___vfYEB { color: var(--color-danger, #dc2626); }
2233
- .odt_Toast-module__icon-warning___sM0m3 { color: var(--color-warning, #d97706); }
2234
- .odt_Toast-module__icon-info___osLC7 { color: var(--color-info, #2563eb); }
2235
- .odt_Toast-module__icon-loading___hLFmG {
2236
- color: var(--color-primary-500, #3b82f6);
2237
- animation: odt_Toast-module__spin___5KvoN 0.8s linear infinite;
2238
- }
2239
-
2240
- @keyframes odt_Toast-module__spin___5KvoN {
2241
- from { transform: rotate(0deg); }
2242
- to { transform: rotate(360deg); }
2243
- }
2244
-
2245
- .odt_Toast-module__contentWrapper___4BAQt {
2246
- display: flex;
2247
- flex-direction: column;
2248
- gap: var(--spacing-0-5, 0.125rem);
2249
- flex: 1;
2250
- min-width: 0;
2251
- }
2252
-
2253
- .odt_Toast-module__title___mFZ1R {
2254
- font-size: var(--font-size-sm, 0.875rem);
2255
- font-weight: var(--font-weight-semibold, 600);
2256
- color: var(--color-fg-strong);
2257
- line-height: 1.35;
2258
- margin: 0;
2259
- }
2260
-
2261
- .odt_Toast-module__description___VMHqo {
2262
- font-size: var(--font-size-xs, 0.75rem);
2263
- color: var(--color-fg-muted);
2264
- line-height: 1.4;
2265
- margin: 0;
2266
- }
2267
-
2268
- .odt_Toast-module__actionsWrapper___pAJRu {
2269
- display: flex;
2270
- align-items: center;
2271
- gap: var(--spacing-2, 0.5rem);
2272
- margin-top: var(--spacing-2, 0.5rem);
2273
- }
2274
-
2275
- .odt_Toast-module__actionButton___ffsfr {
2276
- padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
2277
- font-size: var(--font-size-xs, 0.75rem);
2278
- font-weight: var(--font-weight-medium, 500);
2279
- border-radius: var(--radius-full, 9999px);
2280
- border: 1px solid var(--color-line-muted);
2281
- background-color: var(--color-surface-subtle);
2282
- color: var(--color-fg-strong);
2283
- cursor: pointer;
2284
- transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
2285
- }
2286
-
2287
- .odt_Toast-module__actionButton___ffsfr:hover {
2288
- background-color: var(--color-surface-muted);
2289
- border-color: var(--color-line);
2290
- }
2291
-
2292
- .odt_Toast-module__actionButton___ffsfr:active {
2293
- transform: scale(0.95);
2294
- }
2295
-
2296
- .odt_Toast-module__closeButton___GbbBX {
2297
- display: inline-flex;
2298
- align-items: center;
2299
- justify-content: center;
2300
- width: 1.5rem;
2301
- height: 1.5rem;
2302
- padding: 0;
2303
- border-radius: var(--radius-md, 0.375rem);
2304
- border: none;
2305
- background: transparent;
2306
- color: var(--color-fg-muted);
2307
- cursor: pointer;
2308
- flex-shrink: 0;
2309
- margin-left: auto;
2310
- transition: background-color 0.15s ease, color 0.15s ease;
2311
- }
2312
-
2313
- .odt_Toast-module__closeButton___GbbBX:hover {
2314
- background-color: var(--color-surface-subtle);
2315
- color: var(--color-fg-strong);
2316
- }
2317
-
2318
- /* Radius Modifiers */
2319
- .odt_Toast-module__radius-none___ofIHI { border-radius: var(--radius-none, 0px); }
2320
- .odt_Toast-module__radius-xs___32KAi { border-radius: var(--radius-xs, 0.125rem); }
2321
- .odt_Toast-module__radius-sm___rq5Df { border-radius: var(--radius-sm, 0.25rem); }
2322
- .odt_Toast-module__radius-md___y-Ghy { border-radius: var(--radius-md, 0.375rem); }
2323
- .odt_Toast-module__radius-lg___HVXo1 { border-radius: var(--radius-lg, 0.5rem); }
2324
- .odt_Toast-module__radius-xl___t5DeL { border-radius: var(--radius-xl, 0.75rem); }
2325
- .odt_Toast-module__radius-2xl___qowH8 { border-radius: var(--radius-2xl, 1rem); }
2326
- .odt_Toast-module__radius-3xl___epZo4 { border-radius: var(--radius-3xl, 1.5rem); }
2327
- .odt_Toast-module__radius-4xl___XD0hU { border-radius: var(--radius-4xl, 2rem); }
2328
- .odt_Toast-module__radius-full___GDIHe { border-radius: var(--radius-full, 9999px); }
2329
-
2330
- /* ==========================================================================
2331
- * Modal Keyframe Animations (In / Out)
2332
- * ========================================================================== */
2333
- @keyframes odt_Modal-module__overlayFadeIn___x6qF5 {
2334
- from {
2335
- opacity: 0;
2336
- }
2337
- to {
2338
- opacity: 1;
2339
- }
2340
- }
2341
-
2342
- @keyframes odt_Modal-module__overlayFadeOut___y7To8 {
2343
- from {
2344
- opacity: 1;
2345
- }
2346
- to {
2347
- opacity: 0;
2348
- }
2349
- }
2350
-
2351
- @keyframes odt_Modal-module__modalScaleIn___c4oFv {
2352
- from {
2353
- opacity: 0;
2354
- transform: scale(0.94) translateY(10px);
2355
- }
2356
- to {
2357
- opacity: 1;
2358
- transform: scale(1) translateY(0);
2359
- }
2360
- }
2361
-
2362
- @keyframes odt_Modal-module__modalScaleOut___Xfjsd {
2363
- from {
2364
- opacity: 1;
2365
- transform: scale(1) translateY(0);
2366
- }
2367
- to {
2368
- opacity: 0;
2369
- transform: scale(0.96) translateY(6px);
2370
- }
2371
- }
2372
-
2373
- /* ==========================================================================
2374
- * Backdrop Overlay
2375
- * ========================================================================== */
2376
- .odt_Modal-module__overlay___DNxNa {
2377
- position: fixed;
2378
- inset: 0;
2379
- z-index: 1000;
2380
- display: flex;
2381
- justify-content: center;
2382
- align-items: center;
2383
- padding: var(--spacing-4, 1rem);
2384
- background-color: var(--color-overlay-backdrop, rgba(0, 0, 0, 0.6));
2385
- overflow-y: auto;
2386
- box-sizing: border-box;
2387
- font-family: inherit;
2388
- animation: odt_Modal-module__overlayFadeIn___x6qF5 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
2389
- }
2390
-
2391
- .odt_Modal-module__overlay___DNxNa.odt_Modal-module__exiting___8BSt8 {
2392
- animation: odt_Modal-module__overlayFadeOut___y7To8 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
2393
- pointer-events: none;
2394
- }
2395
-
2396
- .odt_Modal-module__notCentered___0O8Rs {
2397
- align-items: flex-start;
2398
- padding-top: var(--spacing-16, 4rem);
2399
- }
2400
-
2401
- /* ==========================================================================
2402
- * Modal Content Box
2403
- * ========================================================================== */
2404
- .odt_Modal-module__content___F8Ef- {
2405
- position: relative;
2406
- width: 100%;
2407
- box-sizing: border-box;
2408
- font-family: inherit;
2409
- background-color: var(--color-surface-elevated, #ffffff);
2410
- color: var(--color-fg);
2411
- border-radius: var(--radius-2xl, 1rem);
2412
- box-shadow: var(--shadow-modal);
2413
- border: 1px solid var(--color-line-muted, rgba(226, 232, 240, 0.8));
2414
- display: flex;
2415
- flex-direction: column;
2416
- outline: none;
2417
- animation: odt_Modal-module__modalScaleIn___c4oFv 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
2418
- margin: auto 0;
2419
- }
2420
-
2421
- .odt_Modal-module__content___F8Ef-.odt_Modal-module__exiting___8BSt8 {
2422
- animation: odt_Modal-module__modalScaleOut___Xfjsd 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
2423
- }
2424
-
2425
- /* Modal Sizes */
2426
- .odt_Modal-module__size-sm___c9tO4 {
2427
- max-width: 24rem; /* 384px */
2428
- }
2429
-
2430
- .odt_Modal-module__size-md___LRJal {
2431
- max-width: 32rem; /* 512px */
2432
- }
2433
-
2434
- .odt_Modal-module__size-lg___6uBYd {
2435
- max-width: 42rem; /* 672px */
2436
- }
2437
-
2438
- .odt_Modal-module__size-xl___BtfjD {
2439
- max-width: 56rem; /* 896px */
2440
- }
2441
-
2442
- .odt_Modal-module__size-full___gHBvE {
2443
- max-width: calc(100vw - 2rem);
2444
- min-height: calc(100vh - 3rem);
2445
- }
2446
-
2447
- /* Radius Modifiers */
2448
- .odt_Modal-module__radius-none___XCp9g { border-radius: var(--radius-none, 0px); }
2449
- .odt_Modal-module__radius-xs___vAlgg { border-radius: var(--radius-xs, 0.125rem); }
2450
- .odt_Modal-module__radius-sm___PA8W2 { border-radius: var(--radius-sm, 0.25rem); }
2451
- .odt_Modal-module__radius-md___xh-v1 { border-radius: var(--radius-md, 0.375rem); }
2452
- .odt_Modal-module__radius-lg___--gOc { border-radius: var(--radius-lg, 0.5rem); }
2453
- .odt_Modal-module__radius-xl___NndRS { border-radius: var(--radius-xl, 0.75rem); }
2454
- .odt_Modal-module__radius-2xl___9BnU7 { border-radius: var(--radius-2xl, 1rem); }
2455
- .odt_Modal-module__radius-3xl___Ywkhf { border-radius: var(--radius-3xl, 1.5rem); }
2456
- .odt_Modal-module__radius-4xl___wOqpZ { border-radius: var(--radius-4xl, 2rem); }
2457
- .odt_Modal-module__radius-full___x-qFH { border-radius: var(--radius-full, 9999px); }
2458
-
2459
- /* ==========================================================================
2460
- * Subcomponents (Header, Title, Body, Footer)
2461
- * ========================================================================== */
2462
- .odt_Modal-module__header___oNRKC {
2463
- display: flex;
2464
- align-items: flex-start;
2465
- justify-content: space-between;
2466
- padding: var(--spacing-6, 1.5rem) var(--spacing-6, 1.5rem) var(--spacing-2, 0.5rem);
2467
- gap: var(--spacing-3, 0.75rem);
2468
- }
2469
-
2470
- .odt_Modal-module__headerContent___Qf5aL {
2471
- display: flex;
2472
- flex-direction: column;
2473
- gap: var(--spacing-1, 0.25rem);
2474
- flex: 1;
2475
- }
2476
-
2477
- .odt_Modal-module__title___ueDzd {
2478
- font-family: inherit;
2479
- font-size: var(--font-size-xl, 1.25rem);
2480
- font-weight: var(--font-weight-bold, 700);
2481
- color: var(--color-fg-strong);
2482
- margin: 0;
2483
- }
2484
-
2485
- .odt_Modal-module__description___ayE0L {
2486
- font-family: inherit;
2487
- font-size: var(--font-size-sm, 0.875rem);
2488
- color: var(--color-fg-muted);
2489
- margin: 0;
2490
- }
2491
-
2492
- .odt_Modal-module__body___efFIt {
2493
- font-family: inherit;
2494
- padding: var(--spacing-2, 0.5rem) var(--spacing-6, 1.5rem) var(--spacing-6, 1.5rem);
2495
- font-size: var(--font-size-base, 1rem);
2496
- line-height: var(--line-height-normal, 1.5);
2497
- color: var(--color-fg);
2498
- overflow-y: auto;
2499
- max-height: 70vh;
2500
- }
2501
-
2502
- .odt_Modal-module__footer___CAiAe {
2503
- font-family: inherit;
2504
- display: flex;
2505
- align-items: center;
2506
- justify-content: flex-end;
2507
- gap: var(--spacing-3, 0.75rem);
2508
- padding: var(--spacing-2, 0.5rem) var(--spacing-6, 1.5rem) var(--spacing-6, 1.5rem);
2509
- border-bottom-left-radius: inherit;
2510
- border-bottom-right-radius: inherit;
2511
- }
2512
-
2513
- /* Close button in header */
2514
- .odt_Modal-module__closeButton___UElRr {
2515
- display: inline-flex;
2516
- align-items: center;
2517
- justify-content: center;
2518
- width: 2rem;
2519
- height: 2rem;
2520
- padding: 0;
2521
- border-radius: var(--radius-lg, 0.5rem);
2522
- border: none;
2523
- background: transparent;
2524
- color: var(--color-fg-muted);
2525
- cursor: pointer;
2526
- transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
2527
- flex-shrink: 0;
2528
- margin-left: auto;
2529
- }
2530
-
2531
- .odt_Modal-module__closeButton___UElRr:hover {
2532
- background-color: var(--color-surface-subtle);
2533
- color: var(--color-fg-strong);
2534
- }
2535
-
2536
- .odt_Modal-module__closeButton___UElRr:active {
2537
- transform: scale(0.94);
2538
- }
2539
-
2540
- .odt_Modal-module__closeButton___UElRr:focus-visible {
2541
- outline: 2px solid var(--color-ring);
2542
- outline-offset: 2px;
2543
- }
2544
-
2545
- /* Base Button */
2546
- .odt_Button-module__button___iSBxU {
2547
- display: inline-flex;
2548
- align-items: center;
2549
- justify-content: center;
2550
- gap: var(--spacing-2, 0.5rem);
2551
- font-weight: var(--font-weight-medium, 500);
2552
- line-height: var(--line-height-tight, 1.25);
2553
- border: 1px solid transparent;
2554
- border-radius: var(--radius-xl, 0.75rem);
2555
- cursor: pointer;
2556
- text-decoration: none;
2557
- white-space: nowrap;
2558
- user-select: none;
2559
- transition: all 0.15s ease-in-out;
2560
- outline: none;
2561
- position: relative;
2562
- box-sizing: border-box;
2563
- }
2564
-
2565
- .odt_Button-module__button___iSBxU:focus-visible {
2566
- box-shadow: 0 0 0 3px var(--color-primary-200), var(--shadow-card);
2567
- }
2568
-
2569
- /* ==========================================================================
2570
- * Sizes
2571
- * ========================================================================== */
2572
- .odt_Button-module__size-sm___yAWeo {
2573
- padding: 0.375rem 0.875rem;
2574
- font-size: var(--font-size-xs, 0.75rem);
2575
- border-radius: var(--radius-lg, 0.5rem);
2576
- }
2577
-
2578
- .odt_Button-module__size-md___D-Hm0 {
2579
- padding: 0.625rem 1.25rem;
2580
- font-size: var(--font-size-sm, 0.875rem);
2581
- border-radius: var(--radius-xl, 0.75rem);
2582
- }
2583
-
2584
- .odt_Button-module__size-lg___tGvYj {
2585
- padding: 0.75rem 1.75rem;
2586
- font-size: var(--font-size-base, 1rem);
2587
- border-radius: var(--radius-2xl, 1rem);
2588
- }
2589
-
2590
- /* ==========================================================================
2591
- * Variants & Colors - Filled
2592
- * ========================================================================== */
2593
- .odt_Button-module__variant-filled___wkrrh {
2594
- box-shadow: var(--shadow-card);
2595
- }
2596
-
2597
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-primary___2xXqD {
2598
- background-color: var(--color-primary-500);
2599
- color: #ffffff;
2600
- }
2601
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-primary___2xXqD:hover:not(:disabled) {
2602
- background-color: var(--color-primary-600);
2603
- }
2604
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-primary___2xXqD:active:not(:disabled) {
2605
- background-color: var(--color-primary-700);
2606
- }
2607
-
2608
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-secondary___QePd2 {
2609
- background-color: var(--color-secondary-500);
2610
- color: #18181b;
2611
- }
2612
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-secondary___QePd2:hover:not(:disabled) {
2613
- background-color: var(--color-secondary-400);
2614
- }
2615
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-secondary___QePd2:active:not(:disabled) {
2616
- background-color: var(--color-secondary-600);
2617
- }
2618
-
2619
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-dark___unZBB {
2620
- background-color: var(--color-neutral-900);
2621
- color: #ffffff;
2622
- }
2623
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-dark___unZBB:hover:not(:disabled) {
2624
- background-color: var(--color-neutral-800);
2625
- }
2626
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-dark___unZBB:active:not(:disabled) {
2627
- background-color: var(--color-neutral-950);
2628
- }
2629
-
2630
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-white___-qTgx {
2631
- background-color: var(--color-surface);
2632
- color: var(--color-fg);
2633
- }
2634
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-white___-qTgx:hover:not(:disabled) {
2635
- background-color: var(--color-surface-muted);
2636
- }
2637
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-white___-qTgx:active:not(:disabled) {
2638
- background-color: var(--color-surface-subtle);
2639
- }
2640
-
2641
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-light___U-o6z {
2642
- background-color: var(--color-surface-muted);
2643
- color: var(--color-fg);
2644
- }
2645
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-light___U-o6z:hover:not(:disabled) {
2646
- background-color: var(--color-surface-subtle);
2647
- }
2648
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-light___U-o6z:active:not(:disabled) {
2649
- background-color: var(--color-surface);
2650
- }
2651
-
2652
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-danger___U0Bo1 {
2653
- background-color: var(--color-danger);
2654
- color: #ffffff;
2655
- }
2656
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-danger___U0Bo1:hover:not(:disabled) {
2657
- opacity: 0.9;
2658
- }
2659
- .odt_Button-module__variant-filled___wkrrh.odt_Button-module__color-danger___U0Bo1:active:not(:disabled) {
2660
- opacity: 0.8;
2661
- }
2662
-
2663
- /* ==========================================================================
2664
- * Variants & Colors - Frosted (Glassmorphism)
2665
- * ========================================================================== */
2666
- .odt_Button-module__variant-frosted___Vk1O0 {
2667
- backdrop-filter: blur(16px);
2668
- -webkit-backdrop-filter: blur(16px);
2669
- border: none;
2670
- box-shadow: var(--shadow-card);
2671
- }
2672
-
2673
- .odt_Button-module__variant-frosted___Vk1O0.odt_Button-module__color-primary___2xXqD {
2674
- background-color: hsl(from var(--color-primary-500) h s l / 0.85);
2675
- color: #ffffff;
2676
- border: none;
2677
- }
2678
- .odt_Button-module__variant-frosted___Vk1O0.odt_Button-module__color-primary___2xXqD:hover:not(:disabled) {
2679
- background-color: hsl(from var(--color-primary-500) h s l / 0.95);
2680
- }
2681
- .odt_Button-module__variant-frosted___Vk1O0.odt_Button-module__color-primary___2xXqD:active:not(:disabled) {
2682
- background-color: var(--color-primary-500);
2683
- }
2684
-
2685
- .odt_Button-module__variant-frosted___Vk1O0.odt_Button-module__color-secondary___QePd2 {
2686
- background-color: hsl(from var(--color-secondary-500) h s l / 0.85);
2687
- color: #18181b;
2688
- border: none;
2689
- }
2690
- .odt_Button-module__variant-frosted___Vk1O0.odt_Button-module__color-secondary___QePd2:hover:not(:disabled) {
2691
- background-color: hsl(from var(--color-secondary-500) h s l / 0.95);
2692
- }
2693
- .odt_Button-module__variant-frosted___Vk1O0.odt_Button-module__color-secondary___QePd2:active:not(:disabled) {
2694
- background-color: var(--color-secondary-500);
2695
- }
2696
-
2697
- .odt_Button-module__variant-frosted___Vk1O0.odt_Button-module__color-dark___unZBB {
2698
- background-color: hsl(from var(--color-neutral-900) h s l / 0.85);
2699
- color: #ffffff;
2700
- border: none;
2701
- }
2702
- .odt_Button-module__variant-frosted___Vk1O0.odt_Button-module__color-dark___unZBB:hover:not(:disabled) {
2703
- background-color: hsl(from var(--color-neutral-900) h s l / 0.95);
2704
- }
2705
- .odt_Button-module__variant-frosted___Vk1O0.odt_Button-module__color-dark___unZBB:active:not(:disabled) {
2706
- background-color: var(--color-neutral-900);
2707
- }
2708
-
2709
- .odt_Button-module__variant-frosted___Vk1O0.odt_Button-module__color-white___-qTgx {
2710
- background-color: hsl(from var(--color-surface) h s l / 0.85);
2711
- color: var(--color-fg);
2712
- border: none;
2713
- }
2714
- .odt_Button-module__variant-frosted___Vk1O0.odt_Button-module__color-white___-qTgx:hover:not(:disabled) {
2715
- background-color: hsl(from var(--color-surface-muted) h s l / 0.95);
2716
- }
2717
- .odt_Button-module__variant-frosted___Vk1O0.odt_Button-module__color-white___-qTgx:active:not(:disabled) {
2718
- background-color: var(--color-surface);
2719
- }
2720
-
2721
- .odt_Button-module__variant-frosted___Vk1O0.odt_Button-module__color-light___U-o6z {
2722
- background-color: hsl(from var(--color-surface-muted) h s l / 0.85);
2723
- color: var(--color-fg);
2724
- border: none;
2725
- }
2726
- .odt_Button-module__variant-frosted___Vk1O0.odt_Button-module__color-light___U-o6z:hover:not(:disabled) {
2727
- background-color: hsl(from var(--color-surface-muted) h s l / 0.95);
2728
- }
2729
-
2730
- .odt_Button-module__variant-frosted___Vk1O0.odt_Button-module__color-danger___U0Bo1 {
2731
- background-color: hsl(from var(--color-danger) h s l / 0.85);
2732
- color: #ffffff;
2733
- border: none;
2734
- }
2735
- .odt_Button-module__variant-frosted___Vk1O0.odt_Button-module__color-danger___U0Bo1:hover:not(:disabled) {
2736
- background-color: hsl(from var(--color-danger) h s l / 0.95);
2737
- }
2738
-
2739
- /* ==========================================================================
2740
- * Variants - Capsule
2741
- * ========================================================================== */
2742
- .odt_Button-module__variant-capsule___1FP4d {
2743
- border-radius: var(--radius-full, 9999px) !important;
2744
- box-shadow: var(--shadow-card);
2745
- }
2746
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__size-sm___yAWeo {
2747
- padding: 0.375rem 1.125rem;
2748
- }
2749
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__size-md___D-Hm0 {
2750
- padding: 0.625rem 1.5rem;
2751
- }
2752
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__size-lg___tGvYj {
2753
- padding: 0.75rem 2rem;
2754
- }
2755
-
2756
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-primary___2xXqD {
2757
- background-color: var(--color-primary-500);
2758
- color: #ffffff;
2759
- }
2760
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-primary___2xXqD:hover:not(:disabled) {
2761
- background-color: var(--color-primary-600);
2762
- }
2763
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-primary___2xXqD:active:not(:disabled) {
2764
- background-color: var(--color-primary-700);
2765
- }
2766
-
2767
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-secondary___QePd2 {
2768
- background-color: var(--color-secondary-500);
2769
- color: #18181b;
2770
- }
2771
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-secondary___QePd2:hover:not(:disabled) {
2772
- background-color: var(--color-secondary-400);
2773
- }
2774
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-secondary___QePd2:active:not(:disabled) {
2775
- background-color: var(--color-secondary-600);
2776
- }
2777
-
2778
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-dark___unZBB {
2779
- background-color: var(--color-neutral-900);
2780
- color: #ffffff;
2781
- }
2782
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-dark___unZBB:hover:not(:disabled) {
2783
- background-color: var(--color-neutral-800);
2784
- }
2785
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-dark___unZBB:active:not(:disabled) {
2786
- background-color: var(--color-neutral-950);
2787
- }
2788
-
2789
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-white___-qTgx {
2790
- background-color: var(--color-surface);
2791
- color: var(--color-fg);
2792
- }
2793
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-white___-qTgx:hover:not(:disabled) {
2794
- background-color: var(--color-surface-muted);
2795
- }
2796
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-white___-qTgx:active:not(:disabled) {
2797
- background-color: var(--color-surface-subtle);
2798
- }
2799
-
2800
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-light___U-o6z {
2801
- background-color: var(--color-surface-muted);
2802
- color: var(--color-fg);
2803
- }
2804
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-light___U-o6z:hover:not(:disabled) {
2805
- background-color: var(--color-surface-subtle);
2806
- }
2807
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-light___U-o6z:active:not(:disabled) {
2808
- background-color: var(--color-surface);
2809
- }
2810
-
2811
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-danger___U0Bo1 {
2812
- background-color: var(--color-danger);
2813
- color: #ffffff;
2814
- }
2815
- .odt_Button-module__variant-capsule___1FP4d.odt_Button-module__color-danger___U0Bo1:hover:not(:disabled) {
2816
- opacity: 0.9;
2817
- }
2818
-
2819
- /* ==========================================================================
2820
- * Variants - Ghost
2821
- * ========================================================================== */
2822
- .odt_Button-module__variant-ghost___hHoKX {
2823
- background-color: transparent;
2824
- box-shadow: none;
2825
- }
2826
-
2827
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-primary___2xXqD {
2828
- color: var(--color-fg-primary);
2829
- }
2830
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-primary___2xXqD:hover:not(:disabled) {
2831
- background-color: var(--color-primary-50);
2832
- }
2833
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-primary___2xXqD:active:not(:disabled) {
2834
- background-color: var(--color-primary-100);
580
+ .odt-alert--success {
581
+ background-color: var(--color-surface-success);
582
+ color: var(--color-fg-success);
583
+ border-color: hsl(142 71% 85%);
2835
584
  }
2836
585
 
2837
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-secondary___QePd2,
2838
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-white___-qTgx,
2839
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-light___U-o6z,
2840
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-dark___unZBB {
2841
- color: var(--color-fg);
2842
- }
2843
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-secondary___QePd2:hover:not(:disabled),
2844
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-white___-qTgx:hover:not(:disabled),
2845
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-light___U-o6z:hover:not(:disabled),
2846
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-dark___unZBB:hover:not(:disabled) {
2847
- background-color: var(--color-surface-muted);
2848
- }
2849
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-secondary___QePd2:active:not(:disabled),
2850
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-white___-qTgx:active:not(:disabled),
2851
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-light___U-o6z:active:not(:disabled),
2852
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-dark___unZBB:active:not(:disabled) {
2853
- background-color: var(--color-surface-subtle);
586
+ .odt-alert--warning {
587
+ background-color: var(--color-surface-warning);
588
+ color: var(--color-fg-warning);
589
+ border-color: hsl(38 92% 85%);
2854
590
  }
2855
591
 
2856
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-danger___U0Bo1 {
2857
- color: var(--color-danger);
2858
- }
2859
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-danger___U0Bo1:hover:not(:disabled) {
2860
- background-color: var(--color-surface-danger);
2861
- }
2862
- .odt_Button-module__variant-ghost___hHoKX.odt_Button-module__color-danger___U0Bo1:active:not(:disabled) {
592
+ .odt-alert--danger {
2863
593
  background-color: var(--color-surface-danger);
594
+ color: var(--color-fg-danger);
595
+ border-color: hsl(0 84% 90%);
2864
596
  }
2865
597
 
2866
- /* ==========================================================================
2867
- * Radius Scale Overrides
2868
- * ========================================================================== */
2869
- .odt_Button-module__radius-none___OsZT- { border-radius: var(--radius-none, 0) !important; }
2870
- .odt_Button-module__radius-xs___4I0yu { border-radius: var(--radius-xs) !important; }
2871
- .odt_Button-module__radius-sm___dgbSo { border-radius: var(--radius-sm) !important; }
2872
- .odt_Button-module__radius-md___spuqh { border-radius: var(--radius-md) !important; }
2873
- .odt_Button-module__radius-lg___gcof- { border-radius: var(--radius-lg) !important; }
2874
- .odt_Button-module__radius-xl___enZKe { border-radius: var(--radius-xl) !important; }
2875
- .odt_Button-module__radius-2xl___5sW7j { border-radius: var(--radius-2xl) !important; }
2876
- .odt_Button-module__radius-3xl___hg3WR { border-radius: var(--radius-3xl) !important; }
2877
- .odt_Button-module__radius-4xl___CrMxf { border-radius: var(--radius-4xl) !important; }
2878
- .odt_Button-module__radius-full___f1lIA { border-radius: var(--radius-full) !important; }
2879
-
2880
- /* ==========================================================================
2881
- * Shadow Scale Overrides
2882
- * ========================================================================== */
2883
- .odt_Button-module__shadow-none___58poB { box-shadow: none !important; }
2884
- .odt_Button-module__shadow-card___Sgbpu { box-shadow: var(--shadow-card) !important; }
2885
- .odt_Button-module__shadow-dropdown___iCKVE { box-shadow: var(--shadow-dropdown) !important; }
2886
- .odt_Button-module__shadow-modal___K8TyN { box-shadow: var(--shadow-modal) !important; }
2887
- .odt_Button-module__shadow-popover___VY-Vx { box-shadow: var(--shadow-popover) !important; }
598
+ .odt-alert--info {
599
+ background-color: var(--color-surface-info);
600
+ color: var(--color-fg-info);
601
+ border-color: hsl(217 91% 90%);
602
+ }
2888
603
 
2889
- /* ==========================================================================
2890
- * Icon Only
2891
- * ========================================================================== */
2892
- .odt_Button-module__iconOnly___X-rRI {
2893
- padding: 0 !important;
604
+ .odt-alert__icon {
605
+ font-size: 1.125rem;
2894
606
  flex-shrink: 0;
607
+ margin-top: 0.0625rem;
2895
608
  }
2896
- .odt_Button-module__iconOnly___X-rRI.odt_Button-module__size-sm___yAWeo {
2897
- width: 2rem;
2898
- height: 2rem;
2899
- }
2900
- .odt_Button-module__iconOnly___X-rRI.odt_Button-module__size-md___D-Hm0 {
2901
- width: 2.5rem;
2902
- height: 2.5rem;
2903
- }
2904
- .odt_Button-module__iconOnly___X-rRI.odt_Button-module__size-lg___tGvYj {
2905
- width: 3rem;
2906
- height: 3rem;
609
+
610
+ .odt-alert__content {
611
+ flex: 1 1 auto;
612
+ font-weight: var(--font-weight-medium, 500);
2907
613
  }
2908
614
 
2909
615
  /* ==========================================================================
2910
- * States
616
+ * 6. Typography (.odt-heading, .odt-text)
2911
617
  * ========================================================================== */
2912
- .odt_Button-module__disabled___En-KU,
2913
- .odt_Button-module__button___iSBxU:disabled {
2914
- opacity: 0.6;
2915
- cursor: not-allowed;
2916
- pointer-events: none;
2917
- box-shadow: none;
2918
- }
2919
-
2920
- .odt_Button-module__loading___cFq1s {
2921
- cursor: wait;
2922
- pointer-events: none;
2923
- }
2924
-
2925
- .odt_Button-module__full-width___GbFwk {
2926
- width: 100%;
2927
- }
2928
-
2929
- .odt_Button-module__spinner___HB8vJ {
2930
- display: inline-block;
2931
- width: 1em;
2932
- height: 1em;
2933
- border: 2px solid currentColor;
2934
- border-right-color: transparent;
2935
- border-radius: 50%;
2936
- animation: odt_Button-module__spin___udtYr 0.75s linear infinite;
2937
- }
2938
-
2939
- @keyframes odt_Button-module__spin___udtYr {
2940
- from {
2941
- transform: rotate(0deg);
2942
- }
2943
- to {
2944
- transform: rotate(360deg);
2945
- }
2946
- }
2947
-
2948
- /* --------------------------------------------------------------------------
2949
- * Trigger Box (Styled matching Input by default)
2950
- * -------------------------------------------------------------------------- */
2951
- .odt_DropdownMenu-module__triggerContainer___LlKwd {
2952
- display: inline-flex;
2953
- flex-direction: column;
2954
- gap: var(--spacing-1-5, 0.375rem);
2955
- box-sizing: border-box;
2956
- font-family: inherit;
2957
- }
2958
-
2959
- .odt_DropdownMenu-module__triggerContainer___LlKwd.odt_DropdownMenu-module__fullWidth___9HljG,
2960
- .odt_DropdownMenu-module__triggerInput___9FyfD.odt_DropdownMenu-module__fullWidth___9HljG {
2961
- width: 100%;
2962
- }
2963
-
2964
- .odt_DropdownMenu-module__triggerLabel___skRiK {
2965
- font-size: var(--font-size-sm, 0.875rem);
2966
- font-weight: 500;
2967
- color: var(--color-fg-strong);
2968
- line-height: 1.25rem;
2969
- user-select: none;
2970
- cursor: default;
2971
- }
2972
-
2973
- .odt_DropdownMenu-module__triggerInput___9FyfD {
2974
- display: inline-flex;
2975
- align-items: center;
2976
- justify-content: space-between;
618
+ .odt-heading,
619
+ .odt-text {
620
+ margin: 0;
2977
621
  box-sizing: border-box;
2978
- background-color: var(--color-surface, #ffffff);
2979
- color: var(--color-fg);
2980
622
  font-family: inherit;
2981
- font-weight: 500;
2982
- outline: none;
2983
- border: 1px solid transparent;
2984
- cursor: pointer;
2985
- user-select: none;
2986
- gap: 0.5rem;
2987
- transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
2988
- }
2989
-
2990
- /* Variants matching Input */
2991
- .odt_DropdownMenu-module__triggerInput___9FyfD.odt_DropdownMenu-module__variant-outlined___ePizy {
2992
- background-color: var(--color-surface, #ffffff);
2993
- border: 1px solid var(--color-line, #e4e4e9);
2994
- }
2995
- .odt_DropdownMenu-module__triggerInput___9FyfD.odt_DropdownMenu-module__variant-outlined___ePizy:hover:not(:disabled):not(:focus):not(.odt_DropdownMenu-module__triggerOpen___wDEkM) {
2996
- border-color: var(--color-line-strong, #d4d4db);
2997
- }
2998
- .odt_DropdownMenu-module__triggerInput___9FyfD.odt_DropdownMenu-module__variant-outlined___ePizy:focus,
2999
- .odt_DropdownMenu-module__triggerInput___9FyfD.odt_DropdownMenu-module__variant-outlined___ePizy.odt_DropdownMenu-module__triggerOpen___wDEkM {
3000
- border-color: var(--color-primary-300);
3001
- }
3002
-
3003
- .odt_DropdownMenu-module__triggerInput___9FyfD.odt_DropdownMenu-module__variant-filled___w9oxx {
3004
- background-color: var(--color-surface, #ffffff);
3005
- border: 1px solid transparent;
3006
- }
3007
- .odt_DropdownMenu-module__triggerInput___9FyfD.odt_DropdownMenu-module__variant-filled___w9oxx:focus,
3008
- .odt_DropdownMenu-module__triggerInput___9FyfD.odt_DropdownMenu-module__variant-filled___w9oxx.odt_DropdownMenu-module__triggerOpen___wDEkM {
3009
- border-color: var(--color-primary-300);
3010
- }
3011
-
3012
- .odt_DropdownMenu-module__triggerInput___9FyfD.odt_DropdownMenu-module__variant-frosted___i4czp {
3013
- background-color: hsl(from var(--color-surface) h s l / 0.85);
3014
- backdrop-filter: blur(16px);
3015
- -webkit-backdrop-filter: blur(16px);
3016
- border: 1px solid transparent;
3017
- box-shadow: var(--shadow-card);
3018
- }
3019
- .odt_DropdownMenu-module__triggerInput___9FyfD.odt_DropdownMenu-module__variant-frosted___i4czp:focus,
3020
- .odt_DropdownMenu-module__triggerInput___9FyfD.odt_DropdownMenu-module__variant-frosted___i4czp.odt_DropdownMenu-module__triggerOpen___wDEkM {
3021
- border-color: var(--color-primary-300);
3022
- }
3023
-
3024
- /* Sizes matching Input */
3025
- .odt_DropdownMenu-module__triggerInput___9FyfD.odt_DropdownMenu-module__size-sm___6l6zO {
3026
- height: 2rem; /* 32px */
3027
- padding: 0 var(--spacing-3, 0.75rem);
3028
- font-size: var(--font-size-xs, 0.75rem);
3029
- }
3030
- .odt_DropdownMenu-module__triggerInput___9FyfD.odt_DropdownMenu-module__size-md___-t7ih {
3031
- height: 2.625rem; /* 42px */
3032
- padding: 0 var(--spacing-4, 1rem);
3033
- font-size: var(--font-size-sm, 0.875rem);
3034
- }
3035
- .odt_DropdownMenu-module__triggerInput___9FyfD.odt_DropdownMenu-module__size-lg___zQ3JL {
3036
- height: 3.125rem; /* 50px */
3037
- padding: 0 var(--spacing-5, 1.25rem);
3038
- font-size: var(--font-size-base, 1rem);
3039
623
  }
3040
624
 
3041
- .odt_DropdownMenu-module__triggerContentText___LeoMI {
3042
- flex: 1 1 auto;
3043
- text-align: left;
625
+ .odt-heading--5xl { font-size: var(--font-size-5xl, 3rem); line-height: 1; }
626
+ .odt-heading--4xl { font-size: var(--font-size-4xl, 2.25rem); line-height: 2.5rem; }
627
+ .odt-heading--3xl { font-size: var(--font-size-3xl, 1.875rem); line-height: 2.25rem; }
628
+ .odt-heading--2xl { font-size: var(--font-size-2xl, 1.5rem); line-height: 2rem; }
629
+ .odt-heading--xl { font-size: var(--font-size-xl, 1.25rem); line-height: 1.75rem; }
630
+ .odt-heading--lg { font-size: var(--font-size-lg, 1.125rem); line-height: 1.75rem; }
631
+
632
+ .odt-text--2xl { font-size: var(--font-size-2xl, 1.5rem); line-height: 2rem; }
633
+ .odt-text--xl { font-size: var(--font-size-xl, 1.25rem); line-height: 1.75rem; }
634
+ .odt-text--lg { font-size: var(--font-size-lg, 1.125rem); line-height: 1.75rem; }
635
+ .odt-text--base{ font-size: var(--font-size-base, 1rem); line-height: 1.5; }
636
+ .odt-text--sm { font-size: var(--font-size-sm, 0.875rem); line-height: 1.25rem; }
637
+ .odt-text--xs { font-size: var(--font-size-xs, 0.75rem); line-height: 1rem; }
638
+
639
+ .odt-weight-light { font-weight: var(--font-weight-light, 300); }
640
+ .odt-weight-normal { font-weight: var(--font-weight-normal, 400); }
641
+ .odt-weight-medium { font-weight: var(--font-weight-medium, 500); }
642
+ .odt-weight-semibold { font-weight: var(--font-weight-semibold, 600); }
643
+ .odt-weight-bold { font-weight: var(--font-weight-bold, 700); }
644
+ .odt-weight-extrabold { font-weight: var(--font-weight-extrabold, 800); }
645
+
646
+ .odt-color-strong { color: var(--color-fg-strong); }
647
+ .odt-color-default { color: var(--color-fg); }
648
+ .odt-color-muted { color: var(--color-fg-muted); }
649
+ .odt-color-subtle { color: var(--color-fg-subtle); }
650
+ .odt-color-disabled { color: var(--color-fg-disabled); }
651
+ .odt-color-primary { color: var(--color-fg-primary); }
652
+ .odt-color-secondary { color: var(--color-fg-secondary); }
653
+ .odt-color-success { color: var(--color-fg-success); }
654
+ .odt-color-warning { color: var(--color-fg-warning); }
655
+ .odt-color-danger { color: var(--color-fg-danger); }
656
+ .odt-color-info { color: var(--color-fg-info); }
657
+
658
+ .odt-truncate {
3044
659
  overflow: hidden;
3045
660
  text-overflow: ellipsis;
3046
661
  white-space: nowrap;
3047
662
  }
3048
663
 
3049
- .odt_DropdownMenu-module__placeholder___BhYKf {
3050
- color: var(--color-fg-subtle);
3051
- font-weight: 400;
3052
- }
3053
-
3054
- .odt_DropdownMenu-module__chevronIcon___wz7RU {
664
+ /* ==========================================================================
665
+ * 7. Avatar Component (.odt-avatar)
666
+ * ========================================================================== */
667
+ .odt-avatar {
3055
668
  display: inline-flex;
3056
669
  align-items: center;
3057
670
  justify-content: center;
3058
- color: var(--color-fg-muted);
671
+ border-radius: var(--radius-full, 9999px);
672
+ overflow: hidden;
673
+ position: relative;
674
+ user-select: none;
675
+ font-weight: var(--font-weight-bold, 700);
676
+ box-sizing: border-box;
3059
677
  flex-shrink: 0;
3060
- transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), color 140ms ease;
678
+ box-shadow: var(--shadow-card);
3061
679
  }
3062
680
 
3063
- .odt_DropdownMenu-module__chevronOpen___iLL3c {
3064
- transform: rotate(180deg);
3065
- color: var(--color-fg-strong);
3066
- }
681
+ .odt-avatar--xs { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
682
+ .odt-avatar--sm { width: 2rem; height: 2rem; font-size: var(--font-size-xs, 0.75rem); }
683
+ .odt-avatar--md { width: 2.5rem; height: 2.5rem; font-size: var(--font-size-sm, 0.875rem); }
684
+ .odt-avatar--lg { width: 3rem; height: 3rem; font-size: var(--font-size-base, 1rem); }
685
+ .odt-avatar--xl { width: 4rem; height: 4rem; font-size: var(--font-size-xl, 1.25rem); }
686
+ .odt-avatar--2xl { width: 4.5rem; height: 4.5rem; font-size: var(--font-size-2xl, 1.5rem); }
3067
687
 
3068
- .odt_DropdownMenu-module__errorTrigger___4gc6s {
3069
- border-color: var(--color-danger) !important;
3070
- }
688
+ .odt-avatar--secondary { background-color: var(--color-secondary-100); color: var(--color-secondary-900); }
689
+ .odt-avatar--primary { background-color: var(--color-primary-100); color: var(--color-primary-600); }
690
+ .odt-avatar--neutral { background-color: var(--color-surface-muted); color: var(--color-fg); }
3071
691
 
3072
- .odt_DropdownMenu-module__disabledTrigger___ra57k {
3073
- background-color: var(--color-surface-subtle);
3074
- color: var(--color-fg-disabled);
3075
- cursor: not-allowed;
3076
- opacity: 0.7;
692
+ .odt-avatar__image {
693
+ width: 100%;
694
+ height: 100%;
695
+ object-fit: cover;
3077
696
  }
3078
697
 
3079
- .odt_DropdownMenu-module__triggerFooter___km-U- {
698
+ .odt-avatar__fallback {
699
+ width: 100%;
700
+ height: 100%;
3080
701
  display: flex;
3081
702
  align-items: center;
3082
- justify-content: space-between;
3083
- }
3084
-
3085
- .odt_DropdownMenu-module__errorMessage___aBl-P {
3086
- font-size: var(--font-size-xs, 0.75rem);
3087
- color: var(--color-danger);
3088
- font-weight: 500;
3089
- margin: 0;
3090
- line-height: 1rem;
3091
- }
3092
-
3093
- .odt_DropdownMenu-module__helperText___ZFQLf {
3094
- font-size: var(--font-size-xs, 0.75rem);
3095
- color: var(--color-fg-muted);
3096
- margin: 0;
3097
- line-height: 1rem;
703
+ justify-content: center;
704
+ text-transform: uppercase;
3098
705
  }
3099
706
 
3100
- .odt_DropdownMenu-module__content___xSSSW {
3101
- position: absolute;
3102
- z-index: 1000;
3103
- display: flex;
707
+ /* ==========================================================================
708
+ * 8. Form Controls (Input, Textarea, Select, Form Group)
709
+ * ========================================================================== */
710
+ .odt-input-container,
711
+ .odt-form-group {
712
+ display: inline-flex;
3104
713
  flex-direction: column;
714
+ gap: var(--spacing-1-5, 0.375rem);
3105
715
  box-sizing: border-box;
3106
- padding: 0.3125rem;
3107
- background-color: var(--color-surface, #ffffff);
3108
- border: none;
3109
- color: var(--color-neutral-900);
3110
- outline: none;
3111
- transform-origin: top center;
3112
- animation: odt_DropdownMenu-module__dropdownEnter___B6cK3 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
3113
- will-change: transform, opacity;
3114
- box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.03);
716
+ width: 100%;
717
+ font-family: inherit;
3115
718
  }
3116
719
 
3117
- .odt_DropdownMenu-module__content___xSSSW.odt_DropdownMenu-module__exiting___-S7xz {
3118
- animation: odt_DropdownMenu-module__dropdownExit___r2PGR 110ms cubic-bezier(0.4, 0, 1, 1) forwards;
3119
- pointer-events: none;
720
+ .odt-label {
721
+ font-size: var(--font-size-sm, 0.875rem);
722
+ font-weight: 500;
723
+ color: var(--color-fg-strong);
724
+ line-height: 1.25rem;
725
+ }
726
+
727
+ .odt-label--required::after {
728
+ content: " *";
729
+ color: var(--color-danger);
3120
730
  }
3121
731
 
3122
- @keyframes odt_DropdownMenu-module__dropdownEnter___B6cK3 {
3123
- from {
3124
- opacity: 0;
3125
- transform: scale(0.97) translateY(-4px);
3126
- }
3127
- to {
3128
- opacity: 1;
3129
- transform: scale(1) translateY(0);
3130
- }
3131
- }
3132
-
3133
- @keyframes odt_DropdownMenu-module__dropdownExit___r2PGR {
3134
- from {
3135
- opacity: 1;
3136
- transform: scale(1) translateY(0);
3137
- }
3138
- to {
3139
- opacity: 0;
3140
- transform: scale(0.97) translateY(-4px);
3141
- }
3142
- }
3143
-
3144
- /* --------------------------------------------------------------------------
3145
- * Shadows
3146
- * -------------------------------------------------------------------------- */
3147
- .odt_DropdownMenu-module__shadow-none___HTJBC { box-shadow: none; }
3148
- .odt_DropdownMenu-module__shadow-card___LEvy4 { box-shadow: var(--shadow-card); }
3149
- .odt_DropdownMenu-module__shadow-dropdown___1Ufjx { box-shadow: var(--shadow-dropdown); }
3150
- .odt_DropdownMenu-module__shadow-modal___Z9sms { box-shadow: var(--shadow-modal); }
3151
- .odt_DropdownMenu-module__shadow-popover___Yt0N0 { box-shadow: var(--shadow-popover); }
3152
-
3153
- /* --------------------------------------------------------------------------
3154
- * Radius Scales
3155
- * -------------------------------------------------------------------------- */
3156
- .odt_DropdownMenu-module__radius-none___EVzuo { border-radius: var(--radius-none); }
3157
- .odt_DropdownMenu-module__radius-xs___Ruq57 { border-radius: var(--radius-xs); }
3158
- .odt_DropdownMenu-module__radius-sm___korqx { border-radius: var(--radius-sm); }
3159
- .odt_DropdownMenu-module__radius-md___86IDF { border-radius: var(--radius-md); }
3160
- .odt_DropdownMenu-module__radius-lg___Q9B7E { border-radius: var(--radius-lg); }
3161
- .odt_DropdownMenu-module__radius-xl___sHzsd { border-radius: var(--radius-xl); }
3162
- .odt_DropdownMenu-module__radius-2xl___tmEfh { border-radius: var(--radius-2xl); }
3163
- .odt_DropdownMenu-module__radius-3xl___QT3G4 { border-radius: var(--radius-3xl); }
3164
- .odt_DropdownMenu-module__radius-4xl___pvUP2 { border-radius: var(--radius-4xl); }
3165
- .odt_DropdownMenu-module__radius-full___-8lx4 { border-radius: var(--radius-full); }
3166
-
3167
- /* --------------------------------------------------------------------------
3168
- * Item
3169
- * -------------------------------------------------------------------------- */
3170
- .odt_DropdownMenu-module__item___B34j8 {
732
+ .odt-input-wrapper {
3171
733
  position: relative;
3172
734
  display: flex;
3173
735
  align-items: center;
3174
736
  width: 100%;
3175
737
  box-sizing: border-box;
3176
- padding: 0.4375rem 0.625rem;
3177
- border-radius: var(--radius-lg);
3178
- font-size: 0.8125rem;
3179
- font-weight: 500;
3180
- line-height: 1.25rem;
3181
- letter-spacing: -0.01em;
3182
- color: var(--color-neutral-700);
3183
- background: transparent;
3184
- border: none;
3185
- cursor: pointer;
3186
- user-select: none;
3187
- text-decoration: none;
3188
- transition: background-color 120ms ease, color 120ms ease, transform 100ms ease;
738
+ }
739
+
740
+ .odt-input,
741
+ .odt-textarea,
742
+ .odt-select {
743
+ width: 100%;
744
+ box-sizing: border-box;
745
+ background-color: var(--color-surface, #ffffff);
746
+ color: var(--color-fg);
747
+ font-family: inherit;
3189
748
  outline: none;
3190
- gap: 0.5rem;
749
+ border: 1px solid transparent;
750
+ transition: border-color 140ms ease, box-shadow 140ms ease;
751
+ line-height: 1.25;
3191
752
  }
3192
753
 
3193
- .odt_DropdownMenu-module__item___B34j8:hover,
3194
- .odt_DropdownMenu-module__item___B34j8:focus-visible,
3195
- .odt_DropdownMenu-module__item___B34j8[data-highlighted="true"] {
3196
- background-color: var(--color-surface-subtle);
3197
- color: var(--color-neutral-950);
754
+ .odt-input::placeholder,
755
+ .odt-textarea::placeholder {
756
+ color: var(--color-fg-subtle);
3198
757
  }
3199
758
 
3200
- .odt_DropdownMenu-module__item___B34j8:active {
3201
- background-color: var(--color-neutral-200);
3202
- transform: scale(0.99);
759
+ /* Form Variants */
760
+ .odt-input--outlined,
761
+ .odt-textarea--outlined,
762
+ .odt-select--outlined {
763
+ background-color: var(--color-surface, #ffffff);
764
+ border: 1px solid var(--color-line, #e4e4e9);
765
+ }
766
+ .odt-input--outlined:hover:not(:disabled):not(:focus),
767
+ .odt-textarea--outlined:hover:not(:disabled):not(:focus),
768
+ .odt-select--outlined:hover:not(:disabled):not(:focus) {
769
+ border-color: var(--color-line-strong, #d4d4db);
770
+ }
771
+ .odt-input--outlined:focus,
772
+ .odt-textarea--outlined:focus,
773
+ .odt-select--outlined:focus {
774
+ border-color: var(--color-ring);
3203
775
  }
3204
776
 
3205
- .odt_DropdownMenu-module__item___B34j8.odt_DropdownMenu-module__inset___UawPO {
3206
- padding-left: 2.125rem;
777
+ .odt-input--filled,
778
+ .odt-textarea--filled,
779
+ .odt-select--filled {
780
+ background-color: var(--color-surface, #ffffff);
781
+ border: 1px solid transparent;
782
+ }
783
+ .odt-input--filled:focus,
784
+ .odt-textarea--filled:focus,
785
+ .odt-select--filled:focus {
786
+ border-color: var(--color-ring);
3207
787
  }
3208
788
 
3209
- .odt_DropdownMenu-module__item___B34j8.odt_DropdownMenu-module__disabled___0-Fdn {
3210
- opacity: 0.4;
3211
- cursor: not-allowed;
3212
- pointer-events: none;
789
+ .odt-input--frosted,
790
+ .odt-textarea--frosted,
791
+ .odt-select--frosted {
792
+ background-color: hsl(from var(--color-surface) h s l / 0.85);
793
+ backdrop-filter: blur(16px);
794
+ -webkit-backdrop-filter: blur(16px);
795
+ border: 1px solid transparent;
796
+ box-shadow: var(--shadow-card);
797
+ }
798
+ .odt-input--frosted:focus,
799
+ .odt-textarea--frosted:focus,
800
+ .odt-select--frosted:focus {
801
+ border-color: var(--color-ring);
3213
802
  }
3214
803
 
3215
- .odt_DropdownMenu-module__item___B34j8.odt_DropdownMenu-module__destructive___Tb5s7 {
3216
- color: var(--color-danger);
804
+ /* Form Sizes */
805
+ .odt-input--sm, .odt-select--sm {
806
+ height: 2rem;
807
+ padding: 0 var(--spacing-3, 0.75rem);
808
+ font-size: var(--font-size-xs, 0.75rem);
809
+ border-radius: var(--radius-lg, 0.5rem);
810
+ }
811
+ .odt-input--md, .odt-select--md {
812
+ height: 2.625rem;
813
+ padding: 0 var(--spacing-4, 1rem);
814
+ font-size: var(--font-size-sm, 0.875rem);
815
+ border-radius: var(--radius-xl, 0.75rem);
816
+ }
817
+ .odt-input--lg, .odt-select--lg {
818
+ height: 3.125rem;
819
+ padding: 0 var(--spacing-5, 1.25rem);
820
+ font-size: var(--font-size-base, 1rem);
821
+ border-radius: var(--radius-2xl, 1rem);
3217
822
  }
3218
823
 
3219
- .odt_DropdownMenu-module__item___B34j8.odt_DropdownMenu-module__destructive___Tb5s7:hover,
3220
- .odt_DropdownMenu-module__item___B34j8.odt_DropdownMenu-module__destructive___Tb5s7:focus-visible,
3221
- .odt_DropdownMenu-module__item___B34j8.odt_DropdownMenu-module__destructive___Tb5s7[data-highlighted="true"] {
3222
- background-color: var(--color-surface-danger);
3223
- color: var(--color-danger);
824
+ .odt-textarea {
825
+ line-height: 1.5;
826
+ height: auto;
827
+ min-height: 5rem;
828
+ }
829
+ .odt-textarea--sm {
830
+ padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
831
+ font-size: var(--font-size-xs, 0.75rem);
832
+ min-height: 4rem;
833
+ border-radius: var(--radius-lg, 0.5rem);
834
+ }
835
+ .odt-textarea--md {
836
+ padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
837
+ font-size: var(--font-size-sm, 0.875rem);
838
+ min-height: 5rem;
839
+ border-radius: var(--radius-xl, 0.75rem);
840
+ }
841
+ .odt-textarea--lg {
842
+ padding: var(--spacing-4, 1rem) var(--spacing-5, 1.25rem);
843
+ font-size: var(--font-size-base, 1rem);
844
+ min-height: 6.5rem;
845
+ border-radius: var(--radius-2xl, 1rem);
3224
846
  }
3225
847
 
3226
- .odt_DropdownMenu-module__itemContent___sXZNl {
3227
- flex: 1 1 auto;
848
+ .odt-textarea--resize-none { resize: none; }
849
+ .odt-textarea--resize-vertical { resize: vertical; }
850
+ .odt-textarea--resize-horizontal { resize: horizontal; }
851
+ .odt-textarea--resize-both { resize: both; }
852
+
853
+ /* Select Dropdown */
854
+ .odt-select {
855
+ appearance: none;
856
+ -webkit-appearance: none;
857
+ padding-right: 2.5rem;
858
+ cursor: pointer;
859
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
860
+ background-repeat: no-repeat;
861
+ background-position: right 0.75rem center;
862
+ }
863
+
864
+ /* Icons & Addons */
865
+ .odt-input__left-icon {
866
+ position: absolute;
867
+ left: var(--spacing-3, 0.75rem);
3228
868
  display: flex;
3229
869
  align-items: center;
3230
- overflow: hidden;
3231
- text-overflow: ellipsis;
3232
- white-space: nowrap;
870
+ justify-content: center;
871
+ color: var(--color-fg-muted);
872
+ pointer-events: none;
873
+ z-index: 1;
3233
874
  }
3234
875
 
3235
- .odt_DropdownMenu-module__icon___ROmJp {
3236
- display: inline-flex;
876
+ .odt-input__right-icon {
877
+ position: absolute;
878
+ right: var(--spacing-3, 0.75rem);
879
+ display: flex;
3237
880
  align-items: center;
3238
881
  justify-content: center;
3239
- flex-shrink: 0;
3240
- width: 1rem;
3241
- height: 1rem;
3242
- color: var(--color-neutral-400);
3243
- transition: color 120ms ease;
882
+ color: var(--color-fg-muted);
883
+ z-index: 2;
3244
884
  }
3245
885
 
3246
- .odt_DropdownMenu-module__item___B34j8:hover .odt_DropdownMenu-module__icon___ROmJp,
3247
- .odt_DropdownMenu-module__item___B34j8:focus-visible .odt_DropdownMenu-module__icon___ROmJp {
3248
- color: var(--color-neutral-800);
3249
- }
886
+ .odt-input--has-left-icon.odt-input--sm { padding-left: 2rem; }
887
+ .odt-input--has-left-icon.odt-input--md { padding-left: 2.5rem; }
888
+ .odt-input--has-left-icon.odt-input--lg { padding-left: 3rem; }
3250
889
 
3251
- .odt_DropdownMenu-module__item___B34j8.odt_DropdownMenu-module__destructive___Tb5s7 .odt_DropdownMenu-module__icon___ROmJp {
3252
- color: var(--color-danger);
3253
- }
890
+ .odt-input--has-right-icon.odt-input--sm { padding-right: 2rem; }
891
+ .odt-input--has-right-icon.odt-input--md { padding-right: 2.5rem; }
892
+ .odt-input--has-right-icon.odt-input--lg { padding-right: 3rem; }
3254
893
 
3255
- .odt_DropdownMenu-module__rightIcon___g-4vK {
894
+ /* Addon Groups */
895
+ .odt-input__addon-group {
896
+ display: flex;
897
+ align-items: stretch;
898
+ width: 100%;
899
+ }
900
+ .odt-input__addon-before,
901
+ .odt-input__addon-after {
3256
902
  display: inline-flex;
3257
903
  align-items: center;
3258
904
  justify-content: center;
3259
- flex-shrink: 0;
3260
- margin-left: auto;
3261
- color: var(--color-neutral-400);
905
+ padding: 0 var(--spacing-3, 0.75rem);
906
+ background-color: var(--color-surface, #ffffff);
907
+ color: var(--color-fg-muted);
908
+ font-size: var(--font-size-sm, 0.875rem);
909
+ font-weight: 500;
910
+ white-space: nowrap;
911
+ user-select: none;
912
+ border: 1px solid var(--color-line, #e4e4e9);
913
+ }
914
+ .odt-input__addon-before {
915
+ border-right: none;
916
+ border-top-left-radius: var(--radius-xl, 0.75rem);
917
+ border-bottom-left-radius: var(--radius-xl, 0.75rem);
918
+ }
919
+ .odt-input__addon-after {
920
+ border-left: none;
921
+ border-top-right-radius: var(--radius-xl, 0.75rem);
922
+ border-bottom-right-radius: var(--radius-xl, 0.75rem);
923
+ }
924
+ .odt-input--has-addon-before {
925
+ border-top-left-radius: 0 !important;
926
+ border-bottom-left-radius: 0 !important;
927
+ }
928
+ .odt-input--has-addon-after {
929
+ border-top-right-radius: 0 !important;
930
+ border-bottom-right-radius: 0 !important;
3262
931
  }
3263
932
 
3264
- /* --------------------------------------------------------------------------
3265
- * Checkbox & Radio Indicators
3266
- * -------------------------------------------------------------------------- */
3267
- .odt_DropdownMenu-module__indicatorWrapper___qaUYE {
3268
- display: inline-flex;
3269
- align-items: center;
3270
- justify-content: center;
3271
- width: 1rem;
3272
- height: 1rem;
3273
- flex-shrink: 0;
3274
- color: var(--color-primary-600);
933
+ /* States */
934
+ .odt-input--error,
935
+ .odt-textarea--error,
936
+ .odt-select--error,
937
+ .odt-input--error:focus,
938
+ .odt-textarea--error:focus,
939
+ .odt-select--error:focus {
940
+ border-color: var(--color-danger) !important;
3275
941
  }
3276
942
 
3277
- .odt_DropdownMenu-module__radioDot___Lo92z {
3278
- width: 0.375rem;
3279
- height: 0.375rem;
3280
- border-radius: 50%;
3281
- background-color: currentColor;
943
+ .odt-input--success,
944
+ .odt-textarea--success,
945
+ .odt-select--success,
946
+ .odt-input--success:focus,
947
+ .odt-textarea--success:focus,
948
+ .odt-select--success:focus {
949
+ border-color: var(--color-success) !important;
3282
950
  }
3283
951
 
3284
- /* --------------------------------------------------------------------------
3285
- * Shortcut (Lightweight text indicator)
3286
- * -------------------------------------------------------------------------- */
3287
- .odt_DropdownMenu-module__shortcut___Zs355 {
3288
- margin-left: auto;
3289
- font-size: 0.6875rem;
3290
- font-weight: 500;
3291
- letter-spacing: 0.04em;
3292
- font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
3293
- color: var(--color-neutral-400);
3294
- background: none;
3295
- border: none;
3296
- padding: 0;
3297
- line-height: 1rem;
3298
- display: inline-flex;
3299
- align-items: center;
952
+ .odt-input:disabled,
953
+ .odt-textarea:disabled,
954
+ .odt-select:disabled {
955
+ background-color: var(--color-surface-subtle);
956
+ color: var(--color-fg-disabled);
957
+ cursor: not-allowed;
958
+ border-color: var(--color-line-muted, rgba(0, 0, 0, 0.05));
959
+ opacity: 0.7;
3300
960
  }
3301
961
 
3302
- /* --------------------------------------------------------------------------
3303
- * Label
3304
- * -------------------------------------------------------------------------- */
3305
- .odt_DropdownMenu-module__label___A5nl5 {
3306
- padding: 0.375rem 0.625rem 0.25rem;
3307
- font-size: 0.6875rem;
3308
- font-weight: 600;
3309
- text-transform: uppercase;
3310
- letter-spacing: 0.05em;
3311
- color: var(--color-neutral-400);
3312
- user-select: none;
962
+ /* Help & Error Messages */
963
+ .odt-helper-text {
964
+ font-size: var(--font-size-xs, 0.75rem);
965
+ color: var(--color-fg-muted);
966
+ margin: 0;
967
+ line-height: 1rem;
3313
968
  }
3314
969
 
3315
- .odt_DropdownMenu-module__label___A5nl5.odt_DropdownMenu-module__inset___UawPO {
3316
- padding-left: 2.125rem;
970
+ .odt-error-text {
971
+ font-size: var(--font-size-xs, 0.75rem);
972
+ color: var(--color-danger);
973
+ font-weight: 500;
974
+ margin: 0;
975
+ line-height: 1rem;
3317
976
  }
3318
977
 
3319
- /* --------------------------------------------------------------------------
3320
- * Separator (Lightweight subtle divider)
3321
- * -------------------------------------------------------------------------- */
3322
- .odt_DropdownMenu-module__separator___5gA0a {
3323
- height: 0.3px;
3324
- margin: 0.25rem 0.25rem;
3325
- background-color: var(--color-surface-subtle, var(--color-neutral-100));
978
+ .odt-success-text {
979
+ font-size: var(--font-size-xs, 0.75rem);
980
+ color: var(--color-success);
981
+ font-weight: 500;
982
+ margin: 0;
983
+ line-height: 1rem;
3326
984
  }
3327
985
 
3328
- /* --------------------------------------------------------------------------
3329
- * Group
3330
- * -------------------------------------------------------------------------- */
3331
- .odt_DropdownMenu-module__group___M-1TG {
3332
- display: flex;
986
+ /* ==========================================================================
987
+ * 9. Checkbox & Radio (.odt-checkbox, .odt-radio)
988
+ * ========================================================================== */
989
+ .odt-checkbox-wrapper,
990
+ .odt-radio-wrapper {
991
+ display: inline-flex;
3333
992
  flex-direction: column;
3334
- width: 100%;
993
+ gap: 0.25rem;
3335
994
  }
3336
995
 
3337
- .odt_Switch-module__container___-brqZ {
996
+ .odt-checkbox-container,
997
+ .odt-radio-container {
3338
998
  display: inline-flex;
3339
- align-items: center;
3340
- gap: var(--spacing-3, 0.75rem);
999
+ align-items: flex-start;
1000
+ gap: var(--spacing-2-5, 0.625rem);
3341
1001
  cursor: pointer;
3342
1002
  user-select: none;
3343
1003
  }
3344
1004
 
3345
- .odt_Switch-module__switch___A6OoW {
1005
+ .odt-checkbox,
1006
+ .odt-radio {
1007
+ appearance: none;
1008
+ -webkit-appearance: none;
3346
1009
  position: relative;
3347
1010
  display: inline-flex;
3348
1011
  align-items: center;
1012
+ justify-content: center;
3349
1013
  flex-shrink: 0;
3350
- width: 2.75rem; /* 44px (w-11) */
3351
- height: 1.5rem; /* 24px (h-6) */
3352
- border-radius: var(--radius-full, 9999px);
3353
- background-color: var(--color-neutral-300);
1014
+ background-color: var(--color-surface-subtle, #e4e4e9);
3354
1015
  border: none;
1016
+ color: #ffffff;
3355
1017
  cursor: pointer;
3356
- transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
3357
- outline: none;
3358
1018
  padding: 0;
1019
+ outline: none;
3359
1020
  box-sizing: border-box;
1021
+ transition: background-color 140ms ease, box-shadow 140ms ease, transform 100ms ease;
1022
+ margin-top: 0.125rem;
3360
1023
  }
3361
1024
 
3362
- .odt_Switch-module__switch___A6OoW:focus-visible {
3363
- box-shadow: 0 0 0 3px var(--color-primary-200);
1025
+ .odt-checkbox {
1026
+ width: 1.125rem;
1027
+ height: 1.125rem;
1028
+ border-radius: var(--radius-md, 0.375rem);
3364
1029
  }
3365
1030
 
3366
- .odt_Switch-module__checked___zcZsM {
3367
- background-color: var(--color-primary-500);
1031
+ .odt-radio {
1032
+ width: 1.125rem;
1033
+ height: 1.125rem;
1034
+ border-radius: var(--radius-full, 9999px);
3368
1035
  }
3369
1036
 
3370
- .odt_Switch-module__checked___zcZsM.odt_Switch-module__color-primary___Ccm3E {
3371
- background-color: var(--color-primary-500);
1037
+ .odt-checkbox:active:not(:disabled),
1038
+ .odt-radio:active:not(:disabled) {
1039
+ transform: scale(0.94);
3372
1040
  }
3373
1041
 
3374
- .odt_Switch-module__checked___zcZsM.odt_Switch-module__color-secondary___RwVNj {
3375
- background-color: var(--color-secondary-500);
1042
+ /* Checkbox & Radio Sizes */
1043
+ .odt-checkbox--sm, .odt-radio--sm {
1044
+ width: 0.9375rem;
1045
+ height: 0.9375rem;
1046
+ margin-top: 0.1875rem;
3376
1047
  }
3377
1048
 
3378
- .odt_Switch-module__checked___zcZsM.odt_Switch-module__color-success___onBf7 {
3379
- background-color: var(--color-success);
1049
+ .odt-checkbox--md, .odt-radio--md {
1050
+ width: 1.125rem;
1051
+ height: 1.125rem;
1052
+ margin-top: 0.125rem;
3380
1053
  }
3381
1054
 
3382
- .odt_Switch-module__checked___zcZsM.odt_Switch-module__color-warning___jQjpB {
3383
- background-color: var(--color-warning);
1055
+ .odt-checkbox--lg, .odt-radio--lg {
1056
+ width: 1.375rem;
1057
+ height: 1.375rem;
1058
+ margin-top: 0.0625rem;
3384
1059
  }
3385
1060
 
3386
- .odt_Switch-module__checked___zcZsM.odt_Switch-module__color-danger___0qPFU {
3387
- background-color: var(--color-danger);
1061
+ /* Checkmark indicator */
1062
+ .odt-checkbox:checked::after {
1063
+ content: "";
1064
+ display: block;
1065
+ width: 4px;
1066
+ height: 8px;
1067
+ border: solid currentColor;
1068
+ border-width: 0 2px 2px 0;
1069
+ transform: rotate(45deg);
1070
+ margin-bottom: 2px;
1071
+ animation: odt-pop 140ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
3388
1072
  }
3389
1073
 
3390
- .odt_Switch-module__checked___zcZsM.odt_Switch-module__color-info___-zwN5 {
3391
- background-color: var(--color-info);
1074
+ .odt-checkbox--sm:checked::after {
1075
+ width: 3px;
1076
+ height: 6px;
1077
+ border-width: 0 1.5px 1.5px 0;
1078
+ margin-bottom: 1px;
3392
1079
  }
3393
1080
 
3394
- .odt_Switch-module__checked___zcZsM.odt_Switch-module__color-dark___vxnTk {
3395
- background-color: var(--color-neutral-900);
1081
+ .odt-checkbox--lg:checked::after {
1082
+ width: 5px;
1083
+ height: 10px;
1084
+ border-width: 0 2.5px 2.5px 0;
1085
+ margin-bottom: 2px;
3396
1086
  }
3397
1087
 
3398
- .odt_Switch-module__thumb___HjYeK {
3399
- pointer-events: none;
1088
+ /* Radio Dot indicator */
1089
+ .odt-radio:checked::after {
1090
+ content: "";
3400
1091
  display: block;
3401
- width: 1rem; /* 16px (w-4) */
3402
- height: 1rem; /* 16px (h-4) */
1092
+ width: 0.5rem;
1093
+ height: 0.5rem;
3403
1094
  border-radius: var(--radius-full, 9999px);
3404
- background-color: #ffffff;
3405
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
3406
- transform: translateX(0.25rem); /* 4px (translate-x-1) */
3407
- transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1095
+ background-color: currentColor;
1096
+ animation: odt-pop 140ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
3408
1097
  }
1098
+ .odt-radio--sm:checked::after { width: 0.375rem; height: 0.375rem; }
1099
+ .odt-radio--lg:checked::after { width: 0.625rem; height: 0.625rem; }
3409
1100
 
3410
- .odt_Switch-module__checked___zcZsM .odt_Switch-module__thumb___HjYeK {
3411
- transform: translateX(1.5rem); /* 24px (translate-x-6) */
1101
+ /* Checkbox & Radio Color Themes */
1102
+ .odt-checkbox--primary:checked, .odt-radio--primary:checked {
1103
+ background-color: var(--color-primary-500);
1104
+ color: #ffffff;
1105
+ }
1106
+ .odt-checkbox--primary:focus-visible, .odt-radio--primary:focus-visible {
1107
+ box-shadow: 0 0 0 3px hsl(from var(--color-primary-500) h s l / 0.35);
3412
1108
  }
3413
1109
 
3414
- /* ==========================================================================
3415
- * Sizes
3416
- * ========================================================================== */
3417
- .odt_Switch-module__size-sm___oIBr6.odt_Switch-module__switch___A6OoW {
3418
- width: 2rem; /* 32px */
3419
- height: 1.125rem; /* 18px */
1110
+ .odt-checkbox--secondary:checked, .odt-radio--secondary:checked {
1111
+ background-color: var(--color-secondary-500);
1112
+ color: var(--color-fg-strong);
1113
+ }
1114
+ .odt-checkbox--secondary:focus-visible, .odt-radio--secondary:focus-visible {
1115
+ box-shadow: 0 0 0 3px hsl(from var(--color-secondary-500) h s l / 0.35);
3420
1116
  }
3421
- .odt_Switch-module__size-sm___oIBr6 .odt_Switch-module__thumb___HjYeK {
3422
- width: 0.75rem; /* 12px */
3423
- height: 0.75rem; /* 12px */
3424
- transform: translateX(0.1875rem); /* 3px */
1117
+
1118
+ .odt-checkbox--success:checked, .odt-radio--success:checked {
1119
+ background-color: var(--color-success);
1120
+ color: #ffffff;
3425
1121
  }
3426
- .odt_Switch-module__size-sm___oIBr6.odt_Switch-module__checked___zcZsM .odt_Switch-module__thumb___HjYeK {
3427
- transform: translateX(1.0625rem); /* 17px */
1122
+ .odt-checkbox--success:focus-visible, .odt-radio--success:focus-visible {
1123
+ box-shadow: 0 0 0 3px hsl(from var(--color-success) h s l / 0.35);
3428
1124
  }
3429
1125
 
3430
- .odt_Switch-module__size-lg___qftt-.odt_Switch-module__switch___A6OoW {
3431
- width: 3.5rem; /* 56px */
3432
- height: 2rem; /* 32px */
1126
+ .odt-checkbox--warning:checked, .odt-radio--warning:checked {
1127
+ background-color: var(--color-warning);
1128
+ color: var(--color-fg-strong);
1129
+ }
1130
+ .odt-checkbox--warning:focus-visible, .odt-radio--warning:focus-visible {
1131
+ box-shadow: 0 0 0 3px hsl(from var(--color-warning) h s l / 0.35);
3433
1132
  }
3434
- .odt_Switch-module__size-lg___qftt- .odt_Switch-module__thumb___HjYeK {
3435
- width: 1.5rem; /* 24px */
3436
- height: 1.5rem; /* 24px */
3437
- transform: translateX(0.25rem); /* 4px */
1133
+
1134
+ .odt-checkbox--danger:checked, .odt-radio--danger:checked {
1135
+ background-color: var(--color-danger);
1136
+ color: #ffffff;
3438
1137
  }
3439
- .odt_Switch-module__size-lg___qftt-.odt_Switch-module__checked___zcZsM .odt_Switch-module__thumb___HjYeK {
3440
- transform: translateX(1.75rem); /* 28px */
1138
+ .odt-checkbox--danger:focus-visible, .odt-radio--danger:focus-visible {
1139
+ box-shadow: 0 0 0 3px hsl(from var(--color-danger) h s l / 0.35);
3441
1140
  }
3442
1141
 
3443
- /* ==========================================================================
3444
- * States
3445
- * ========================================================================== */
3446
- .odt_Switch-module__disabled___M1RGI,
3447
- .odt_Switch-module__switch___A6OoW:disabled {
3448
- opacity: 0.5;
1142
+ .odt-checkbox--dark:checked, .odt-radio--dark:checked,
1143
+ .odt-checkbox--neutral:checked, .odt-radio--neutral:checked {
1144
+ background-color: var(--color-neutral-900);
1145
+ color: #ffffff;
1146
+ }
1147
+
1148
+ .odt-checkbox:disabled,
1149
+ .odt-radio:disabled {
1150
+ opacity: 0.45;
3449
1151
  cursor: not-allowed;
3450
1152
  pointer-events: none;
3451
1153
  }
3452
1154
 
3453
- .odt_Switch-module__label___lcAvb {
1155
+ .odt-checkbox__label-content,
1156
+ .odt-radio__label-content {
1157
+ display: flex;
1158
+ flex-direction: column;
1159
+ gap: 0.125rem;
1160
+ }
1161
+
1162
+ .odt-checkbox__label,
1163
+ .odt-radio__label {
3454
1164
  font-size: var(--font-size-sm, 0.875rem);
3455
1165
  color: var(--color-fg);
3456
- font-weight: var(--font-weight-medium, 500);
1166
+ font-weight: 500;
1167
+ line-height: 1.25rem;
3457
1168
  }
3458
1169
 
3459
- .odt_Switch-module__description___uZDC3 {
1170
+ .odt-checkbox__description,
1171
+ .odt-radio__description {
3460
1172
  font-size: var(--font-size-xs, 0.75rem);
3461
1173
  color: var(--color-fg-muted);
1174
+ line-height: 1rem;
3462
1175
  }
3463
-