@cumulus-ui/design-tokens 0.3.3 → 0.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/{index.d.ts → dist/index.d.ts} +153 -108
  2. package/{index.js → dist/index.js} +153 -108
  3. package/{tokens.css → dist/tokens.css} +177 -130
  4. package/package.json +13 -11
package/{tokens.css → dist/tokens.css} RENAMED
@@ -1,7 +1,7 @@
1
1
  /* AUTO-GENERATED from @cloudscape-design/design-tokens — DO NOT EDIT
2
2
  * License: see /NOTICE
3
3
  */
4
- /* 733 tokens, 347 dark overrides */
4
+ /* 778 tokens, 349 dark overrides */
5
5
 
6
6
  :root {
7
7
  --color-charts-red-300: #ea7158;
@@ -441,33 +441,149 @@
441
441
  --space-static-xxxl: 40px;
442
442
  --shadow-card: none;
443
443
  --shadow-container-active: 0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a;
444
+ --color-neutral-500: #8c8c94;
445
+ --color-error-600: #db0000;
446
+ --color-success-600: #00802f;
447
+ --color-info-600: #006ce0;
448
+ --color-neutral-600: #656871;
449
+ --color-neutral-300: #dedee3;
450
+ --color-neutral-900: #131920;
451
+ --color-severity-dark-red: #870303;
452
+ --color-severity-red: #ce3311;
453
+ --color-severity-orange: #f89256;
454
+ --color-severity-yellow: #f2cd54;
455
+ --color-severity-grey: var(--color-neutral-600);
456
+ --color-neutral-100: #f9f9fa;
457
+ --color-neutral-950: #0f141a;
458
+ --color-primary-100: #d1f1ff;
459
+ --color-primary-50: #f0fbff;
460
+ --color-white: #ffffff;
461
+ --color-primary-900: #002b66;
462
+ --color-neutral-250: #ebebf0;
463
+ --color-neutral-750: #232b37;
464
+ --color-neutral-650: #424650;
465
+ --color-neutral-700: #333843;
466
+ --color-neutral-200: #f3f3f7;
467
+ --color-neutral-150: #f6f6f9;
468
+ --color-primary-600: #006ce0;
469
+ --color-primary-700: #004a9e;
470
+ --color-grey-opaque-70: rgba(35, 43, 55, 0.7);
471
+ --color-warning-400: #ffe347;
472
+ --color-error-50: #fff5f5;
473
+ --color-info-50: #f0fbff;
474
+ --color-success-50: #effff1;
475
+ --color-warning-50: #fffef0;
476
+ --color-primary-200: #b8e7ff;
477
+ --color-neutral-400: #b4b4bb;
478
+ --color-border-card-highlighted: var(--color-border-item-selected);
479
+ --color-neutral-350: #c6c6cd;
480
+ --color-border-dropdown-item-default: var(--color-border-divider-default);
481
+ --color-warning-900: #855900;
482
+ --color-grey-transparent: rgba(15, 20, 26, 0.12);
483
+ --color-background-tiles-disabled: var(--color-neutral-250);
484
+ --color-grey-transparent-heavy: rgba(15, 20, 26, 0.12);
485
+ --color-text-column-header: var(--color-neutral-650);
486
+ --color-purple-700: #7300e5;
487
+ --color-text-form-label: var(--color-text-form-default);
488
+ --font-button-letter-spacing: 0.005em;
489
+ --font-wayfinding-link-active-weight: 700;
490
+ --border-divider-section-width: 1px;
491
+ --border-item-width: 2px;
492
+ --border-width-card-highlighted: var(--border-item-width);
493
+ --motion-duration-moderate: 135ms;
494
+ --motion-duration-slow: 180ms;
495
+ --motion-duration-fast: 90ms;
496
+ --motion-easing-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
497
+ --motion-easing-refresh-only-a: cubic-bezier(0, 0, 0, 1);
498
+ --motion-easing-refresh-only-b: cubic-bezier(1, 0, 0.83, 1);
499
+ --motion-easing-refresh-only-c: cubic-bezier(0.84, 0, 0.16, 1);
500
+ --motion-duration-refresh-only-fast: 115ms;
501
+ --motion-duration-refresh-only-medium: 165ms;
502
+ --motion-duration-refresh-only-slow: 250ms;
503
+ --space-s: 12px;
504
+ --space-flashbar-horizontal: var(--space-m);
505
+ --space-xxs: 4px;
506
+ --space-flashbar-vertical: var(--space-scaled-xs);
507
+ --space-calendar-grid-focus-outline-gutter: -5px;
508
+ --space-l: 20px;
509
+ --space-scaled-2x-xxs: var(--space-xxs);
510
+ --space-m: 16px;
511
+ --space-scaled-2x-xxxl: var(--space-xxxl);
512
+ --space-scaled-2x-xl: var(--space-xl);
513
+ --space-scaled-2x-m: var(--space-m);
514
+ --space-xs: 8px;
515
+ --space-table-header-horizontal: 0px;
516
+ --space-xl: 24px;
517
+ --space-xxxl: 40px;
518
+ --space-none: 0px;
519
+ --space-xxxs: 2px;
520
+ --space-xxl: 32px;
521
+ --shadow-dropdown: 0px 4px 20px 1px rgba(0, 7, 22, 0.10);
522
+ --color-error-400: #ff7a7a;
523
+ --color-success-500: #2bb534;
524
+ --color-info-300: #75cfff;
525
+ --color-neutral-450: #a4a4ad;
526
+ --color-black: #000000;
527
+ --color-neutral-800: #1b232d;
528
+ --color-neutral-850: #161d26;
529
+ --color-primary-400: #42b4ff;
530
+ --color-primary-1000: #001129;
531
+ --color-primary-300: #75cfff;
532
+ --color-error-1000: #1f0000;
533
+ --color-info-1000: #001129;
534
+ --color-success-1000: #001401;
535
+ --color-warning-1000: #191100;
536
+ --color-info-400: #42b4ff;
537
+ --color-warning-500: #fbd332;
538
+ --color-purple-400: #bf80ff;
539
+ --color-grey-opaque-25: rgba(255, 255, 255, 0.25);
540
+ --color-grey-opaque-10: rgba(0, 0, 0, 0.1);
541
+ --color-text-notification-yellow: var(--color-neutral-950);
542
+ --color-neutral-50: #fcfcfd;
444
543
  --motion-duration-show-paced: var(--motion-duration-slow);
445
544
  --motion-easing-show-paced: ease-out;
446
545
  --space-alert-horizontal: var(--space-flashbar-horizontal);
447
546
  --space-alert-action-left: var(--space-s);
448
547
  --space-button-focus-outline-gutter: 4px;
449
- --space-xxs: 4px;
450
548
  --space-alert-message-right: var(--space-xxs);
451
549
  --size-icon-medium: 20px;
452
- --space-xs: 8px;
453
550
  --size-icon-big: 32px;
454
551
  --size-icon-normal: 16px;
455
- --space-s: 12px;
456
- --motion-duration-slow: 180ms;
457
552
  --border-link-focus-ring-outline: 0;
458
553
  --border-link-focus-ring-shadow-spread: 2px;
459
- --font-wayfinding-link-active-weight: 700;
460
554
  --font-smoothing-webkit: antialiased;
461
555
  --font-smoothing-moz-osx: grayscale;
462
556
  --letter-spacing-body-s: 0.005em;
557
+ --color-text-tutorial-hotspot-default: var(--color-text-link-default);
558
+ --color-text-tutorial-hotspot-hover: var(--color-text-link-hover);
463
559
  --space-content-header-padding-bottom: var(--space-scaled-m);
464
560
  --space-layout-content-bottom: var(--space-scaled-2x-xxxl);
465
561
  --space-dark-header-overlap-distance: 36px;
562
+ --space-layout-content-horizontal: var(--space-scaled-2x-xl);
563
+ --shadow-panel: 0px 0px 0px 1px #b6bec9;
564
+ --color-background-layout-panel-content: var(--color-background-container-content);
565
+ --color-background-layout-panel-hover: var(--color-neutral-250);
566
+ --color-border-layout: var(--color-neutral-350);
567
+ --color-background-layout-mobile-panel: var(--color-neutral-950);
568
+ --space-button-inline-icon-focus-outline-gutter: 0px;
569
+ --size-vertical-panel-icon-offset: 15px;
570
+ --space-layout-toggle-padding: var(--space-static-s);
571
+ --space-layout-toggle-diameter: 36px;
572
+ --shadow-sticky: 0px 4px 8px 1px rgba(0, 7, 22, 0.10);
573
+ --shadow-panel-toggle: 0px 6px 12px 1px rgba(0, 7, 22, 0.12);
574
+ --shadow-split-bottom: 0px -36px 36px -36px rgba(0, 7, 22, 0.10);
575
+ --color-border-divider-panel-side: var(--color-border-divider-default);
576
+ --color-background-badge-icon: var(--color-error-600);
577
+ --color-gap-global-drawer: var(--color-neutral-250);
578
+ --border-divider-list-width: 1px;
579
+ --motion-duration-transition-quick: var(--motion-duration-fast);
580
+ --motion-easing-transition-quick: linear;
581
+ --border-line-chart-width: 2px;
582
+ --border-line-chart-line-join: round;
583
+ --border-line-chart-dash-array: 3 5;
466
584
  --motion-duration-transition-show-paced: var(--motion-duration-slow);
467
585
  --motion-easing-transition-show-paced: ease-out;
468
586
  --space-grid-gutter: var(--space-l);
469
- --border-divider-section-width: 1px;
470
- --motion-duration-refresh-only-medium: 165ms;
471
587
  --color-text-small: var(--color-neutral-600);
472
588
  --font-display-label-weight: 700;
473
589
  --space-key-value-gap: 0px;
@@ -475,14 +591,6 @@
475
591
  --color-background-inline-code: rgba(0, 0, 0, 0.1);
476
592
  --font-weight-heavy: 700;
477
593
  --space-scaled-none: var(--space-none);
478
- --space-none: 0px;
479
- --space-xxxs: 2px;
480
- --space-m: 16px;
481
- --space-l: 20px;
482
- --space-xl: 24px;
483
- --space-xxl: 32px;
484
- --space-xxxl: 40px;
485
- --font-button-letter-spacing: 0.005em;
486
594
  --motion-duration-rotate-180: var(--motion-duration-moderate);
487
595
  --motion-easing-rotate-180: var(--motion-easing-ease-out-quart);
488
596
  --space-button-horizontal: var(--space-scaled-l);
@@ -490,28 +598,27 @@
490
598
  --color-text-button-inline-icon-hover: var(--color-text-link-hover);
491
599
  --color-text-button-inline-icon-disabled: var(--color-text-interactive-disabled);
492
600
  --space-button-icon-focus-outline-gutter-vertical: 0px;
493
- --space-button-inline-icon-focus-outline-gutter: 0px;
494
601
  --space-button-icon-only-horizontal: 6px;
495
602
  --space-button-modal-dismiss-vertical: var(--space-scaled-xxxs);
496
- --shadow-dropdown: 0px 4px 20px 1px rgba(0, 7, 22, 0.10);
497
603
  --motion-easing-show-quick: ease-out;
498
604
  --color-border-dropdown-group: var(--color-border-dropdown-item-default);
605
+ --color-text-dropdown-group-label: var(--color-text-group-label);
606
+ --color-background-dropdown-item-dimmed: transparent;
607
+ --color-border-dropdown-item-dimmed-hover: var(--color-neutral-500);
608
+ --color-text-dropdown-item-dimmed: var(--color-text-interactive-disabled);
609
+ --border-control-focus-ring-shadow-spread: 1px;
610
+ --color-text-dropdown-item-secondary: var(--color-text-form-secondary);
499
611
  --motion-duration-show-quick: var(--motion-duration-moderate);
500
612
  --size-calendar-grid-width: 238px;
501
613
  --space-calendar-grid-gutter: 6px;
502
614
  --color-text-calendar-month: var(--color-neutral-600);
503
615
  --color-border-calendar-grid: transparent;
504
- --color-text-dropdown-item-secondary: var(--color-text-form-secondary);
505
616
  --color-text-calendar-date-hover: var(--color-text-dropdown-item-default);
506
- --border-item-width: 2px;
507
617
  --color-background-calendar-current-date: var(--color-neutral-200);
508
- --space-calendar-grid-focus-outline-gutter: -5px;
509
618
  --color-border-calendar-grid-selected-focus-ring: var(--color-neutral-100);
510
619
  --space-container-header-bottom: var(--space-scaled-xs);
511
620
  --space-table-header-tools-full-page-bottom: 4px;
512
621
  --size-control: 16px;
513
- --color-background-code-editor-status-bar: var(--color-neutral-200);
514
- --color-border-code-editor-default: var(--color-neutral-300);
515
622
  --border-radius-code-editor: var(--border-radius-input);
516
623
  --color-border-code-editor-ace-active-line-light-theme: var(--color-neutral-300);
517
624
  --color-border-code-editor-ace-active-line-dark-theme: var(--color-neutral-600);
@@ -520,30 +627,27 @@
520
627
  --color-background-code-editor-gutter-active-line-default: var(--color-neutral-600);
521
628
  --color-text-code-editor-gutter-active-line: var(--color-white);
522
629
  --color-background-code-editor-gutter-active-line-error: var(--color-text-status-error);
630
+ --color-border-code-editor-default: var(--color-neutral-300);
631
+ --color-background-code-editor-status-bar: var(--color-neutral-200);
523
632
  --color-transparent: transparent;
524
633
  --color-background-code-editor-pane-item-hover: var(--color-neutral-250);
525
634
  --color-border-code-editor-pane-item-hover: var(--color-border-dropdown-item-hover);
526
635
  --color-text-code-editor-tab-button-error: var(--color-white);
527
636
  --border-active-width: 4px;
528
- --motion-easing-refresh-only-c: cubic-bezier(0.84, 0, 0.16, 1);
529
637
  --color-text-code-editor-status-bar-disabled: var(--color-neutral-500);
530
638
  --space-code-editor-status-focus-outline-gutter: -7px;
531
639
  --border-code-editor-status-divider-width: var(--border-divider-section-width);
532
640
  --color-border-tabs-divider: var(--color-neutral-350);
533
641
  --color-background-code-editor-loading: var(--color-neutral-100);
534
- --shadow-panel: 0px 0px 0px 1px #b6bec9;
535
- --color-text-form-label: var(--color-text-form-default);
536
- --border-divider-list-width: 1px;
537
642
  --border-container-top-width: 0px;
538
643
  --shadow-container: 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12);
539
644
  --shadow-sticky-embedded: 0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.10);
540
645
  --border-container-sticky-width: 0px;
541
646
  --color-border-container-divider: transparent;
542
647
  --space-container-header-top: var(--space-s);
543
- --shadow-sticky: 0px 4px 8px 1px rgba(0, 7, 22, 0.10);
544
648
  --space-container-content-top: var(--space-xxs);
545
- --space-layout-content-horizontal: var(--space-scaled-2x-xl);
546
- --color-border-dropdown-item-default: var(--color-border-divider-default);
649
+ --space-calendar-grid-selected-focus-outline-gutter: var(--space-calendar-grid-focus-outline-gutter);
650
+ --color-background-dropdown-item-selected: var(--color-background-item-selected);
547
651
  --font-panel-header-size: var(--font-size-heading-m);
548
652
  --font-panel-header-line-height: var(--line-height-heading-m);
549
653
  --space-panel-header-vertical: var(--space-scaled-l);
@@ -552,6 +656,7 @@
552
656
  --space-panel-content-top: var(--space-scaled-l);
553
657
  --space-panel-side-right: var(--space-scaled-xl);
554
658
  --space-panel-content-bottom: var(--space-scaled-xxxl);
659
+ --shadow-dropup: var(--shadow-dropdown);
555
660
  --motion-duration-rotate-90: var(--motion-duration-moderate);
556
661
  --motion-easing-rotate-90: var(--motion-easing-ease-out-quart);
557
662
  --color-text-expandable-section-default: var(--color-neutral-950);
@@ -559,25 +664,18 @@
559
664
  --space-expandable-section-icon-offset-top: var(--space-scaled-2x-xxs);
560
665
  --color-text-expandable-section-navigation-icon-default: var(--color-text-interactive-default);
561
666
  --color-text-expandable-section-hover: var(--color-text-accent);
562
- --border-control-focus-ring-shadow-spread: 1px;
563
667
  --border-invalid-width: 8px;
564
668
  --color-border-input-disabled: var(--color-background-input-disabled);
565
669
  --color-border-control-disabled: var(--color-background-control-disabled);
566
670
  --shadow-flash-collapsed: 0px 4px 4px rgba(0, 0, 0, 0.25);
567
671
  --color-background-notification-stack-bar: var(--color-neutral-750);
568
672
  --color-border-notification-stack-bar: var(--color-neutral-750);
569
- --shadow-panel-toggle: 0px 6px 12px 1px rgba(0, 7, 22, 0.12);
570
673
  --color-text-notification-stack-bar: var(--color-white);
571
674
  --color-background-notification-stack-bar-hover: var(--color-neutral-650);
572
675
  --color-background-notification-stack-bar-active: var(--color-neutral-750);
573
- --space-flashbar-vertical: var(--space-scaled-xs);
574
- --space-flashbar-horizontal: var(--space-m);
575
676
  --shadow-flash-sticky: 0px 4px 8px rgba(0, 7, 22, 0.10);
576
677
  --space-flashbar-action-left: var(--space-s);
577
678
  --space-flashbar-dismiss-right: 0px;
578
- --color-text-notification-yellow: var(--color-neutral-950);
579
- --motion-easing-refresh-only-a: cubic-bezier(0, 0, 0, 1);
580
- --space-scaled-2x-xxs: var(--space-xxs);
581
679
  --size-vertical-input: 32px;
582
680
  --font-header-h2-description-size: var(--font-size-body-m);
583
681
  --font-header-h2-description-line-height: var(--line-height-body-m);
@@ -585,35 +683,13 @@
585
683
  --size-icon-large: 48px;
586
684
  --color-text-inverted: var(--color-white);
587
685
  --color-text-icon-subtle: var(--color-neutral-600);
588
- --color-background-badge-icon: var(--color-error-600);
589
686
  --color-text-input-placeholder-disabled: var(--color-text-input-disabled);
590
687
  --border-control-invalid-focus-ring-shadow-spread: 2px;
591
688
  --space-field-icon-offset: 36px;
592
689
  --color-text-control-disabled: var(--color-text-interactive-disabled);
593
- --color-background-layout-panel-content: var(--color-background-container-content);
594
- --color-background-layout-panel-hover: var(--color-neutral-250);
595
- --color-border-layout: var(--color-neutral-350);
596
- --color-background-layout-mobile-panel: var(--color-neutral-950);
597
- --size-vertical-panel-icon-offset: 15px;
598
- --motion-duration-refresh-only-slow: 250ms;
599
- --color-gap-global-drawer: var(--color-neutral-250);
600
- --space-layout-toggle-padding: var(--space-static-s);
601
- --space-layout-toggle-diameter: 36px;
602
- --motion-duration-refresh-only-fast: 115ms;
603
- --shadow-split-bottom: 0px -36px 36px -36px rgba(0, 7, 22, 0.10);
604
- --color-border-divider-panel-side: var(--color-border-divider-default);
605
- --color-text-dropdown-group-label: var(--color-text-group-label);
606
- --color-background-dropdown-item-dimmed: transparent;
607
- --color-border-dropdown-item-dimmed-hover: var(--color-neutral-500);
608
- --color-text-dropdown-item-dimmed: var(--color-text-interactive-disabled);
609
690
  --space-filtering-token-operation-select-focus-outline-gutter: -5px;
610
691
  --font-chart-detail-size: var(--font-size-body-s);
611
- --border-line-chart-width: 2px;
612
- --motion-duration-transition-quick: var(--motion-duration-fast);
613
- --motion-easing-transition-quick: linear;
614
692
  --color-border-control-checked: var(--color-background-control-checked);
615
- --space-calendar-grid-selected-focus-outline-gutter: var(--space-calendar-grid-focus-outline-gutter);
616
- --color-background-dropdown-item-selected: var(--color-background-item-selected);
617
693
  --color-background-direction-button-default: var(--color-neutral-650);
618
694
  --color-text-direction-button-default: var(--color-white);
619
695
  --color-background-direction-button-hover: var(--color-neutral-700);
@@ -623,26 +699,8 @@
623
699
  --color-border-dropdown-item-top: transparent;
624
700
  --color-text-dropdown-footer: var(--color-text-form-secondary);
625
701
  --color-text-dropdown-item-secondary-hover: var(--color-neutral-600);
626
- --space-filtering-token-dismiss-button-focus-outline-gutter: -5px;
627
- --color-text-disabled: var(--color-neutral-400);
628
702
  --color-border-dropdown-item-selected: var(--color-border-item-selected);
629
703
  --border-dropdown-virtual-offset-width: 2px;
630
- --color-border-cell-shaded: var(--color-neutral-300);
631
- --motion-duration-transition-show-quick: var(--motion-duration-fast);
632
- --shadow-sticky-column-last: -4px 0 8px 1px rgba(0, 28, 36, 0.1);
633
- --shadow-sticky-column-first: 4px 0px 8px 1px rgba(0, 7, 22, 0.1);
634
- --color-border-item-placeholder: var(--color-border-item-selected);
635
- --color-text-disabled-inline-edit: var(--color-neutral-650);
636
- --color-border-editable-cell-hover: var(--color-border-dropdown-item-hover);
637
- --color-background-table-header: var(--color-background-container-header);
638
- --color-text-column-header: var(--color-neutral-650);
639
- --border-table-sticky-width: 1px;
640
- --space-table-horizontal: var(--space-container-horizontal);
641
- --color-text-column-sorting-icon: var(--color-text-column-header);
642
- --space-table-header-focus-outline-gutter: 0px;
643
- --color-border-divider-interactive-default: var(--color-neutral-500);
644
- --color-border-divider-active: var(--color-neutral-950);
645
- --color-border-tutorial: var(--color-neutral-300);
646
704
  --color-background-item-card: var(--color-background-card);
647
705
  --shadow-item-card: var(--shadow-card);
648
706
  --border-width-item-card: var(--border-width-card);
@@ -663,7 +721,6 @@
663
721
  --color-text-link-button-normal-hover: var(--color-text-button-normal-hover);
664
722
  --color-text-link-button-normal-active: var(--color-text-button-normal-active);
665
723
  --color-text-link-inverted-hover: var(--color-white);
666
- --motion-duration-fast: 90ms;
667
724
  --motion-duration-extra-slow: 270ms;
668
725
  --color-background-modal-overlay: var(--color-grey-opaque-70);
669
726
  --shadow-modal: var(--shadow-dropdown);
@@ -671,15 +728,15 @@
671
728
  --space-modal-horizontal: var(--space-container-horizontal);
672
729
  --color-text-pagination-page-number-default: var(--color-text-interactive-default);
673
730
  --color-text-pagination-page-number-active-disabled: var(--color-text-interactive-disabled);
731
+ --color-stroke-chart-line: var(--color-neutral-500);
674
732
  --color-shadow-default: var(--color-grey-transparent-heavy);
675
733
  --shadow-popover: var(--shadow-dropdown);
676
- --motion-duration-moderate: 135ms;
734
+ --space-filtering-token-dismiss-button-focus-outline-gutter: -5px;
735
+ --color-text-disabled: var(--color-neutral-400);
677
736
  --space-segmented-control-focus-outline-gutter: 6px;
678
737
  --color-background-segment-wrapper: var(--color-background-container-content);
679
738
  --space-panel-nav-left: 28px;
680
739
  --space-scaled-2x-l: var(--space-l);
681
- --space-scaled-2x-m: var(--space-m);
682
- --space-scaled-2x-xl: var(--space-xl);
683
740
  --color-background-slider-range-error-default: var(--color-text-status-error);
684
741
  --color-background-slider-range-warning-default: var(--color-text-status-warning);
685
742
  --color-background-slider-range-error-active: var(--color-text-status-error);
@@ -695,12 +752,25 @@
695
752
  --border-panel-header-width: 1px;
696
753
  --space-panel-split-top: var(--space-scaled-l);
697
754
  --space-panel-split-bottom: var(--space-scaled-l);
698
- --size-table-selection-horizontal: 40px;
699
755
  --space-table-header-tools-bottom: 0px;
756
+ --space-table-horizontal: var(--space-container-horizontal);
700
757
  --space-table-content-bottom: var(--space-xxs);
701
- --space-table-header-horizontal: 0px;
758
+ --size-table-selection-horizontal: 40px;
759
+ --color-background-table-header: var(--color-background-container-header);
702
760
  --space-table-embedded-header-top: 0px;
703
761
  --space-table-footer-horizontal: var(--space-table-header-horizontal);
762
+ --color-border-cell-shaded: var(--color-neutral-300);
763
+ --motion-duration-transition-show-quick: var(--motion-duration-fast);
764
+ --shadow-sticky-column-last: -4px 0 8px 1px rgba(0, 28, 36, 0.1);
765
+ --shadow-sticky-column-first: 4px 0px 8px 1px rgba(0, 7, 22, 0.1);
766
+ --color-border-item-placeholder: var(--color-border-item-selected);
767
+ --color-text-disabled-inline-edit: var(--color-neutral-650);
768
+ --color-border-editable-cell-hover: var(--color-border-dropdown-item-hover);
769
+ --border-table-sticky-width: 1px;
770
+ --color-text-column-sorting-icon: var(--color-text-column-header);
771
+ --space-table-header-focus-outline-gutter: 0px;
772
+ --color-border-divider-interactive-default: var(--color-neutral-500);
773
+ --color-border-divider-active: var(--color-neutral-950);
704
774
  --color-border-tabs-shadow: var(--color-grey-transparent);
705
775
  --color-border-tabs-underline: var(--color-text-accent);
706
776
  --font-tabs-size: var(--font-size-heading-s);
@@ -709,34 +779,9 @@
709
779
  --font-tabs-disabled-weight: var(--font-wayfinding-link-active-weight);
710
780
  --space-tabs-content-top: var(--space-scaled-s);
711
781
  --color-border-tiles-disabled: var(--color-background-tiles-disabled);
712
- --color-background-tiles-disabled: var(--color-neutral-250);
713
782
  --space-tile-gutter: var(--space-xl);
714
783
  --color-background-toggle-default: var(--color-neutral-650);
715
- --motion-easing-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
716
- --space-scaled-2x-xxxl: var(--space-xxxl);
717
- --color-neutral-600: #656871;
718
- --color-neutral-450: #a4a4ad;
719
- --color-neutral-200: #f3f3f7;
720
- --color-neutral-700: #333843;
721
- --color-neutral-100: #f9f9fa;
722
- --color-neutral-850: #161d26;
723
- --color-neutral-800: #1b232d;
724
- --color-neutral-300: #dedee3;
725
- --color-neutral-950: #0f141a;
726
- --color-neutral-500: #8c8c94;
727
- --color-white: #ffffff;
728
- --color-neutral-250: #ebebf0;
729
- --color-neutral-350: #c6c6cd;
730
- --color-neutral-650: #424650;
731
- --color-neutral-750: #232b37;
732
- --color-neutral-400: #b4b4bb;
733
- --color-error-600: #db0000;
734
- --color-error-400: #ff7a7a;
735
- --border-width-card-highlighted: var(--border-item-width);
736
- --color-border-card-highlighted: var(--color-border-item-selected);
737
- --color-grey-opaque-70: rgba(35, 43, 55, 0.7);
738
- --color-grey-transparent-heavy: rgba(15, 20, 26, 0.12);
739
- --color-grey-transparent: rgba(15, 20, 26, 0.12);
784
+ --color-border-tutorial: var(--color-neutral-300);
740
785
  }
741
786
 
742
787
  :root.awsui-dark-mode {
@@ -1037,55 +1082,57 @@
1037
1082
  --color-dropzone-border-hover: #75cfff;
1038
1083
  --color-tree-view-connector-line: #dedee3;
1039
1084
  --shadow-container-active: 0px 1px 1px 1px #192534, 0px 6px 36px #00040c;
1085
+ --color-severity-dark-red: #d63f38;
1086
+ --color-severity-red: #fe6e73;
1087
+ --color-grey-opaque-70: rgba(15, 20, 26, 0.7);
1088
+ --color-grey-transparent: rgba(15, 20, 26, 1);
1089
+ --color-background-tiles-disabled: var(--color-neutral-800);
1090
+ --color-grey-transparent-heavy: rgba(15, 20, 26, 1);
1091
+ --color-text-column-header: var(--color-neutral-400);
1092
+ --shadow-dropdown: 0px 4px 20px 1px rgba(0, 4, 12, 1);
1093
+ --shadow-panel: 0px 0px 0px 1px #414d5c;
1094
+ --color-background-layout-panel-hover: var(--color-neutral-700);
1095
+ --color-border-layout: var(--color-neutral-650);
1096
+ --shadow-sticky: 0px 4px 8px 1px rgba(0, 7, 22, 0.5);
1097
+ --shadow-panel-toggle: 0px 6px 12px 1px rgba(0, 7, 22, 1);
1098
+ --shadow-split-bottom: 0px -36px 36px -36px rgba(0, 7, 22, 1);
1099
+ --color-background-badge-icon: var(--color-error-400);
1100
+ --color-gap-global-drawer: var(--color-neutral-950);
1040
1101
  --color-text-small: var(--color-neutral-450);
1041
1102
  --color-background-inline-code: rgba(255, 255, 255, 0.1);
1042
- --shadow-dropdown: 0px 4px 20px 1px rgba(0, 4, 12, 1);
1043
1103
  --color-text-calendar-month: var(--color-neutral-450);
1044
1104
  --color-background-calendar-current-date: var(--color-neutral-700);
1045
1105
  --color-border-calendar-grid-selected-focus-ring: var(--color-neutral-850);
1046
- --color-background-code-editor-status-bar: var(--color-neutral-800);
1047
- --color-border-code-editor-default: var(--color-neutral-600);
1048
1106
  --color-background-code-editor-gutter-default: var(--color-neutral-800);
1049
1107
  --color-text-code-editor-gutter-default: var(--color-neutral-300);
1050
1108
  --color-background-code-editor-gutter-active-line-default: var(--color-neutral-500);
1051
1109
  --color-text-code-editor-gutter-active-line: var(--color-neutral-950);
1110
+ --color-border-code-editor-default: var(--color-neutral-600);
1111
+ --color-background-code-editor-status-bar: var(--color-neutral-800);
1052
1112
  --color-background-code-editor-pane-item-hover: var(--color-neutral-700);
1053
1113
  --color-text-code-editor-tab-button-error: var(--color-neutral-950);
1054
1114
  --color-text-code-editor-status-bar-disabled: var(--color-neutral-600);
1055
1115
  --color-border-tabs-divider: var(--color-neutral-650);
1056
1116
  --color-background-code-editor-loading: var(--color-neutral-800);
1057
- --shadow-panel: 0px 0px 0px 1px #414d5c;
1058
1117
  --shadow-container: 0px 1px 8px 2px rgba(0, 7, 22, 0.6);
1059
1118
  --shadow-sticky-embedded: 0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1);
1060
- --shadow-sticky: 0px 4px 8px 1px rgba(0, 7, 22, 0.5);
1061
1119
  --color-text-expandable-section-default: var(--color-neutral-300);
1062
- --shadow-panel-toggle: 0px 6px 12px 1px rgba(0, 7, 22, 1);
1063
1120
  --shadow-flash-sticky: 0px 4px 8px rgba(0, 7, 22, 0.5);
1064
1121
  --color-text-inverted: var(--color-neutral-950);
1065
1122
  --color-text-icon-subtle: var(--color-neutral-400);
1066
- --color-background-badge-icon: var(--color-error-400);
1067
- --color-background-layout-panel-hover: var(--color-neutral-700);
1068
- --color-border-layout: var(--color-neutral-650);
1069
- --color-gap-global-drawer: var(--color-neutral-950);
1070
- --shadow-split-bottom: 0px -36px 36px -36px rgba(0, 7, 22, 1);
1071
1123
  --color-background-direction-button-disabled: var(--color-neutral-750);
1072
1124
  --color-text-dropdown-item-secondary-hover: var(--color-neutral-300);
1125
+ --color-text-link-inverted-hover: var(--color-text-notification-yellow);
1126
+ --color-text-pagination-page-number-default: var(--color-neutral-400);
1073
1127
  --color-text-disabled: var(--color-neutral-600);
1128
+ --color-background-slider-handle-ring: var(--color-neutral-850);
1129
+ --shadow-split-side: -1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1);
1074
1130
  --color-border-cell-shaded: var(--color-neutral-700);
1075
1131
  --shadow-sticky-column-last: 0px 4px 8px 1px rgba(0, 7, 22, 0.5);
1076
1132
  --shadow-sticky-column-first: 0px 4px 8px 1px rgba(0, 7, 22, 0.5);
1077
1133
  --color-text-disabled-inline-edit: var(--color-neutral-400);
1078
- --color-text-column-header: var(--color-neutral-400);
1079
1134
  --color-border-divider-interactive-default: var(--color-neutral-300);
1080
1135
  --color-border-divider-active: var(--color-neutral-100);
1081
- --color-border-tutorial: var(--color-neutral-650);
1082
- --color-text-link-inverted-hover: var(--color-text-notification-yellow);
1083
- --color-text-pagination-page-number-default: var(--color-neutral-400);
1084
- --color-background-slider-handle-ring: var(--color-neutral-850);
1085
- --shadow-split-side: -1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1);
1086
- --color-background-tiles-disabled: var(--color-neutral-800);
1087
1136
  --color-background-toggle-default: var(--color-neutral-500);
1088
- --color-grey-opaque-70: rgba(15, 20, 26, 0.7);
1089
- --color-grey-transparent-heavy: rgba(15, 20, 26, 1);
1090
- --color-grey-transparent: rgba(15, 20, 26, 1);
1137
+ --color-border-tutorial: var(--color-neutral-650);
1091
1138
  }
package/package.json CHANGED
@@ -1,24 +1,24 @@
1
1
  {
2
2
  "name": "@cumulus-ui/design-tokens",
3
- "version": "0.3.3",
3
+ "version": "0.4.4",
4
4
  "description": "CSS custom properties for Cumulus UI — light and dark mode tokens generated from Cloudscape Design System",
5
5
  "type": "module",
6
- "main": "./index.js",
7
- "types": "./index.d.ts",
6
+ "main": "./dist/index.js",
7
+ "types": "./dist/index.d.ts",
8
8
  "exports": {
9
9
  ".": {
10
- "types": "./index.d.ts",
11
- "default": "./index.js"
10
+ "types": "./dist/index.d.ts",
11
+ "default": "./dist/index.js"
12
12
  },
13
- "./tokens.css": "./tokens.css"
13
+ "./tokens.css": "./dist/tokens.css"
14
14
  },
15
15
  "files": [
16
- "index.js",
17
- "index.d.ts",
18
- "tokens.css"
16
+ "dist/"
19
17
  ],
20
18
  "scripts": {
21
- "generate": "tsx scripts/generate.ts"
19
+ "generate": "tsx scripts/generate.ts",
20
+ "test": "vitest run",
21
+ "prepublishOnly": "tsx scripts/generate.ts"
22
22
  },
23
23
  "keywords": [
24
24
  "cloudscape",
@@ -32,9 +32,11 @@
32
32
  "url": "https://github.com/cumulus-ui/design-tokens"
33
33
  },
34
34
  "devDependencies": {
35
+ "@cloudscape-design/components": "^3.0.1270",
35
36
  "@cloudscape-design/design-tokens": "^3.0.78",
36
37
  "@cloudscape-design/global-styles": "^1.0.57",
37
38
  "tsx": "^4.21.0",
38
- "typescript": "~5.9.3"
39
+ "typescript": "~5.9.3",
40
+ "vitest": "^4.1.4"
39
41
  }
40
42
  }