mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 01:20:23 +03:00
fix(slider): remove font shorthand tokens
BREAKING CHANGE: replace `label-text-type` tokens with `-font`, `-size`, `-line-height`, and `-weight`. Additionally, rename `label-label-*` tokens to a single `label-*` PiperOrigin-RevId: 563162551
This commit is contained in:
parent
ca2cd56bd1
commit
6988a49a3b
@ -105,7 +105,7 @@ const customStyling: MaterialStoryInit<StoryKnobs> = {
|
||||
/* label */
|
||||
--md-slider-label-container-height: 24px;
|
||||
--md-slider-label-container-color: var(--myColor);
|
||||
--md-slider-label-label-text-size: 20px;
|
||||
--md-slider-label-text-size: 20px;
|
||||
|
||||
/* track */
|
||||
--md-slider-active-track-shape: 4px;
|
||||
|
@ -323,8 +323,11 @@ $_md-sys-shape: tokens.md-sys-shape-values();
|
||||
place-items: center;
|
||||
border-radius: map.get($_md-sys-shape, 'corner-full');
|
||||
|
||||
color: var(--_label-label-text-color);
|
||||
font: var(--_label-label-text-type);
|
||||
color: var(--_label-text-color);
|
||||
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);
|
||||
|
||||
inset-block-end: 100%;
|
||||
min-inline-size: var(--_label-container-height);
|
||||
|
@ -28,7 +28,7 @@
|
||||
hover-state-layer-opacity: 1,
|
||||
inactive-track-color: $color,
|
||||
label-container-color: $color,
|
||||
label-label-text-color: $container-color,
|
||||
label-text-color: $container-color,
|
||||
pressed-handle-color: $container-color,
|
||||
pressed-state-layer-color: $color,
|
||||
pressed-state-layer-opacity: 1,
|
||||
|
@ -42,8 +42,11 @@ $supported-tokens: (
|
||||
'inactive-track-shape',
|
||||
'label-container-color',
|
||||
'label-container-height',
|
||||
'label-label-text-color',
|
||||
'label-label-text-type',
|
||||
'label-text-color',
|
||||
'label-text-font',
|
||||
'label-text-line-height',
|
||||
'label-text-size',
|
||||
'label-text-weight',
|
||||
'pressed-handle-color',
|
||||
'pressed-state-layer-color',
|
||||
'pressed-state-layer-opacity',
|
||||
@ -68,11 +71,8 @@ $_default: (
|
||||
$_unsupported-tokens: (
|
||||
'disabled-handle-opacity',
|
||||
'label-container-elevation',
|
||||
'label-label-text-font',
|
||||
'label-label-text-line-height',
|
||||
'label-label-text-size',
|
||||
'label-label-text-tracking',
|
||||
'label-label-text-weight',
|
||||
'label-text-type',
|
||||
'label-text-tracking',
|
||||
'track-elevation',
|
||||
// for efficiency, tick marks are rendered as radial-gradients and
|
||||
// have more limited customization
|
||||
@ -89,15 +89,15 @@ $_unsupported-tokens: (
|
||||
$tokens: values.validate(
|
||||
md-comp-slider.values($deps, $exclude-hardcoded-values),
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $_unsupported-tokens
|
||||
);
|
||||
|
||||
// TODO(b/271876162): remove when tokens compiler emits typescale tokens
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
'label-label-text-type':
|
||||
map.get($deps, 'md-sys-typescale', 'label-medium'),
|
||||
$unsupported-tokens: $_unsupported-tokens,
|
||||
$renamed-tokens: (
|
||||
'label-label-text-color': 'label-text-color',
|
||||
'label-label-text-type': 'label-text-type',
|
||||
'label-label-text-font': 'label-text-font',
|
||||
'label-label-text-line-height': 'label-text-line-height',
|
||||
'label-label-text-size': 'label-text-size',
|
||||
'label-label-text-tracking': 'label-text-tracking',
|
||||
'label-label-text-weight': 'label-text-weight',
|
||||
)
|
||||
);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user