@cumulus-ui/design-tokens 0.3.1 → 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.
Files changed (4) hide show
  1. package/index.d.ts +15 -7
  2. package/index.js +15 -7
  3. package/package.json +6 -1
  4. package/tokens.css +24 -32
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;
@@ -580,12 +586,13 @@ export declare const colorTextInputPlaceholderDisabled: string;
580
586
  export declare const borderControlInvalidFocusRingShadowSpread: string;
581
587
  export declare const spaceFieldIconOffset: string;
582
588
  export declare const colorTextControlDisabled: string;
583
- export declare const shadowPanel: string;
584
589
  export declare const colorBackgroundLayoutPanelContent: string;
585
590
  export declare const colorBackgroundLayoutPanelHover: string;
586
591
  export declare const colorBorderLayout: string;
587
592
  export declare const colorBackgroundLayoutMobilePanel: string;
588
593
  export declare const sizeVerticalPanelIconOffset: string;
594
+ export declare const motionDurationRefreshOnlySlow: string;
595
+ export declare const colorGapGlobalDrawer: string;
589
596
  export declare const spaceLayoutTogglePadding: string;
590
597
  export declare const spaceLayoutToggleDiameter: string;
591
598
  export declare const motionDurationRefreshOnlyFast: string;
@@ -601,9 +608,10 @@ export declare const borderLineChartWidth: string;
601
608
  export declare const motionDurationTransitionQuick: string;
602
609
  export declare const motionEasingTransitionQuick: string;
603
610
  export declare const colorBorderControlChecked: string;
611
+ export declare const spaceCalendarGridSelectedFocusOutlineGutter: string;
612
+ export declare const colorBackgroundDropdownItemSelected: string;
604
613
  export declare const colorBackgroundDirectionButtonDefault: string;
605
614
  export declare const colorTextDirectionButtonDefault: string;
606
- export declare const shadowDropdown: string;
607
615
  export declare const colorBackgroundDirectionButtonHover: string;
608
616
  export declare const colorBackgroundDirectionButtonActive: string;
609
617
  export declare const colorBackgroundDirectionButtonDisabled: string;
@@ -613,7 +621,6 @@ export declare const colorTextDropdownFooter: string;
613
621
  export declare const colorTextDropdownItemSecondaryHover: string;
614
622
  export declare const spaceFilteringTokenDismissButtonFocusOutlineGutter: string;
615
623
  export declare const colorTextDisabled: string;
616
- export declare const colorBackgroundDropdownItemSelected: string;
617
624
  export declare const colorBorderDropdownItemSelected: string;
618
625
  export declare const borderDropdownVirtualOffsetWidth: string;
619
626
  export declare const colorBorderCellShaded: string;
@@ -631,6 +638,7 @@ export declare const colorTextColumnSortingIcon: string;
631
638
  export declare const spaceTableHeaderFocusOutlineGutter: string;
632
639
  export declare const colorBorderDividerInteractiveDefault: string;
633
640
  export declare const colorBorderDividerActive: string;
641
+ export declare const colorBorderTutorial: string;
634
642
  export declare const colorBackgroundItemCard: string;
635
643
  export declare const shadowItemCard: string;
636
644
  export declare const borderWidthItemCard: string;
@@ -683,9 +691,9 @@ export declare const shadowSplitSide: string;
683
691
  export declare const borderPanelHeaderWidth: string;
684
692
  export declare const spacePanelSplitTop: string;
685
693
  export declare const spacePanelSplitBottom: string;
694
+ export declare const sizeTableSelectionHorizontal: string;
686
695
  export declare const spaceTableHeaderToolsBottom: string;
687
696
  export declare const spaceTableContentBottom: string;
688
- export declare const sizeTableSelectionHorizontal: string;
689
697
  export declare const spaceTableHeaderHorizontal: string;
690
698
  export declare const spaceTableEmbeddedHeaderTop: string;
691
699
  export declare const spaceTableFooterHorizontal: string;
@@ -708,8 +716,8 @@ export declare const colorNeutral200: string;
708
716
  export declare const colorNeutral700: string;
709
717
  export declare const colorNeutral100: string;
710
718
  export declare const colorNeutral850: string;
711
- export declare const colorNeutral300: string;
712
719
  export declare const colorNeutral800: string;
720
+ export declare const colorNeutral300: string;
713
721
  export declare const colorNeutral950: string;
714
722
  export declare const colorNeutral500: string;
715
723
  export declare const colorWhite: 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)";
@@ -580,12 +586,13 @@ export const colorTextInputPlaceholderDisabled = "var(--color-text-input-placeho
580
586
  export const borderControlInvalidFocusRingShadowSpread = "var(--border-control-invalid-focus-ring-shadow-spread)";
581
587
  export const spaceFieldIconOffset = "var(--space-field-icon-offset)";
582
588
  export const colorTextControlDisabled = "var(--color-text-control-disabled)";
583
- export const shadowPanel = "var(--shadow-panel)";
584
589
  export const colorBackgroundLayoutPanelContent = "var(--color-background-layout-panel-content)";
585
590
  export const colorBackgroundLayoutPanelHover = "var(--color-background-layout-panel-hover)";
586
591
  export const colorBorderLayout = "var(--color-border-layout)";
587
592
  export const colorBackgroundLayoutMobilePanel = "var(--color-background-layout-mobile-panel)";
588
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)";
589
596
  export const spaceLayoutTogglePadding = "var(--space-layout-toggle-padding)";
590
597
  export const spaceLayoutToggleDiameter = "var(--space-layout-toggle-diameter)";
591
598
  export const motionDurationRefreshOnlyFast = "var(--motion-duration-refresh-only-fast)";
@@ -601,9 +608,10 @@ export const borderLineChartWidth = "var(--border-line-chart-width)";
601
608
  export const motionDurationTransitionQuick = "var(--motion-duration-transition-quick)";
602
609
  export const motionEasingTransitionQuick = "var(--motion-easing-transition-quick)";
603
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)";
604
613
  export const colorBackgroundDirectionButtonDefault = "var(--color-background-direction-button-default)";
605
614
  export const colorTextDirectionButtonDefault = "var(--color-text-direction-button-default)";
606
- export const shadowDropdown = "var(--shadow-dropdown)";
607
615
  export const colorBackgroundDirectionButtonHover = "var(--color-background-direction-button-hover)";
608
616
  export const colorBackgroundDirectionButtonActive = "var(--color-background-direction-button-active)";
609
617
  export const colorBackgroundDirectionButtonDisabled = "var(--color-background-direction-button-disabled)";
@@ -613,7 +621,6 @@ export const colorTextDropdownFooter = "var(--color-text-dropdown-footer)";
613
621
  export const colorTextDropdownItemSecondaryHover = "var(--color-text-dropdown-item-secondary-hover)";
614
622
  export const spaceFilteringTokenDismissButtonFocusOutlineGutter = "var(--space-filtering-token-dismiss-button-focus-outline-gutter)";
615
623
  export const colorTextDisabled = "var(--color-text-disabled)";
616
- export const colorBackgroundDropdownItemSelected = "var(--color-background-dropdown-item-selected)";
617
624
  export const colorBorderDropdownItemSelected = "var(--color-border-dropdown-item-selected)";
618
625
  export const borderDropdownVirtualOffsetWidth = "var(--border-dropdown-virtual-offset-width)";
619
626
  export const colorBorderCellShaded = "var(--color-border-cell-shaded)";
@@ -631,6 +638,7 @@ export const colorTextColumnSortingIcon = "var(--color-text-column-sorting-icon)
631
638
  export const spaceTableHeaderFocusOutlineGutter = "var(--space-table-header-focus-outline-gutter)";
632
639
  export const colorBorderDividerInteractiveDefault = "var(--color-border-divider-interactive-default)";
633
640
  export const colorBorderDividerActive = "var(--color-border-divider-active)";
641
+ export const colorBorderTutorial = "var(--color-border-tutorial)";
634
642
  export const colorBackgroundItemCard = "var(--color-background-item-card)";
635
643
  export const shadowItemCard = "var(--shadow-item-card)";
636
644
  export const borderWidthItemCard = "var(--border-width-item-card)";
@@ -683,9 +691,9 @@ export const shadowSplitSide = "var(--shadow-split-side)";
683
691
  export const borderPanelHeaderWidth = "var(--border-panel-header-width)";
684
692
  export const spacePanelSplitTop = "var(--space-panel-split-top)";
685
693
  export const spacePanelSplitBottom = "var(--space-panel-split-bottom)";
694
+ export const sizeTableSelectionHorizontal = "var(--size-table-selection-horizontal)";
686
695
  export const spaceTableHeaderToolsBottom = "var(--space-table-header-tools-bottom)";
687
696
  export const spaceTableContentBottom = "var(--space-table-content-bottom)";
688
- export const sizeTableSelectionHorizontal = "var(--size-table-selection-horizontal)";
689
697
  export const spaceTableHeaderHorizontal = "var(--space-table-header-horizontal)";
690
698
  export const spaceTableEmbeddedHeaderTop = "var(--space-table-embedded-header-top)";
691
699
  export const spaceTableFooterHorizontal = "var(--space-table-footer-horizontal)";
@@ -708,8 +716,8 @@ export const colorNeutral200 = "var(--color-neutral-200)";
708
716
  export const colorNeutral700 = "var(--color-neutral-700)";
709
717
  export const colorNeutral100 = "var(--color-neutral-100)";
710
718
  export const colorNeutral850 = "var(--color-neutral-850)";
711
- export const colorNeutral300 = "var(--color-neutral-300)";
712
719
  export const colorNeutral800 = "var(--color-neutral-800)";
720
+ export const colorNeutral300 = "var(--color-neutral-300)";
713
721
  export const colorNeutral950 = "var(--color-neutral-950)";
714
722
  export const colorNeutral500 = "var(--color-neutral-500)";
715
723
  export const colorWhite = "var(--color-white)";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cumulus-ui/design-tokens",
3
- "version": "0.3.1",
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
- /* 725 tokens, 364 dark overrides */
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);
@@ -584,12 +590,13 @@
584
590
  --border-control-invalid-focus-ring-shadow-spread: 2px;
585
591
  --space-field-icon-offset: 36px;
586
592
  --color-text-control-disabled: var(--color-text-interactive-disabled);
587
- --shadow-panel: 0px 0px 0px 1px #b6bec9;
588
593
  --color-background-layout-panel-content: var(--color-background-container-content);
589
594
  --color-background-layout-panel-hover: var(--color-neutral-250);
590
595
  --color-border-layout: var(--color-neutral-350);
591
596
  --color-background-layout-mobile-panel: var(--color-neutral-950);
592
597
  --size-vertical-panel-icon-offset: 15px;
598
+ --motion-duration-refresh-only-slow: 250ms;
599
+ --color-gap-global-drawer: var(--color-neutral-250);
593
600
  --space-layout-toggle-padding: var(--space-static-s);
594
601
  --space-layout-toggle-diameter: 36px;
595
602
  --motion-duration-refresh-only-fast: 115ms;
@@ -605,9 +612,10 @@
605
612
  --motion-duration-transition-quick: var(--motion-duration-fast);
606
613
  --motion-easing-transition-quick: linear;
607
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);
608
617
  --color-background-direction-button-default: var(--color-neutral-650);
609
618
  --color-text-direction-button-default: var(--color-white);
610
- --shadow-dropdown: 0px 4px 20px 1px rgba(0, 7, 22, 0.10);
611
619
  --color-background-direction-button-hover: var(--color-neutral-700);
612
620
  --color-background-direction-button-active: var(--color-neutral-750);
613
621
  --color-background-direction-button-disabled: var(--color-neutral-250);
@@ -617,7 +625,6 @@
617
625
  --color-text-dropdown-item-secondary-hover: var(--color-neutral-600);
618
626
  --space-filtering-token-dismiss-button-focus-outline-gutter: -5px;
619
627
  --color-text-disabled: var(--color-neutral-400);
620
- --color-background-dropdown-item-selected: var(--color-background-item-selected);
621
628
  --color-border-dropdown-item-selected: var(--color-border-item-selected);
622
629
  --border-dropdown-virtual-offset-width: 2px;
623
630
  --color-border-cell-shaded: var(--color-neutral-300);
@@ -635,6 +642,7 @@
635
642
  --space-table-header-focus-outline-gutter: 0px;
636
643
  --color-border-divider-interactive-default: var(--color-neutral-500);
637
644
  --color-border-divider-active: var(--color-neutral-950);
645
+ --color-border-tutorial: var(--color-neutral-300);
638
646
  --color-background-item-card: var(--color-background-card);
639
647
  --shadow-item-card: var(--shadow-card);
640
648
  --border-width-item-card: var(--border-width-card);
@@ -687,9 +695,9 @@
687
695
  --border-panel-header-width: 1px;
688
696
  --space-panel-split-top: var(--space-scaled-l);
689
697
  --space-panel-split-bottom: var(--space-scaled-l);
698
+ --size-table-selection-horizontal: 40px;
690
699
  --space-table-header-tools-bottom: 0px;
691
700
  --space-table-content-bottom: var(--space-xxs);
692
- --size-table-selection-horizontal: 40px;
693
701
  --space-table-header-horizontal: 0px;
694
702
  --space-table-embedded-header-top: 0px;
695
703
  --space-table-footer-horizontal: var(--space-table-header-horizontal);
@@ -712,8 +720,8 @@
712
720
  --color-neutral-700: #333843;
713
721
  --color-neutral-100: #f9f9fa;
714
722
  --color-neutral-850: #161d26;
715
- --color-neutral-300: #dedee3;
716
723
  --color-neutral-800: #1b232d;
724
+ --color-neutral-300: #dedee3;
717
725
  --color-neutral-950: #0f141a;
718
726
  --color-neutral-500: #8c8c94;
719
727
  --color-white: #ffffff;
@@ -731,7 +739,8 @@
731
739
  --color-grey-transparent: rgba(15, 20, 26, 0.12);
732
740
  }
733
741
 
734
- .awsui-dark-mode {
742
+ :root.awsui-dark-mode {
743
+ color-scheme: dark;
735
744
  --color-charts-red-300: #d63f38;
736
745
  --color-charts-red-400: #ed5958;
737
746
  --color-charts-red-500: #fe6e73;
@@ -1028,46 +1037,37 @@
1028
1037
  --color-dropzone-border-hover: #75cfff;
1029
1038
  --color-tree-view-connector-line: #dedee3;
1030
1039
  --shadow-container-active: 0px 1px 1px 1px #192534, 0px 6px 36px #00040c;
1031
- --motion-duration-slow: 0ms;
1032
- --space-dark-header-overlap-distance: 32px;
1033
- --space-grid-gutter: var(--space-m);
1034
- --motion-duration-refresh-only-medium: 0ms;
1035
1040
  --color-text-small: var(--color-neutral-450);
1036
1041
  --color-background-inline-code: rgba(255, 255, 255, 0.1);
1037
- --space-button-icon-only-horizontal: var(--space-xxs);
1042
+ --shadow-dropdown: 0px 4px 20px 1px rgba(0, 4, 12, 1);
1038
1043
  --color-text-calendar-month: var(--color-neutral-450);
1039
1044
  --color-background-calendar-current-date: var(--color-neutral-700);
1040
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);
1041
1048
  --color-background-code-editor-gutter-default: var(--color-neutral-800);
1042
1049
  --color-text-code-editor-gutter-default: var(--color-neutral-300);
1043
1050
  --color-background-code-editor-gutter-active-line-default: var(--color-neutral-500);
1044
1051
  --color-text-code-editor-gutter-active-line: var(--color-neutral-950);
1045
- --color-border-code-editor-default: var(--color-neutral-600);
1046
- --color-background-code-editor-status-bar: var(--color-neutral-800);
1047
1052
  --color-background-code-editor-pane-item-hover: var(--color-neutral-700);
1048
1053
  --color-text-code-editor-tab-button-error: var(--color-neutral-950);
1049
1054
  --color-text-code-editor-status-bar-disabled: var(--color-neutral-600);
1050
1055
  --color-border-tabs-divider: var(--color-neutral-650);
1051
1056
  --color-background-code-editor-loading: var(--color-neutral-800);
1057
+ --shadow-panel: 0px 0px 0px 1px #414d5c;
1052
1058
  --shadow-container: 0px 1px 8px 2px rgba(0, 7, 22, 0.6);
1053
1059
  --shadow-sticky-embedded: 0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1);
1054
1060
  --shadow-sticky: 0px 4px 8px 1px rgba(0, 7, 22, 0.5);
1055
1061
  --color-text-expandable-section-default: var(--color-neutral-300);
1056
- --font-expandable-heading-size: 14px;
1057
1062
  --shadow-panel-toggle: 0px 6px 12px 1px rgba(0, 7, 22, 1);
1058
1063
  --shadow-flash-sticky: 0px 4px 8px rgba(0, 7, 22, 0.5);
1059
- --space-scaled-2x-xxs: var(--space-none);
1060
- --size-vertical-input: 28px;
1061
1064
  --color-text-inverted: var(--color-neutral-950);
1062
1065
  --color-text-icon-subtle: var(--color-neutral-400);
1063
1066
  --color-background-badge-icon: var(--color-error-400);
1064
- --shadow-panel: 0px 0px 0px 1px #414d5c;
1065
1067
  --color-background-layout-panel-hover: var(--color-neutral-700);
1066
1068
  --color-border-layout: var(--color-neutral-650);
1067
- --size-vertical-panel-icon-offset: 13px;
1068
- --motion-duration-refresh-only-fast: 0ms;
1069
+ --color-gap-global-drawer: var(--color-neutral-950);
1069
1070
  --shadow-split-bottom: 0px -36px 36px -36px rgba(0, 7, 22, 1);
1070
- --shadow-dropdown: 0px 4px 20px 1px rgba(0, 4, 12, 1);
1071
1071
  --color-background-direction-button-disabled: var(--color-neutral-750);
1072
1072
  --color-text-dropdown-item-secondary-hover: var(--color-neutral-300);
1073
1073
  --color-text-disabled: var(--color-neutral-600);
@@ -1076,23 +1076,15 @@
1076
1076
  --shadow-sticky-column-first: 0px 4px 8px 1px rgba(0, 7, 22, 0.5);
1077
1077
  --color-text-disabled-inline-edit: var(--color-neutral-400);
1078
1078
  --color-text-column-header: var(--color-neutral-400);
1079
- --space-table-header-focus-outline-gutter: -1px;
1080
1079
  --color-border-divider-interactive-default: var(--color-neutral-300);
1081
1080
  --color-border-divider-active: var(--color-neutral-100);
1081
+ --color-border-tutorial: var(--color-neutral-650);
1082
1082
  --color-text-link-inverted-hover: var(--color-text-notification-yellow);
1083
- --motion-duration-fast: 0ms;
1084
- --motion-duration-extra-slow: 0ms;
1085
1083
  --color-text-pagination-page-number-default: var(--color-neutral-400);
1086
- --motion-duration-moderate: 0ms;
1087
- --space-scaled-2x-l: var(--space-s);
1088
- --space-scaled-2x-m: var(--space-xs);
1089
- --space-scaled-2x-xl: var(--space-m);
1090
1084
  --color-background-slider-handle-ring: var(--color-neutral-850);
1091
1085
  --shadow-split-side: -1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1);
1092
1086
  --color-background-tiles-disabled: var(--color-neutral-800);
1093
- --space-tile-gutter: var(--space-m);
1094
1087
  --color-background-toggle-default: var(--color-neutral-500);
1095
- --space-scaled-2x-xxxl: var(--space-xl);
1096
1088
  --color-grey-opaque-70: rgba(15, 20, 26, 0.7);
1097
1089
  --color-grey-transparent-heavy: rgba(15, 20, 26, 1);
1098
1090
  --color-grey-transparent: rgba(15, 20, 26, 1);