@echothink-ui/style 0.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 (18) hide show
  1. package/README.md +5 -0
  2. package/dist/index.cjs +216 -0
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.css +1015 -0
  5. package/dist/index.css.map +1 -0
  6. package/dist/index.d.ts +47 -0
  7. package/dist/index.js +163 -0
  8. package/dist/index.js.map +1 -0
  9. package/package.json +49 -0
  10. package/src/base-roles.css +175 -0
  11. package/src/carbon-bridge.css +109 -0
  12. package/src/density.css +32 -0
  13. package/src/index.tsx +207 -0
  14. package/src/palettes.css +51 -0
  15. package/src/presets.css +617 -0
  16. package/src/primitives.css +82 -0
  17. package/src/styles.css +22 -0
  18. package/src/type-scale.css +47 -0
package/dist/index.css ADDED
@@ -0,0 +1,1015 @@
1
+ @import "@echothink-ui/carbon-theme/styles.css";
2
+
3
+ /* src/palettes.css */
4
+ :root,
5
+ .eth-palette-default {
6
+ --eth-palette-neutral-0: #ffffff;
7
+ --eth-palette-neutral-25: #fbfcfe;
8
+ --eth-palette-neutral-50: #f6f7f9;
9
+ --eth-palette-neutral-100: #edf2f8;
10
+ --eth-palette-neutral-200: #dbe1ea;
11
+ --eth-palette-neutral-300: #c2ccd9;
12
+ --eth-palette-neutral-400: #9aa7b8;
13
+ --eth-palette-neutral-500: #6b7889;
14
+ --eth-palette-neutral-600: #5c6a7d;
15
+ --eth-palette-neutral-700: #526176;
16
+ --eth-palette-neutral-800: #33414f;
17
+ --eth-palette-neutral-900: #122033;
18
+ --eth-palette-neutral-950: #0b1623;
19
+ --eth-palette-blue-50: #edf6ff;
20
+ --eth-palette-blue-100: #dff0ff;
21
+ --eth-palette-blue-300: #7db2ff;
22
+ --eth-palette-blue-400: #4589ff;
23
+ --eth-palette-blue-500: #1768ff;
24
+ --eth-palette-blue-700: #0048d9;
25
+ --eth-palette-indigo-50: #eef0ff;
26
+ --eth-palette-indigo-300: #a5acff;
27
+ --eth-palette-indigo-500: #4f5bef;
28
+ --eth-palette-indigo-700: #3a3fd0;
29
+ --eth-palette-red-50: #fff1f1;
30
+ --eth-palette-red-300: #ff9a9f;
31
+ --eth-palette-red-500: #da1e28;
32
+ --eth-palette-red-700: #a2191f;
33
+ --eth-palette-green-50: #defbe6;
34
+ --eth-palette-green-300: #6fdc8c;
35
+ --eth-palette-green-500: #24a148;
36
+ --eth-palette-green-700: #198038;
37
+ --eth-palette-yellow-50: #fcf4d6;
38
+ --eth-palette-yellow-300: #f5d76e;
39
+ --eth-palette-yellow-500: #f1c21b;
40
+ --eth-palette-yellow-700: #8a6d00;
41
+ }
42
+
43
+ /* src/primitives.css */
44
+ :root {
45
+ --eth-radius-0: 0;
46
+ --eth-radius-1: 2px;
47
+ --eth-radius-2: 4px;
48
+ --eth-radius-3: 6px;
49
+ --eth-radius-4: 8px;
50
+ --eth-radius-5: 10px;
51
+ --eth-radius-6: 12px;
52
+ --eth-radius-7: 16px;
53
+ --eth-radius-round: 999px;
54
+ --eth-space-0: 0;
55
+ --eth-space-1: 2px;
56
+ --eth-space-2: 4px;
57
+ --eth-space-3: 6px;
58
+ --eth-space-4: 8px;
59
+ --eth-space-5: 12px;
60
+ --eth-space-6: 16px;
61
+ --eth-space-7: 20px;
62
+ --eth-space-8: 24px;
63
+ --eth-space-9: 32px;
64
+ --eth-space-10: 40px;
65
+ --eth-space-11: 48px;
66
+ --eth-space-12: 64px;
67
+ --eth-border-width-0: 0;
68
+ --eth-border-width-1: 1px;
69
+ --eth-border-width-2: 2px;
70
+ --eth-border-width-3: 3px;
71
+ --eth-blur-0: 0;
72
+ --eth-blur-1: 4px;
73
+ --eth-blur-2: 8px;
74
+ --eth-blur-3: 16px;
75
+ --eth-blur-4: 24px;
76
+ --eth-duration-fast: 70ms;
77
+ --eth-duration-base: 110ms;
78
+ --eth-duration-slow: 240ms;
79
+ --eth-easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
80
+ --eth-easing-entrance: cubic-bezier(0, 0, 0.38, 0.9);
81
+ --eth-easing-exit: cubic-bezier(0.2, 0, 1, 0.9);
82
+ --eth-z-base: 0;
83
+ --eth-z-sticky: 100;
84
+ --eth-z-overlay: 1000;
85
+ --eth-z-modal: 1100;
86
+ --eth-z-popover: 1200;
87
+ --eth-z-toast: 1300;
88
+ --eth-z-tooltip: 1400;
89
+ --eth-shadow-umbra: rgb(31 41 51 / 10%);
90
+ --eth-shadow-penumbra: rgb(31 41 51 / 6%);
91
+ --eth-elevation-0: none;
92
+ --eth-elevation-1: 0 1px 2px var(--eth-shadow-umbra);
93
+ --eth-elevation-2: 0 2px 6px var(--eth-shadow-umbra), 0 1px 2px var(--eth-shadow-penumbra);
94
+ --eth-elevation-3: 0 8px 24px var(--eth-shadow-umbra), 0 2px 6px var(--eth-shadow-penumbra);
95
+ --eth-elevation-4: 0 16px 48px var(--eth-shadow-umbra), 0 4px 12px var(--eth-shadow-penumbra);
96
+ }
97
+
98
+ /* src/base-roles.css */
99
+ :root {
100
+ --eth-bridge-bg: var(--eth-color-background);
101
+ --eth-focus-ring-color: var(--eth-color-focus);
102
+ --eth-focus-ring-width: 2px;
103
+ --eth-focus-ring-offset: 2px;
104
+ --eth-focus-ring: var(--eth-focus-ring-width) solid var(--eth-focus-ring-color);
105
+ --eth-field-bg: var(--eth-color-layer-01);
106
+ --eth-field-bg-hover: var(--eth-color-layer-hover);
107
+ --eth-field-bg-disabled: var(--eth-color-layer-02);
108
+ --eth-field-text: var(--eth-color-text-primary);
109
+ --eth-field-placeholder: var(--eth-color-text-helper);
110
+ --eth-field-text-disabled: var(--eth-color-text-helper);
111
+ --eth-field-label-text: var(--eth-color-text-secondary);
112
+ --eth-field-helper-text: var(--eth-color-text-helper);
113
+ --eth-field-border: var(--eth-control-border);
114
+ --eth-field-border-bottom: var(--eth-field-border);
115
+ --eth-field-border-hover: var(--eth-border-width-1) solid var(--eth-color-border-strong);
116
+ --eth-field-border-strong: var(--eth-border-width-1) solid var(--eth-color-border-strong);
117
+ --eth-field-radius: var(--eth-radius-control);
118
+ --eth-field-shadow: none;
119
+ --eth-field-backdrop-filter: none;
120
+ --eth-field-invalid-border: var(--eth-border-width-2) solid var(--eth-color-danger);
121
+ --eth-field-warning-border: var(--eth-border-width-2) solid var(--eth-color-warning);
122
+ --eth-field-border-style: full;
123
+ --eth-btn-radius: var(--eth-radius-control);
124
+ --eth-btn-focus-ring: var(--eth-focus-ring);
125
+ --eth-btn-primary-bg: var(--eth-color-interactive-primary);
126
+ --eth-btn-primary-bg-hover: var(--eth-color-interactive-strong);
127
+ --eth-btn-primary-bg-active: var(--eth-color-interactive-strong);
128
+ --eth-btn-primary-text: #ffffff;
129
+ --eth-btn-secondary-bg: var(--eth-color-text-primary);
130
+ --eth-btn-secondary-bg-hover: var(--eth-color-text-secondary);
131
+ --eth-btn-secondary-bg-active: var(--eth-color-text-secondary);
132
+ --eth-btn-secondary-text: #ffffff;
133
+ --eth-btn-tertiary-bg: transparent;
134
+ --eth-btn-tertiary-bg-hover: var(--eth-color-layer-hover);
135
+ --eth-btn-tertiary-text: var(--eth-color-interactive-primary);
136
+ --eth-btn-ghost-bg: transparent;
137
+ --eth-btn-ghost-bg-hover: var(--eth-color-layer-hover);
138
+ --eth-btn-ghost-text: var(--eth-color-interactive-primary);
139
+ --eth-btn-danger-bg: var(--eth-color-danger);
140
+ --eth-btn-danger-bg-hover: #b81922;
141
+ --eth-btn-danger-bg-active: #a2191f;
142
+ --eth-btn-danger-text: #ffffff;
143
+ --eth-btn-success-bg: var(--eth-color-success);
144
+ --eth-btn-success-bg-hover: var(--eth-palette-green-700);
145
+ --eth-btn-success-text: #ffffff;
146
+ --eth-btn-disabled-bg: var(--eth-color-layer-02);
147
+ --eth-btn-disabled-text: var(--eth-color-text-helper);
148
+ --eth-btn-primary-border: 1px solid var(--eth-btn-primary-bg);
149
+ --eth-btn-secondary-border: 1px solid var(--eth-btn-secondary-bg);
150
+ --eth-btn-tertiary-border: var(--eth-border-width-1) solid var(--eth-btn-tertiary-text);
151
+ --eth-btn-ghost-border: 1px solid transparent;
152
+ --eth-btn-danger-border: 1px solid var(--eth-btn-danger-bg);
153
+ --eth-btn-success-border: 1px solid var(--eth-btn-success-bg);
154
+ --eth-btn-disabled-border: 1px solid var(--eth-btn-disabled-bg);
155
+ --eth-btn-shadow: none;
156
+ --eth-btn-backdrop-filter: none;
157
+ --eth-card-bg: var(--eth-color-card);
158
+ --eth-card-radius: var(--eth-radius-card);
159
+ --eth-card-shadow: var(--eth-shadow-card);
160
+ --eth-card-backdrop-filter: var(--eth-backdrop-filter);
161
+ --eth-card-header-bg: transparent;
162
+ --eth-card-footer-bg: transparent;
163
+ --eth-card-divider: var(--eth-divider-width) solid var(--eth-divider-color);
164
+ --eth-control-bg: var(--eth-color-control);
165
+ --eth-control-bg-hover: var(--eth-color-control-hover);
166
+ --eth-control-bg-active: var(--eth-color-layer-hover);
167
+ --eth-control-bg-selected: var(--eth-color-layer-selected);
168
+ --eth-control-bg-disabled: var(--eth-color-layer-02);
169
+ --eth-control-text: var(--eth-color-text-primary);
170
+ --eth-control-text-disabled: var(--eth-color-text-helper);
171
+ --eth-control-radius: var(--eth-radius-control);
172
+ --eth-control-focus-ring: var(--eth-focus-ring);
173
+ --eth-table-bg: var(--eth-color-layer-01);
174
+ --eth-table-border: var(--eth-card-border);
175
+ --eth-table-radius: var(--eth-radius-card);
176
+ --eth-table-shadow: var(--eth-shadow-card);
177
+ --eth-table-header-bg: var(--eth-color-layer-02);
178
+ --eth-table-header-text: var(--eth-color-text-secondary);
179
+ --eth-table-row-bg: var(--eth-color-layer-01);
180
+ --eth-table-row-bg-alt: var(--eth-color-layer-01);
181
+ --eth-table-row-hover-bg: var(--eth-color-layer-hover);
182
+ --eth-table-row-selected-bg: var(--eth-color-layer-selected);
183
+ --eth-table-row-selected-hover-bg: var(--eth-color-layer-selected);
184
+ --eth-table-row-selected-accent: var(--eth-color-interactive-primary);
185
+ --eth-table-cell-text: var(--eth-color-text-primary);
186
+ --eth-table-gridline: var(--eth-color-border-subtle);
187
+ --eth-table-gridline-width: var(--eth-border-width-1);
188
+ --eth-table-gridline-axis: both;
189
+ --eth-table-row-border: var(--eth-table-gridline-width) solid var(--eth-table-gridline);
190
+ --eth-table-column-border: var(--eth-table-gridline-width) solid var(--eth-table-gridline);
191
+ --eth-table-backdrop-filter: none;
192
+ --eth-divider-color: var(--eth-color-border-subtle);
193
+ --eth-divider-width: var(--eth-border-width-1);
194
+ --eth-overlay-bg: rgb(22 22 22 / 50%);
195
+ --eth-popover-bg: var(--eth-color-overlay);
196
+ --eth-popover-border: var(--eth-overlay-border);
197
+ --eth-popover-radius: var(--eth-radius-overlay);
198
+ --eth-popover-shadow: var(--eth-shadow-overlay);
199
+ --eth-popover-blur: var(--eth-backdrop-filter-overlay);
200
+ --eth-status-info-bg: var(--eth-palette-blue-50);
201
+ --eth-status-info-text: var(--eth-palette-blue-700);
202
+ --eth-status-info-border: var(--eth-palette-blue-300);
203
+ --eth-status-info-icon: var(--eth-palette-blue-500);
204
+ --eth-status-success-bg: var(--eth-palette-green-50);
205
+ --eth-status-success-text: var(--eth-palette-green-700);
206
+ --eth-status-success-border: var(--eth-palette-green-300);
207
+ --eth-status-success-icon: var(--eth-palette-green-500);
208
+ --eth-status-warning-bg: var(--eth-palette-yellow-50);
209
+ --eth-status-warning-text: var(--eth-palette-yellow-700);
210
+ --eth-status-warning-border: var(--eth-palette-yellow-300);
211
+ --eth-status-warning-icon: var(--eth-palette-yellow-500);
212
+ --eth-status-danger-bg: var(--eth-palette-red-50);
213
+ --eth-status-danger-text: var(--eth-palette-red-700);
214
+ --eth-status-danger-border: var(--eth-palette-red-300);
215
+ --eth-status-danger-icon: var(--eth-palette-red-500);
216
+ --eth-status-neutral-bg: var(--eth-palette-neutral-100);
217
+ --eth-status-neutral-text: var(--eth-palette-neutral-700);
218
+ --eth-status-neutral-border: var(--eth-palette-neutral-200);
219
+ --eth-status-neutral-icon: var(--eth-palette-neutral-500);
220
+ --eth-font-family-sans:
221
+ "IBM Plex Sans",
222
+ system-ui,
223
+ -apple-system,
224
+ "Segoe UI",
225
+ Roboto,
226
+ sans-serif;
227
+ --eth-font-family-mono:
228
+ "IBM Plex Mono",
229
+ "SFMono-Regular",
230
+ Consolas,
231
+ "Liberation Mono",
232
+ Menlo,
233
+ monospace;
234
+ --eth-font-weight-title: 600;
235
+ --eth-font-weight-body: 400;
236
+ --eth-control-height: 40px;
237
+ --eth-control-padding-inline: 1rem;
238
+ --eth-control-padding-block: 0.5rem;
239
+ --eth-row-height: 48px;
240
+ --eth-cell-padding-inline: var(--eth-space-6);
241
+ --eth-cell-padding-block: var(--eth-space-4);
242
+ --eth-field-gap: var(--eth-space-5);
243
+ --eth-section-gap: var(--eth-space-9);
244
+ --eth-card-padding: var(--eth-space-8);
245
+ }
246
+
247
+ /* src/density.css */
248
+ [data-eth-density=compact] {
249
+ --eth-control-height: 32px;
250
+ --eth-control-padding-inline: 0.75rem;
251
+ --eth-control-padding-block: 0.25rem;
252
+ --eth-row-height: 32px;
253
+ --eth-cell-padding-inline: var(--eth-space-5);
254
+ --eth-cell-padding-block: var(--eth-space-2);
255
+ --eth-field-gap: var(--eth-space-3);
256
+ --eth-section-gap: var(--eth-space-6);
257
+ --eth-card-padding: var(--eth-space-6);
258
+ }
259
+ [data-eth-density=comfortable] {
260
+ --eth-control-height: 48px;
261
+ --eth-control-padding-inline: 1.25rem;
262
+ --eth-control-padding-block: 0.75rem;
263
+ --eth-row-height: 56px;
264
+ --eth-cell-padding-inline: var(--eth-space-7);
265
+ --eth-cell-padding-block: var(--eth-space-5);
266
+ --eth-field-gap: var(--eth-space-6);
267
+ --eth-section-gap: var(--eth-space-10);
268
+ --eth-card-padding: var(--eth-space-9);
269
+ }
270
+
271
+ /* src/type-scale.css */
272
+ :root {
273
+ --eth-font-size-caption: 0.75rem;
274
+ --eth-font-size-body-sm: 0.8125rem;
275
+ --eth-font-size-body: 0.875rem;
276
+ --eth-font-size-body-lg: 1rem;
277
+ --eth-font-size-heading-sm: 1rem;
278
+ --eth-font-size-heading: 1.25rem;
279
+ --eth-font-size-heading-lg: 1.75rem;
280
+ --eth-font-size-display: 2.5rem;
281
+ --eth-line-height-tight: 1.25;
282
+ --eth-line-height-body: 1.5;
283
+ --eth-letter-spacing-tight: -0.01em;
284
+ --eth-letter-spacing-normal: 0;
285
+ }
286
+ [data-eth-type=compact] {
287
+ --eth-font-size-caption: 0.6875rem;
288
+ --eth-font-size-body-sm: 0.75rem;
289
+ --eth-font-size-body: 0.8125rem;
290
+ --eth-font-size-body-lg: 0.9375rem;
291
+ --eth-font-size-heading-sm: 0.9375rem;
292
+ --eth-font-size-heading: 1.125rem;
293
+ --eth-font-size-heading-lg: 1.5rem;
294
+ --eth-font-size-display: 2rem;
295
+ --eth-line-height-body: 1.4;
296
+ }
297
+ [data-eth-type=large] {
298
+ --eth-font-size-caption: 0.8125rem;
299
+ --eth-font-size-body-sm: 0.875rem;
300
+ --eth-font-size-body: 1rem;
301
+ --eth-font-size-body-lg: 1.125rem;
302
+ --eth-font-size-heading-sm: 1.125rem;
303
+ --eth-font-size-heading: 1.375rem;
304
+ --eth-font-size-heading-lg: 2rem;
305
+ --eth-font-size-display: 3rem;
306
+ --eth-line-height-body: 1.6;
307
+ }
308
+
309
+ /* src/presets.css */
310
+ :root,
311
+ .eth-style-carbon-like {
312
+ --eth-color-background: var(--cds-white, #ffffff);
313
+ --eth-color-text-primary: var(--cds-gray-100, #161616);
314
+ --eth-color-text-secondary: var(--cds-gray-70, #525252);
315
+ --eth-color-text-helper: var(--cds-gray-60, #6f6f6f);
316
+ --eth-color-border-subtle: var(--cds-gray-20, #e0e0e0);
317
+ --eth-color-border-strong: var(--cds-gray-50, #8d8d8d);
318
+ --eth-color-interactive-primary: var(--cds-blue-60, #0f62fe);
319
+ --eth-color-interactive-strong: var(--cds-blue-70, #0043ce);
320
+ --eth-color-link: var(--cds-blue-60, #0f62fe);
321
+ --eth-color-layer-01: var(--cds-gray-10, #f4f4f4);
322
+ --eth-color-layer-02: var(--cds-white, #ffffff);
323
+ --eth-color-layer-hover: #e8e8e8;
324
+ --eth-color-layer-selected: var(--cds-gray-20, #e0e0e0);
325
+ --eth-color-card: var(--cds-gray-10, #f4f4f4);
326
+ --eth-color-control: transparent;
327
+ --eth-color-control-hover: var(--eth-color-layer-hover);
328
+ --eth-color-overlay: var(--cds-white, #ffffff);
329
+ --eth-color-focus: var(--cds-blue-60, #0f62fe);
330
+ --eth-border: 1px solid var(--eth-color-border-subtle);
331
+ --eth-card-border: 1px solid var(--eth-color-border-subtle);
332
+ --eth-control-border: 1px solid var(--eth-color-border-subtle);
333
+ --eth-overlay-border: 1px solid var(--eth-color-border-subtle);
334
+ --eth-radius-surface: 0;
335
+ --eth-radius-card: 0;
336
+ --eth-radius-control: 0;
337
+ --eth-radius-overlay: 0;
338
+ --eth-shadow-surface: none;
339
+ --eth-shadow-card: none;
340
+ --eth-shadow-overlay: 0 12px 32px rgb(22 22 22 / 16%);
341
+ --eth-backdrop-filter: none;
342
+ --eth-backdrop-filter-overlay: none;
343
+ --eth-effect-ambient: linear-gradient(transparent, transparent);
344
+ --eth-effect-highlight: linear-gradient(transparent, transparent);
345
+ --eth-card-bg: var(--eth-color-card);
346
+ --eth-card-radius: 0;
347
+ --eth-card-shadow: none;
348
+ --eth-card-backdrop-filter: none;
349
+ --eth-card-header-bg: transparent;
350
+ --eth-card-footer-bg: var(--eth-color-layer-02);
351
+ --eth-card-divider: 1px solid var(--eth-color-border-subtle);
352
+ --eth-shadow-umbra: rgb(0 0 0 / 8%);
353
+ --eth-shadow-penumbra: rgb(0 0 0 / 4%);
354
+ --eth-bridge-bg: var(--cds-white, #ffffff);
355
+ --eth-field-bg: var(--cds-gray-10, #f4f4f4);
356
+ --eth-field-bg-hover: #e8e8e8;
357
+ --eth-field-text: var(--eth-color-text-primary);
358
+ --eth-field-placeholder: var(--eth-color-text-helper);
359
+ --eth-field-border: 1px solid transparent;
360
+ --eth-field-border-bottom: 1px solid var(--eth-color-border-strong);
361
+ --eth-field-border-strong: 1px solid var(--eth-color-border-strong);
362
+ --eth-field-radius: 0;
363
+ --eth-field-shadow: none;
364
+ --eth-field-backdrop-filter: none;
365
+ --eth-field-border-style: bottom;
366
+ --eth-btn-radius: 0;
367
+ --eth-btn-secondary-bg: #393939;
368
+ --eth-btn-secondary-bg-hover: #4c4c4c;
369
+ --eth-btn-secondary-bg-active: #6f6f6f;
370
+ --eth-btn-secondary-text: #ffffff;
371
+ --eth-btn-shadow: none;
372
+ --eth-btn-backdrop-filter: none;
373
+ --eth-table-header-bg: var(--eth-color-layer-02);
374
+ --eth-table-row-border: 1px solid var(--eth-table-gridline, var(--eth-color-border-subtle));
375
+ --eth-table-column-border: 1px solid var(--eth-table-gridline, var(--eth-color-border-subtle));
376
+ --eth-table-gridline-axis: both;
377
+ --eth-table-row-selected-accent: var(--eth-color-interactive-primary);
378
+ }
379
+ .eth-style-soft-card {
380
+ --eth-color-background: #eff0f2;
381
+ --eth-color-text-primary: #17191d;
382
+ --eth-color-text-secondary: #666d78;
383
+ --eth-color-text-helper: #7b838d;
384
+ --eth-color-border-subtle: #dedfe3;
385
+ --eth-color-border-strong: #bfc2c8;
386
+ --eth-color-interactive-primary: #1f5fd6;
387
+ --eth-color-interactive-strong: #164eb6;
388
+ --eth-color-link: #164eb6;
389
+ --eth-color-layer-01: #ffffff;
390
+ --eth-color-layer-02: #f8f8f9;
391
+ --eth-color-layer-hover: #f1f2f4;
392
+ --eth-color-layer-selected: #eaf1ff;
393
+ --eth-color-card: #ffffff;
394
+ --eth-color-control: #ffffff;
395
+ --eth-color-control-hover: #f4f5f6;
396
+ --eth-color-overlay: #ffffff;
397
+ --eth-color-focus: #2f6df6;
398
+ --eth-color-danger: #c93645;
399
+ --eth-color-warning: #d89112;
400
+ --eth-color-success: #16a35b;
401
+ --eth-color-info: #1f5fd6;
402
+ --eth-border: 1px solid #dedfe3;
403
+ --eth-card-border: 1px solid #e1e2e5;
404
+ --eth-control-border: 1px solid #d9dade;
405
+ --eth-overlay-border: 1px solid #d9dade;
406
+ --eth-radius-surface: 14px;
407
+ --eth-radius-card: 14px;
408
+ --eth-radius-control: 10px;
409
+ --eth-radius-overlay: 14px;
410
+ --eth-shadow-surface: 0 10px 26px rgb(17 19 24 / 7%);
411
+ --eth-shadow-card: 0 2px 12px rgb(17 19 24 / 7%);
412
+ --eth-shadow-overlay: 0 18px 48px rgb(17 19 24 / 14%);
413
+ --eth-backdrop-filter: none;
414
+ --eth-backdrop-filter-overlay: none;
415
+ --eth-card-bg: #ffffff;
416
+ --eth-card-radius: 14px;
417
+ --eth-card-shadow: 0 2px 12px rgb(17 19 24 / 7%);
418
+ --eth-card-backdrop-filter: none;
419
+ --eth-card-header-bg: transparent;
420
+ --eth-card-footer-bg: #fafafa;
421
+ --eth-card-divider: 1px solid #e8e8eb;
422
+ --eth-shadow-umbra: rgb(17 19 24 / 10%);
423
+ --eth-shadow-penumbra: rgb(17 19 24 / 5%);
424
+ --eth-bridge-bg: #eff0f2;
425
+ --eth-field-bg: #ffffff;
426
+ --eth-field-bg-hover: #ffffff;
427
+ --eth-field-bg-disabled: #f4f4f5;
428
+ --eth-field-text: #17191d;
429
+ --eth-field-placeholder: #878d96;
430
+ --eth-field-border: 1px solid #d9dade;
431
+ --eth-field-border-hover: 1px solid #bfc2c8;
432
+ --eth-field-radius: 10px;
433
+ --eth-field-shadow: 0 1px 2px rgb(17 19 24 / 5%);
434
+ --eth-field-backdrop-filter: none;
435
+ --eth-field-border-style: full;
436
+ --eth-btn-radius: 10px;
437
+ --eth-btn-primary-bg: #17191d;
438
+ --eth-btn-primary-bg-hover: #2a2d33;
439
+ --eth-btn-primary-bg-active: #050608;
440
+ --eth-btn-primary-text: #ffffff;
441
+ --eth-btn-secondary-bg: #ffffff;
442
+ --eth-btn-secondary-bg-hover: #f1f2f4;
443
+ --eth-btn-secondary-bg-active: #e7e8eb;
444
+ --eth-btn-secondary-text: #17191d;
445
+ --eth-btn-tertiary-text: #17191d;
446
+ --eth-btn-ghost-text: #17191d;
447
+ --eth-btn-danger-bg: #c93645;
448
+ --eth-btn-danger-bg-hover: #ad2e3b;
449
+ --eth-btn-success-bg: #16a35b;
450
+ --eth-btn-success-bg-hover: #12834a;
451
+ --eth-btn-disabled-bg: #f1f2f4;
452
+ --eth-btn-disabled-text: #a2a6ad;
453
+ --eth-btn-primary-border: 1px solid #17191d;
454
+ --eth-btn-secondary-border: 1px solid #d9dade;
455
+ --eth-btn-tertiary-border: 1px solid #c9cbd0;
456
+ --eth-btn-ghost-border: 1px solid transparent;
457
+ --eth-btn-shadow: 0 2px 8px rgb(17 19 24 / 8%);
458
+ --eth-btn-backdrop-filter: none;
459
+ --eth-table-bg: #ffffff;
460
+ --eth-table-border: 1px solid #e1e2e5;
461
+ --eth-table-radius: 14px;
462
+ --eth-table-shadow: 0 2px 12px rgb(17 19 24 / 6%);
463
+ --eth-table-header-bg: #fafafa;
464
+ --eth-table-header-text: #666d78;
465
+ --eth-table-gridline: #e9eaed;
466
+ --eth-table-row-border: 1px solid #e9eaed;
467
+ --eth-table-column-border: 0 solid transparent;
468
+ --eth-table-gridline-axis: horizontal;
469
+ --eth-table-row-hover-bg: #f6f7f8;
470
+ --eth-table-row-selected-bg: #eef4ff;
471
+ --eth-table-row-selected-hover-bg: #e5efff;
472
+ --eth-table-row-selected-accent: #1f5fd6;
473
+ --eth-status-info-bg: #eef4ff;
474
+ --eth-status-info-text: #164eb6;
475
+ --eth-status-info-border: #cfe0ff;
476
+ --eth-status-info-icon: #1f5fd6;
477
+ --eth-status-success-bg: #e8f8ef;
478
+ --eth-status-success-text: #0f6f3c;
479
+ --eth-status-success-border: #c8efd8;
480
+ --eth-status-success-icon: #16a35b;
481
+ --eth-status-warning-bg: #fff5df;
482
+ --eth-status-warning-text: #8a5c08;
483
+ --eth-status-warning-border: #f5dfab;
484
+ --eth-status-warning-icon: #d89112;
485
+ --eth-status-danger-bg: #fff0f2;
486
+ --eth-status-danger-text: #9e2633;
487
+ --eth-status-danger-border: #f2c8cf;
488
+ --eth-status-danger-icon: #c93645;
489
+ --eth-status-neutral-bg: #f1f2f4;
490
+ --eth-status-neutral-text: #5d646f;
491
+ --eth-status-neutral-border: #dedfe3;
492
+ --eth-status-neutral-icon: #7b838d;
493
+ --eth-focus-ring-color: #2f6df6;
494
+ --eth-font-family-sans:
495
+ "Inter",
496
+ system-ui,
497
+ -apple-system,
498
+ "Segoe UI",
499
+ Roboto,
500
+ sans-serif;
501
+ --eth-font-weight-title: 650;
502
+ }
503
+ .eth-style-glass {
504
+ --eth-color-background:
505
+ radial-gradient(
506
+ circle at 18% 18%,
507
+ rgb(255 255 255 / 74%) 0 10rem,
508
+ transparent 26rem),
509
+ radial-gradient(
510
+ circle at 72% 18%,
511
+ rgb(207 221 228 / 46%) 0 18rem,
512
+ transparent 34rem),
513
+ radial-gradient(
514
+ circle at 80% 78%,
515
+ rgb(202 221 206 / 36%) 0 14rem,
516
+ transparent 28rem),
517
+ linear-gradient(
518
+ 135deg,
519
+ #c4ccce 0%,
520
+ #e9eeee 52%,
521
+ #cbd5d8 100%);
522
+ --eth-color-text-primary: #20272b;
523
+ --eth-color-text-secondary: #687274;
524
+ --eth-color-text-helper: #7c8587;
525
+ --eth-color-border-subtle: rgb(255 255 255 / 52%);
526
+ --eth-color-border-strong: rgb(255 255 255 / 74%);
527
+ --eth-color-interactive-primary: #4b8df7;
528
+ --eth-color-interactive-strong: #2f73dc;
529
+ --eth-color-link: #316fca;
530
+ --eth-color-layer-01: rgb(255 255 255 / 38%);
531
+ --eth-color-layer-02: rgb(255 255 255 / 26%);
532
+ --eth-color-layer-hover: rgb(255 255 255 / 52%);
533
+ --eth-color-layer-selected: rgb(80 141 247 / 16%);
534
+ --eth-color-card: rgb(255 255 255 / 36%);
535
+ --eth-color-control: rgb(255 255 255 / 30%);
536
+ --eth-color-control-hover: rgb(255 255 255 / 52%);
537
+ --eth-color-overlay: rgb(255 255 255 / 48%);
538
+ --eth-color-focus: #4b8df7;
539
+ --eth-color-danger: #ff4d59;
540
+ --eth-color-warning: #ff9d2f;
541
+ --eth-color-success: #20b956;
542
+ --eth-color-info: #4b8df7;
543
+ --eth-border: 1px solid rgb(255 255 255 / 52%);
544
+ --eth-card-border: 1px solid rgb(255 255 255 / 56%);
545
+ --eth-control-border: 1px solid rgb(255 255 255 / 44%);
546
+ --eth-overlay-border: 1px solid rgb(255 255 255 / 62%);
547
+ --eth-radius-surface: 18px;
548
+ --eth-radius-card: 18px;
549
+ --eth-radius-control: 12px;
550
+ --eth-radius-overlay: 20px;
551
+ --eth-shadow-surface:
552
+ 0 28px 90px rgb(51 62 66 / 22%),
553
+ 0 10px 30px rgb(51 62 66 / 12%),
554
+ inset 0 1px 0 rgb(255 255 255 / 68%);
555
+ --eth-shadow-card:
556
+ 0 18px 54px rgb(51 62 66 / 16%),
557
+ inset 0 1px 0 rgb(255 255 255 / 64%),
558
+ inset 0 -18px 42px rgb(255 255 255 / 10%);
559
+ --eth-shadow-overlay: 0 34px 110px rgb(51 62 66 / 24%), inset 0 1px 0 rgb(255 255 255 / 70%);
560
+ --eth-backdrop-filter: blur(22px) saturate(1.22);
561
+ --eth-backdrop-filter-overlay: blur(28px) saturate(1.28);
562
+ --eth-effect-ambient:
563
+ radial-gradient(
564
+ circle at 14% 18%,
565
+ rgb(255 255 255 / 42%) 0 8rem,
566
+ transparent 20rem),
567
+ radial-gradient(
568
+ circle at 84% 12%,
569
+ rgb(192 211 220 / 30%) 0 13rem,
570
+ transparent 26rem),
571
+ radial-gradient(
572
+ circle at 88% 78%,
573
+ rgb(186 215 191 / 22%) 0 12rem,
574
+ transparent 26rem);
575
+ --eth-effect-highlight:
576
+ linear-gradient(
577
+
578
+ 135deg,
579
+ rgb(255 255 255 / 42%) 0%,
580
+ rgb(255 255 255 / 16%) 42%,
581
+ rgb(211 224 228 / 10%) 100% );
582
+ --eth-card-bg: rgb(255 255 255 / 40%);
583
+ --eth-card-radius: 18px;
584
+ --eth-card-shadow: var(--eth-shadow-card);
585
+ --eth-card-backdrop-filter: var(--eth-backdrop-filter);
586
+ --eth-card-header-bg: rgb(255 255 255 / 18%);
587
+ --eth-card-footer-bg: rgb(255 255 255 / 24%);
588
+ --eth-card-divider: 1px solid rgb(255 255 255 / 38%);
589
+ --eth-shadow-umbra: rgb(51 62 66 / 18%);
590
+ --eth-shadow-penumbra: rgb(51 62 66 / 10%);
591
+ --eth-bridge-bg: #e9eeee;
592
+ --eth-field-bg: rgb(255 255 255 / 50%);
593
+ --eth-field-bg-hover: rgb(255 255 255 / 66%);
594
+ --eth-field-bg-disabled: rgb(255 255 255 / 24%);
595
+ --eth-field-text: #20272b;
596
+ --eth-field-placeholder: #687274;
597
+ --eth-field-border: 1px solid rgb(255 255 255 / 46%);
598
+ --eth-field-border-hover: 1px solid rgb(255 255 255 / 70%);
599
+ --eth-field-radius: 12px;
600
+ --eth-field-shadow: inset 0 1px 0 rgb(255 255 255 / 60%), 0 8px 22px rgb(51 62 66 / 9%);
601
+ --eth-field-backdrop-filter: blur(16px) saturate(1.18);
602
+ --eth-field-border-style: full;
603
+ --eth-btn-radius: 12px;
604
+ --eth-btn-primary-bg: #4b8df7;
605
+ --eth-btn-primary-bg-hover: #3379e7;
606
+ --eth-btn-primary-bg-active: #2d68c8;
607
+ --eth-btn-primary-text: #ffffff;
608
+ --eth-btn-secondary-bg: rgb(255 255 255 / 42%);
609
+ --eth-btn-secondary-bg-hover: rgb(255 255 255 / 62%);
610
+ --eth-btn-secondary-bg-active: rgb(255 255 255 / 70%);
611
+ --eth-btn-secondary-text: #20272b;
612
+ --eth-btn-danger-bg: #ff4d59;
613
+ --eth-btn-danger-bg-hover: #e83d48;
614
+ --eth-btn-success-bg: #20b956;
615
+ --eth-btn-success-bg-hover: #17a249;
616
+ --eth-btn-disabled-bg: rgb(255 255 255 / 24%);
617
+ --eth-btn-disabled-text: #8e9799;
618
+ --eth-btn-primary-border: 1px solid rgb(75 141 247 / 55%);
619
+ --eth-btn-secondary-border: 1px solid rgb(255 255 255 / 48%);
620
+ --eth-btn-tertiary-border: 1px solid rgb(75 141 247 / 48%);
621
+ --eth-btn-ghost-border: 1px solid transparent;
622
+ --eth-btn-shadow: 0 10px 28px rgb(51 62 66 / 14%), inset 0 1px 0 rgb(255 255 255 / 56%);
623
+ --eth-btn-backdrop-filter: blur(16px) saturate(1.2);
624
+ --eth-table-bg: rgb(255 255 255 / 42%);
625
+ --eth-table-border: 1px solid rgb(255 255 255 / 54%);
626
+ --eth-table-radius: 18px;
627
+ --eth-table-shadow: var(--eth-shadow-card);
628
+ --eth-table-backdrop-filter: var(--eth-backdrop-filter);
629
+ --eth-table-header-bg: rgb(255 255 255 / 28%);
630
+ --eth-table-header-text: #5d686b;
631
+ --eth-table-gridline: rgb(32 39 43 / 7%);
632
+ --eth-table-row-border: 1px solid rgb(255 255 255 / 22%);
633
+ --eth-table-column-border: 0 solid transparent;
634
+ --eth-table-gridline-axis: horizontal;
635
+ --eth-table-row-hover-bg: rgb(255 255 255 / 50%);
636
+ --eth-table-row-selected-bg: rgb(75 141 247 / 14%);
637
+ --eth-table-row-selected-hover-bg: rgb(75 141 247 / 20%);
638
+ --eth-table-row-selected-accent: transparent;
639
+ --eth-status-info-bg: rgb(75 141 247 / 14%);
640
+ --eth-status-info-text: #245fb4;
641
+ --eth-status-info-border: rgb(75 141 247 / 24%);
642
+ --eth-status-info-icon: #4b8df7;
643
+ --eth-status-success-bg: rgb(32 185 86 / 14%);
644
+ --eth-status-success-text: #0f7a39;
645
+ --eth-status-success-border: rgb(32 185 86 / 26%);
646
+ --eth-status-success-icon: #20b956;
647
+ --eth-status-warning-bg: rgb(255 157 47 / 16%);
648
+ --eth-status-warning-text: #8a5200;
649
+ --eth-status-warning-border: rgb(255 157 47 / 26%);
650
+ --eth-status-warning-icon: #ff9d2f;
651
+ --eth-status-danger-bg: rgb(255 77 89 / 14%);
652
+ --eth-status-danger-text: #a82531;
653
+ --eth-status-danger-border: rgb(255 77 89 / 26%);
654
+ --eth-status-danger-icon: #ff4d59;
655
+ --eth-status-neutral-bg: rgb(255 255 255 / 32%);
656
+ --eth-status-neutral-text: #5f696c;
657
+ --eth-status-neutral-border: rgb(255 255 255 / 38%);
658
+ --eth-status-neutral-icon: #7c8587;
659
+ --eth-popover-bg: rgb(255 255 255 / 72%);
660
+ --eth-popover-blur: blur(20px) saturate(1.28);
661
+ --eth-overlay-bg: rgb(32 39 43 / 34%);
662
+ --eth-font-family-sans:
663
+ "Inter",
664
+ system-ui,
665
+ -apple-system,
666
+ "Segoe UI",
667
+ Roboto,
668
+ sans-serif;
669
+ }
670
+ .eth-style-bright {
671
+ --eth-color-background: #efd6f2;
672
+ --eth-color-text-primary: #111111;
673
+ --eth-color-text-secondary: #5f5f66;
674
+ --eth-color-text-helper: #777780;
675
+ --eth-color-border-subtle: #e6e2e8;
676
+ --eth-color-border-strong: #c8c1ce;
677
+ --eth-color-interactive-primary: #111111;
678
+ --eth-color-interactive-strong: #000000;
679
+ --eth-color-link: #111111;
680
+ --eth-color-layer-01: #ffffff;
681
+ --eth-color-layer-02: #faf9fb;
682
+ --eth-color-layer-hover: #f4f1f6;
683
+ --eth-color-layer-selected: #f1e8ff;
684
+ --eth-color-card: #ffffff;
685
+ --eth-color-control: #ffffff;
686
+ --eth-color-control-hover: #f5f2f7;
687
+ --eth-color-overlay: #ffffff;
688
+ --eth-color-focus: #111111;
689
+ --eth-color-danger: #ff7e92;
690
+ --eth-color-warning: #ff9f24;
691
+ --eth-color-success: #b8ff86;
692
+ --eth-color-info: #d6c6ff;
693
+ --eth-border: 1px solid #e6e2e8;
694
+ --eth-card-border: 1px solid #e8e2ea;
695
+ --eth-control-border: 1px solid #ded8e2;
696
+ --eth-overlay-border: 1px solid #ded8e2;
697
+ --eth-radius-surface: 18px;
698
+ --eth-radius-card: 18px;
699
+ --eth-radius-control: 12px;
700
+ --eth-radius-overlay: 18px;
701
+ --eth-shadow-surface: 0 28px 70px rgb(40 28 44 / 10%);
702
+ --eth-shadow-card: 0 10px 28px rgb(40 28 44 / 8%);
703
+ --eth-shadow-overlay: 0 28px 80px rgb(40 28 44 / 16%);
704
+ --eth-backdrop-filter: none;
705
+ --eth-backdrop-filter-overlay: none;
706
+ --eth-card-bg: #ffffff;
707
+ --eth-card-radius: 18px;
708
+ --eth-card-shadow: 0 10px 28px rgb(40 28 44 / 8%);
709
+ --eth-card-backdrop-filter: none;
710
+ --eth-card-header-bg: transparent;
711
+ --eth-card-footer-bg: #fbf9fc;
712
+ --eth-card-divider: 1px solid #ece7ef;
713
+ --eth-shadow-umbra: rgb(40 28 44 / 10%);
714
+ --eth-shadow-penumbra: rgb(40 28 44 / 5%);
715
+ --eth-bridge-bg: #efd6f2;
716
+ --eth-field-bg: #ffffff;
717
+ --eth-field-bg-hover: #ffffff;
718
+ --eth-field-bg-disabled: #f2eef4;
719
+ --eth-field-text: #111111;
720
+ --eth-field-placeholder: #8b858e;
721
+ --eth-field-border: 1px solid #ded8e2;
722
+ --eth-field-border-hover: 1px solid #bdb4c4;
723
+ --eth-field-radius: 12px;
724
+ --eth-field-shadow: 0 2px 8px rgb(40 28 44 / 5%);
725
+ --eth-field-backdrop-filter: none;
726
+ --eth-field-border-style: full;
727
+ --eth-btn-radius: 14px;
728
+ --eth-btn-primary-bg: #111111;
729
+ --eth-btn-primary-bg-hover: #000000;
730
+ --eth-btn-primary-bg-active: #000000;
731
+ --eth-btn-primary-text: #ffffff;
732
+ --eth-btn-secondary-bg: #ffffff;
733
+ --eth-btn-secondary-bg-hover: #f4f1f6;
734
+ --eth-btn-secondary-bg-active: #ede7f1;
735
+ --eth-btn-secondary-text: #111111;
736
+ --eth-btn-tertiary-text: #111111;
737
+ --eth-btn-ghost-text: #111111;
738
+ --eth-btn-danger-bg: #ff7e92;
739
+ --eth-btn-danger-bg-hover: #f15e76;
740
+ --eth-btn-danger-text: #26070c;
741
+ --eth-btn-success-bg: #b8ff86;
742
+ --eth-btn-success-bg-hover: #a1ee6d;
743
+ --eth-btn-success-text: #112007;
744
+ --eth-btn-disabled-bg: #f1edf3;
745
+ --eth-btn-disabled-text: #aaa2ad;
746
+ --eth-btn-primary-border: 1px solid #111111;
747
+ --eth-btn-secondary-border: 1px solid #e2dce7;
748
+ --eth-btn-tertiary-border: 1px solid #111111;
749
+ --eth-btn-shadow: 0 8px 18px rgb(40 28 44 / 10%);
750
+ --eth-btn-backdrop-filter: none;
751
+ --eth-table-bg: #ffffff;
752
+ --eth-table-border: 1px solid #e8e2ea;
753
+ --eth-table-radius: 18px;
754
+ --eth-table-shadow: 0 10px 28px rgb(40 28 44 / 8%);
755
+ --eth-table-header-bg: #ffffff;
756
+ --eth-table-header-text: #656069;
757
+ --eth-table-gridline: #eee8f0;
758
+ --eth-table-row-border: 1px solid #eee8f0;
759
+ --eth-table-column-border: 0 solid transparent;
760
+ --eth-table-gridline-axis: horizontal;
761
+ --eth-table-row-hover-bg: #fbf7fc;
762
+ --eth-table-row-selected-bg: #f2e9ff;
763
+ --eth-table-row-selected-hover-bg: #eadcff;
764
+ --eth-table-row-selected-accent: #111111;
765
+ --eth-status-info-bg: #e7dbff;
766
+ --eth-status-info-text: #332254;
767
+ --eth-status-info-border: #d6c6ff;
768
+ --eth-status-info-icon: #7d5ee6;
769
+ --eth-status-success-bg: #d9ffc6;
770
+ --eth-status-success-text: #1d3a11;
771
+ --eth-status-success-border: #b8ff86;
772
+ --eth-status-success-icon: #5dcc32;
773
+ --eth-status-warning-bg: #ffe7bf;
774
+ --eth-status-warning-text: #522f00;
775
+ --eth-status-warning-border: #ffc86f;
776
+ --eth-status-warning-icon: #ff9f24;
777
+ --eth-status-danger-bg: #ffd0da;
778
+ --eth-status-danger-text: #5b1724;
779
+ --eth-status-danger-border: #ffafbd;
780
+ --eth-status-danger-icon: #ff6f86;
781
+ --eth-status-neutral-bg: #f4f1f6;
782
+ --eth-status-neutral-text: #5f5a64;
783
+ --eth-status-neutral-border: #e4dde8;
784
+ --eth-status-neutral-icon: #8d8492;
785
+ --eth-focus-ring-color: #111111;
786
+ --eth-font-family-sans:
787
+ "Inter",
788
+ system-ui,
789
+ -apple-system,
790
+ "Segoe UI",
791
+ Roboto,
792
+ sans-serif;
793
+ --eth-font-weight-title: 700;
794
+ }
795
+ .eth-style-studio-dark {
796
+ color-scheme: dark;
797
+ --eth-color-background: #050505;
798
+ --eth-color-text-primary: #f7f7f2;
799
+ --eth-color-text-secondary: #bebeb6;
800
+ --eth-color-text-helper: #8f908a;
801
+ --eth-color-border-subtle: #30302f;
802
+ --eth-color-border-strong: #484847;
803
+ --eth-color-interactive-primary: #a8ff4f;
804
+ --eth-color-interactive-strong: #c4ff78;
805
+ --eth-color-link: #c4ff78;
806
+ --eth-color-layer-01: #1f1f1f;
807
+ --eth-color-layer-02: #282828;
808
+ --eth-color-layer-hover: #303030;
809
+ --eth-color-layer-selected: #2f3f1f;
810
+ --eth-color-card: #202020;
811
+ --eth-color-control: #242424;
812
+ --eth-color-control-hover: #303030;
813
+ --eth-color-overlay: #202020;
814
+ --eth-color-focus: #a8ff4f;
815
+ --eth-color-danger: #ff9f24;
816
+ --eth-color-warning: #ff9f24;
817
+ --eth-color-success: #a8ff4f;
818
+ --eth-color-info: #ffffff;
819
+ --eth-border: 1px solid #30302f;
820
+ --eth-card-border: 1px solid #2c2c2b;
821
+ --eth-control-border: 1px solid #3a3a38;
822
+ --eth-overlay-border: 1px solid #3a3a38;
823
+ --eth-radius-surface: 34px;
824
+ --eth-radius-card: 26px;
825
+ --eth-radius-control: 999px;
826
+ --eth-radius-overlay: 28px;
827
+ --eth-shadow-surface: 0 40px 90px rgb(0 0 0 / 48%);
828
+ --eth-shadow-card: 0 20px 54px rgb(0 0 0 / 40%);
829
+ --eth-shadow-overlay: 0 30px 80px rgb(0 0 0 / 58%);
830
+ --eth-backdrop-filter: none;
831
+ --eth-backdrop-filter-overlay: none;
832
+ --eth-card-bg: #202020;
833
+ --eth-card-radius: 26px;
834
+ --eth-card-shadow: 0 20px 54px rgb(0 0 0 / 40%);
835
+ --eth-card-backdrop-filter: none;
836
+ --eth-card-header-bg: transparent;
837
+ --eth-card-footer-bg: #242424;
838
+ --eth-card-divider: 1px solid #30302f;
839
+ --eth-shadow-umbra: rgb(0 0 0 / 55%);
840
+ --eth-shadow-penumbra: rgb(0 0 0 / 35%);
841
+ --eth-bridge-bg: #050505;
842
+ --eth-field-bg: #181818;
843
+ --eth-field-bg-hover: #202020;
844
+ --eth-field-bg-disabled: #111111;
845
+ --eth-field-text: #f7f7f2;
846
+ --eth-field-placeholder: #8f908a;
847
+ --eth-field-text-disabled: #63645f;
848
+ --eth-field-border: 1px solid #3a3a38;
849
+ --eth-field-border-hover: 1px solid #555550;
850
+ --eth-field-radius: 16px;
851
+ --eth-field-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
852
+ --eth-field-backdrop-filter: none;
853
+ --eth-field-border-style: full;
854
+ --eth-btn-radius: 999px;
855
+ --eth-btn-primary-bg: #a8ff4f;
856
+ --eth-btn-primary-bg-hover: #bdff69;
857
+ --eth-btn-primary-bg-active: #91e843;
858
+ --eth-btn-primary-text: #101010;
859
+ --eth-btn-secondary-bg: #242424;
860
+ --eth-btn-secondary-bg-hover: #303030;
861
+ --eth-btn-secondary-bg-active: #3a3a38;
862
+ --eth-btn-secondary-text: #f7f7f2;
863
+ --eth-btn-tertiary-text: #a8ff4f;
864
+ --eth-btn-ghost-text: #a8ff4f;
865
+ --eth-btn-danger-bg: #ff9f24;
866
+ --eth-btn-danger-bg-hover: #ffa936;
867
+ --eth-btn-danger-text: #130b00;
868
+ --eth-btn-success-bg: #a8ff4f;
869
+ --eth-btn-success-bg-hover: #bdff69;
870
+ --eth-btn-success-text: #101010;
871
+ --eth-btn-disabled-bg: #242424;
872
+ --eth-btn-disabled-text: #666760;
873
+ --eth-btn-primary-border: 1px solid #a8ff4f;
874
+ --eth-btn-secondary-border: 1px solid #3a3a38;
875
+ --eth-btn-tertiary-border: 1px solid #a8ff4f;
876
+ --eth-btn-danger-border: 1px solid #ff9f24;
877
+ --eth-btn-shadow: 0 8px 22px rgb(0 0 0 / 35%);
878
+ --eth-btn-backdrop-filter: none;
879
+ --eth-table-bg: #202020;
880
+ --eth-table-border: 1px solid #30302f;
881
+ --eth-table-radius: 26px;
882
+ --eth-table-shadow: 0 20px 54px rgb(0 0 0 / 34%);
883
+ --eth-table-header-bg: #242424;
884
+ --eth-table-header-text: #bebeb6;
885
+ --eth-table-row-bg: #202020;
886
+ --eth-table-cell-text: #f0f0ea;
887
+ --eth-table-gridline: rgb(255 255 255 / 10%);
888
+ --eth-table-row-border: 1px solid rgb(255 255 255 / 10%);
889
+ --eth-table-column-border: 0 solid transparent;
890
+ --eth-table-gridline-axis: horizontal;
891
+ --eth-table-row-hover-bg: #2a2a28;
892
+ --eth-table-row-selected-bg: #2f3f1f;
893
+ --eth-table-row-selected-hover-bg: #394d26;
894
+ --eth-table-row-selected-accent: #a8ff4f;
895
+ --eth-overlay-bg: rgb(0 0 0 / 60%);
896
+ --eth-popover-bg: #242424;
897
+ --eth-popover-border: 1px solid #3a3a38;
898
+ --eth-focus-ring-color: #a8ff4f;
899
+ --eth-status-info-bg: #ffffff;
900
+ --eth-status-info-text: #101010;
901
+ --eth-status-info-border: #ffffff;
902
+ --eth-status-info-icon: #ffffff;
903
+ --eth-status-success-bg: color-mix(in srgb, #a8ff4f 18%, #101010);
904
+ --eth-status-success-text: #c4ff78;
905
+ --eth-status-success-border: color-mix(in srgb, #a8ff4f 45%, transparent);
906
+ --eth-status-success-icon: #a8ff4f;
907
+ --eth-status-warning-bg: color-mix(in srgb, #ff9f24 18%, #101010);
908
+ --eth-status-warning-text: #ffbf6b;
909
+ --eth-status-warning-border: color-mix(in srgb, #ff9f24 45%, transparent);
910
+ --eth-status-warning-icon: #ff9f24;
911
+ --eth-status-danger-bg: color-mix(in srgb, #ff5b4d 18%, #101010);
912
+ --eth-status-danger-text: #ff9f91;
913
+ --eth-status-danger-border: color-mix(in srgb, #ff5b4d 45%, transparent);
914
+ --eth-status-danger-icon: #ff5b4d;
915
+ --eth-status-neutral-bg: #242424;
916
+ --eth-status-neutral-text: #bebeb6;
917
+ --eth-status-neutral-border: #3a3a38;
918
+ --eth-status-neutral-icon: #8f908a;
919
+ --eth-font-family-sans:
920
+ "Inter",
921
+ system-ui,
922
+ -apple-system,
923
+ "Segoe UI",
924
+ Roboto,
925
+ sans-serif;
926
+ --eth-font-weight-title: 760;
927
+ --eth-font-weight-body: 500;
928
+ }
929
+ .eth-style-carbon-like,
930
+ .eth-style-soft-card,
931
+ .eth-style-glass,
932
+ .eth-style-bright,
933
+ .eth-style-studio-dark {
934
+ background: var(--eth-color-background);
935
+ color: var(--eth-color-text-primary);
936
+ }
937
+
938
+ /* src/carbon-bridge.css */
939
+ .eth-style-carbon-like,
940
+ .eth-style-soft-card,
941
+ .eth-style-glass,
942
+ .eth-style-bright,
943
+ .eth-style-studio-dark {
944
+ --cds-background: var(--eth-bridge-bg);
945
+ --cds-background-hover: var(--eth-color-layer-hover);
946
+ --cds-background-active: var(--eth-color-layer-selected);
947
+ --cds-background-selected: var(--eth-color-layer-selected);
948
+ --cds-layer-01: var(--eth-color-card);
949
+ --cds-layer-02: var(--eth-color-layer-02);
950
+ --cds-layer-03: var(--eth-color-layer-03, var(--eth-color-layer-02));
951
+ --cds-layer: var(--cds-layer-01);
952
+ --cds-layer-hover-01: var(--eth-color-layer-hover);
953
+ --cds-layer-hover-02: var(--eth-color-layer-hover);
954
+ --cds-layer-active-01: var(--eth-color-layer-selected);
955
+ --cds-layer-selected-01: var(--eth-table-row-selected-bg);
956
+ --cds-layer-selected-02: var(--eth-table-row-selected-bg);
957
+ --cds-layer-selected-hover-01: var(--eth-table-row-selected-hover-bg);
958
+ --cds-layer-accent-01: var(--eth-table-header-bg);
959
+ --cds-layer-accent-02: var(--eth-table-header-bg);
960
+ --cds-field-01: var(--eth-field-bg);
961
+ --cds-field-02: var(--eth-field-bg);
962
+ --cds-field-03: var(--eth-field-bg);
963
+ --cds-field-hover-01: var(--eth-field-bg-hover);
964
+ --cds-field-hover-02: var(--eth-field-bg-hover);
965
+ --cds-field-hover-03: var(--eth-field-bg-hover);
966
+ --cds-text-primary: var(--eth-color-text-primary);
967
+ --cds-text-secondary: var(--eth-color-text-secondary);
968
+ --cds-text-helper: var(--eth-color-text-helper);
969
+ --cds-text-placeholder: var(--eth-field-placeholder);
970
+ --cds-text-error: var(--eth-status-danger-text);
971
+ --cds-text-on-color: var(--eth-btn-primary-text);
972
+ --cds-text-inverse: var(--eth-bridge-bg);
973
+ --cds-icon-primary: var(--eth-color-text-primary);
974
+ --cds-icon-secondary: var(--eth-color-text-secondary);
975
+ --cds-icon-on-color: var(--eth-btn-primary-text);
976
+ --cds-border-subtle: var(--eth-color-border-subtle);
977
+ --cds-border-subtle-00: var(--eth-color-border-subtle);
978
+ --cds-border-subtle-01: var(--eth-color-border-subtle);
979
+ --cds-border-subtle-02: var(--eth-color-border-subtle);
980
+ --cds-border-subtle-03: var(--eth-color-border-subtle);
981
+ --cds-border-strong: var(--eth-color-border-strong);
982
+ --cds-border-strong-01: var(--eth-color-border-strong);
983
+ --cds-border-strong-02: var(--eth-color-border-strong);
984
+ --cds-border-interactive: var(--eth-color-interactive-primary);
985
+ --cds-button-primary: var(--eth-btn-primary-bg);
986
+ --cds-button-primary-hover: var(--eth-btn-primary-bg-hover);
987
+ --cds-button-primary-active: var(--eth-btn-primary-bg-active);
988
+ --cds-button-secondary: var(--eth-btn-secondary-bg);
989
+ --cds-button-secondary-hover: var(--eth-btn-secondary-bg-hover);
990
+ --cds-button-secondary-active: var(--eth-btn-secondary-bg-active);
991
+ --cds-button-tertiary: var(--eth-btn-tertiary-text);
992
+ --cds-button-tertiary-hover: var(--eth-btn-tertiary-bg-hover);
993
+ --cds-button-danger-primary: var(--eth-btn-danger-bg);
994
+ --cds-button-danger-hover: var(--eth-btn-danger-bg-hover);
995
+ --cds-button-danger-active: var(--eth-btn-danger-bg-active, var(--eth-btn-danger-bg-hover));
996
+ --cds-button-disabled: var(--eth-btn-disabled-bg);
997
+ --cds-link-primary: var(--eth-color-link);
998
+ --cds-link-primary-hover: var(--eth-color-interactive-strong);
999
+ --cds-interactive: var(--eth-color-interactive-primary);
1000
+ --cds-support-error: var(--eth-status-danger-icon);
1001
+ --cds-support-success: var(--eth-status-success-icon);
1002
+ --cds-support-warning: var(--eth-status-warning-icon);
1003
+ --cds-support-info: var(--eth-status-info-icon);
1004
+ --cds-notification-background-error: var(--eth-status-danger-bg);
1005
+ --cds-notification-background-success: var(--eth-status-success-bg);
1006
+ --cds-notification-background-warning: var(--eth-status-warning-bg);
1007
+ --cds-notification-background-info: var(--eth-status-info-bg);
1008
+ --cds-focus: var(--eth-focus-ring-color);
1009
+ --cds-overlay: var(--eth-overlay-bg);
1010
+ --cds-font-family: var(--eth-font-family-sans);
1011
+ --cds-font-mono: var(--eth-font-family-mono);
1012
+ }
1013
+
1014
+ /* src/styles.css */
1015
+ /*# sourceMappingURL=index.css.map */