tera-system-ui 0.1.67 → 0.1.69
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.
|
@@ -3,10 +3,10 @@ import IconX from '../icons/IconX.svelte';
|
|
|
3
3
|
import { cn } from '../../utils/index.js';
|
|
4
4
|
let { children, open = $bindable(false), ref = $bindable(null), closeOnClickOutside = true, closeButton = true, size = 'sm', header, footer, class: className, position = 'center', padding, staticRender = false, preventScroll, onOpenChangeComplete, triggerRef, focusTriggerAfterClose = true, containerClass, headerClass, bodyClass, footerClass, ...props } = $props();
|
|
5
5
|
const sizeClass = {
|
|
6
|
-
xs: 'max-w-[24rem]',
|
|
7
|
-
sm: 'max-w-[30rem]',
|
|
8
|
-
md: 'max-w-[40rem]',
|
|
9
|
-
lg: 'max-w-[50rem]',
|
|
6
|
+
xs: 'max-w-[min(24rem,calc(100vw-2rem))]',
|
|
7
|
+
sm: 'max-w-[min(30rem,calc(100vw-2rem))]',
|
|
8
|
+
md: 'max-w-[min(40rem,calc(100vw-2rem))]',
|
|
9
|
+
lg: 'max-w-[min(50rem,calc(100vw-2rem))]',
|
|
10
10
|
full: 'max-w-full w-screen rounded-none',
|
|
11
11
|
auto: 'w-fit',
|
|
12
12
|
};
|
|
@@ -108,18 +108,18 @@ html.dark, .dark * {
|
|
|
108
108
|
--font-mono: "Geist Mono", "Roboto Mono Variable", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New";
|
|
109
109
|
|
|
110
110
|
/* ── Border Radius ──────────────────────────────────────────── */
|
|
111
|
-
--border-radius-base:
|
|
111
|
+
--border-radius-base: 0.25rem;
|
|
112
112
|
--border-radius-container: 0.5rem;
|
|
113
|
-
--tera-radius-sm:
|
|
113
|
+
--tera-radius-sm: 2px;
|
|
114
114
|
--tera-radius-base: 6px;
|
|
115
|
-
--tera-radius-lg:
|
|
116
|
-
--tera-radius-xl:
|
|
115
|
+
--tera-radius-lg: 8px;
|
|
116
|
+
--tera-radius-xl: 20px;
|
|
117
117
|
|
|
118
118
|
/* ── Control Heights ────────────────────────────────────────── */
|
|
119
|
-
--tera-control-height-xs:
|
|
120
|
-
--tera-control-height-sm:
|
|
119
|
+
--tera-control-height-xs: 20px;
|
|
120
|
+
--tera-control-height-sm: 24px;
|
|
121
121
|
--tera-control-height-base: 32px;
|
|
122
|
-
--tera-control-height-lg:
|
|
122
|
+
--tera-control-height-lg: 40px;
|
|
123
123
|
|
|
124
124
|
/* ── Transitions ────────────────────────────────────────────── */
|
|
125
125
|
--tera-transition-fast: 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
@@ -127,207 +127,207 @@ html.dark, .dark * {
|
|
|
127
127
|
--tera-transition-slow: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
128
128
|
|
|
129
129
|
/* ── Easing Functions ───────────────────────────────────────── */
|
|
130
|
-
--ease-ui:
|
|
130
|
+
--ease-ui: cubic-bezier(0.16, 1, 0.3, 1);
|
|
131
131
|
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
132
|
-
--ease-out:
|
|
132
|
+
--ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0);
|
|
133
133
|
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
134
134
|
|
|
135
135
|
/* ── Responsive ─────────────────────────────────────────────── */
|
|
136
136
|
--header-height: 3rem;
|
|
137
137
|
|
|
138
138
|
/* ── Primitive Color Scales (static — never use in components) ── */
|
|
139
|
-
--color-neutral-1:
|
|
140
|
-
--color-neutral-2:
|
|
141
|
-
--color-neutral-3:
|
|
142
|
-
--color-neutral-4:
|
|
143
|
-
--color-neutral-5:
|
|
144
|
-
--color-neutral-6:
|
|
145
|
-
--color-neutral-7:
|
|
146
|
-
--color-neutral-8:
|
|
147
|
-
--color-neutral-9:
|
|
148
|
-
--color-neutral-10: rgb(38,
|
|
149
|
-
--color-neutral-11: rgb(31,
|
|
150
|
-
--color-neutral-12: rgb(20,
|
|
151
|
-
--color-neutral-13: rgb(0,
|
|
152
|
-
|
|
153
|
-
--color-primary-50:
|
|
139
|
+
--color-neutral-1: rgb(255, 255, 255);
|
|
140
|
+
--color-neutral-2: rgb(252, 252, 252);
|
|
141
|
+
--color-neutral-3: rgb(245, 245, 245);
|
|
142
|
+
--color-neutral-4: rgb(240, 240, 240);
|
|
143
|
+
--color-neutral-5: rgb(217, 217, 217);
|
|
144
|
+
--color-neutral-6: rgb(191, 191, 191);
|
|
145
|
+
--color-neutral-7: rgb(140, 140, 140);
|
|
146
|
+
--color-neutral-8: rgb(89, 89, 89);
|
|
147
|
+
--color-neutral-9: rgb(69, 69, 69);
|
|
148
|
+
--color-neutral-10: rgb(38, 38, 38);
|
|
149
|
+
--color-neutral-11: rgb(31, 31, 31);
|
|
150
|
+
--color-neutral-12: rgb(20, 20, 20);
|
|
151
|
+
--color-neutral-13: rgb(0, 0, 0);
|
|
152
|
+
|
|
153
|
+
--color-primary-50: rgb(235, 243, 254);
|
|
154
154
|
--color-primary-100: rgb(194, 216, 252);
|
|
155
155
|
--color-primary-200: rgb(165, 198, 251);
|
|
156
156
|
--color-primary-300: rgb(124, 171, 249);
|
|
157
|
-
--color-primary-400: rgb(98,
|
|
158
|
-
--color-primary-500: rgb(59,
|
|
159
|
-
--color-primary-600: rgb(54,
|
|
160
|
-
--color-primary-700: rgb(42,
|
|
161
|
-
--color-primary-800: rgb(32,
|
|
162
|
-
--color-primary-900: rgb(25,
|
|
163
|
-
|
|
164
|
-
--color-error-50:
|
|
157
|
+
--color-primary-400: rgb(98, 155, 248);
|
|
158
|
+
--color-primary-500: rgb(59, 130, 246);
|
|
159
|
+
--color-primary-600: rgb(54, 118, 224);
|
|
160
|
+
--color-primary-700: rgb(42, 92, 175);
|
|
161
|
+
--color-primary-800: rgb(32, 72, 135);
|
|
162
|
+
--color-primary-900: rgb(25, 55, 103);
|
|
163
|
+
|
|
164
|
+
--color-error-50: rgb(253, 236, 236);
|
|
165
165
|
--color-error-100: rgb(250, 197, 197);
|
|
166
166
|
--color-error-200: rgb(248, 169, 169);
|
|
167
167
|
--color-error-300: rgb(244, 130, 130);
|
|
168
168
|
--color-error-400: rgb(242, 105, 105);
|
|
169
|
-
--color-error-500: rgb(239, 68,
|
|
170
|
-
--color-error-600: rgb(217, 62,
|
|
171
|
-
--color-error-700: rgb(170, 48,
|
|
172
|
-
--color-error-800: rgb(131, 37,
|
|
173
|
-
--color-error-900: rgb(100, 29,
|
|
169
|
+
--color-error-500: rgb(239, 68, 68);
|
|
170
|
+
--color-error-600: rgb(217, 62, 62);
|
|
171
|
+
--color-error-700: rgb(170, 48, 48);
|
|
172
|
+
--color-error-800: rgb(131, 37, 37);
|
|
173
|
+
--color-error-900: rgb(100, 29, 29);
|
|
174
174
|
|
|
175
|
-
--color-success-50:
|
|
175
|
+
--color-success-50: rgb(233, 249, 239);
|
|
176
176
|
--color-success-100: rgb(186, 237, 205);
|
|
177
177
|
--color-success-200: rgb(153, 228, 181);
|
|
178
178
|
--color-success-300: rgb(107, 216, 147);
|
|
179
|
-
--color-success-400: rgb(78,
|
|
180
|
-
--color-success-500: rgb(34,
|
|
181
|
-
--color-success-600: rgb(31,
|
|
182
|
-
--color-success-700: rgb(24,
|
|
183
|
-
--color-success-800: rgb(19,
|
|
184
|
-
--color-success-900: rgb(14,
|
|
185
|
-
|
|
186
|
-
--color-warning-50:
|
|
179
|
+
--color-success-400: rgb(78, 209, 126);
|
|
180
|
+
--color-success-500: rgb(34, 197, 94);
|
|
181
|
+
--color-success-600: rgb(31, 179, 86);
|
|
182
|
+
--color-success-700: rgb(24, 140, 67);
|
|
183
|
+
--color-success-800: rgb(19, 108, 52);
|
|
184
|
+
--color-success-900: rgb(14, 83, 39);
|
|
185
|
+
|
|
186
|
+
--color-warning-50: rgb(254, 241, 232);
|
|
187
187
|
--color-warning-100: rgb(253, 212, 183);
|
|
188
188
|
--color-warning-200: rgb(252, 191, 148);
|
|
189
189
|
--color-warning-300: rgb(251, 161, 99);
|
|
190
190
|
--color-warning-400: rgb(250, 143, 69);
|
|
191
191
|
--color-warning-500: rgb(249, 115, 22);
|
|
192
192
|
--color-warning-600: rgb(227, 105, 20);
|
|
193
|
-
--color-warning-700: rgb(177, 82,
|
|
194
|
-
--color-warning-800: rgb(137, 63,
|
|
195
|
-
--color-warning-900: rgb(105, 48,
|
|
193
|
+
--color-warning-700: rgb(177, 82, 16);
|
|
194
|
+
--color-warning-800: rgb(137, 63, 12);
|
|
195
|
+
--color-warning-900: rgb(105, 48, 9);
|
|
196
196
|
|
|
197
|
-
--color-information-50:
|
|
197
|
+
--color-information-50: rgb(240, 249, 255);
|
|
198
198
|
--color-information-100: rgb(186, 230, 253);
|
|
199
199
|
--color-information-200: rgb(125, 211, 252);
|
|
200
|
-
--color-information-300: rgb(56,
|
|
201
|
-
--color-information-400: rgb(14,
|
|
202
|
-
--color-information-500: rgb(2,
|
|
203
|
-
--color-information-600: rgb(3,
|
|
204
|
-
--color-information-700: rgb(7,
|
|
205
|
-
--color-information-800: rgb(12,
|
|
206
|
-
--color-information-900: rgb(8,
|
|
207
|
-
|
|
208
|
-
--color-secondary-50:
|
|
200
|
+
--color-information-300: rgb(56, 189, 248);
|
|
201
|
+
--color-information-400: rgb(14, 165, 233);
|
|
202
|
+
--color-information-500: rgb(2, 132, 199);
|
|
203
|
+
--color-information-600: rgb(3, 105, 161);
|
|
204
|
+
--color-information-700: rgb(7, 89, 133);
|
|
205
|
+
--color-information-800: rgb(12, 74, 110);
|
|
206
|
+
--color-information-900: rgb(8, 47, 73);
|
|
207
|
+
|
|
208
|
+
--color-secondary-50: rgb(253, 237, 245);
|
|
209
209
|
--color-secondary-100: rgb(249, 198, 223);
|
|
210
210
|
--color-secondary-200: rgb(246, 171, 208);
|
|
211
211
|
--color-secondary-300: rgb(242, 132, 187);
|
|
212
212
|
--color-secondary-400: rgb(240, 109, 173);
|
|
213
|
-
--color-secondary-500: rgb(236, 72,
|
|
214
|
-
--color-secondary-600: rgb(215, 66,
|
|
215
|
-
--color-secondary-700: rgb(168, 51,
|
|
216
|
-
--color-secondary-800: rgb(130, 40,
|
|
217
|
-
--color-secondary-900: rgb(99,
|
|
213
|
+
--color-secondary-500: rgb(236, 72, 153);
|
|
214
|
+
--color-secondary-600: rgb(215, 66, 139);
|
|
215
|
+
--color-secondary-700: rgb(168, 51, 109);
|
|
216
|
+
--color-secondary-800: rgb(130, 40, 84);
|
|
217
|
+
--color-secondary-900: rgb(99, 30, 64);
|
|
218
218
|
|
|
219
219
|
/* ── Scale Tokens (alias primitives in light; flip in dark) ─── */
|
|
220
220
|
/* Components use these — they are the semantic-safe color scale */
|
|
221
|
-
--color-neutral-token-1:
|
|
222
|
-
--color-neutral-token-2:
|
|
223
|
-
--color-neutral-token-3:
|
|
224
|
-
--color-neutral-token-4:
|
|
225
|
-
--color-neutral-token-5:
|
|
226
|
-
--color-neutral-token-6:
|
|
227
|
-
--color-neutral-token-7:
|
|
228
|
-
--color-neutral-token-8:
|
|
229
|
-
--color-neutral-token-9:
|
|
221
|
+
--color-neutral-token-1: var(--color-neutral-1);
|
|
222
|
+
--color-neutral-token-2: var(--color-neutral-2);
|
|
223
|
+
--color-neutral-token-3: var(--color-neutral-3);
|
|
224
|
+
--color-neutral-token-4: var(--color-neutral-4);
|
|
225
|
+
--color-neutral-token-5: var(--color-neutral-5);
|
|
226
|
+
--color-neutral-token-6: var(--color-neutral-6);
|
|
227
|
+
--color-neutral-token-7: var(--color-neutral-7);
|
|
228
|
+
--color-neutral-token-8: var(--color-neutral-8);
|
|
229
|
+
--color-neutral-token-9: var(--color-neutral-9);
|
|
230
230
|
--color-neutral-token-10: var(--color-neutral-10);
|
|
231
231
|
--color-neutral-token-11: var(--color-neutral-11);
|
|
232
232
|
--color-neutral-token-12: var(--color-neutral-12);
|
|
233
233
|
--color-neutral-token-13: var(--color-neutral-13);
|
|
234
234
|
|
|
235
|
-
--color-primary-token-1:
|
|
236
|
-
--color-primary-token-2:
|
|
237
|
-
--color-primary-token-3:
|
|
238
|
-
--color-primary-token-4:
|
|
239
|
-
--color-primary-token-5:
|
|
240
|
-
--color-primary-token-6:
|
|
241
|
-
--color-primary-token-7:
|
|
242
|
-
--color-primary-token-8:
|
|
243
|
-
--color-primary-token-9:
|
|
235
|
+
--color-primary-token-1: var(--color-primary-50);
|
|
236
|
+
--color-primary-token-2: var(--color-primary-100);
|
|
237
|
+
--color-primary-token-3: var(--color-primary-200);
|
|
238
|
+
--color-primary-token-4: var(--color-primary-300);
|
|
239
|
+
--color-primary-token-5: var(--color-primary-400);
|
|
240
|
+
--color-primary-token-6: var(--color-primary-500);
|
|
241
|
+
--color-primary-token-7: var(--color-primary-600);
|
|
242
|
+
--color-primary-token-8: var(--color-primary-700);
|
|
243
|
+
--color-primary-token-9: var(--color-primary-800);
|
|
244
244
|
--color-primary-token-10: var(--color-primary-900);
|
|
245
245
|
|
|
246
246
|
/* ── Brand ──────────────────────────────────────────────────── */
|
|
247
|
-
--color-brand-500:
|
|
247
|
+
--color-brand-500: var(--color-primary-500);
|
|
248
248
|
--color-brand-token-5: var(--color-primary-500);
|
|
249
249
|
|
|
250
250
|
/* ── Surfaces (backgrounds by elevation) ─────────────────────── */
|
|
251
251
|
/* Convention: {role}-{modifier} — role-first, modifier describes prominence */
|
|
252
|
-
--color-surface:
|
|
253
|
-
--color-surface-raised:
|
|
254
|
-
--color-surface-sunken:
|
|
255
|
-
--color-surface-hover:
|
|
252
|
+
--color-surface: var(--color-neutral-token-1);
|
|
253
|
+
--color-surface-raised: var(--color-neutral-token-2);
|
|
254
|
+
--color-surface-sunken: var(--color-neutral-token-3);
|
|
255
|
+
--color-surface-hover: var(--color-neutral-token-4);
|
|
256
256
|
--color-surface-control: var(--color-neutral-token-1);
|
|
257
257
|
|
|
258
258
|
/* ── Borders ─────────────────────────────────────────────────── */
|
|
259
259
|
--color-border-default: var(--color-neutral-token-5);
|
|
260
|
-
--color-border-strong:
|
|
260
|
+
--color-border-strong: var(--color-neutral-token-6);
|
|
261
261
|
|
|
262
262
|
/* ── Text (prominence scale) ─────────────────────────────────── */
|
|
263
|
-
--color-text-primary:
|
|
263
|
+
--color-text-primary: var(--color-neutral-token-13);
|
|
264
264
|
--color-text-secondary: var(--color-neutral-token-8);
|
|
265
|
-
--color-text-tertiary:
|
|
266
|
-
--color-text-disabled:
|
|
265
|
+
--color-text-tertiary: var(--color-neutral-token-7);
|
|
266
|
+
--color-text-disabled: var(--color-neutral-token-6);
|
|
267
267
|
|
|
268
268
|
/* ── Interactive (primary action — hover darkens, active darkest) ── */
|
|
269
|
-
--color-interactive:
|
|
270
|
-
--color-interactive-hover:
|
|
269
|
+
--color-interactive: var(--color-primary-500);
|
|
270
|
+
--color-interactive-hover: var(--color-primary-600);
|
|
271
271
|
--color-interactive-active: var(--color-primary-700);
|
|
272
272
|
--color-interactive-subtle: var(--color-primary-50);
|
|
273
273
|
--color-interactive-border: var(--color-primary-200);
|
|
274
|
-
--color-interactive-text:
|
|
275
|
-
--color-interactive-on:
|
|
276
|
-
--color-overlay:
|
|
274
|
+
--color-interactive-text: var(--color-primary-700);
|
|
275
|
+
--color-interactive-on: #ffffff;
|
|
276
|
+
--color-overlay: rgb(0 0 0 / 0.45);
|
|
277
277
|
|
|
278
278
|
/* ── Status: Error ───────────────────────────────────────────── */
|
|
279
|
-
--color-error-subtle:
|
|
280
|
-
--color-error-muted:
|
|
281
|
-
--color-error-border:
|
|
282
|
-
--color-error-hover:
|
|
279
|
+
--color-error-subtle: var(--color-error-50);
|
|
280
|
+
--color-error-muted: var(--color-error-100);
|
|
281
|
+
--color-error-border: var(--color-error-200);
|
|
282
|
+
--color-error-hover: var(--color-error-400);
|
|
283
283
|
--color-error-default: var(--color-error-500);
|
|
284
|
-
--color-error-active:
|
|
285
|
-
--color-error-text:
|
|
284
|
+
--color-error-active: var(--color-error-600);
|
|
285
|
+
--color-error-text: var(--color-error-700);
|
|
286
286
|
|
|
287
287
|
/* ── Status: Warning ─────────────────────────────────────────── */
|
|
288
|
-
--color-warning-subtle:
|
|
289
|
-
--color-warning-muted:
|
|
290
|
-
--color-warning-border:
|
|
291
|
-
--color-warning-hover:
|
|
288
|
+
--color-warning-subtle: var(--color-warning-50);
|
|
289
|
+
--color-warning-muted: var(--color-warning-100);
|
|
290
|
+
--color-warning-border: var(--color-warning-200);
|
|
291
|
+
--color-warning-hover: var(--color-warning-400);
|
|
292
292
|
--color-warning-default: var(--color-warning-500);
|
|
293
|
-
--color-warning-active:
|
|
294
|
-
--color-warning-text:
|
|
293
|
+
--color-warning-active: var(--color-warning-600);
|
|
294
|
+
--color-warning-text: var(--color-warning-700);
|
|
295
295
|
|
|
296
296
|
/* ── Status: Success ─────────────────────────────────────────── */
|
|
297
|
-
--color-success-subtle:
|
|
298
|
-
--color-success-muted:
|
|
299
|
-
--color-success-border:
|
|
300
|
-
--color-success-hover:
|
|
297
|
+
--color-success-subtle: var(--color-success-50);
|
|
298
|
+
--color-success-muted: var(--color-success-100);
|
|
299
|
+
--color-success-border: var(--color-success-200);
|
|
300
|
+
--color-success-hover: var(--color-success-400);
|
|
301
301
|
--color-success-default: var(--color-success-500);
|
|
302
|
-
--color-success-active:
|
|
303
|
-
--color-success-text:
|
|
302
|
+
--color-success-active: var(--color-success-600);
|
|
303
|
+
--color-success-text: var(--color-success-700);
|
|
304
304
|
|
|
305
305
|
/* ── Status: Information ─────────────────────────────────────── */
|
|
306
|
-
--color-information-subtle:
|
|
307
|
-
--color-information-muted:
|
|
308
|
-
--color-information-border:
|
|
309
|
-
--color-information-hover:
|
|
306
|
+
--color-information-subtle: var(--color-information-50);
|
|
307
|
+
--color-information-muted: var(--color-information-100);
|
|
308
|
+
--color-information-border: var(--color-information-200);
|
|
309
|
+
--color-information-hover: var(--color-information-400);
|
|
310
310
|
--color-information-default: var(--color-information-500);
|
|
311
|
-
--color-information-active:
|
|
312
|
-
--color-information-text:
|
|
311
|
+
--color-information-active: var(--color-information-600);
|
|
312
|
+
--color-information-text: var(--color-information-700);
|
|
313
313
|
|
|
314
314
|
/* ── Elevation Shadows ───────────────────────────────────────── */
|
|
315
315
|
--shadow-none: none;
|
|
316
|
-
--shadow-sm:
|
|
317
|
-
--shadow-md:
|
|
318
|
-
--shadow-lg:
|
|
316
|
+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
317
|
+
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
318
|
+
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
|
|
319
319
|
--shadow-glow: 0 0 0 1px var(--color-primary-200),
|
|
320
|
-
|
|
320
|
+
0 4px 16px color-mix(in srgb, var(--color-primary-500) 20%, transparent);
|
|
321
321
|
|
|
322
322
|
/* ── Focus Shadows ───────────────────────────────────────────── */
|
|
323
|
-
--shadow-focus:
|
|
324
|
-
--shadow-focus-error:
|
|
325
|
-
--shadow-focus-warning: 0 0 0 3px color-mix(in srgb, var(--color-warning-500)
|
|
326
|
-
--shadow-focus-success: 0 0 0 3px color-mix(in srgb, var(--color-success-500)
|
|
323
|
+
--shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 20%, transparent);
|
|
324
|
+
--shadow-focus-error: 0 0 0 3px color-mix(in srgb, var(--color-error-500) 20%, transparent);
|
|
325
|
+
--shadow-focus-warning: 0 0 0 3px color-mix(in srgb, var(--color-warning-500) 20%, transparent);
|
|
326
|
+
--shadow-focus-success: 0 0 0 3px color-mix(in srgb, var(--color-success-500) 20%, transparent);
|
|
327
327
|
|
|
328
328
|
/* ── Accordion Animations ────────────────────────────────────── */
|
|
329
329
|
--animate-accordion-down: accordion-down 0.2s ease-out;
|
|
330
|
-
--animate-accordion-up:
|
|
330
|
+
--animate-accordion-up: accordion-up 0.2s ease-out;
|
|
331
331
|
}
|
|
332
332
|
|
|
333
333
|
|
|
@@ -336,30 +336,30 @@ html.dark, .dark * {
|
|
|
336
336
|
/* ============================================= */
|
|
337
337
|
.dark {
|
|
338
338
|
/* ── Neutral Tokens (token-1/3/4/5/6 use custom dark values) ── */
|
|
339
|
-
--color-neutral-token-1:
|
|
340
|
-
--color-neutral-token-2:
|
|
341
|
-
--color-neutral-token-3:
|
|
342
|
-
--color-neutral-token-4:
|
|
343
|
-
--color-neutral-token-5:
|
|
344
|
-
--color-neutral-token-6:
|
|
345
|
-
--color-neutral-token-7:
|
|
346
|
-
--color-neutral-token-8:
|
|
347
|
-
--color-neutral-token-9:
|
|
339
|
+
--color-neutral-token-1: rgb(9, 9, 9);
|
|
340
|
+
--color-neutral-token-2: rgb(20, 20, 20);
|
|
341
|
+
--color-neutral-token-3: rgb(32, 32, 32);
|
|
342
|
+
--color-neutral-token-4: rgb(48, 48, 48);
|
|
343
|
+
--color-neutral-token-5: rgb(70, 70, 70);
|
|
344
|
+
--color-neutral-token-6: rgb(95, 95, 95);
|
|
345
|
+
--color-neutral-token-7: rgb(140, 140, 140);
|
|
346
|
+
--color-neutral-token-8: rgb(191, 191, 191);
|
|
347
|
+
--color-neutral-token-9: rgb(217, 217, 217);
|
|
348
348
|
--color-neutral-token-10: rgb(240, 240, 240);
|
|
349
349
|
--color-neutral-token-11: rgb(245, 245, 245);
|
|
350
350
|
--color-neutral-token-12: rgb(252, 252, 252);
|
|
351
351
|
--color-neutral-token-13: rgb(255, 255, 255);
|
|
352
352
|
|
|
353
353
|
/* ── Primary Tokens (reversed scale) ────────────────────────── */
|
|
354
|
-
--color-primary-token-1:
|
|
355
|
-
--color-primary-token-2:
|
|
356
|
-
--color-primary-token-3:
|
|
357
|
-
--color-primary-token-4:
|
|
358
|
-
--color-primary-token-5:
|
|
359
|
-
--color-primary-token-6:
|
|
360
|
-
--color-primary-token-7:
|
|
361
|
-
--color-primary-token-8:
|
|
362
|
-
--color-primary-token-9:
|
|
354
|
+
--color-primary-token-1: var(--color-primary-900);
|
|
355
|
+
--color-primary-token-2: var(--color-primary-800);
|
|
356
|
+
--color-primary-token-3: var(--color-primary-700);
|
|
357
|
+
--color-primary-token-4: var(--color-primary-600);
|
|
358
|
+
--color-primary-token-5: var(--color-primary-500);
|
|
359
|
+
--color-primary-token-6: var(--color-primary-400);
|
|
360
|
+
--color-primary-token-7: var(--color-primary-300);
|
|
361
|
+
--color-primary-token-8: var(--color-primary-200);
|
|
362
|
+
--color-primary-token-9: var(--color-primary-100);
|
|
363
363
|
--color-primary-token-10: var(--color-primary-50);
|
|
364
364
|
|
|
365
365
|
/* ── Brand ───────────────────────────────────────────────────── */
|
|
@@ -371,56 +371,57 @@ html.dark, .dark * {
|
|
|
371
371
|
/* ── Interactive Overrides ───────────────────────────────────── */
|
|
372
372
|
--color-interactive-subtle: var(--color-primary-900);
|
|
373
373
|
--color-interactive-border: var(--color-primary-700);
|
|
374
|
-
--color-interactive-text:
|
|
375
|
-
--color-overlay:
|
|
374
|
+
--color-interactive-text: var(--color-primary-300);
|
|
375
|
+
--color-overlay: rgb(255 255 255 / 0.12);
|
|
376
376
|
|
|
377
377
|
/* ── Status Overrides ────────────────────────────────────────── */
|
|
378
378
|
--color-error-subtle: var(--color-error-900);
|
|
379
|
-
--color-error-muted:
|
|
379
|
+
--color-error-muted: var(--color-error-800);
|
|
380
380
|
--color-error-border: var(--color-error-700);
|
|
381
|
-
--color-error-text:
|
|
381
|
+
--color-error-text: var(--color-error-400);
|
|
382
382
|
|
|
383
383
|
--color-warning-subtle: var(--color-warning-900);
|
|
384
|
-
--color-warning-muted:
|
|
384
|
+
--color-warning-muted: var(--color-warning-800);
|
|
385
385
|
--color-warning-border: var(--color-warning-700);
|
|
386
|
-
--color-warning-text:
|
|
386
|
+
--color-warning-text: var(--color-warning-400);
|
|
387
387
|
|
|
388
388
|
--color-success-subtle: var(--color-success-900);
|
|
389
|
-
--color-success-muted:
|
|
389
|
+
--color-success-muted: var(--color-success-800);
|
|
390
390
|
--color-success-border: var(--color-success-700);
|
|
391
|
-
--color-success-text:
|
|
391
|
+
--color-success-text: var(--color-success-400);
|
|
392
392
|
|
|
393
393
|
--color-information-subtle: var(--color-information-900);
|
|
394
|
-
--color-information-muted:
|
|
394
|
+
--color-information-muted: var(--color-information-800);
|
|
395
395
|
--color-information-border: var(--color-information-700);
|
|
396
|
-
--color-information-text:
|
|
396
|
+
--color-information-text: var(--color-information-400);
|
|
397
397
|
|
|
398
398
|
/* ── Shadow Overrides (white glow replaces black drop on dark bg) */
|
|
399
|
-
--shadow-sm: 0 1px 3px rgba(0,0,0,0.4),
|
|
400
|
-
--shadow-md: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
|
|
401
|
-
--shadow-lg: 0 12px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
|
|
399
|
+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
|
|
400
|
+
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
|
|
401
|
+
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
|
|
402
402
|
|
|
403
403
|
/* ── Semantic Tokens (re-stated so var() resolves in .dark context) ── */
|
|
404
|
-
--color-surface:
|
|
405
|
-
--color-surface-raised:
|
|
406
|
-
--color-surface-sunken:
|
|
407
|
-
--color-surface-hover:
|
|
404
|
+
--color-surface: var(--color-neutral-token-1);
|
|
405
|
+
--color-surface-raised: var(--color-neutral-token-2);
|
|
406
|
+
--color-surface-sunken: var(--color-neutral-token-3);
|
|
407
|
+
--color-surface-hover: var(--color-neutral-token-4);
|
|
408
408
|
|
|
409
409
|
--color-border-default: var(--color-neutral-token-5);
|
|
410
|
-
--color-border-strong:
|
|
410
|
+
--color-border-strong: var(--color-neutral-token-6);
|
|
411
411
|
|
|
412
|
-
--color-text-primary:
|
|
412
|
+
--color-text-primary: var(--color-neutral-token-13);
|
|
413
413
|
--color-text-secondary: var(--color-neutral-token-8);
|
|
414
|
-
--color-text-tertiary:
|
|
415
|
-
--color-text-disabled:
|
|
414
|
+
--color-text-tertiary: var(--color-neutral-token-7);
|
|
415
|
+
--color-text-disabled: var(--color-neutral-token-6);
|
|
416
416
|
}
|
|
417
417
|
|
|
418
418
|
|
|
419
419
|
@media (min-width: theme(--breakpoint-md)) {
|
|
420
|
-
:root {
|
|
420
|
+
:root {
|
|
421
|
+
--header-height: 3.5rem;
|
|
422
|
+
}
|
|
421
423
|
}
|
|
422
424
|
|
|
423
|
-
|
|
424
425
|
/* ============================================= */
|
|
425
426
|
/* === Tailwind Theme Exposure === */
|
|
426
427
|
/* === @theme inline: Tailwind generates === */
|
|
@@ -432,25 +433,25 @@ html.dark, .dark * {
|
|
|
432
433
|
--default-ring-width: 3px;
|
|
433
434
|
--default-ring-color: var(--color-primary-700);
|
|
434
435
|
|
|
435
|
-
--color-border:
|
|
436
|
-
--color-input:
|
|
437
|
-
--color-ring:
|
|
438
|
-
--color-background: var(--color-neutral-token-1);
|
|
439
|
-
--color-foreground: var(--color-neutral-token-13);
|
|
440
|
-
|
|
441
|
-
--spacing-icon-xs:
|
|
442
|
-
--spacing-icon-sm:
|
|
443
|
-
--spacing-icon-md:
|
|
444
|
-
--spacing-icon-lg:
|
|
445
|
-
--spacing-icon-xl:
|
|
446
|
-
--spacing-icon-2xl:
|
|
436
|
+
--color-border: var(--color-neutral-token-5);
|
|
437
|
+
--color-input: var(--color-neutral-token-4);
|
|
438
|
+
--color-ring: var(--color-primary-700);
|
|
439
|
+
--color-background: var(--color-background, var(--color-neutral-token-1));
|
|
440
|
+
--color-foreground: var(--color-foreground, var(--color-neutral-token-13));
|
|
441
|
+
|
|
442
|
+
--spacing-icon-xs: 1.25rem;
|
|
443
|
+
--spacing-icon-sm: 1.5rem;
|
|
444
|
+
--spacing-icon-md: 1.75rem;
|
|
445
|
+
--spacing-icon-lg: 2rem;
|
|
446
|
+
--spacing-icon-xl: 2.25rem;
|
|
447
|
+
--spacing-icon-2xl: 2.5rem;
|
|
447
448
|
--spacing-header-height: var(--header-height);
|
|
448
449
|
|
|
449
450
|
--radius-container: var(--border-radius-container);
|
|
450
|
-
--radius:
|
|
451
|
+
--radius: var(--border-radius-base);
|
|
451
452
|
|
|
452
453
|
/* Primitive scales */
|
|
453
|
-
--color-primary-50:
|
|
454
|
+
--color-primary-50: var(--color-primary-50);
|
|
454
455
|
--color-primary-100: var(--color-primary-100);
|
|
455
456
|
--color-primary-200: var(--color-primary-200);
|
|
456
457
|
--color-primary-300: var(--color-primary-300);
|
|
@@ -461,7 +462,7 @@ html.dark, .dark * {
|
|
|
461
462
|
--color-primary-800: var(--color-primary-800);
|
|
462
463
|
--color-primary-900: var(--color-primary-900);
|
|
463
464
|
|
|
464
|
-
--color-error-50:
|
|
465
|
+
--color-error-50: var(--color-error-50);
|
|
465
466
|
--color-error-100: var(--color-error-100);
|
|
466
467
|
--color-error-200: var(--color-error-200);
|
|
467
468
|
--color-error-300: var(--color-error-300);
|
|
@@ -472,7 +473,7 @@ html.dark, .dark * {
|
|
|
472
473
|
--color-error-800: var(--color-error-800);
|
|
473
474
|
--color-error-900: var(--color-error-900);
|
|
474
475
|
|
|
475
|
-
--color-success-50:
|
|
476
|
+
--color-success-50: var(--color-success-50);
|
|
476
477
|
--color-success-100: var(--color-success-100);
|
|
477
478
|
--color-success-200: var(--color-success-200);
|
|
478
479
|
--color-success-300: var(--color-success-300);
|
|
@@ -483,21 +484,21 @@ html.dark, .dark * {
|
|
|
483
484
|
--color-success-800: var(--color-success-800);
|
|
484
485
|
--color-success-900: var(--color-success-900);
|
|
485
486
|
|
|
486
|
-
--color-neutral-1:
|
|
487
|
-
--color-neutral-2:
|
|
488
|
-
--color-neutral-3:
|
|
489
|
-
--color-neutral-4:
|
|
490
|
-
--color-neutral-5:
|
|
491
|
-
--color-neutral-6:
|
|
492
|
-
--color-neutral-7:
|
|
493
|
-
--color-neutral-8:
|
|
494
|
-
--color-neutral-9:
|
|
487
|
+
--color-neutral-1: var(--color-neutral-1);
|
|
488
|
+
--color-neutral-2: var(--color-neutral-2);
|
|
489
|
+
--color-neutral-3: var(--color-neutral-3);
|
|
490
|
+
--color-neutral-4: var(--color-neutral-4);
|
|
491
|
+
--color-neutral-5: var(--color-neutral-5);
|
|
492
|
+
--color-neutral-6: var(--color-neutral-6);
|
|
493
|
+
--color-neutral-7: var(--color-neutral-7);
|
|
494
|
+
--color-neutral-8: var(--color-neutral-8);
|
|
495
|
+
--color-neutral-9: var(--color-neutral-9);
|
|
495
496
|
--color-neutral-10: var(--color-neutral-10);
|
|
496
497
|
--color-neutral-11: var(--color-neutral-11);
|
|
497
498
|
--color-neutral-12: var(--color-neutral-12);
|
|
498
499
|
--color-neutral-13: var(--color-neutral-13);
|
|
499
500
|
|
|
500
|
-
--color-warning-50:
|
|
501
|
+
--color-warning-50: var(--color-warning-50);
|
|
501
502
|
--color-warning-100: var(--color-warning-100);
|
|
502
503
|
--color-warning-200: var(--color-warning-200);
|
|
503
504
|
--color-warning-300: var(--color-warning-300);
|
|
@@ -508,7 +509,7 @@ html.dark, .dark * {
|
|
|
508
509
|
--color-warning-800: var(--color-warning-800);
|
|
509
510
|
--color-warning-900: var(--color-warning-900);
|
|
510
511
|
|
|
511
|
-
--color-information-50:
|
|
512
|
+
--color-information-50: var(--color-information-50);
|
|
512
513
|
--color-information-100: var(--color-information-100);
|
|
513
514
|
--color-information-200: var(--color-information-200);
|
|
514
515
|
--color-information-300: var(--color-information-300);
|
|
@@ -519,7 +520,7 @@ html.dark, .dark * {
|
|
|
519
520
|
--color-information-800: var(--color-information-800);
|
|
520
521
|
--color-information-900: var(--color-information-900);
|
|
521
522
|
|
|
522
|
-
--color-secondary-50:
|
|
523
|
+
--color-secondary-50: var(--color-secondary-50);
|
|
523
524
|
--color-secondary-100: var(--color-secondary-100);
|
|
524
525
|
--color-secondary-200: var(--color-secondary-200);
|
|
525
526
|
--color-secondary-300: var(--color-secondary-300);
|
|
@@ -531,134 +532,142 @@ html.dark, .dark * {
|
|
|
531
532
|
--color-secondary-900: var(--color-secondary-900);
|
|
532
533
|
|
|
533
534
|
/* Brand */
|
|
534
|
-
--color-brand-500:
|
|
535
|
+
--color-brand-500: var(--color-brand-500);
|
|
535
536
|
--color-brand-token-5: var(--color-brand-token-5);
|
|
536
537
|
|
|
537
538
|
/* Scale tokens */
|
|
538
|
-
--color-neutral-token-1:
|
|
539
|
-
--color-neutral-token-2:
|
|
540
|
-
--color-neutral-token-3:
|
|
541
|
-
--color-neutral-token-4:
|
|
542
|
-
--color-neutral-token-5:
|
|
543
|
-
--color-neutral-token-6:
|
|
544
|
-
--color-neutral-token-7:
|
|
545
|
-
--color-neutral-token-8:
|
|
546
|
-
--color-neutral-token-9:
|
|
539
|
+
--color-neutral-token-1: var(--color-neutral-token-1);
|
|
540
|
+
--color-neutral-token-2: var(--color-neutral-token-2);
|
|
541
|
+
--color-neutral-token-3: var(--color-neutral-token-3);
|
|
542
|
+
--color-neutral-token-4: var(--color-neutral-token-4);
|
|
543
|
+
--color-neutral-token-5: var(--color-neutral-token-5);
|
|
544
|
+
--color-neutral-token-6: var(--color-neutral-token-6);
|
|
545
|
+
--color-neutral-token-7: var(--color-neutral-token-7);
|
|
546
|
+
--color-neutral-token-8: var(--color-neutral-token-8);
|
|
547
|
+
--color-neutral-token-9: var(--color-neutral-token-9);
|
|
547
548
|
--color-neutral-token-10: var(--color-neutral-token-10);
|
|
548
549
|
--color-neutral-token-11: var(--color-neutral-token-11);
|
|
549
550
|
--color-neutral-token-12: var(--color-neutral-token-12);
|
|
550
551
|
--color-neutral-token-13: var(--color-neutral-token-13);
|
|
551
552
|
|
|
552
|
-
--color-primary-token-1:
|
|
553
|
-
--color-primary-token-2:
|
|
554
|
-
--color-primary-token-3:
|
|
555
|
-
--color-primary-token-4:
|
|
556
|
-
--color-primary-token-5:
|
|
557
|
-
--color-primary-token-6:
|
|
558
|
-
--color-primary-token-7:
|
|
559
|
-
--color-primary-token-8:
|
|
560
|
-
--color-primary-token-9:
|
|
553
|
+
--color-primary-token-1: var(--color-primary-token-1);
|
|
554
|
+
--color-primary-token-2: var(--color-primary-token-2);
|
|
555
|
+
--color-primary-token-3: var(--color-primary-token-3);
|
|
556
|
+
--color-primary-token-4: var(--color-primary-token-4);
|
|
557
|
+
--color-primary-token-5: var(--color-primary-token-5);
|
|
558
|
+
--color-primary-token-6: var(--color-primary-token-6);
|
|
559
|
+
--color-primary-token-7: var(--color-primary-token-7);
|
|
560
|
+
--color-primary-token-8: var(--color-primary-token-8);
|
|
561
|
+
--color-primary-token-9: var(--color-primary-token-9);
|
|
561
562
|
--color-primary-token-10: var(--color-primary-token-10);
|
|
562
563
|
|
|
563
564
|
/* Single-value shorthand tokens */
|
|
564
|
-
--color-primary:
|
|
565
|
-
--color-error:
|
|
566
|
-
--color-success:
|
|
567
|
-
--color-neutral:
|
|
568
|
-
--color-warning:
|
|
565
|
+
--color-primary: var(--color-primary, var(--color-primary-700));
|
|
566
|
+
--color-error: var(--color-error-500);
|
|
567
|
+
--color-success: var(--color-success-500);
|
|
568
|
+
--color-neutral: var(--color-neutral-7);
|
|
569
|
+
--color-warning: var(--color-warning-500);
|
|
569
570
|
--color-information: var(--color-information-500);
|
|
570
|
-
--color-secondary:
|
|
571
|
-
--color-brand:
|
|
571
|
+
--color-secondary: var(--color-secondary-500);
|
|
572
|
+
--color-brand: var(--color-brand-500);
|
|
572
573
|
|
|
573
574
|
/* Semantic surface & text tokens */
|
|
574
|
-
--color-surface:
|
|
575
|
-
--color-surface-raised:
|
|
576
|
-
--color-surface-sunken:
|
|
577
|
-
--color-surface-hover:
|
|
575
|
+
--color-surface: var(--color-surface);
|
|
576
|
+
--color-surface-raised: var(--color-surface-raised);
|
|
577
|
+
--color-surface-sunken: var(--color-surface-sunken);
|
|
578
|
+
--color-surface-hover: var(--color-surface-hover);
|
|
578
579
|
--color-surface-control: var(--color-surface-control);
|
|
579
|
-
--color-border-default:
|
|
580
|
-
--color-border-strong:
|
|
581
|
-
--color-text-primary:
|
|
582
|
-
--color-text-secondary:
|
|
583
|
-
--color-text-tertiary:
|
|
584
|
-
--color-text-disabled:
|
|
585
|
-
|
|
586
|
-
--color-interactive:
|
|
587
|
-
--color-interactive-hover:
|
|
580
|
+
--color-border-default: var(--color-border-default);
|
|
581
|
+
--color-border-strong: var(--color-border-strong);
|
|
582
|
+
--color-text-primary: var(--color-text-primary);
|
|
583
|
+
--color-text-secondary: var(--color-text-secondary);
|
|
584
|
+
--color-text-tertiary: var(--color-text-tertiary);
|
|
585
|
+
--color-text-disabled: var(--color-text-disabled);
|
|
586
|
+
|
|
587
|
+
--color-interactive: var(--color-interactive);
|
|
588
|
+
--color-interactive-hover: var(--color-interactive-hover);
|
|
588
589
|
--color-interactive-active: var(--color-interactive-active);
|
|
589
590
|
--color-interactive-subtle: var(--color-interactive-subtle);
|
|
590
591
|
--color-interactive-border: var(--color-interactive-border);
|
|
591
|
-
--color-interactive-text:
|
|
592
|
-
--color-interactive-on:
|
|
593
|
-
--color-overlay:
|
|
592
|
+
--color-interactive-text: var(--color-interactive-text);
|
|
593
|
+
--color-interactive-on: var(--color-interactive-on);
|
|
594
|
+
--color-overlay: var(--color-overlay);
|
|
594
595
|
|
|
595
596
|
/* Semantic status tokens */
|
|
596
|
-
--color-error-subtle:
|
|
597
|
-
--color-error-muted:
|
|
598
|
-
--color-error-border:
|
|
599
|
-
--color-error-hover:
|
|
597
|
+
--color-error-subtle: var(--color-error-subtle);
|
|
598
|
+
--color-error-muted: var(--color-error-muted);
|
|
599
|
+
--color-error-border: var(--color-error-border);
|
|
600
|
+
--color-error-hover: var(--color-error-hover);
|
|
600
601
|
--color-error-default: var(--color-error-default);
|
|
601
|
-
--color-error-active:
|
|
602
|
-
--color-error-text:
|
|
602
|
+
--color-error-active: var(--color-error-active);
|
|
603
|
+
--color-error-text: var(--color-error-text);
|
|
603
604
|
|
|
604
|
-
--color-warning-subtle:
|
|
605
|
-
--color-warning-muted:
|
|
606
|
-
--color-warning-border:
|
|
607
|
-
--color-warning-hover:
|
|
605
|
+
--color-warning-subtle: var(--color-warning-subtle);
|
|
606
|
+
--color-warning-muted: var(--color-warning-muted);
|
|
607
|
+
--color-warning-border: var(--color-warning-border);
|
|
608
|
+
--color-warning-hover: var(--color-warning-hover);
|
|
608
609
|
--color-warning-default: var(--color-warning-default);
|
|
609
|
-
--color-warning-active:
|
|
610
|
-
--color-warning-text:
|
|
610
|
+
--color-warning-active: var(--color-warning-active);
|
|
611
|
+
--color-warning-text: var(--color-warning-text);
|
|
611
612
|
|
|
612
|
-
--color-success-subtle:
|
|
613
|
-
--color-success-muted:
|
|
614
|
-
--color-success-border:
|
|
615
|
-
--color-success-hover:
|
|
613
|
+
--color-success-subtle: var(--color-success-subtle);
|
|
614
|
+
--color-success-muted: var(--color-success-muted);
|
|
615
|
+
--color-success-border: var(--color-success-border);
|
|
616
|
+
--color-success-hover: var(--color-success-hover);
|
|
616
617
|
--color-success-default: var(--color-success-default);
|
|
617
|
-
--color-success-active:
|
|
618
|
-
--color-success-text:
|
|
618
|
+
--color-success-active: var(--color-success-active);
|
|
619
|
+
--color-success-text: var(--color-success-text);
|
|
619
620
|
|
|
620
|
-
--color-information-subtle:
|
|
621
|
-
--color-information-muted:
|
|
622
|
-
--color-information-border:
|
|
623
|
-
--color-information-hover:
|
|
621
|
+
--color-information-subtle: var(--color-information-subtle);
|
|
622
|
+
--color-information-muted: var(--color-information-muted);
|
|
623
|
+
--color-information-border: var(--color-information-border);
|
|
624
|
+
--color-information-hover: var(--color-information-hover);
|
|
624
625
|
--color-information-default: var(--color-information-default);
|
|
625
|
-
--color-information-active:
|
|
626
|
-
--color-information-text:
|
|
626
|
+
--color-information-active: var(--color-information-active);
|
|
627
|
+
--color-information-text: var(--color-information-text);
|
|
627
628
|
|
|
628
629
|
/* Elevation shadows */
|
|
629
|
-
--shadow-sm:
|
|
630
|
-
--shadow-md:
|
|
631
|
-
--shadow-lg:
|
|
632
|
-
--shadow-glow:
|
|
633
|
-
--shadow-focus:
|
|
634
|
-
--shadow-focus-error:
|
|
630
|
+
--shadow-sm: var(--shadow-sm);
|
|
631
|
+
--shadow-md: var(--shadow-md);
|
|
632
|
+
--shadow-lg: var(--shadow-lg);
|
|
633
|
+
--shadow-glow: var(--shadow-glow);
|
|
634
|
+
--shadow-focus: var(--shadow-focus);
|
|
635
|
+
--shadow-focus-error: var(--shadow-focus-error);
|
|
635
636
|
--shadow-focus-warning: var(--shadow-focus-warning);
|
|
636
637
|
--shadow-focus-success: var(--shadow-focus-success);
|
|
637
638
|
|
|
638
639
|
/* Easing functions */
|
|
639
|
-
--ease-ui:
|
|
640
|
+
--ease-ui: var(--ease-ui);
|
|
640
641
|
--ease-spring: var(--ease-spring);
|
|
641
642
|
|
|
642
643
|
/* Accordion animations */
|
|
643
644
|
--animate-accordion-down: var(--animate-accordion-down);
|
|
644
|
-
--animate-accordion-up:
|
|
645
|
+
--animate-accordion-up: var(--animate-accordion-up);
|
|
645
646
|
}
|
|
646
647
|
|
|
647
648
|
|
|
648
649
|
@keyframes accordion-down {
|
|
649
|
-
from {
|
|
650
|
-
|
|
650
|
+
from {
|
|
651
|
+
height: 0;
|
|
652
|
+
}
|
|
653
|
+
to {
|
|
654
|
+
height: var(--bits-accordion-content-height);
|
|
655
|
+
}
|
|
651
656
|
}
|
|
652
657
|
|
|
653
658
|
@keyframes accordion-up {
|
|
654
|
-
from {
|
|
655
|
-
|
|
659
|
+
from {
|
|
660
|
+
height: var(--bits-accordion-content-height);
|
|
661
|
+
}
|
|
662
|
+
to {
|
|
663
|
+
height: 0;
|
|
664
|
+
}
|
|
656
665
|
}
|
|
657
666
|
|
|
658
667
|
|
|
659
668
|
@media (prefers-reduced-motion: reduce) {
|
|
660
669
|
*, ::before, ::after {
|
|
661
670
|
transition-duration: 1ms !important;
|
|
662
|
-
animation-duration:
|
|
671
|
+
animation-duration: 1ms !important;
|
|
663
672
|
}
|
|
664
673
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tera-system-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.69",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "npm run customPrepublish && npm run generate-index && npm run generate-llms && vite build && npm run package && npm run copy-docs && npm run copy-llms && npm run postpublish",
|