From a753a6b884dd9718a0a10b9ab1f6a04e7d841c4a Mon Sep 17 00:00:00 2001 From: Maximilian Schoell Date: Fri, 26 Jun 2026 10:36:04 +0200 Subject: [PATCH 1/9] chore: apply one theme styles to side nav --- pages/side-navigation/collapsed.page.tsx | 39 ++-------------- .../collapsed-side-navigation.test.tsx | 24 ++++++++++ src/side-navigation/parts.tsx | 46 ++++++++++++------- src/side-navigation/styles.scss | 26 +++++------ style-dictionary/one-theme/colors.ts | 6 ++- style-dictionary/one-theme/sizes.ts | 1 + style-dictionary/one-theme/spacing.ts | 2 + style-dictionary/utils/token-names.ts | 4 ++ style-dictionary/visual-refresh/colors.ts | 4 ++ .../visual-refresh/metadata/colors.ts | 20 ++++++++ 10 files changed, 106 insertions(+), 66 deletions(-) diff --git a/pages/side-navigation/collapsed.page.tsx b/pages/side-navigation/collapsed.page.tsx index c118076565..f97c1866cd 100644 --- a/pages/side-navigation/collapsed.page.tsx +++ b/pages/side-navigation/collapsed.page.tsx @@ -1,13 +1,12 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import React, { useEffect, useRef, useState } from 'react'; +import React, { useRef, useState } from 'react'; import { useReducedMotion } from '@cloudscape-design/component-toolkit/internal'; -import { Box, Button, Icon, SpaceBetween, Toggle } from '~components'; +import { Box, Button, Icon, SpaceBetween } from '~components'; import SideNavigation, { SideNavigationProps } from '~components/side-navigation'; -import { applyTheme } from '~components/theming'; import { colorBorderDividerDefault } from '~design-tokens'; const items: SideNavigationProps.Item[] = [ @@ -24,7 +23,6 @@ const items: SideNavigationProps.Item[] = [ ], }, { type: 'link', text: 'Settings', href: '#/settings', icon: }, - { type: 'divider' }, { type: 'section', text: 'Resources', @@ -34,7 +32,6 @@ const items: SideNavigationProps.Item[] = [ { type: 'link', text: 'Networking', href: '#/networking', icon: }, ], }, - { type: 'divider' }, { type: 'link', text: 'Documentation', href: '#/docs', external: true }, ]; @@ -44,36 +41,11 @@ const EXPANDED_WIDTH = 220; export default function SideNavigationCollapsedPage() { const [activeHref, setActiveHref] = useState('#/calendar'); const [collapsed, setCollapsed] = useState(false); - const [highlighted, setHighlighted] = useState(true); - - useEffect(() => { - handleHighlightedChange(true); - }, []); const [panelWidth, setPanelWidth] = useState(EXPANDED_WIDTH); const navRef = useRef(null); const toggleRef = useRef(null); const reducedMotion = useReducedMotion(navRef); - const resetThemeRef = useRef<(() => void) | null>(null); - - function handleHighlightedChange(value: boolean) { - setHighlighted(value); - if (value) { - const { reset } = applyTheme({ - theme: { - tokens: { - colorBackgroundSideNavigationItemActive: { light: '{colorPrimary50}', dark: '#0099FF20' }, - colorTextSideNavigationItemActive: { light: '{colorPrimary600}', dark: '{colorPrimary300}' }, - }, - }, - }); - resetThemeRef.current = reset; - } else { - resetThemeRef.current?.(); - resetThemeRef.current = null; - } - } - function handleToggle() { const willCollapse = !collapsed; // Focus management: move focus to toggle if focused item will be hidden @@ -107,7 +79,7 @@ export default function SideNavigationCollapsedPage() { {/* Toggle button at top */}
Collapsed state demo Active: {activeHref} - handleHighlightedChange(detail.checked)}> - Background highlight - Toggle the navigation panel using the button. Items without icons are hidden in collapsed mode. Sections - show their icon-bearing children as a flat list. + show their icon-bearing children as a flat list, and the section title becomes a divider in its place.
diff --git a/src/side-navigation/__tests__/collapsed-side-navigation.test.tsx b/src/side-navigation/__tests__/collapsed-side-navigation.test.tsx index 60149bfdb6..20b0570f3d 100644 --- a/src/side-navigation/__tests__/collapsed-side-navigation.test.tsx +++ b/src/side-navigation/__tests__/collapsed-side-navigation.test.tsx @@ -137,6 +137,30 @@ describe('SideNavigation collapsed mode', () => { const wrapper = renderSideNavigation({ collapsed: true, items }); expect(wrapper.findAll('a')).toHaveLength(0); }); + + it('renders a divider in place of the section title when collapsed', () => { + const wrapper = renderSideNavigation({ + collapsed: true, + items: [ + iconLink('Top', '#/top'), + { + type: 'section', + text: 'Resources', + items: [iconLink('Compute', '#/compute'), iconLink('Storage', '#/storage')], + }, + ], + }); + expect(wrapper.findAll('hr')).toHaveLength(1); + expect(wrapper.find('ul[aria-label="Resources"]')).not.toBeNull(); + }); + + it('does not render a section divider when the section has no icon-bearing children', () => { + const wrapper = renderSideNavigation({ + collapsed: true, + items: [iconLink('Top', '#/top'), { type: 'section', text: 'Empty', items: [plainLink('A', '#/a')] }], + }); + expect(wrapper.findAll('hr')).toHaveLength(0); + }); }); describe('expandable link groups', () => { diff --git a/src/side-navigation/parts.tsx b/src/side-navigation/parts.tsx index a851da0f24..54eb95c776 100644 --- a/src/side-navigation/parts.tsx +++ b/src/side-navigation/parts.tsx @@ -135,14 +135,39 @@ export function NavigationItemsList({ const itemid = index + 1; const itemPosition = `${position ? `${position},` : ''}${itemid}`; + // Emits a divider as its own list segment (dividers break the
    grouping). + function pushDivider() { + lists[lists.length] = { + listVariant: variant, + element: ( +
    + +
    + ), + }; + currentListIndex = lists.length; + lists[currentListIndex] = { + listVariant: variant, + items: [], + }; + } + // Renders icon-bearing children of a container item as a collapsed group. // The inner
      carries the group label so list semantics are preserved // for screen readers even when the visual header is hidden. - function pushCollapsedGroup(children: ReadonlyArray, label: string) { + function pushCollapsedGroup( + children: ReadonlyArray, + label: string, + { leadingDivider = false }: { leadingDivider?: boolean } = {} + ) { const iconChildren = children.filter(child => (child as SideNavigationProps.Link).icon); if (iconChildren.length === 0) { return; } + // A section's title is hidden when collapsed; render a divider in its place + if (leadingDivider) { + pushDivider(); + } const groupElements = iconChildren.map((child, childIndex) => { const childPosition = `${position ? `${position},` : ''}${itemid},${childIndex + 1}`; return ( @@ -166,7 +191,7 @@ export function NavigationItemsList({ key={`group-${itemid}`} className={clsx( styles['list-item--group'], - prevItem?.type === 'divider' && styles['list-item--group-no-padding-start'], + (leadingDivider || prevItem?.type === 'divider') && styles['list-item--group-no-padding-start'], nextItem?.type === 'divider' && styles['list-item--group-no-padding-end'] )} > @@ -196,7 +221,7 @@ export function NavigationItemsList({ : (item as SideNavigationProps.SectionGroup).items.flatMap(child => child.type === 'section' ? (child as SideNavigationProps.Section).items : [child] ); - pushCollapsedGroup(childItems, sectionLabel); + pushCollapsedGroup(childItems, sectionLabel, { leadingDivider: true }); return; } if (collapsed && item.type !== 'divider' && !(item as SideNavigationProps.Link).icon) { @@ -204,20 +229,7 @@ export function NavigationItemsList({ } switch (item.type) { case 'divider': { - const dividerIndex = lists.length; - lists[dividerIndex] = { - listVariant: variant, - element: ( -
      - -
      - ), - }; - currentListIndex = lists.length; - lists[currentListIndex] = { - listVariant: variant, - items: [], - }; + pushDivider(); return; } case 'link': { diff --git a/src/side-navigation/styles.scss b/src/side-navigation/styles.scss index 721e49ed75..0b2b9b8cb7 100644 --- a/src/side-navigation/styles.scss +++ b/src/side-navigation/styles.scss @@ -154,9 +154,6 @@ $expandable-icon-negative-margin: awsui.$space-l; 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; @@ -168,9 +165,6 @@ $expandable-icon-negative-margin: awsui.$space-l; justify-content: center; padding-block: 0; padding-inline: 0; - @include styles.with-motion { - transition: margin awsui.$motion-duration-expressive awsui.$motion-easing-responsive; - } } &--group { @@ -284,8 +278,8 @@ $expandable-icon-negative-margin: awsui.$space-l; // ========================================================================== .link { @include styles.font-body-m; - color: awsui.$color-text-body-secondary; - display: inline-flex; + color: awsui.$color-text-side-navigation-item-default; + display: flex; padding-block: $item-padding-block; min-inline-size: awsui.$size-side-navigation-item-height; padding-inline: $item-padding-inline; @@ -295,17 +289,23 @@ $expandable-icon-negative-margin: awsui.$space-l; font-weight: styles.$font-weight-normal; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; - @include styles.with-motion { - transition: - background-color awsui.$motion-duration-expressive awsui.$motion-easing-responsive, - color awsui.$motion-duration-expressive awsui.$motion-easing-expressive; - } &-active { font-weight: awsui.$font-wayfinding-link-active-weight; @include styles.font-smoothing; color: awsui.$color-text-side-navigation-item-active; background-color: awsui.$color-background-side-navigation-item-active; + + // Collapsed mode hides the item text, so the active item gets a dedicated + // fill and text color (high-contrast indigo in one theme). The tokens carry + // the per-theme values, so no theme-specific override is needed. + &.link--collapsed { + color: awsui.$color-text-side-navigation-item-active-collapsed; + background-color: awsui.$color-background-side-navigation-item-active-collapsed; + &:hover { + color: awsui.$color-text-side-navigation-item-active-collapsed-hover; + } + } } &--collapsed { diff --git a/style-dictionary/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts index e95130f580..0ed48aab56 100644 --- a/style-dictionary/one-theme/colors.ts +++ b/style-dictionary/one-theme/colors.ts @@ -164,7 +164,11 @@ const tokens: StyleDictionary.ColorsDictionary = { // ── Side Nav ───────────────────────────────────────────────────────────────── colorTextSideNavigationItemActive: { light: '{colorPrimary600}', dark: '{colorPrimary300}' }, - colorBackgroundSideNavigationItemActive: { light: '{colorPrimary50}', dark: 'rgba(0, 153, 255, 0.13)' }, + colorTextSideNavigationItemActiveCollapsed: { light: '{colorNeutral100}', dark: '{colorNeutral1000}' }, + colorTextSideNavigationItemActiveCollapsedHover: { light: '{colorNeutral300}', dark: '{colorNeutral800}' }, + colorTextSideNavigationItemDefault: { light: '{colorTextBodyDefault}', dark: '{colorTextBodyDefault}' }, + colorBackgroundSideNavigationItemActive: { light: 'transparent', dark: 'transparent' }, + colorBackgroundSideNavigationItemActiveCollapsed: { light: '{colorPrimary500}', dark: '{colorPrimary500}' }, // ── Dropzone ────────────────────────────────────────────────────────────── colorDropzoneBackgroundDefault: { light: '{colorWhite}', dark: '{colorNeutral850}' }, diff --git a/style-dictionary/one-theme/sizes.ts b/style-dictionary/one-theme/sizes.ts index feb9d6ed01..134a391460 100644 --- a/style-dictionary/one-theme/sizes.ts +++ b/style-dictionary/one-theme/sizes.ts @@ -8,6 +8,7 @@ import { tokens as parentTokens } from '../visual-refresh/sizes.js'; const tokens: StyleDictionary.SizesDictionary = { sizeVerticalInput: { comfortable: '30px', compact: '26px' }, + sizeSideNavigationItemHeight: { comfortable: '30px', compact: '26px' }, }; const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = merge( diff --git a/style-dictionary/one-theme/spacing.ts b/style-dictionary/one-theme/spacing.ts index 1dcdfcc0cf..a6a3ddb679 100644 --- a/style-dictionary/one-theme/spacing.ts +++ b/style-dictionary/one-theme/spacing.ts @@ -14,6 +14,8 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceTokenVertical: '1px', spaceFieldVertical: { comfortable: '4px', compact: '2px' }, spaceStatusIndicatorPaddingHorizontal: '2px', + spaceSideNavigationItemGap: '5px', + spaceSideNavigationItemCollapsedGap: '5px', }; const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = merge( diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index a7e65153ab..f9fa3f16f6 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -580,6 +580,7 @@ export type ColorsTokenName = | 'colorBackgroundInputDisabled' | 'colorBackgroundItemSelected' | 'colorBackgroundSideNavigationItemActive' + | 'colorBackgroundSideNavigationItemActiveCollapsed' | 'colorBackgroundLayoutMain' | 'colorBackgroundDrawer' | 'colorBackgroundDrawerBackdrop' @@ -852,6 +853,9 @@ export type ColorsTokenName = | 'colorGapGlobalDrawer' | 'colorItemSelected' | 'colorTextSideNavigationItemActive' + | 'colorTextSideNavigationItemActiveCollapsed' + | 'colorTextSideNavigationItemActiveCollapsedHover' + | 'colorTextSideNavigationItemDefault' | 'colorBackgroundActionCardDefault' | 'colorBackgroundActionCardHover' | 'colorBackgroundActionCardActive' diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index f8758c8bb5..eeb8b6e5a7 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -62,6 +62,7 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundInputDisabled: { light: '{colorNeutral250}', dark: '{colorNeutral800}' }, colorBackgroundItemSelected: { light: '{colorPrimary50}', dark: '{colorPrimary1000}' }, colorBackgroundSideNavigationItemActive: 'transparent', + colorBackgroundSideNavigationItemActiveCollapsed: '{colorBackgroundSideNavigationItemActive}', colorBackgroundLayoutMain: { light: '{colorWhite}', dark: '{colorNeutral850}' }, colorBackgroundDrawer: '{colorBackgroundLayoutPanelContent}', colorBackgroundBackdrop: '{colorGreyOpaque70}', @@ -149,6 +150,9 @@ const tokens: StyleDictionary.ColorsDictionary = { colorTextButtonPrimaryDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral500}' }, colorItemSelected: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, colorTextSideNavigationItemActive: '{colorTextAccent}', + colorTextSideNavigationItemActiveCollapsed: '{colorTextSideNavigationItemActive}', + colorTextSideNavigationItemActiveCollapsedHover: '{colorTextSideNavigationItemActiveCollapsed}', + colorTextSideNavigationItemDefault: '{colorTextBodySecondary}', colorBorderCalendarGrid: 'transparent', colorBorderCalendarGridSelectedFocusRing: { light: '{colorNeutral100}', dark: '{colorNeutral850}' }, colorBorderCellShaded: { light: '{colorNeutral300}', dark: '{colorNeutral700}' }, diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index c52b6282a1..755fab404a 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -175,6 +175,11 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + colorBackgroundSideNavigationItemActiveCollapsed: { + description: 'The background color of an active side navigation item while the navigation is collapsed.', + public: false, + themeable: true, + }, colorBackgroundLayoutMain: { description: 'The background color of the main content area on a page. For example: content area in app layout.', public: true, @@ -488,6 +493,21 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + colorTextSideNavigationItemActiveCollapsed: { + description: 'The text (and icon) color of an active side navigation item while the navigation is collapsed.', + public: false, + themeable: true, + }, + colorTextSideNavigationItemActiveCollapsedHover: { + description: 'The hover text (and icon) color of an active side navigation item while the navigation is collapsed.', + public: false, + themeable: true, + }, + colorTextSideNavigationItemDefault: { + description: 'The text (and icon) color of a non-active side navigation item.', + public: false, + themeable: true, + }, colorBorderCard: { description: 'The border color of a card.', public: true, From a9541095c9321b4f6deb7063d4fd27465725ddde Mon Sep 17 00:00:00 2001 From: Maximilian Schoell Date: Fri, 26 Jun 2026 10:55:48 +0200 Subject: [PATCH 2/9] chore: remove comment --- src/side-navigation/styles.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/side-navigation/styles.scss b/src/side-navigation/styles.scss index 0b2b9b8cb7..d4e9978043 100644 --- a/src/side-navigation/styles.scss +++ b/src/side-navigation/styles.scss @@ -296,9 +296,6 @@ $expandable-icon-negative-margin: awsui.$space-l; color: awsui.$color-text-side-navigation-item-active; background-color: awsui.$color-background-side-navigation-item-active; - // Collapsed mode hides the item text, so the active item gets a dedicated - // fill and text color (high-contrast indigo in one theme). The tokens carry - // the per-theme values, so no theme-specific override is needed. &.link--collapsed { color: awsui.$color-text-side-navigation-item-active-collapsed; background-color: awsui.$color-background-side-navigation-item-active-collapsed; From 653563a9bdaae99e90f8b91a14c6554e571851ff Mon Sep 17 00:00:00 2001 From: Maximilian Schoell Date: Fri, 26 Jun 2026 11:23:45 +0200 Subject: [PATCH 3/9] chore: update jest snapshots --- .../__snapshots__/themes.test.ts.snap | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index ca1310c70a..57ab47d53c 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -167,6 +167,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-background-segment-hover": "#fafafa", "color-background-segment-wrapper": "#ffffff", "color-background-side-navigation-item-active": "transparent", + "color-background-side-navigation-item-active-collapsed": "transparent", "color-background-skeleton": "#eaeded", "color-background-skeleton-wave": "#f6f6f9", "color-background-slider-handle-active": "#0a4a74", @@ -639,6 +640,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-text-segment-default": "#545b64", "color-text-segment-hover": "#16191f", "color-text-side-navigation-item-active": "#0073bb", + "color-text-side-navigation-item-active-collapsed": "#0073bb", + "color-text-side-navigation-item-active-collapsed-hover": "#0073bb", + "color-text-side-navigation-item-default": "#545b64", "color-text-small": "#687078", "color-text-status-error": "#d13212", "color-text-status-inactive": "#687078", @@ -1075,6 +1079,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-background-segment-hover": "#21252c", "color-background-segment-wrapper": "#2a2e33", "color-background-side-navigation-item-active": "transparent", + "color-background-side-navigation-item-active-collapsed": "transparent", "color-background-skeleton": "#2a2e33", "color-background-skeleton-wave": "#414750", "color-background-slider-handle-active": "#44b9d6", @@ -1547,6 +1552,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-text-segment-default": "#d5dbdb", "color-text-segment-hover": "#fafafa", "color-text-side-navigation-item-active": "#44b9d6", + "color-text-side-navigation-item-active-collapsed": "#44b9d6", + "color-text-side-navigation-item-active-collapsed-hover": "#44b9d6", + "color-text-side-navigation-item-default": "#d5dbdb", "color-text-small": "#95a5a6", "color-text-status-error": "#ff5d64", "color-text-status-inactive": "#95a5a6", @@ -1983,6 +1991,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-background-segment-hover": "#fafafa", "color-background-segment-wrapper": "#ffffff", "color-background-side-navigation-item-active": "transparent", + "color-background-side-navigation-item-active-collapsed": "transparent", "color-background-skeleton": "#eaeded", "color-background-skeleton-wave": "#f6f6f9", "color-background-slider-handle-active": "#0a4a74", @@ -2455,6 +2464,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-text-segment-default": "#545b64", "color-text-segment-hover": "#16191f", "color-text-side-navigation-item-active": "#0073bb", + "color-text-side-navigation-item-active-collapsed": "#0073bb", + "color-text-side-navigation-item-active-collapsed-hover": "#0073bb", + "color-text-side-navigation-item-default": "#545b64", "color-text-small": "#687078", "color-text-status-error": "#d13212", "color-text-status-inactive": "#687078", @@ -2891,6 +2903,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-background-segment-hover": "#fafafa", "color-background-segment-wrapper": "#ffffff", "color-background-side-navigation-item-active": "transparent", + "color-background-side-navigation-item-active-collapsed": "transparent", "color-background-skeleton": "#eaeded", "color-background-skeleton-wave": "#f6f6f9", "color-background-slider-handle-active": "#0a4a74", @@ -3363,6 +3376,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-text-segment-default": "#545b64", "color-text-segment-hover": "#16191f", "color-text-side-navigation-item-active": "#0073bb", + "color-text-side-navigation-item-active-collapsed": "#0073bb", + "color-text-side-navigation-item-active-collapsed-hover": "#0073bb", + "color-text-side-navigation-item-default": "#545b64", "color-text-small": "#687078", "color-text-status-error": "#d13212", "color-text-status-inactive": "#687078", @@ -3799,6 +3815,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-background-segment-hover": "#f0fbff", "color-background-segment-wrapper": "#ffffff", "color-background-side-navigation-item-active": "transparent", + "color-background-side-navigation-item-active-collapsed": "transparent", "color-background-skeleton": "#ebebf0", "color-background-skeleton-wave": "#f6f6f9", "color-background-slider-handle-active": "#004a9e", @@ -4271,6 +4288,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-text-segment-default": "#424650", "color-text-segment-hover": "#002b66", "color-text-side-navigation-item-active": "#006ce0", + "color-text-side-navigation-item-active-collapsed": "#006ce0", + "color-text-side-navigation-item-active-collapsed-hover": "#006ce0", + "color-text-side-navigation-item-default": "#424650", "color-text-small": "#656871", "color-text-status-error": "#db0000", "color-text-status-inactive": "#656871", @@ -4707,6 +4727,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-segment-hover": "#f0fbff", "color-background-segment-wrapper": "#ffffff", "color-background-side-navigation-item-active": "transparent", + "color-background-side-navigation-item-active-collapsed": "transparent", "color-background-skeleton": "#ebebf0", "color-background-skeleton-wave": "#f6f6f9", "color-background-slider-handle-active": "#004a9e", @@ -5179,6 +5200,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-segment-default": "#424650", "color-text-segment-hover": "#002b66", "color-text-side-navigation-item-active": "#006ce0", + "color-text-side-navigation-item-active-collapsed": "#006ce0", + "color-text-side-navigation-item-active-collapsed-hover": "#006ce0", + "color-text-side-navigation-item-default": "#424650", "color-text-small": "#656871", "color-text-status-error": "#db0000", "color-text-status-inactive": "#656871", @@ -5615,6 +5639,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-segment-hover": "#1b232d", "color-background-segment-wrapper": "#0f141a", "color-background-side-navigation-item-active": "transparent", + "color-background-side-navigation-item-active-collapsed": "transparent", "color-background-skeleton": "#232b37", "color-background-skeleton-wave": "#333843", "color-background-slider-handle-active": "#75cfff", @@ -6087,6 +6112,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-segment-default": "#dedee3", "color-text-segment-hover": "#75cfff", "color-text-side-navigation-item-active": "#42b4ff", + "color-text-side-navigation-item-active-collapsed": "#42b4ff", + "color-text-side-navigation-item-active-collapsed-hover": "#42b4ff", + "color-text-side-navigation-item-default": "#c6c6cd", "color-text-small": "#a4a4ad", "color-text-status-error": "#ff7a7a", "color-text-status-inactive": "#a4a4ad", @@ -6523,6 +6551,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-segment-hover": "#1b232d", "color-background-segment-wrapper": "#161d26", "color-background-side-navigation-item-active": "transparent", + "color-background-side-navigation-item-active-collapsed": "transparent", "color-background-skeleton": "#232b37", "color-background-skeleton-wave": "#333843", "color-background-slider-handle-active": "#75cfff", @@ -6995,6 +7024,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-segment-default": "#dedee3", "color-text-segment-hover": "#75cfff", "color-text-side-navigation-item-active": "#42b4ff", + "color-text-side-navigation-item-active-collapsed": "#42b4ff", + "color-text-side-navigation-item-active-collapsed-hover": "#42b4ff", + "color-text-side-navigation-item-default": "#c6c6cd", "color-text-small": "#a4a4ad", "color-text-status-error": "#ff7a7a", "color-text-status-inactive": "#a4a4ad", From 32a76ad3507080c41208c35e2abf1f3ced00489f Mon Sep 17 00:00:00 2001 From: Maximilian Schoell Date: Fri, 26 Jun 2026 12:05:43 +0200 Subject: [PATCH 4/9] chore: remove hover state --- src/__integ__/__snapshots__/themes.test.ts.snap | 8 -------- src/side-navigation/styles.scss | 2 +- style-dictionary/one-theme/colors.ts | 1 - style-dictionary/utils/token-names.ts | 1 - style-dictionary/visual-refresh/colors.ts | 1 - style-dictionary/visual-refresh/metadata/colors.ts | 5 ----- 6 files changed, 1 insertion(+), 17 deletions(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 57ab47d53c..268451d92c 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -641,7 +641,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-text-segment-hover": "#16191f", "color-text-side-navigation-item-active": "#0073bb", "color-text-side-navigation-item-active-collapsed": "#0073bb", - "color-text-side-navigation-item-active-collapsed-hover": "#0073bb", "color-text-side-navigation-item-default": "#545b64", "color-text-small": "#687078", "color-text-status-error": "#d13212", @@ -1553,7 +1552,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-text-segment-hover": "#fafafa", "color-text-side-navigation-item-active": "#44b9d6", "color-text-side-navigation-item-active-collapsed": "#44b9d6", - "color-text-side-navigation-item-active-collapsed-hover": "#44b9d6", "color-text-side-navigation-item-default": "#d5dbdb", "color-text-small": "#95a5a6", "color-text-status-error": "#ff5d64", @@ -2465,7 +2463,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-text-segment-hover": "#16191f", "color-text-side-navigation-item-active": "#0073bb", "color-text-side-navigation-item-active-collapsed": "#0073bb", - "color-text-side-navigation-item-active-collapsed-hover": "#0073bb", "color-text-side-navigation-item-default": "#545b64", "color-text-small": "#687078", "color-text-status-error": "#d13212", @@ -3377,7 +3374,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-text-segment-hover": "#16191f", "color-text-side-navigation-item-active": "#0073bb", "color-text-side-navigation-item-active-collapsed": "#0073bb", - "color-text-side-navigation-item-active-collapsed-hover": "#0073bb", "color-text-side-navigation-item-default": "#545b64", "color-text-small": "#687078", "color-text-status-error": "#d13212", @@ -4289,7 +4285,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-text-segment-hover": "#002b66", "color-text-side-navigation-item-active": "#006ce0", "color-text-side-navigation-item-active-collapsed": "#006ce0", - "color-text-side-navigation-item-active-collapsed-hover": "#006ce0", "color-text-side-navigation-item-default": "#424650", "color-text-small": "#656871", "color-text-status-error": "#db0000", @@ -5201,7 +5196,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-segment-hover": "#002b66", "color-text-side-navigation-item-active": "#006ce0", "color-text-side-navigation-item-active-collapsed": "#006ce0", - "color-text-side-navigation-item-active-collapsed-hover": "#006ce0", "color-text-side-navigation-item-default": "#424650", "color-text-small": "#656871", "color-text-status-error": "#db0000", @@ -6113,7 +6107,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-segment-hover": "#75cfff", "color-text-side-navigation-item-active": "#42b4ff", "color-text-side-navigation-item-active-collapsed": "#42b4ff", - "color-text-side-navigation-item-active-collapsed-hover": "#42b4ff", "color-text-side-navigation-item-default": "#c6c6cd", "color-text-small": "#a4a4ad", "color-text-status-error": "#ff7a7a", @@ -7025,7 +7018,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-segment-hover": "#75cfff", "color-text-side-navigation-item-active": "#42b4ff", "color-text-side-navigation-item-active-collapsed": "#42b4ff", - "color-text-side-navigation-item-active-collapsed-hover": "#42b4ff", "color-text-side-navigation-item-default": "#c6c6cd", "color-text-small": "#a4a4ad", "color-text-status-error": "#ff7a7a", diff --git a/src/side-navigation/styles.scss b/src/side-navigation/styles.scss index d4e9978043..e391eaeda1 100644 --- a/src/side-navigation/styles.scss +++ b/src/side-navigation/styles.scss @@ -300,7 +300,7 @@ $expandable-icon-negative-margin: awsui.$space-l; color: awsui.$color-text-side-navigation-item-active-collapsed; background-color: awsui.$color-background-side-navigation-item-active-collapsed; &:hover { - color: awsui.$color-text-side-navigation-item-active-collapsed-hover; + color: awsui.$color-text-side-navigation-item-active-collapsed; } } } diff --git a/style-dictionary/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts index 0ed48aab56..2f3ea53d39 100644 --- a/style-dictionary/one-theme/colors.ts +++ b/style-dictionary/one-theme/colors.ts @@ -165,7 +165,6 @@ const tokens: StyleDictionary.ColorsDictionary = { // ── Side Nav ───────────────────────────────────────────────────────────────── colorTextSideNavigationItemActive: { light: '{colorPrimary600}', dark: '{colorPrimary300}' }, colorTextSideNavigationItemActiveCollapsed: { light: '{colorNeutral100}', dark: '{colorNeutral1000}' }, - colorTextSideNavigationItemActiveCollapsedHover: { light: '{colorNeutral300}', dark: '{colorNeutral800}' }, colorTextSideNavigationItemDefault: { light: '{colorTextBodyDefault}', dark: '{colorTextBodyDefault}' }, colorBackgroundSideNavigationItemActive: { light: 'transparent', dark: 'transparent' }, colorBackgroundSideNavigationItemActiveCollapsed: { light: '{colorPrimary500}', dark: '{colorPrimary500}' }, diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index f9fa3f16f6..57f06daeb1 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -854,7 +854,6 @@ export type ColorsTokenName = | 'colorItemSelected' | 'colorTextSideNavigationItemActive' | 'colorTextSideNavigationItemActiveCollapsed' - | 'colorTextSideNavigationItemActiveCollapsedHover' | 'colorTextSideNavigationItemDefault' | 'colorBackgroundActionCardDefault' | 'colorBackgroundActionCardHover' diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index eeb8b6e5a7..5d3ea7eaaa 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -151,7 +151,6 @@ const tokens: StyleDictionary.ColorsDictionary = { colorItemSelected: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, colorTextSideNavigationItemActive: '{colorTextAccent}', colorTextSideNavigationItemActiveCollapsed: '{colorTextSideNavigationItemActive}', - colorTextSideNavigationItemActiveCollapsedHover: '{colorTextSideNavigationItemActiveCollapsed}', colorTextSideNavigationItemDefault: '{colorTextBodySecondary}', colorBorderCalendarGrid: 'transparent', colorBorderCalendarGridSelectedFocusRing: { light: '{colorNeutral100}', dark: '{colorNeutral850}' }, diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index 755fab404a..ae94283197 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -498,11 +498,6 @@ const metadata: StyleDictionary.MetadataIndex = { public: false, themeable: true, }, - colorTextSideNavigationItemActiveCollapsedHover: { - description: 'The hover text (and icon) color of an active side navigation item while the navigation is collapsed.', - public: false, - themeable: true, - }, colorTextSideNavigationItemDefault: { description: 'The text (and icon) color of a non-active side navigation item.', public: false, From ca2a6510fddc774f6d5d9092eb1873b773fc6b11 Mon Sep 17 00:00:00 2001 From: Maximilian Schoell Date: Wed, 1 Jul 2026 12:38:09 +0200 Subject: [PATCH 5/9] refactor: replace index acces with .push --- src/side-navigation/parts.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/side-navigation/parts.tsx b/src/side-navigation/parts.tsx index 54eb95c776..d72e84417c 100644 --- a/src/side-navigation/parts.tsx +++ b/src/side-navigation/parts.tsx @@ -137,19 +137,19 @@ export function NavigationItemsList({ // Emits a divider as its own list segment (dividers break the
        grouping). function pushDivider() { - lists[lists.length] = { + lists.push({ listVariant: variant, element: (
        ), - }; - currentListIndex = lists.length; - lists[currentListIndex] = { - listVariant: variant, - items: [], - }; + }); + currentListIndex = + lists.push({ + listVariant: variant, + items: [], + }) - 1; } // Renders icon-bearing children of a container item as a collapsed group. From 09db26ba8f75493ec00354574dcdb4c6c4ec5746 Mon Sep 17 00:00:00 2001 From: Maximilian Schoell Date: Wed, 1 Jul 2026 15:21:26 +0200 Subject: [PATCH 6/9] fix: add collapsed background to vr --- .../__snapshots__/themes.test.ts.snap | 32 +++++++++---------- style-dictionary/visual-refresh/colors.ts | 4 +-- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 268451d92c..2f1e54cd24 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -167,7 +167,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-background-segment-hover": "#fafafa", "color-background-segment-wrapper": "#ffffff", "color-background-side-navigation-item-active": "transparent", - "color-background-side-navigation-item-active-collapsed": "transparent", + "color-background-side-navigation-item-active-collapsed": "#0073bb", "color-background-skeleton": "#eaeded", "color-background-skeleton-wave": "#f6f6f9", "color-background-slider-handle-active": "#0a4a74", @@ -640,7 +640,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-text-segment-default": "#545b64", "color-text-segment-hover": "#16191f", "color-text-side-navigation-item-active": "#0073bb", - "color-text-side-navigation-item-active-collapsed": "#0073bb", + "color-text-side-navigation-item-active-collapsed": "#ffffff", "color-text-side-navigation-item-default": "#545b64", "color-text-small": "#687078", "color-text-status-error": "#d13212", @@ -1078,7 +1078,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-background-segment-hover": "#21252c", "color-background-segment-wrapper": "#2a2e33", "color-background-side-navigation-item-active": "transparent", - "color-background-side-navigation-item-active-collapsed": "transparent", + "color-background-side-navigation-item-active-collapsed": "#00a1c9", "color-background-skeleton": "#2a2e33", "color-background-skeleton-wave": "#414750", "color-background-slider-handle-active": "#44b9d6", @@ -1551,7 +1551,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-text-segment-default": "#d5dbdb", "color-text-segment-hover": "#fafafa", "color-text-side-navigation-item-active": "#44b9d6", - "color-text-side-navigation-item-active-collapsed": "#44b9d6", + "color-text-side-navigation-item-active-collapsed": "#16191f", "color-text-side-navigation-item-default": "#d5dbdb", "color-text-small": "#95a5a6", "color-text-status-error": "#ff5d64", @@ -1989,7 +1989,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-background-segment-hover": "#fafafa", "color-background-segment-wrapper": "#ffffff", "color-background-side-navigation-item-active": "transparent", - "color-background-side-navigation-item-active-collapsed": "transparent", + "color-background-side-navigation-item-active-collapsed": "#0073bb", "color-background-skeleton": "#eaeded", "color-background-skeleton-wave": "#f6f6f9", "color-background-slider-handle-active": "#0a4a74", @@ -2462,7 +2462,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-text-segment-default": "#545b64", "color-text-segment-hover": "#16191f", "color-text-side-navigation-item-active": "#0073bb", - "color-text-side-navigation-item-active-collapsed": "#0073bb", + "color-text-side-navigation-item-active-collapsed": "#ffffff", "color-text-side-navigation-item-default": "#545b64", "color-text-small": "#687078", "color-text-status-error": "#d13212", @@ -2900,7 +2900,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-background-segment-hover": "#fafafa", "color-background-segment-wrapper": "#ffffff", "color-background-side-navigation-item-active": "transparent", - "color-background-side-navigation-item-active-collapsed": "transparent", + "color-background-side-navigation-item-active-collapsed": "#0073bb", "color-background-skeleton": "#eaeded", "color-background-skeleton-wave": "#f6f6f9", "color-background-slider-handle-active": "#0a4a74", @@ -3373,7 +3373,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-text-segment-default": "#545b64", "color-text-segment-hover": "#16191f", "color-text-side-navigation-item-active": "#0073bb", - "color-text-side-navigation-item-active-collapsed": "#0073bb", + "color-text-side-navigation-item-active-collapsed": "#ffffff", "color-text-side-navigation-item-default": "#545b64", "color-text-small": "#687078", "color-text-status-error": "#d13212", @@ -3811,7 +3811,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-background-segment-hover": "#f0fbff", "color-background-segment-wrapper": "#ffffff", "color-background-side-navigation-item-active": "transparent", - "color-background-side-navigation-item-active-collapsed": "transparent", + "color-background-side-navigation-item-active-collapsed": "#006ce0", "color-background-skeleton": "#ebebf0", "color-background-skeleton-wave": "#f6f6f9", "color-background-slider-handle-active": "#004a9e", @@ -4284,7 +4284,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-text-segment-default": "#424650", "color-text-segment-hover": "#002b66", "color-text-side-navigation-item-active": "#006ce0", - "color-text-side-navigation-item-active-collapsed": "#006ce0", + "color-text-side-navigation-item-active-collapsed": "#ffffff", "color-text-side-navigation-item-default": "#424650", "color-text-small": "#656871", "color-text-status-error": "#db0000", @@ -4722,7 +4722,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-segment-hover": "#f0fbff", "color-background-segment-wrapper": "#ffffff", "color-background-side-navigation-item-active": "transparent", - "color-background-side-navigation-item-active-collapsed": "transparent", + "color-background-side-navigation-item-active-collapsed": "#006ce0", "color-background-skeleton": "#ebebf0", "color-background-skeleton-wave": "#f6f6f9", "color-background-slider-handle-active": "#004a9e", @@ -5195,7 +5195,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-segment-default": "#424650", "color-text-segment-hover": "#002b66", "color-text-side-navigation-item-active": "#006ce0", - "color-text-side-navigation-item-active-collapsed": "#006ce0", + "color-text-side-navigation-item-active-collapsed": "#ffffff", "color-text-side-navigation-item-default": "#424650", "color-text-small": "#656871", "color-text-status-error": "#db0000", @@ -5633,7 +5633,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-segment-hover": "#1b232d", "color-background-segment-wrapper": "#0f141a", "color-background-side-navigation-item-active": "transparent", - "color-background-side-navigation-item-active-collapsed": "transparent", + "color-background-side-navigation-item-active-collapsed": "#42b4ff", "color-background-skeleton": "#232b37", "color-background-skeleton-wave": "#333843", "color-background-slider-handle-active": "#75cfff", @@ -6106,7 +6106,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-segment-default": "#dedee3", "color-text-segment-hover": "#75cfff", "color-text-side-navigation-item-active": "#42b4ff", - "color-text-side-navigation-item-active-collapsed": "#42b4ff", + "color-text-side-navigation-item-active-collapsed": "#0f141a", "color-text-side-navigation-item-default": "#c6c6cd", "color-text-small": "#a4a4ad", "color-text-status-error": "#ff7a7a", @@ -6544,7 +6544,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-segment-hover": "#1b232d", "color-background-segment-wrapper": "#161d26", "color-background-side-navigation-item-active": "transparent", - "color-background-side-navigation-item-active-collapsed": "transparent", + "color-background-side-navigation-item-active-collapsed": "#42b4ff", "color-background-skeleton": "#232b37", "color-background-skeleton-wave": "#333843", "color-background-slider-handle-active": "#75cfff", @@ -7017,7 +7017,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-segment-default": "#dedee3", "color-text-segment-hover": "#75cfff", "color-text-side-navigation-item-active": "#42b4ff", - "color-text-side-navigation-item-active-collapsed": "#42b4ff", + "color-text-side-navigation-item-active-collapsed": "#0f141a", "color-text-side-navigation-item-default": "#c6c6cd", "color-text-small": "#a4a4ad", "color-text-status-error": "#ff7a7a", diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index 5d3ea7eaaa..7944f87932 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -62,7 +62,7 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundInputDisabled: { light: '{colorNeutral250}', dark: '{colorNeutral800}' }, colorBackgroundItemSelected: { light: '{colorPrimary50}', dark: '{colorPrimary1000}' }, colorBackgroundSideNavigationItemActive: 'transparent', - colorBackgroundSideNavigationItemActiveCollapsed: '{colorBackgroundSideNavigationItemActive}', + colorBackgroundSideNavigationItemActiveCollapsed: '{colorBackgroundControlChecked}', colorBackgroundLayoutMain: { light: '{colorWhite}', dark: '{colorNeutral850}' }, colorBackgroundDrawer: '{colorBackgroundLayoutPanelContent}', colorBackgroundBackdrop: '{colorGreyOpaque70}', @@ -150,7 +150,7 @@ const tokens: StyleDictionary.ColorsDictionary = { colorTextButtonPrimaryDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral500}' }, colorItemSelected: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, colorTextSideNavigationItemActive: '{colorTextAccent}', - colorTextSideNavigationItemActiveCollapsed: '{colorTextSideNavigationItemActive}', + colorTextSideNavigationItemActiveCollapsed: '{colorTextInverted}', colorTextSideNavigationItemDefault: '{colorTextBodySecondary}', colorBorderCalendarGrid: 'transparent', colorBorderCalendarGridSelectedFocusRing: { light: '{colorNeutral100}', dark: '{colorNeutral850}' }, From 2dbe0cddc034e325bb581311d40d514da7f150db Mon Sep 17 00:00:00 2001 From: Maximilian Schoell Date: Wed, 1 Jul 2026 16:22:56 +0200 Subject: [PATCH 7/9] chore: separate vr and 1t border radii --- src/__integ__/__snapshots__/themes.test.ts.snap | 8 ++++++++ src/side-navigation/styles.scss | 13 +++++++------ style-dictionary/one-theme/borders.ts | 5 +++-- style-dictionary/utils/token-names.ts | 2 ++ style-dictionary/visual-refresh/borders.ts | 2 ++ style-dictionary/visual-refresh/metadata/borders.ts | 11 +++++++++++ 6 files changed, 33 insertions(+), 8 deletions(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 2f1e54cd24..457ffba654 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -42,6 +42,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "border-radius-item-card-default": "0px", "border-radius-item-card-embedded": "2px", "border-radius-popover": "2px", + "border-radius-side-navigation-item": "0px", "border-radius-skeleton": "8px", "border-radius-status-indicator": "16px", "border-radius-tabs-focus-ring": "0px", @@ -953,6 +954,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "border-radius-item-card-default": "0px", "border-radius-item-card-embedded": "2px", "border-radius-popover": "2px", + "border-radius-side-navigation-item": "0px", "border-radius-skeleton": "8px", "border-radius-status-indicator": "16px", "border-radius-tabs-focus-ring": "0px", @@ -1864,6 +1866,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "border-radius-item-card-default": "0px", "border-radius-item-card-embedded": "2px", "border-radius-popover": "2px", + "border-radius-side-navigation-item": "0px", "border-radius-skeleton": "8px", "border-radius-status-indicator": "16px", "border-radius-tabs-focus-ring": "0px", @@ -2775,6 +2778,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "border-radius-item-card-default": "0px", "border-radius-item-card-embedded": "2px", "border-radius-popover": "2px", + "border-radius-side-navigation-item": "0px", "border-radius-skeleton": "8px", "border-radius-status-indicator": "16px", "border-radius-tabs-focus-ring": "0px", @@ -3686,6 +3690,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "border-radius-item-card-default": "16px", "border-radius-item-card-embedded": "8px", "border-radius-popover": "8px", + "border-radius-side-navigation-item": "8px", "border-radius-skeleton": "8px", "border-radius-status-indicator": "4px", "border-radius-tabs-focus-ring": "20px", @@ -4597,6 +4602,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-item-card-default": "16px", "border-radius-item-card-embedded": "8px", "border-radius-popover": "8px", + "border-radius-side-navigation-item": "8px", "border-radius-skeleton": "8px", "border-radius-status-indicator": "4px", "border-radius-tabs-focus-ring": "20px", @@ -5508,6 +5514,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-item-card-default": "16px", "border-radius-item-card-embedded": "8px", "border-radius-popover": "8px", + "border-radius-side-navigation-item": "8px", "border-radius-skeleton": "8px", "border-radius-status-indicator": "4px", "border-radius-tabs-focus-ring": "20px", @@ -6419,6 +6426,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-item-card-default": "16px", "border-radius-item-card-embedded": "8px", "border-radius-popover": "8px", + "border-radius-side-navigation-item": "8px", "border-radius-skeleton": "8px", "border-radius-status-indicator": "4px", "border-radius-tabs-focus-ring": "20px", diff --git a/src/side-navigation/styles.scss b/src/side-navigation/styles.scss index e391eaeda1..b400ddc77b 100644 --- a/src/side-navigation/styles.scss +++ b/src/side-navigation/styles.scss @@ -18,11 +18,11 @@ $item-padding-inline: awsui.$space-xs; $item-indent: calc(awsui.$size-icon-normal + #{$item-icon-text-gap} - #{$item-padding-inline}); $expandable-icon-negative-margin: awsui.$space-l; -@mixin item-radius { - border-start-start-radius: awsui.$border-radius-item; - border-start-end-radius: awsui.$border-radius-item; - border-end-start-radius: awsui.$border-radius-item; - border-end-end-radius: awsui.$border-radius-item; +@mixin item-radius($radius: awsui.$border-radius-item) { + border-start-start-radius: $radius; + border-start-end-radius: $radius; + border-end-start-radius: $radius; + border-end-end-radius: $radius; } .root { @@ -285,7 +285,7 @@ $expandable-icon-negative-margin: awsui.$space-l; padding-inline: $item-padding-inline; margin-inline: calc(-1 * #{$item-padding-inline}); align-items: flex-start; - @include item-radius; + @include item-radius(awsui.$border-radius-side-navigation-item); font-weight: styles.$font-weight-normal; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; @@ -310,6 +310,7 @@ $expandable-icon-negative-margin: awsui.$space-l; margin-inline: 0; justify-content: center; align-items: center; + @include item-radius(awsui.$border-radius-side-navigation-item-collapsed); } } diff --git a/style-dictionary/one-theme/borders.ts b/style-dictionary/one-theme/borders.ts index 33a3e1dd6c..82dab2c397 100644 --- a/style-dictionary/one-theme/borders.ts +++ b/style-dictionary/one-theme/borders.ts @@ -32,14 +32,15 @@ const tokens: StyleDictionary.BordersDictionary = { borderRadiusDropdown: '2px', borderRadiusDropzone: '4px', borderRadiusFlashbar: '2px', - borderRadiusItem: '2px', borderRadiusInput: '2px', + borderRadiusItem: '2px', borderRadiusPopover: '4px', + borderRadiusSideNavigationItemCollapsed: '{borderRadiusItem}', + borderRadiusStatusIndicator: '2px', borderRadiusTabsFocusRing: '4px', borderRadiusToken: '2px', borderRadiusTokenInline: '{borderRadiusToken}', borderRadiusTutorialPanelItem: '4px', - borderRadiusStatusIndicator: '2px', }; const expandedTokens: StyleDictionary.ExpandedGlobalScopeDictionary = merge({}, parentTokens, tokens); diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index 57f06daeb1..5ac13078fc 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -982,6 +982,8 @@ export type BordersTokenName = | 'borderRadiusFlashbar' | 'borderRadiusInput' | 'borderRadiusItem' + | 'borderRadiusSideNavigationItem' + | 'borderRadiusSideNavigationItemCollapsed' | 'borderRadiusPopover' | 'borderRadiusSkeleton' | 'borderRadiusTabsFocusRing' diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts index 3544f174fa..7690f394a4 100644 --- a/style-dictionary/visual-refresh/borders.ts +++ b/style-dictionary/visual-refresh/borders.ts @@ -39,6 +39,8 @@ export const tokens: StyleDictionary.BordersDictionary = { borderRadiusFlashbar: '12px', borderRadiusInput: '8px', borderRadiusItem: '8px', + borderRadiusSideNavigationItem: '{borderRadiusItem}', + borderRadiusSideNavigationItemCollapsed: '50%', borderRadiusItemCardDefault: '{borderRadiusCardDefault}', borderRadiusItemCardEmbedded: '{borderRadiusCardEmbedded}', borderRadiusPopover: '{borderRadiusInput}', diff --git a/style-dictionary/visual-refresh/metadata/borders.ts b/style-dictionary/visual-refresh/metadata/borders.ts index a26ee2a01b..2d25b9bb54 100644 --- a/style-dictionary/visual-refresh/metadata/borders.ts +++ b/style-dictionary/visual-refresh/metadata/borders.ts @@ -84,6 +84,17 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + borderRadiusSideNavigationItem: { + description: 'The border radius of a side navigation item in the default (expanded) state.', + public: false, + themeable: true, + }, + borderRadiusSideNavigationItemCollapsed: { + description: + 'The border radius of a side navigation item while the navigation is collapsed, including its active background.', + public: false, + themeable: true, + }, borderRadiusInput: { description: 'The border radius of form controls. For example: input, select.', public: true, From e217cded9209ad72cb438910d3067da91176b4f1 Mon Sep 17 00:00:00 2001 From: Maximilian Schoell Date: Wed, 1 Jul 2026 16:58:00 +0200 Subject: [PATCH 8/9] chore: update jest screenshots --- src/__integ__/__snapshots__/themes.test.ts.snap | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 457ffba654..0774c5d255 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -43,6 +43,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "border-radius-item-card-embedded": "2px", "border-radius-popover": "2px", "border-radius-side-navigation-item": "0px", + "border-radius-side-navigation-item-collapsed": "50%", "border-radius-skeleton": "8px", "border-radius-status-indicator": "16px", "border-radius-tabs-focus-ring": "0px", @@ -955,6 +956,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "border-radius-item-card-embedded": "2px", "border-radius-popover": "2px", "border-radius-side-navigation-item": "0px", + "border-radius-side-navigation-item-collapsed": "50%", "border-radius-skeleton": "8px", "border-radius-status-indicator": "16px", "border-radius-tabs-focus-ring": "0px", @@ -1867,6 +1869,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "border-radius-item-card-embedded": "2px", "border-radius-popover": "2px", "border-radius-side-navigation-item": "0px", + "border-radius-side-navigation-item-collapsed": "50%", "border-radius-skeleton": "8px", "border-radius-status-indicator": "16px", "border-radius-tabs-focus-ring": "0px", @@ -2779,6 +2782,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "border-radius-item-card-embedded": "2px", "border-radius-popover": "2px", "border-radius-side-navigation-item": "0px", + "border-radius-side-navigation-item-collapsed": "50%", "border-radius-skeleton": "8px", "border-radius-status-indicator": "16px", "border-radius-tabs-focus-ring": "0px", @@ -3691,6 +3695,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "border-radius-item-card-embedded": "8px", "border-radius-popover": "8px", "border-radius-side-navigation-item": "8px", + "border-radius-side-navigation-item-collapsed": "50%", "border-radius-skeleton": "8px", "border-radius-status-indicator": "4px", "border-radius-tabs-focus-ring": "20px", @@ -4603,6 +4608,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-item-card-embedded": "8px", "border-radius-popover": "8px", "border-radius-side-navigation-item": "8px", + "border-radius-side-navigation-item-collapsed": "50%", "border-radius-skeleton": "8px", "border-radius-status-indicator": "4px", "border-radius-tabs-focus-ring": "20px", @@ -5515,6 +5521,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-item-card-embedded": "8px", "border-radius-popover": "8px", "border-radius-side-navigation-item": "8px", + "border-radius-side-navigation-item-collapsed": "50%", "border-radius-skeleton": "8px", "border-radius-status-indicator": "4px", "border-radius-tabs-focus-ring": "20px", @@ -6427,6 +6434,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-item-card-embedded": "8px", "border-radius-popover": "8px", "border-radius-side-navigation-item": "8px", + "border-radius-side-navigation-item-collapsed": "50%", "border-radius-skeleton": "8px", "border-radius-status-indicator": "4px", "border-radius-tabs-focus-ring": "20px", From c26c640c52f8d46c2f112b1b4ee8b428c37364de Mon Sep 17 00:00:00 2001 From: Maximilian Schoell Date: Thu, 2 Jul 2026 10:14:18 +0200 Subject: [PATCH 9/9] chore: remove expandable-link-group from collapsible nav Guidance: dont use expandable-link-group when nav is collapsible. --- pages/side-navigation/collapsed.page.tsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/pages/side-navigation/collapsed.page.tsx b/pages/side-navigation/collapsed.page.tsx index f97c1866cd..eb71900b66 100644 --- a/pages/side-navigation/collapsed.page.tsx +++ b/pages/side-navigation/collapsed.page.tsx @@ -11,17 +11,6 @@ import { colorBorderDividerDefault } from '~design-tokens'; const items: SideNavigationProps.Item[] = [ { type: 'link', text: 'Calendar', href: '#/calendar', icon: }, - { - type: 'expandable-link-group', - text: 'Projects', - href: '#/projects', - icon: , - items: [ - { type: 'link', text: 'Project 1', href: '#/projects/project-1' }, - { type: 'link', text: 'Project 2', href: '#/projects/project-2' }, - { type: 'link', text: 'Project 3', href: '#/projects/project-3' }, - ], - }, { type: 'link', text: 'Settings', href: '#/settings', icon: }, { type: 'section',