tera-system-ui 0.1.68 → 0.1.70
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.
|
@@ -24,6 +24,9 @@ export declare const SCREEN_BREAK_POINTS: {
|
|
|
24
24
|
lg: number;
|
|
25
25
|
xl: number;
|
|
26
26
|
};
|
|
27
|
+
export declare function saveXlSideNavState(state: string | undefined): void;
|
|
28
|
+
export declare function loadXlSideNavState(): string | undefined;
|
|
29
|
+
export declare function restoreSideNavStateForXl(): void;
|
|
27
30
|
export declare const mainLayout: () => HTMLElement | null;
|
|
28
31
|
export declare const getSideNavState: () => string | undefined;
|
|
29
32
|
export declare const setSideNavState: (state: any) => void;
|
|
@@ -11,6 +11,25 @@ export const SCREEN_BREAK_POINTS = {
|
|
|
11
11
|
lg: 1024,
|
|
12
12
|
xl: 1280,
|
|
13
13
|
};
|
|
14
|
+
const SIDE_NAV_XL_STATE_KEY = 'side-nav-xl-state';
|
|
15
|
+
export function saveXlSideNavState(state) {
|
|
16
|
+
if (state === undefined) {
|
|
17
|
+
localStorage.removeItem(SIDE_NAV_XL_STATE_KEY);
|
|
18
|
+
}
|
|
19
|
+
else {
|
|
20
|
+
localStorage.setItem(SIDE_NAV_XL_STATE_KEY, state);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
export function loadXlSideNavState() {
|
|
24
|
+
return localStorage.getItem(SIDE_NAV_XL_STATE_KEY) ?? undefined;
|
|
25
|
+
}
|
|
26
|
+
export function restoreSideNavStateForXl() {
|
|
27
|
+
const screenWidth = getScreenWidth();
|
|
28
|
+
if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
|
|
29
|
+
const saved = loadXlSideNavState();
|
|
30
|
+
setSideNavState(saved);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
14
33
|
export const mainLayout = () => document?.getElementById('side-nav_main-layout');
|
|
15
34
|
export const getSideNavState = () => {
|
|
16
35
|
return mainLayout()?.getAttribute('data-side-nav-state') || undefined;
|
|
@@ -38,6 +57,7 @@ export function toggleSideNavigation() {
|
|
|
38
57
|
}
|
|
39
58
|
else if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
|
|
40
59
|
state = currentSideNavState === undefined ? "compact" : undefined;
|
|
60
|
+
saveXlSideNavState(state);
|
|
41
61
|
}
|
|
42
62
|
setSideNavState(state);
|
|
43
63
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
<script lang="ts">import {
|
|
1
|
+
<script lang="ts">import { onMount } from "svelte";
|
|
2
|
+
import { mainLayout, SCREEN_BREAK_POINTS, setSideNavState, restoreSideNavStateForXl, toggleSideNavigation } from "./SideNavigation";
|
|
2
3
|
import { clickOutside } from "../../actions/clickOutside";
|
|
3
4
|
import { Button } from "../button";
|
|
4
5
|
import { IconCoinConvert, IconHamburger } from "../icons";
|
|
@@ -70,6 +71,9 @@ let selectedIndex = (() => {
|
|
|
70
71
|
return (item.exactHref ?? item.href) === resolvedSideNavHref;
|
|
71
72
|
});
|
|
72
73
|
})();
|
|
74
|
+
onMount(() => {
|
|
75
|
+
restoreSideNavStateForXl();
|
|
76
|
+
});
|
|
73
77
|
</script>
|
|
74
78
|
|
|
75
79
|
<nav class="side-nav_main-side-bar grid grid-rows-[auto_1fr_auto]"
|
|
@@ -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.70",
|
|
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",
|