@cumulus-ui/design-tokens 0.4.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.
package/dist/index.d.ts CHANGED
@@ -550,9 +550,28 @@ export declare const borderLinkFocusRingShadowSpread: string;
550
550
  export declare const fontSmoothingWebkit: string;
551
551
  export declare const fontSmoothingMozOsx: string;
552
552
  export declare const letterSpacingBodyS: string;
553
+ export declare const colorTextTutorialHotspotDefault: string;
554
+ export declare const colorTextTutorialHotspotHover: string;
553
555
  export declare const spaceContentHeaderPaddingBottom: string;
554
556
  export declare const spaceLayoutContentBottom: string;
555
557
  export declare const spaceDarkHeaderOverlapDistance: string;
558
+ export declare const spaceLayoutContentHorizontal: string;
559
+ export declare const shadowPanel: string;
560
+ export declare const colorBackgroundLayoutPanelContent: string;
561
+ export declare const colorBackgroundLayoutPanelHover: string;
562
+ export declare const colorBorderLayout: string;
563
+ export declare const colorBackgroundLayoutMobilePanel: string;
564
+ export declare const spaceButtonInlineIconFocusOutlineGutter: string;
565
+ export declare const sizeVerticalPanelIconOffset: string;
566
+ export declare const spaceLayoutTogglePadding: string;
567
+ export declare const spaceLayoutToggleDiameter: string;
568
+ export declare const shadowSticky: string;
569
+ export declare const shadowPanelToggle: string;
570
+ export declare const shadowSplitBottom: string;
571
+ export declare const colorBorderDividerPanelSide: string;
572
+ export declare const colorBackgroundBadgeIcon: string;
573
+ export declare const colorGapGlobalDrawer: string;
574
+ export declare const borderDividerListWidth: string;
556
575
  export declare const motionDurationTransitionQuick: string;
557
576
  export declare const motionEasingTransitionQuick: string;
558
577
  export declare const borderLineChartWidth: string;
@@ -575,17 +594,21 @@ export declare const colorTextButtonInlineIconDefault: string;
575
594
  export declare const colorTextButtonInlineIconHover: string;
576
595
  export declare const colorTextButtonInlineIconDisabled: string;
577
596
  export declare const spaceButtonIconFocusOutlineGutterVertical: string;
578
- export declare const spaceButtonInlineIconFocusOutlineGutter: string;
579
597
  export declare const spaceButtonIconOnlyHorizontal: string;
580
598
  export declare const spaceButtonModalDismissVertical: string;
581
599
  export declare const motionEasingShowQuick: string;
582
600
  export declare const colorBorderDropdownGroup: string;
601
+ export declare const colorTextDropdownGroupLabel: string;
602
+ export declare const colorBackgroundDropdownItemDimmed: string;
603
+ export declare const colorBorderDropdownItemDimmedHover: string;
604
+ export declare const colorTextDropdownItemDimmed: string;
605
+ export declare const borderControlFocusRingShadowSpread: string;
606
+ export declare const colorTextDropdownItemSecondary: string;
583
607
  export declare const motionDurationShowQuick: string;
584
608
  export declare const sizeCalendarGridWidth: string;
585
609
  export declare const spaceCalendarGridGutter: string;
586
610
  export declare const colorTextCalendarMonth: string;
587
611
  export declare const colorBorderCalendarGrid: string;
588
- export declare const colorTextDropdownItemSecondary: string;
589
612
  export declare const colorTextCalendarDateHover: string;
590
613
  export declare const colorBackgroundCalendarCurrentDate: string;
591
614
  export declare const colorBorderCalendarGridSelectedFocusRing: string;
@@ -612,16 +635,15 @@ export declare const spaceCodeEditorStatusFocusOutlineGutter: string;
612
635
  export declare const borderCodeEditorStatusDividerWidth: string;
613
636
  export declare const colorBorderTabsDivider: string;
614
637
  export declare const colorBackgroundCodeEditorLoading: string;
615
- export declare const borderDividerListWidth: string;
616
638
  export declare const borderContainerTopWidth: string;
617
639
  export declare const shadowContainer: string;
618
640
  export declare const shadowStickyEmbedded: string;
619
641
  export declare const borderContainerStickyWidth: string;
620
642
  export declare const colorBorderContainerDivider: string;
621
643
  export declare const spaceContainerHeaderTop: string;
622
- export declare const shadowSticky: string;
623
644
  export declare const spaceContainerContentTop: string;
624
- export declare const spaceLayoutContentHorizontal: string;
645
+ export declare const spaceCalendarGridSelectedFocusOutlineGutter: string;
646
+ export declare const colorBackgroundDropdownItemSelected: string;
625
647
  export declare const fontPanelHeaderSize: string;
626
648
  export declare const fontPanelHeaderLineHeight: string;
627
649
  export declare const spacePanelHeaderVertical: string;
@@ -638,14 +660,12 @@ export declare const fontExpandableHeadingSize: string;
638
660
  export declare const spaceExpandableSectionIconOffsetTop: string;
639
661
  export declare const colorTextExpandableSectionNavigationIconDefault: string;
640
662
  export declare const colorTextExpandableSectionHover: string;
641
- export declare const borderControlFocusRingShadowSpread: string;
642
663
  export declare const borderInvalidWidth: string;
643
664
  export declare const colorBorderInputDisabled: string;
644
665
  export declare const colorBorderControlDisabled: string;
645
666
  export declare const shadowFlashCollapsed: string;
646
667
  export declare const colorBackgroundNotificationStackBar: string;
647
668
  export declare const colorBorderNotificationStackBar: string;
648
- export declare const shadowPanelToggle: string;
649
669
  export declare const colorTextNotificationStackBar: string;
650
670
  export declare const colorBackgroundNotificationStackBarHover: string;
651
671
  export declare const colorBackgroundNotificationStackBarActive: string;
@@ -659,10 +679,24 @@ export declare const spacePanelDividerMarginHorizontal: string;
659
679
  export declare const sizeIconLarge: string;
660
680
  export declare const colorTextInverted: string;
661
681
  export declare const colorTextIconSubtle: string;
662
- export declare const colorBackgroundBadgeIcon: string;
663
682
  export declare const colorTextInputPlaceholderDisabled: string;
664
683
  export declare const borderControlInvalidFocusRingShadowSpread: string;
665
684
  export declare const spaceFieldIconOffset: string;
685
+ export declare const colorTextControlDisabled: string;
686
+ export declare const spaceFilteringTokenOperationSelectFocusOutlineGutter: string;
687
+ export declare const fontChartDetailSize: string;
688
+ export declare const colorBorderControlChecked: string;
689
+ export declare const colorBackgroundDirectionButtonDefault: string;
690
+ export declare const colorTextDirectionButtonDefault: string;
691
+ export declare const colorBackgroundDirectionButtonHover: string;
692
+ export declare const colorBackgroundDirectionButtonActive: string;
693
+ export declare const colorBackgroundDirectionButtonDisabled: string;
694
+ export declare const colorTextDirectionButtonDisabled: string;
695
+ export declare const colorBorderDropdownItemTop: string;
696
+ export declare const colorTextDropdownFooter: string;
697
+ export declare const colorTextDropdownItemSecondaryHover: string;
698
+ export declare const colorBorderDropdownItemSelected: string;
699
+ export declare const borderDropdownVirtualOffsetWidth: string;
666
700
  export declare const colorBackgroundItemCard: string;
667
701
  export declare const shadowItemCard: string;
668
702
  export declare const borderWidthItemCard: string;
@@ -691,10 +725,10 @@ export declare const spaceModalHorizontal: string;
691
725
  export declare const colorTextPaginationPageNumberDefault: string;
692
726
  export declare const colorTextPaginationPageNumberActiveDisabled: string;
693
727
  export declare const colorStrokeChartLine: string;
694
- export declare const fontChartDetailSize: string;
695
728
  export declare const colorShadowDefault: string;
696
729
  export declare const shadowPopover: string;
697
- export declare const colorTextDropdownGroupLabel: string;
730
+ export declare const spaceFilteringTokenDismissButtonFocusOutlineGutter: string;
731
+ export declare const colorTextDisabled: string;
698
732
  export declare const spaceSegmentedControlFocusOutlineGutter: string;
699
733
  export declare const colorBackgroundSegmentWrapper: string;
700
734
  export declare const spacePanelNavLeft: string;
@@ -708,18 +742,12 @@ export declare const colorBackgroundSliderHandleErrorDefault: string;
708
742
  export declare const colorBackgroundSliderHandleErrorActive: string;
709
743
  export declare const colorBackgroundSliderHandleWarningDefault: string;
710
744
  export declare const colorBackgroundSliderHandleWarningActive: string;
711
- export declare const colorBackgroundLayoutPanelContent: string;
712
- export declare const colorBackgroundLayoutPanelHover: string;
713
745
  export declare const borderPanelTopWidth: string;
714
746
  export declare const colorBorderDividerPanelBottom: string;
715
- export declare const shadowSplitBottom: string;
716
747
  export declare const shadowSplitSide: string;
717
748
  export declare const borderPanelHeaderWidth: string;
718
749
  export declare const spacePanelSplitTop: string;
719
- export declare const spaceLayoutToggleDiameter: string;
720
- export declare const spaceLayoutTogglePadding: string;
721
750
  export declare const spacePanelSplitBottom: string;
722
- export declare const sizeVerticalPanelIconOffset: string;
723
751
  export declare const spaceTableHeaderToolsBottom: string;
724
752
  export declare const spaceTableHorizontal: string;
725
753
  export declare const spaceTableContentBottom: string;
@@ -727,6 +755,18 @@ export declare const sizeTableSelectionHorizontal: string;
727
755
  export declare const colorBackgroundTableHeader: string;
728
756
  export declare const spaceTableEmbeddedHeaderTop: string;
729
757
  export declare const spaceTableFooterHorizontal: string;
758
+ export declare const colorBorderCellShaded: string;
759
+ export declare const motionDurationTransitionShowQuick: string;
760
+ export declare const shadowStickyColumnLast: string;
761
+ export declare const shadowStickyColumnFirst: string;
762
+ export declare const colorBorderItemPlaceholder: string;
763
+ export declare const colorTextDisabledInlineEdit: string;
764
+ export declare const colorBorderEditableCellHover: string;
765
+ export declare const borderTableStickyWidth: string;
766
+ export declare const colorTextColumnSortingIcon: string;
767
+ export declare const spaceTableHeaderFocusOutlineGutter: string;
768
+ export declare const colorBorderDividerInteractiveDefault: string;
769
+ export declare const colorBorderDividerActive: string;
730
770
  export declare const colorBorderTabsShadow: string;
731
771
  export declare const colorBorderTabsUnderline: string;
732
772
  export declare const fontTabsSize: string;
@@ -737,5 +777,4 @@ export declare const spaceTabsContentTop: string;
737
777
  export declare const colorBorderTilesDisabled: string;
738
778
  export declare const spaceTileGutter: string;
739
779
  export declare const colorBackgroundToggleDefault: string;
740
- export declare const colorTextDisabled: string;
741
- export declare const colorBorderLayout: string;
780
+ export declare const colorBorderTutorial: string;
package/dist/index.js CHANGED
@@ -550,9 +550,28 @@ export const borderLinkFocusRingShadowSpread = "var(--border-link-focus-ring-sha
550
550
  export const fontSmoothingWebkit = "var(--font-smoothing-webkit)";
551
551
  export const fontSmoothingMozOsx = "var(--font-smoothing-moz-osx)";
552
552
  export const letterSpacingBodyS = "var(--letter-spacing-body-s)";
553
+ export const colorTextTutorialHotspotDefault = "var(--color-text-tutorial-hotspot-default)";
554
+ export const colorTextTutorialHotspotHover = "var(--color-text-tutorial-hotspot-hover)";
553
555
  export const spaceContentHeaderPaddingBottom = "var(--space-content-header-padding-bottom)";
554
556
  export const spaceLayoutContentBottom = "var(--space-layout-content-bottom)";
555
557
  export const spaceDarkHeaderOverlapDistance = "var(--space-dark-header-overlap-distance)";
558
+ export const spaceLayoutContentHorizontal = "var(--space-layout-content-horizontal)";
559
+ export const shadowPanel = "var(--shadow-panel)";
560
+ export const colorBackgroundLayoutPanelContent = "var(--color-background-layout-panel-content)";
561
+ export const colorBackgroundLayoutPanelHover = "var(--color-background-layout-panel-hover)";
562
+ export const colorBorderLayout = "var(--color-border-layout)";
563
+ export const colorBackgroundLayoutMobilePanel = "var(--color-background-layout-mobile-panel)";
564
+ export const spaceButtonInlineIconFocusOutlineGutter = "var(--space-button-inline-icon-focus-outline-gutter)";
565
+ export const sizeVerticalPanelIconOffset = "var(--size-vertical-panel-icon-offset)";
566
+ export const spaceLayoutTogglePadding = "var(--space-layout-toggle-padding)";
567
+ export const spaceLayoutToggleDiameter = "var(--space-layout-toggle-diameter)";
568
+ export const shadowSticky = "var(--shadow-sticky)";
569
+ export const shadowPanelToggle = "var(--shadow-panel-toggle)";
570
+ export const shadowSplitBottom = "var(--shadow-split-bottom)";
571
+ export const colorBorderDividerPanelSide = "var(--color-border-divider-panel-side)";
572
+ export const colorBackgroundBadgeIcon = "var(--color-background-badge-icon)";
573
+ export const colorGapGlobalDrawer = "var(--color-gap-global-drawer)";
574
+ export const borderDividerListWidth = "var(--border-divider-list-width)";
556
575
  export const motionDurationTransitionQuick = "var(--motion-duration-transition-quick)";
557
576
  export const motionEasingTransitionQuick = "var(--motion-easing-transition-quick)";
558
577
  export const borderLineChartWidth = "var(--border-line-chart-width)";
@@ -575,17 +594,21 @@ export const colorTextButtonInlineIconDefault = "var(--color-text-button-inline-
575
594
  export const colorTextButtonInlineIconHover = "var(--color-text-button-inline-icon-hover)";
576
595
  export const colorTextButtonInlineIconDisabled = "var(--color-text-button-inline-icon-disabled)";
577
596
  export const spaceButtonIconFocusOutlineGutterVertical = "var(--space-button-icon-focus-outline-gutter-vertical)";
578
- export const spaceButtonInlineIconFocusOutlineGutter = "var(--space-button-inline-icon-focus-outline-gutter)";
579
597
  export const spaceButtonIconOnlyHorizontal = "var(--space-button-icon-only-horizontal)";
580
598
  export const spaceButtonModalDismissVertical = "var(--space-button-modal-dismiss-vertical)";
581
599
  export const motionEasingShowQuick = "var(--motion-easing-show-quick)";
582
600
  export const colorBorderDropdownGroup = "var(--color-border-dropdown-group)";
601
+ export const colorTextDropdownGroupLabel = "var(--color-text-dropdown-group-label)";
602
+ export const colorBackgroundDropdownItemDimmed = "var(--color-background-dropdown-item-dimmed)";
603
+ export const colorBorderDropdownItemDimmedHover = "var(--color-border-dropdown-item-dimmed-hover)";
604
+ export const colorTextDropdownItemDimmed = "var(--color-text-dropdown-item-dimmed)";
605
+ export const borderControlFocusRingShadowSpread = "var(--border-control-focus-ring-shadow-spread)";
606
+ export const colorTextDropdownItemSecondary = "var(--color-text-dropdown-item-secondary)";
583
607
  export const motionDurationShowQuick = "var(--motion-duration-show-quick)";
584
608
  export const sizeCalendarGridWidth = "var(--size-calendar-grid-width)";
585
609
  export const spaceCalendarGridGutter = "var(--space-calendar-grid-gutter)";
586
610
  export const colorTextCalendarMonth = "var(--color-text-calendar-month)";
587
611
  export const colorBorderCalendarGrid = "var(--color-border-calendar-grid)";
588
- export const colorTextDropdownItemSecondary = "var(--color-text-dropdown-item-secondary)";
589
612
  export const colorTextCalendarDateHover = "var(--color-text-calendar-date-hover)";
590
613
  export const colorBackgroundCalendarCurrentDate = "var(--color-background-calendar-current-date)";
591
614
  export const colorBorderCalendarGridSelectedFocusRing = "var(--color-border-calendar-grid-selected-focus-ring)";
@@ -612,16 +635,15 @@ export const spaceCodeEditorStatusFocusOutlineGutter = "var(--space-code-editor-
612
635
  export const borderCodeEditorStatusDividerWidth = "var(--border-code-editor-status-divider-width)";
613
636
  export const colorBorderTabsDivider = "var(--color-border-tabs-divider)";
614
637
  export const colorBackgroundCodeEditorLoading = "var(--color-background-code-editor-loading)";
615
- export const borderDividerListWidth = "var(--border-divider-list-width)";
616
638
  export const borderContainerTopWidth = "var(--border-container-top-width)";
617
639
  export const shadowContainer = "var(--shadow-container)";
618
640
  export const shadowStickyEmbedded = "var(--shadow-sticky-embedded)";
619
641
  export const borderContainerStickyWidth = "var(--border-container-sticky-width)";
620
642
  export const colorBorderContainerDivider = "var(--color-border-container-divider)";
621
643
  export const spaceContainerHeaderTop = "var(--space-container-header-top)";
622
- export const shadowSticky = "var(--shadow-sticky)";
623
644
  export const spaceContainerContentTop = "var(--space-container-content-top)";
624
- export const spaceLayoutContentHorizontal = "var(--space-layout-content-horizontal)";
645
+ export const spaceCalendarGridSelectedFocusOutlineGutter = "var(--space-calendar-grid-selected-focus-outline-gutter)";
646
+ export const colorBackgroundDropdownItemSelected = "var(--color-background-dropdown-item-selected)";
625
647
  export const fontPanelHeaderSize = "var(--font-panel-header-size)";
626
648
  export const fontPanelHeaderLineHeight = "var(--font-panel-header-line-height)";
627
649
  export const spacePanelHeaderVertical = "var(--space-panel-header-vertical)";
@@ -638,14 +660,12 @@ export const fontExpandableHeadingSize = "var(--font-expandable-heading-size)";
638
660
  export const spaceExpandableSectionIconOffsetTop = "var(--space-expandable-section-icon-offset-top)";
639
661
  export const colorTextExpandableSectionNavigationIconDefault = "var(--color-text-expandable-section-navigation-icon-default)";
640
662
  export const colorTextExpandableSectionHover = "var(--color-text-expandable-section-hover)";
641
- export const borderControlFocusRingShadowSpread = "var(--border-control-focus-ring-shadow-spread)";
642
663
  export const borderInvalidWidth = "var(--border-invalid-width)";
643
664
  export const colorBorderInputDisabled = "var(--color-border-input-disabled)";
644
665
  export const colorBorderControlDisabled = "var(--color-border-control-disabled)";
645
666
  export const shadowFlashCollapsed = "var(--shadow-flash-collapsed)";
646
667
  export const colorBackgroundNotificationStackBar = "var(--color-background-notification-stack-bar)";
647
668
  export const colorBorderNotificationStackBar = "var(--color-border-notification-stack-bar)";
648
- export const shadowPanelToggle = "var(--shadow-panel-toggle)";
649
669
  export const colorTextNotificationStackBar = "var(--color-text-notification-stack-bar)";
650
670
  export const colorBackgroundNotificationStackBarHover = "var(--color-background-notification-stack-bar-hover)";
651
671
  export const colorBackgroundNotificationStackBarActive = "var(--color-background-notification-stack-bar-active)";
@@ -659,10 +679,24 @@ export const spacePanelDividerMarginHorizontal = "var(--space-panel-divider-marg
659
679
  export const sizeIconLarge = "var(--size-icon-large)";
660
680
  export const colorTextInverted = "var(--color-text-inverted)";
661
681
  export const colorTextIconSubtle = "var(--color-text-icon-subtle)";
662
- export const colorBackgroundBadgeIcon = "var(--color-background-badge-icon)";
663
682
  export const colorTextInputPlaceholderDisabled = "var(--color-text-input-placeholder-disabled)";
664
683
  export const borderControlInvalidFocusRingShadowSpread = "var(--border-control-invalid-focus-ring-shadow-spread)";
665
684
  export const spaceFieldIconOffset = "var(--space-field-icon-offset)";
685
+ export const colorTextControlDisabled = "var(--color-text-control-disabled)";
686
+ export const spaceFilteringTokenOperationSelectFocusOutlineGutter = "var(--space-filtering-token-operation-select-focus-outline-gutter)";
687
+ export const fontChartDetailSize = "var(--font-chart-detail-size)";
688
+ export const colorBorderControlChecked = "var(--color-border-control-checked)";
689
+ export const colorBackgroundDirectionButtonDefault = "var(--color-background-direction-button-default)";
690
+ export const colorTextDirectionButtonDefault = "var(--color-text-direction-button-default)";
691
+ export const colorBackgroundDirectionButtonHover = "var(--color-background-direction-button-hover)";
692
+ export const colorBackgroundDirectionButtonActive = "var(--color-background-direction-button-active)";
693
+ export const colorBackgroundDirectionButtonDisabled = "var(--color-background-direction-button-disabled)";
694
+ export const colorTextDirectionButtonDisabled = "var(--color-text-direction-button-disabled)";
695
+ export const colorBorderDropdownItemTop = "var(--color-border-dropdown-item-top)";
696
+ export const colorTextDropdownFooter = "var(--color-text-dropdown-footer)";
697
+ export const colorTextDropdownItemSecondaryHover = "var(--color-text-dropdown-item-secondary-hover)";
698
+ export const colorBorderDropdownItemSelected = "var(--color-border-dropdown-item-selected)";
699
+ export const borderDropdownVirtualOffsetWidth = "var(--border-dropdown-virtual-offset-width)";
666
700
  export const colorBackgroundItemCard = "var(--color-background-item-card)";
667
701
  export const shadowItemCard = "var(--shadow-item-card)";
668
702
  export const borderWidthItemCard = "var(--border-width-item-card)";
@@ -691,10 +725,10 @@ export const spaceModalHorizontal = "var(--space-modal-horizontal)";
691
725
  export const colorTextPaginationPageNumberDefault = "var(--color-text-pagination-page-number-default)";
692
726
  export const colorTextPaginationPageNumberActiveDisabled = "var(--color-text-pagination-page-number-active-disabled)";
693
727
  export const colorStrokeChartLine = "var(--color-stroke-chart-line)";
694
- export const fontChartDetailSize = "var(--font-chart-detail-size)";
695
728
  export const colorShadowDefault = "var(--color-shadow-default)";
696
729
  export const shadowPopover = "var(--shadow-popover)";
697
- export const colorTextDropdownGroupLabel = "var(--color-text-dropdown-group-label)";
730
+ export const spaceFilteringTokenDismissButtonFocusOutlineGutter = "var(--space-filtering-token-dismiss-button-focus-outline-gutter)";
731
+ export const colorTextDisabled = "var(--color-text-disabled)";
698
732
  export const spaceSegmentedControlFocusOutlineGutter = "var(--space-segmented-control-focus-outline-gutter)";
699
733
  export const colorBackgroundSegmentWrapper = "var(--color-background-segment-wrapper)";
700
734
  export const spacePanelNavLeft = "var(--space-panel-nav-left)";
@@ -708,18 +742,12 @@ export const colorBackgroundSliderHandleErrorDefault = "var(--color-background-s
708
742
  export const colorBackgroundSliderHandleErrorActive = "var(--color-background-slider-handle-error-active)";
709
743
  export const colorBackgroundSliderHandleWarningDefault = "var(--color-background-slider-handle-warning-default)";
710
744
  export const colorBackgroundSliderHandleWarningActive = "var(--color-background-slider-handle-warning-active)";
711
- export const colorBackgroundLayoutPanelContent = "var(--color-background-layout-panel-content)";
712
- export const colorBackgroundLayoutPanelHover = "var(--color-background-layout-panel-hover)";
713
745
  export const borderPanelTopWidth = "var(--border-panel-top-width)";
714
746
  export const colorBorderDividerPanelBottom = "var(--color-border-divider-panel-bottom)";
715
- export const shadowSplitBottom = "var(--shadow-split-bottom)";
716
747
  export const shadowSplitSide = "var(--shadow-split-side)";
717
748
  export const borderPanelHeaderWidth = "var(--border-panel-header-width)";
718
749
  export const spacePanelSplitTop = "var(--space-panel-split-top)";
719
- export const spaceLayoutToggleDiameter = "var(--space-layout-toggle-diameter)";
720
- export const spaceLayoutTogglePadding = "var(--space-layout-toggle-padding)";
721
750
  export const spacePanelSplitBottom = "var(--space-panel-split-bottom)";
722
- export const sizeVerticalPanelIconOffset = "var(--size-vertical-panel-icon-offset)";
723
751
  export const spaceTableHeaderToolsBottom = "var(--space-table-header-tools-bottom)";
724
752
  export const spaceTableHorizontal = "var(--space-table-horizontal)";
725
753
  export const spaceTableContentBottom = "var(--space-table-content-bottom)";
@@ -727,6 +755,18 @@ export const sizeTableSelectionHorizontal = "var(--size-table-selection-horizont
727
755
  export const colorBackgroundTableHeader = "var(--color-background-table-header)";
728
756
  export const spaceTableEmbeddedHeaderTop = "var(--space-table-embedded-header-top)";
729
757
  export const spaceTableFooterHorizontal = "var(--space-table-footer-horizontal)";
758
+ export const colorBorderCellShaded = "var(--color-border-cell-shaded)";
759
+ export const motionDurationTransitionShowQuick = "var(--motion-duration-transition-show-quick)";
760
+ export const shadowStickyColumnLast = "var(--shadow-sticky-column-last)";
761
+ export const shadowStickyColumnFirst = "var(--shadow-sticky-column-first)";
762
+ export const colorBorderItemPlaceholder = "var(--color-border-item-placeholder)";
763
+ export const colorTextDisabledInlineEdit = "var(--color-text-disabled-inline-edit)";
764
+ export const colorBorderEditableCellHover = "var(--color-border-editable-cell-hover)";
765
+ export const borderTableStickyWidth = "var(--border-table-sticky-width)";
766
+ export const colorTextColumnSortingIcon = "var(--color-text-column-sorting-icon)";
767
+ export const spaceTableHeaderFocusOutlineGutter = "var(--space-table-header-focus-outline-gutter)";
768
+ export const colorBorderDividerInteractiveDefault = "var(--color-border-divider-interactive-default)";
769
+ export const colorBorderDividerActive = "var(--color-border-divider-active)";
730
770
  export const colorBorderTabsShadow = "var(--color-border-tabs-shadow)";
731
771
  export const colorBorderTabsUnderline = "var(--color-border-tabs-underline)";
732
772
  export const fontTabsSize = "var(--font-tabs-size)";
@@ -737,5 +777,4 @@ export const spaceTabsContentTop = "var(--space-tabs-content-top)";
737
777
  export const colorBorderTilesDisabled = "var(--color-border-tiles-disabled)";
738
778
  export const spaceTileGutter = "var(--space-tile-gutter)";
739
779
  export const colorBackgroundToggleDefault = "var(--color-background-toggle-default)";
740
- export const colorTextDisabled = "var(--color-text-disabled)";
741
- export const colorBorderLayout = "var(--color-border-layout)";
780
+ export const colorBorderTutorial = "var(--color-border-tutorial)";
package/dist/tokens.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* AUTO-GENERATED from @cloudscape-design/design-tokens — DO NOT EDIT
2
2
  * License: see /NOTICE
3
3
  */
4
- /* 739 tokens, 338 dark overrides */
4
+ /* 778 tokens, 349 dark overrides */
5
5
 
6
6
  :root {
7
7
  --color-charts-red-300: #ea7158;
@@ -554,9 +554,28 @@
554
554
  --font-smoothing-webkit: antialiased;
555
555
  --font-smoothing-moz-osx: grayscale;
556
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);
557
559
  --space-content-header-padding-bottom: var(--space-scaled-m);
558
560
  --space-layout-content-bottom: var(--space-scaled-2x-xxxl);
559
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;
560
579
  --motion-duration-transition-quick: var(--motion-duration-fast);
561
580
  --motion-easing-transition-quick: linear;
562
581
  --border-line-chart-width: 2px;
@@ -579,17 +598,21 @@
579
598
  --color-text-button-inline-icon-hover: var(--color-text-link-hover);
580
599
  --color-text-button-inline-icon-disabled: var(--color-text-interactive-disabled);
581
600
  --space-button-icon-focus-outline-gutter-vertical: 0px;
582
- --space-button-inline-icon-focus-outline-gutter: 0px;
583
601
  --space-button-icon-only-horizontal: 6px;
584
602
  --space-button-modal-dismiss-vertical: var(--space-scaled-xxxs);
585
603
  --motion-easing-show-quick: ease-out;
586
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);
587
611
  --motion-duration-show-quick: var(--motion-duration-moderate);
588
612
  --size-calendar-grid-width: 238px;
589
613
  --space-calendar-grid-gutter: 6px;
590
614
  --color-text-calendar-month: var(--color-neutral-600);
591
615
  --color-border-calendar-grid: transparent;
592
- --color-text-dropdown-item-secondary: var(--color-text-form-secondary);
593
616
  --color-text-calendar-date-hover: var(--color-text-dropdown-item-default);
594
617
  --color-background-calendar-current-date: var(--color-neutral-200);
595
618
  --color-border-calendar-grid-selected-focus-ring: var(--color-neutral-100);
@@ -616,16 +639,15 @@
616
639
  --border-code-editor-status-divider-width: var(--border-divider-section-width);
617
640
  --color-border-tabs-divider: var(--color-neutral-350);
618
641
  --color-background-code-editor-loading: var(--color-neutral-100);
619
- --border-divider-list-width: 1px;
620
642
  --border-container-top-width: 0px;
621
643
  --shadow-container: 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12);
622
644
  --shadow-sticky-embedded: 0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.10);
623
645
  --border-container-sticky-width: 0px;
624
646
  --color-border-container-divider: transparent;
625
647
  --space-container-header-top: var(--space-s);
626
- --shadow-sticky: 0px 4px 8px 1px rgba(0, 7, 22, 0.10);
627
648
  --space-container-content-top: var(--space-xxs);
628
- --space-layout-content-horizontal: var(--space-scaled-2x-xl);
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);
629
651
  --font-panel-header-size: var(--font-size-heading-m);
630
652
  --font-panel-header-line-height: var(--line-height-heading-m);
631
653
  --space-panel-header-vertical: var(--space-scaled-l);
@@ -642,14 +664,12 @@
642
664
  --space-expandable-section-icon-offset-top: var(--space-scaled-2x-xxs);
643
665
  --color-text-expandable-section-navigation-icon-default: var(--color-text-interactive-default);
644
666
  --color-text-expandable-section-hover: var(--color-text-accent);
645
- --border-control-focus-ring-shadow-spread: 1px;
646
667
  --border-invalid-width: 8px;
647
668
  --color-border-input-disabled: var(--color-background-input-disabled);
648
669
  --color-border-control-disabled: var(--color-background-control-disabled);
649
670
  --shadow-flash-collapsed: 0px 4px 4px rgba(0, 0, 0, 0.25);
650
671
  --color-background-notification-stack-bar: var(--color-neutral-750);
651
672
  --color-border-notification-stack-bar: var(--color-neutral-750);
652
- --shadow-panel-toggle: 0px 6px 12px 1px rgba(0, 7, 22, 0.12);
653
673
  --color-text-notification-stack-bar: var(--color-white);
654
674
  --color-background-notification-stack-bar-hover: var(--color-neutral-650);
655
675
  --color-background-notification-stack-bar-active: var(--color-neutral-750);
@@ -663,10 +683,24 @@
663
683
  --size-icon-large: 48px;
664
684
  --color-text-inverted: var(--color-white);
665
685
  --color-text-icon-subtle: var(--color-neutral-600);
666
- --color-background-badge-icon: var(--color-error-600);
667
686
  --color-text-input-placeholder-disabled: var(--color-text-input-disabled);
668
687
  --border-control-invalid-focus-ring-shadow-spread: 2px;
669
688
  --space-field-icon-offset: 36px;
689
+ --color-text-control-disabled: var(--color-text-interactive-disabled);
690
+ --space-filtering-token-operation-select-focus-outline-gutter: -5px;
691
+ --font-chart-detail-size: var(--font-size-body-s);
692
+ --color-border-control-checked: var(--color-background-control-checked);
693
+ --color-background-direction-button-default: var(--color-neutral-650);
694
+ --color-text-direction-button-default: var(--color-white);
695
+ --color-background-direction-button-hover: var(--color-neutral-700);
696
+ --color-background-direction-button-active: var(--color-neutral-750);
697
+ --color-background-direction-button-disabled: var(--color-neutral-250);
698
+ --color-text-direction-button-disabled: var(--color-text-interactive-disabled);
699
+ --color-border-dropdown-item-top: transparent;
700
+ --color-text-dropdown-footer: var(--color-text-form-secondary);
701
+ --color-text-dropdown-item-secondary-hover: var(--color-neutral-600);
702
+ --color-border-dropdown-item-selected: var(--color-border-item-selected);
703
+ --border-dropdown-virtual-offset-width: 2px;
670
704
  --color-background-item-card: var(--color-background-card);
671
705
  --shadow-item-card: var(--shadow-card);
672
706
  --border-width-item-card: var(--border-width-card);
@@ -695,10 +729,10 @@
695
729
  --color-text-pagination-page-number-default: var(--color-text-interactive-default);
696
730
  --color-text-pagination-page-number-active-disabled: var(--color-text-interactive-disabled);
697
731
  --color-stroke-chart-line: var(--color-neutral-500);
698
- --font-chart-detail-size: var(--font-size-body-s);
699
732
  --color-shadow-default: var(--color-grey-transparent-heavy);
700
733
  --shadow-popover: var(--shadow-dropdown);
701
- --color-text-dropdown-group-label: var(--color-text-group-label);
734
+ --space-filtering-token-dismiss-button-focus-outline-gutter: -5px;
735
+ --color-text-disabled: var(--color-neutral-400);
702
736
  --space-segmented-control-focus-outline-gutter: 6px;
703
737
  --color-background-segment-wrapper: var(--color-background-container-content);
704
738
  --space-panel-nav-left: 28px;
@@ -712,18 +746,12 @@
712
746
  --color-background-slider-handle-error-active: var(--color-text-status-error);
713
747
  --color-background-slider-handle-warning-default: var(--color-text-status-warning);
714
748
  --color-background-slider-handle-warning-active: var(--color-text-status-warning);
715
- --color-background-layout-panel-content: var(--color-background-container-content);
716
- --color-background-layout-panel-hover: var(--color-neutral-250);
717
749
  --border-panel-top-width: 1px;
718
750
  --color-border-divider-panel-bottom: var(--color-border-divider-default);
719
- --shadow-split-bottom: 0px -36px 36px -36px rgba(0, 7, 22, 0.10);
720
751
  --shadow-split-side: -1px 0px 1px 0px #e9ebed, -36px 6px 36px -36px rgba(0, 7, 22, 0.10);
721
752
  --border-panel-header-width: 1px;
722
753
  --space-panel-split-top: var(--space-scaled-l);
723
- --space-layout-toggle-diameter: 36px;
724
- --space-layout-toggle-padding: var(--space-static-s);
725
754
  --space-panel-split-bottom: var(--space-scaled-l);
726
- --size-vertical-panel-icon-offset: 15px;
727
755
  --space-table-header-tools-bottom: 0px;
728
756
  --space-table-horizontal: var(--space-container-horizontal);
729
757
  --space-table-content-bottom: var(--space-xxs);
@@ -731,6 +759,18 @@
731
759
  --color-background-table-header: var(--color-background-container-header);
732
760
  --space-table-embedded-header-top: 0px;
733
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);
734
774
  --color-border-tabs-shadow: var(--color-grey-transparent);
735
775
  --color-border-tabs-underline: var(--color-text-accent);
736
776
  --font-tabs-size: var(--font-size-heading-s);
@@ -741,8 +781,7 @@
741
781
  --color-border-tiles-disabled: var(--color-background-tiles-disabled);
742
782
  --space-tile-gutter: var(--space-xl);
743
783
  --color-background-toggle-default: var(--color-neutral-650);
744
- --color-text-disabled: var(--color-neutral-400);
745
- --color-border-layout: var(--color-neutral-350);
784
+ --color-border-tutorial: var(--color-neutral-300);
746
785
  }
747
786
 
748
787
  :root.awsui-dark-mode {
@@ -1051,6 +1090,14 @@
1051
1090
  --color-grey-transparent-heavy: rgba(15, 20, 26, 1);
1052
1091
  --color-text-column-header: var(--color-neutral-400);
1053
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);
1054
1101
  --color-text-small: var(--color-neutral-450);
1055
1102
  --color-background-inline-code: rgba(255, 255, 255, 0.1);
1056
1103
  --color-text-calendar-month: var(--color-neutral-450);
@@ -1069,20 +1116,23 @@
1069
1116
  --color-background-code-editor-loading: var(--color-neutral-800);
1070
1117
  --shadow-container: 0px 1px 8px 2px rgba(0, 7, 22, 0.6);
1071
1118
  --shadow-sticky-embedded: 0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1);
1072
- --shadow-sticky: 0px 4px 8px 1px rgba(0, 7, 22, 0.5);
1073
1119
  --color-text-expandable-section-default: var(--color-neutral-300);
1074
- --shadow-panel-toggle: 0px 6px 12px 1px rgba(0, 7, 22, 1);
1075
1120
  --shadow-flash-sticky: 0px 4px 8px rgba(0, 7, 22, 0.5);
1076
1121
  --color-text-inverted: var(--color-neutral-950);
1077
1122
  --color-text-icon-subtle: var(--color-neutral-400);
1078
- --color-background-badge-icon: var(--color-error-400);
1123
+ --color-background-direction-button-disabled: var(--color-neutral-750);
1124
+ --color-text-dropdown-item-secondary-hover: var(--color-neutral-300);
1079
1125
  --color-text-link-inverted-hover: var(--color-text-notification-yellow);
1080
1126
  --color-text-pagination-page-number-default: var(--color-neutral-400);
1127
+ --color-text-disabled: var(--color-neutral-600);
1081
1128
  --color-background-slider-handle-ring: var(--color-neutral-850);
1082
- --color-background-layout-panel-hover: var(--color-neutral-700);
1083
- --shadow-split-bottom: 0px -36px 36px -36px rgba(0, 7, 22, 1);
1084
1129
  --shadow-split-side: -1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1);
1130
+ --color-border-cell-shaded: var(--color-neutral-700);
1131
+ --shadow-sticky-column-last: 0px 4px 8px 1px rgba(0, 7, 22, 0.5);
1132
+ --shadow-sticky-column-first: 0px 4px 8px 1px rgba(0, 7, 22, 0.5);
1133
+ --color-text-disabled-inline-edit: var(--color-neutral-400);
1134
+ --color-border-divider-interactive-default: var(--color-neutral-300);
1135
+ --color-border-divider-active: var(--color-neutral-100);
1085
1136
  --color-background-toggle-default: var(--color-neutral-500);
1086
- --color-text-disabled: var(--color-neutral-600);
1087
- --color-border-layout: var(--color-neutral-650);
1137
+ --color-border-tutorial: var(--color-neutral-650);
1088
1138
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cumulus-ui/design-tokens",
3
- "version": "0.4.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
6
  "main": "./dist/index.js",
@@ -17,6 +17,7 @@
17
17
  ],
18
18
  "scripts": {
19
19
  "generate": "tsx scripts/generate.ts",
20
+ "test": "vitest run",
20
21
  "prepublishOnly": "tsx scripts/generate.ts"
21
22
  },
22
23
  "keywords": [
@@ -35,6 +36,7 @@
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
  }