@cumulus-ui/design-tokens 0.3.0 → 0.3.3
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/index.d.ts +64 -20
- package/index.js +64 -20
- package/package.json +6 -1
- package/tokens.css +86 -48
package/index.d.ts
CHANGED
|
@@ -479,6 +479,8 @@ export declare const spaceXl: string;
|
|
|
479
479
|
export declare const spaceXxl: string;
|
|
480
480
|
export declare const spaceXxxl: string;
|
|
481
481
|
export declare const fontButtonLetterSpacing: string;
|
|
482
|
+
export declare const motionDurationRotate180: string;
|
|
483
|
+
export declare const motionEasingRotate180: string;
|
|
482
484
|
export declare const spaceButtonHorizontal: string;
|
|
483
485
|
export declare const colorTextButtonInlineIconDefault: string;
|
|
484
486
|
export declare const colorTextButtonInlineIconHover: string;
|
|
@@ -487,6 +489,7 @@ export declare const spaceButtonIconFocusOutlineGutterVertical: string;
|
|
|
487
489
|
export declare const spaceButtonInlineIconFocusOutlineGutter: string;
|
|
488
490
|
export declare const spaceButtonIconOnlyHorizontal: string;
|
|
489
491
|
export declare const spaceButtonModalDismissVertical: string;
|
|
492
|
+
export declare const shadowDropdown: string;
|
|
490
493
|
export declare const motionEasingShowQuick: string;
|
|
491
494
|
export declare const colorBorderDropdownGroup: string;
|
|
492
495
|
export declare const motionDurationShowQuick: string;
|
|
@@ -503,6 +506,8 @@ export declare const colorBorderCalendarGridSelectedFocusRing: string;
|
|
|
503
506
|
export declare const spaceContainerHeaderBottom: string;
|
|
504
507
|
export declare const spaceTableHeaderToolsFullPageBottom: string;
|
|
505
508
|
export declare const sizeControl: string;
|
|
509
|
+
export declare const colorBackgroundCodeEditorStatusBar: string;
|
|
510
|
+
export declare const colorBorderCodeEditorDefault: string;
|
|
506
511
|
export declare const borderRadiusCodeEditor: string;
|
|
507
512
|
export declare const colorBorderCodeEditorAceActiveLineLightTheme: string;
|
|
508
513
|
export declare const colorBorderCodeEditorAceActiveLineDarkTheme: string;
|
|
@@ -511,8 +516,6 @@ export declare const colorTextCodeEditorGutterDefault: string;
|
|
|
511
516
|
export declare const colorBackgroundCodeEditorGutterActiveLineDefault: string;
|
|
512
517
|
export declare const colorTextCodeEditorGutterActiveLine: string;
|
|
513
518
|
export declare const colorBackgroundCodeEditorGutterActiveLineError: string;
|
|
514
|
-
export declare const colorBorderCodeEditorDefault: string;
|
|
515
|
-
export declare const colorBackgroundCodeEditorStatusBar: string;
|
|
516
519
|
export declare const colorTransparent: string;
|
|
517
520
|
export declare const colorBackgroundCodeEditorPaneItemHover: string;
|
|
518
521
|
export declare const colorBorderCodeEditorPaneItemHover: string;
|
|
@@ -524,6 +527,7 @@ export declare const spaceCodeEditorStatusFocusOutlineGutter: string;
|
|
|
524
527
|
export declare const borderCodeEditorStatusDividerWidth: string;
|
|
525
528
|
export declare const colorBorderTabsDivider: string;
|
|
526
529
|
export declare const colorBackgroundCodeEditorLoading: string;
|
|
530
|
+
export declare const shadowPanel: string;
|
|
527
531
|
export declare const colorTextFormLabel: string;
|
|
528
532
|
export declare const borderDividerListWidth: string;
|
|
529
533
|
export declare const borderContainerTopWidth: string;
|
|
@@ -544,6 +548,8 @@ export declare const colorBorderPanelHeader: string;
|
|
|
544
548
|
export declare const spacePanelContentTop: string;
|
|
545
549
|
export declare const spacePanelSideRight: string;
|
|
546
550
|
export declare const spacePanelContentBottom: string;
|
|
551
|
+
export declare const motionDurationRotate90: string;
|
|
552
|
+
export declare const motionEasingRotate90: string;
|
|
547
553
|
export declare const colorTextExpandableSectionDefault: string;
|
|
548
554
|
export declare const fontExpandableHeadingSize: string;
|
|
549
555
|
export declare const spaceExpandableSectionIconOffsetTop: string;
|
|
@@ -579,6 +585,60 @@ export declare const colorBackgroundBadgeIcon: string;
|
|
|
579
585
|
export declare const colorTextInputPlaceholderDisabled: string;
|
|
580
586
|
export declare const borderControlInvalidFocusRingShadowSpread: string;
|
|
581
587
|
export declare const spaceFieldIconOffset: string;
|
|
588
|
+
export declare const colorTextControlDisabled: string;
|
|
589
|
+
export declare const colorBackgroundLayoutPanelContent: string;
|
|
590
|
+
export declare const colorBackgroundLayoutPanelHover: string;
|
|
591
|
+
export declare const colorBorderLayout: string;
|
|
592
|
+
export declare const colorBackgroundLayoutMobilePanel: string;
|
|
593
|
+
export declare const sizeVerticalPanelIconOffset: string;
|
|
594
|
+
export declare const motionDurationRefreshOnlySlow: string;
|
|
595
|
+
export declare const colorGapGlobalDrawer: string;
|
|
596
|
+
export declare const spaceLayoutTogglePadding: string;
|
|
597
|
+
export declare const spaceLayoutToggleDiameter: string;
|
|
598
|
+
export declare const motionDurationRefreshOnlyFast: string;
|
|
599
|
+
export declare const shadowSplitBottom: string;
|
|
600
|
+
export declare const colorBorderDividerPanelSide: 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 spaceFilteringTokenOperationSelectFocusOutlineGutter: string;
|
|
606
|
+
export declare const fontChartDetailSize: string;
|
|
607
|
+
export declare const borderLineChartWidth: string;
|
|
608
|
+
export declare const motionDurationTransitionQuick: string;
|
|
609
|
+
export declare const motionEasingTransitionQuick: string;
|
|
610
|
+
export declare const colorBorderControlChecked: string;
|
|
611
|
+
export declare const spaceCalendarGridSelectedFocusOutlineGutter: string;
|
|
612
|
+
export declare const colorBackgroundDropdownItemSelected: string;
|
|
613
|
+
export declare const colorBackgroundDirectionButtonDefault: string;
|
|
614
|
+
export declare const colorTextDirectionButtonDefault: string;
|
|
615
|
+
export declare const colorBackgroundDirectionButtonHover: string;
|
|
616
|
+
export declare const colorBackgroundDirectionButtonActive: string;
|
|
617
|
+
export declare const colorBackgroundDirectionButtonDisabled: string;
|
|
618
|
+
export declare const colorTextDirectionButtonDisabled: string;
|
|
619
|
+
export declare const colorBorderDropdownItemTop: string;
|
|
620
|
+
export declare const colorTextDropdownFooter: string;
|
|
621
|
+
export declare const colorTextDropdownItemSecondaryHover: string;
|
|
622
|
+
export declare const spaceFilteringTokenDismissButtonFocusOutlineGutter: string;
|
|
623
|
+
export declare const colorTextDisabled: string;
|
|
624
|
+
export declare const colorBorderDropdownItemSelected: string;
|
|
625
|
+
export declare const borderDropdownVirtualOffsetWidth: string;
|
|
626
|
+
export declare const colorBorderCellShaded: string;
|
|
627
|
+
export declare const motionDurationTransitionShowQuick: string;
|
|
628
|
+
export declare const shadowStickyColumnLast: string;
|
|
629
|
+
export declare const shadowStickyColumnFirst: string;
|
|
630
|
+
export declare const colorBorderItemPlaceholder: string;
|
|
631
|
+
export declare const colorTextDisabledInlineEdit: string;
|
|
632
|
+
export declare const colorBorderEditableCellHover: string;
|
|
633
|
+
export declare const colorBackgroundTableHeader: string;
|
|
634
|
+
export declare const colorTextColumnHeader: string;
|
|
635
|
+
export declare const borderTableStickyWidth: string;
|
|
636
|
+
export declare const spaceTableHorizontal: string;
|
|
637
|
+
export declare const colorTextColumnSortingIcon: string;
|
|
638
|
+
export declare const spaceTableHeaderFocusOutlineGutter: string;
|
|
639
|
+
export declare const colorBorderDividerInteractiveDefault: string;
|
|
640
|
+
export declare const colorBorderDividerActive: string;
|
|
641
|
+
export declare const colorBorderTutorial: string;
|
|
582
642
|
export declare const colorBackgroundItemCard: string;
|
|
583
643
|
export declare const shadowItemCard: string;
|
|
584
644
|
export declare const borderWidthItemCard: string;
|
|
@@ -600,7 +660,6 @@ export declare const colorTextLinkButtonNormalHover: string;
|
|
|
600
660
|
export declare const colorTextLinkButtonNormalActive: string;
|
|
601
661
|
export declare const colorTextLinkInvertedHover: string;
|
|
602
662
|
export declare const motionDurationFast: string;
|
|
603
|
-
export declare const motionDurationRefreshOnlyFast: string;
|
|
604
663
|
export declare const motionDurationExtraSlow: string;
|
|
605
664
|
export declare const colorBackgroundModalOverlay: string;
|
|
606
665
|
export declare const shadowModal: string;
|
|
@@ -611,8 +670,6 @@ export declare const colorTextPaginationPageNumberActiveDisabled: string;
|
|
|
611
670
|
export declare const colorShadowDefault: string;
|
|
612
671
|
export declare const shadowPopover: string;
|
|
613
672
|
export declare const motionDurationModerate: string;
|
|
614
|
-
export declare const colorTextDropdownGroupLabel: string;
|
|
615
|
-
export declare const colorTextColumnHeader: string;
|
|
616
673
|
export declare const spaceSegmentedControlFocusOutlineGutter: string;
|
|
617
674
|
export declare const colorBackgroundSegmentWrapper: string;
|
|
618
675
|
export declare const spacePanelNavLeft: string;
|
|
@@ -628,23 +685,15 @@ export declare const colorBackgroundSliderHandleErrorDefault: string;
|
|
|
628
685
|
export declare const colorBackgroundSliderHandleErrorActive: string;
|
|
629
686
|
export declare const colorBackgroundSliderHandleWarningDefault: string;
|
|
630
687
|
export declare const colorBackgroundSliderHandleWarningActive: string;
|
|
631
|
-
export declare const colorBackgroundLayoutPanelContent: string;
|
|
632
|
-
export declare const colorBackgroundLayoutPanelHover: string;
|
|
633
688
|
export declare const borderPanelTopWidth: string;
|
|
634
689
|
export declare const colorBorderDividerPanelBottom: string;
|
|
635
|
-
export declare const shadowSplitBottom: string;
|
|
636
690
|
export declare const shadowSplitSide: string;
|
|
637
691
|
export declare const borderPanelHeaderWidth: string;
|
|
638
692
|
export declare const spacePanelSplitTop: string;
|
|
639
|
-
export declare const spaceLayoutToggleDiameter: string;
|
|
640
|
-
export declare const spaceLayoutTogglePadding: string;
|
|
641
693
|
export declare const spacePanelSplitBottom: string;
|
|
642
|
-
export declare const
|
|
694
|
+
export declare const sizeTableSelectionHorizontal: string;
|
|
643
695
|
export declare const spaceTableHeaderToolsBottom: string;
|
|
644
|
-
export declare const spaceTableHorizontal: string;
|
|
645
696
|
export declare const spaceTableContentBottom: string;
|
|
646
|
-
export declare const sizeTableSelectionHorizontal: string;
|
|
647
|
-
export declare const colorBackgroundTableHeader: string;
|
|
648
697
|
export declare const spaceTableHeaderHorizontal: string;
|
|
649
698
|
export declare const spaceTableEmbeddedHeaderTop: string;
|
|
650
699
|
export declare const spaceTableFooterHorizontal: string;
|
|
@@ -655,15 +704,11 @@ export declare const fontTabsLineHeight: string;
|
|
|
655
704
|
export declare const spaceTabsFocusOutlineGutter: string;
|
|
656
705
|
export declare const fontTabsDisabledWeight: string;
|
|
657
706
|
export declare const spaceTabsContentTop: string;
|
|
658
|
-
export declare const motionDurationTransitionQuick: string;
|
|
659
|
-
export declare const motionEasingTransitionQuick: string;
|
|
660
707
|
export declare const colorBorderTilesDisabled: string;
|
|
661
708
|
export declare const colorBackgroundTilesDisabled: string;
|
|
662
709
|
export declare const spaceTileGutter: string;
|
|
663
710
|
export declare const colorBackgroundToggleDefault: string;
|
|
664
711
|
export declare const motionEasingEaseOutQuart: string;
|
|
665
|
-
export declare const colorTextDisabled: string;
|
|
666
|
-
export declare const colorBorderLayout: string;
|
|
667
712
|
export declare const spaceScaled2xXxxl: string;
|
|
668
713
|
export declare const colorNeutral600: string;
|
|
669
714
|
export declare const colorNeutral450: string;
|
|
@@ -671,8 +716,8 @@ export declare const colorNeutral200: string;
|
|
|
671
716
|
export declare const colorNeutral700: string;
|
|
672
717
|
export declare const colorNeutral100: string;
|
|
673
718
|
export declare const colorNeutral850: string;
|
|
674
|
-
export declare const colorNeutral300: string;
|
|
675
719
|
export declare const colorNeutral800: string;
|
|
720
|
+
export declare const colorNeutral300: string;
|
|
676
721
|
export declare const colorNeutral950: string;
|
|
677
722
|
export declare const colorNeutral500: string;
|
|
678
723
|
export declare const colorWhite: string;
|
|
@@ -686,6 +731,5 @@ export declare const colorError400: string;
|
|
|
686
731
|
export declare const borderWidthCardHighlighted: string;
|
|
687
732
|
export declare const colorBorderCardHighlighted: string;
|
|
688
733
|
export declare const colorGreyOpaque70: string;
|
|
689
|
-
export declare const shadowDropdown: string;
|
|
690
734
|
export declare const colorGreyTransparentHeavy: string;
|
|
691
735
|
export declare const colorGreyTransparent: string;
|
package/index.js
CHANGED
|
@@ -479,6 +479,8 @@ export const spaceXl = "var(--space-xl)";
|
|
|
479
479
|
export const spaceXxl = "var(--space-xxl)";
|
|
480
480
|
export const spaceXxxl = "var(--space-xxxl)";
|
|
481
481
|
export const fontButtonLetterSpacing = "var(--font-button-letter-spacing)";
|
|
482
|
+
export const motionDurationRotate180 = "var(--motion-duration-rotate-180)";
|
|
483
|
+
export const motionEasingRotate180 = "var(--motion-easing-rotate-180)";
|
|
482
484
|
export const spaceButtonHorizontal = "var(--space-button-horizontal)";
|
|
483
485
|
export const colorTextButtonInlineIconDefault = "var(--color-text-button-inline-icon-default)";
|
|
484
486
|
export const colorTextButtonInlineIconHover = "var(--color-text-button-inline-icon-hover)";
|
|
@@ -487,6 +489,7 @@ export const spaceButtonIconFocusOutlineGutterVertical = "var(--space-button-ico
|
|
|
487
489
|
export const spaceButtonInlineIconFocusOutlineGutter = "var(--space-button-inline-icon-focus-outline-gutter)";
|
|
488
490
|
export const spaceButtonIconOnlyHorizontal = "var(--space-button-icon-only-horizontal)";
|
|
489
491
|
export const spaceButtonModalDismissVertical = "var(--space-button-modal-dismiss-vertical)";
|
|
492
|
+
export const shadowDropdown = "var(--shadow-dropdown)";
|
|
490
493
|
export const motionEasingShowQuick = "var(--motion-easing-show-quick)";
|
|
491
494
|
export const colorBorderDropdownGroup = "var(--color-border-dropdown-group)";
|
|
492
495
|
export const motionDurationShowQuick = "var(--motion-duration-show-quick)";
|
|
@@ -503,6 +506,8 @@ export const colorBorderCalendarGridSelectedFocusRing = "var(--color-border-cale
|
|
|
503
506
|
export const spaceContainerHeaderBottom = "var(--space-container-header-bottom)";
|
|
504
507
|
export const spaceTableHeaderToolsFullPageBottom = "var(--space-table-header-tools-full-page-bottom)";
|
|
505
508
|
export const sizeControl = "var(--size-control)";
|
|
509
|
+
export const colorBackgroundCodeEditorStatusBar = "var(--color-background-code-editor-status-bar)";
|
|
510
|
+
export const colorBorderCodeEditorDefault = "var(--color-border-code-editor-default)";
|
|
506
511
|
export const borderRadiusCodeEditor = "var(--border-radius-code-editor)";
|
|
507
512
|
export const colorBorderCodeEditorAceActiveLineLightTheme = "var(--color-border-code-editor-ace-active-line-light-theme)";
|
|
508
513
|
export const colorBorderCodeEditorAceActiveLineDarkTheme = "var(--color-border-code-editor-ace-active-line-dark-theme)";
|
|
@@ -511,8 +516,6 @@ export const colorTextCodeEditorGutterDefault = "var(--color-text-code-editor-gu
|
|
|
511
516
|
export const colorBackgroundCodeEditorGutterActiveLineDefault = "var(--color-background-code-editor-gutter-active-line-default)";
|
|
512
517
|
export const colorTextCodeEditorGutterActiveLine = "var(--color-text-code-editor-gutter-active-line)";
|
|
513
518
|
export const colorBackgroundCodeEditorGutterActiveLineError = "var(--color-background-code-editor-gutter-active-line-error)";
|
|
514
|
-
export const colorBorderCodeEditorDefault = "var(--color-border-code-editor-default)";
|
|
515
|
-
export const colorBackgroundCodeEditorStatusBar = "var(--color-background-code-editor-status-bar)";
|
|
516
519
|
export const colorTransparent = "var(--color-transparent)";
|
|
517
520
|
export const colorBackgroundCodeEditorPaneItemHover = "var(--color-background-code-editor-pane-item-hover)";
|
|
518
521
|
export const colorBorderCodeEditorPaneItemHover = "var(--color-border-code-editor-pane-item-hover)";
|
|
@@ -524,6 +527,7 @@ export const spaceCodeEditorStatusFocusOutlineGutter = "var(--space-code-editor-
|
|
|
524
527
|
export const borderCodeEditorStatusDividerWidth = "var(--border-code-editor-status-divider-width)";
|
|
525
528
|
export const colorBorderTabsDivider = "var(--color-border-tabs-divider)";
|
|
526
529
|
export const colorBackgroundCodeEditorLoading = "var(--color-background-code-editor-loading)";
|
|
530
|
+
export const shadowPanel = "var(--shadow-panel)";
|
|
527
531
|
export const colorTextFormLabel = "var(--color-text-form-label)";
|
|
528
532
|
export const borderDividerListWidth = "var(--border-divider-list-width)";
|
|
529
533
|
export const borderContainerTopWidth = "var(--border-container-top-width)";
|
|
@@ -544,6 +548,8 @@ export const colorBorderPanelHeader = "var(--color-border-panel-header)";
|
|
|
544
548
|
export const spacePanelContentTop = "var(--space-panel-content-top)";
|
|
545
549
|
export const spacePanelSideRight = "var(--space-panel-side-right)";
|
|
546
550
|
export const spacePanelContentBottom = "var(--space-panel-content-bottom)";
|
|
551
|
+
export const motionDurationRotate90 = "var(--motion-duration-rotate-90)";
|
|
552
|
+
export const motionEasingRotate90 = "var(--motion-easing-rotate-90)";
|
|
547
553
|
export const colorTextExpandableSectionDefault = "var(--color-text-expandable-section-default)";
|
|
548
554
|
export const fontExpandableHeadingSize = "var(--font-expandable-heading-size)";
|
|
549
555
|
export const spaceExpandableSectionIconOffsetTop = "var(--space-expandable-section-icon-offset-top)";
|
|
@@ -579,6 +585,60 @@ export const colorBackgroundBadgeIcon = "var(--color-background-badge-icon)";
|
|
|
579
585
|
export const colorTextInputPlaceholderDisabled = "var(--color-text-input-placeholder-disabled)";
|
|
580
586
|
export const borderControlInvalidFocusRingShadowSpread = "var(--border-control-invalid-focus-ring-shadow-spread)";
|
|
581
587
|
export const spaceFieldIconOffset = "var(--space-field-icon-offset)";
|
|
588
|
+
export const colorTextControlDisabled = "var(--color-text-control-disabled)";
|
|
589
|
+
export const colorBackgroundLayoutPanelContent = "var(--color-background-layout-panel-content)";
|
|
590
|
+
export const colorBackgroundLayoutPanelHover = "var(--color-background-layout-panel-hover)";
|
|
591
|
+
export const colorBorderLayout = "var(--color-border-layout)";
|
|
592
|
+
export const colorBackgroundLayoutMobilePanel = "var(--color-background-layout-mobile-panel)";
|
|
593
|
+
export const sizeVerticalPanelIconOffset = "var(--size-vertical-panel-icon-offset)";
|
|
594
|
+
export const motionDurationRefreshOnlySlow = "var(--motion-duration-refresh-only-slow)";
|
|
595
|
+
export const colorGapGlobalDrawer = "var(--color-gap-global-drawer)";
|
|
596
|
+
export const spaceLayoutTogglePadding = "var(--space-layout-toggle-padding)";
|
|
597
|
+
export const spaceLayoutToggleDiameter = "var(--space-layout-toggle-diameter)";
|
|
598
|
+
export const motionDurationRefreshOnlyFast = "var(--motion-duration-refresh-only-fast)";
|
|
599
|
+
export const shadowSplitBottom = "var(--shadow-split-bottom)";
|
|
600
|
+
export const colorBorderDividerPanelSide = "var(--color-border-divider-panel-side)";
|
|
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 spaceFilteringTokenOperationSelectFocusOutlineGutter = "var(--space-filtering-token-operation-select-focus-outline-gutter)";
|
|
606
|
+
export const fontChartDetailSize = "var(--font-chart-detail-size)";
|
|
607
|
+
export const borderLineChartWidth = "var(--border-line-chart-width)";
|
|
608
|
+
export const motionDurationTransitionQuick = "var(--motion-duration-transition-quick)";
|
|
609
|
+
export const motionEasingTransitionQuick = "var(--motion-easing-transition-quick)";
|
|
610
|
+
export const colorBorderControlChecked = "var(--color-border-control-checked)";
|
|
611
|
+
export const spaceCalendarGridSelectedFocusOutlineGutter = "var(--space-calendar-grid-selected-focus-outline-gutter)";
|
|
612
|
+
export const colorBackgroundDropdownItemSelected = "var(--color-background-dropdown-item-selected)";
|
|
613
|
+
export const colorBackgroundDirectionButtonDefault = "var(--color-background-direction-button-default)";
|
|
614
|
+
export const colorTextDirectionButtonDefault = "var(--color-text-direction-button-default)";
|
|
615
|
+
export const colorBackgroundDirectionButtonHover = "var(--color-background-direction-button-hover)";
|
|
616
|
+
export const colorBackgroundDirectionButtonActive = "var(--color-background-direction-button-active)";
|
|
617
|
+
export const colorBackgroundDirectionButtonDisabled = "var(--color-background-direction-button-disabled)";
|
|
618
|
+
export const colorTextDirectionButtonDisabled = "var(--color-text-direction-button-disabled)";
|
|
619
|
+
export const colorBorderDropdownItemTop = "var(--color-border-dropdown-item-top)";
|
|
620
|
+
export const colorTextDropdownFooter = "var(--color-text-dropdown-footer)";
|
|
621
|
+
export const colorTextDropdownItemSecondaryHover = "var(--color-text-dropdown-item-secondary-hover)";
|
|
622
|
+
export const spaceFilteringTokenDismissButtonFocusOutlineGutter = "var(--space-filtering-token-dismiss-button-focus-outline-gutter)";
|
|
623
|
+
export const colorTextDisabled = "var(--color-text-disabled)";
|
|
624
|
+
export const colorBorderDropdownItemSelected = "var(--color-border-dropdown-item-selected)";
|
|
625
|
+
export const borderDropdownVirtualOffsetWidth = "var(--border-dropdown-virtual-offset-width)";
|
|
626
|
+
export const colorBorderCellShaded = "var(--color-border-cell-shaded)";
|
|
627
|
+
export const motionDurationTransitionShowQuick = "var(--motion-duration-transition-show-quick)";
|
|
628
|
+
export const shadowStickyColumnLast = "var(--shadow-sticky-column-last)";
|
|
629
|
+
export const shadowStickyColumnFirst = "var(--shadow-sticky-column-first)";
|
|
630
|
+
export const colorBorderItemPlaceholder = "var(--color-border-item-placeholder)";
|
|
631
|
+
export const colorTextDisabledInlineEdit = "var(--color-text-disabled-inline-edit)";
|
|
632
|
+
export const colorBorderEditableCellHover = "var(--color-border-editable-cell-hover)";
|
|
633
|
+
export const colorBackgroundTableHeader = "var(--color-background-table-header)";
|
|
634
|
+
export const colorTextColumnHeader = "var(--color-text-column-header)";
|
|
635
|
+
export const borderTableStickyWidth = "var(--border-table-sticky-width)";
|
|
636
|
+
export const spaceTableHorizontal = "var(--space-table-horizontal)";
|
|
637
|
+
export const colorTextColumnSortingIcon = "var(--color-text-column-sorting-icon)";
|
|
638
|
+
export const spaceTableHeaderFocusOutlineGutter = "var(--space-table-header-focus-outline-gutter)";
|
|
639
|
+
export const colorBorderDividerInteractiveDefault = "var(--color-border-divider-interactive-default)";
|
|
640
|
+
export const colorBorderDividerActive = "var(--color-border-divider-active)";
|
|
641
|
+
export const colorBorderTutorial = "var(--color-border-tutorial)";
|
|
582
642
|
export const colorBackgroundItemCard = "var(--color-background-item-card)";
|
|
583
643
|
export const shadowItemCard = "var(--shadow-item-card)";
|
|
584
644
|
export const borderWidthItemCard = "var(--border-width-item-card)";
|
|
@@ -600,7 +660,6 @@ export const colorTextLinkButtonNormalHover = "var(--color-text-link-button-norm
|
|
|
600
660
|
export const colorTextLinkButtonNormalActive = "var(--color-text-link-button-normal-active)";
|
|
601
661
|
export const colorTextLinkInvertedHover = "var(--color-text-link-inverted-hover)";
|
|
602
662
|
export const motionDurationFast = "var(--motion-duration-fast)";
|
|
603
|
-
export const motionDurationRefreshOnlyFast = "var(--motion-duration-refresh-only-fast)";
|
|
604
663
|
export const motionDurationExtraSlow = "var(--motion-duration-extra-slow)";
|
|
605
664
|
export const colorBackgroundModalOverlay = "var(--color-background-modal-overlay)";
|
|
606
665
|
export const shadowModal = "var(--shadow-modal)";
|
|
@@ -611,8 +670,6 @@ export const colorTextPaginationPageNumberActiveDisabled = "var(--color-text-pag
|
|
|
611
670
|
export const colorShadowDefault = "var(--color-shadow-default)";
|
|
612
671
|
export const shadowPopover = "var(--shadow-popover)";
|
|
613
672
|
export const motionDurationModerate = "var(--motion-duration-moderate)";
|
|
614
|
-
export const colorTextDropdownGroupLabel = "var(--color-text-dropdown-group-label)";
|
|
615
|
-
export const colorTextColumnHeader = "var(--color-text-column-header)";
|
|
616
673
|
export const spaceSegmentedControlFocusOutlineGutter = "var(--space-segmented-control-focus-outline-gutter)";
|
|
617
674
|
export const colorBackgroundSegmentWrapper = "var(--color-background-segment-wrapper)";
|
|
618
675
|
export const spacePanelNavLeft = "var(--space-panel-nav-left)";
|
|
@@ -628,23 +685,15 @@ export const colorBackgroundSliderHandleErrorDefault = "var(--color-background-s
|
|
|
628
685
|
export const colorBackgroundSliderHandleErrorActive = "var(--color-background-slider-handle-error-active)";
|
|
629
686
|
export const colorBackgroundSliderHandleWarningDefault = "var(--color-background-slider-handle-warning-default)";
|
|
630
687
|
export const colorBackgroundSliderHandleWarningActive = "var(--color-background-slider-handle-warning-active)";
|
|
631
|
-
export const colorBackgroundLayoutPanelContent = "var(--color-background-layout-panel-content)";
|
|
632
|
-
export const colorBackgroundLayoutPanelHover = "var(--color-background-layout-panel-hover)";
|
|
633
688
|
export const borderPanelTopWidth = "var(--border-panel-top-width)";
|
|
634
689
|
export const colorBorderDividerPanelBottom = "var(--color-border-divider-panel-bottom)";
|
|
635
|
-
export const shadowSplitBottom = "var(--shadow-split-bottom)";
|
|
636
690
|
export const shadowSplitSide = "var(--shadow-split-side)";
|
|
637
691
|
export const borderPanelHeaderWidth = "var(--border-panel-header-width)";
|
|
638
692
|
export const spacePanelSplitTop = "var(--space-panel-split-top)";
|
|
639
|
-
export const spaceLayoutToggleDiameter = "var(--space-layout-toggle-diameter)";
|
|
640
|
-
export const spaceLayoutTogglePadding = "var(--space-layout-toggle-padding)";
|
|
641
693
|
export const spacePanelSplitBottom = "var(--space-panel-split-bottom)";
|
|
642
|
-
export const
|
|
694
|
+
export const sizeTableSelectionHorizontal = "var(--size-table-selection-horizontal)";
|
|
643
695
|
export const spaceTableHeaderToolsBottom = "var(--space-table-header-tools-bottom)";
|
|
644
|
-
export const spaceTableHorizontal = "var(--space-table-horizontal)";
|
|
645
696
|
export const spaceTableContentBottom = "var(--space-table-content-bottom)";
|
|
646
|
-
export const sizeTableSelectionHorizontal = "var(--size-table-selection-horizontal)";
|
|
647
|
-
export const colorBackgroundTableHeader = "var(--color-background-table-header)";
|
|
648
697
|
export const spaceTableHeaderHorizontal = "var(--space-table-header-horizontal)";
|
|
649
698
|
export const spaceTableEmbeddedHeaderTop = "var(--space-table-embedded-header-top)";
|
|
650
699
|
export const spaceTableFooterHorizontal = "var(--space-table-footer-horizontal)";
|
|
@@ -655,15 +704,11 @@ export const fontTabsLineHeight = "var(--font-tabs-line-height)";
|
|
|
655
704
|
export const spaceTabsFocusOutlineGutter = "var(--space-tabs-focus-outline-gutter)";
|
|
656
705
|
export const fontTabsDisabledWeight = "var(--font-tabs-disabled-weight)";
|
|
657
706
|
export const spaceTabsContentTop = "var(--space-tabs-content-top)";
|
|
658
|
-
export const motionDurationTransitionQuick = "var(--motion-duration-transition-quick)";
|
|
659
|
-
export const motionEasingTransitionQuick = "var(--motion-easing-transition-quick)";
|
|
660
707
|
export const colorBorderTilesDisabled = "var(--color-border-tiles-disabled)";
|
|
661
708
|
export const colorBackgroundTilesDisabled = "var(--color-background-tiles-disabled)";
|
|
662
709
|
export const spaceTileGutter = "var(--space-tile-gutter)";
|
|
663
710
|
export const colorBackgroundToggleDefault = "var(--color-background-toggle-default)";
|
|
664
711
|
export const motionEasingEaseOutQuart = "var(--motion-easing-ease-out-quart)";
|
|
665
|
-
export const colorTextDisabled = "var(--color-text-disabled)";
|
|
666
|
-
export const colorBorderLayout = "var(--color-border-layout)";
|
|
667
712
|
export const spaceScaled2xXxxl = "var(--space-scaled-2x-xxxl)";
|
|
668
713
|
export const colorNeutral600 = "var(--color-neutral-600)";
|
|
669
714
|
export const colorNeutral450 = "var(--color-neutral-450)";
|
|
@@ -671,8 +716,8 @@ export const colorNeutral200 = "var(--color-neutral-200)";
|
|
|
671
716
|
export const colorNeutral700 = "var(--color-neutral-700)";
|
|
672
717
|
export const colorNeutral100 = "var(--color-neutral-100)";
|
|
673
718
|
export const colorNeutral850 = "var(--color-neutral-850)";
|
|
674
|
-
export const colorNeutral300 = "var(--color-neutral-300)";
|
|
675
719
|
export const colorNeutral800 = "var(--color-neutral-800)";
|
|
720
|
+
export const colorNeutral300 = "var(--color-neutral-300)";
|
|
676
721
|
export const colorNeutral950 = "var(--color-neutral-950)";
|
|
677
722
|
export const colorNeutral500 = "var(--color-neutral-500)";
|
|
678
723
|
export const colorWhite = "var(--color-white)";
|
|
@@ -686,6 +731,5 @@ export const colorError400 = "var(--color-error-400)";
|
|
|
686
731
|
export const borderWidthCardHighlighted = "var(--border-width-card-highlighted)";
|
|
687
732
|
export const colorBorderCardHighlighted = "var(--color-border-card-highlighted)";
|
|
688
733
|
export const colorGreyOpaque70 = "var(--color-grey-opaque-70)";
|
|
689
|
-
export const shadowDropdown = "var(--shadow-dropdown)";
|
|
690
734
|
export const colorGreyTransparentHeavy = "var(--color-grey-transparent-heavy)";
|
|
691
735
|
export const colorGreyTransparent = "var(--color-grey-transparent)";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cumulus-ui/design-tokens",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.3",
|
|
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": "./index.js",
|
|
@@ -27,8 +27,13 @@
|
|
|
27
27
|
"dark-mode"
|
|
28
28
|
],
|
|
29
29
|
"license": "Apache-2.0",
|
|
30
|
+
"repository": {
|
|
31
|
+
"type": "git",
|
|
32
|
+
"url": "https://github.com/cumulus-ui/design-tokens"
|
|
33
|
+
},
|
|
30
34
|
"devDependencies": {
|
|
31
35
|
"@cloudscape-design/design-tokens": "^3.0.78",
|
|
36
|
+
"@cloudscape-design/global-styles": "^1.0.57",
|
|
32
37
|
"tsx": "^4.21.0",
|
|
33
38
|
"typescript": "~5.9.3"
|
|
34
39
|
}
|
package/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
|
-
/*
|
|
4
|
+
/* 733 tokens, 347 dark overrides */
|
|
5
5
|
|
|
6
6
|
:root {
|
|
7
7
|
--color-charts-red-300: #ea7158;
|
|
@@ -483,6 +483,8 @@
|
|
|
483
483
|
--space-xxl: 32px;
|
|
484
484
|
--space-xxxl: 40px;
|
|
485
485
|
--font-button-letter-spacing: 0.005em;
|
|
486
|
+
--motion-duration-rotate-180: var(--motion-duration-moderate);
|
|
487
|
+
--motion-easing-rotate-180: var(--motion-easing-ease-out-quart);
|
|
486
488
|
--space-button-horizontal: var(--space-scaled-l);
|
|
487
489
|
--color-text-button-inline-icon-default: var(--color-text-link-default);
|
|
488
490
|
--color-text-button-inline-icon-hover: var(--color-text-link-hover);
|
|
@@ -491,6 +493,7 @@
|
|
|
491
493
|
--space-button-inline-icon-focus-outline-gutter: 0px;
|
|
492
494
|
--space-button-icon-only-horizontal: 6px;
|
|
493
495
|
--space-button-modal-dismiss-vertical: var(--space-scaled-xxxs);
|
|
496
|
+
--shadow-dropdown: 0px 4px 20px 1px rgba(0, 7, 22, 0.10);
|
|
494
497
|
--motion-easing-show-quick: ease-out;
|
|
495
498
|
--color-border-dropdown-group: var(--color-border-dropdown-item-default);
|
|
496
499
|
--motion-duration-show-quick: var(--motion-duration-moderate);
|
|
@@ -507,6 +510,8 @@
|
|
|
507
510
|
--space-container-header-bottom: var(--space-scaled-xs);
|
|
508
511
|
--space-table-header-tools-full-page-bottom: 4px;
|
|
509
512
|
--size-control: 16px;
|
|
513
|
+
--color-background-code-editor-status-bar: var(--color-neutral-200);
|
|
514
|
+
--color-border-code-editor-default: var(--color-neutral-300);
|
|
510
515
|
--border-radius-code-editor: var(--border-radius-input);
|
|
511
516
|
--color-border-code-editor-ace-active-line-light-theme: var(--color-neutral-300);
|
|
512
517
|
--color-border-code-editor-ace-active-line-dark-theme: var(--color-neutral-600);
|
|
@@ -515,8 +520,6 @@
|
|
|
515
520
|
--color-background-code-editor-gutter-active-line-default: var(--color-neutral-600);
|
|
516
521
|
--color-text-code-editor-gutter-active-line: var(--color-white);
|
|
517
522
|
--color-background-code-editor-gutter-active-line-error: var(--color-text-status-error);
|
|
518
|
-
--color-border-code-editor-default: var(--color-neutral-300);
|
|
519
|
-
--color-background-code-editor-status-bar: var(--color-neutral-200);
|
|
520
523
|
--color-transparent: transparent;
|
|
521
524
|
--color-background-code-editor-pane-item-hover: var(--color-neutral-250);
|
|
522
525
|
--color-border-code-editor-pane-item-hover: var(--color-border-dropdown-item-hover);
|
|
@@ -528,6 +531,7 @@
|
|
|
528
531
|
--border-code-editor-status-divider-width: var(--border-divider-section-width);
|
|
529
532
|
--color-border-tabs-divider: var(--color-neutral-350);
|
|
530
533
|
--color-background-code-editor-loading: var(--color-neutral-100);
|
|
534
|
+
--shadow-panel: 0px 0px 0px 1px #b6bec9;
|
|
531
535
|
--color-text-form-label: var(--color-text-form-default);
|
|
532
536
|
--border-divider-list-width: 1px;
|
|
533
537
|
--border-container-top-width: 0px;
|
|
@@ -548,6 +552,8 @@
|
|
|
548
552
|
--space-panel-content-top: var(--space-scaled-l);
|
|
549
553
|
--space-panel-side-right: var(--space-scaled-xl);
|
|
550
554
|
--space-panel-content-bottom: var(--space-scaled-xxxl);
|
|
555
|
+
--motion-duration-rotate-90: var(--motion-duration-moderate);
|
|
556
|
+
--motion-easing-rotate-90: var(--motion-easing-ease-out-quart);
|
|
551
557
|
--color-text-expandable-section-default: var(--color-neutral-950);
|
|
552
558
|
--font-expandable-heading-size: var(--font-size-heading-s);
|
|
553
559
|
--space-expandable-section-icon-offset-top: var(--space-scaled-2x-xxs);
|
|
@@ -583,6 +589,60 @@
|
|
|
583
589
|
--color-text-input-placeholder-disabled: var(--color-text-input-disabled);
|
|
584
590
|
--border-control-invalid-focus-ring-shadow-spread: 2px;
|
|
585
591
|
--space-field-icon-offset: 36px;
|
|
592
|
+
--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
|
+
--space-filtering-token-operation-select-focus-outline-gutter: -5px;
|
|
610
|
+
--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
|
+
--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
|
+
--color-background-direction-button-default: var(--color-neutral-650);
|
|
618
|
+
--color-text-direction-button-default: var(--color-white);
|
|
619
|
+
--color-background-direction-button-hover: var(--color-neutral-700);
|
|
620
|
+
--color-background-direction-button-active: var(--color-neutral-750);
|
|
621
|
+
--color-background-direction-button-disabled: var(--color-neutral-250);
|
|
622
|
+
--color-text-direction-button-disabled: var(--color-text-interactive-disabled);
|
|
623
|
+
--color-border-dropdown-item-top: transparent;
|
|
624
|
+
--color-text-dropdown-footer: var(--color-text-form-secondary);
|
|
625
|
+
--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
|
+
--color-border-dropdown-item-selected: var(--color-border-item-selected);
|
|
629
|
+
--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);
|
|
586
646
|
--color-background-item-card: var(--color-background-card);
|
|
587
647
|
--shadow-item-card: var(--shadow-card);
|
|
588
648
|
--border-width-item-card: var(--border-width-card);
|
|
@@ -604,7 +664,6 @@
|
|
|
604
664
|
--color-text-link-button-normal-active: var(--color-text-button-normal-active);
|
|
605
665
|
--color-text-link-inverted-hover: var(--color-white);
|
|
606
666
|
--motion-duration-fast: 90ms;
|
|
607
|
-
--motion-duration-refresh-only-fast: 115ms;
|
|
608
667
|
--motion-duration-extra-slow: 270ms;
|
|
609
668
|
--color-background-modal-overlay: var(--color-grey-opaque-70);
|
|
610
669
|
--shadow-modal: var(--shadow-dropdown);
|
|
@@ -615,8 +674,6 @@
|
|
|
615
674
|
--color-shadow-default: var(--color-grey-transparent-heavy);
|
|
616
675
|
--shadow-popover: var(--shadow-dropdown);
|
|
617
676
|
--motion-duration-moderate: 135ms;
|
|
618
|
-
--color-text-dropdown-group-label: var(--color-text-group-label);
|
|
619
|
-
--color-text-column-header: var(--color-neutral-650);
|
|
620
677
|
--space-segmented-control-focus-outline-gutter: 6px;
|
|
621
678
|
--color-background-segment-wrapper: var(--color-background-container-content);
|
|
622
679
|
--space-panel-nav-left: 28px;
|
|
@@ -632,23 +689,15 @@
|
|
|
632
689
|
--color-background-slider-handle-error-active: var(--color-text-status-error);
|
|
633
690
|
--color-background-slider-handle-warning-default: var(--color-text-status-warning);
|
|
634
691
|
--color-background-slider-handle-warning-active: var(--color-text-status-warning);
|
|
635
|
-
--color-background-layout-panel-content: var(--color-background-container-content);
|
|
636
|
-
--color-background-layout-panel-hover: var(--color-neutral-250);
|
|
637
692
|
--border-panel-top-width: 1px;
|
|
638
693
|
--color-border-divider-panel-bottom: var(--color-border-divider-default);
|
|
639
|
-
--shadow-split-bottom: 0px -36px 36px -36px rgba(0, 7, 22, 0.10);
|
|
640
694
|
--shadow-split-side: -1px 0px 1px 0px #e9ebed, -36px 6px 36px -36px rgba(0, 7, 22, 0.10);
|
|
641
695
|
--border-panel-header-width: 1px;
|
|
642
696
|
--space-panel-split-top: var(--space-scaled-l);
|
|
643
|
-
--space-layout-toggle-diameter: 36px;
|
|
644
|
-
--space-layout-toggle-padding: var(--space-static-s);
|
|
645
697
|
--space-panel-split-bottom: var(--space-scaled-l);
|
|
646
|
-
--size-
|
|
698
|
+
--size-table-selection-horizontal: 40px;
|
|
647
699
|
--space-table-header-tools-bottom: 0px;
|
|
648
|
-
--space-table-horizontal: var(--space-container-horizontal);
|
|
649
700
|
--space-table-content-bottom: var(--space-xxs);
|
|
650
|
-
--size-table-selection-horizontal: 40px;
|
|
651
|
-
--color-background-table-header: var(--color-background-container-header);
|
|
652
701
|
--space-table-header-horizontal: 0px;
|
|
653
702
|
--space-table-embedded-header-top: 0px;
|
|
654
703
|
--space-table-footer-horizontal: var(--space-table-header-horizontal);
|
|
@@ -659,15 +708,11 @@
|
|
|
659
708
|
--space-tabs-focus-outline-gutter: -8px;
|
|
660
709
|
--font-tabs-disabled-weight: var(--font-wayfinding-link-active-weight);
|
|
661
710
|
--space-tabs-content-top: var(--space-scaled-s);
|
|
662
|
-
--motion-duration-transition-quick: var(--motion-duration-fast);
|
|
663
|
-
--motion-easing-transition-quick: linear;
|
|
664
711
|
--color-border-tiles-disabled: var(--color-background-tiles-disabled);
|
|
665
712
|
--color-background-tiles-disabled: var(--color-neutral-250);
|
|
666
713
|
--space-tile-gutter: var(--space-xl);
|
|
667
714
|
--color-background-toggle-default: var(--color-neutral-650);
|
|
668
715
|
--motion-easing-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
669
|
-
--color-text-disabled: var(--color-neutral-400);
|
|
670
|
-
--color-border-layout: var(--color-neutral-350);
|
|
671
716
|
--space-scaled-2x-xxxl: var(--space-xxxl);
|
|
672
717
|
--color-neutral-600: #656871;
|
|
673
718
|
--color-neutral-450: #a4a4ad;
|
|
@@ -675,8 +720,8 @@
|
|
|
675
720
|
--color-neutral-700: #333843;
|
|
676
721
|
--color-neutral-100: #f9f9fa;
|
|
677
722
|
--color-neutral-850: #161d26;
|
|
678
|
-
--color-neutral-300: #dedee3;
|
|
679
723
|
--color-neutral-800: #1b232d;
|
|
724
|
+
--color-neutral-300: #dedee3;
|
|
680
725
|
--color-neutral-950: #0f141a;
|
|
681
726
|
--color-neutral-500: #8c8c94;
|
|
682
727
|
--color-white: #ffffff;
|
|
@@ -690,12 +735,12 @@
|
|
|
690
735
|
--border-width-card-highlighted: var(--border-item-width);
|
|
691
736
|
--color-border-card-highlighted: var(--color-border-item-selected);
|
|
692
737
|
--color-grey-opaque-70: rgba(35, 43, 55, 0.7);
|
|
693
|
-
--shadow-dropdown: 0px 4px 20px 1px rgba(0, 7, 22, 0.10);
|
|
694
738
|
--color-grey-transparent-heavy: rgba(15, 20, 26, 0.12);
|
|
695
739
|
--color-grey-transparent: rgba(15, 20, 26, 0.12);
|
|
696
740
|
}
|
|
697
741
|
|
|
698
|
-
.awsui-dark-mode {
|
|
742
|
+
:root.awsui-dark-mode {
|
|
743
|
+
color-scheme: dark;
|
|
699
744
|
--color-charts-red-300: #d63f38;
|
|
700
745
|
--color-charts-red-400: #ed5958;
|
|
701
746
|
--color-charts-red-500: #fe6e73;
|
|
@@ -992,62 +1037,55 @@
|
|
|
992
1037
|
--color-dropzone-border-hover: #75cfff;
|
|
993
1038
|
--color-tree-view-connector-line: #dedee3;
|
|
994
1039
|
--shadow-container-active: 0px 1px 1px 1px #192534, 0px 6px 36px #00040c;
|
|
995
|
-
--motion-duration-slow: 0ms;
|
|
996
|
-
--space-dark-header-overlap-distance: 32px;
|
|
997
|
-
--space-grid-gutter: var(--space-m);
|
|
998
|
-
--motion-duration-refresh-only-medium: 0ms;
|
|
999
1040
|
--color-text-small: var(--color-neutral-450);
|
|
1000
1041
|
--color-background-inline-code: rgba(255, 255, 255, 0.1);
|
|
1001
|
-
--
|
|
1042
|
+
--shadow-dropdown: 0px 4px 20px 1px rgba(0, 4, 12, 1);
|
|
1002
1043
|
--color-text-calendar-month: var(--color-neutral-450);
|
|
1003
1044
|
--color-background-calendar-current-date: var(--color-neutral-700);
|
|
1004
1045
|
--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);
|
|
1005
1048
|
--color-background-code-editor-gutter-default: var(--color-neutral-800);
|
|
1006
1049
|
--color-text-code-editor-gutter-default: var(--color-neutral-300);
|
|
1007
1050
|
--color-background-code-editor-gutter-active-line-default: var(--color-neutral-500);
|
|
1008
1051
|
--color-text-code-editor-gutter-active-line: var(--color-neutral-950);
|
|
1009
|
-
--color-border-code-editor-default: var(--color-neutral-600);
|
|
1010
|
-
--color-background-code-editor-status-bar: var(--color-neutral-800);
|
|
1011
1052
|
--color-background-code-editor-pane-item-hover: var(--color-neutral-700);
|
|
1012
1053
|
--color-text-code-editor-tab-button-error: var(--color-neutral-950);
|
|
1013
1054
|
--color-text-code-editor-status-bar-disabled: var(--color-neutral-600);
|
|
1014
1055
|
--color-border-tabs-divider: var(--color-neutral-650);
|
|
1015
1056
|
--color-background-code-editor-loading: var(--color-neutral-800);
|
|
1057
|
+
--shadow-panel: 0px 0px 0px 1px #414d5c;
|
|
1016
1058
|
--shadow-container: 0px 1px 8px 2px rgba(0, 7, 22, 0.6);
|
|
1017
1059
|
--shadow-sticky-embedded: 0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1);
|
|
1018
1060
|
--shadow-sticky: 0px 4px 8px 1px rgba(0, 7, 22, 0.5);
|
|
1019
1061
|
--color-text-expandable-section-default: var(--color-neutral-300);
|
|
1020
|
-
--font-expandable-heading-size: 14px;
|
|
1021
1062
|
--shadow-panel-toggle: 0px 6px 12px 1px rgba(0, 7, 22, 1);
|
|
1022
1063
|
--shadow-flash-sticky: 0px 4px 8px rgba(0, 7, 22, 0.5);
|
|
1023
|
-
--space-scaled-2x-xxs: var(--space-none);
|
|
1024
|
-
--size-vertical-input: 28px;
|
|
1025
1064
|
--color-text-inverted: var(--color-neutral-950);
|
|
1026
1065
|
--color-text-icon-subtle: var(--color-neutral-400);
|
|
1027
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
|
+
--color-background-direction-button-disabled: var(--color-neutral-750);
|
|
1072
|
+
--color-text-dropdown-item-secondary-hover: var(--color-neutral-300);
|
|
1073
|
+
--color-text-disabled: var(--color-neutral-600);
|
|
1074
|
+
--color-border-cell-shaded: var(--color-neutral-700);
|
|
1075
|
+
--shadow-sticky-column-last: 0px 4px 8px 1px rgba(0, 7, 22, 0.5);
|
|
1076
|
+
--shadow-sticky-column-first: 0px 4px 8px 1px rgba(0, 7, 22, 0.5);
|
|
1077
|
+
--color-text-disabled-inline-edit: var(--color-neutral-400);
|
|
1078
|
+
--color-text-column-header: var(--color-neutral-400);
|
|
1079
|
+
--color-border-divider-interactive-default: var(--color-neutral-300);
|
|
1080
|
+
--color-border-divider-active: var(--color-neutral-100);
|
|
1081
|
+
--color-border-tutorial: var(--color-neutral-650);
|
|
1028
1082
|
--color-text-link-inverted-hover: var(--color-text-notification-yellow);
|
|
1029
|
-
--motion-duration-fast: 0ms;
|
|
1030
|
-
--motion-duration-refresh-only-fast: 0ms;
|
|
1031
|
-
--motion-duration-extra-slow: 0ms;
|
|
1032
1083
|
--color-text-pagination-page-number-default: var(--color-neutral-400);
|
|
1033
|
-
--motion-duration-moderate: 0ms;
|
|
1034
|
-
--color-text-column-header: var(--color-neutral-400);
|
|
1035
|
-
--space-scaled-2x-l: var(--space-s);
|
|
1036
|
-
--space-scaled-2x-m: var(--space-xs);
|
|
1037
|
-
--space-scaled-2x-xl: var(--space-m);
|
|
1038
1084
|
--color-background-slider-handle-ring: var(--color-neutral-850);
|
|
1039
|
-
--color-background-layout-panel-hover: var(--color-neutral-700);
|
|
1040
|
-
--shadow-split-bottom: 0px -36px 36px -36px rgba(0, 7, 22, 1);
|
|
1041
1085
|
--shadow-split-side: -1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1);
|
|
1042
|
-
--size-vertical-panel-icon-offset: 13px;
|
|
1043
1086
|
--color-background-tiles-disabled: var(--color-neutral-800);
|
|
1044
|
-
--space-tile-gutter: var(--space-m);
|
|
1045
1087
|
--color-background-toggle-default: var(--color-neutral-500);
|
|
1046
|
-
--color-text-disabled: var(--color-neutral-600);
|
|
1047
|
-
--color-border-layout: var(--color-neutral-650);
|
|
1048
|
-
--space-scaled-2x-xxxl: var(--space-xl);
|
|
1049
1088
|
--color-grey-opaque-70: rgba(15, 20, 26, 0.7);
|
|
1050
|
-
--shadow-dropdown: 0px 4px 20px 1px rgba(0, 4, 12, 1);
|
|
1051
1089
|
--color-grey-transparent-heavy: rgba(15, 20, 26, 1);
|
|
1052
1090
|
--color-grey-transparent: rgba(15, 20, 26, 1);
|
|
1053
1091
|
}
|