From 0c5a2a2886fd934c598361aacc0719ad484ade9b Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Wed, 6 Sep 2023 11:16:51 -0700 Subject: [PATCH] fix(text-field,select): remove font shorthand tokens BREAKING CHANGE: replace `*-type` font tokens with `-font`, `-size`, `-line-height`, and `-weight` PiperOrigin-RevId: 563160975 --- docs/components/text-field.md | 10 +++--- field/internal/_content.scss | 5 ++- field/internal/_label.scss | 5 ++- field/internal/_supporting-text.scss | 5 ++- select/internal/_filled-select.scss | 16 +++++++-- select/internal/_outlined-select.scss | 16 +++++++-- textfield/internal/_filled-text-field.scss | 15 +++++++-- textfield/internal/_outlined-text-field.scss | 15 +++++++-- tokens/_md-comp-filled-field.scss | 31 ++++++++++++++---- tokens/_md-comp-filled-select.scss | 30 ++++++++--------- tokens/_md-comp-filled-text-field.scss | 34 +++++++++----------- tokens/_md-comp-outlined-field.scss | 31 ++++++++++++++---- tokens/_md-comp-outlined-select.scss | 30 ++++++++--------- tokens/_md-comp-outlined-text-field.scss | 34 +++++++++----------- 14 files changed, 177 insertions(+), 100 deletions(-) diff --git a/docs/components/text-field.md b/docs/components/text-field.md index 67ba040e39..7ff3c6d1d7 100644 --- a/docs/components/text-field.md +++ b/docs/components/text-field.md @@ -357,8 +357,8 @@ Token | Default value `--md-filled-text-field-container-shape` | `4px 4px 0px 0px` `--md-filled-text-field-container-color` | `--md-sys-color-surface-container-highest` `--md-filled-text-field-focus-active-indicator-color` | `--md-sys-color-primary` -`--md-filled-text-field-input-text-type` | `--md-sys-typescale-body-large` -`--md-filled-text-field-label-text-type` | `--md-sys-typescale-body-large` +`--md-filled-text-field-input-text-font` | `--md-sys-typescale-body-large-font` +`--md-filled-text-field-label-text-font` | `--md-sys-typescale-body-large-font` * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-text-field.scss) @@ -386,11 +386,11 @@ Token | Default value ### Outlined text field tokens Token | Default value ----------------------------------------------- | ------------------------------- +---------------------------------------------- | ------------- `--md-outlined-text-field-container-shape` | `4px` `--md-outlined-text-field-focus-outline-color` | `--md-sys-color-primary` -`--md-outlined-text-field-input-text-type` | `--md-sys-typescale-body-large` -`--md-outlined-text-field-label-text-type` | `--md-sys-typescale-body-large` +`--md-outlined-text-field-input-text-font` | `--md-sys-typescale-body-large-font` +`--md-outlined-text-field-label-text-font` | `--md-sys-typescale-body-large-font` * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-outlined-text-field.scss) diff --git a/field/internal/_content.scss b/field/internal/_content.scss index 7bf9bb77ff..8b7ee04b1a 100644 --- a/field/internal/_content.scss +++ b/field/internal/_content.scss @@ -98,7 +98,10 @@ $_enter-delay: $_label-duration - $_visible-duration; // Use `currentColor` to inherit the various state colors that are set // below. color: currentColor; - font: var(--_content-type); + font-family: var(--_content-font); + font-size: var(--_content-size); + line-height: var(--_content-line-height); + font-weight: var(--_content-weight); width: 100%; white-space: pre-wrap; // Needed for Firefox textarea with "all: unset" } diff --git a/field/internal/_label.scss b/field/internal/_label.scss index 8af24169cf..2178d982e3 100644 --- a/field/internal/_label.scss +++ b/field/internal/_label.scss @@ -15,7 +15,10 @@ text-overflow: ellipsis; white-space: nowrap; z-index: 1; - 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); width: min-content; } diff --git a/field/internal/_supporting-text.scss b/field/internal/_supporting-text.scss index 96489e2f39..b1564576ac 100644 --- a/field/internal/_supporting-text.scss +++ b/field/internal/_supporting-text.scss @@ -7,7 +7,10 @@ .supporting-text { color: var(--_supporting-text-color); display: flex; - font: var(--_supporting-text-type); + font-family: var(--_supporting-text-font); + font-size: var(--_supporting-text-size); + line-height: var(--_supporting-text-line-height); + font-weight: var(--_supporting-text-weight); gap: 16px; justify-content: space-between; padding-inline-start: var(--_supporting-text-leading-space); diff --git a/select/internal/_filled-select.scss b/select/internal/_filled-select.scss index 64698ac22a..fb46659e7d 100644 --- a/select/internal/_filled-select.scss +++ b/select/internal/_filled-select.scss @@ -98,7 +98,10 @@ 'container-shape-start-start': var(--_text-field-container-shape-start-start), 'content-color': var(--_text-field-input-text-color), - 'content-type': var(--_text-field-input-text-type), + 'content-font': var(--_text-field-input-text-font), + 'content-line-height': var(--_text-field-input-text-line-height), + 'content-size': var(--_text-field-input-text-size), + 'content-weight': var(--_text-field-input-text-weight), 'disabled-active-indicator-color': var(--_text-field-disabled-active-indicator-color), 'disabled-active-indicator-height': @@ -193,14 +196,21 @@ 'hover-trailing-content-color': var(--_text-field-hover-trailing-icon-color), 'label-text-color': var(--_text-field-label-text-color), + 'label-text-font': var(--_text-field-label-text-font), + 'label-text-line-height': var(--_text-field-label-text-line-height), 'label-text-populated-line-height': var(--_text-field-label-text-populated-line-height), 'label-text-populated-size': var(--_text-field-label-text-populated-size), - 'label-text-type': var(--_text-field-label-text-type), + 'label-text-size': var(--_text-field-label-text-size), + 'label-text-weight': var(--_text-field-label-text-weight), 'leading-content-color': var(--_text-field-leading-icon-color), 'supporting-text-color': var(--_text-field-supporting-text-color), - 'supporting-text-type': var(--_text-field-supporting-text-type), + 'supporting-text-font': var(--_text-field-supporting-text-font), + 'supporting-text-line-height': + var(--_text-field-supporting-text-line-height), + 'supporting-text-size': var(--_text-field-supporting-text-size), + 'supporting-text-weight': var(--_text-field-supporting-text-weight), 'trailing-content-color': var(--_text-field-trailing-icon-color), // go/keep-sorted end ) diff --git a/select/internal/_outlined-select.scss b/select/internal/_outlined-select.scss index eb972be2a9..be541776af 100644 --- a/select/internal/_outlined-select.scss +++ b/select/internal/_outlined-select.scss @@ -72,7 +72,10 @@ 'container-shape-start-start': var(--_text-field-container-shape-start-start), 'content-color': var(--_text-field-input-text-color), - 'content-type': var(--_text-field-input-text-type), + 'content-font': var(--_text-field-input-text-font), + 'content-line-height': var(--_text-field-input-text-line-height), + 'content-size': var(--_text-field-input-text-size), + 'content-weight': var(--_text-field-input-text-weight), 'disabled-content-color': var(--_text-field-disabled-input-text-color), 'disabled-content-opacity': var(--_text-field-disabled-input-text-opacity), @@ -149,16 +152,23 @@ 'hover-trailing-content-color': var(--_text-field-hover-trailing-icon-color), 'label-text-color': var(--_text-field-label-text-color), + 'label-text-font': var(--_text-field-label-text-font), + 'label-text-line-height': var(--_text-field-label-text-line-height), 'label-text-populated-line-height': var(--_text-field-label-text-populated-line-height), 'label-text-populated-size': var(--_text-field-label-text-populated-size), - 'label-text-type': var(--_text-field-label-text-type), + 'label-text-size': var(--_text-field-label-text-size), + 'label-text-weight': var(--_text-field-label-text-weight), 'leading-content-color': var(--_text-field-leading-icon-color), 'outline-color': var(--_text-field-outline-color), 'outline-width': var(--_text-field-outline-width), 'supporting-text-color': var(--_text-field-supporting-text-color), - 'supporting-text-type': var(--_text-field-supporting-text-type), + 'supporting-text-font': var(--_text-field-supporting-text-font), + 'supporting-text-line-height': + var(--_text-field-supporting-text-line-height), + 'supporting-text-size': var(--_text-field-supporting-text-size), + 'supporting-text-weight': var(--_text-field-supporting-text-weight), 'trailing-content-color': var(--_text-field-trailing-icon-color), // go/keep-sorted end ) diff --git a/textfield/internal/_filled-text-field.scss b/textfield/internal/_filled-text-field.scss index c927ffb9db..971589143a 100644 --- a/textfield/internal/_filled-text-field.scss +++ b/textfield/internal/_filled-text-field.scss @@ -106,7 +106,10 @@ 'container-shape-start-end': var(--_container-shape-start-end), 'container-shape-start-start': var(--_container-shape-start-start), 'content-color': var(--_input-text-color), - 'content-type': var(--_input-text-type), + 'content-font': var(--_input-text-font), + 'content-line-height': var(--_input-text-line-height), + 'content-size': var(--_input-text-size), + 'content-weight': var(--_input-text-weight), 'disabled-active-indicator-color': var(--_disabled-active-indicator-color), 'disabled-active-indicator-height': @@ -174,14 +177,20 @@ 'hover-supporting-text-color': var(--_hover-supporting-text-color), 'hover-trailing-content-color': var(--_hover-trailing-icon-color), 'label-text-color': var(--_label-text-color), + 'label-text-font': var(--_label-text-font), + 'label-text-line-height': var(--_label-text-line-height), 'label-text-populated-line-height': var(--_label-text-populated-line-height), 'label-text-populated-size': var(--_label-text-populated-size), - 'label-text-type': var(--_label-text-type), + 'label-text-size': var(--_label-text-size), + 'label-text-weight': var(--_label-text-weight), 'leading-content-color': var(--_leading-icon-color), 'leading-space': var(--_leading-space), 'supporting-text-color': var(--_supporting-text-color), - 'supporting-text-type': var(--_supporting-text-type), + 'supporting-text-font': var(--_supporting-text-font), + 'supporting-text-line-height': var(--_supporting-text-line-height), + 'supporting-text-size': var(--_supporting-text-size), + 'supporting-text-weight': var(--_supporting-text-weight), 'top-space': var(--_top-space), 'trailing-content-color': var(--_trailing-icon-color), 'trailing-space': var(--_trailing-space), diff --git a/textfield/internal/_outlined-text-field.scss b/textfield/internal/_outlined-text-field.scss index 377d8d5b63..6e55d1a57d 100644 --- a/textfield/internal/_outlined-text-field.scss +++ b/textfield/internal/_outlined-text-field.scss @@ -91,7 +91,10 @@ 'container-shape-start-end': var(--_container-shape-start-end), 'container-shape-start-start': var(--_container-shape-start-start), 'content-color': var(--_input-text-color), - 'content-type': var(--_input-text-type), + 'content-font': var(--_input-text-font), + 'content-line-height': var(--_input-text-line-height), + 'content-size': var(--_input-text-size), + 'content-weight': var(--_input-text-weight), 'disabled-content-color': var(--_disabled-input-text-color), 'disabled-content-opacity': var(--_disabled-input-text-opacity), 'disabled-label-text-color': var(--_disabled-label-text-color), @@ -147,16 +150,22 @@ 'hover-supporting-text-color': var(--_hover-supporting-text-color), 'hover-trailing-content-color': var(--_hover-trailing-icon-color), 'label-text-color': var(--_label-text-color), + 'label-text-font': var(--_label-text-font), + 'label-text-line-height': var(--_label-text-line-height), 'label-text-populated-line-height': var(--_label-text-populated-line-height), 'label-text-populated-size': var(--_label-text-populated-size), - 'label-text-type': var(--_label-text-type), + 'label-text-size': var(--_label-text-size), + 'label-text-weight': var(--_label-text-weight), 'leading-content-color': var(--_leading-icon-color), 'leading-space': var(--_leading-space), 'outline-color': var(--_outline-color), 'outline-width': var(--_outline-width), 'supporting-text-color': var(--_supporting-text-color), - 'supporting-text-type': var(--_supporting-text-type), + 'supporting-text-font': var(--_supporting-text-font), + 'supporting-text-line-height': var(--_supporting-text-line-height), + 'supporting-text-size': var(--_supporting-text-size), + 'supporting-text-weight': var(--_supporting-text-weight), 'top-space': var(--_top-space), 'trailing-content-color': var(--_trailing-icon-color), 'trailing-space': var(--_trailing-space), diff --git a/tokens/_md-comp-filled-field.scss b/tokens/_md-comp-filled-field.scss index 285adbbb48..5b6e1e0d3b 100644 --- a/tokens/_md-comp-filled-field.scss +++ b/tokens/_md-comp-filled-field.scss @@ -23,7 +23,10 @@ $supported-tokens: ( 'container-color', 'container-shape', 'content-color', - 'content-type', + 'content-font', + 'content-line-height', + 'content-size', + 'content-weight', 'disabled-active-indicator-color', 'disabled-active-indicator-height', 'disabled-active-indicator-opacity', @@ -76,16 +79,22 @@ $supported-tokens: ( 'hover-supporting-text-color', 'hover-trailing-content-color', 'label-text-color', + 'label-text-font', + 'label-text-line-height', 'label-text-populated-line-height', 'label-text-populated-size', - 'label-text-type', + 'label-text-size', + 'label-text-weight', 'leading-content-color', 'leading-space', 'supporting-text-color', + 'supporting-text-font', 'supporting-text-leading-space', + 'supporting-text-line-height', + 'supporting-text-size', 'supporting-text-top-space', 'supporting-text-trailing-space', - 'supporting-text-type', + 'supporting-text-weight', 'top-space', 'trailing-content-color', 'trailing-space', @@ -115,7 +124,10 @@ $_default: ( 'container-color': map.get($text-field, 'container-color'), 'container-shape': map.get($text-field, 'container-shape'), 'content-color': map.get($text-field, 'input-text-color'), - 'content-type': map.get($text-field, 'input-text-type'), + 'content-font': map.get($text-field, 'input-text-font'), + 'content-line-height': map.get($text-field, 'input-text-line-height'), + 'content-size': map.get($text-field, 'input-text-size'), + 'content-weight': map.get($text-field, 'input-text-weight'), 'disabled-active-indicator-color': map.get($text-field, 'disabled-active-indicator-color'), 'disabled-active-indicator-height': @@ -210,18 +222,25 @@ $_default: ( 'hover-trailing-content-color': map.get($text-field, 'hover-trailing-icon-color'), 'label-text-color': map.get($text-field, 'label-text-color'), + 'label-text-font': map.get($text-field, 'label-text-font'), + 'label-text-line-height': map.get($text-field, 'label-text-line-height'), 'label-text-populated-line-height': map.get($text-field, 'label-text-populated-line-height'), 'label-text-populated-size': map.get($text-field, 'label-text-populated-size'), - 'label-text-type': map.get($text-field, 'label-text-type'), + 'label-text-size': map.get($text-field, 'label-text-size'), + 'label-text-weight': map.get($text-field, 'label-text-weight'), 'leading-content-color': map.get($text-field, 'leading-icon-color'), 'leading-space': if($exclude-hardcoded-values, null, 16px), 'supporting-text-color': map.get($text-field, 'supporting-text-color'), + 'supporting-text-font': map.get($text-field, 'supporting-text-font'), 'supporting-text-leading-space': if($exclude-hardcoded-values, null, 16px), + 'supporting-text-line-height': + map.get($text-field, 'supporting-text-line-height'), + 'supporting-text-size': map.get($text-field, 'supporting-text-size'), 'supporting-text-top-space': if($exclude-hardcoded-values, null, 4px), 'supporting-text-trailing-space': if($exclude-hardcoded-values, null, 16px), - 'supporting-text-type': map.get($text-field, 'supporting-text-type'), + 'supporting-text-weight': map.get($text-field, 'supporting-text-weight'), 'top-space': if($exclude-hardcoded-values, null, 16px), 'trailing-content-color': map.get($text-field, 'trailing-icon-color'), 'trailing-space': if($exclude-hardcoded-values, null, 16px), diff --git a/tokens/_md-comp-filled-select.scss b/tokens/_md-comp-filled-select.scss index 5a53b2e16f..6b86cfb9cd 100644 --- a/tokens/_md-comp-filled-select.scss +++ b/tokens/_md-comp-filled-select.scss @@ -74,15 +74,24 @@ $supported-tokens: ( 'text-field-hover-supporting-text-color', 'text-field-hover-trailing-icon-color', 'text-field-input-text-color', - 'text-field-input-text-type', + 'text-field-input-text-font', + 'text-field-input-text-line-height', + 'text-field-input-text-size', + 'text-field-input-text-weight', 'text-field-label-text-color', + 'text-field-label-text-font', + 'text-field-label-text-line-height', 'text-field-label-text-populated-line-height', 'text-field-label-text-populated-size', - 'text-field-label-text-type', + 'text-field-label-text-size', + 'text-field-label-text-weight', 'text-field-leading-icon-color', 'text-field-leading-icon-size', 'text-field-supporting-text-color', - 'text-field-supporting-text-type', + 'text-field-supporting-text-font', + 'text-field-supporting-text-line-height', + 'text-field-supporting-text-size', + 'text-field-supporting-text-weight', 'text-field-trailing-icon-color', 'text-field-trailing-icon-size', // go/keep-sorted end @@ -111,21 +120,12 @@ $unsupported-tokens: ( 'menu-list-item-with-leading-icon-leading-icon-size', 'menu-list-item-with-trailing-icon-trailing-icon-color', 'menu-list-item-with-trailing-icon-trailing-icon-size', - 'text-field-input-text-font', - 'text-field-input-text-line-height', - 'text-field-input-text-size', 'text-field-input-text-tracking', - 'text-field-input-text-weight', - 'text-field-label-text-font', - 'text-field-label-text-line-height', - 'text-field-label-text-size', + 'text-field-input-text-type', 'text-field-label-text-tracking', - 'text-field-label-text-weight', - 'text-field-supporting-text-font', - 'text-field-supporting-text-line-height', - 'text-field-supporting-text-size', + 'text-field-label-text-type', 'text-field-supporting-text-tracking', - 'text-field-supporting-text-weight', + 'text-field-supporting-text-type', // go/keep-sorted end ); diff --git a/tokens/_md-comp-filled-text-field.scss b/tokens/_md-comp-filled-text-field.scss index ee614c4612..1ffc4b8222 100644 --- a/tokens/_md-comp-filled-text-field.scss +++ b/tokens/_md-comp-filled-text-field.scss @@ -75,18 +75,27 @@ $supported-tokens: ( 'hover-supporting-text-color', 'hover-trailing-icon-color', 'input-text-color', + 'input-text-font', + 'input-text-line-height', 'input-text-placeholder-color', 'input-text-prefix-color', + 'input-text-size', 'input-text-suffix-color', - 'input-text-type', + 'input-text-weight', 'label-text-color', + 'label-text-font', + 'label-text-line-height', 'label-text-populated-line-height', 'label-text-populated-size', - 'label-text-type', + 'label-text-size', + 'label-text-weight', 'leading-icon-color', 'leading-icon-size', 'supporting-text-color', - 'supporting-text-type', + 'supporting-text-font', + 'supporting-text-line-height', + 'supporting-text-size', + 'supporting-text-weight', 'trailing-icon-color', 'trailing-icon-size', // go/keep-sorted end @@ -94,21 +103,12 @@ $supported-tokens: ( $unsupported-tokens: ( // go/keep-sorted start - 'input-text-font', - 'input-text-line-height', - 'input-text-size', 'input-text-tracking', - 'input-text-weight', - 'label-text-font', - 'label-text-line-height', - 'label-text-size', + 'input-text-type', 'label-text-tracking', - 'label-text-weight', - 'supporting-text-font', - 'supporting-text-line-height', - 'supporting-text-size', + 'label-text-type', 'supporting-text-tracking', - 'supporting-text-weight', + 'supporting-text-type', // go/keep-sorted end ); @@ -129,10 +129,6 @@ $_default: ( $tokens: map.merge( $tokens, ( - // TODO(b/271876162): remove when tokens compiler emits typescale tokens - 'input-text-type': map.get($deps, 'md-sys-typescale', 'body-large'), - 'label-text-type': map.get($deps, 'md-sys-typescale', 'body-large'), - 'supporting-text-type': map.get($deps, 'md-sys-typescale', 'body-small'), // TODO(b/259455114): remove when focus tokens update to 3px 'focus-active-indicator-height': if($exclude-hardcoded-values, null, 3px) ) diff --git a/tokens/_md-comp-outlined-field.scss b/tokens/_md-comp-outlined-field.scss index ea0f93011e..62f4cd4b0a 100644 --- a/tokens/_md-comp-outlined-field.scss +++ b/tokens/_md-comp-outlined-field.scss @@ -20,7 +20,10 @@ $supported-tokens: ( 'bottom-space', 'container-shape', 'content-color', - 'content-type', + 'content-font', + 'content-line-height', + 'content-size', + 'content-weight', 'disabled-content-color', 'disabled-content-opacity', 'disabled-label-text-color', @@ -67,20 +70,26 @@ $supported-tokens: ( 'hover-supporting-text-color', 'hover-trailing-content-color', 'label-text-color', + 'label-text-font', + 'label-text-line-height', 'label-text-padding-bottom', 'label-text-populated-line-height', 'label-text-populated-size', - 'label-text-type', + 'label-text-size', + 'label-text-weight', 'leading-content-color', 'leading-space', 'outline-color', 'outline-label-padding', 'outline-width', 'supporting-text-color', + 'supporting-text-font', 'supporting-text-leading-space', + 'supporting-text-line-height', + 'supporting-text-size', 'supporting-text-top-space', 'supporting-text-trailing-space', - 'supporting-text-type', + 'supporting-text-weight', 'top-space', 'trailing-content-color', 'trailing-space', @@ -105,7 +114,10 @@ $_default: ( 'bottom-space': if($exclude-hardcoded-values, null, 16px), 'container-shape': map.get($text-field, 'container-shape'), 'content-color': map.get($text-field, 'input-text-color'), - 'content-type': map.get($text-field, 'input-text-type'), + 'content-font': map.get($text-field, 'input-text-font'), + 'content-line-height': map.get($text-field, 'input-text-line-height'), + 'content-size': map.get($text-field, 'input-text-size'), + 'content-weight': map.get($text-field, 'input-text-weight'), 'disabled-content-color': map.get($text-field, 'disabled-input-text-color'), 'disabled-content-opacity': map.get($text-field, 'disabled-input-text-opacity'), @@ -183,22 +195,29 @@ $_default: ( 'hover-trailing-content-color': map.get($text-field, 'hover-trailing-icon-color'), 'label-text-color': map.get($text-field, 'label-text-color'), + 'label-text-font': map.get($text-field, 'label-text-font'), + 'label-text-line-height': map.get($text-field, 'label-text-line-height'), 'label-text-padding-bottom': if($exclude-hardcoded-values, null, 8px), 'label-text-populated-line-height': map.get($text-field, 'label-text-populated-line-height'), 'label-text-populated-size': map.get($text-field, 'label-text-populated-size'), - 'label-text-type': map.get($text-field, 'label-text-type'), + 'label-text-size': map.get($text-field, 'label-text-size'), + 'label-text-weight': map.get($text-field, 'label-text-weight'), 'leading-content-color': map.get($text-field, 'leading-icon-color'), 'leading-space': if($exclude-hardcoded-values, null, 16px), 'outline-color': map.get($text-field, 'outline-color'), 'outline-label-padding': if($exclude-hardcoded-values, null, 4px), 'outline-width': map.get($text-field, 'outline-width'), 'supporting-text-color': map.get($text-field, 'supporting-text-color'), + 'supporting-text-font': map.get($text-field, 'supporting-text-font'), 'supporting-text-leading-space': if($exclude-hardcoded-values, null, 16px), + 'supporting-text-line-height': + map.get($text-field, 'supporting-text-line-height'), + 'supporting-text-size': map.get($text-field, 'supporting-text-size'), 'supporting-text-top-space': if($exclude-hardcoded-values, null, 4px), 'supporting-text-trailing-space': if($exclude-hardcoded-values, null, 16px), - 'supporting-text-type': map.get($text-field, 'supporting-text-type'), + 'supporting-text-weight': map.get($text-field, 'supporting-text-weight'), 'top-space': if($exclude-hardcoded-values, null, 16px), 'trailing-content-color': map.get($text-field, 'trailing-icon-color'), 'trailing-space': if($exclude-hardcoded-values, null, 16px), diff --git a/tokens/_md-comp-outlined-select.scss b/tokens/_md-comp-outlined-select.scss index 17305266b8..b6322af5f9 100644 --- a/tokens/_md-comp-outlined-select.scss +++ b/tokens/_md-comp-outlined-select.scss @@ -66,17 +66,26 @@ $supported-tokens: ( 'text-field-hover-supporting-text-color', 'text-field-hover-trailing-icon-color', 'text-field-input-text-color', - 'text-field-input-text-type', + 'text-field-input-text-font', + 'text-field-input-text-line-height', + 'text-field-input-text-size', + 'text-field-input-text-weight', 'text-field-label-text-color', + 'text-field-label-text-font', + 'text-field-label-text-line-height', 'text-field-label-text-populated-line-height', 'text-field-label-text-populated-size', - 'text-field-label-text-type', + 'text-field-label-text-size', + 'text-field-label-text-weight', 'text-field-leading-icon-color', 'text-field-leading-icon-size', 'text-field-outline-color', 'text-field-outline-width', 'text-field-supporting-text-color', - 'text-field-supporting-text-type', + 'text-field-supporting-text-font', + 'text-field-supporting-text-line-height', + 'text-field-supporting-text-size', + 'text-field-supporting-text-weight', 'text-field-trailing-icon-color', 'text-field-trailing-icon-size', // go/keep-sorted end @@ -110,21 +119,12 @@ $unsupported-tokens: ( 'text-field-error-hover-state-layer-opacity', 'text-field-hover-state-layer-color', 'text-field-hover-state-layer-opacity', - 'text-field-input-text-font', - 'text-field-input-text-line-height', - 'text-field-input-text-size', 'text-field-input-text-tracking', - 'text-field-input-text-weight', - 'text-field-label-text-font', - 'text-field-label-text-line-height', - 'text-field-label-text-size', + 'text-field-input-text-type', 'text-field-label-text-tracking', - 'text-field-label-text-weight', - 'text-field-supporting-text-font', - 'text-field-supporting-text-line-height', - 'text-field-supporting-text-size', + 'text-field-label-text-type', 'text-field-supporting-text-tracking', - 'text-field-supporting-text-weight', + 'text-field-supporting-text-type', // go/keep-sorted end ); diff --git a/tokens/_md-comp-outlined-text-field.scss b/tokens/_md-comp-outlined-text-field.scss index d16ebc304d..512fa04d25 100644 --- a/tokens/_md-comp-outlined-text-field.scss +++ b/tokens/_md-comp-outlined-text-field.scss @@ -65,20 +65,29 @@ $supported-tokens: ( 'hover-supporting-text-color', 'hover-trailing-icon-color', 'input-text-color', + 'input-text-font', + 'input-text-line-height', 'input-text-placeholder-color', 'input-text-prefix-color', + 'input-text-size', 'input-text-suffix-color', - 'input-text-type', + 'input-text-weight', 'label-text-color', + 'label-text-font', + 'label-text-line-height', 'label-text-populated-line-height', 'label-text-populated-size', - 'label-text-type', + 'label-text-size', + 'label-text-weight', 'leading-icon-color', 'leading-icon-size', 'outline-color', 'outline-width', 'supporting-text-color', - 'supporting-text-type', + 'supporting-text-font', + 'supporting-text-line-height', + 'supporting-text-size', + 'supporting-text-weight', 'trailing-icon-color', 'trailing-icon-size', // go/keep-sorted end @@ -86,21 +95,12 @@ $supported-tokens: ( $unsupported-tokens: ( // go/keep-sorted start - 'input-text-font', - 'input-text-line-height', - 'input-text-size', 'input-text-tracking', - 'input-text-weight', - 'label-text-font', - 'label-text-line-height', - 'label-text-size', + 'input-text-type', 'label-text-tracking', - 'label-text-weight', - 'supporting-text-font', - 'supporting-text-line-height', - 'supporting-text-size', + 'label-text-type', 'supporting-text-tracking', - 'supporting-text-weight', + 'supporting-text-type', // go/keep-sorted end ); @@ -120,10 +120,6 @@ $_default: ( $tokens: map.merge( $tokens, ( - // TODO(b/271876162): remove when tokens compiler emits typescale tokens - 'input-text-type': map.get($deps, 'md-sys-typescale', 'body-large'), - 'label-text-type': map.get($deps, 'md-sys-typescale', 'body-large'), - 'supporting-text-type': map.get($deps, 'md-sys-typescale', 'body-small'), // TODO(b/259455114): remove when focus tokens update to 3px 'focus-outline-width': if($exclude-hardcoded-values, null, 3px) )