mirror of
https://github.com/material-components/material-web.git
synced 2024-10-26 21:56:56 +03:00
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:
parent
f77ee3628c
commit
0c5a2a2886
@ -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} -->
|
||||
|
@ -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"
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
|
@ -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
|
||||
)
|
||||
|
@ -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
|
||||
)
|
||||
|
@ -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),
|
||||
|
@ -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),
|
||||
|
@ -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),
|
||||
|
@ -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
|
||||
);
|
||||
|
||||
|
@ -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)
|
||||
)
|
||||
|
@ -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),
|
||||
|
@ -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
|
||||
);
|
||||
|
||||
|
@ -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)
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user