mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 01:20:23 +03:00
fix(button): remove font shorthand tokens
BREAKING CHANGE: replace `label-text-type` tokens with `label-text-font`, `-size`, `-line-height`, and `-weight` PiperOrigin-RevId: 563153211
This commit is contained in:
parent
c864d3b638
commit
8894c20c6b
@ -16,6 +16,10 @@
|
||||
display: inline-flex;
|
||||
height: var(--_container-height);
|
||||
outline: none;
|
||||
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);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
// Override vertical-align with shortest value "top". Vertical-align's
|
||||
// default "baseline" value causes buttons to be misaligned next to each
|
||||
@ -69,7 +73,7 @@
|
||||
position: relative;
|
||||
z-index: 0; // Place content on top of elevation and ripple
|
||||
height: 100%;
|
||||
font: var(--_label-text-type);
|
||||
font: inherit;
|
||||
color: var(--_label-text-color);
|
||||
// TODO(b/181413732): Verify token below are named correctly
|
||||
padding-inline-start: var(--_leading-space);
|
||||
|
@ -408,11 +408,11 @@ of color, typography, and shape.
|
||||
### Elevated button tokens
|
||||
|
||||
Token | Default value
|
||||
--------------------------------------- | -------------------------------
|
||||
--------------------------------------- | -------------------------------------
|
||||
`--md-elevated-button-container-color` | `--md-sys-color-surface`
|
||||
`--md-elevated-button-container-shape` | `9999px`
|
||||
`--md-elevated-button-label-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-elevated-button-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
|
||||
`--md-elevated-button-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-elevated-button.scss)
|
||||
<!-- {.external} -->
|
||||
@ -438,7 +438,7 @@ Token | Default value
|
||||
.styled-example {
|
||||
background-color: white;
|
||||
--md-elevated-button-container-shape: 0px;
|
||||
--md-elevated-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-elevated-button-label-text-font: system-ui;
|
||||
--md-sys-color-surface-container-low: #FAFDFC;
|
||||
--md-sys-color-primary: #191C1C;
|
||||
}
|
||||
@ -456,7 +456,7 @@ Token | Default value
|
||||
<style>
|
||||
:root {
|
||||
--md-elevated-button-container-shape: 0px;
|
||||
--md-elevated-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-elevated-button-label-text-font: system-ui;
|
||||
--md-sys-color-surface-container-low: #FAFDFC;
|
||||
--md-sys-color-primary: #191C1C;
|
||||
}
|
||||
@ -468,11 +468,11 @@ Token | Default value
|
||||
### Filled button tokens
|
||||
|
||||
Token | Default value
|
||||
------------------------------------- | -------------------------------
|
||||
------------------------------------- | -------------------------------------
|
||||
`--md-filled-button-container-color` | `--md-sys-color-primary`
|
||||
`--md-filled-button-container-shape` | `9999px`
|
||||
`--md-filled-button-label-text-color` | `--md-sys-color-on-primary`
|
||||
`--md-filled-button-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
|
||||
`--md-filled-button-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-button.scss)
|
||||
<!-- {.external} -->
|
||||
@ -498,7 +498,7 @@ Token | Default value
|
||||
.styled-example {
|
||||
background-color: white;
|
||||
--md-filled-button-container-shape: 0px;
|
||||
--md-filled-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-filled-button-label-text-font: system-ui;
|
||||
--md-sys-color-primary: #006A6A;
|
||||
--md-sys-color-on-primary: #FFFFFF;
|
||||
}
|
||||
@ -516,7 +516,7 @@ Token | Default value
|
||||
<style>
|
||||
:root {
|
||||
--md-filled-button-container-shape: 0px;
|
||||
--md-filled-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-filled-button-label-text-font: system-ui;
|
||||
--md-sys-color-primary: #006A6A;
|
||||
--md-sys-color-on-primary: #FFFFFF;
|
||||
}
|
||||
@ -532,7 +532,7 @@ Token | Default value
|
||||
`--md-filled-tonal-button-container-color` | `--md-sys-color-secondary-container`
|
||||
`--md-filled-tonal-button-container-shape` | `9999px`
|
||||
`--md-filled-tonal-button-label-text-color` | `--md-sys-color-on-secondary-container`
|
||||
`--md-filled-tonal-button-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
|
||||
`--md-filled-tonal-button-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-tonal-button.scss)
|
||||
<!-- {.external} -->
|
||||
@ -558,7 +558,7 @@ Token | Default value
|
||||
.styled-example {
|
||||
background-color: white;
|
||||
--md-filled-tonal-button-container-shape: 0px;
|
||||
--md-filled-tonal-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-filled-tonal-button-label-text-font: system-ui;
|
||||
--md-sys-color-secondary-container: #CCE8E7;
|
||||
--md-sys-color-on-secondary-container: #051F1F;
|
||||
}
|
||||
@ -576,7 +576,7 @@ Token | Default value
|
||||
<style>
|
||||
:root {
|
||||
--md-filled-tonal-button-container-shape: 0px;
|
||||
--md-filled-tonal-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-filled-tonal-button-label-text-font: system-ui;
|
||||
--md-sys-color-secondary-container: #CCE8E7;
|
||||
--md-sys-color-on-secondary-container: #051F1F;
|
||||
}
|
||||
@ -588,11 +588,11 @@ Token | Default value
|
||||
### Outlined button tokens
|
||||
|
||||
Token | Default value
|
||||
--------------------------------------- | -------------------------------
|
||||
--------------------------------------- | -------------------------------------
|
||||
`--md-outlined-button-outline-color` | `--md-sys-color-outline`
|
||||
`--md-outlined-button-container-shape` | `9999px`
|
||||
`--md-outlined-button-label-text-color` | `--md-sys-color-primary`
|
||||
`--md-outlined-button-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
|
||||
`--md-outlined-button-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-outlined-button.scss)
|
||||
<!-- {.external} -->
|
||||
@ -618,7 +618,7 @@ Token | Default value
|
||||
.styled-example {
|
||||
background-color: white;
|
||||
--md-outlined-button-container-shape: 0px;
|
||||
--md-outlined-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-outlined-button-label-text-font: system-ui;
|
||||
--md-sys-color-primary: #006A6A;
|
||||
--md-sys-color-outline: #6F7979;
|
||||
}
|
||||
@ -636,7 +636,7 @@ Token | Default value
|
||||
<style>
|
||||
:root {
|
||||
--md-outlined-button-container-shape: 0px;
|
||||
--md-outlined-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-outlined-button-label-text-font: system-ui;
|
||||
--md-sys-color-primary: #006A6A;
|
||||
--md-sys-color-outline: #6F7979;
|
||||
}
|
||||
@ -648,9 +648,9 @@ Token | Default value
|
||||
### Text button tokens
|
||||
|
||||
Token | Default value
|
||||
----------------------------------- | -------------------------------
|
||||
----------------------------------- | -------------------------------------
|
||||
`--md-text-button-label-text-color` | `--md-sys-color-primary`
|
||||
`--md-text-button-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
|
||||
`--md-text-button-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-text-button.scss)
|
||||
<!-- {.external} -->
|
||||
@ -675,7 +675,7 @@ Token | Default value
|
||||
<style>
|
||||
.styled-example {
|
||||
background-color: white;
|
||||
--md-text-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-text-button-label-text-font: system-ui;
|
||||
--md-sys-color-primary: #006A6A;
|
||||
}
|
||||
</style>
|
||||
@ -691,7 +691,7 @@ Token | Default value
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-text-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-text-button-label-text-font: system-ui;
|
||||
--md-sys-color-primary: #006A6A;
|
||||
}
|
||||
</style>
|
||||
|
@ -41,7 +41,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',
|
||||
'leading-space',
|
||||
'pressed-container-elevation',
|
||||
'pressed-icon-color',
|
||||
@ -60,11 +63,8 @@ $unsupported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'focus-state-layer-color',
|
||||
'focus-state-layer-opacity',
|
||||
'label-text-font',
|
||||
'label-text-line-height',
|
||||
'label-text-size',
|
||||
'label-text-tracking',
|
||||
'label-text-weight',
|
||||
'label-text-type',
|
||||
// go/keep-sorted end
|
||||
);
|
||||
|
||||
@ -108,13 +108,5 @@ $_default: (
|
||||
)
|
||||
);
|
||||
|
||||
// TODO(b/271876162): remove when tokens compiler emits typescale tokens
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
|
||||
)
|
||||
);
|
||||
|
||||
@return $tokens;
|
||||
}
|
||||
|
@ -41,7 +41,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',
|
||||
'leading-space',
|
||||
'pressed-container-elevation',
|
||||
'pressed-icon-color',
|
||||
@ -60,11 +63,8 @@ $unsupported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'focus-state-layer-color',
|
||||
'focus-state-layer-opacity',
|
||||
'label-text-font',
|
||||
'label-text-line-height',
|
||||
'label-text-size',
|
||||
'label-text-tracking',
|
||||
'label-text-weight',
|
||||
'label-text-type',
|
||||
// go/keep-sorted end
|
||||
);
|
||||
|
||||
@ -108,13 +108,5 @@ $_default: (
|
||||
)
|
||||
);
|
||||
|
||||
// TODO(b/271876162): remove when tokens compiler emits typescale tokens
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
|
||||
)
|
||||
);
|
||||
|
||||
@return $tokens;
|
||||
}
|
||||
|
@ -41,7 +41,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',
|
||||
'leading-space',
|
||||
'pressed-container-elevation',
|
||||
'pressed-icon-color',
|
||||
@ -60,11 +63,8 @@ $unsupported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'focus-state-layer-color',
|
||||
'focus-state-layer-opacity',
|
||||
'label-text-font',
|
||||
'label-text-line-height',
|
||||
'label-text-size',
|
||||
'label-text-tracking',
|
||||
'label-text-weight',
|
||||
'label-text-type',
|
||||
// go/keep-sorted end
|
||||
);
|
||||
|
||||
@ -108,13 +108,5 @@ $_default: (
|
||||
)
|
||||
);
|
||||
|
||||
// TODO(b/271876162): remove when tokens compiler emits typescale tokens
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
|
||||
)
|
||||
);
|
||||
|
||||
@return $tokens;
|
||||
}
|
||||
|
@ -34,7 +34,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',
|
||||
'leading-space',
|
||||
'outline-color',
|
||||
'outline-width',
|
||||
@ -57,11 +60,8 @@ $unsupported-tokens: (
|
||||
'focus-state-layer-color',
|
||||
'focus-state-layer-opacity',
|
||||
'hover-outline-color',
|
||||
'label-text-font',
|
||||
'label-text-line-height',
|
||||
'label-text-size',
|
||||
'label-text-tracking',
|
||||
'label-text-weight',
|
||||
'label-text-type',
|
||||
// go/keep-sorted end
|
||||
);
|
||||
|
||||
@ -104,13 +104,5 @@ $_default: (
|
||||
)
|
||||
);
|
||||
|
||||
// TODO(b/271876162): remove when tokens compiler emits typescale tokens
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
|
||||
)
|
||||
);
|
||||
|
||||
@return $tokens;
|
||||
}
|
||||
|
@ -32,7 +32,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',
|
||||
'leading-space',
|
||||
'pressed-icon-color',
|
||||
'pressed-label-text-color',
|
||||
@ -50,11 +53,8 @@ $unsupported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'focus-state-layer-color',
|
||||
'focus-state-layer-opacity',
|
||||
'label-text-font',
|
||||
'label-text-line-height',
|
||||
'label-text-size',
|
||||
'label-text-tracking',
|
||||
'label-text-weight',
|
||||
'label-text-type',
|
||||
// go/keep-sorted end
|
||||
);
|
||||
|
||||
@ -97,13 +97,5 @@ $_default: (
|
||||
)
|
||||
);
|
||||
|
||||
// TODO(b/271876162): remove this when tokens compiler emits typescale tokens
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
|
||||
)
|
||||
);
|
||||
|
||||
@return $tokens;
|
||||
}
|
||||
|
@ -14,6 +14,9 @@ $supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'brand',
|
||||
'plain',
|
||||
'weight-bold',
|
||||
'weight-medium',
|
||||
'weight-regular',
|
||||
// go/keep-sorted end
|
||||
);
|
||||
|
||||
|
@ -11,26 +11,87 @@
|
||||
@use './v0_172/md-sys-typescale';
|
||||
// go/keep-sorted end
|
||||
|
||||
$_default: (
|
||||
'md-ref-typeface': md-ref-typeface.values(),
|
||||
$supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'body-large',
|
||||
'body-large-font',
|
||||
'body-large-line-height',
|
||||
'body-large-size',
|
||||
'body-large-weight',
|
||||
'body-medium',
|
||||
'body-medium-font',
|
||||
'body-medium-line-height',
|
||||
'body-medium-size',
|
||||
'body-small',
|
||||
'body-small-font',
|
||||
'body-small-line-height',
|
||||
'body-small-size',
|
||||
'body-small-weight',
|
||||
'display-large',
|
||||
'display-large-font',
|
||||
'display-large-line-height',
|
||||
'display-large-size',
|
||||
'display-large-weight',
|
||||
'display-medium',
|
||||
'display-medium-font',
|
||||
'display-medium-line-height',
|
||||
'display-medium-size',
|
||||
'display-medium-weight',
|
||||
'display-small',
|
||||
'display-small-font',
|
||||
'display-small-line-height',
|
||||
'display-small-size',
|
||||
'display-small-weight',
|
||||
'headline-large',
|
||||
'headline-large-font',
|
||||
'headline-large-line-height',
|
||||
'headline-large-size',
|
||||
'headline-large-weight',
|
||||
'headline-medium',
|
||||
'headline-medium-font',
|
||||
'headline-medium-line-height',
|
||||
'headline-medium-size',
|
||||
'headline-medium-weight',
|
||||
'headline-small',
|
||||
'headline-small-font',
|
||||
'headline-small-line-height',
|
||||
'headline-small-size',
|
||||
'headline-small-weight',
|
||||
'label-large',
|
||||
'label-large-font',
|
||||
'label-large-line-height',
|
||||
'label-large-size',
|
||||
'label-large-weight',
|
||||
'label-medium',
|
||||
'label-medium-font',
|
||||
'label-medium-line-height',
|
||||
'label-medium-size',
|
||||
'label-medium-weight',
|
||||
'label-small',
|
||||
'label-small-font',
|
||||
'label-small-line-height',
|
||||
'label-small-size',
|
||||
'label-small-weight',
|
||||
'title-large',
|
||||
'title-large-font',
|
||||
'title-large-line-height',
|
||||
'title-large-size',
|
||||
'title-large-weight',
|
||||
'title-medium',
|
||||
'title-medium-font',
|
||||
'title-medium-line-height',
|
||||
'title-medium-size',
|
||||
'title-medium-weight',
|
||||
'title-small',
|
||||
'title-small-font',
|
||||
'title-small-line-height',
|
||||
'title-small-size',
|
||||
'title-small-weight',
|
||||
// go/keep-sorted end
|
||||
);
|
||||
|
||||
$supported-tokens: (
|
||||
'body-large',
|
||||
'body-medium',
|
||||
'body-small',
|
||||
'display-large',
|
||||
'display-medium',
|
||||
'display-small',
|
||||
'headline-large',
|
||||
'headline-medium',
|
||||
'headline-small',
|
||||
'label-large',
|
||||
'label-medium',
|
||||
'label-small',
|
||||
'title-large',
|
||||
'title-medium',
|
||||
'title-small'
|
||||
$_default: (
|
||||
'md-ref-typeface': md-ref-typeface.values(),
|
||||
);
|
||||
|
||||
@function values($deps: $_default, $exclude-hardcoded-values: false) {
|
||||
|
Loading…
Reference in New Issue
Block a user