@reliability-design/web 1.4.7 → 1.4.8
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/CHANGELOG.md +37 -2
- package/dist/components/rel-accordion/README.md +2 -1
- package/dist/components/rel-autocomplete/README.md +21 -5
- package/dist/components/rel-avatar/README.md +9 -7
- package/dist/components/rel-badge/README.md +4 -5
- package/dist/components/rel-button/README.md +32 -2
- package/dist/components/rel-card/README.md +3 -3
- package/dist/components/rel-carousel/README.md +2 -0
- package/dist/components/rel-checkbox/README.md +7 -4
- package/dist/components/rel-chip/README.md +13 -7
- package/dist/components/rel-container/README.md +8 -8
- package/dist/components/rel-date-picker/README.md +1 -1
- package/dist/components/rel-divider/README.md +11 -1
- package/dist/components/rel-kbd/README.md +2 -2
- package/dist/components/rel-layout/README.md +34 -0
- package/dist/components/rel-menu/README.md +3 -1
- package/dist/components/rel-menubar/README.md +1 -1
- package/dist/components/rel-otp/README.md +4 -3
- package/dist/components/rel-pagination/README.md +2 -2
- package/dist/components/rel-popover/README.md +5 -5
- package/dist/components/rel-progress/README.md +3 -3
- package/dist/components/rel-radio/README.md +1 -1
- package/dist/components/rel-range-picker/README.md +4 -1
- package/dist/components/rel-segmented-button/README.md +2 -1
- package/dist/components/rel-select/README.md +5 -3
- package/dist/components/rel-sheet/README.md +3 -3
- package/dist/components/rel-skeleton/README.md +5 -4
- package/dist/components/rel-slider/README.md +3 -2
- package/dist/components/rel-snackbar/README.md +13 -7
- package/dist/components/rel-stepper/README.md +11 -7
- package/dist/components/rel-switch/README.md +16 -7
- package/dist/components/rel-tab/README.md +4 -2
- package/dist/components/rel-textfield/README.md +18 -1
- package/dist/components/rel-toast/README.md +14 -6
- package/dist/components/rel-tooltip/README.md +13 -2
- package/dist/components/rel-upload/README.md +2 -2
- package/dist/index.d.mts +709 -237
- package/dist/index.d.ts +709 -237
- package/dist/index.js +10397 -7840
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +7458 -4901
- package/dist/index.mjs.map +1 -1
- package/dist/styles/focus-ring.ts +84 -0
- package/dist/styles/vars.css +75 -60
- package/dist/{vars-JHTUGNRG.css → vars-DXX6QOAG.css} +75 -60
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* AUTO-GENERATED by figma-pipeline/scripts/build-vars.ts — DO NOT EDIT */
|
|
2
|
-
/* Source: figma-pipeline/tokens/{primitives, color tokens}/*.tokens.json
|
|
2
|
+
/* Source: figma-pipeline/tokens/{primitives, dimensions, color tokens, typography tokens}/*.tokens.json */
|
|
3
3
|
/* Contains: color + foundation primitives, semantic color tokens (light/dark). */
|
|
4
4
|
|
|
5
5
|
:root {
|
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
--rel-colors-gray-100: #E5E5E5;
|
|
10
10
|
--rel-colors-gray-200: #C2C2C2;
|
|
11
11
|
--rel-colors-gray-300: #A3A3A3;
|
|
12
|
-
--rel-colors-gray-350: #8C8C8C;
|
|
13
12
|
--rel-colors-gray-400: #7D7D7D;
|
|
14
13
|
--rel-colors-gray-500: #525252;
|
|
15
14
|
--rel-colors-gray-600: #404040;
|
|
@@ -23,7 +22,7 @@
|
|
|
23
22
|
--rel-colors-green-50: #EDF8F4;
|
|
24
23
|
--rel-colors-green-100: #D5F1E7;
|
|
25
24
|
--rel-colors-green-200: #91D9BF;
|
|
26
|
-
--rel-colors-green-300: #
|
|
25
|
+
--rel-colors-green-300: #30B887;
|
|
27
26
|
--rel-colors-green-400: #30B887;
|
|
28
27
|
--rel-colors-green-500: #00A86B;
|
|
29
28
|
--rel-colors-green-600: #008655;
|
|
@@ -366,17 +365,23 @@
|
|
|
366
365
|
--rel-action-md-letter-spacing: var(--rel-fonts-letter-spacing-xs);
|
|
367
366
|
|
|
368
367
|
/* ==================== CARRY-FORWARD (not in Figma export) ==================== */
|
|
369
|
-
/* --- shadows (carry-forward) --- */
|
|
368
|
+
/* --- shadows (carry-forward, DEPRECATED — no Figma origin; repoint to xs–2xl) --- */
|
|
370
369
|
--rel-shadows-shadow-100: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
|
|
371
370
|
--rel-shadows-shadow-200: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15);
|
|
372
371
|
--rel-shadows-shadow-300: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 4px 8px 3px rgba(0,0,0,0.15);
|
|
373
372
|
--rel-shadows-shadow-400: 0px 2px 3px 0px rgba(0,0,0,0.3), 0px 6px 10px 4px rgba(0,0,0,0.15);
|
|
374
373
|
--rel-shadows-shadow-500: 0px 4px 4px 0px rgba(0,0,0,0.3), 0px 8px 12px 6px rgba(0,0,0,0.15);
|
|
375
|
-
/* --- shadows (Figma effect styles shadow/
|
|
374
|
+
/* --- shadows (Figma effect styles shadow/xs … shadow/2xl) --- */
|
|
375
|
+
--rel-shadows-xs: 0 0 1px rgba(11,11,11,0.20), 0 1px 2px rgba(11,11,11,0.10);
|
|
376
376
|
--rel-shadows-sm: 0 2px 4px rgba(11,11,11,0.10);
|
|
377
377
|
--rel-shadows-md: 0 4px 8px rgba(11,11,11,0.10);
|
|
378
|
-
|
|
379
|
-
--rel-
|
|
378
|
+
--rel-shadows-lg: 0 8px 16px rgba(11,11,11,0.10);
|
|
379
|
+
--rel-shadows-xl: 0 0 1px rgba(11,11,11,0.30), 0 16px 24px rgba(11,11,11,0.10);
|
|
380
|
+
--rel-shadows-2xl: 0 0 1px rgba(11,11,11,0.30), 0 24px 40px rgba(11,11,11,0.10);
|
|
381
|
+
/* --- shadow colour (ADDED: no Figma variable; drop-shadow() needs a bare color) --- */
|
|
382
|
+
--rel-shadow-color: rgba(11,11,11,0.10);
|
|
383
|
+
/* --- overlay (DEPRECATED alias — bind --rel-bg-overlay-scrim) --- */
|
|
384
|
+
--rel-overlay-scrim: var(--rel-bg-overlay-scrim);
|
|
380
385
|
|
|
381
386
|
/* ==================== SEMANTIC — LIGHT ==================== */
|
|
382
387
|
/* --- bg --- */
|
|
@@ -407,46 +412,48 @@
|
|
|
407
412
|
--rel-bg-success-light: var(--rel-colors-green-50);
|
|
408
413
|
--rel-bg-success: var(--rel-colors-green-500);
|
|
409
414
|
--rel-bg-success-strong: var(--rel-colors-green-800);
|
|
415
|
+
--rel-bg-overlay-scrim: var(--rel-colors-dark-alpha-8);
|
|
410
416
|
|
|
411
417
|
/* --- text --- */
|
|
412
418
|
--rel-text-static-light: var(--rel-colors-gray-0);
|
|
413
419
|
--rel-text-static-dark: var(--rel-colors-gray-950);
|
|
414
420
|
--rel-text-default: var(--rel-colors-gray-950);
|
|
415
421
|
--rel-text-label: var(--rel-colors-gray-700);
|
|
416
|
-
--rel-text-body: var(--rel-colors-gray-
|
|
422
|
+
--rel-text-body: var(--rel-colors-gray-600);
|
|
417
423
|
--rel-text-caption: var(--rel-colors-gray-500);
|
|
418
|
-
--rel-text-placeholder: var(--rel-colors-gray-
|
|
424
|
+
--rel-text-placeholder: var(--rel-colors-gray-300);
|
|
419
425
|
--rel-text-disabled: var(--rel-colors-gray-200);
|
|
420
426
|
--rel-text-inverse: var(--rel-colors-gray-0);
|
|
421
427
|
--rel-text-danger: var(--rel-colors-red-600);
|
|
422
428
|
--rel-text-warning: var(--rel-colors-yellow-800);
|
|
423
|
-
--rel-text-info: var(--rel-colors-blue-
|
|
424
|
-
--rel-text-success: var(--rel-colors-green-
|
|
429
|
+
--rel-text-info: var(--rel-colors-blue-500);
|
|
430
|
+
--rel-text-success: var(--rel-colors-green-600);
|
|
425
431
|
|
|
426
432
|
/* --- border --- */
|
|
427
433
|
--rel-border-default: var(--rel-colors-gray-100);
|
|
428
434
|
--rel-border-subtle: var(--rel-colors-gray-50);
|
|
429
|
-
--rel-border-accent: var(--rel-colors-gray-
|
|
435
|
+
--rel-border-accent: var(--rel-colors-gray-200);
|
|
430
436
|
--rel-border-strong: var(--rel-colors-gray-950);
|
|
431
437
|
--rel-border-inverse: var(--rel-colors-gray-0);
|
|
432
438
|
--rel-border-brand: var(--rel-colors-brand-500);
|
|
433
439
|
--rel-border-success-subtle: var(--rel-colors-green-100);
|
|
434
|
-
--rel-border-success: var(--rel-colors-green-
|
|
440
|
+
--rel-border-success: var(--rel-colors-green-500);
|
|
435
441
|
--rel-border-success-strong: var(--rel-colors-green-800);
|
|
436
442
|
--rel-border-danger-subtle: var(--rel-colors-red-100);
|
|
437
|
-
--rel-border-danger: var(--rel-colors-red-
|
|
443
|
+
--rel-border-danger: var(--rel-colors-red-500);
|
|
438
444
|
--rel-border-danger-strong: var(--rel-colors-red-800);
|
|
439
445
|
--rel-border-warning-subtle: var(--rel-colors-yellow-100);
|
|
440
|
-
--rel-border-warning: var(--rel-colors-yellow-
|
|
446
|
+
--rel-border-warning: var(--rel-colors-yellow-500);
|
|
441
447
|
--rel-border-warning-strong: var(--rel-colors-yellow-800);
|
|
442
448
|
--rel-border-focus: var(--rel-colors-gray-950);
|
|
449
|
+
--rel-border-focus-static: var(--rel-colors-gray-100);
|
|
443
450
|
--rel-border-focus-subtle: var(--rel-colors-gray-100);
|
|
444
451
|
--rel-border-focus-inner: var(--rel-colors-gray-0);
|
|
445
452
|
|
|
446
453
|
/* --- action --- */
|
|
447
454
|
--rel-action-overlay-hover: var(--rel-colors-dark-alpha-1);
|
|
448
|
-
--rel-action-overlay-
|
|
449
|
-
--rel-action-overlay-
|
|
455
|
+
--rel-action-overlay-hover-strong: var(--rel-colors-dark-alpha-2);
|
|
456
|
+
--rel-action-overlay-pressed: var(--rel-colors-dark-alpha-3);
|
|
450
457
|
--rel-action-overlay-dragged: var(--rel-colors-dark-alpha-6);
|
|
451
458
|
--rel-action-overlay-hover-inverse: var(--rel-colors-light-alpha-4);
|
|
452
459
|
--rel-action-neutral-static-hover: var(--rel-colors-light-alpha-1);
|
|
@@ -454,8 +461,8 @@
|
|
|
454
461
|
--rel-action-neutral-fill-hover: var(--rel-colors-gray-700);
|
|
455
462
|
--rel-action-neutral-fill-dragged: var(--rel-colors-gray-600);
|
|
456
463
|
--rel-action-neutral-subtle: var(--rel-colors-gray-50);
|
|
457
|
-
--rel-action-neutral-subtle-hover: var(--rel-colors-gray-
|
|
458
|
-
--rel-action-neutral-subtle-dragged: var(--rel-colors-gray-
|
|
464
|
+
--rel-action-neutral-subtle-hover: var(--rel-colors-gray-50);
|
|
465
|
+
--rel-action-neutral-subtle-dragged: var(--rel-colors-gray-100);
|
|
459
466
|
--rel-action-neutral-ghost-hover: var(--rel-colors-dark-alpha-1);
|
|
460
467
|
--rel-action-neutral-label-icons-fill-inverse: var(--rel-colors-gray-0);
|
|
461
468
|
--rel-action-neutral-label-icons-subtle: var(--rel-colors-gray-950);
|
|
@@ -465,24 +472,23 @@
|
|
|
465
472
|
--rel-action-neutral-label-icons-link-hover: var(--rel-colors-gray-600);
|
|
466
473
|
--rel-action-neutral-border-subtle-hover: var(--rel-colors-gray-100);
|
|
467
474
|
--rel-action-neutral-border-subtle-dragged: var(--rel-colors-gray-200);
|
|
468
|
-
--rel-action-neutral-border-outline: var(--rel-colors-gray-
|
|
475
|
+
--rel-action-neutral-border-outline: var(--rel-colors-gray-300);
|
|
469
476
|
--rel-action-neutral-border-outline-hover: var(--rel-colors-gray-950);
|
|
470
477
|
--rel-action-brand-fill: var(--rel-colors-brand-500);
|
|
471
478
|
--rel-action-brand-fill-hover: var(--rel-colors-brand-600);
|
|
472
479
|
--rel-action-brand-fill-disabled: var(--rel-colors-gray-200);
|
|
473
480
|
--rel-action-brand-label-icons-primary: var(--rel-colors-gray-950);
|
|
474
|
-
--rel-action-
|
|
475
|
-
--rel-action-danger-fill: var(--rel-colors-red-600);
|
|
476
|
-
--rel-action-danger-fill-
|
|
477
|
-
--rel-action-danger-fill-dragged: var(--rel-colors-red-500);
|
|
481
|
+
--rel-action-danger-fill: var(--rel-colors-red-500);
|
|
482
|
+
--rel-action-danger-fill-hover: var(--rel-colors-red-600);
|
|
483
|
+
--rel-action-danger-fill-dragged: var(--rel-colors-red-400);
|
|
478
484
|
--rel-action-danger-subtle: var(--rel-colors-red-50);
|
|
479
|
-
--rel-action-danger-subtle-hover: var(--rel-colors-red-
|
|
480
|
-
--rel-action-danger-subtle-dragged: var(--rel-colors-red-
|
|
485
|
+
--rel-action-danger-subtle-hover: var(--rel-colors-red-50);
|
|
486
|
+
--rel-action-danger-subtle-dragged: var(--rel-colors-red-100);
|
|
481
487
|
--rel-action-danger-outline-hover: var(--rel-colors-red-50);
|
|
482
488
|
--rel-action-danger-ghost-hover: var(--rel-colors-red-50);
|
|
483
489
|
--rel-action-danger-label-icons-fill: var(--rel-colors-gray-0);
|
|
484
490
|
--rel-action-danger-label-icons-subtle: var(--rel-colors-red-600);
|
|
485
|
-
--rel-action-danger-label-icons-subtle-hover: var(--rel-colors-red-
|
|
491
|
+
--rel-action-danger-label-icons-subtle-hover: var(--rel-colors-red-600);
|
|
486
492
|
--rel-action-danger-label-icons-subtle-dragged: var(--rel-colors-red-700);
|
|
487
493
|
--rel-action-danger-label-icons-outline: var(--rel-colors-red-600);
|
|
488
494
|
--rel-action-danger-label-icons-ghost: var(--rel-colors-red-600);
|
|
@@ -496,34 +502,34 @@
|
|
|
496
502
|
--rel-action-warning-fill-hover: var(--rel-colors-yellow-500);
|
|
497
503
|
--rel-action-warning-fill-dragged: var(--rel-colors-yellow-300);
|
|
498
504
|
--rel-action-warning-subtle: var(--rel-colors-yellow-100);
|
|
499
|
-
--rel-action-warning-subtle-hover: var(--rel-colors-yellow-
|
|
500
|
-
--rel-action-warning-subtle-dragged: var(--rel-colors-yellow-
|
|
505
|
+
--rel-action-warning-subtle-hover: var(--rel-colors-yellow-100);
|
|
506
|
+
--rel-action-warning-subtle-dragged: var(--rel-colors-yellow-200);
|
|
501
507
|
--rel-action-warning-label-icons-fill: var(--rel-colors-gray-950);
|
|
502
508
|
--rel-action-warning-label-icons-subtle: var(--rel-colors-yellow-800);
|
|
503
509
|
--rel-action-warning-label-icons-subtle-hover: var(--rel-colors-yellow-800);
|
|
504
510
|
--rel-action-warning-label-icons-subtle-dragged: var(--rel-colors-yellow-900);
|
|
505
511
|
--rel-action-warning-border-subtle-hover: var(--rel-colors-yellow-300);
|
|
506
512
|
--rel-action-warning-border-subtle-dragged: var(--rel-colors-yellow-300);
|
|
507
|
-
--rel-action-success-fill: var(--rel-colors-green-
|
|
508
|
-
--rel-action-success-fill-hover: var(--rel-colors-green-
|
|
509
|
-
--rel-action-success-fill-dragged: var(--rel-colors-green-
|
|
513
|
+
--rel-action-success-fill: var(--rel-colors-green-500);
|
|
514
|
+
--rel-action-success-fill-hover: var(--rel-colors-green-600);
|
|
515
|
+
--rel-action-success-fill-dragged: var(--rel-colors-green-400);
|
|
510
516
|
--rel-action-success-subtle: var(--rel-colors-green-50);
|
|
511
|
-
--rel-action-success-subtle-hover: var(--rel-colors-green-
|
|
512
|
-
--rel-action-success-subtle-dragged: var(--rel-colors-green-
|
|
517
|
+
--rel-action-success-subtle-hover: var(--rel-colors-green-50);
|
|
518
|
+
--rel-action-success-subtle-dragged: var(--rel-colors-green-100);
|
|
513
519
|
--rel-action-success-outline-hover: var(--rel-colors-green-300);
|
|
514
520
|
--rel-action-success-ghost-hover: var(--rel-colors-green-50);
|
|
515
521
|
--rel-action-success-label-icons-fill: var(--rel-colors-gray-0);
|
|
516
|
-
--rel-action-success-label-icons-subtle: var(--rel-colors-green-
|
|
517
|
-
--rel-action-success-label-icons-subtle-hover: var(--rel-colors-green-
|
|
518
|
-
--rel-action-success-label-icons-subtle-dragged: var(--rel-colors-green-
|
|
522
|
+
--rel-action-success-label-icons-subtle: var(--rel-colors-green-600);
|
|
523
|
+
--rel-action-success-label-icons-subtle-hover: var(--rel-colors-green-600);
|
|
524
|
+
--rel-action-success-label-icons-subtle-dragged: var(--rel-colors-green-700);
|
|
519
525
|
--rel-action-success-border-subtle-hover: var(--rel-colors-green-200);
|
|
520
526
|
--rel-action-success-border-subtle-dragged: var(--rel-colors-green-200);
|
|
521
|
-
--rel-action-info-fill: var(--rel-colors-blue-
|
|
522
|
-
--rel-action-info-fill-hover: var(--rel-colors-blue-
|
|
523
|
-
--rel-action-info-fill-dragged: var(--rel-colors-blue-
|
|
527
|
+
--rel-action-info-fill: var(--rel-colors-blue-500);
|
|
528
|
+
--rel-action-info-fill-hover: var(--rel-colors-blue-600);
|
|
529
|
+
--rel-action-info-fill-dragged: var(--rel-colors-blue-400);
|
|
524
530
|
--rel-action-info-subtle: var(--rel-colors-blue-50);
|
|
525
|
-
--rel-action-info-subtle-hover: var(--rel-colors-blue-
|
|
526
|
-
--rel-action-info-subtle-dragged: var(--rel-colors-blue-
|
|
531
|
+
--rel-action-info-subtle-hover: var(--rel-colors-blue-50);
|
|
532
|
+
--rel-action-info-subtle-dragged: var(--rel-colors-blue-100);
|
|
527
533
|
--rel-action-info-label-icons-fill: var(--rel-colors-gray-0);
|
|
528
534
|
--rel-action-info-label-icons-subtle: var(--rel-colors-blue-700);
|
|
529
535
|
--rel-action-info-label-icons-subtle-hover: var(--rel-colors-blue-700);
|
|
@@ -542,7 +548,7 @@
|
|
|
542
548
|
--rel-shadows-shadow-300: 0px 4px 10px rgba(0,0,0,0.65);
|
|
543
549
|
--rel-shadows-shadow-400: 0px 6px 16px rgba(0,0,0,0.7);
|
|
544
550
|
--rel-shadows-shadow-500: 0px 10px 24px rgba(0,0,0,0.75);
|
|
545
|
-
--rel-overlay-scrim:
|
|
551
|
+
--rel-overlay-scrim: var(--rel-bg-overlay-scrim);
|
|
546
552
|
|
|
547
553
|
/* ==================== SEMANTIC — DARK (overrides) ==================== */
|
|
548
554
|
--rel-bg-static-dark: var(--rel-colors-gray-800);
|
|
@@ -566,12 +572,13 @@
|
|
|
566
572
|
--rel-bg-info-strong: var(--rel-colors-blue-100);
|
|
567
573
|
--rel-bg-success-light: var(--rel-colors-green-900);
|
|
568
574
|
--rel-bg-success-strong: var(--rel-colors-green-100);
|
|
575
|
+
--rel-bg-overlay-scrim: var(--rel-colors-dark-alpha-10);
|
|
569
576
|
--rel-text-default: var(--rel-colors-gray-0);
|
|
570
577
|
--rel-text-label: var(--rel-colors-gray-200);
|
|
571
|
-
--rel-text-body: var(--rel-colors-gray-
|
|
578
|
+
--rel-text-body: var(--rel-colors-gray-200);
|
|
572
579
|
--rel-text-caption: var(--rel-colors-gray-300);
|
|
573
|
-
--rel-text-placeholder: var(--rel-colors-gray-
|
|
574
|
-
--rel-text-disabled: var(--rel-colors-gray-
|
|
580
|
+
--rel-text-placeholder: var(--rel-colors-gray-400);
|
|
581
|
+
--rel-text-disabled: var(--rel-colors-gray-500);
|
|
575
582
|
--rel-text-inverse: var(--rel-colors-gray-950);
|
|
576
583
|
--rel-text-danger: var(--rel-colors-red-300);
|
|
577
584
|
--rel-text-warning: var(--rel-colors-yellow-400);
|
|
@@ -579,7 +586,7 @@
|
|
|
579
586
|
--rel-text-success: var(--rel-colors-green-300);
|
|
580
587
|
--rel-border-default: var(--rel-colors-gray-700);
|
|
581
588
|
--rel-border-subtle: var(--rel-colors-gray-800);
|
|
582
|
-
--rel-border-accent: var(--rel-colors-gray-
|
|
589
|
+
--rel-border-accent: var(--rel-colors-gray-500);
|
|
583
590
|
--rel-border-strong: var(--rel-colors-gray-0);
|
|
584
591
|
--rel-border-inverse: var(--rel-colors-gray-950);
|
|
585
592
|
--rel-border-success-subtle: var(--rel-colors-green-800);
|
|
@@ -595,29 +602,31 @@
|
|
|
595
602
|
--rel-border-focus-subtle: var(--rel-colors-gray-700);
|
|
596
603
|
--rel-border-focus-inner: var(--rel-colors-gray-900);
|
|
597
604
|
--rel-action-overlay-hover: var(--rel-colors-light-alpha-1);
|
|
598
|
-
--rel-action-overlay-
|
|
605
|
+
--rel-action-overlay-hover-strong: var(--rel-colors-light-alpha-2);
|
|
606
|
+
--rel-action-overlay-pressed: var(--rel-colors-light-alpha-3);
|
|
607
|
+
--rel-action-overlay-dragged: var(--rel-colors-light-alpha-6);
|
|
608
|
+
--rel-action-overlay-hover-inverse: var(--rel-colors-dark-alpha-4);
|
|
599
609
|
--rel-action-neutral-fill: var(--rel-colors-gray-0);
|
|
600
610
|
--rel-action-neutral-fill-hover: var(--rel-colors-gray-50);
|
|
601
611
|
--rel-action-neutral-fill-dragged: var(--rel-colors-gray-100);
|
|
602
612
|
--rel-action-neutral-subtle: var(--rel-colors-gray-700);
|
|
603
|
-
--rel-action-neutral-subtle-hover: var(--rel-colors-gray-
|
|
604
|
-
--rel-action-neutral-subtle-dragged: var(--rel-colors-gray-
|
|
613
|
+
--rel-action-neutral-subtle-hover: var(--rel-colors-gray-700);
|
|
614
|
+
--rel-action-neutral-subtle-dragged: var(--rel-colors-gray-600);
|
|
605
615
|
--rel-action-neutral-ghost-hover: var(--rel-colors-light-alpha-1);
|
|
606
616
|
--rel-action-neutral-label-icons-fill-inverse: var(--rel-colors-gray-950);
|
|
607
617
|
--rel-action-neutral-label-icons-subtle: var(--rel-colors-gray-0);
|
|
608
618
|
--rel-action-neutral-label-icons-outline: var(--rel-colors-gray-0);
|
|
609
619
|
--rel-action-neutral-label-icons-ghost: var(--rel-colors-gray-0);
|
|
610
620
|
--rel-action-neutral-label-icons-link: var(--rel-colors-gray-0);
|
|
611
|
-
--rel-action-neutral-label-icons-link-hover: var(--rel-colors-gray-
|
|
621
|
+
--rel-action-neutral-label-icons-link-hover: var(--rel-colors-gray-0);
|
|
612
622
|
--rel-action-neutral-border-subtle-hover: var(--rel-colors-gray-600);
|
|
613
623
|
--rel-action-neutral-border-subtle-dragged: var(--rel-colors-gray-500);
|
|
614
624
|
--rel-action-neutral-border-outline: var(--rel-colors-gray-400);
|
|
615
625
|
--rel-action-neutral-border-outline-hover: var(--rel-colors-gray-0);
|
|
616
626
|
--rel-action-brand-fill-disabled: var(--rel-colors-gray-600);
|
|
617
|
-
--rel-action-brand-label-icons-primary-disabled: var(--rel-colors-gray-0);
|
|
618
627
|
--rel-action-danger-subtle: var(--rel-colors-red-900);
|
|
619
|
-
--rel-action-danger-subtle-hover: var(--rel-colors-red-
|
|
620
|
-
--rel-action-danger-subtle-dragged: var(--rel-colors-red-
|
|
628
|
+
--rel-action-danger-subtle-hover: var(--rel-colors-red-900);
|
|
629
|
+
--rel-action-danger-subtle-dragged: var(--rel-colors-red-800);
|
|
621
630
|
--rel-action-danger-outline-hover: var(--rel-colors-red-900);
|
|
622
631
|
--rel-action-danger-ghost-hover: var(--rel-colors-red-900);
|
|
623
632
|
--rel-action-danger-label-icons-subtle: var(--rel-colors-red-100);
|
|
@@ -634,16 +643,19 @@
|
|
|
634
643
|
--rel-action-warning-fill: var(--rel-colors-yellow-500);
|
|
635
644
|
--rel-action-warning-fill-dragged: var(--rel-colors-yellow-400);
|
|
636
645
|
--rel-action-warning-subtle: var(--rel-colors-yellow-900);
|
|
637
|
-
--rel-action-warning-subtle-hover: var(--rel-colors-yellow-
|
|
638
|
-
--rel-action-warning-subtle-dragged: var(--rel-colors-yellow-
|
|
646
|
+
--rel-action-warning-subtle-hover: var(--rel-colors-yellow-900);
|
|
647
|
+
--rel-action-warning-subtle-dragged: var(--rel-colors-yellow-800);
|
|
639
648
|
--rel-action-warning-label-icons-subtle: var(--rel-colors-yellow-100);
|
|
640
649
|
--rel-action-warning-label-icons-subtle-hover: var(--rel-colors-yellow-100);
|
|
641
650
|
--rel-action-warning-label-icons-subtle-dragged: var(--rel-colors-yellow-50);
|
|
642
651
|
--rel-action-warning-border-subtle-hover: var(--rel-colors-yellow-800);
|
|
643
652
|
--rel-action-warning-border-subtle-dragged: var(--rel-colors-yellow-700);
|
|
653
|
+
--rel-action-success-fill: var(--rel-colors-green-600);
|
|
654
|
+
--rel-action-success-fill-hover: var(--rel-colors-green-700);
|
|
655
|
+
--rel-action-success-fill-dragged: var(--rel-colors-green-500);
|
|
644
656
|
--rel-action-success-subtle: var(--rel-colors-green-900);
|
|
645
|
-
--rel-action-success-subtle-hover: var(--rel-colors-green-
|
|
646
|
-
--rel-action-success-subtle-dragged: var(--rel-colors-green-
|
|
657
|
+
--rel-action-success-subtle-hover: var(--rel-colors-green-900);
|
|
658
|
+
--rel-action-success-subtle-dragged: var(--rel-colors-green-800);
|
|
647
659
|
--rel-action-success-outline-hover: var(--rel-colors-green-700);
|
|
648
660
|
--rel-action-success-ghost-hover: var(--rel-colors-green-900);
|
|
649
661
|
--rel-action-success-label-icons-subtle: var(--rel-colors-green-100);
|
|
@@ -651,9 +663,12 @@
|
|
|
651
663
|
--rel-action-success-label-icons-subtle-dragged: var(--rel-colors-green-50);
|
|
652
664
|
--rel-action-success-border-subtle-hover: var(--rel-colors-green-800);
|
|
653
665
|
--rel-action-success-border-subtle-dragged: var(--rel-colors-green-700);
|
|
666
|
+
--rel-action-info-fill: var(--rel-colors-blue-600);
|
|
667
|
+
--rel-action-info-fill-hover: var(--rel-colors-blue-700);
|
|
668
|
+
--rel-action-info-fill-dragged: var(--rel-colors-blue-500);
|
|
654
669
|
--rel-action-info-subtle: var(--rel-colors-blue-900);
|
|
655
|
-
--rel-action-info-subtle-hover: var(--rel-colors-blue-
|
|
656
|
-
--rel-action-info-subtle-dragged: var(--rel-colors-blue-
|
|
670
|
+
--rel-action-info-subtle-hover: var(--rel-colors-blue-900);
|
|
671
|
+
--rel-action-info-subtle-dragged: var(--rel-colors-blue-800);
|
|
657
672
|
--rel-action-info-label-icons-subtle: var(--rel-colors-blue-100);
|
|
658
673
|
--rel-action-info-label-icons-subtle-hover: var(--rel-colors-blue-100);
|
|
659
674
|
--rel-action-info-label-icons-subtle-dragged: var(--rel-colors-blue-50);
|