feat: Update one-theme compact mode values

src/__integ__/__snapshots__/themes.test.ts.snap

@@ -919,11 +919,13 @@ 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",
   "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",
@@ -989,6 +991,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",
@@ -1931,11 +1934,13 @@ 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",
   "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",
@@ -2001,6 +2006,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",
@@ -2943,11 +2949,13 @@ 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",
   "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",
@@ -3013,6 +3021,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",
@@ -3955,11 +3964,13 @@ 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",
   "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",
@@ -4025,6 +4036,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",
@@ -4967,11 +4979,13 @@ 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",
   "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",
@@ -5037,6 +5051,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",
@@ -5979,11 +5994,13 @@ 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",
   "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",
@@ -6049,6 +6066,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",
@@ -6991,11 +7009,13 @@ 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",
   "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",
@@ -7061,6 +7081,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",
@@ -8003,11 +8024,13 @@ 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",
   "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",
@@ -8073,6 +8096,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",

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 {

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);
     }
   }
 

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(

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 {

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(

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}',
@@ -27,6 +28,7 @@ const tokens: StyleDictionary.SpacingDictionary = {
   spaceCardVerticalEmbedded: { comfortable: '10px', compact: '{spaceXs}' },
   spaceCodeEditorStatusFocusOutlineGutter: '3px',
   spaceContainerContentTop: '{spaceScaledM}',
+  spaceContainerContentVertical: '{spaceScaledL}',
   spaceContainerHeaderTop: '{spaceScaledS}',
   spaceContainerHeaderBottom: '{spaceScaledS}',
   spaceContainerHorizontal: '{spaceL}',
@@ -61,6 +63,7 @@ const tokens: StyleDictionary.SpacingDictionary = {
   spaceTableHeaderHorizontal: '{spaceContainerHorizontal}',
   spaceTableHeaderToolsBottom: '{spaceScaledXxs}',
   spaceTableHorizontal: '0px',
+  spaceTableCellVertical: '{spaceScaledXs}',
   spaceTokenVertical: '{spaceScaledXxs}',
   spaceActionCardHorizontalDefault: '{spaceCardHorizontalDefault}',
   spaceActionCardHorizontalEmbedded: '{spaceCardHorizontalEmbedded}',

style-dictionary/one-theme/contexts/compact-table.ts

@@ -0,0 +1,35 @@
+// 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';
+import { tokens as parentTokens } from '../spacing.js';
+
+const spacingTokens: StyleDictionary.SpacingDictionary = {
+  spaceScaledXxxs: '{spaceNone}',
+  spaceScaledXxs: '{spaceXxxs}',
+  spaceScaledXs: '{spaceXxs}',
+  spaceScaledS: '{spaceXs}',
+  spaceScaledM: '{spaceS}',
+  spaceScaledL: '{spaceM}',
+  spaceScaledXl: '{spaceL}',
+  spaceScaledXxl: '{spaceXl}',
+  spaceScaledXxxl: '{spaceXxl}',
+
+  spaceExpandToggleFocusOutlineGutter: '1px',
+  spaceTableCellVertical: '2px',
+};
+
+const sizeTokens: StyleDictionary.SizesDictionary = {
+  sizeVerticalInput: '28px',
+  fontSizeTable: '{fontSizeBodyS}',
+  tableLineHeight: '{lineHeightBodyS}',
+  fontTableLetterSpacing: '{letterSpacingBodyS}',
+};
+
+const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary(
+  merge({}, parentTokens, { ...spacingTokens, ...sizeTokens })
+);
+
+export { expandedTokens as tokens };

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));

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(

style-dictionary/one-theme/spacing.ts

@@ -14,6 +14,11 @@ 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' },
+  spaceExpandToggleFocusOutlineGutter: { comfortable: '4px', compact: '1px' },
+  spaceTableCellVertical: { comfortable: '4px', compact: '2px' },
 };
 
 const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = merge(

style-dictionary/utils/token-names.ts

@@ -1160,13 +1160,17 @@ export type SizesTokenName =
   | 'sizeVerticalPanelIconOffset'
   | 'sizeSideNavigationItemHeight'
   | 'sizeSideNavigationItemCollapsed'
-  | 'sizeSideNavigationCollapsedWidth';
+  | 'sizeSideNavigationCollapsedWidth'
+  | 'fontSizeTable'
+  | 'tableLineHeight'
+  | 'fontTableLetterSpacing';
 export type SpacingTokenName =
   | 'spaceAlertActionLeft'
   | 'spaceAlertHorizontal'
   | 'spaceAlertMessageRight'
   | 'spaceAlertVertical'
   | 'spaceButtonFocusOutlineGutter'
+  | 'spaceExpandToggleFocusOutlineGutter'
   | 'spaceButtonHorizontal'
   | 'spaceButtonVertical'
   | 'spaceTokenVertical'
@@ -1188,6 +1192,7 @@ export type SpacingTokenName =
   | 'spaceItemCardVerticalEmbedded'
   | 'spaceCodeEditorStatusFocusOutlineGutter'
   | 'spaceContainerContentTop'
+  | 'spaceContainerContentVertical'
   | 'spaceContainerHeaderTop'
   | 'spaceContainerHeaderBottom'
   | 'spaceContainerHorizontal'
@@ -1231,6 +1236,7 @@ export type SpacingTokenName =
   | 'spaceTableHeaderToolsBottom'
   | 'spaceTableHeaderToolsFullPageBottom'
   | 'spaceTableHorizontal'
+  | 'spaceTableCellVertical'
   | 'spaceTileGutter'
   | 'spaceTreeViewIndentation'
   | 'spaceSideNavigationItemDefaultGap'

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);

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}',
@@ -30,6 +31,7 @@ const tokens: StyleDictionary.SpacingDictionary = {
   spaceItemCardVerticalEmbedded: '{spaceCardVerticalEmbedded}',
   spaceCodeEditorStatusFocusOutlineGutter: '-7px',
   spaceContainerContentTop: '{spaceXxs}',
+  spaceContainerContentVertical: '{spaceScaledL}',
   spaceContainerHeaderTop: '{spaceS}',
   spaceContainerHeaderBottom: '{spaceScaledXs}',
   spaceContainerHorizontal: '{spaceL}',
@@ -73,6 +75,7 @@ const tokens: StyleDictionary.SpacingDictionary = {
   spaceTableHeaderToolsBottom: '0px',
   spaceTableHeaderToolsFullPageBottom: '4px',
   spaceTableHorizontal: '{spaceContainerHorizontal}',
+  spaceTableCellVertical: '{spaceScaledXs}',
   spaceTreeViewIndentation: '{spaceXl}',
   spaceSideNavigationItemDefaultGap: '{spaceNone}',
   spaceSideNavigationItemIconGap: '{spaceXxs}',