From c4f6a21fe4ac1f4ba2f653cc5de4726c64f23f12 Mon Sep 17 00:00:00 2001 From: Jessica Kuelz <15003460+jkuelz@users.noreply.github.com> Date: Tue, 16 Jun 2026 18:39:09 -0700 Subject: [PATCH 1/4] refactor: SideNav styles to support background highlight and themeable sizes --- .../__snapshots__/themes.test.ts.snap | 48 +- .../__snapshots__/design-tokens.test.ts.snap | 672 ++++++++++++++++++ .../test-utils-selectors.test.tsx.snap | 2 +- src/side-navigation/parts.tsx | 2 +- src/side-navigation/styles.scss | 204 ++++-- src/test-utils/dom/side-navigation/index.ts | 2 +- style-dictionary/one-theme/colors.ts | 4 + style-dictionary/utils/token-names.ts | 7 +- style-dictionary/visual-refresh/colors.ts | 2 + .../visual-refresh/metadata/colors.ts | 12 + .../visual-refresh/metadata/sizes.ts | 5 + .../visual-refresh/metadata/spacing.ts | 10 + style-dictionary/visual-refresh/sizes.ts | 1 + style-dictionary/visual-refresh/spacing.ts | 4 +- 14 files changed, 919 insertions(+), 56 deletions(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 7ae13d1bf1..a14adf182d 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -164,6 +164,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-background-segment-disabled": "#ffffff", "color-background-segment-hover": "#fafafa", "color-background-segment-wrapper": "#ffffff", + "color-background-side-navigation-item-active": "transparent", "color-background-skeleton": "#eaeded", "color-background-skeleton-wave": "#f6f6f9", "color-background-slider-handle-active": "#0a4a74", @@ -635,6 +636,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-text-segment-active": "#ffffff", "color-text-segment-default": "#545b64", "color-text-segment-hover": "#16191f", + "color-text-side-navigation-item-active": "#0073bb", "color-text-small": "#687078", "color-text-status-error": "#d13212", "color-text-status-inactive": "#687078", @@ -782,6 +784,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "size-icon-large": "48px", "size-icon-medium": "16px", "size-icon-normal": "16px", + "size-side-navigation-item-height": "24px", "size-table-selection-horizontal": "54px", "size-vertical-input": "28px", "size-vertical-panel-icon-offset": "13px", @@ -868,6 +871,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "space-scaled-xxxl": "32px", "space-scaled-xxxs": "0px", "space-segmented-control-focus-outline-gutter": "3px", + "space-side-navigation-item-collapsed-gap": "8px", + "space-side-navigation-item-gap": "0px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", @@ -1065,6 +1070,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-background-segment-disabled": "#2a2e33", "color-background-segment-hover": "#21252c", "color-background-segment-wrapper": "#2a2e33", + "color-background-side-navigation-item-active": "transparent", "color-background-skeleton": "#2a2e33", "color-background-skeleton-wave": "#414750", "color-background-slider-handle-active": "#44b9d6", @@ -1536,6 +1542,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-text-segment-active": "#1a2029", "color-text-segment-default": "#d5dbdb", "color-text-segment-hover": "#fafafa", + "color-text-side-navigation-item-active": "#44b9d6", "color-text-small": "#95a5a6", "color-text-status-error": "#ff5d64", "color-text-status-inactive": "#95a5a6", @@ -1683,6 +1690,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "size-icon-large": "48px", "size-icon-medium": "16px", "size-icon-normal": "16px", + "size-side-navigation-item-height": "28px", "size-table-selection-horizontal": "54px", "size-vertical-input": "32px", "size-vertical-panel-icon-offset": "15px", @@ -1769,6 +1777,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "space-scaled-xxxl": "40px", "space-scaled-xxxs": "2px", "space-segmented-control-focus-outline-gutter": "3px", + "space-side-navigation-item-collapsed-gap": "8px", + "space-side-navigation-item-gap": "0px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", @@ -1966,6 +1976,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-background-segment-disabled": "#ffffff", "color-background-segment-hover": "#fafafa", "color-background-segment-wrapper": "#ffffff", + "color-background-side-navigation-item-active": "transparent", "color-background-skeleton": "#eaeded", "color-background-skeleton-wave": "#f6f6f9", "color-background-slider-handle-active": "#0a4a74", @@ -2437,6 +2448,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-text-segment-active": "#ffffff", "color-text-segment-default": "#545b64", "color-text-segment-hover": "#16191f", + "color-text-side-navigation-item-active": "#0073bb", "color-text-small": "#687078", "color-text-status-error": "#d13212", "color-text-status-inactive": "#687078", @@ -2584,6 +2596,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "size-icon-large": "48px", "size-icon-medium": "16px", "size-icon-normal": "16px", + "size-side-navigation-item-height": "28px", "size-table-selection-horizontal": "54px", "size-vertical-input": "32px", "size-vertical-panel-icon-offset": "15px", @@ -2670,6 +2683,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "space-scaled-xxxl": "40px", "space-scaled-xxxs": "2px", "space-segmented-control-focus-outline-gutter": "3px", + "space-side-navigation-item-collapsed-gap": "8px", + "space-side-navigation-item-gap": "0px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", @@ -2867,6 +2882,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-background-segment-disabled": "#ffffff", "color-background-segment-hover": "#fafafa", "color-background-segment-wrapper": "#ffffff", + "color-background-side-navigation-item-active": "transparent", "color-background-skeleton": "#eaeded", "color-background-skeleton-wave": "#f6f6f9", "color-background-slider-handle-active": "#0a4a74", @@ -3338,6 +3354,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-text-segment-active": "#ffffff", "color-text-segment-default": "#545b64", "color-text-segment-hover": "#16191f", + "color-text-side-navigation-item-active": "#0073bb", "color-text-small": "#687078", "color-text-status-error": "#d13212", "color-text-status-inactive": "#687078", @@ -3485,6 +3502,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "size-icon-large": "48px", "size-icon-medium": "16px", "size-icon-normal": "16px", + "size-side-navigation-item-height": "28px", "size-table-selection-horizontal": "54px", "size-vertical-input": "32px", "size-vertical-panel-icon-offset": "15px", @@ -3571,6 +3589,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "space-scaled-xxxl": "40px", "space-scaled-xxxs": "2px", "space-segmented-control-focus-outline-gutter": "3px", + "space-side-navigation-item-collapsed-gap": "8px", + "space-side-navigation-item-gap": "0px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", @@ -3768,6 +3788,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-background-segment-disabled": "#ffffff", "color-background-segment-hover": "#f0fbff", "color-background-segment-wrapper": "#ffffff", + "color-background-side-navigation-item-active": "transparent", "color-background-skeleton": "#ebebf0", "color-background-skeleton-wave": "#f6f6f9", "color-background-slider-handle-active": "#004a9e", @@ -4239,6 +4260,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-text-segment-active": "#ffffff", "color-text-segment-default": "#424650", "color-text-segment-hover": "#002b66", + "color-text-side-navigation-item-active": "#006ce0", "color-text-small": "#656871", "color-text-status-error": "#db0000", "color-text-status-inactive": "#656871", @@ -4386,6 +4408,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "size-icon-large": "48px", "size-icon-medium": "20px", "size-icon-normal": "16px", + "size-side-navigation-item-height": "28px", "size-table-selection-horizontal": "40px", "size-vertical-input": "32px", "size-vertical-panel-icon-offset": "15px", @@ -4446,7 +4469,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "space-none": "0px", "space-option-padding-horizontal": "20px", "space-option-padding-vertical": "4px", - "space-panel-content-bottom": "40px", + "space-panel-content-bottom": "20px", "space-panel-content-top": "20px", "space-panel-divider-margin-horizontal": "8px", "space-panel-header-vertical": "20px", @@ -4472,6 +4495,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "space-scaled-xxxl": "40px", "space-scaled-xxxs": "2px", "space-segmented-control-focus-outline-gutter": "6px", + "space-side-navigation-item-collapsed-gap": "8px", + "space-side-navigation-item-gap": "0px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", @@ -4669,6 +4694,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-segment-disabled": "#ffffff", "color-background-segment-hover": "#f0fbff", "color-background-segment-wrapper": "#ffffff", + "color-background-side-navigation-item-active": "transparent", "color-background-skeleton": "#ebebf0", "color-background-skeleton-wave": "#f6f6f9", "color-background-slider-handle-active": "#004a9e", @@ -5140,6 +5166,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-segment-active": "#ffffff", "color-text-segment-default": "#424650", "color-text-segment-hover": "#002b66", + "color-text-side-navigation-item-active": "#006ce0", "color-text-small": "#656871", "color-text-status-error": "#db0000", "color-text-status-inactive": "#656871", @@ -5287,6 +5314,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "size-icon-large": "48px", "size-icon-medium": "20px", "size-icon-normal": "16px", + "size-side-navigation-item-height": "24px", "size-table-selection-horizontal": "40px", "size-vertical-input": "28px", "size-vertical-panel-icon-offset": "13px", @@ -5347,7 +5375,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-none": "0px", "space-option-padding-horizontal": "20px", "space-option-padding-vertical": "4px", - "space-panel-content-bottom": "32px", + "space-panel-content-bottom": "16px", "space-panel-content-top": "16px", "space-panel-divider-margin-horizontal": "8px", "space-panel-header-vertical": "16px", @@ -5373,6 +5401,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-scaled-xxxl": "32px", "space-scaled-xxxs": "0px", "space-segmented-control-focus-outline-gutter": "6px", + "space-side-navigation-item-collapsed-gap": "8px", + "space-side-navigation-item-gap": "0px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", @@ -5570,6 +5600,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-segment-disabled": "#0f141a", "color-background-segment-hover": "#1b232d", "color-background-segment-wrapper": "#0f141a", + "color-background-side-navigation-item-active": "transparent", "color-background-skeleton": "#232b37", "color-background-skeleton-wave": "#333843", "color-background-slider-handle-active": "#75cfff", @@ -6041,6 +6072,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-segment-active": "#0f141a", "color-text-segment-default": "#dedee3", "color-text-segment-hover": "#75cfff", + "color-text-side-navigation-item-active": "#42b4ff", "color-text-small": "#a4a4ad", "color-text-status-error": "#ff7a7a", "color-text-status-inactive": "#a4a4ad", @@ -6188,6 +6220,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "size-icon-large": "48px", "size-icon-medium": "20px", "size-icon-normal": "16px", + "size-side-navigation-item-height": "28px", "size-table-selection-horizontal": "40px", "size-vertical-input": "32px", "size-vertical-panel-icon-offset": "15px", @@ -6248,7 +6281,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-none": "0px", "space-option-padding-horizontal": "20px", "space-option-padding-vertical": "4px", - "space-panel-content-bottom": "40px", + "space-panel-content-bottom": "20px", "space-panel-content-top": "20px", "space-panel-divider-margin-horizontal": "8px", "space-panel-header-vertical": "20px", @@ -6274,6 +6307,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-scaled-xxxl": "40px", "space-scaled-xxxs": "2px", "space-segmented-control-focus-outline-gutter": "6px", + "space-side-navigation-item-collapsed-gap": "8px", + "space-side-navigation-item-gap": "0px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", @@ -6471,6 +6506,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-segment-disabled": "#161d26", "color-background-segment-hover": "#1b232d", "color-background-segment-wrapper": "#161d26", + "color-background-side-navigation-item-active": "transparent", "color-background-skeleton": "#232b37", "color-background-skeleton-wave": "#333843", "color-background-slider-handle-active": "#75cfff", @@ -6942,6 +6978,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-segment-active": "#0f141a", "color-text-segment-default": "#dedee3", "color-text-segment-hover": "#75cfff", + "color-text-side-navigation-item-active": "#42b4ff", "color-text-small": "#a4a4ad", "color-text-status-error": "#ff7a7a", "color-text-status-inactive": "#a4a4ad", @@ -7089,6 +7126,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "size-icon-large": "48px", "size-icon-medium": "20px", "size-icon-normal": "16px", + "size-side-navigation-item-height": "28px", "size-table-selection-horizontal": "40px", "size-vertical-input": "32px", "size-vertical-panel-icon-offset": "15px", @@ -7149,7 +7187,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-none": "0px", "space-option-padding-horizontal": "20px", "space-option-padding-vertical": "4px", - "space-panel-content-bottom": "40px", + "space-panel-content-bottom": "20px", "space-panel-content-top": "20px", "space-panel-divider-margin-horizontal": "8px", "space-panel-header-vertical": "20px", @@ -7175,6 +7213,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-scaled-xxxl": "40px", "space-scaled-xxxs": "2px", "space-segmented-control-focus-outline-gutter": "6px", + "space-side-navigation-item-collapsed-gap": "8px", + "space-side-navigation-item-gap": "0px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index 70785b051b..766a51a2ed 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -466,6 +466,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#ffffff", }, }, + "color-background-layout-panel-content": { + "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color.", + "$value": { + "dark": "#2a2e33", + "light": "#ffffff", + }, + }, "color-background-layout-toggle-active": { "$description": "The background color of the app layout toggle button when it's active.", "$value": { @@ -648,6 +655,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#ffffff", }, }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, "color-background-slider-handle-active": { "$description": "The background color of the slider handle in active state.", "$value": { @@ -2839,6 +2853,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#16191f", }, }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#44b9d6", + "light": "#0073bb", + }, + }, "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { @@ -3179,6 +3200,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "0px 4px 8px rgba(0, 28, 36, 0.45)", }, }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, "size-vertical-input": { "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", "$value": { @@ -3361,6 +3389,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "compact": "0px", }, }, + "space-side-navigation-item-collapsed-gap": { + "$description": "The vertical gap between side navigation items in collapsed state.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-side-navigation-item-gap": { + "$description": "The vertical gap between side navigation items.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, "space-static-l": { "$description": "The static L spacing unit.", "$value": { @@ -3910,6 +3952,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#ffffff", }, }, + "color-background-layout-panel-content": { + "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color.", + "$value": { + "dark": "#2a2e33", + "light": "#ffffff", + }, + }, "color-background-layout-toggle-active": { "$description": "The background color of the app layout toggle button when it's active.", "$value": { @@ -4092,6 +4141,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#ffffff", }, }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, "color-background-slider-handle-active": { "$description": "The background color of the slider handle in active state.", "$value": { @@ -6283,6 +6339,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#16191f", }, }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#44b9d6", + "light": "#0073bb", + }, + }, "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { @@ -6623,6 +6686,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "0px 4px 8px rgba(0, 28, 36, 0.45)", }, }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, "size-vertical-input": { "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", "$value": { @@ -6805,6 +6875,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "compact": "0px", }, }, + "space-side-navigation-item-collapsed-gap": { + "$description": "The vertical gap between side navigation items in collapsed state.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-side-navigation-item-gap": { + "$description": "The vertical gap between side navigation items.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, "space-static-l": { "$description": "The static L spacing unit.", "$value": { @@ -7354,6 +7438,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#ffffff", }, }, + "color-background-layout-panel-content": { + "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color.", + "$value": { + "dark": "#2a2e33", + "light": "#ffffff", + }, + }, "color-background-layout-toggle-active": { "$description": "The background color of the app layout toggle button when it's active.", "$value": { @@ -7536,6 +7627,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#ffffff", }, }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, "color-background-slider-handle-active": { "$description": "The background color of the slider handle in active state.", "$value": { @@ -9727,6 +9825,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#16191f", }, }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#44b9d6", + "light": "#0073bb", + }, + }, "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { @@ -10067,6 +10172,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "0px 4px 8px rgba(0, 28, 36, 0.45)", }, }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, "size-vertical-input": { "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", "$value": { @@ -10249,6 +10361,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "compact": "0px", }, }, + "space-side-navigation-item-collapsed-gap": { + "$description": "The vertical gap between side navigation items in collapsed state.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-side-navigation-item-gap": { + "$description": "The vertical gap between side navigation items.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, "space-static-l": { "$description": "The static L spacing unit.", "$value": { @@ -10798,6 +10924,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#ffffff", }, }, + "color-background-layout-panel-content": { + "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color.", + "$value": { + "dark": "#2a2e33", + "light": "#ffffff", + }, + }, "color-background-layout-toggle-active": { "$description": "The background color of the app layout toggle button when it's active.", "$value": { @@ -10980,6 +11113,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#ffffff", }, }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, "color-background-slider-handle-active": { "$description": "The background color of the slider handle in active state.", "$value": { @@ -13171,6 +13311,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#ffffff", }, }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#44b9d6", + "light": "#0073bb", + }, + }, "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { @@ -13511,6 +13658,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "0px 4px 8px rgba(0, 28, 36, 0.45)", }, }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, "size-vertical-input": { "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", "$value": { @@ -13693,6 +13847,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "compact": "0px", }, }, + "space-side-navigation-item-collapsed-gap": { + "$description": "The vertical gap between side navigation items in collapsed state.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-side-navigation-item-gap": { + "$description": "The vertical gap between side navigation items.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, "space-static-l": { "$description": "The static L spacing unit.", "$value": { @@ -14242,6 +14410,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#ffffff", }, }, + "color-background-layout-panel-content": { + "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color.", + "$value": { + "dark": "#2a2e33", + "light": "#ffffff", + }, + }, "color-background-layout-toggle-active": { "$description": "The background color of the app layout toggle button when it's active.", "$value": { @@ -14424,6 +14599,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#ffffff", }, }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, "color-background-slider-handle-active": { "$description": "The background color of the slider handle in active state.", "$value": { @@ -16615,6 +16797,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#16191f", }, }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#44b9d6", + "light": "#0073bb", + }, + }, "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { @@ -16955,6 +17144,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "0px 4px 8px rgba(0, 28, 36, 0.45)", }, }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, "size-vertical-input": { "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", "$value": { @@ -17137,6 +17333,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "compact": "0px", }, }, + "space-side-navigation-item-collapsed-gap": { + "$description": "The vertical gap between side navigation items in collapsed state.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-side-navigation-item-gap": { + "$description": "The vertical gap between side navigation items.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, "space-static-l": { "$description": "The static L spacing unit.", "$value": { @@ -17686,6 +17896,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#232f3e", }, }, + "color-background-layout-panel-content": { + "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color.", + "$value": { + "dark": "#232f3e", + "light": "#232f3e", + }, + }, "color-background-layout-toggle-active": { "$description": "The background color of the app layout toggle button when it's active.", "$value": { @@ -17868,6 +18085,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#232f3e", }, }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, "color-background-slider-handle-active": { "$description": "The background color of the slider handle in active state.", "$value": { @@ -20059,6 +20283,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#fafafa", }, }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#44b9d6", + "light": "#44b9d6", + }, + }, "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { @@ -20399,6 +20630,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "0px 4px 8px rgba(0, 28, 36, 0.45)", }, }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, "size-vertical-input": { "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", "$value": { @@ -20581,6 +20819,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "compact": "0px", }, }, + "space-side-navigation-item-collapsed-gap": { + "$description": "The vertical gap between side navigation items in collapsed state.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-side-navigation-item-gap": { + "$description": "The vertical gap between side navigation items.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, "space-static-l": { "$description": "The static L spacing unit.", "$value": { @@ -21130,6 +21382,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#ffffff", }, }, + "color-background-layout-panel-content": { + "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color.", + "$value": { + "dark": "#2a2e33", + "light": "#ffffff", + }, + }, "color-background-layout-toggle-active": { "$description": "The background color of the app layout toggle button when it's active.", "$value": { @@ -21312,6 +21571,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#ffffff", }, }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, "color-background-slider-handle-active": { "$description": "The background color of the slider handle in active state.", "$value": { @@ -23503,6 +23769,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#16191f", }, }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#44b9d6", + "light": "#0073bb", + }, + }, "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { @@ -23843,6 +24116,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "0px 4px 8px rgba(0, 28, 36, 0.45)", }, }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, "size-vertical-input": { "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", "$value": { @@ -24025,6 +24305,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "compact": "0px", }, }, + "space-side-navigation-item-collapsed-gap": { + "$description": "The vertical gap between side navigation items in collapsed state.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-side-navigation-item-gap": { + "$description": "The vertical gap between side navigation items.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, "space-static-l": { "$description": "The static L spacing unit.", "$value": { @@ -24579,6 +24873,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ffffff", }, }, + "color-background-layout-panel-content": { + "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, "color-background-layout-toggle-active": { "$description": "The background color of the app layout toggle button when it's active.", "$value": { @@ -24761,6 +25062,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ffffff", }, }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, "color-background-slider-handle-active": { "$description": "The background color of the slider handle in active state.", "$value": { @@ -26952,6 +27260,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#0f141a", }, }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { @@ -27292,6 +27607,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", }, }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, "size-vertical-input": { "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", "$value": { @@ -27474,6 +27796,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "0px", }, }, + "space-side-navigation-item-collapsed-gap": { + "$description": "The vertical gap between side navigation items in collapsed state.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-side-navigation-item-gap": { + "$description": "The vertical gap between side navigation items.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, "space-static-l": { "$description": "The static L spacing unit.", "$value": { @@ -28023,6 +28359,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#161d26", }, }, + "color-background-layout-panel-content": { + "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, "color-background-layout-toggle-active": { "$description": "The background color of the app layout toggle button when it's active.", "$value": { @@ -28205,6 +28548,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#161d26", }, }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, "color-background-slider-handle-active": { "$description": "The background color of the slider handle in active state.", "$value": { @@ -30396,6 +30746,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ffffff", }, }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { @@ -30736,6 +31093,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", }, }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, "size-vertical-input": { "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", "$value": { @@ -30918,6 +31282,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "0px", }, }, + "space-side-navigation-item-collapsed-gap": { + "$description": "The vertical gap between side navigation items in collapsed state.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-side-navigation-item-gap": { + "$description": "The vertical gap between side navigation items.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, "space-static-l": { "$description": "The static L spacing unit.", "$value": { @@ -31467,6 +31845,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ffffff", }, }, + "color-background-layout-panel-content": { + "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, "color-background-layout-toggle-active": { "$description": "The background color of the app layout toggle button when it's active.", "$value": { @@ -31649,6 +32034,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ffffff", }, }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, "color-background-slider-handle-active": { "$description": "The background color of the slider handle in active state.", "$value": { @@ -33840,6 +34232,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#002b66", }, }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { @@ -34180,6 +34579,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", }, }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, "size-vertical-input": { "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", "$value": { @@ -34362,6 +34768,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "0px", }, }, + "space-side-navigation-item-collapsed-gap": { + "$description": "The vertical gap between side navigation items in collapsed state.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-side-navigation-item-gap": { + "$description": "The vertical gap between side navigation items.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, "space-static-l": { "$description": "The static L spacing unit.", "$value": { @@ -34911,6 +35331,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ffffff", }, }, + "color-background-layout-panel-content": { + "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, "color-background-layout-toggle-active": { "$description": "The background color of the app layout toggle button when it's active.", "$value": { @@ -35093,6 +35520,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ffffff", }, }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, "color-background-slider-handle-active": { "$description": "The background color of the slider handle in active state.", "$value": { @@ -37284,6 +37718,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#002b66", }, }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { @@ -37624,6 +38065,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", }, }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, "size-vertical-input": { "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", "$value": { @@ -37806,6 +38254,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "0px", }, }, + "space-side-navigation-item-collapsed-gap": { + "$description": "The vertical gap between side navigation items in collapsed state.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-side-navigation-item-gap": { + "$description": "The vertical gap between side navigation items.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, "space-static-l": { "$description": "The static L spacing unit.", "$value": { @@ -38355,6 +38817,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ffffff", }, }, + "color-background-layout-panel-content": { + "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, "color-background-layout-toggle-active": { "$description": "The background color of the app layout toggle button when it's active.", "$value": { @@ -38537,6 +39006,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ffffff", }, }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, "color-background-slider-handle-active": { "$description": "The background color of the slider handle in active state.", "$value": { @@ -40728,6 +41204,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ffffff", }, }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { @@ -41068,6 +41551,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", }, }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, "size-vertical-input": { "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", "$value": { @@ -41250,6 +41740,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "0px", }, }, + "space-side-navigation-item-collapsed-gap": { + "$description": "The vertical gap between side navigation items in collapsed state.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-side-navigation-item-gap": { + "$description": "The vertical gap between side navigation items.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, "space-static-l": { "$description": "The static L spacing unit.", "$value": { @@ -41799,6 +42303,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ffffff", }, }, + "color-background-layout-panel-content": { + "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, "color-background-layout-toggle-active": { "$description": "The background color of the app layout toggle button when it's active.", "$value": { @@ -41981,6 +42492,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ffffff", }, }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, "color-background-slider-handle-active": { "$description": "The background color of the slider handle in active state.", "$value": { @@ -44172,6 +44690,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#0f141a", }, }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { @@ -44512,6 +45037,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", }, }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, "size-vertical-input": { "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", "$value": { @@ -44694,6 +45226,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "0px", }, }, + "space-side-navigation-item-collapsed-gap": { + "$description": "The vertical gap between side navigation items in collapsed state.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-side-navigation-item-gap": { + "$description": "The vertical gap between side navigation items.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, "space-static-l": { "$description": "The static L spacing unit.", "$value": { @@ -45243,6 +45789,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#161d26", }, }, + "color-background-layout-panel-content": { + "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, "color-background-layout-toggle-active": { "$description": "The background color of the app layout toggle button when it's active.", "$value": { @@ -45425,6 +45978,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#0f141a", }, }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, "color-background-slider-handle-active": { "$description": "The background color of the slider handle in active state.", "$value": { @@ -47616,6 +48176,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#75cfff", }, }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { @@ -47956,6 +48523,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c", }, }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, "size-vertical-input": { "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", "$value": { @@ -48138,6 +48712,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "0px", }, }, + "space-side-navigation-item-collapsed-gap": { + "$description": "The vertical gap between side navigation items in collapsed state.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-side-navigation-item-gap": { + "$description": "The vertical gap between side navigation items.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, "space-static-l": { "$description": "The static L spacing unit.", "$value": { @@ -48687,6 +49275,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#161d26", }, }, + "color-background-layout-panel-content": { + "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, "color-background-layout-toggle-active": { "$description": "The background color of the app layout toggle button when it's active.", "$value": { @@ -48869,6 +49464,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#161d26", }, }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, "color-background-slider-handle-active": { "$description": "The background color of the slider handle in active state.", "$value": { @@ -51060,6 +51662,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#75cfff", }, }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { @@ -51400,6 +52009,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", }, }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, "size-vertical-input": { "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", "$value": { @@ -51582,6 +52198,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "0px", }, }, + "space-side-navigation-item-collapsed-gap": { + "$description": "The vertical gap between side navigation items in collapsed state.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-side-navigation-item-gap": { + "$description": "The vertical gap between side navigation items.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, "space-static-l": { "$description": "The static L spacing unit.", "$value": { @@ -52131,6 +52761,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ffffff", }, }, + "color-background-layout-panel-content": { + "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, "color-background-layout-toggle-active": { "$description": "The background color of the app layout toggle button when it's active.", "$value": { @@ -52313,6 +52950,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ffffff", }, }, + "color-background-side-navigation-item-active": { + "$description": "The background color of an active (highlighted) side navigation item.", + "$value": { + "dark": "transparent", + "light": "transparent", + }, + }, "color-background-slider-handle-active": { "$description": "The background color of the slider handle in active state.", "$value": { @@ -54504,6 +55148,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#002b66", }, }, + "color-text-side-navigation-item-active": { + "$description": "The text color of an active (highlighted) side navigation item.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { @@ -54844,6 +55495,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", }, }, + "size-side-navigation-item-height": { + "$description": "The minimum height of side navigation items.", + "$value": { + "comfortable": "28px", + "compact": "24px", + }, + }, "size-vertical-input": { "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.", "$value": { @@ -55026,6 +55684,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "0px", }, }, + "space-side-navigation-item-collapsed-gap": { + "$description": "The vertical gap between side navigation items in collapsed state.", + "$value": { + "comfortable": "8px", + "compact": "8px", + }, + }, + "space-side-navigation-item-gap": { + "$description": "The vertical gap between side navigation items.", + "$value": { + "comfortable": "0px", + "compact": "0px", + }, + }, "space-static-l": { "$description": "The static L spacing unit.", "$value": { diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap index 90d771415e..6790b31de4 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap @@ -600,7 +600,7 @@ exports[`test-utils selectors 1`] = ` "awsui_header_l0dv0", "awsui_info_1fhsi", "awsui_items-control_l0dv0", - "awsui_link-active_l0dv0", + "awsui_link--active_l0dv0", "awsui_link_l0dv0", "awsui_list-variant-root_l0dv0", "awsui_root_l0dv0", diff --git a/src/side-navigation/parts.tsx b/src/side-navigation/parts.tsx index 484d42494a..6b35d86ed7 100644 --- a/src/side-navigation/parts.tsx +++ b/src/side-navigation/parts.tsx @@ -298,7 +298,7 @@ function Link({ definition, activeHref, fireFollow, position }: LinkProps) { <> .divider-header + & { - margin-block-start: 0; + margin-block-start: calc(-1 * #{$item-padding-block}); } } @@ -71,15 +103,15 @@ margin-inline: 0; padding-block: 0; padding-inline-end: 0; - padding-inline-start: awsui.$space-l; + padding-inline-start: $item-indent; } .list-variant-root { margin-block: 0; margin-inline: 0; padding-block: 0; - padding-inline-start: awsui.$space-panel-nav-left; - padding-inline-end: awsui.$space-panel-side-right; + padding-inline-start: calc(#{awsui.$space-panel-nav-left} - #{$item-padding-inline}); + padding-inline-end: calc(#{awsui.$space-panel-side-right} - #{$item-padding-inline}); &--first { margin-block-start: 0; @@ -87,77 +119,149 @@ } .list-variant-expandable-link-group { - padding-inline-start: awsui.$space-xxxl; + padding-inline-start: calc(#{$item-indent} + #{$expandable-icon-negative-margin}); } -.list-item { +.list-variant-section { + padding-inline-start: calc(#{$expandable-icon-negative-margin} - #{$item-padding-inline}); +} + +.list-variant-link-group { + padding-inline-start: $item-indent; +} + +.list-variant-section-group { margin-block: awsui.$space-scaled-xs; - margin-inline: 0; + margin-inline: calc(-1 * #{$item-padding-inline}); padding-block: 0; padding-inline: 0; - list-style: none; +} +// ========================================================================== +// List items +// ========================================================================== +.list-item { + margin-inline: 0; + margin-block: $item-margin-block; + padding-block: 0; + padding-inline: $item-padding-inline; + list-style: none; + @include styles.with-motion { + transition: margin awsui.$motion-duration-expressive awsui.$motion-easing-responsive; + } // Remove margin from first item in side nav, outer block margins are covered by list-container .list-variant-root--first > &:first-child { margin-block-start: 0px; } } +// ========================================================================== +// Sections and expandable link groups (InternalExpandableSection) +// ========================================================================== .section, .expandable-link-group { - margin-inline-start: calc(-1 * #{awsui.$space-l}); + margin-inline-start: calc(-1 * #{$expandable-icon-negative-margin}); + + // HACK: Remove padding from section header and content to rely on margin collapsing rules. + // Hits the two direct
children of the ExpandableSection root: the header + // (.wrapper-footer / .header-footer) and the content (.content-footer). + /* stylelint-disable-next-line selector-max-type */ + & > div { + padding-block: 0; + padding-inline: 0; + } + + // Hits the header's first child only — the .icon-container inside the + // ExpandableSection header — to vertically align the icon with the text. + // Must NOT match the content div's first child (our