From dad75eed73d9167bb8e75b9a414b9d87f73e757a Mon Sep 17 00:00:00 2001 From: Cansu Aksu Date: Mon, 31 Aug 2026 16:34:05 +0200 Subject: [PATCH 1/3] update container and table paddings --- src/__integ__/__snapshots__/themes.test.ts.snap | 16 ++++++++++++++++ src/container/styles.scss | 2 +- src/table/body-cell/styles.scss | 2 +- style-dictionary/classic/spacing.ts | 2 ++ .../one-theme/contexts/compact-table.ts | 15 +++++++++++++++ style-dictionary/one-theme/spacing.ts | 3 +++ style-dictionary/utils/token-names.ts | 2 ++ style-dictionary/visual-refresh/spacing.ts | 2 ++ 8 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 style-dictionary/one-theme/contexts/compact-table.ts diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 458419a674..29b7407f11 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -918,6 +918,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "space-card-vertical-embedded": "8px", "space-code-editor-status-focus-outline-gutter": "3px", "space-container-content-top": "12px", + "space-container-content-vertical": "16px", "space-container-header-bottom": "8px", "space-container-header-top": "8px", "space-container-horizontal": "20px", @@ -988,6 +989,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "space-static-xxxl": "40px", "space-static-xxxs": "2px", "space-status-indicator-padding-horizontal": "0px", + "space-table-cell-vertical": "4px", "space-table-content-bottom": "0px", "space-table-embedded-header-top": "8px", "space-table-footer-horizontal": "20px", @@ -1929,6 +1931,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "space-card-vertical-embedded": "10px", "space-code-editor-status-focus-outline-gutter": "3px", "space-container-content-top": "16px", + "space-container-content-vertical": "20px", "space-container-header-bottom": "12px", "space-container-header-top": "12px", "space-container-horizontal": "20px", @@ -1999,6 +2002,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "space-static-xxxl": "40px", "space-static-xxxs": "2px", "space-status-indicator-padding-horizontal": "0px", + "space-table-cell-vertical": "8px", "space-table-content-bottom": "0px", "space-table-embedded-header-top": "12px", "space-table-footer-horizontal": "20px", @@ -2940,6 +2944,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "space-card-vertical-embedded": "10px", "space-code-editor-status-focus-outline-gutter": "3px", "space-container-content-top": "16px", + "space-container-content-vertical": "20px", "space-container-header-bottom": "12px", "space-container-header-top": "12px", "space-container-horizontal": "20px", @@ -3010,6 +3015,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "space-static-xxxl": "40px", "space-static-xxxs": "2px", "space-status-indicator-padding-horizontal": "0px", + "space-table-cell-vertical": "8px", "space-table-content-bottom": "0px", "space-table-embedded-header-top": "12px", "space-table-footer-horizontal": "20px", @@ -3951,6 +3957,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "space-card-vertical-embedded": "10px", "space-code-editor-status-focus-outline-gutter": "3px", "space-container-content-top": "16px", + "space-container-content-vertical": "20px", "space-container-header-bottom": "12px", "space-container-header-top": "12px", "space-container-horizontal": "20px", @@ -4021,6 +4028,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "space-static-xxxl": "40px", "space-static-xxxs": "2px", "space-status-indicator-padding-horizontal": "0px", + "space-table-cell-vertical": "8px", "space-table-content-bottom": "0px", "space-table-embedded-header-top": "12px", "space-table-footer-horizontal": "20px", @@ -4962,6 +4970,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "space-card-vertical-embedded": "10px", "space-code-editor-status-focus-outline-gutter": "-7px", "space-container-content-top": "4px", + "space-container-content-vertical": "20px", "space-container-header-bottom": "8px", "space-container-header-top": "12px", "space-container-horizontal": "20px", @@ -5032,6 +5041,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "space-static-xxxl": "40px", "space-static-xxxs": "2px", "space-status-indicator-padding-horizontal": "0px", + "space-table-cell-vertical": "8px", "space-table-content-bottom": "4px", "space-table-embedded-header-top": "0px", "space-table-footer-horizontal": "0px", @@ -5973,6 +5983,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-card-vertical-embedded": "8px", "space-code-editor-status-focus-outline-gutter": "-7px", "space-container-content-top": "4px", + "space-container-content-vertical": "16px", "space-container-header-bottom": "4px", "space-container-header-top": "12px", "space-container-horizontal": "20px", @@ -6043,6 +6054,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-static-xxxl": "40px", "space-static-xxxs": "2px", "space-status-indicator-padding-horizontal": "0px", + "space-table-cell-vertical": "4px", "space-table-content-bottom": "4px", "space-table-embedded-header-top": "0px", "space-table-footer-horizontal": "0px", @@ -6984,6 +6996,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-card-vertical-embedded": "10px", "space-code-editor-status-focus-outline-gutter": "-7px", "space-container-content-top": "4px", + "space-container-content-vertical": "20px", "space-container-header-bottom": "8px", "space-container-header-top": "12px", "space-container-horizontal": "20px", @@ -7054,6 +7067,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-static-xxxl": "40px", "space-static-xxxs": "2px", "space-status-indicator-padding-horizontal": "0px", + "space-table-cell-vertical": "8px", "space-table-content-bottom": "4px", "space-table-embedded-header-top": "0px", "space-table-footer-horizontal": "0px", @@ -7995,6 +8009,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-card-vertical-embedded": "10px", "space-code-editor-status-focus-outline-gutter": "-7px", "space-container-content-top": "4px", + "space-container-content-vertical": "20px", "space-container-header-bottom": "8px", "space-container-header-top": "12px", "space-container-horizontal": "20px", @@ -8065,6 +8080,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-static-xxxl": "40px", "space-static-xxxs": "2px", "space-status-indicator-padding-horizontal": "0px", + "space-table-cell-vertical": "8px", "space-table-content-bottom": "4px", "space-table-embedded-header-top": "0px", "space-table-footer-horizontal": "0px", diff --git a/src/container/styles.scss b/src/container/styles.scss index c37e6a61aa..d78b136e29 100644 --- a/src/container/styles.scss +++ b/src/container/styles.scss @@ -264,7 +264,7 @@ flex: 1; &.with-paddings { - padding-block: awsui.$space-scaled-l; + padding-block: awsui.$space-container-content-vertical; padding-inline: awsui.$space-container-horizontal; &.with-header { diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss index a25f7f3f55..d58796b27f 100644 --- a/src/table/body-cell/styles.scss +++ b/src/table/body-cell/styles.scss @@ -7,7 +7,7 @@ @use '../../internal/styles/tokens' as awsui; @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible; -$cell-vertical-padding: awsui.$space-scaled-xs; +$cell-vertical-padding: awsui.$space-table-cell-vertical; // Calculate padding to prevent a shift in content after selection due to the difference // between selected border widths and normal row divider widths (visual refresh). $cell-vertical-padding-w-border: calc( diff --git a/style-dictionary/classic/spacing.ts b/style-dictionary/classic/spacing.ts index 85eb999fa4..7e015f1733 100644 --- a/style-dictionary/classic/spacing.ts +++ b/style-dictionary/classic/spacing.ts @@ -27,6 +27,7 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceCardVerticalEmbedded: { comfortable: '10px', compact: '{spaceXs}' }, spaceCodeEditorStatusFocusOutlineGutter: '3px', spaceContainerContentTop: '{spaceScaledM}', + spaceContainerContentVertical: '{spaceScaledL}', spaceContainerHeaderTop: '{spaceScaledS}', spaceContainerHeaderBottom: '{spaceScaledS}', spaceContainerHorizontal: '{spaceL}', @@ -61,6 +62,7 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceTableHeaderHorizontal: '{spaceContainerHorizontal}', spaceTableHeaderToolsBottom: '{spaceScaledXxs}', spaceTableHorizontal: '0px', + spaceTableCellVertical: '{spaceScaledXs}', spaceTokenVertical: '{spaceScaledXxs}', spaceActionCardHorizontalDefault: '{spaceCardHorizontalDefault}', spaceActionCardHorizontalEmbedded: '{spaceCardHorizontalEmbedded}', diff --git a/style-dictionary/one-theme/contexts/compact-table.ts b/style-dictionary/one-theme/contexts/compact-table.ts new file mode 100644 index 0000000000..f3bca57cb6 --- /dev/null +++ b/style-dictionary/one-theme/contexts/compact-table.ts @@ -0,0 +1,15 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import merge from 'lodash/merge.js'; + +import { expandDensityDictionary } from '../../utils/index.js'; +import { StyleDictionary } from '../../utils/interfaces.js'; + +const tokens: StyleDictionary.SpacingDictionary = { + spaceButtonFocusOutlineGutter: { comfortable: '4px', compact: '3px' }, + spaceTableCellVertical: { comfortable: '4px', compact: '2px' }, +}; + +const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary(merge({}, tokens)); + +export { expandedTokens as tokens }; diff --git a/style-dictionary/one-theme/spacing.ts b/style-dictionary/one-theme/spacing.ts index 1dcdfcc0cf..b7bf9003e9 100644 --- a/style-dictionary/one-theme/spacing.ts +++ b/style-dictionary/one-theme/spacing.ts @@ -14,6 +14,9 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceTokenVertical: '1px', spaceFieldVertical: { comfortable: '4px', compact: '2px' }, spaceStatusIndicatorPaddingHorizontal: '2px', + spaceContainerHeaderTop: { comfortable: '12px', compact: '8px' }, + spaceContainerHorizontal: { comfortable: '20px', compact: '12px' }, + spaceContainerContentVertical: { comfortable: '20px', compact: '8px' }, }; const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = merge( diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index 048801c434..9532e13d03 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -1187,6 +1187,7 @@ export type SpacingTokenName = | 'spaceItemCardVerticalEmbedded' | 'spaceCodeEditorStatusFocusOutlineGutter' | 'spaceContainerContentTop' + | 'spaceContainerContentVertical' | 'spaceContainerHeaderTop' | 'spaceContainerHeaderBottom' | 'spaceContainerHorizontal' @@ -1230,6 +1231,7 @@ export type SpacingTokenName = | 'spaceTableHeaderToolsBottom' | 'spaceTableHeaderToolsFullPageBottom' | 'spaceTableHorizontal' + | 'spaceTableCellVertical' | 'spaceTileGutter' | 'spaceTreeViewIndentation' | 'spaceSideNavigationItemDefaultGap' diff --git a/style-dictionary/visual-refresh/spacing.ts b/style-dictionary/visual-refresh/spacing.ts index 6c65d2f28d..bf14fd9eee 100644 --- a/style-dictionary/visual-refresh/spacing.ts +++ b/style-dictionary/visual-refresh/spacing.ts @@ -30,6 +30,7 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceItemCardVerticalEmbedded: '{spaceCardVerticalEmbedded}', spaceCodeEditorStatusFocusOutlineGutter: '-7px', spaceContainerContentTop: '{spaceXxs}', + spaceContainerContentVertical: '{spaceScaledL}', spaceContainerHeaderTop: '{spaceS}', spaceContainerHeaderBottom: '{spaceScaledXs}', spaceContainerHorizontal: '{spaceL}', @@ -73,6 +74,7 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceTableHeaderToolsBottom: '0px', spaceTableHeaderToolsFullPageBottom: '4px', spaceTableHorizontal: '{spaceContainerHorizontal}', + spaceTableCellVertical: '{spaceScaledXs}', spaceTreeViewIndentation: '{spaceXl}', spaceSideNavigationItemDefaultGap: '{spaceNone}', spaceSideNavigationItemIconGap: '{spaceXxs}', From 0686843f007f818048e70747c8b36133c3a65112 Mon Sep 17 00:00:00 2001 From: Cansu Aksu Date: Wed, 2 Sep 2026 14:05:56 +0200 Subject: [PATCH 2/3] fix table design tokens --- .../__snapshots__/themes.test.ts.snap | 8 ++++++ .../expand-toggle-button/styles.scss | 2 +- style-dictionary/classic/spacing.ts | 1 + .../one-theme/contexts/compact-table.ts | 25 ++++++++++++++++--- style-dictionary/one-theme/index.ts | 2 +- style-dictionary/one-theme/spacing.ts | 2 ++ style-dictionary/utils/token-names.ts | 1 + style-dictionary/visual-refresh/spacing.ts | 1 + 8 files changed, 36 insertions(+), 6 deletions(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 2762eaad4c..2fd7adef59 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -925,6 +925,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "space-container-horizontal": "20px", "space-content-header-padding-bottom": "12px", "space-dark-header-overlap-distance": "0px", + "space-expand-toggle-focus-outline-gutter": "3px", "space-expandable-section-icon-offset-top": "4px", "space-field-horizontal": "8px", "space-field-icon-offset": "32px", @@ -1939,6 +1940,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "space-container-horizontal": "20px", "space-content-header-padding-bottom": "16px", "space-dark-header-overlap-distance": "0px", + "space-expand-toggle-focus-outline-gutter": "3px", "space-expandable-section-icon-offset-top": "8px", "space-field-horizontal": "8px", "space-field-icon-offset": "32px", @@ -2953,6 +2955,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "space-container-horizontal": "20px", "space-content-header-padding-bottom": "16px", "space-dark-header-overlap-distance": "0px", + "space-expand-toggle-focus-outline-gutter": "3px", "space-expandable-section-icon-offset-top": "8px", "space-field-horizontal": "8px", "space-field-icon-offset": "32px", @@ -3967,6 +3970,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "space-container-horizontal": "20px", "space-content-header-padding-bottom": "16px", "space-dark-header-overlap-distance": "0px", + "space-expand-toggle-focus-outline-gutter": "3px", "space-expandable-section-icon-offset-top": "8px", "space-field-horizontal": "8px", "space-field-icon-offset": "32px", @@ -4981,6 +4985,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "space-container-horizontal": "20px", "space-content-header-padding-bottom": "16px", "space-dark-header-overlap-distance": "36px", + "space-expand-toggle-focus-outline-gutter": "4px", "space-expandable-section-icon-offset-top": "4px", "space-field-horizontal": "12px", "space-field-icon-offset": "36px", @@ -5995,6 +6000,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-container-horizontal": "20px", "space-content-header-padding-bottom": "12px", "space-dark-header-overlap-distance": "32px", + "space-expand-toggle-focus-outline-gutter": "4px", "space-expandable-section-icon-offset-top": "0px", "space-field-horizontal": "12px", "space-field-icon-offset": "36px", @@ -7009,6 +7015,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-container-horizontal": "20px", "space-content-header-padding-bottom": "16px", "space-dark-header-overlap-distance": "36px", + "space-expand-toggle-focus-outline-gutter": "4px", "space-expandable-section-icon-offset-top": "4px", "space-field-horizontal": "12px", "space-field-icon-offset": "36px", @@ -8023,6 +8030,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-container-horizontal": "20px", "space-content-header-padding-bottom": "16px", "space-dark-header-overlap-distance": "36px", + "space-expand-toggle-focus-outline-gutter": "4px", "space-expandable-section-icon-offset-top": "4px", "space-field-horizontal": "12px", "space-field-icon-offset": "36px", diff --git a/src/internal/components/expand-toggle-button/styles.scss b/src/internal/components/expand-toggle-button/styles.scss index 67c19a28b2..44cae67592 100644 --- a/src/internal/components/expand-toggle-button/styles.scss +++ b/src/internal/components/expand-toggle-button/styles.scss @@ -44,7 +44,7 @@ // so we disable this one &:not(.disable-focus-highlight) { @include focus-visible.when-visible { - @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter); + @include styles.focus-highlight(awsui.$space-expand-toggle-focus-outline-gutter); } } diff --git a/style-dictionary/classic/spacing.ts b/style-dictionary/classic/spacing.ts index 7e015f1733..0da5f650ab 100644 --- a/style-dictionary/classic/spacing.ts +++ b/style-dictionary/classic/spacing.ts @@ -12,6 +12,7 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceAlertMessageRight: '0px', spaceAlertVertical: '{spaceScaledS}', spaceButtonFocusOutlineGutter: '3px', + spaceExpandToggleFocusOutlineGutter: '{spaceButtonFocusOutlineGutter}', spaceButtonHorizontal: '{spaceL}', spaceFieldVertical: { comfortable: '4px', compact: '2px' }, spaceButtonIconFocusOutlineGutterVertical: '{spaceButtonFocusOutlineGutter}', diff --git a/style-dictionary/one-theme/contexts/compact-table.ts b/style-dictionary/one-theme/contexts/compact-table.ts index f3bca57cb6..ec99cb4990 100644 --- a/style-dictionary/one-theme/contexts/compact-table.ts +++ b/style-dictionary/one-theme/contexts/compact-table.ts @@ -4,12 +4,29 @@ import merge from 'lodash/merge.js'; import { expandDensityDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; +import { tokens as parentTokens } from '../spacing.js'; -const tokens: StyleDictionary.SpacingDictionary = { - spaceButtonFocusOutlineGutter: { comfortable: '4px', compact: '3px' }, - spaceTableCellVertical: { comfortable: '4px', compact: '2px' }, +const spacingTokens: StyleDictionary.SpacingDictionary = { + spaceScaledXxxs: '{spaceNone}', + spaceScaledXxs: '{spaceXxxs}', + spaceScaledXs: '{spaceXxs}', + spaceScaledS: '{spaceXs}', + spaceScaledM: '{spaceS}', + spaceScaledL: '{spaceM}', + spaceScaledXl: '{spaceL}', + spaceScaledXxl: '{spaceXl}', + spaceScaledXxxl: '{spaceXxl}', + + spaceExpandToggleFocusOutlineGutter: '3px', + spaceTableCellVertical: '2px', +}; + +const sizeTokens: StyleDictionary.SizesDictionary = { + sizeVerticalInput: '28px', }; -const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary(merge({}, tokens)); +const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary( + merge({}, parentTokens, { ...spacingTokens, ...sizeTokens }) +); export { expandedTokens as tokens }; diff --git a/style-dictionary/one-theme/index.ts b/style-dictionary/one-theme/index.ts index 87c5e2a11f..a92f0b8ffb 100644 --- a/style-dictionary/one-theme/index.ts +++ b/style-dictionary/one-theme/index.ts @@ -43,7 +43,7 @@ tokenCategories.forEach(({ tokens, mode: modeId, referenceTokens }) => { builder.addTokens(tokens, mode); }); -builder.addContext(createCompactTableContext((await import('../visual-refresh/contexts/compact-table.js')).tokens)); +builder.addContext(createCompactTableContext((await import('./contexts/compact-table.js')).tokens)); builder.addContext(createAppLayoutToolbarContext((await import('./contexts/app-layout-toolbar.js')).tokens)); builder.addContext(createTopNavigationContext((await import('./contexts/top-navigation.js')).tokens)); builder.addContext(createHeaderContext((await import('./contexts/header.js')).tokens)); diff --git a/style-dictionary/one-theme/spacing.ts b/style-dictionary/one-theme/spacing.ts index b7bf9003e9..5ae449dea9 100644 --- a/style-dictionary/one-theme/spacing.ts +++ b/style-dictionary/one-theme/spacing.ts @@ -17,6 +17,8 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceContainerHeaderTop: { comfortable: '12px', compact: '8px' }, spaceContainerHorizontal: { comfortable: '20px', compact: '12px' }, spaceContainerContentVertical: { comfortable: '20px', compact: '8px' }, + spaceExpandToggleFocusOutlineGutter: { comfortable: '8px', compact: '3px' }, + spaceTableCellVertical: { comfortable: '4px', compact: '2px' }, }; const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = merge( diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index a55ef0513f..6325075fa8 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -1167,6 +1167,7 @@ export type SpacingTokenName = | 'spaceAlertMessageRight' | 'spaceAlertVertical' | 'spaceButtonFocusOutlineGutter' + | 'spaceExpandToggleFocusOutlineGutter' | 'spaceButtonHorizontal' | 'spaceButtonVertical' | 'spaceTokenVertical' diff --git a/style-dictionary/visual-refresh/spacing.ts b/style-dictionary/visual-refresh/spacing.ts index bf14fd9eee..d5deed820f 100644 --- a/style-dictionary/visual-refresh/spacing.ts +++ b/style-dictionary/visual-refresh/spacing.ts @@ -9,6 +9,7 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceAlertMessageRight: '{spaceXxs}', spaceAlertVertical: '{spaceFlashbarVertical}', spaceButtonFocusOutlineGutter: '4px', + spaceExpandToggleFocusOutlineGutter: '{spaceButtonFocusOutlineGutter}', spaceButtonHorizontal: '{spaceScaledL}', spaceButtonVertical: '{spaceScaledXxs}', spaceTokenVertical: '{spaceScaledXxs}', From 6e10f2c1c5b84a7ebb6ce9723a81f9cc39df2737 Mon Sep 17 00:00:00 2001 From: Cansu Aksu Date: Thu, 3 Sep 2026 16:34:20 +0200 Subject: [PATCH 3/3] more tokens for table --- src/table/styles.scss | 12 +++++++++++- style-dictionary/classic/sizes.ts | 3 +++ style-dictionary/one-theme/contexts/compact-table.ts | 5 ++++- style-dictionary/one-theme/sizes.ts | 3 +++ style-dictionary/one-theme/spacing.ts | 2 +- style-dictionary/utils/token-names.ts | 5 ++++- style-dictionary/visual-refresh/sizes.ts | 3 +++ 7 files changed, 29 insertions(+), 4 deletions(-) diff --git a/src/table/styles.scss b/src/table/styles.scss index feb1b6e759..e142ddea33 100644 --- a/src/table/styles.scss +++ b/src/table/styles.scss @@ -7,10 +7,20 @@ @use '../internal/styles/tokens' as awsui; @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible; @use '../container/shared' as container; +@use '../internal/styles/typography/constants.scss' as constants; .root { - @include styles.default-text-style; + font-size: awsui.$font-size-table; + line-height: awsui.$table-line-height; + letter-spacing: awsui.$font-table-letter-spacing; inline-size: 100%; + + // default styling from mixin default-text-style + color: awsui.$color-text-body-default; + font-weight: constants.$font-weight-normal; + font-family: awsui.$font-family-base; + -webkit-font-smoothing: auto; + -moz-osx-font-smoothing: auto; } .tools { diff --git a/style-dictionary/classic/sizes.ts b/style-dictionary/classic/sizes.ts index de09eeb2d7..0fa1379164 100644 --- a/style-dictionary/classic/sizes.ts +++ b/style-dictionary/classic/sizes.ts @@ -12,6 +12,9 @@ const tokens: StyleDictionary.SizesDictionary = { sizeIconMedium: '16px', sizeTableSelectionHorizontal: '54px', sizeVerticalInput: { comfortable: '32px', compact: '28px' }, + fontSizeTable: '{fontSizeBodyM}', + tableLineHeight: '{lineHeightBodyM}', + fontTableLetterSpacing: 'normal', }; const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = merge( diff --git a/style-dictionary/one-theme/contexts/compact-table.ts b/style-dictionary/one-theme/contexts/compact-table.ts index ec99cb4990..09582e5b0d 100644 --- a/style-dictionary/one-theme/contexts/compact-table.ts +++ b/style-dictionary/one-theme/contexts/compact-table.ts @@ -17,12 +17,15 @@ const spacingTokens: StyleDictionary.SpacingDictionary = { spaceScaledXxl: '{spaceXl}', spaceScaledXxxl: '{spaceXxl}', - spaceExpandToggleFocusOutlineGutter: '3px', + spaceExpandToggleFocusOutlineGutter: '1px', spaceTableCellVertical: '2px', }; const sizeTokens: StyleDictionary.SizesDictionary = { sizeVerticalInput: '28px', + fontSizeTable: '{fontSizeBodyS}', + tableLineHeight: '{lineHeightBodyS}', + fontTableLetterSpacing: '{letterSpacingBodyS}', }; const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary( diff --git a/style-dictionary/one-theme/sizes.ts b/style-dictionary/one-theme/sizes.ts index df76e5e8b3..d1cb21dbae 100644 --- a/style-dictionary/one-theme/sizes.ts +++ b/style-dictionary/one-theme/sizes.ts @@ -10,6 +10,9 @@ const tokens: StyleDictionary.SizesDictionary = { sizeVerticalInput: { comfortable: '30px', compact: '26px' }, sizeSideNavigationItemHeight: { comfortable: '30px', compact: '26px' }, sizeSideNavigationItemCollapsed: { comfortable: '28px', compact: '26px' }, + fontSizeTable: { comfortable: '{fontSizeBodyM}', compact: '{fontSizeBodyS}' }, + tableLineHeight: { comfortable: '{lineHeightBodyM}', compact: '{lineHeightBodyS}' }, + fontTableLetterSpacing: { comfortable: 'normal', compact: '{letterSpacingBodyS}' }, }; const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = merge( diff --git a/style-dictionary/one-theme/spacing.ts b/style-dictionary/one-theme/spacing.ts index 5ae449dea9..7245c414c5 100644 --- a/style-dictionary/one-theme/spacing.ts +++ b/style-dictionary/one-theme/spacing.ts @@ -17,7 +17,7 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceContainerHeaderTop: { comfortable: '12px', compact: '8px' }, spaceContainerHorizontal: { comfortable: '20px', compact: '12px' }, spaceContainerContentVertical: { comfortable: '20px', compact: '8px' }, - spaceExpandToggleFocusOutlineGutter: { comfortable: '8px', compact: '3px' }, + spaceExpandToggleFocusOutlineGutter: { comfortable: '4px', compact: '1px' }, spaceTableCellVertical: { comfortable: '4px', compact: '2px' }, }; diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index 6325075fa8..9d56a66eb4 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -1160,7 +1160,10 @@ export type SizesTokenName = | 'sizeVerticalPanelIconOffset' | 'sizeSideNavigationItemHeight' | 'sizeSideNavigationItemCollapsed' - | 'sizeSideNavigationCollapsedWidth'; + | 'sizeSideNavigationCollapsedWidth' + | 'fontSizeTable' + | 'tableLineHeight' + | 'fontTableLetterSpacing'; export type SpacingTokenName = | 'spaceAlertActionLeft' | 'spaceAlertHorizontal' diff --git a/style-dictionary/visual-refresh/sizes.ts b/style-dictionary/visual-refresh/sizes.ts index 748ab6a0c0..2612fbd04c 100644 --- a/style-dictionary/visual-refresh/sizes.ts +++ b/style-dictionary/visual-refresh/sizes.ts @@ -16,6 +16,9 @@ const tokens: StyleDictionary.SizesDictionary = { sizeSideNavigationItemHeight: { comfortable: '28px', compact: '24px' }, sizeSideNavigationItemCollapsed: { comfortable: '30px', compact: '28px' }, sizeSideNavigationCollapsedWidth: '52px', + fontSizeTable: '{fontSizeBodyM}', + tableLineHeight: '{lineHeightBodyM}', + fontTableLetterSpacing: 'normal', }; const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary(tokens);