(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 +68,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/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 499d927048..ce0c1e175a 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -42,6 +42,8 @@ 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-side-navigation-item-collapsed": "50%",
"border-radius-skeleton": "8px",
"border-radius-status-indicator": "16px",
"border-radius-tabs-focus-ring": "0px",
@@ -167,6 +169,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": "#0073bb",
"color-background-skeleton": "#eaeded",
"color-background-skeleton-wave": "#f6f6f9",
"color-background-slider-handle-active": "#0a4a74",
@@ -639,6 +642,8 @@ 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": "#ffffff",
+ "color-text-side-navigation-item-default": "#545b64",
"color-text-small": "#687078",
"color-text-status-error": "#d13212",
"color-text-status-inactive": "#687078",
@@ -954,6 +959,8 @@ 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-side-navigation-item-collapsed": "50%",
"border-radius-skeleton": "8px",
"border-radius-status-indicator": "16px",
"border-radius-tabs-focus-ring": "0px",
@@ -1079,6 +1086,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": "#00a1c9",
"color-background-skeleton": "#2a2e33",
"color-background-skeleton-wave": "#414750",
"color-background-slider-handle-active": "#44b9d6",
@@ -1551,6 +1559,8 @@ 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": "#16191f",
+ "color-text-side-navigation-item-default": "#d5dbdb",
"color-text-small": "#95a5a6",
"color-text-status-error": "#ff5d64",
"color-text-status-inactive": "#95a5a6",
@@ -1866,6 +1876,8 @@ 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-side-navigation-item-collapsed": "50%",
"border-radius-skeleton": "8px",
"border-radius-status-indicator": "16px",
"border-radius-tabs-focus-ring": "0px",
@@ -1991,6 +2003,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": "#0073bb",
"color-background-skeleton": "#eaeded",
"color-background-skeleton-wave": "#f6f6f9",
"color-background-slider-handle-active": "#0a4a74",
@@ -2463,6 +2476,8 @@ 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": "#ffffff",
+ "color-text-side-navigation-item-default": "#545b64",
"color-text-small": "#687078",
"color-text-status-error": "#d13212",
"color-text-status-inactive": "#687078",
@@ -2778,6 +2793,8 @@ 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-side-navigation-item-collapsed": "50%",
"border-radius-skeleton": "8px",
"border-radius-status-indicator": "16px",
"border-radius-tabs-focus-ring": "0px",
@@ -2903,6 +2920,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": "#0073bb",
"color-background-skeleton": "#eaeded",
"color-background-skeleton-wave": "#f6f6f9",
"color-background-slider-handle-active": "#0a4a74",
@@ -3375,6 +3393,8 @@ 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": "#ffffff",
+ "color-text-side-navigation-item-default": "#545b64",
"color-text-small": "#687078",
"color-text-status-error": "#d13212",
"color-text-status-inactive": "#687078",
@@ -3690,6 +3710,8 @@ 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-side-navigation-item-collapsed": "50%",
"border-radius-skeleton": "8px",
"border-radius-status-indicator": "4px",
"border-radius-tabs-focus-ring": "20px",
@@ -3815,6 +3837,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": "#006ce0",
"color-background-skeleton": "#ebebf0",
"color-background-skeleton-wave": "#f6f6f9",
"color-background-slider-handle-active": "#004a9e",
@@ -4287,6 +4310,8 @@ 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": "#ffffff",
+ "color-text-side-navigation-item-default": "#424650",
"color-text-small": "#656871",
"color-text-status-error": "#db0000",
"color-text-status-inactive": "#656871",
@@ -4602,6 +4627,8 @@ 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-side-navigation-item-collapsed": "50%",
"border-radius-skeleton": "8px",
"border-radius-status-indicator": "4px",
"border-radius-tabs-focus-ring": "20px",
@@ -4727,6 +4754,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": "#006ce0",
"color-background-skeleton": "#ebebf0",
"color-background-skeleton-wave": "#f6f6f9",
"color-background-slider-handle-active": "#004a9e",
@@ -5199,6 +5227,8 @@ 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": "#ffffff",
+ "color-text-side-navigation-item-default": "#424650",
"color-text-small": "#656871",
"color-text-status-error": "#db0000",
"color-text-status-inactive": "#656871",
@@ -5514,6 +5544,8 @@ 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-side-navigation-item-collapsed": "50%",
"border-radius-skeleton": "8px",
"border-radius-status-indicator": "4px",
"border-radius-tabs-focus-ring": "20px",
@@ -5639,6 +5671,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": "#42b4ff",
"color-background-skeleton": "#232b37",
"color-background-skeleton-wave": "#333843",
"color-background-slider-handle-active": "#75cfff",
@@ -6111,6 +6144,8 @@ 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": "#0f141a",
+ "color-text-side-navigation-item-default": "#c6c6cd",
"color-text-small": "#a4a4ad",
"color-text-status-error": "#ff7a7a",
"color-text-status-inactive": "#a4a4ad",
@@ -6426,6 +6461,8 @@ 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-side-navigation-item-collapsed": "50%",
"border-radius-skeleton": "8px",
"border-radius-status-indicator": "4px",
"border-radius-tabs-focus-ring": "20px",
@@ -6551,6 +6588,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": "#42b4ff",
"color-background-skeleton": "#232b37",
"color-background-skeleton-wave": "#333843",
"color-background-slider-handle-active": "#75cfff",
@@ -7023,6 +7061,8 @@ 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": "#0f141a",
+ "color-text-side-navigation-item-default": "#c6c6cd",
"color-text-small": "#a4a4ad",
"color-text-status-error": "#ff7a7a",
"color-text-status-inactive": "#a4a4ad",
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 3d62d6880c..99be0b282f 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.push({
+ listVariant: variant,
+ element: (
+
+ ),
+ });
+ currentListIndex =
+ lists.push({
+ listVariant: variant,
+ items: [],
+ }) - 1;
+ }
+
// 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 e98c057818..74e8c5b433 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 {
@@ -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 {
@@ -280,28 +274,31 @@ $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;
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;
- @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;
+
+ &.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;
+ }
+ }
}
&--collapsed {
@@ -309,6 +306,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/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts
index e95130f580..2f3ea53d39 100644
--- a/style-dictionary/one-theme/colors.ts
+++ b/style-dictionary/one-theme/colors.ts
@@ -164,7 +164,10 @@ 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}' },
+ 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 74ac223885..f29277a093 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,8 @@ export type ColorsTokenName =
| 'colorGapGlobalDrawer'
| 'colorItemSelected'
| 'colorTextSideNavigationItemActive'
+ | 'colorTextSideNavigationItemActiveCollapsed'
+ | 'colorTextSideNavigationItemDefault'
| 'colorBackgroundActionCardDefault'
| 'colorBackgroundActionCardHover'
| 'colorBackgroundActionCardActive'
@@ -983,6 +986,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/colors.ts b/style-dictionary/visual-refresh/colors.ts
index f8758c8bb5..7944f87932 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: '{colorBackgroundControlChecked}',
colorBackgroundLayoutMain: { light: '{colorWhite}', dark: '{colorNeutral850}' },
colorBackgroundDrawer: '{colorBackgroundLayoutPanelContent}',
colorBackgroundBackdrop: '{colorGreyOpaque70}',
@@ -149,6 +150,8 @@ const tokens: StyleDictionary.ColorsDictionary = {
colorTextButtonPrimaryDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral500}' },
colorItemSelected: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
colorTextSideNavigationItemActive: '{colorTextAccent}',
+ colorTextSideNavigationItemActiveCollapsed: '{colorTextInverted}',
+ colorTextSideNavigationItemDefault: '{colorTextBodySecondary}',
colorBorderCalendarGrid: 'transparent',
colorBorderCalendarGridSelectedFocusRing: { light: '{colorNeutral100}', dark: '{colorNeutral850}' },
colorBorderCellShaded: { light: '{colorNeutral300}', dark: '{colorNeutral700}' },
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,
diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts
index c52b6282a1..ae94283197 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,16 @@ 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,
+ },
+ 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,