mirror of
https://github.com/material-components/material-web.git
synced 2024-08-16 17:10:22 +03:00
fix(list): remove font shorthand tokens
BREAKING CHANGE: replace `*-type` font tokens with `-font`, `-size`, `-line-height`, and `-weight` PiperOrigin-RevId: 563162539
This commit is contained in:
parent
87ad1dae4f
commit
ca2cd56bd1
@ -10,7 +10,7 @@
|
|||||||
--md-list-item-container-color: transparent;
|
--md-list-item-container-color: transparent;
|
||||||
--md-list-item-leading-avatar-color: #9cf1f0;
|
--md-list-item-leading-avatar-color: #9cf1f0;
|
||||||
--md-list-item-leading-avatar-label-color: #002020;
|
--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-shape: 0;
|
||||||
--md-list-item-leading-avatar-size: 36px;
|
--md-list-item-leading-avatar-size: 36px;
|
||||||
}
|
}
|
||||||
|
@ -16,9 +16,9 @@
|
|||||||
--md-list-item-label-text-color: #161d1d;
|
--md-list-item-label-text-color: #161d1d;
|
||||||
--md-list-item-supporting-text-color: #3f4948;
|
--md-list-item-supporting-text-color: #3f4948;
|
||||||
--md-list-item-trailing-supporting-text-color: #3f4948;
|
--md-list-item-trailing-supporting-text-color: #3f4948;
|
||||||
--md-list-item-label-text-type: system-ui;
|
--md-list-item-label-text-font: system-ui;
|
||||||
--md-list-item-supporting-text-type: system-ui;
|
--md-list-item-supporting-text-font: system-ui;
|
||||||
--md-list-item-trailing-supporting-text-type: system-ui;
|
--md-list-item-trailing-supporting-text-font: system-ui;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<md-list>
|
<md-list>
|
||||||
@ -39,4 +39,4 @@
|
|||||||
</md-list-item>
|
</md-list-item>
|
||||||
</md-list>
|
</md-list>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
@ -295,9 +295,9 @@ Token | Default value
|
|||||||
`--md-list-item-label-text-color` | `--md-sys-color-on-surface`
|
`--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-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-trailing-supporting-text-color` | `--md-sys-color-on-surface-variant`
|
||||||
`--md-list-item-label-text-type` | `400 1rem/1.5rem Roboto`
|
`--md-list-item-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||||
`--md-list-item-supporting-text-type` | `400 0.875rem/1.25rem Roboto`
|
`--md-list-item-supporting-text-font` | `--md-sys-typescale-body-medium-font`
|
||||||
`--md-list-item-trailing-supporting-text-type` | `500 0.688rem/1rem Roboto`
|
`--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)
|
* [All List tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list.scss)
|
||||||
<!-- {.external} -->
|
<!-- {.external} -->
|
||||||
@ -323,9 +323,9 @@ a different theme applied](images/list/theming-list.webp)
|
|||||||
--md-list-item-label-text-color: #161d1d;
|
--md-list-item-label-text-color: #161d1d;
|
||||||
--md-list-item-supporting-text-color: #3f4948;
|
--md-list-item-supporting-text-color: #3f4948;
|
||||||
--md-list-item-trailing-supporting-text-color: #3f4948;
|
--md-list-item-trailing-supporting-text-color: #3f4948;
|
||||||
--md-list-item-label-text-type: system-ui;
|
--md-list-item-label-text-font: system-ui;
|
||||||
--md-list-item-supporting-text-type: system-ui;
|
--md-list-item-supporting-text-font: system-ui;
|
||||||
--md-list-item-trailing-supporting-text-type: system-ui;
|
--md-list-item-trailing-supporting-text-font: system-ui;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<md-list>
|
<md-list>
|
||||||
@ -405,7 +405,7 @@ applied](images/list/theming-icon.webp)
|
|||||||
Token | Default value
|
Token | Default value
|
||||||
------------------------------------------- | -------------
|
------------------------------------------- | -------------
|
||||||
`--md-list-item-leading-avatar-label-color` | `--md-sys-color-on-primary-container`
|
`--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-color` | `--md-sys-color-primary-container`
|
||||||
`--md-list-item-leading-avatar-size` | `40px`
|
`--md-list-item-leading-avatar-size` | `40px`
|
||||||
`--md-list-item-leading-avatar-shape` | `9999px`
|
`--md-list-item-leading-avatar-shape` | `9999px`
|
||||||
@ -430,7 +430,7 @@ Token | Default value
|
|||||||
--md-list-item-container-color: transparent;
|
--md-list-item-container-color: transparent;
|
||||||
--md-list-item-leading-avatar-color: #9cf1f0;
|
--md-list-item-leading-avatar-color: #9cf1f0;
|
||||||
--md-list-item-leading-avatar-label-color: #002020;
|
--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-shape: 0;
|
||||||
--md-list-item-leading-avatar-size: 36px;
|
--md-list-item-leading-avatar-size: 36px;
|
||||||
}
|
}
|
||||||
|
@ -169,7 +169,10 @@
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: var(--_label-text-color);
|
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 & {
|
:hover & {
|
||||||
color: var(--_hover-label-text-color);
|
color: var(--_hover-label-text-color);
|
||||||
@ -195,7 +198,10 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: var(--_supporting-text-color);
|
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
|
// 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
|
// standards track and can only be applied with display: -webkit-box and
|
||||||
@ -216,7 +222,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.trailing-supporting-text {
|
.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) & {
|
.list-item:not(.disabled) & {
|
||||||
color: var(--_trailing-supporting-text-color);
|
color: var(--_trailing-supporting-text-color);
|
||||||
@ -347,7 +356,10 @@
|
|||||||
width: var(--_leading-avatar-size);
|
width: var(--_leading-avatar-size);
|
||||||
border-radius: var(--_leading-avatar-shape);
|
border-radius: var(--_leading-avatar-shape);
|
||||||
color: var(--_leading-avatar-label-color);
|
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
17
list/list-item_test.ts
Normal 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);
|
||||||
|
});
|
||||||
|
});
|
@ -37,12 +37,17 @@ $supported-tokens: (
|
|||||||
'hover-state-layer-opacity',
|
'hover-state-layer-opacity',
|
||||||
'hover-trailing-icon-icon-color',
|
'hover-trailing-icon-icon-color',
|
||||||
'label-text-color',
|
'label-text-color',
|
||||||
|
'label-text-font',
|
||||||
'label-text-line-height',
|
'label-text-line-height',
|
||||||
'label-text-type',
|
'label-text-size',
|
||||||
|
'label-text-weight',
|
||||||
'large-leading-video-height',
|
'large-leading-video-height',
|
||||||
'leading-avatar-color',
|
'leading-avatar-color',
|
||||||
'leading-avatar-label-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-shape',
|
||||||
'leading-avatar-size',
|
'leading-avatar-size',
|
||||||
'leading-element-leading-space',
|
'leading-element-leading-space',
|
||||||
@ -63,15 +68,20 @@ $supported-tokens: (
|
|||||||
'pressed-trailing-icon-icon-color',
|
'pressed-trailing-icon-icon-color',
|
||||||
'small-leading-video-height',
|
'small-leading-video-height',
|
||||||
'supporting-text-color',
|
'supporting-text-color',
|
||||||
'supporting-text-type',
|
'supporting-text-font',
|
||||||
|
'supporting-text-line-height',
|
||||||
|
'supporting-text-size',
|
||||||
|
'supporting-text-weight',
|
||||||
'three-line-container-height',
|
'three-line-container-height',
|
||||||
'trailing-element-headline-trailing-element-space',
|
'trailing-element-headline-trailing-element-space',
|
||||||
'trailing-icon-color',
|
'trailing-icon-color',
|
||||||
'trailing-icon-size',
|
'trailing-icon-size',
|
||||||
'trailing-space',
|
'trailing-space',
|
||||||
'trailing-supporting-text-color',
|
'trailing-supporting-text-color',
|
||||||
|
'trailing-supporting-text-font',
|
||||||
'trailing-supporting-text-line-height',
|
'trailing-supporting-text-line-height',
|
||||||
'trailing-supporting-text-type',
|
'trailing-supporting-text-size',
|
||||||
|
'trailing-supporting-text-weight',
|
||||||
'two-line-container-height',
|
'two-line-container-height',
|
||||||
// go/keep-sorted end
|
// go/keep-sorted end
|
||||||
);
|
);
|
||||||
@ -89,15 +99,10 @@ $unsupported-tokens: (
|
|||||||
'dragged-trailing-icon-icon-color',
|
'dragged-trailing-icon-icon-color',
|
||||||
'focus-state-layer-color',
|
'focus-state-layer-color',
|
||||||
'focus-state-layer-opacity',
|
'focus-state-layer-opacity',
|
||||||
'label-text-font',
|
|
||||||
'label-text-size',
|
|
||||||
'label-text-tracking',
|
'label-text-tracking',
|
||||||
'label-text-weight',
|
'label-text-type',
|
||||||
'leading-avatar-label-font',
|
|
||||||
'leading-avatar-label-line-height',
|
|
||||||
'leading-avatar-label-size',
|
|
||||||
'leading-avatar-label-tracking',
|
'leading-avatar-label-tracking',
|
||||||
'leading-avatar-label-weight',
|
'leading-avatar-label-type',
|
||||||
'overline-color',
|
'overline-color',
|
||||||
'overline-font',
|
'overline-font',
|
||||||
'overline-line-height',
|
'overline-line-height',
|
||||||
@ -106,15 +111,10 @@ $unsupported-tokens: (
|
|||||||
'overline-type',
|
'overline-type',
|
||||||
'overline-weight',
|
'overline-weight',
|
||||||
'selected-trailing-icon-color',
|
'selected-trailing-icon-color',
|
||||||
'supporting-text-font',
|
|
||||||
'supporting-text-line-height',
|
|
||||||
'supporting-text-size',
|
|
||||||
'supporting-text-tracking',
|
'supporting-text-tracking',
|
||||||
'supporting-text-weight',
|
'supporting-text-type',
|
||||||
'trailing-supporting-text-font',
|
|
||||||
'trailing-supporting-text-size',
|
|
||||||
'trailing-supporting-text-tracking',
|
'trailing-supporting-text-tracking',
|
||||||
'trailing-supporting-text-weight',
|
'trailing-supporting-text-type',
|
||||||
'unselected-trailing-icon-color',
|
'unselected-trailing-icon-color',
|
||||||
// go/keep-sorted end
|
// go/keep-sorted end
|
||||||
);
|
);
|
||||||
@ -129,7 +129,6 @@ $_default: (
|
|||||||
|
|
||||||
@function values($deps: $_default, $exclude-hardcoded-values: false) {
|
@function values($deps: $_default, $exclude-hardcoded-values: false) {
|
||||||
$original-tokens: md-comp-list.values($deps, $exclude-hardcoded-values);
|
$original-tokens: md-comp-list.values($deps, $exclude-hardcoded-values);
|
||||||
$original-tokens: map.merge($original-tokens, _get-override-tokens($deps));
|
|
||||||
|
|
||||||
$tokens: values.validate(
|
$tokens: values.validate(
|
||||||
$original-tokens,
|
$original-tokens,
|
||||||
@ -173,21 +172,3 @@ $_default: (
|
|||||||
// go/keep-sorted end
|
// 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
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user