mirror of
https://github.com/material-components/material-web.git
synced 2024-08-16 17:10:22 +03:00
fix(chips): remove font shorthand tokens
BREAKING CHANGE: replace `label-text-type` tokens with `label-text-font`, `-size`, `-line-height`, and `-weight` PiperOrigin-RevId: 563161436
This commit is contained in:
parent
0c5a2a2886
commit
87ad1dae4f
@ -141,7 +141,10 @@
|
||||
align-items: center;
|
||||
color: var(--_label-text-color);
|
||||
display: flex;
|
||||
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);
|
||||
height: 100%;
|
||||
text-overflow: ellipsis;
|
||||
user-select: none;
|
||||
|
@ -348,12 +348,12 @@ of color, typography, and shape.
|
||||
### Assist chip tokens
|
||||
|
||||
Token | Default value
|
||||
----------------------------------- | --------------------------------
|
||||
----------------------------------- | -------------------------------------
|
||||
`--md-assist-chip-outline-color` | `--md-sys-color-outline`
|
||||
`--md-assist-chip-container-shape` | `8px`
|
||||
`--md-assist-chip-icon-size` | `18px`
|
||||
`--md-assist-chip-label-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-assist-chip-label-text-type` | `--md-sys-typescale-label-large`
|
||||
`--md-assist-chip-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-assist-chip.scss)
|
||||
<!-- {.external} -->
|
||||
@ -369,7 +369,7 @@ Token | Default value
|
||||
<style>
|
||||
:root {
|
||||
--md-assist-chip-container-shape: 0px;
|
||||
--md-assist-chip-label-text-type: 400 1rem system-ui;
|
||||
--md-assist-chip-label-text-font: system-ui;
|
||||
--md-sys-color-outline: #6F7979;
|
||||
--md-sys-color-on-surface: #191C1C;
|
||||
}
|
||||
@ -387,7 +387,7 @@ Token | Default value
|
||||
`--md-filter-chip-container-shape` | `8px`
|
||||
`--md-filter-chip-icon-size` | `18px`
|
||||
`--md-filter-chip-label-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-filter-chip-label-text-type` | `--md-sys-typescale-label-large`
|
||||
`--md-filter-chip-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filter-chip.scss)
|
||||
<!-- {.external} -->
|
||||
@ -403,7 +403,7 @@ Token | Default value
|
||||
<style>
|
||||
:root {
|
||||
--md-filter-chip-container-shape: 0px;
|
||||
--md-filter-chip-label-text-type: 400 1rem system-ui;
|
||||
--md-filter-chip-label-text-font: system-ui;
|
||||
--md-sys-color-outline: #6f7979;
|
||||
--md-sys-color-on-surface: #191c1c;
|
||||
--md-sys-color-secondary-container: #cce8e7;
|
||||
@ -416,12 +416,12 @@ Token | Default value
|
||||
### Input chip tokens
|
||||
|
||||
Token | Default value
|
||||
---------------------------------- | --------------------------------
|
||||
---------------------------------- | -------------------------------------
|
||||
`--md-input-chip-outline-color` | `--md-sys-color-outline`
|
||||
`--md-input-chip-container-shape` | `8px`
|
||||
`--md-input-chip-icon-size` | `18px`
|
||||
`--md-input-chip-label-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-input-chip-label-text-type` | `--md-sys-typescale-label-large`
|
||||
`--md-input-chip-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-input-chip.scss)
|
||||
<!-- {.external} -->
|
||||
@ -437,7 +437,7 @@ Token | Default value
|
||||
<style>
|
||||
:root {
|
||||
--md-input-chip-container-shape: 0px;
|
||||
--md-input-chip-label-text-type: 400 1rem system-ui;
|
||||
--md-input-chip-label-text-font: system-ui;
|
||||
--md-sys-color-outline: #6f7979;
|
||||
--md-sys-color-on-surface: #191c1c;
|
||||
}
|
||||
@ -449,12 +449,12 @@ Token | Default value
|
||||
### Suggestion chip tokens
|
||||
|
||||
Token | Default value
|
||||
--------------------------------------- | --------------------------------
|
||||
--------------------------------------- | -------------------------------------
|
||||
`--md-suggestion-chip-outline-color` | `--md-sys-color-outline`
|
||||
`--md-suggestion-chip-container-shape` | `8px`
|
||||
`--md-suggestion-chip-icon-size` | `18px`
|
||||
`--md-suggestion-chip-label-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-suggestion-chip-label-text-type` | `--md-sys-typescale-label-large`
|
||||
`--md-suggestion-chip-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-suggestion-chip.scss)
|
||||
<!-- {.external} -->
|
||||
@ -470,7 +470,7 @@ Token | Default value
|
||||
<style>
|
||||
:root {
|
||||
--md-suggestion-chip-container-shape: 0px;
|
||||
--md-suggestion-chip-label-text-type: 400 1rem system-ui;
|
||||
--md-suggestion-chip-label-text-font: system-ui;
|
||||
--md-sys-color-outline: #6f7979;
|
||||
--md-sys-color-on-surface: #191c1c;
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
//
|
||||
// Copyright 2023 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
//
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@ -44,7 +44,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',
|
||||
'leading-icon-color',
|
||||
'outline-color',
|
||||
'outline-width',
|
||||
@ -65,11 +68,8 @@ $unsupported-tokens: (
|
||||
'dragged-state-layer-opacity',
|
||||
'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
|
||||
);
|
||||
|
||||
@ -107,13 +107,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;
|
||||
}
|
||||
|
@ -51,7 +51,10 @@ $supported-tokens: (
|
||||
'hover-trailing-icon-color',
|
||||
'icon-size',
|
||||
'label-text-color',
|
||||
'label-text-type',
|
||||
'label-text-font',
|
||||
'label-text-line-height',
|
||||
'label-text-size',
|
||||
'label-text-weight',
|
||||
'leading-icon-color',
|
||||
'outline-color',
|
||||
'outline-width',
|
||||
@ -95,11 +98,8 @@ $unsupported-tokens: (
|
||||
'focus-state-layer-color',
|
||||
'focus-state-layer-opacity',
|
||||
'hover-container-elevation',
|
||||
'label-text-font',
|
||||
'label-text-line-height',
|
||||
'label-text-size',
|
||||
'label-text-tracking',
|
||||
'label-text-weight',
|
||||
'label-text-type',
|
||||
'pressed-container-elevation',
|
||||
'selected-dragged-label-text-color',
|
||||
'selected-dragged-leading-icon-color',
|
||||
@ -216,13 +216,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;
|
||||
}
|
||||
|
@ -44,7 +44,10 @@ $supported-tokens: (
|
||||
'hover-trailing-icon-color',
|
||||
'icon-size',
|
||||
'label-text-color',
|
||||
'label-text-type',
|
||||
'label-text-font',
|
||||
'label-text-line-height',
|
||||
'label-text-size',
|
||||
'label-text-weight',
|
||||
'leading-icon-color',
|
||||
'outline-color',
|
||||
'outline-width',
|
||||
@ -86,11 +89,8 @@ $unsupported-tokens: (
|
||||
'dragged-trailing-icon-color',
|
||||
'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',
|
||||
'selected-dragged-label-text-color',
|
||||
'selected-dragged-leading-icon-color',
|
||||
'selected-dragged-state-layer-color',
|
||||
@ -191,14 +191,6 @@ $_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'),
|
||||
)
|
||||
);
|
||||
|
||||
// TODO(b/288199264): remove once input chip leading icon color is fixed
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
|
@ -44,7 +44,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',
|
||||
'leading-icon-color',
|
||||
'outline-color',
|
||||
'outline-width',
|
||||
@ -65,11 +68,8 @@ $unsupported-tokens: (
|
||||
'dragged-state-layer-opacity',
|
||||
'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
|
||||
);
|
||||
|
||||
@ -111,13 +111,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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user