@hirobius/design-system 0.12.0 → 0.13.1
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.
- package/NOTICE.md +9 -0
- package/README.md +80 -26
- package/dist/hirobius-ui.js +5557 -5237
- package/dist/manifest.js +3 -3
- package/dist/static.css +388 -0
- package/dist/styles.css +1 -1
- package/dist/tokens.css +1 -1
- package/dist/tokens.js +2 -2
- package/dist/types/src/app/components/alert.d.ts +1 -0
- package/dist/types/src/app/context/TenantContext.d.ts +1 -1
- package/dist/types/src/app/design-system/generated-token-refs.d.ts +12 -1
- package/dist/types/src/app/design-system/generated-token-values.d.ts +2 -2
- package/dist/types/src/app/hooks/useHdsMotion.d.ts +16 -0
- package/dist/types/src/app/hooks/useReducedMotion.d.ts +1 -0
- package/dist/types/src/index.d.ts +137 -2
- package/dist/variables.css +56 -34
- package/hirobius.tokens.json +200 -65
- package/package.json +52 -15
- package/public/hds-manifest.json +752 -556
- /package/{LICENSE/main.tsx → LICENSE} +0 -0
package/dist/tokens.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* Alert - compact feedback surface with contextual severity.
|
|
3
3
|
* @category Feedback
|
|
4
4
|
* @tier primitive
|
|
5
|
+
* @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34
|
|
5
6
|
*/
|
|
6
7
|
import React from 'react';
|
|
7
8
|
type AlertTone = 'success' | 'danger' | 'warning' | 'info';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
|
-
export type TenantSlug = 'hirobius' | 'concrete-creations' | 'lilac
|
|
2
|
+
export type TenantSlug = 'hirobius' | 'concrete-creations' | 'accent-lilac' | (string & {});
|
|
3
3
|
interface TenantCtx {
|
|
4
4
|
/** Active tenant slug, or null in single-tenant mode. */
|
|
5
5
|
tenantSlug: TenantSlug | null;
|
|
@@ -148,7 +148,7 @@ export declare const tokenRefs: {
|
|
|
148
148
|
readonly "3xl": "var(--primitive-typography-size-3xl)";
|
|
149
149
|
readonly "4xl": "var(--primitive-typography-size-4xl)";
|
|
150
150
|
readonly "5xl": "var(--primitive-typography-size-5xl)";
|
|
151
|
-
readonly "
|
|
151
|
+
readonly "6xl": "var(--primitive-typography-size-6xl)";
|
|
152
152
|
};
|
|
153
153
|
readonly weight: {
|
|
154
154
|
readonly light: "var(--primitive-typography-weight-light)";
|
|
@@ -265,6 +265,11 @@ export declare const tokenRefs: {
|
|
|
265
265
|
readonly inverse: "var(--semantic-color-surface-inverse)";
|
|
266
266
|
readonly accent: "var(--semantic-color-surface-accent)";
|
|
267
267
|
readonly accentSubtle: "var(--semantic-color-surface-accentSubtle)";
|
|
268
|
+
readonly hover: "var(--semantic-color-surface-hover)";
|
|
269
|
+
readonly pressed: "var(--semantic-color-surface-pressed)";
|
|
270
|
+
readonly selected: "var(--semantic-color-surface-selected)";
|
|
271
|
+
readonly muted: "var(--semantic-color-surface-muted)";
|
|
272
|
+
readonly sunken: "var(--semantic-color-surface-sunken)";
|
|
268
273
|
};
|
|
269
274
|
readonly content: {
|
|
270
275
|
readonly primary: "var(--semantic-color-content-primary)";
|
|
@@ -273,13 +278,19 @@ export declare const tokenRefs: {
|
|
|
273
278
|
readonly inverse: "var(--semantic-color-content-inverse)";
|
|
274
279
|
readonly accent: "var(--semantic-color-content-accent)";
|
|
275
280
|
readonly onAccent: "var(--semantic-color-content-onAccent)";
|
|
281
|
+
readonly success: "var(--semantic-color-content-success)";
|
|
282
|
+
readonly warning: "var(--semantic-color-content-warning)";
|
|
283
|
+
readonly danger: "var(--semantic-color-content-danger)";
|
|
276
284
|
};
|
|
277
285
|
readonly border: {
|
|
278
286
|
readonly default: "var(--semantic-color-border-default)";
|
|
287
|
+
readonly interactive: "var(--semantic-color-border-interactive)";
|
|
279
288
|
readonly subdued: "var(--semantic-color-border-subdued)";
|
|
280
289
|
readonly subtle: "var(--semantic-color-border-subtle)";
|
|
281
290
|
readonly strong: "var(--semantic-color-border-strong)";
|
|
282
291
|
readonly accent: "var(--semantic-color-border-accent)";
|
|
292
|
+
readonly success: "var(--semantic-color-border-success)";
|
|
293
|
+
readonly warning: "var(--semantic-color-border-warning)";
|
|
283
294
|
};
|
|
284
295
|
readonly feedback: {
|
|
285
296
|
readonly error: "var(--semantic-color-feedback-error)";
|
|
@@ -148,8 +148,8 @@ export declare const tokenValues: {
|
|
|
148
148
|
readonly "2xl": "30px";
|
|
149
149
|
readonly "3xl": "36px";
|
|
150
150
|
readonly "4xl": "48px";
|
|
151
|
-
readonly "5xl": "
|
|
152
|
-
readonly "
|
|
151
|
+
readonly "5xl": "72px";
|
|
152
|
+
readonly "6xl": "80px";
|
|
153
153
|
};
|
|
154
154
|
readonly weight: {
|
|
155
155
|
readonly light: "300";
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/** @internal — reactive `hds.motion.*` accessor; not part of the public API. */
|
|
2
|
+
/**
|
|
3
|
+
* useHdsMotion — the reactive read path for `hds.motion.*` (#190).
|
|
4
|
+
*
|
|
5
|
+
* `hds.motion.*` (src/app/design-system/tokens.ts) resolves duration as a
|
|
6
|
+
* static JS number computed once at module load, so a component that spreads
|
|
7
|
+
* it straight into a motion/react `transition` never collapses under
|
|
8
|
+
* `prefers-reduced-motion: reduce` — only the CSS custom-property path
|
|
9
|
+
* (Layer 1, theme.css) reacts automatically. Call this hook instead of
|
|
10
|
+
* reading `hds.motion.<category>` directly: it zeroes `duration` while
|
|
11
|
+
* useReducedMotion() is true, one fix point instead of a `MotionConfig`
|
|
12
|
+
* wrapper per component.
|
|
13
|
+
*/
|
|
14
|
+
import hds from '../design-system/tokens';
|
|
15
|
+
export type HdsMotionCategory = keyof typeof hds.motion;
|
|
16
|
+
export declare function useHdsMotion<Category extends HdsMotionCategory>(category: Category): (typeof hds.motion)[Category];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useReducedMotion(): boolean;
|
|
@@ -652,13 +652,13 @@ export declare const tokens: {
|
|
|
652
652
|
value: number;
|
|
653
653
|
unit: string;
|
|
654
654
|
};
|
|
655
|
+
$description: string;
|
|
655
656
|
};
|
|
656
|
-
"
|
|
657
|
+
"6xl": {
|
|
657
658
|
$value: {
|
|
658
659
|
value: number;
|
|
659
660
|
unit: string;
|
|
660
661
|
};
|
|
661
|
-
$description: string;
|
|
662
662
|
};
|
|
663
663
|
};
|
|
664
664
|
weight: {
|
|
@@ -1158,6 +1158,66 @@ export declare const tokens: {
|
|
|
1158
1158
|
};
|
|
1159
1159
|
};
|
|
1160
1160
|
};
|
|
1161
|
+
hover: {
|
|
1162
|
+
$value: string;
|
|
1163
|
+
$description: string;
|
|
1164
|
+
$extensions: {
|
|
1165
|
+
"com.figma.variables": {
|
|
1166
|
+
modes: {
|
|
1167
|
+
Light: string;
|
|
1168
|
+
Dark: string;
|
|
1169
|
+
};
|
|
1170
|
+
};
|
|
1171
|
+
};
|
|
1172
|
+
};
|
|
1173
|
+
pressed: {
|
|
1174
|
+
$value: string;
|
|
1175
|
+
$description: string;
|
|
1176
|
+
$extensions: {
|
|
1177
|
+
"com.figma.variables": {
|
|
1178
|
+
modes: {
|
|
1179
|
+
Light: string;
|
|
1180
|
+
Dark: string;
|
|
1181
|
+
};
|
|
1182
|
+
};
|
|
1183
|
+
};
|
|
1184
|
+
};
|
|
1185
|
+
selected: {
|
|
1186
|
+
$value: string;
|
|
1187
|
+
$description: string;
|
|
1188
|
+
$extensions: {
|
|
1189
|
+
"com.figma.variables": {
|
|
1190
|
+
modes: {
|
|
1191
|
+
Light: string;
|
|
1192
|
+
Dark: string;
|
|
1193
|
+
};
|
|
1194
|
+
};
|
|
1195
|
+
};
|
|
1196
|
+
};
|
|
1197
|
+
muted: {
|
|
1198
|
+
$value: string;
|
|
1199
|
+
$description: string;
|
|
1200
|
+
$extensions: {
|
|
1201
|
+
"com.figma.variables": {
|
|
1202
|
+
modes: {
|
|
1203
|
+
Light: string;
|
|
1204
|
+
Dark: string;
|
|
1205
|
+
};
|
|
1206
|
+
};
|
|
1207
|
+
};
|
|
1208
|
+
};
|
|
1209
|
+
sunken: {
|
|
1210
|
+
$value: string;
|
|
1211
|
+
$description: string;
|
|
1212
|
+
$extensions: {
|
|
1213
|
+
"com.figma.variables": {
|
|
1214
|
+
modes: {
|
|
1215
|
+
Light: string;
|
|
1216
|
+
Dark: string;
|
|
1217
|
+
};
|
|
1218
|
+
};
|
|
1219
|
+
};
|
|
1220
|
+
};
|
|
1161
1221
|
};
|
|
1162
1222
|
content: {
|
|
1163
1223
|
primary: {
|
|
@@ -1206,6 +1266,7 @@ export declare const tokens: {
|
|
|
1206
1266
|
};
|
|
1207
1267
|
accent: {
|
|
1208
1268
|
$value: string;
|
|
1269
|
+
$description: string;
|
|
1209
1270
|
$extensions: {
|
|
1210
1271
|
"com.figma.variables": {
|
|
1211
1272
|
modes: {
|
|
@@ -1217,6 +1278,43 @@ export declare const tokens: {
|
|
|
1217
1278
|
};
|
|
1218
1279
|
onAccent: {
|
|
1219
1280
|
$value: string;
|
|
1281
|
+
$description: string;
|
|
1282
|
+
$extensions: {
|
|
1283
|
+
"com.figma.variables": {
|
|
1284
|
+
modes: {
|
|
1285
|
+
Light: string;
|
|
1286
|
+
Dark: string;
|
|
1287
|
+
};
|
|
1288
|
+
};
|
|
1289
|
+
};
|
|
1290
|
+
};
|
|
1291
|
+
success: {
|
|
1292
|
+
$value: string;
|
|
1293
|
+
$description: string;
|
|
1294
|
+
$extensions: {
|
|
1295
|
+
"com.figma.variables": {
|
|
1296
|
+
modes: {
|
|
1297
|
+
Light: string;
|
|
1298
|
+
Dark: string;
|
|
1299
|
+
};
|
|
1300
|
+
};
|
|
1301
|
+
};
|
|
1302
|
+
};
|
|
1303
|
+
warning: {
|
|
1304
|
+
$value: string;
|
|
1305
|
+
$description: string;
|
|
1306
|
+
$extensions: {
|
|
1307
|
+
"com.figma.variables": {
|
|
1308
|
+
modes: {
|
|
1309
|
+
Light: string;
|
|
1310
|
+
Dark: string;
|
|
1311
|
+
};
|
|
1312
|
+
};
|
|
1313
|
+
};
|
|
1314
|
+
};
|
|
1315
|
+
danger: {
|
|
1316
|
+
$value: string;
|
|
1317
|
+
$description: string;
|
|
1220
1318
|
$extensions: {
|
|
1221
1319
|
"com.figma.variables": {
|
|
1222
1320
|
modes: {
|
|
@@ -1239,6 +1337,18 @@ export declare const tokens: {
|
|
|
1239
1337
|
};
|
|
1240
1338
|
};
|
|
1241
1339
|
};
|
|
1340
|
+
interactive: {
|
|
1341
|
+
$value: string;
|
|
1342
|
+
$description: string;
|
|
1343
|
+
$extensions: {
|
|
1344
|
+
"com.figma.variables": {
|
|
1345
|
+
modes: {
|
|
1346
|
+
Light: string;
|
|
1347
|
+
Dark: string;
|
|
1348
|
+
};
|
|
1349
|
+
};
|
|
1350
|
+
};
|
|
1351
|
+
};
|
|
1242
1352
|
subdued: {
|
|
1243
1353
|
$value: string;
|
|
1244
1354
|
$extensions: {
|
|
@@ -1275,6 +1385,31 @@ export declare const tokens: {
|
|
|
1275
1385
|
};
|
|
1276
1386
|
accent: {
|
|
1277
1387
|
$value: string;
|
|
1388
|
+
$description: string;
|
|
1389
|
+
$extensions: {
|
|
1390
|
+
"com.figma.variables": {
|
|
1391
|
+
modes: {
|
|
1392
|
+
Light: string;
|
|
1393
|
+
Dark: string;
|
|
1394
|
+
};
|
|
1395
|
+
};
|
|
1396
|
+
};
|
|
1397
|
+
};
|
|
1398
|
+
success: {
|
|
1399
|
+
$value: string;
|
|
1400
|
+
$description: string;
|
|
1401
|
+
$extensions: {
|
|
1402
|
+
"com.figma.variables": {
|
|
1403
|
+
modes: {
|
|
1404
|
+
Light: string;
|
|
1405
|
+
Dark: string;
|
|
1406
|
+
};
|
|
1407
|
+
};
|
|
1408
|
+
};
|
|
1409
|
+
};
|
|
1410
|
+
warning: {
|
|
1411
|
+
$value: string;
|
|
1412
|
+
$description: string;
|
|
1278
1413
|
$extensions: {
|
|
1279
1414
|
"com.figma.variables": {
|
|
1280
1415
|
modes: {
|
package/dist/variables.css
CHANGED
|
@@ -117,8 +117,8 @@
|
|
|
117
117
|
--primitive-typography-size-2xl: 30px;
|
|
118
118
|
--primitive-typography-size-3xl: 36px;
|
|
119
119
|
--primitive-typography-size-4xl: 48px;
|
|
120
|
-
--primitive-typography-size-5xl:
|
|
121
|
-
--primitive-typography-size-
|
|
120
|
+
--primitive-typography-size-5xl: 72px;
|
|
121
|
+
--primitive-typography-size-6xl: 80px;
|
|
122
122
|
--primitive-typography-weight-light: 300;
|
|
123
123
|
--primitive-typography-weight-regular: 400;
|
|
124
124
|
--primitive-typography-weight-medium: 500;
|
|
@@ -195,19 +195,30 @@
|
|
|
195
195
|
--semantic-color-surface-raised: var(--primitive-color-neutral-50);
|
|
196
196
|
--semantic-color-surface-overlay: var(--primitive-color-neutral-100);
|
|
197
197
|
--semantic-color-surface-inverse: var(--primitive-color-neutral-black);
|
|
198
|
-
--semantic-color-surface-accent: var(--primitive-color-
|
|
199
|
-
--semantic-color-surface-accentSubtle: var(--primitive-color-
|
|
198
|
+
--semantic-color-surface-accent: var(--primitive-color-neutral-900);
|
|
199
|
+
--semantic-color-surface-accentSubtle: var(--primitive-color-neutral-100);
|
|
200
|
+
--semantic-color-surface-hover: var(--primitive-color-neutral-100);
|
|
201
|
+
--semantic-color-surface-pressed: var(--primitive-color-neutral-50);
|
|
202
|
+
--semantic-color-surface-selected: var(--primitive-color-neutral-200);
|
|
203
|
+
--semantic-color-surface-muted: var(--primitive-color-neutral-100);
|
|
204
|
+
--semantic-color-surface-sunken: var(--primitive-color-neutral-200);
|
|
200
205
|
--semantic-color-content-primary: var(--primitive-color-neutral-900);
|
|
201
206
|
--semantic-color-content-secondary: var(--primitive-color-neutral-600);
|
|
202
207
|
--semantic-color-content-disabled: var(--primitive-color-neutral-300);
|
|
203
208
|
--semantic-color-content-inverse: var(--primitive-color-neutral-100);
|
|
204
|
-
--semantic-color-content-accent: var(--primitive-color-
|
|
209
|
+
--semantic-color-content-accent: var(--primitive-color-neutral-900);
|
|
205
210
|
--semantic-color-content-onAccent: var(--primitive-color-neutral-white);
|
|
211
|
+
--semantic-color-content-success: var(--primitive-color-green-700);
|
|
212
|
+
--semantic-color-content-warning: var(--primitive-color-amber-800);
|
|
213
|
+
--semantic-color-content-danger: var(--primitive-color-red-700);
|
|
206
214
|
--semantic-color-border-default: var(--primitive-color-neutral-200);
|
|
215
|
+
--semantic-color-border-interactive: var(--primitive-color-neutral-500);
|
|
207
216
|
--semantic-color-border-subdued: var(--primitive-color-neutral-200);
|
|
208
217
|
--semantic-color-border-subtle: var(--primitive-color-neutral-100);
|
|
209
218
|
--semantic-color-border-strong: var(--primitive-color-neutral-300);
|
|
210
|
-
--semantic-color-border-accent: var(--primitive-color-
|
|
219
|
+
--semantic-color-border-accent: var(--primitive-color-neutral-900);
|
|
220
|
+
--semantic-color-border-success: var(--primitive-color-green-400);
|
|
221
|
+
--semantic-color-border-warning: var(--primitive-color-amber-400);
|
|
211
222
|
--semantic-color-feedback-error: var(--primitive-color-red-700);
|
|
212
223
|
--semantic-color-feedback-success: var(--primitive-color-green-700);
|
|
213
224
|
--semantic-color-feedback-warning: var(--primitive-color-amber-800);
|
|
@@ -248,7 +259,7 @@
|
|
|
248
259
|
--semantic-layout-grid-columns-desktop: var(--primitive-grid-columns-3);
|
|
249
260
|
/* semantic.typography.display */
|
|
250
261
|
--semantic-typography-display-font-family: var(--primitive-typography-family-display);
|
|
251
|
-
--semantic-typography-display-font-size: var(--primitive-typography-size-
|
|
262
|
+
--semantic-typography-display-font-size: var(--primitive-typography-size-5xl);
|
|
252
263
|
--semantic-typography-display-font-weight: var(--primitive-typography-weight-bold);
|
|
253
264
|
--semantic-typography-display-letter-spacing: var(--primitive-typography-letterSpacing-tight);
|
|
254
265
|
--semantic-typography-display-line-height: var(--primitive-typography-lineHeight-none);
|
|
@@ -308,15 +319,15 @@
|
|
|
308
319
|
--semantic-docs-space-section: var(--primitive-space-12);
|
|
309
320
|
--semantic-docs-space-paragraph: var(--primitive-space-6);
|
|
310
321
|
--semantic-docs-space-inline: var(--primitive-space-2);
|
|
311
|
-
--semantic-accent-rest: var(--primitive-color-
|
|
312
|
-
--semantic-accent-hover: var(--primitive-color-
|
|
313
|
-
--semantic-accent-pressed: var(--primitive-color-
|
|
314
|
-
--semantic-accent-inactive: var(--primitive-color-
|
|
315
|
-
--semantic-accent-disabled: var(--primitive-color-
|
|
316
|
-
--semantic-accent-content: var(--primitive-color-
|
|
317
|
-
--semantic-accent-contentHover: var(--primitive-color-
|
|
318
|
-
--semantic-accent-subtle: var(--primitive-color-
|
|
319
|
-
--semantic-radius-action: var(--primitive-radius-
|
|
322
|
+
--semantic-accent-rest: var(--primitive-color-neutral-900);
|
|
323
|
+
--semantic-accent-hover: var(--primitive-color-neutral-800);
|
|
324
|
+
--semantic-accent-pressed: var(--primitive-color-neutral-950);
|
|
325
|
+
--semantic-accent-inactive: var(--primitive-color-neutral-400);
|
|
326
|
+
--semantic-accent-disabled: var(--primitive-color-neutral-300);
|
|
327
|
+
--semantic-accent-content: var(--primitive-color-neutral-900);
|
|
328
|
+
--semantic-accent-contentHover: var(--primitive-color-neutral-700);
|
|
329
|
+
--semantic-accent-subtle: var(--primitive-color-neutral-100);
|
|
330
|
+
--semantic-radius-action: var(--primitive-radius-8);
|
|
320
331
|
--semantic-borderWidth-default: var(--primitive-borderWidth-xs);
|
|
321
332
|
--semantic-borderWidth-emphasis: var(--primitive-borderWidth-sm);
|
|
322
333
|
--semantic-shadow-subtle: 0 1px 2px hsl(var(--primitive-shadow-color) / 0.04), 0 1px 1px hsl(var(--primitive-shadow-color) / 0.06);
|
|
@@ -401,14 +412,14 @@
|
|
|
401
412
|
--component-button-secondary-bg-rest: var(--semantic-color-surface-page);
|
|
402
413
|
--component-button-secondary-bg-hover: var(--semantic-color-surface-raised);
|
|
403
414
|
--component-button-secondary-bg-pressed: var(--semantic-color-surface-overlay);
|
|
404
|
-
--component-button-secondary-border-rest: var(--semantic-color-border-
|
|
405
|
-
--component-button-secondary-border-hover: var(--semantic-color-border-
|
|
406
|
-
--component-button-secondary-border-pressed: var(--semantic-color-border-
|
|
415
|
+
--component-button-secondary-border-rest: var(--semantic-color-border-interactive);
|
|
416
|
+
--component-button-secondary-border-hover: var(--semantic-color-border-interactive);
|
|
417
|
+
--component-button-secondary-border-pressed: var(--semantic-color-border-interactive);
|
|
407
418
|
--component-button-secondary-border-disabled: var(--semantic-color-border-subdued);
|
|
408
419
|
--component-button-secondary-text: var(--semantic-color-content-primary);
|
|
409
420
|
--component-input-bg: var(--semantic-color-surface-raised);
|
|
410
421
|
--component-input-text: var(--semantic-color-content-primary);
|
|
411
|
-
--component-input-border: var(--semantic-color-border-
|
|
422
|
+
--component-input-border: var(--semantic-color-border-interactive);
|
|
412
423
|
--component-input-borderError: var(--semantic-color-feedback-error);
|
|
413
424
|
--component-input-radius: var(--semantic-radius-action);
|
|
414
425
|
--component-input-paddingX: var(--primitive-space-4);
|
|
@@ -438,7 +449,7 @@
|
|
|
438
449
|
--role-destructive: var(--semantic-color-feedback-error);
|
|
439
450
|
--role-destructive-foreground: var(--semantic-color-content-inverse);
|
|
440
451
|
--role-border: var(--semantic-color-border-default);
|
|
441
|
-
--role-input: var(--semantic-color-border-
|
|
452
|
+
--role-input: var(--semantic-color-border-interactive);
|
|
442
453
|
--role-ring: var(--semantic-color-border-accent);
|
|
443
454
|
--role-radius: var(--semantic-radius-action);
|
|
444
455
|
}
|
|
@@ -450,19 +461,30 @@
|
|
|
450
461
|
--semantic-color-surface-raised: var(--primitive-color-neutral-950);
|
|
451
462
|
--semantic-color-surface-overlay: var(--primitive-color-neutral-850);
|
|
452
463
|
--semantic-color-surface-inverse: var(--primitive-color-neutral-white);
|
|
453
|
-
--semantic-color-surface-accent: var(--primitive-color-
|
|
454
|
-
--semantic-color-surface-accentSubtle: var(--primitive-color-
|
|
464
|
+
--semantic-color-surface-accent: var(--primitive-color-neutral-100);
|
|
465
|
+
--semantic-color-surface-accentSubtle: var(--primitive-color-neutral-900);
|
|
466
|
+
--semantic-color-surface-hover: var(--primitive-color-neutral-900);
|
|
467
|
+
--semantic-color-surface-pressed: var(--primitive-color-neutral-950);
|
|
468
|
+
--semantic-color-surface-selected: var(--primitive-color-neutral-800);
|
|
469
|
+
--semantic-color-surface-muted: var(--primitive-color-neutral-900);
|
|
470
|
+
--semantic-color-surface-sunken: var(--primitive-color-neutral-850);
|
|
455
471
|
--semantic-color-content-primary: var(--primitive-color-neutral-100);
|
|
456
472
|
--semantic-color-content-secondary: var(--primitive-color-neutral-400);
|
|
457
473
|
--semantic-color-content-disabled: var(--primitive-color-neutral-600);
|
|
458
474
|
--semantic-color-content-inverse: var(--primitive-color-neutral-900);
|
|
459
|
-
--semantic-color-content-accent: var(--primitive-color-
|
|
460
|
-
--semantic-color-content-onAccent: var(--primitive-color-neutral-
|
|
475
|
+
--semantic-color-content-accent: var(--primitive-color-neutral-100);
|
|
476
|
+
--semantic-color-content-onAccent: var(--primitive-color-neutral-900);
|
|
477
|
+
--semantic-color-content-success: var(--primitive-color-green-400);
|
|
478
|
+
--semantic-color-content-warning: var(--primitive-color-amber-400);
|
|
479
|
+
--semantic-color-content-danger: var(--primitive-color-red-400);
|
|
461
480
|
--semantic-color-border-default: var(--primitive-color-neutral-700);
|
|
481
|
+
--semantic-color-border-interactive: var(--primitive-color-neutral-500);
|
|
462
482
|
--semantic-color-border-subdued: var(--primitive-color-neutral-800);
|
|
463
483
|
--semantic-color-border-subtle: var(--primitive-color-neutral-850);
|
|
464
484
|
--semantic-color-border-strong: var(--primitive-color-neutral-600);
|
|
465
|
-
--semantic-color-border-accent: var(--primitive-color-
|
|
485
|
+
--semantic-color-border-accent: var(--primitive-color-neutral-100);
|
|
486
|
+
--semantic-color-border-success: var(--primitive-color-green-400);
|
|
487
|
+
--semantic-color-border-warning: var(--primitive-color-amber-400);
|
|
466
488
|
--semantic-color-feedback-error: var(--primitive-color-red-400);
|
|
467
489
|
--semantic-color-feedback-success: var(--primitive-color-green-400);
|
|
468
490
|
--semantic-color-feedback-warning: var(--primitive-color-amber-400);
|
|
@@ -473,14 +495,14 @@
|
|
|
473
495
|
--semantic-color-feedback-bg-warning: var(--primitive-color-amber-950);
|
|
474
496
|
--semantic-color-feedback-bg-info: var(--primitive-color-blue-900);
|
|
475
497
|
--semantic-color-feedback-bg-inProgress: var(--primitive-color-violet-950);
|
|
476
|
-
--semantic-accent-rest: var(--primitive-color-
|
|
477
|
-
--semantic-accent-hover: var(--primitive-color-
|
|
478
|
-
--semantic-accent-pressed: var(--primitive-color-
|
|
479
|
-
--semantic-accent-inactive: var(--primitive-color-
|
|
480
|
-
--semantic-accent-disabled: var(--primitive-color-
|
|
481
|
-
--semantic-accent-content: var(--primitive-color-
|
|
482
|
-
--semantic-accent-contentHover: var(--primitive-color-
|
|
483
|
-
--semantic-accent-subtle: var(--primitive-color-
|
|
498
|
+
--semantic-accent-rest: var(--primitive-color-neutral-100);
|
|
499
|
+
--semantic-accent-hover: var(--primitive-color-neutral-200);
|
|
500
|
+
--semantic-accent-pressed: var(--primitive-color-neutral-300);
|
|
501
|
+
--semantic-accent-inactive: var(--primitive-color-neutral-600);
|
|
502
|
+
--semantic-accent-disabled: var(--primitive-color-neutral-700);
|
|
503
|
+
--semantic-accent-content: var(--primitive-color-neutral-100);
|
|
504
|
+
--semantic-accent-contentHover: var(--primitive-color-neutral-300);
|
|
505
|
+
--semantic-accent-subtle: var(--primitive-color-neutral-800);
|
|
484
506
|
--component-badge-bg: var(--semantic-color-feedback-bg-info);
|
|
485
507
|
--component-button-primary-textDisabled: var(--semantic-color-content-disabled);
|
|
486
508
|
}
|