diff --git a/docs/components/tabs.md b/docs/components/tabs.md index 0b5ce89ff..6b0cc230d 100644 --- a/docs/components/tabs.md +++ b/docs/components/tabs.md @@ -191,9 +191,9 @@ of color, typography, and shape. ### Primary tab tokens Token | Default value ------------------------------------------ | ----------------------------------- +----------------------------------------- | ------------- `--md-primary-tab-container-color` | `--md-sys-color-surface` -`--md-primary-tab-label-text-type` | `500 0.875rem/1.25rem Roboto` +`--md-primary-tab-label-text-font` | `--md-sys-typescale-title-small-font` `--md-primary-tab-active-indicator-color` | `--md-sys-color-primary` `--md-primary-tab-icon-color` | `--md-sys-color-on-surface-variant` `--md-primary-tab-container-shape` | `0px` @@ -217,7 +217,8 @@ Token | Default value --md-sys-color-primary: #005353; /* Component tokens */ - --md-primary-tab-label-text-type: 0.8em cursive, system-ui; + --md-primary-tab-label-text-font: cursive, system-ui; + --md-primary-tab-label-text-size: 0.8em; } @@ -233,7 +234,7 @@ Token | Default value Token | Default value ------------------------------------------- | ------------- `--md-secondary-tab-container-color` | `--md-sys-color-surface` -`--md-secondary-tab-label-text-type` | `500 0.875rem/1.25rem Roboto` +`--md-secondary-tab-label-text-font` | `--md-sys-typescale-title-small-font` `--md-secondary-tab-active-indicator-color` | `--md-sys-color-primary` `--md-secondary-tab-icon-color` | `--md-sys-color-on-surface-variant` `--md-secondary-tab-container-shape` | `0px` @@ -255,7 +256,8 @@ Token | Default value --md-sys-color-primary: #005353; /* Component tokens */ - --md-secondary-tab-label-text-type: 0.8em cursive, system-ui; + --md-secondary-tab-label-text-font: cursive, system-ui; + --md-secondary-tab-label-text-size: 0.8em; } diff --git a/tabs/demo/stories.ts b/tabs/demo/stories.ts index 30855dc95..fbe75b7b2 100644 --- a/tabs/demo/stories.ts +++ b/tabs/demo/stories.ts @@ -145,7 +145,8 @@ const custom: MaterialStoryInit = { css` .custom { /* text */ - --md-primary-tab-label-text-type: 0.8em cursive, system-ui; + --md-primary-tab-label-text-font: cursive, system-ui; + --md-primary-tab-label-text-size: 0.8em; /* indicator */ --md-primary-tab-active-indicator-color: firebrick; --md-primary-tab-active-indicator-height: 8px; diff --git a/tabs/internal/_tab.scss b/tabs/internal/_tab.scss index a6a2bfdbb..43a99a9ca 100644 --- a/tabs/internal/_tab.scss +++ b/tabs/internal/_tab.scss @@ -56,7 +56,10 @@ padding: 0 16px; margin: 0; z-index: 0; // Ensure this is a stacking context so the indicator displays - font: var(--_label-text-type); + font-family: var(--_label-text-font); + font-size: var(--_label-text-size); + line-height: var(--_label-text-line-height); + font-weight: var(--_label-text-weight); color: var(--_label-text-color); } diff --git a/tokens/_md-comp-primary-tab.scss b/tokens/_md-comp-primary-tab.scss index 6594e0d92..19148fd95 100644 --- a/tokens/_md-comp-primary-tab.scss +++ b/tokens/_md-comp-primary-tab.scss @@ -54,7 +54,10 @@ $supported-tokens: ( 'icon-color', 'icon-size', 'label-text-color', - 'label-text-type', + 'label-text-font', + 'label-text-line-height', + 'label-text-size', + 'label-text-weight', 'pressed-icon-color', 'pressed-label-text-color', 'pressed-state-layer-color', @@ -64,15 +67,14 @@ $supported-tokens: ( ); $unsupported-tokens: ( - 'with-label-text-label-text-font', - 'with-label-text-label-text-line-height', - 'with-label-text-label-text-size', - 'with-label-text-label-text-tracking', - 'with-label-text-label-text-weight', + // go/keep-sorted start 'active-focus-state-layer-color', 'active-focus-state-layer-opacity', 'focus-state-layer-color', - 'focus-state-layer-opacity' + 'focus-state-layer-opacity', + 'label-text-tracking', + 'label-text-type', + // go/keep-sorted end ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @@ -81,14 +83,6 @@ $unsupported-tokens: ( $exclude-hardcoded-values: $exclude-hardcoded-values ); - // TODO(b/271876162): remove when tokens compiler emits typescale tokens - $tokens: map.merge( - $tokens, - ( - 'label-text-type': map.get($deps, 'md-sys-typescale', 'title-small'), - ) - ); - @return values.validate( $tokens, $supported-tokens: $supported-tokens, @@ -112,6 +106,11 @@ $unsupported-tokens: ( 'with-icon-inactive-icon-color': 'icon-color', 'with-icon-inactive-pressed-icon-color': 'pressed-icon-color', // rename with-label-text- and inactive- + 'with-label-text-label-text-font': 'label-text-font', + 'with-label-text-label-text-line-height': 'label-text-line-height', + 'with-label-text-label-text-size': 'label-text-size', + 'with-label-text-label-text-tracking': 'label-text-tracking', + 'with-label-text-label-text-weight': 'label-text-weight', 'with-label-text-active-focus-label-text-color': 'active-focus-label-text-color', 'with-label-text-active-hover-label-text-color': diff --git a/tokens/_md-comp-secondary-tab.scss b/tokens/_md-comp-secondary-tab.scss index 37f242187..34c6257b2 100644 --- a/tokens/_md-comp-secondary-tab.scss +++ b/tokens/_md-comp-secondary-tab.scss @@ -54,7 +54,10 @@ $supported-tokens: ( 'icon-color', 'icon-size', 'label-text-color', - 'label-text-type', + 'label-text-font', + 'label-text-line-height', + 'label-text-size', + 'label-text-weight', 'pressed-icon-color', 'pressed-label-text-color', 'pressed-state-layer-color', @@ -66,11 +69,8 @@ $unsupported-tokens: ( // include an icon and the size will adjust; // height is 48 and it's 64 with icon 'container-shadow-color', - 'label-text-font', - 'label-text-line-height', - 'label-text-size', + 'label-text-type', 'label-text-tracking', - 'label-text-weight', 'focus-state-layer-color', 'focus-state-layer-opacity' ); @@ -81,14 +81,6 @@ $unsupported-tokens: ( $exclude-hardcoded-values: $exclude-hardcoded-values ); - // TODO(b/271876162): remove when tokens compiler emits typescale tokens - $tokens: map.merge( - $tokens, - ( - 'label-text-type': map.get($deps, 'md-sys-typescale', 'title-small'), - ) - ); - $tokens: _add-missing-secondary-tokens($tokens); $tokens: values.validate(