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

fix(slider): remove font shorthand tokens

Browse Source 
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:
Elizabeth Mitchell 2023-09-06 11:21:53 -07:00 committed by Copybara-Service
parent ca2cd56bd1
commit 6988a49a3b
4 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
slider/demo/stories.ts
View File

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

7
slider/internal/_slider.scss
View File

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

2
slider/internal/forced-colors-styles.scss
View File

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

32
tokens/_md-comp-slider.scss
View File

@ -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',
)
);