mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 01:20:23 +03:00
fix(fab): remove font shorthand tokens
BREAKING CHANGE: replace `label-text-type` tokens with `-font`, `-size`, `-line-height`, and `-weight` PiperOrigin-RevId: 563160852
This commit is contained in:
parent
81e11e09fa
commit
f77ee3628c
@ -393,8 +393,8 @@ Token | Default value
|
||||
#### Extended FAB tokens
|
||||
|
||||
Token | Default value
|
||||
-------------------------- | -------------------------------
|
||||
`--md-fab-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
|
||||
-------------------------- | -------------------------------------
|
||||
`--md-fab-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
#### Extended FAB example
|
||||
|
||||
@ -428,7 +428,7 @@ Token | Default value
|
||||
`--md-fab-branded-container-color` | `--md-sys-color-surface-container-high`
|
||||
`--md-fab-branded-container-shape` | `16px`
|
||||
`--md-fab-branded-icon-size` | `36px`
|
||||
`--md-fab-branded-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
|
||||
`--md-fab-branded-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-fab-branded.scss)
|
||||
<!-- {.external} -->
|
||||
|
@ -6,7 +6,7 @@
|
||||
<style>
|
||||
.styled-example.branded {
|
||||
--md-sys-color-on-surface: #161d1d;
|
||||
--md-fab-branded-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-fab-branded-label-text-font: system-ui;
|
||||
--md-fab-branded-icon-size: 48px;
|
||||
--md-fab-branded-container-shape: 0px;
|
||||
}
|
||||
|
@ -5,7 +5,7 @@
|
||||
style="padding-block: 16px;">
|
||||
<style>
|
||||
.styled-example.extended {
|
||||
--md-fab-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-fab-label-text-font: system-ui;
|
||||
--md-fab-icon-size: 36px;
|
||||
--md-fab-container-shape: 0px;
|
||||
}
|
||||
@ -14,4 +14,4 @@
|
||||
<md-icon slot="icon">edit</md-icon>
|
||||
</md-fab>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -136,7 +136,10 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
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);
|
||||
}
|
||||
|
||||
.fab.extended .icon ::slotted(*) {
|
||||
|
@ -34,7 +34,10 @@ $supported-tokens: (
|
||||
'hover-state-layer-opacity',
|
||||
'icon-size',
|
||||
'label-text-color',
|
||||
'label-text-type',
|
||||
'label-text-font',
|
||||
'label-text-line-height',
|
||||
'label-text-size',
|
||||
'label-text-weight',
|
||||
'large-container-height',
|
||||
'large-container-shape',
|
||||
'large-container-width',
|
||||
@ -74,7 +77,11 @@ $unsupported-tokens: (
|
||||
'hover-label-text-color':
|
||||
map.get($extended-branded-tokens, 'hover-label-text-color'),
|
||||
'label-text-color': map.get($extended-branded-tokens, 'label-text-color'),
|
||||
'label-text-type': map.get($extended-branded-tokens, 'label-text-type'),
|
||||
'label-text-font': map.get($extended-branded-tokens, 'label-text-font'),
|
||||
'label-text-size': map.get($extended-branded-tokens, 'label-text-size'),
|
||||
'label-text-line-height':
|
||||
map.get($extended-branded-tokens, 'label-text-line-height'),
|
||||
'label-text-weight': map.get($extended-branded-tokens, 'label-text-weight'),
|
||||
'large-container-height': map.get($large-tokens, 'container-height'),
|
||||
'large-container-shape': map.get($large-tokens, 'container-shape'),
|
||||
'large-container-width': map.get($large-tokens, 'container-width'),
|
||||
@ -100,13 +107,5 @@ $_default: (
|
||||
$new-tokens: _get-new-tokens($deps, $exclude-hardcoded-values)
|
||||
);
|
||||
|
||||
// TODO(b/271876162): remove when tokens compiler emits typescale tokens
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
|
||||
)
|
||||
);
|
||||
|
||||
@return $tokens;
|
||||
}
|
||||
|
@ -44,7 +44,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',
|
||||
'large-container-height',
|
||||
'large-container-shape',
|
||||
'large-container-width',
|
||||
@ -148,7 +151,11 @@ $unsupported-tokens: (
|
||||
'hover-label-text-color':
|
||||
map.get($extended-surface-tokens, 'hover-label-text-color'),
|
||||
'label-text-color': map.get($extended-surface-tokens, 'label-text-color'),
|
||||
'label-text-type': map.get($extended-surface-tokens, 'label-text-type'),
|
||||
'label-text-font': map.get($extended-surface-tokens, 'label-text-font'),
|
||||
'label-text-line-height':
|
||||
map.get($extended-surface-tokens, 'label-text-line-height'),
|
||||
'label-text-size': map.get($extended-surface-tokens, 'label-text-size'),
|
||||
'label-text-weight': map.get($extended-surface-tokens, 'label-text-weight'),
|
||||
'large-container-height': map.get($large-tokens, 'container-height'),
|
||||
'large-container-shape': map.get($large-tokens, 'container-shape'),
|
||||
'large-container-width': map.get($large-tokens, 'container-width'),
|
||||
@ -234,13 +241,5 @@ $_default: (
|
||||
$new-tokens: _get-new-tokens($deps, $exclude-hardcoded-values)
|
||||
);
|
||||
|
||||
// TODO(b/271876162): remove when tokens compiler emits typescale tokens
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
|
||||
)
|
||||
);
|
||||
|
||||
@return $tokens;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user