@refineui/tokens 1.0.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 (20) hide show
  1. package/README.md +80 -0
  2. package/dist/css-variables.css +672 -0
  3. package/dist/index.d.mts +1049 -0
  4. package/dist/index.d.ts +1049 -0
  5. package/dist/index.js +978 -0
  6. package/dist/index.mjs +921 -0
  7. package/dist/refineui-typography.css +111 -0
  8. package/dist/spec/component-sizes.json +485 -0
  9. package/dist/spec/focus.json +20 -0
  10. package/dist/spec/foundation.json +90 -0
  11. package/dist/spec/index.json +25 -0
  12. package/dist/spec/motion.json +78 -0
  13. package/dist/spec/semantic-colors.json +1256 -0
  14. package/dist/spec/semantic-text.json +173 -0
  15. package/dist/spec/token-graph.json +1194 -0
  16. package/dist/spec/trace-index.json +830 -0
  17. package/dist/spec/trace-v2.json +973 -0
  18. package/dist/tailwind-theme.css +348 -0
  19. package/package.json +50 -0
  20. package/tailwind.css +4 -0
package/dist/css-variables.css ADDED
@@ -0,0 +1,672 @@
1
+ :root {
2
+ /* Palette & foundation colors */
3
+ --refineui-color-primary-light-gray: #E6E6E6;
4
+ --refineui-color-primary-gray: #D4D4D4;
5
+ --refineui-color-primary-dark-gray: #4d4d4d;
6
+ --refineui-color-primary-black: #212121;
7
+ --refineui-color-neutral-white: #FFFFFF;
8
+ --refineui-color-neutral-100: #F5F5F5;
9
+ --refineui-color-neutral-150: #F0F0F0;
10
+ --refineui-color-neutral-200: #EBEBEB;
11
+ --refineui-color-neutral-250: #E0E0E0;
12
+ --refineui-color-neutral-300: #DBDBDB;
13
+ --refineui-color-neutral-350: #D8D8D8;
14
+ --refineui-color-neutral-400: #CECECE;
15
+ --refineui-color-neutral-450: #BBBBBB;
16
+ --refineui-color-neutral-500: #A4A4A4;
17
+ --refineui-color-neutral-550: #8D8D8D;
18
+ --refineui-color-neutral-600: #6C6C6C;
19
+ --refineui-color-neutral-650: #5B5B5B;
20
+ --refineui-color-neutral-700: #404040;
21
+ --refineui-color-neutral-750: #333333;
22
+ --refineui-color-neutral-800: #2A2A2A;
23
+ --refineui-color-neutral-850: #222222;
24
+ --refineui-color-neutral-900: #1A1A1A;
25
+ --refineui-color-neutral-950: #111111;
26
+ --refineui-color-neutral-black: #000000;
27
+ --refineui-color-red-100: #FFDEDE;
28
+ --refineui-color-red-200: #FFC3C3;
29
+ --refineui-color-red-300: #FFA7A7;
30
+ --refineui-color-red-400: #FF8989;
31
+ --refineui-color-red-500: #FF6969;
32
+ --refineui-color-red-600: #F94343;
33
+ --refineui-color-red-700: #D93A3A;
34
+ --refineui-color-red-800: #BA3232;
35
+ --refineui-color-red-900: #9C2929;
36
+ --refineui-color-red-1000: #711e1e;
37
+ --refineui-color-orange-100: #FAE0D1;
38
+ --refineui-color-orange-200: #F6C8AE;
39
+ --refineui-color-orange-300: #F3B08B;
40
+ --refineui-color-orange-400: #EF9664;
41
+ --refineui-color-orange-500: #EB7C3E;
42
+ --refineui-color-orange-600: #D6692C;
43
+ --refineui-color-orange-700: #BA5B26;
44
+ --refineui-color-orange-800: #9F4E21;
45
+ --refineui-color-orange-900: #85411B;
46
+ --refineui-color-orange-1000: #5f2f14;
47
+ --refineui-color-yellow-100: #FFE493;
48
+ --refineui-color-yellow-200: #FFCB2F;
49
+ --refineui-color-yellow-300: #F1B500;
50
+ --refineui-color-yellow-400: #DAA300;
51
+ --refineui-color-yellow-500: #C49200;
52
+ --refineui-color-yellow-600: #AD8100;
53
+ --refineui-color-yellow-700: #967000;
54
+ --refineui-color-yellow-800: #806000;
55
+ --refineui-color-yellow-900: #6B5000;
56
+ --refineui-color-yellow-1000: #564100;
57
+ --refineui-color-lime-100: #C8F46F;
58
+ --refineui-color-lime-200: #A4E61F;
59
+ --refineui-color-lime-300: #95D11C;
60
+ --refineui-color-lime-400: #86BC19;
61
+ --refineui-color-lime-500: #78A917;
62
+ --refineui-color-lime-600: #6A9514;
63
+ --refineui-color-lime-700: #5C8111;
64
+ --refineui-color-lime-800: #4F6E0F;
65
+ --refineui-color-lime-900: #425C0C;
66
+ --refineui-color-lime-1000: #2f4209;
67
+ --refineui-color-green-100: #ADF7B0;
68
+ --refineui-color-green-200: #5BEE62;
69
+ --refineui-color-green-300: #2FDC37;
70
+ --refineui-color-green-400: #2AC632;
71
+ --refineui-color-green-500: #26B12D;
72
+ --refineui-color-green-600: #229D28;
73
+ --refineui-color-green-700: #1D8822;
74
+ --refineui-color-green-800: #19751D;
75
+ --refineui-color-green-900: #156119;
76
+ --refineui-color-green-1000: #0f4612;
77
+ --refineui-color-teal-100: #C9ECF0;
78
+ --refineui-color-teal-200: #9EDDE4;
79
+ --refineui-color-teal-300: #71CDD7;
80
+ --refineui-color-teal-400: #54BAC6;
81
+ --refineui-color-teal-500: #4BA7B1;
82
+ --refineui-color-teal-600: #42949D;
83
+ --refineui-color-teal-700: #398088;
84
+ --refineui-color-teal-800: #316D74;
85
+ --refineui-color-teal-900: #295b61;
86
+ --refineui-color-teal-1000: #1d4145;
87
+ --refineui-color-blue-100: #DEE5FF;
88
+ --refineui-color-blue-200: #C3D0FF;
89
+ --refineui-color-blue-300: #A9BCFF;
90
+ --refineui-color-blue-400: #90A8FF;
91
+ --refineui-color-blue-500: #7694FF;
92
+ --refineui-color-blue-600: #5B7FFF;
93
+ --refineui-color-blue-700: #3E68FF;
94
+ --refineui-color-blue-800: #2351F7;
95
+ --refineui-color-blue-900: #1D44CE;
96
+ --refineui-color-blue-1000: #1837A8;
97
+ --refineui-color-purple-100: #EFDFFF;
98
+ --refineui-color-purple-200: #E3C7FF;
99
+ --refineui-color-purple-300: #D6AEFF;
100
+ --refineui-color-purple-400: #C995FF;
101
+ --refineui-color-purple-500: #BD7BFF;
102
+ --refineui-color-purple-600: #AF60FF;
103
+ --refineui-color-purple-700: #9E3FFF;
104
+ --refineui-color-purple-800: #891CF9;
105
+ --refineui-color-purple-900: #7318D0;
106
+ --refineui-color-purple-1000: #5E13AB;
107
+ --refineui-color-magenta-100: #FCDEEC;
108
+ --refineui-color-magenta-200: #FAC3DC;
109
+ --refineui-color-magenta-300: #F7A7CB;
110
+ --refineui-color-magenta-400: #F58ABA;
111
+ --refineui-color-magenta-500: #F26BA8;
112
+ --refineui-color-magenta-600: #EF4592;
113
+ --refineui-color-magenta-700: #D6327C;
114
+ --refineui-color-magenta-800: #B82B6B;
115
+ --refineui-color-magenta-900: #9A2459;
116
+ --refineui-color-magenta-1000: #7D1E49;
117
+ /* Spacing */
118
+ --refineui-spacing-size-none: 0;
119
+ --refineui-spacing-size-xxx-small: 2px;
120
+ --refineui-spacing-size-xx-small: 4px;
121
+ --refineui-spacing-size-x-small: 6px;
122
+ --refineui-spacing-size-small: 8px;
123
+ --refineui-spacing-size-medium: 10px;
124
+ --refineui-spacing-size-large: 16px;
125
+ --refineui-spacing-size-x-large: 20px;
126
+ --refineui-spacing-size-xx-large: 24px;
127
+ --refineui-spacing-size-xxx-large: 32px;
128
+ /* Stroke width */
129
+ --refineui-stroke-width-none: 0;
130
+ --refineui-stroke-width-hairline: 0.5px;
131
+ --refineui-stroke-width-thin: 1px;
132
+ --refineui-stroke-width-thick: 2px;
133
+ --refineui-stroke-width-thicker: 4px;
134
+ --refineui-stroke-width-thickest: 6px;
135
+ /* Border radius */
136
+ --refineui-radius-rounded-none: 0;
137
+ --refineui-radius-rounded-x-small: 2px;
138
+ --refineui-radius-rounded-small: 4px;
139
+ --refineui-radius-rounded-medium: 6px;
140
+ --refineui-radius-rounded-large: 8px;
141
+ --refineui-radius-rounded-x-large: 12px;
142
+ --refineui-radius-rounded-xx-large: 16px;
143
+ --refineui-radius-rounded-circle: 9999px;
144
+ /* Foundation layout sizes */
145
+ --refineui-size-foundation-size-10: 1px;
146
+ --refineui-size-foundation-size-20: 2px;
147
+ --refineui-size-foundation-size-30: 3px;
148
+ --refineui-size-foundation-size-40: 4px;
149
+ --refineui-size-foundation-size-60: 6px;
150
+ --refineui-size-foundation-size-80: 8px;
151
+ --refineui-size-foundation-size-100: 10px;
152
+ --refineui-size-foundation-size-120: 12px;
153
+ --refineui-size-foundation-size-133: 13.33px;
154
+ --refineui-size-foundation-size-140: 14px;
155
+ --refineui-size-foundation-size-160: 16px;
156
+ --refineui-size-foundation-size-200: 20px;
157
+ --refineui-size-foundation-size-240: 24px;
158
+ --refineui-size-foundation-size-280: 28px;
159
+ --refineui-size-foundation-size-300: 30px;
160
+ --refineui-size-foundation-size-320: 32px;
161
+ --refineui-size-foundation-size-340: 34px;
162
+ --refineui-size-foundation-size-360: 36px;
163
+ --refineui-size-foundation-size-400: 40px;
164
+ --refineui-size-foundation-size-440: 44px;
165
+ --refineui-size-foundation-size-480: 48px;
166
+ --refineui-size-foundation-size-520: 52px;
167
+ --refineui-size-foundation-size-540: 54px;
168
+ --refineui-size-foundation-size-600: 60px;
169
+ --refineui-size-foundation-size-800: 80px;
170
+ --refineui-size-foundation-size-2000: 200px;
171
+ --refineui-size-foundation-size-2440: 244px;
172
+ --refineui-size-foundation-size-2560: 256px;
173
+ --refineui-size-foundation-size-3000: 300px;
174
+ --refineui-size-foundation-size-3200: 320px;
175
+ --refineui-size-foundation-size-3250: 325px;
176
+ --refineui-size-foundation-size-4500: 450px;
177
+ --refineui-size-foundation-size-5750: 575px;
178
+ --refineui-size-foundation-size-6000: 600px;
179
+ --refineui-size-foundation-size-8500: 850px;
180
+ /* Web Kit component sizes → Foundation vars */
181
+ --refineui-size-avatar-status-xxxlarge: var(--refineui-size-foundation-size-140);
182
+ --refineui-size-button-min-height-sm: var(--refineui-size-foundation-size-280);
183
+ --refineui-size-button-min-height-md: var(--refineui-size-foundation-size-360);
184
+ --refineui-size-button-min-height-lg: var(--refineui-size-foundation-size-480);
185
+ --refineui-size-chip-min-height-sm: var(--refineui-size-foundation-size-200);
186
+ --refineui-size-chip-min-height-md: var(--refineui-size-foundation-size-240);
187
+ --refineui-size-chip-min-height-lg: var(--refineui-size-foundation-size-320);
188
+ --refineui-size-control-height-sm: var(--refineui-size-foundation-size-360);
189
+ --refineui-size-control-height-md: var(--refineui-size-foundation-size-440);
190
+ --refineui-size-control-height-lg: var(--refineui-size-foundation-size-520);
191
+ --refineui-size-control-touch-min: var(--refineui-size-foundation-size-440);
192
+ --refineui-size-control-checkbox: var(--refineui-size-foundation-size-200);
193
+ --refineui-size-control-checkbox-radio: var(--refineui-size-foundation-size-200);
194
+ --refineui-size-control-textarea-min: var(--refineui-size-foundation-size-800);
195
+ --refineui-size-popover-panel-width: var(--refineui-size-foundation-size-3250);
196
+ --refineui-size-popover-beak-inset-from-start-edge: var(--refineui-size-foundation-size-340);
197
+ --refineui-size-popover-beak-inset-from-end-edge: var(--refineui-size-foundation-size-300);
198
+ --refineui-size-menu-panel-width: var(--refineui-size-foundation-size-2440);
199
+ --refineui-size-dropdown-menu-width: var(--refineui-size-foundation-size-2440);
200
+ --refineui-size-sidebar-width: var(--refineui-size-foundation-size-2560);
201
+ --refineui-size-toast-min-width: var(--refineui-size-foundation-size-3250);
202
+ --refineui-size-toast-max-width: var(--refineui-size-foundation-size-3250);
203
+ --refineui-size-dialog-max-width: var(--refineui-size-foundation-size-6000);
204
+ --refineui-size-dialog-width-sm: var(--refineui-size-foundation-size-3000);
205
+ --refineui-size-drawer-width-sm: var(--refineui-size-foundation-size-3200);
206
+ --refineui-size-drawer-width-md: var(--refineui-size-foundation-size-5750);
207
+ --refineui-size-drawer-width-lg: var(--refineui-size-foundation-size-8500);
208
+ --refineui-size-calendar-min-width: var(--refineui-size-foundation-size-2560);
209
+ --refineui-size-calendar-day-size: var(--refineui-size-foundation-size-320);
210
+ --refineui-size-tooltip-max-width: var(--refineui-size-foundation-size-2000);
211
+ --refineui-size-spin-stepper-width: var(--refineui-size-foundation-size-320);
212
+ --refineui-size-spin-field-padding-inline-start: var(--refineui-size-foundation-size-120);
213
+ --refineui-size-switch-width: var(--refineui-size-foundation-size-440);
214
+ --refineui-size-switch-height: var(--refineui-size-foundation-size-240);
215
+ --refineui-size-switch-thumb: var(--refineui-size-foundation-size-200);
216
+ --refineui-size-switch-padding: var(--refineui-size-foundation-size-20);
217
+ --refineui-size-progress-track-height-sm: var(--refineui-size-foundation-size-20);
218
+ --refineui-size-progress-track-height-lg: var(--refineui-size-foundation-size-40);
219
+ --refineui-size-slider-track-height-sm: var(--refineui-size-foundation-size-20);
220
+ --refineui-size-slider-track-height-md: var(--refineui-size-foundation-size-40);
221
+ --refineui-size-slider-interaction-height: var(--refineui-size-foundation-size-280);
222
+ --refineui-size-pagination-button-min-width: var(--refineui-size-foundation-size-400);
223
+ --refineui-size-skeleton-default-height: var(--refineui-size-foundation-size-200);
224
+ --refineui-size-divider-short-end: var(--refineui-size-foundation-size-80);
225
+ --refineui-size-divider-icon-slot: var(--refineui-size-foundation-size-200);
226
+ --refineui-size-divider-icon-circle-diameter: var(--refineui-size-foundation-size-133);
227
+ --refineui-size-divider-icon-circle-inset: var(--refineui-size-foundation-size-30);
228
+ --refineui-size-accessible-clip: var(--refineui-size-foundation-size-10);
229
+ --refineui-size-spinner-size-x-small: var(--refineui-size-foundation-size-160);
230
+ --refineui-size-spinner-size-small: var(--refineui-size-foundation-size-200);
231
+ --refineui-size-spinner-size-medium: var(--refineui-size-foundation-size-240);
232
+ --refineui-size-spinner-size-large: var(--refineui-size-foundation-size-280);
233
+ --refineui-size-spinner-size-x-large: var(--refineui-size-foundation-size-320);
234
+ --refineui-size-spinner-size-xx-large: var(--refineui-size-foundation-size-480);
235
+ --refineui-size-spinner-ring-width-x-small: var(--refineui-size-foundation-size-20);
236
+ --refineui-size-spinner-ring-width-small: var(--refineui-size-foundation-size-20);
237
+ --refineui-size-spinner-ring-width-medium: var(--refineui-size-foundation-size-20);
238
+ --refineui-size-spinner-ring-width-large: var(--refineui-size-foundation-size-30);
239
+ --refineui-size-spinner-ring-width-x-large: var(--refineui-size-foundation-size-30);
240
+ --refineui-size-spinner-ring-width-xx-large: var(--refineui-size-foundation-size-40);
241
+ --refineui-size-dialog-max-height-viewport: 90vh;
242
+ /* Icon sizes */
243
+ --refineui-icon-size-xxsmall: 12px;
244
+ --refineui-icon-size-xsmall: 16px;
245
+ --refineui-icon-size-small: 20px;
246
+ --refineui-icon-size-medium: 24px;
247
+ --refineui-icon-size-large: 28px;
248
+ --refineui-icon-size-xlarge: 32px;
249
+ --refineui-icon-size-xxlarge: 48px;
250
+ /* Opacity */
251
+ --refineui-opacity-full: 1;
252
+ --refineui-opacity-disabled: 0.5;
253
+ --refineui-opacity-ghost-hover: 0.08;
254
+ /* Motion — Foundation steps + Semantic role aliases */
255
+ --refineui-foundation-motion-duration-0: 0ms;
256
+ --refineui-foundation-motion-duration-150: 150ms;
257
+ --refineui-foundation-motion-duration-180: 180ms;
258
+ --refineui-foundation-motion-duration-200: 200ms;
259
+ --refineui-foundation-motion-duration-240: 240ms;
260
+ --refineui-foundation-motion-duration-260: 260ms;
261
+ --refineui-foundation-motion-duration-280: 280ms;
262
+ --refineui-foundation-motion-duration-320: 320ms;
263
+ --refineui-foundation-motion-duration-380: 380ms;
264
+ --refineui-foundation-motion-duration-800: 800ms;
265
+ --refineui-foundation-motion-duration-1500: 1500ms;
266
+ --refineui-foundation-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
267
+ --refineui-foundation-motion-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
268
+ --refineui-foundation-motion-easing-panel: cubic-bezier(0.32, 0.72, 0, 1);
269
+ --refineui-foundation-motion-easing-content: cubic-bezier(0.4, 0, 0.2, 1);
270
+ --refineui-foundation-motion-easing-linear: linear;
271
+ --refineui-foundation-motion-easing-ease-out: ease-out;
272
+ --refineui-foundation-motion-easing-ease-in-out: ease-in-out;
273
+ --refineui-foundation-motion-scale-96: 0.96;
274
+ --refineui-foundation-motion-scale-98: 0.98;
275
+ --refineui-foundation-motion-scale-115: 1.15;
276
+ --refineui-foundation-motion-distance-4: 4px;
277
+ --refineui-motion-duration-instant: var(--refineui-foundation-motion-duration-0);
278
+ --refineui-motion-duration-fast: var(--refineui-foundation-motion-duration-150);
279
+ --refineui-motion-duration-normal: var(--refineui-foundation-motion-duration-180);
280
+ --refineui-motion-duration-medium: var(--refineui-foundation-motion-duration-200);
281
+ --refineui-motion-duration-slow: var(--refineui-foundation-motion-duration-240);
282
+ --refineui-motion-duration-overlay: var(--refineui-foundation-motion-duration-280);
283
+ --refineui-motion-duration-panel: var(--refineui-foundation-motion-duration-320);
284
+ --refineui-motion-duration-accordion-panel: var(--refineui-foundation-motion-duration-380);
285
+ --refineui-motion-duration-accordion-content: var(--refineui-foundation-motion-duration-260);
286
+ --refineui-motion-duration-toast-enter: var(--refineui-foundation-motion-duration-280);
287
+ --refineui-motion-duration-toast-leave: var(--refineui-foundation-motion-duration-200);
288
+ --refineui-motion-duration-skeleton: var(--refineui-foundation-motion-duration-1500);
289
+ --refineui-motion-duration-spinner: var(--refineui-foundation-motion-duration-800);
290
+ --refineui-motion-easing-standard: var(--refineui-foundation-motion-easing-standard);
291
+ --refineui-motion-easing-emphasized: var(--refineui-foundation-motion-easing-emphasized);
292
+ --refineui-motion-easing-panel: var(--refineui-foundation-motion-easing-panel);
293
+ --refineui-motion-easing-content: var(--refineui-foundation-motion-easing-content);
294
+ --refineui-motion-easing-linear: var(--refineui-foundation-motion-easing-linear);
295
+ --refineui-motion-easing-ease-out: var(--refineui-foundation-motion-easing-ease-out);
296
+ --refineui-motion-easing-ease-in-out: var(--refineui-foundation-motion-easing-ease-in-out);
297
+ --refineui-motion-scale-enter: var(--refineui-foundation-motion-scale-96);
298
+ --refineui-motion-scale-press: var(--refineui-foundation-motion-scale-98);
299
+ --refineui-motion-scale-hover-grow: var(--refineui-foundation-motion-scale-115);
300
+ --refineui-motion-dialog-enter-scale: var(--refineui-motion-scale-enter);
301
+ --refineui-motion-button-active-scale: var(--refineui-motion-scale-press);
302
+ --refineui-motion-slider-thumb-hover-scale: var(--refineui-motion-scale-hover-grow);
303
+ --refineui-motion-distance-float: var(--refineui-foundation-motion-distance-4);
304
+ /* Overlays — backdrop tracks semantic surfaceOverlay for theme */
305
+ --refineui-overlay-backdrop: var(--refineui-color-alias-surface-overlay);
306
+ --refineui-overlay-ghost-button-hover-dark: rgba(255, 255, 255, 0.08);
307
+ /* Typography presets */
308
+ --refineui-typography-heading-1-font-family: 'Inter', sans-serif;
309
+ --refineui-typography-heading-1-font-size: 64px;
310
+ --refineui-typography-heading-1-font-weight: 800;
311
+ --refineui-typography-heading-1-line-height: 86px;
312
+ --refineui-typography-heading-2-font-family: 'Inter', sans-serif;
313
+ --refineui-typography-heading-2-font-size: 40px;
314
+ --refineui-typography-heading-2-font-weight: 700;
315
+ --refineui-typography-heading-2-line-height: 60px;
316
+ --refineui-typography-heading-3-font-family: 'Inter', sans-serif;
317
+ --refineui-typography-heading-3-font-size: 32px;
318
+ --refineui-typography-heading-3-font-weight: 700;
319
+ --refineui-typography-heading-3-line-height: 40px;
320
+ --refineui-typography-heading-4-font-family: 'Inter', sans-serif;
321
+ --refineui-typography-heading-4-font-size: 28px;
322
+ --refineui-typography-heading-4-font-weight: 600;
323
+ --refineui-typography-heading-4-line-height: 36px;
324
+ --refineui-typography-title-1-font-family: 'Inter', sans-serif;
325
+ --refineui-typography-title-1-font-size: 32px;
326
+ --refineui-typography-title-1-font-weight: 600;
327
+ --refineui-typography-title-1-line-height: 40px;
328
+ --refineui-typography-title-2-font-family: 'Inter', sans-serif;
329
+ --refineui-typography-title-2-font-size: 28px;
330
+ --refineui-typography-title-2-font-weight: 600;
331
+ --refineui-typography-title-2-line-height: 36px;
332
+ --refineui-typography-title-3-font-family: 'Inter', sans-serif;
333
+ --refineui-typography-title-3-font-size: 24px;
334
+ --refineui-typography-title-3-font-weight: 600;
335
+ --refineui-typography-title-3-line-height: 32px;
336
+ --refineui-typography-sub-title-1-font-family: 'Inter', sans-serif;
337
+ --refineui-typography-sub-title-1-font-size: 20px;
338
+ --refineui-typography-sub-title-1-font-weight: 600;
339
+ --refineui-typography-sub-title-1-line-height: 28px;
340
+ --refineui-typography-sub-title-2-font-family: 'Inter', sans-serif;
341
+ --refineui-typography-sub-title-2-font-size: 16px;
342
+ --refineui-typography-sub-title-2-font-weight: 600;
343
+ --refineui-typography-sub-title-2-line-height: 24px;
344
+ --refineui-typography-body-1-font-family: 'Inter', sans-serif;
345
+ --refineui-typography-body-1-font-size: 16px;
346
+ --refineui-typography-body-1-font-weight: 500;
347
+ --refineui-typography-body-1-line-height: 24px;
348
+ --refineui-typography-body-2-font-family: 'Inter', sans-serif;
349
+ --refineui-typography-body-2-font-size: 14px;
350
+ --refineui-typography-body-2-font-weight: 500;
351
+ --refineui-typography-body-2-line-height: 20px;
352
+ --refineui-typography-body-3-font-family: 'Inter', sans-serif;
353
+ --refineui-typography-body-3-font-size: 14px;
354
+ --refineui-typography-body-3-font-weight: 400;
355
+ --refineui-typography-body-3-line-height: 20px;
356
+ --refineui-typography-body-4-font-family: 'Inter', sans-serif;
357
+ --refineui-typography-body-4-font-size: 12px;
358
+ --refineui-typography-body-4-font-weight: 400;
359
+ --refineui-typography-body-4-line-height: 16px;
360
+ --refineui-typography-caption-1-font-family: 'Inter', sans-serif;
361
+ --refineui-typography-caption-1-font-size: 12px;
362
+ --refineui-typography-caption-1-font-weight: 500;
363
+ --refineui-typography-caption-1-line-height: 16px;
364
+ --refineui-typography-caption-2-font-family: 'Inter', sans-serif;
365
+ --refineui-typography-caption-2-font-size: 12px;
366
+ --refineui-typography-caption-2-font-weight: 400;
367
+ --refineui-typography-caption-2-line-height: 16px;
368
+ --refineui-typography-caption-3-font-family: 'Inter', sans-serif;
369
+ --refineui-typography-caption-3-font-size: 10px;
370
+ --refineui-typography-caption-3-font-weight: 400;
371
+ --refineui-typography-caption-3-line-height: 14px;
372
+ /* Semantic text roles (alias Foundation typography) */
373
+ --refineui-text-display-lg-font-family: var(--refineui-typography-heading-1-font-family);
374
+ --refineui-text-display-lg-font-size: var(--refineui-typography-heading-1-font-size);
375
+ --refineui-text-display-lg-font-weight: var(--refineui-typography-heading-1-font-weight);
376
+ --refineui-text-display-lg-line-height: var(--refineui-typography-heading-1-line-height);
377
+ --refineui-text-display-md-font-family: var(--refineui-typography-heading-2-font-family);
378
+ --refineui-text-display-md-font-size: var(--refineui-typography-heading-2-font-size);
379
+ --refineui-text-display-md-font-weight: var(--refineui-typography-heading-2-font-weight);
380
+ --refineui-text-display-md-line-height: var(--refineui-typography-heading-2-line-height);
381
+ --refineui-text-display-sm-font-family: var(--refineui-typography-heading-3-font-family);
382
+ --refineui-text-display-sm-font-size: var(--refineui-typography-heading-3-font-size);
383
+ --refineui-text-display-sm-font-weight: var(--refineui-typography-heading-3-font-weight);
384
+ --refineui-text-display-sm-line-height: var(--refineui-typography-heading-3-line-height);
385
+ --refineui-text-heading-lg-font-family: var(--refineui-typography-heading-2-font-family);
386
+ --refineui-text-heading-lg-font-size: var(--refineui-typography-heading-2-font-size);
387
+ --refineui-text-heading-lg-font-weight: var(--refineui-typography-heading-2-font-weight);
388
+ --refineui-text-heading-lg-line-height: var(--refineui-typography-heading-2-line-height);
389
+ --refineui-text-heading-md-font-family: var(--refineui-typography-heading-3-font-family);
390
+ --refineui-text-heading-md-font-size: var(--refineui-typography-heading-3-font-size);
391
+ --refineui-text-heading-md-font-weight: var(--refineui-typography-heading-3-font-weight);
392
+ --refineui-text-heading-md-line-height: var(--refineui-typography-heading-3-line-height);
393
+ --refineui-text-heading-sm-font-family: var(--refineui-typography-heading-4-font-family);
394
+ --refineui-text-heading-sm-font-size: var(--refineui-typography-heading-4-font-size);
395
+ --refineui-text-heading-sm-font-weight: var(--refineui-typography-heading-4-font-weight);
396
+ --refineui-text-heading-sm-line-height: var(--refineui-typography-heading-4-line-height);
397
+ --refineui-text-title-lg-font-family: var(--refineui-typography-title-1-font-family);
398
+ --refineui-text-title-lg-font-size: var(--refineui-typography-title-1-font-size);
399
+ --refineui-text-title-lg-font-weight: var(--refineui-typography-title-1-font-weight);
400
+ --refineui-text-title-lg-line-height: var(--refineui-typography-title-1-line-height);
401
+ --refineui-text-title-md-font-family: var(--refineui-typography-title-2-font-family);
402
+ --refineui-text-title-md-font-size: var(--refineui-typography-title-2-font-size);
403
+ --refineui-text-title-md-font-weight: var(--refineui-typography-title-2-font-weight);
404
+ --refineui-text-title-md-line-height: var(--refineui-typography-title-2-line-height);
405
+ --refineui-text-title-sm-font-family: var(--refineui-typography-title-3-font-family);
406
+ --refineui-text-title-sm-font-size: var(--refineui-typography-title-3-font-size);
407
+ --refineui-text-title-sm-font-weight: var(--refineui-typography-title-3-font-weight);
408
+ --refineui-text-title-sm-line-height: var(--refineui-typography-title-3-line-height);
409
+ --refineui-text-subtitle-lg-font-family: var(--refineui-typography-sub-title-1-font-family);
410
+ --refineui-text-subtitle-lg-font-size: var(--refineui-typography-sub-title-1-font-size);
411
+ --refineui-text-subtitle-lg-font-weight: var(--refineui-typography-sub-title-1-font-weight);
412
+ --refineui-text-subtitle-lg-line-height: var(--refineui-typography-sub-title-1-line-height);
413
+ --refineui-text-subtitle-md-font-family: var(--refineui-typography-sub-title-2-font-family);
414
+ --refineui-text-subtitle-md-font-size: var(--refineui-typography-sub-title-2-font-size);
415
+ --refineui-text-subtitle-md-font-weight: var(--refineui-typography-sub-title-2-font-weight);
416
+ --refineui-text-subtitle-md-line-height: var(--refineui-typography-sub-title-2-line-height);
417
+ --refineui-text-body-lg-font-family: var(--refineui-typography-body-1-font-family);
418
+ --refineui-text-body-lg-font-size: var(--refineui-typography-body-1-font-size);
419
+ --refineui-text-body-lg-font-weight: var(--refineui-typography-body-1-font-weight);
420
+ --refineui-text-body-lg-line-height: var(--refineui-typography-body-1-line-height);
421
+ --refineui-text-body-md-font-family: var(--refineui-typography-body-2-font-family);
422
+ --refineui-text-body-md-font-size: var(--refineui-typography-body-2-font-size);
423
+ --refineui-text-body-md-font-weight: var(--refineui-typography-body-2-font-weight);
424
+ --refineui-text-body-md-line-height: var(--refineui-typography-body-2-line-height);
425
+ --refineui-text-body-sm-font-family: var(--refineui-typography-body-3-font-family);
426
+ --refineui-text-body-sm-font-size: var(--refineui-typography-body-3-font-size);
427
+ --refineui-text-body-sm-font-weight: var(--refineui-typography-body-3-font-weight);
428
+ --refineui-text-body-sm-line-height: var(--refineui-typography-body-3-line-height);
429
+ --refineui-text-body-xs-font-family: var(--refineui-typography-body-4-font-family);
430
+ --refineui-text-body-xs-font-size: var(--refineui-typography-body-4-font-size);
431
+ --refineui-text-body-xs-font-weight: var(--refineui-typography-body-4-font-weight);
432
+ --refineui-text-body-xs-line-height: var(--refineui-typography-body-4-line-height);
433
+ --refineui-text-label-lg-font-family: var(--refineui-typography-body-1-font-family);
434
+ --refineui-text-label-lg-font-size: var(--refineui-typography-body-1-font-size);
435
+ --refineui-text-label-lg-font-weight: var(--refineui-typography-body-1-font-weight);
436
+ --refineui-text-label-lg-line-height: var(--refineui-typography-body-1-line-height);
437
+ --refineui-text-label-md-font-family: var(--refineui-typography-body-2-font-family);
438
+ --refineui-text-label-md-font-size: var(--refineui-typography-body-2-font-size);
439
+ --refineui-text-label-md-font-weight: var(--refineui-typography-body-2-font-weight);
440
+ --refineui-text-label-md-line-height: var(--refineui-typography-body-2-line-height);
441
+ --refineui-text-label-sm-font-family: var(--refineui-typography-caption-1-font-family);
442
+ --refineui-text-label-sm-font-size: var(--refineui-typography-caption-1-font-size);
443
+ --refineui-text-label-sm-font-weight: var(--refineui-typography-caption-1-font-weight);
444
+ --refineui-text-label-sm-line-height: var(--refineui-typography-caption-1-line-height);
445
+ --refineui-text-caption-lg-font-family: var(--refineui-typography-caption-1-font-family);
446
+ --refineui-text-caption-lg-font-size: var(--refineui-typography-caption-1-font-size);
447
+ --refineui-text-caption-lg-font-weight: var(--refineui-typography-caption-1-font-weight);
448
+ --refineui-text-caption-lg-line-height: var(--refineui-typography-caption-1-line-height);
449
+ --refineui-text-caption-md-font-family: var(--refineui-typography-caption-2-font-family);
450
+ --refineui-text-caption-md-font-size: var(--refineui-typography-caption-2-font-size);
451
+ --refineui-text-caption-md-font-weight: var(--refineui-typography-caption-2-font-weight);
452
+ --refineui-text-caption-md-line-height: var(--refineui-typography-caption-2-line-height);
453
+ --refineui-text-caption-sm-font-family: var(--refineui-typography-caption-3-font-family);
454
+ --refineui-text-caption-sm-font-size: var(--refineui-typography-caption-3-font-size);
455
+ --refineui-text-caption-sm-font-weight: var(--refineui-typography-caption-3-font-weight);
456
+ --refineui-text-caption-sm-line-height: var(--refineui-typography-caption-3-line-height);
457
+ /* Elevation (box-shadow) — *-light/*-dark explicit; bare = theme */
458
+ --refineui-elevation-2light: 0 1px 2px 0 rgba(33, 33, 33, 0.05), 0 2px 4px 0 rgba(33, 33, 33, 0.04);
459
+ --refineui-elevation-2dark: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.15);
460
+ --refineui-elevation-2: var(--refineui-elevation-2light);
461
+ --refineui-elevation-4light: 0 2px 2px 0 rgba(33, 33, 33, 0.05), 0 4px 8px 0 rgba(33, 33, 33, 0.04);
462
+ --refineui-elevation-4dark: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.15);
463
+ --refineui-elevation-4: var(--refineui-elevation-4light);
464
+ --refineui-elevation-8light: 0 4px 4px 0 rgba(33, 33, 33, 0.05), 0 8px 16px 0 rgba(33, 33, 33, 0.04);
465
+ --refineui-elevation-8dark: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 8px 16px 0 rgba(0, 0, 0, 0.15);
466
+ --refineui-elevation-8: var(--refineui-elevation-8light);
467
+ --refineui-elevation-16light: 0 8px 8px 0 rgba(33, 33, 33, 0.05), 0 16px 32px 0 rgba(33, 33, 33, 0.04);
468
+ --refineui-elevation-16dark: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 16px 32px 0 rgba(0, 0, 0, 0.15);
469
+ --refineui-elevation-16: var(--refineui-elevation-16light);
470
+ --refineui-elevation-24light: 0 12px 12px 0 rgba(33, 33, 33, 0.05), 0 24px 48px 0 rgba(33, 33, 33, 0.04);
471
+ --refineui-elevation-24dark: 0 12px 12px 0 rgba(0, 0, 0, 0.2), 0 24px 48px 0 rgba(0, 0, 0, 0.15);
472
+ --refineui-elevation-24: var(--refineui-elevation-24light);
473
+ --refineui-elevation-32light: 0 16px 16px 0 rgba(33, 33, 33, 0.05), 0 32px 64px 0 rgba(33, 33, 33, 0.04);
474
+ --refineui-elevation-32dark: 0 16px 16px 0 rgba(0, 0, 0, 0.2), 0 32px 64px 0 rgba(0, 0, 0, 0.15);
475
+ --refineui-elevation-32: var(--refineui-elevation-32light);
476
+ --refineui-elevation-64light: 0 24px 24px 0 rgba(33, 33, 33, 0.05), 0 48px 96px 0 rgba(33, 33, 33, 0.04);
477
+ --refineui-elevation-64dark: 0 24px 24px 0 rgba(0, 0, 0, 0.2), 0 48px 96px 0 rgba(0, 0, 0, 0.15);
478
+ --refineui-elevation-64: var(--refineui-elevation-64light);
479
+ --refineui-elevation-2lighter: 0 1px 2px 0 rgba(33, 33, 33, 0.02), 0 2px 4px 0 rgba(33, 33, 33, 0.02);
480
+ /* Z-index */
481
+ --refineui-z-background: 0;
482
+ --refineui-z-content: 1;
483
+ --refineui-z-overlay: 100;
484
+ --refineui-z-popup: 1000;
485
+ --refineui-z-messages: 10000;
486
+ --refineui-z-floating: 1000;
487
+ --refineui-z-priority: 100000;
488
+ --refineui-z-debug: 999999;
489
+ /* Semantic colors — Light mode */
490
+ --refineui-color-alias-background-brand-active: var(--refineui-color-neutral-black);
491
+ --refineui-color-alias-background-brand-disabled: var(--refineui-color-neutral-150);
492
+ --refineui-color-alias-background-brand-hover: var(--refineui-color-primary-dark-gray);
493
+ --refineui-color-alias-background-brand-strong: var(--refineui-color-primary-dark-gray);
494
+ --refineui-color-alias-background-brand-subtle: var(--refineui-color-primary-light-gray);
495
+ --refineui-color-alias-background-brand: var(--refineui-color-primary-black);
496
+ --refineui-color-alias-background-discovery-hover: var(--refineui-color-purple-700);
497
+ --refineui-color-alias-background-discovery-subtle: var(--refineui-color-purple-100);
498
+ --refineui-color-alias-background-discovery: var(--refineui-color-purple-500);
499
+ --refineui-color-alias-background-error-hover: var(--refineui-color-red-700);
500
+ --refineui-color-alias-background-error-subtle: var(--refineui-color-red-100);
501
+ --refineui-color-alias-background-error: var(--refineui-color-red-500);
502
+ --refineui-color-alias-background-info-hover: var(--refineui-color-blue-700);
503
+ --refineui-color-alias-background-info-subtle: var(--refineui-color-blue-100);
504
+ --refineui-color-alias-background-info: var(--refineui-color-blue-500);
505
+ --refineui-color-alias-background-primary-active: var(--refineui-color-neutral-150);
506
+ --refineui-color-alias-background-primary-hover: var(--refineui-color-neutral-100);
507
+ --refineui-color-alias-background-primary: var(--refineui-color-neutral-white);
508
+ --refineui-color-alias-background-success-hover: var(--refineui-color-green-700);
509
+ --refineui-color-alias-background-success-subtle: var(--refineui-color-green-100);
510
+ --refineui-color-alias-background-success: var(--refineui-color-green-500);
511
+ --refineui-color-alias-background-surface-active: var(--refineui-color-neutral-150);
512
+ --refineui-color-alias-background-surface-disabled: var(--refineui-color-neutral-150);
513
+ --refineui-color-alias-background-surface-hover: var(--refineui-color-neutral-100);
514
+ --refineui-color-alias-background-surface-selected: var(--refineui-color-neutral-200);
515
+ --refineui-color-alias-background-surface: var(--refineui-color-neutral-white);
516
+ --refineui-color-alias-background-warning-hover: var(--refineui-color-yellow-500);
517
+ --refineui-color-alias-background-warning-subtle: var(--refineui-color-yellow-100);
518
+ --refineui-color-alias-background-warning: var(--refineui-color-yellow-300);
519
+ --refineui-color-alias-border-default: var(--refineui-color-neutral-300);
520
+ --refineui-color-alias-border-disabled: var(--refineui-color-neutral-250);
521
+ --refineui-color-alias-border-discovery: var(--refineui-color-purple-500);
522
+ --refineui-color-alias-border-error: var(--refineui-color-red-500);
523
+ --refineui-color-alias-border-focus: var(--refineui-color-neutral-750);
524
+ --refineui-color-alias-border-hover: var(--refineui-color-neutral-500);
525
+ --refineui-color-alias-border-info: var(--refineui-color-blue-500);
526
+ --refineui-color-alias-border-strong: var(--refineui-color-neutral-450);
527
+ --refineui-color-alias-border-subtle: var(--refineui-color-neutral-200);
528
+ --refineui-color-alias-border-success: var(--refineui-color-green-500);
529
+ --refineui-color-alias-border-warning: var(--refineui-color-yellow-300);
530
+ --refineui-color-alias-foreground-brand-strong: var(--refineui-color-neutral-black);
531
+ --refineui-color-alias-foreground-brand: var(--refineui-color-primary-black);
532
+ --refineui-color-alias-foreground-disabled: var(--refineui-color-neutral-400);
533
+ --refineui-color-alias-foreground-discovery: var(--refineui-color-purple-700);
534
+ --refineui-color-alias-foreground-error: var(--refineui-color-red-700);
535
+ --refineui-color-alias-foreground-info: var(--refineui-color-blue-700);
536
+ --refineui-color-alias-foreground-inversed: var(--refineui-color-neutral-white);
537
+ --refineui-color-alias-foreground-link-active: var(--refineui-color-blue-900);
538
+ --refineui-color-alias-foreground-link-hover: var(--refineui-color-blue-800);
539
+ --refineui-color-alias-foreground-link-visited: var(--refineui-color-blue-500);
540
+ --refineui-color-alias-foreground-link: var(--refineui-color-blue-700);
541
+ --refineui-color-alias-foreground-on-brand: var(--refineui-color-neutral-white);
542
+ --refineui-color-alias-foreground-on-discovery: var(--refineui-color-neutral-white);
543
+ --refineui-color-alias-foreground-on-error: var(--refineui-color-neutral-white);
544
+ --refineui-color-alias-foreground-on-info: var(--refineui-color-neutral-white);
545
+ --refineui-color-alias-foreground-on-success: var(--refineui-color-neutral-white);
546
+ --refineui-color-alias-foreground-on-warning: var(--refineui-color-neutral-white);
547
+ --refineui-color-alias-foreground-placeholder: var(--refineui-color-neutral-450);
548
+ --refineui-color-alias-foreground-primary-hover: var(--refineui-color-neutral-black);
549
+ --refineui-color-alias-foreground-primary: var(--refineui-color-primary-black);
550
+ --refineui-color-alias-foreground-secondary: var(--refineui-color-neutral-600);
551
+ --refineui-color-alias-foreground-success: var(--refineui-color-green-700);
552
+ --refineui-color-alias-foreground-tertiary: var(--refineui-color-neutral-500);
553
+ --refineui-color-alias-foreground-warning: var(--refineui-color-yellow-700);
554
+ --refineui-color-alias-surface-elevated: var(--refineui-color-neutral-white);
555
+ --refineui-color-alias-surface-inverse: var(--refineui-color-neutral-black);
556
+ --refineui-color-alias-surface-popover: var(--refineui-color-neutral-white);
557
+ --refineui-color-alias-surface-sunken: var(--refineui-color-neutral-150);
558
+ --refineui-color-alias-surface-tooltip: var(--refineui-color-neutral-750);
559
+ --refineui-color-alias-surface-overlay: rgba(0, 0, 0, 0.2);
560
+ /* Focus ring — :focus-visible contract */
561
+ --refineui-focus-ring-color: var(--refineui-color-neutral-750);
562
+ --refineui-focus-ring-width: 2px;
563
+ --refineui-focus-ring-offset: 2px;
564
+ --refineui-focus-ring-style: solid;
565
+ --refineui-focus-color: var(--refineui-focus-ring-color);
566
+ --refineui-focus-offset: var(--refineui-focus-ring-offset);
567
+ }
568
+
569
+ [data-theme="dark"], .dark {
570
+ --refineui-color-alias-background-brand-active: var(--refineui-color-primary-light-gray);
571
+ --refineui-color-alias-background-brand-disabled: var(--refineui-color-neutral-650);
572
+ --refineui-color-alias-background-brand-hover: var(--refineui-color-primary-light-gray);
573
+ --refineui-color-alias-background-brand-strong: var(--refineui-color-primary-gray);
574
+ --refineui-color-alias-background-brand-subtle: var(--refineui-color-neutral-800);
575
+ --refineui-color-alias-background-brand: var(--refineui-color-primary-gray);
576
+ --refineui-color-alias-background-discovery-hover: var(--refineui-color-purple-300);
577
+ --refineui-color-alias-background-discovery-subtle: var(--refineui-color-purple-900);
578
+ --refineui-color-alias-background-discovery: var(--refineui-color-purple-500);
579
+ --refineui-color-alias-background-error-hover: var(--refineui-color-red-300);
580
+ --refineui-color-alias-background-error-subtle: var(--refineui-color-red-900);
581
+ --refineui-color-alias-background-error: var(--refineui-color-red-500);
582
+ --refineui-color-alias-background-info-hover: var(--refineui-color-blue-300);
583
+ --refineui-color-alias-background-info-subtle: var(--refineui-color-blue-900);
584
+ --refineui-color-alias-background-info: var(--refineui-color-blue-500);
585
+ --refineui-color-alias-background-primary-active: var(--refineui-color-neutral-800);
586
+ --refineui-color-alias-background-primary-hover: var(--refineui-color-neutral-850);
587
+ --refineui-color-alias-background-primary: var(--refineui-color-neutral-900);
588
+ --refineui-color-alias-background-success-hover: var(--refineui-color-green-300);
589
+ --refineui-color-alias-background-success-subtle: var(--refineui-color-green-900);
590
+ --refineui-color-alias-background-success: var(--refineui-color-green-500);
591
+ --refineui-color-alias-background-surface-active: var(--refineui-color-neutral-700);
592
+ --refineui-color-alias-background-surface-disabled: var(--refineui-color-neutral-850);
593
+ --refineui-color-alias-background-surface-hover: var(--refineui-color-neutral-750);
594
+ --refineui-color-alias-background-surface-selected: var(--refineui-color-neutral-650);
595
+ --refineui-color-alias-background-surface: var(--refineui-color-neutral-800);
596
+ --refineui-color-alias-background-warning-hover: var(--refineui-color-yellow-200);
597
+ --refineui-color-alias-background-warning-subtle: var(--refineui-color-yellow-900);
598
+ --refineui-color-alias-background-warning: var(--refineui-color-yellow-300);
599
+ --refineui-color-alias-border-default: var(--refineui-color-neutral-650);
600
+ --refineui-color-alias-border-disabled: var(--refineui-color-neutral-700);
601
+ --refineui-color-alias-border-discovery: var(--refineui-color-purple-500);
602
+ --refineui-color-alias-border-error: var(--refineui-color-red-500);
603
+ --refineui-color-alias-border-focus: var(--refineui-color-neutral-350);
604
+ --refineui-color-alias-border-hover: var(--refineui-color-neutral-500);
605
+ --refineui-color-alias-border-info: var(--refineui-color-blue-500);
606
+ --refineui-color-alias-border-strong: var(--refineui-color-neutral-550);
607
+ --refineui-color-alias-border-subtle: var(--refineui-color-neutral-750);
608
+ --refineui-color-alias-border-success: var(--refineui-color-green-500);
609
+ --refineui-color-alias-border-warning: var(--refineui-color-yellow-300);
610
+ --refineui-color-alias-foreground-brand-strong: var(--refineui-color-primary-light-gray);
611
+ --refineui-color-alias-foreground-brand: var(--refineui-color-primary-gray);
612
+ --refineui-color-alias-foreground-disabled: var(--refineui-color-neutral-600);
613
+ --refineui-color-alias-foreground-discovery: var(--refineui-color-purple-200);
614
+ --refineui-color-alias-foreground-error: var(--refineui-color-red-200);
615
+ --refineui-color-alias-foreground-info: var(--refineui-color-blue-200);
616
+ --refineui-color-alias-foreground-inversed: var(--refineui-color-primary-black);
617
+ --refineui-color-alias-foreground-link-active: var(--refineui-color-blue-200);
618
+ --refineui-color-alias-foreground-link-hover: var(--refineui-color-blue-300);
619
+ --refineui-color-alias-foreground-link-visited: var(--refineui-color-blue-100);
620
+ --refineui-color-alias-foreground-link: var(--refineui-color-blue-400);
621
+ --refineui-color-alias-foreground-on-brand: var(--refineui-color-neutral-black);
622
+ --refineui-color-alias-foreground-on-discovery: var(--refineui-color-neutral-black);
623
+ --refineui-color-alias-foreground-on-error: var(--refineui-color-neutral-black);
624
+ --refineui-color-alias-foreground-on-info: var(--refineui-color-neutral-black);
625
+ --refineui-color-alias-foreground-on-success: var(--refineui-color-neutral-black);
626
+ --refineui-color-alias-foreground-on-warning: var(--refineui-color-neutral-black);
627
+ --refineui-color-alias-foreground-placeholder: var(--refineui-color-neutral-500);
628
+ --refineui-color-alias-foreground-primary-hover: var(--refineui-color-neutral-100);
629
+ --refineui-color-alias-foreground-primary: var(--refineui-color-neutral-white);
630
+ --refineui-color-alias-foreground-secondary: var(--refineui-color-neutral-350);
631
+ --refineui-color-alias-foreground-success: var(--refineui-color-green-200);
632
+ --refineui-color-alias-foreground-tertiary: var(--refineui-color-neutral-450);
633
+ --refineui-color-alias-foreground-warning: var(--refineui-color-yellow-200);
634
+ --refineui-color-alias-surface-elevated: var(--refineui-color-neutral-700);
635
+ --refineui-color-alias-surface-inverse: var(--refineui-color-neutral-white);
636
+ --refineui-color-alias-surface-popover: var(--refineui-color-neutral-750);
637
+ --refineui-color-alias-surface-sunken: var(--refineui-color-neutral-800);
638
+ --refineui-color-alias-surface-tooltip: var(--refineui-color-neutral-300);
639
+ --refineui-color-alias-surface-overlay: rgba(0, 0, 0, 0.6);
640
+ /* Theme-aware elevation */
641
+ --refineui-elevation-2: var(--refineui-elevation-2dark);
642
+ --refineui-elevation-4: var(--refineui-elevation-4dark);
643
+ --refineui-elevation-8: var(--refineui-elevation-8dark);
644
+ --refineui-elevation-16: var(--refineui-elevation-16dark);
645
+ --refineui-elevation-24: var(--refineui-elevation-24dark);
646
+ --refineui-elevation-32: var(--refineui-elevation-32dark);
647
+ --refineui-elevation-64: var(--refineui-elevation-64dark);
648
+ /* Focus ring — dark */
649
+ --refineui-focus-ring-color: var(--refineui-color-neutral-350);
650
+ }
651
+
652
+ @media (prefers-reduced-motion: reduce) {
653
+ :root {
654
+ --refineui-motion-duration-instant: var(--refineui-foundation-motion-duration-0);
655
+ --refineui-motion-duration-fast: var(--refineui-foundation-motion-duration-0);
656
+ --refineui-motion-duration-normal: var(--refineui-foundation-motion-duration-0);
657
+ --refineui-motion-duration-medium: var(--refineui-foundation-motion-duration-0);
658
+ --refineui-motion-duration-slow: var(--refineui-foundation-motion-duration-0);
659
+ --refineui-motion-duration-overlay: var(--refineui-foundation-motion-duration-0);
660
+ --refineui-motion-duration-panel: var(--refineui-foundation-motion-duration-0);
661
+ --refineui-motion-duration-accordion-panel: var(--refineui-foundation-motion-duration-0);
662
+ --refineui-motion-duration-accordion-content: var(--refineui-foundation-motion-duration-0);
663
+ --refineui-motion-duration-toast-enter: var(--refineui-foundation-motion-duration-0);
664
+ --refineui-motion-duration-toast-leave: var(--refineui-foundation-motion-duration-0);
665
+ --refineui-motion-duration-skeleton: var(--refineui-foundation-motion-duration-0);
666
+ --refineui-motion-duration-spinner: var(--refineui-foundation-motion-duration-0);
667
+ --refineui-motion-scale-press: 1;
668
+ --refineui-motion-scale-enter: 1;
669
+ --refineui-motion-scale-hover-grow: 1;
670
+ --refineui-motion-distance-float: 0px;
671
+ }
672
+ }