material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-07-14 17:00:28 +03:00
Code Issues Projects Releases Wiki Activity

fix(list): remove font shorthand tokens

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

PiperOrigin-RevId: 563162539
This commit is contained in:
Elizabeth Mitchell 2023-09-06 11:21:49 -07:00 committed by Copybara-Service
parent 87ad1dae4f
commit ca2cd56bd1
6 changed files with 64 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/components/figures/list/theming-avatar.html
View File

@ -10,7 +10,7 @@
--md-list-item-container-color: transparent;
--md-list-item-leading-avatar-color: #9cf1f0;
--md-list-item-leading-avatar-label-color: #002020;
--md-list-item-leading-avatar-label-type: system-ui;
--md-list-item-leading-avatar-label-font: system-ui;
--md-list-item-leading-avatar-shape: 0;
--md-list-item-leading-avatar-size: 36px;
}

8
docs/components/figures/list/theming-list.html
View File

@ -16,9 +16,9 @@
--md-list-item-label-text-color: #161d1d;
--md-list-item-supporting-text-color: #3f4948;
--md-list-item-trailing-supporting-text-color: #3f4948;
--md-list-item-label-text-type: system-ui;
--md-list-item-supporting-text-type: system-ui;
--md-list-item-trailing-supporting-text-type: system-ui;
--md-list-item-label-text-font: system-ui;
--md-list-item-supporting-text-font: system-ui;
--md-list-item-trailing-supporting-text-font: system-ui;
}
</style>
<md-list>
@ -39,4 +39,4 @@
</md-list-item>
</md-list>
</figure>
</div>
</div>

16
docs/components/list.md
View File

@ -295,9 +295,9 @@ Token | Default value
`--md-list-item-label-text-color` | `--md-sys-color-on-surface`
`--md-list-item-supporting-text-color` | `--md-sys-color-on-surface-variant`
`--md-list-item-trailing-supporting-text-color` | `--md-sys-color-on-surface-variant`
`--md-list-item-label-text-type` | `400 1rem/1.5rem Roboto`
`--md-list-item-supporting-text-type` | `400 0.875rem/1.25rem Roboto`
`--md-list-item-trailing-supporting-text-type` | `500 0.688rem/1rem Roboto`
`--md-list-item-label-text-font` | `--md-sys-typescale-label-large-font`
`--md-list-item-supporting-text-font` | `--md-sys-typescale-body-medium-font`
`--md-list-item-trailing-supporting-text-font` | `--md-sys-typescale-label-small-font`
* [All List tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list.scss)
<!-- {.external} -->
@ -323,9 +323,9 @@ a different theme applied](images/list/theming-list.webp)
--md-list-item-label-text-color: #161d1d;
--md-list-item-supporting-text-color: #3f4948;
--md-list-item-trailing-supporting-text-color: #3f4948;
--md-list-item-label-text-type: system-ui;
--md-list-item-supporting-text-type: system-ui;
--md-list-item-trailing-supporting-text-type: system-ui;
--md-list-item-label-text-font: system-ui;
--md-list-item-supporting-text-font: system-ui;
--md-list-item-trailing-supporting-text-font: system-ui;
}
</style>
<md-list>
@ -405,7 +405,7 @@ applied](images/list/theming-icon.webp)
Token | Default value
------------------------------------------- | -------------
`--md-list-item-leading-avatar-label-color` | `--md-sys-color-on-primary-container`
`--md-list-item-leading-avatar-label-type` | `500 1rem/1.5rem Roboto`
`--md-list-item-leading-avatar-label-font` | `--md-sys-typescale-title-medium-font`
`--md-list-item-leading-avatar-color` | `--md-sys-color-primary-container`
`--md-list-item-leading-avatar-size` | `40px`
`--md-list-item-leading-avatar-shape` | `9999px`
@ -430,7 +430,7 @@ Token | Default value
--md-list-item-container-color: transparent;
--md-list-item-leading-avatar-color: #9cf1f0;
--md-list-item-leading-avatar-label-color: #002020;
--md-list-item-leading-avatar-label-type: system-ui;
--md-list-item-leading-avatar-label-font: system-ui;
--md-list-item-leading-avatar-shape: 0;
--md-list-item-leading-avatar-size: 36px;
}

20
list/internal/listitem/_list-item.scss
View File

@ -169,7 +169,10 @@
overflow-x: hidden;
white-space: nowrap;
color: var(--_label-text-color);
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);
:hover & {
color: var(--_hover-label-text-color);
@ -195,7 +198,10 @@
overflow: hidden;
width: 100%;
color: var(--_supporting-text-color);
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);
// Box is supposed to be deprecated, but line-clamp is not. It's still on
// standards track and can only be applied with display: -webkit-box and
@ -216,7 +222,10 @@
}
.trailing-supporting-text {
font: var(--_trailing-supporting-text-type);
font-family: var(--_trailing-supporting-text-font);
font-size: var(--_trailing-supporting-text-size);
line-height: var(--_trailing-supporting-text-line-height);
font-weight: var(--_trailing-supporting-text-weight);
.list-item:not(.disabled) & {
color: var(--_trailing-supporting-text-color);
@ -347,7 +356,10 @@
width: var(--_leading-avatar-size);
border-radius: var(--_leading-avatar-shape);
color: var(--_leading-avatar-label-color);
font: var(--_leading-avatar-label-type);
font-family: var(--_leading-avatar-label-font);
font-size: var(--_leading-avatar-label-size);
line-height: var(--_leading-avatar-label-line-height);
font-weight: var(--_leading-avatar-label-weight);
}
}

17
list/list-item_test.ts Normal file
View File

@ -0,0 +1,17 @@
/**
* @license
* Copyright 2023 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
// import 'jasmine'; (google3-only)
import {createTokenTests} from '../testing/tokens.js';
import {MdListItem} from './list-item.js';
describe('<md-list-item>', () => {
describe('.styles', () => {
createTokenTests(MdListItem.styles);
});
});

55
tokens/_md-comp-list-item.scss
View File

@ -37,12 +37,17 @@ $supported-tokens: (
'hover-state-layer-opacity',
'hover-trailing-icon-icon-color',
'label-text-color',
'label-text-font',
'label-text-line-height',
'label-text-type',
'label-text-size',
'label-text-weight',
'large-leading-video-height',
'leading-avatar-color',
'leading-avatar-label-color',
'leading-avatar-label-type',
'leading-avatar-label-font',
'leading-avatar-label-line-height',
'leading-avatar-label-size',
'leading-avatar-label-weight',
'leading-avatar-shape',
'leading-avatar-size',
'leading-element-leading-space',
@ -63,15 +68,20 @@ $supported-tokens: (
'pressed-trailing-icon-icon-color',
'small-leading-video-height',
'supporting-text-color',
'supporting-text-type',
'supporting-text-font',
'supporting-text-line-height',
'supporting-text-size',
'supporting-text-weight',
'three-line-container-height',
'trailing-element-headline-trailing-element-space',
'trailing-icon-color',
'trailing-icon-size',
'trailing-space',
'trailing-supporting-text-color',
'trailing-supporting-text-font',
'trailing-supporting-text-line-height',
'trailing-supporting-text-type',
'trailing-supporting-text-size',
'trailing-supporting-text-weight',
'two-line-container-height',
// go/keep-sorted end
);
@ -89,15 +99,10 @@ $unsupported-tokens: (
'dragged-trailing-icon-icon-color',
'focus-state-layer-color',
'focus-state-layer-opacity',
'label-text-font',
'label-text-size',
'label-text-tracking',
'label-text-weight',
'leading-avatar-label-font',
'leading-avatar-label-line-height',
'leading-avatar-label-size',
'label-text-type',
'leading-avatar-label-tracking',
'leading-avatar-label-weight',
'leading-avatar-label-type',
'overline-color',
'overline-font',
'overline-line-height',
@ -106,15 +111,10 @@ $unsupported-tokens: (
'overline-type',
'overline-weight',
'selected-trailing-icon-color',
'supporting-text-font',
'supporting-text-line-height',
'supporting-text-size',
'supporting-text-tracking',
'supporting-text-weight',
'trailing-supporting-text-font',
'trailing-supporting-text-size',
'supporting-text-type',
'trailing-supporting-text-tracking',
'trailing-supporting-text-weight',
'trailing-supporting-text-type',
'unselected-trailing-icon-color',
// go/keep-sorted end
);
@ -129,7 +129,6 @@ $_default: (
@function values($deps: $_default, $exclude-hardcoded-values: false) {
$original-tokens: md-comp-list.values($deps, $exclude-hardcoded-values);
$original-tokens: map.merge($original-tokens, _get-override-tokens($deps));
$tokens: values.validate(
$original-tokens,
@ -173,21 +172,3 @@ $_default: (
// go/keep-sorted end
);
}
@function _get-override-tokens($deps) {
// TODO(b/271876162): remove when tokens compiler emits typescale tokens
@return (
// go/keep-sorted start
'list-item-label-text-type':
map.get($deps, 'md-sys-typescale', 'body-large'),
'list-item-leading-avatar-label-type':
map.get($deps, 'md-sys-typescale', 'title-medium'),
// unsupported token
// 'list-item-overline-type': map.get($deps, 'md-sys-typescale', 'label-small'),
'list-item-supporting-text-type':
map.get($deps, 'md-sys-typescale', 'body-medium'),
'list-item-trailing-supporting-text-type':
map.get($deps, 'md-sys-typescale', 'label-small'),
// go/keep-sorted end
);
}