fix(text-field,select): remove font shorthand tokens

BREAKING CHANGE: replace `*-type` font tokens with `-font`, `-size`, `-line-height`, and `-weight`

PiperOrigin-RevId: 563160975
This commit is contained in:
Elizabeth Mitchell 2023-09-06 11:16:51 -07:00 committed by Copybara-Service
parent f77ee3628c
commit 0c5a2a2886
14 changed files with 177 additions and 100 deletions

View File

@ -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)
<!-- {.external} -->
@ -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)
<!-- {.external} -->

View File

@ -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"
}

View File

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

View File

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

View File

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

View File

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

View File

@ -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),

View File

@ -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),

View File

@ -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),

View File

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

View File

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

View File

@ -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),

View File

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

View File

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