DEV/material-components_material-web
1
0
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2026-01-09 07:21:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(chips): remove font shorthand tokens

Browse Source 
BREAKING CHANGE: replace `label-text-type` tokens with `label-text-font`, `-size`, `-line-height`, and `-weight`

PiperOrigin-RevId: 563161436
This commit is contained in:
Elizabeth Mitchell 2023-09-06 11:18:13 -07:00 committed by Copybara-Service
parent 0c5a2a2886
commit 87ad1dae4f
6 changed files with 36 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
chips/internal/_shared.scss
View File

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

22
docs/components/chip.md
View File

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

20
tokens/_md-comp-assist-chip.scss
View File

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

18
tokens/_md-comp-filter-chip.scss
View File

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

18
tokens/_md-comp-input-chip.scss
View File

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

18
tokens/_md-comp-suggestion-chip.scss
View File

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