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
); turning the
+ // into a grid container breaks sibling margin collapse on the .list-item children.
+ /* stylelint-disable-next-line selector-max-type */
+ & > div:first-child > :first-child {
+ display: grid;
+ align-items: flex-start;
+ padding-block: $item-padding-block;
+ }
&--no-ident {
margin-inline-start: 0;
}
}
+.expandable-link-group > div:first-child {
+ @include item-radius;
+ display: flex;
+ padding-inline: $item-padding-inline;
+ margin-inline: calc(-1 * #{$item-padding-inline});
+ box-sizing: content-box;
+}
+
+.expandable-link-group-active > div:first-child {
+ background-color: $color-background-active;
+}
+
.section {
margin-block: calc(#{awsui.$space-scaled-2x-l} - #{awsui.$border-divider-section-width});
&.refresh {
- margin-block: calc(#{awsui.$space-scaled-2x-m} - #{awsui.$border-divider-section-width});
+ margin-block: calc(#{awsui.$space-scaled-xs} - #{awsui.$border-divider-section-width});
}
// Remove margin from section if it is the first item in side nav to prevent double margin stacking
.list-variant-root--first > .list-item:first-child > & {
margin-block-start: 0px;
}
- // HACK: Remove padding from section header and content to rely on margin collapsing rules.
- /* stylelint-disable-next-line selector-max-type */
- > div {
- padding-block: 0;
- padding-inline: 0;
- }
-}
-
-.list-variant-section-group {
- margin-block: 0;
- margin-inline: 0;
- padding-block: 0;
- padding-inline: 0;
}
+// ==========================================================================
+// Section groups
+// ==========================================================================
.section-group {
@include styles.font-heading-m;
- margin-block: 0;
+ margin-block: calc(#{awsui.$space-scaled-xs} - #{$item-padding-block});
margin-inline: 0;
+
+ .list-variant-root--first > .list-item:first-child > & {
+ margin-block-start: 0px;
+ }
}
.section-group-title {
- /* used in test-utils */
+ display: flex;
+ align-items: center;
+ margin-block: 0;
+ padding-block: awsui.$space-scaled-xxs;
}
+.section-header-text {
+ display: inline-flex;
+}
+
+// ==========================================================================
+// Links — all links use $item-height for consistent row sizing and collapse icon size.
+// ==========================================================================
.link {
@include styles.font-body-m;
color: awsui.$color-text-body-secondary;
+ display: flex;
+ padding-block: $item-padding-block;
+ min-inline-size: $item-height;
+ padding-inline: $item-padding-inline;
+ margin-inline: calc(-1 * #{$item-padding-inline});
+ align-items: flex-start;
+ @include item-radius;
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;
+ }
-.link-active {
- font-weight: awsui.$font-wayfinding-link-active-weight;
- @include styles.font-smoothing;
- color: awsui.$color-text-accent;
+ &--active {
+ font-weight: awsui.$font-wayfinding-link-active-weight;
+ @include styles.font-smoothing;
+ color: $color-text-active;
+ background-color: $color-background-active;
+ }
}
.header-link,
@@ -165,7 +279,7 @@
text-decoration: none;
&:hover {
- color: awsui.$color-text-accent;
+ color: $color-text-active;
}
&:focus {
@@ -182,10 +296,19 @@
}
}
+// ==========================================================================
+// Misc
+// ==========================================================================
.info {
margin-inline-start: awsui.$space-xs;
}
+.item-icon {
+ display: inline-flex;
+ flex-shrink: 0;
+ margin-inline-end: $item-icon-text-gap;
+}
+
.external-icon {
margin-inline-start: awsui.$space-xxs;
}
@@ -193,18 +316,15 @@
.divider {
border-block: none;
border-inline: none;
-}
-
-.divider-default {
- margin-block: awsui.$space-scaled-2x-xl;
- margin-inline: calc(-1 * #{awsui.$space-panel-divider-margin-horizontal});
- border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-}
-
-.divider-header {
- margin-block: 0;
- border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
- .with-toolbar > & {
- border-color: transparent;
+ &-default {
+ margin-block: awsui.$space-scaled-l;
+ border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+ }
+ &-header {
+ margin-block: 0;
+ border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
+ .with-toolbar > & {
+ border-color: transparent;
+ }
}
}
diff --git a/src/test-utils/dom/side-navigation/index.ts b/src/test-utils/dom/side-navigation/index.ts
index 36fe0f10d2..7dfd9a90cd 100644
--- a/src/test-utils/dom/side-navigation/index.ts
+++ b/src/test-utils/dom/side-navigation/index.ts
@@ -27,7 +27,7 @@ export default class SideNavigationWrapper extends ComponentWrapper {
}
findActiveLink(): ElementWrapper | null {
- return this.findByClassName(styles['link-active']);
+ return this.findByClassName(styles['link--active']);
}
findItemByIndex(index: number): SideNavigationItemWrapper | null {
diff --git a/style-dictionary/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts
index 4ed6917ba9..69bfbf91f3 100644
--- a/style-dictionary/one-theme/colors.ts
+++ b/style-dictionary/one-theme/colors.ts
@@ -166,6 +166,10 @@ const tokens: StyleDictionary.ColorsDictionary = {
colorDropzoneTextHover: { light: '{colorNeutral650}', dark: '{colorNeutral350}' },
colorDropzoneBorderDefault: { light: '{colorNeutral500}', dark: '{colorNeutral600}' },
colorDropzoneBorderHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
+
+ // ── Side Nav ─────────────────────────────────────────────────────────────────
+ colorTextSideNavigationItemActive: { light: '{colorPrimary600}', dark: '{colorPrimary300}' },
+ colorBackgroundSideNavigationItemActive: { light: '{colorPrimary50}', dark: 'rgba(0, 153, 255, 0.13)' },
};
const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge(
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 95403648e4..dde08c5a1b 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -609,6 +609,7 @@ export type ColorsTokenName =
| 'colorBackgroundSegmentDisabled'
| 'colorBackgroundSegmentHover'
| 'colorBackgroundSegmentWrapper'
+ | 'colorBackgroundSideNavigationItemActive'
| 'colorBackgroundSkeleton'
| 'colorBackgroundSkeletonWave'
| 'colorBackgroundSliderRangeDefault'
@@ -827,6 +828,7 @@ export type ColorsTokenName =
| 'colorTextSegmentActive'
| 'colorTextSegmentDefault'
| 'colorTextSegmentHover'
+ | 'colorTextSideNavigationItemActive'
| 'colorTextSmall'
| 'colorTextStatusError'
| 'colorTextStatusInactive'
@@ -1065,7 +1067,8 @@ export type SizesTokenName =
| 'sizeIconNormal'
| 'sizeTableSelectionHorizontal'
| 'sizeVerticalInput'
- | 'sizeVerticalPanelIconOffset';
+ | 'sizeVerticalPanelIconOffset'
+ | 'sizeSideNavigationItemHeight';
export type SpacingTokenName =
| 'spaceAlertActionLeft'
| 'spaceAlertHorizontal'
@@ -1138,6 +1141,8 @@ export type SpacingTokenName =
| 'spaceTableHorizontal'
| 'spaceTileGutter'
| 'spaceTreeViewIndentation'
+ | 'spaceSideNavigationItemGap'
+ | 'spaceSideNavigationItemCollapsedGap'
| 'spaceL'
| 'spaceM'
| 'spaceNone'
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index ad8861e5f6..165f03b0bf 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -92,6 +92,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
colorBackgroundSegmentDisabled: '{colorBackgroundButtonNormalDisabled}',
colorBackgroundSegmentHover: '{colorBackgroundButtonNormalHover}',
colorBackgroundSegmentWrapper: '{colorBackgroundContainerContent}',
+ colorBackgroundSideNavigationItemActive: 'transparent',
colorBackgroundSliderRangeDefault: '{colorBackgroundSliderHandleDefault}',
colorBackgroundSliderRangeActive: '{colorBackgroundSliderHandleActive}',
colorBackgroundSliderHandleDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
@@ -309,6 +310,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
colorTextSegmentActive: { light: '{colorWhite}', dark: '{colorNeutral950}' },
colorTextSegmentDefault: { light: '{colorNeutral650}', dark: '{colorNeutral300}' },
colorTextSegmentHover: '{colorTextButtonNormalHover}',
+ colorTextSideNavigationItemActive: '{colorTextAccent}',
colorTextSmall: { light: '{colorNeutral600}', dark: '{colorNeutral450}' },
colorTextStatusError: { light: '{colorError600}', dark: '{colorError400}' },
colorTextStatusInactive: { light: '{colorNeutral600}', dark: '{colorNeutral450}' },
diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts
index 74068ff1b7..4ef38f50f6 100644
--- a/style-dictionary/visual-refresh/metadata/colors.ts
+++ b/style-dictionary/visual-refresh/metadata/colors.ts
@@ -179,6 +179,8 @@ const metadata: StyleDictionary.MetadataIndex = {
colorBackgroundLayoutPanelContent: {
description:
'The background color of app layout panel content area. For example: The side navigation and tools panel content background color.',
+ public: true,
+ themeable: true,
},
colorBackgroundLayoutToolbar: {
description:
@@ -281,6 +283,11 @@ const metadata: StyleDictionary.MetadataIndex = {
public: true,
themeable: true,
},
+ colorBackgroundSideNavigationItemActive: {
+ description: 'The background color of an active (highlighted) side navigation item.',
+ public: true,
+ themeable: true,
+ },
colorBackgroundSliderHandleDefault: {
description: 'The default background color of the slider handle.',
themeable: true,
@@ -988,6 +995,11 @@ const metadata: StyleDictionary.MetadataIndex = {
public: true,
themeable: true,
},
+ colorTextSideNavigationItemActive: {
+ description: 'The text color of an active (highlighted) side navigation item.',
+ public: true,
+ themeable: true,
+ },
colorTextStatusError: {
description: 'The color of error text and icons. For example: form field error text and error status indicators.',
public: true,
diff --git a/style-dictionary/visual-refresh/metadata/sizes.ts b/style-dictionary/visual-refresh/metadata/sizes.ts
index 5231424e5b..f4e41b8d7e 100644
--- a/style-dictionary/visual-refresh/metadata/sizes.ts
+++ b/style-dictionary/visual-refresh/metadata/sizes.ts
@@ -9,6 +9,11 @@ const metadata: StyleDictionary.MetadataIndex = {
public: true,
themeable: true,
},
+ sizeSideNavigationItemHeight: {
+ description: 'The minimum height of side navigation items.',
+ public: true,
+ themeable: true,
+ },
};
export default metadata;
diff --git a/style-dictionary/visual-refresh/metadata/spacing.ts b/style-dictionary/visual-refresh/metadata/spacing.ts
index 8b68212714..02a8569c40 100644
--- a/style-dictionary/visual-refresh/metadata/spacing.ts
+++ b/style-dictionary/visual-refresh/metadata/spacing.ts
@@ -174,6 +174,16 @@ const metadata: StyleDictionary.MetadataIndex = {
public: true,
themeable: false,
},
+ spaceSideNavigationItemGap: {
+ description: 'The vertical gap between side navigation items.',
+ public: true,
+ themeable: true,
+ },
+ spaceSideNavigationItemCollapsedGap: {
+ description: 'The vertical gap between side navigation items in collapsed state.',
+ public: true,
+ themeable: true,
+ },
spaceButtonHorizontal: {
description: 'The horizontal padding inside buttons.',
public: true,
diff --git a/style-dictionary/visual-refresh/sizes.ts b/style-dictionary/visual-refresh/sizes.ts
index d80230db33..64449d28ec 100644
--- a/style-dictionary/visual-refresh/sizes.ts
+++ b/style-dictionary/visual-refresh/sizes.ts
@@ -13,6 +13,7 @@ const tokens: StyleDictionary.SizesDictionary = {
sizeTableSelectionHorizontal: '40px',
sizeVerticalInput: { comfortable: '32px', compact: '28px' },
sizeVerticalPanelIconOffset: { comfortable: '15px', compact: '13px' },
+ sizeSideNavigationItemHeight: { comfortable: '28px', compact: '24px' },
};
const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary(tokens);
diff --git a/style-dictionary/visual-refresh/spacing.ts b/style-dictionary/visual-refresh/spacing.ts
index 2dae31ea8b..0432575e4b 100644
--- a/style-dictionary/visual-refresh/spacing.ts
+++ b/style-dictionary/visual-refresh/spacing.ts
@@ -52,7 +52,7 @@ const tokens: StyleDictionary.SpacingDictionary = {
spaceLayoutTogglePadding: '{spaceStaticS}',
spaceModalContentBottom: '{spaceScaled2xM}',
spaceModalHorizontal: '{spaceContainerHorizontal}',
- spacePanelContentBottom: '{spaceScaledXxxl}',
+ spacePanelContentBottom: '{spaceScaledL}',
spacePanelContentTop: '{spaceScaledL}',
spacePanelDividerMarginHorizontal: '{spaceXs}',
spacePanelHeaderVertical: '{spaceScaledL}',
@@ -74,6 +74,8 @@ const tokens: StyleDictionary.SpacingDictionary = {
spaceTableHeaderToolsFullPageBottom: '4px',
spaceTableHorizontal: '{spaceContainerHorizontal}',
spaceTreeViewIndentation: '{spaceXl}',
+ spaceSideNavigationItemGap: '0px',
+ spaceSideNavigationItemCollapsedGap: '{spaceXs}',
spaceTileGutter: { comfortable: '{spaceXl}', compact: '{spaceM}' },
spaceActionCardHorizontalDefault: '{spaceCardHorizontalDefault}',
spaceActionCardHorizontalEmbedded: '{spaceCardHorizontalEmbedded}',