mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 01:20:23 +03:00
fix(tabs): remove font shorthand tokens
BREAKING CHANGE: replace `label-text-type` tokens with `-font`, `-size`, `-line-height`, and `-weight` PiperOrigin-RevId: 563790527
This commit is contained in:
parent
bf48fc307e
commit
88eb1759c5
@ -191,9 +191,9 @@ of color, typography, and shape.
|
||||
### Primary tab tokens
|
||||
|
||||
Token | Default value
|
||||
----------------------------------------- | -----------------------------------
|
||||
----------------------------------------- | -------------
|
||||
`--md-primary-tab-container-color` | `--md-sys-color-surface`
|
||||
`--md-primary-tab-label-text-type` | `500 0.875rem/1.25rem Roboto`
|
||||
`--md-primary-tab-label-text-font` | `--md-sys-typescale-title-small-font`
|
||||
`--md-primary-tab-active-indicator-color` | `--md-sys-color-primary`
|
||||
`--md-primary-tab-icon-color` | `--md-sys-color-on-surface-variant`
|
||||
`--md-primary-tab-container-shape` | `0px`
|
||||
@ -217,7 +217,8 @@ Token | Default value
|
||||
--md-sys-color-primary: #005353;
|
||||
|
||||
/* Component tokens */
|
||||
--md-primary-tab-label-text-type: 0.8em cursive, system-ui;
|
||||
--md-primary-tab-label-text-font: cursive, system-ui;
|
||||
--md-primary-tab-label-text-size: 0.8em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -233,7 +234,7 @@ Token | Default value
|
||||
Token | Default value
|
||||
------------------------------------------- | -------------
|
||||
`--md-secondary-tab-container-color` | `--md-sys-color-surface`
|
||||
`--md-secondary-tab-label-text-type` | `500 0.875rem/1.25rem Roboto`
|
||||
`--md-secondary-tab-label-text-font` | `--md-sys-typescale-title-small-font`
|
||||
`--md-secondary-tab-active-indicator-color` | `--md-sys-color-primary`
|
||||
`--md-secondary-tab-icon-color` | `--md-sys-color-on-surface-variant`
|
||||
`--md-secondary-tab-container-shape` | `0px`
|
||||
@ -255,7 +256,8 @@ Token | Default value
|
||||
--md-sys-color-primary: #005353;
|
||||
|
||||
/* Component tokens */
|
||||
--md-secondary-tab-label-text-type: 0.8em cursive, system-ui;
|
||||
--md-secondary-tab-label-text-font: cursive, system-ui;
|
||||
--md-secondary-tab-label-text-size: 0.8em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
@ -145,7 +145,8 @@ const custom: MaterialStoryInit<StoryKnobs> = {
|
||||
css`
|
||||
.custom {
|
||||
/* text */
|
||||
--md-primary-tab-label-text-type: 0.8em cursive, system-ui;
|
||||
--md-primary-tab-label-text-font: cursive, system-ui;
|
||||
--md-primary-tab-label-text-size: 0.8em;
|
||||
/* indicator */
|
||||
--md-primary-tab-active-indicator-color: firebrick;
|
||||
--md-primary-tab-active-indicator-height: 8px;
|
||||
|
@ -56,7 +56,10 @@
|
||||
padding: 0 16px;
|
||||
margin: 0;
|
||||
z-index: 0; // Ensure this is a stacking context so the indicator displays
|
||||
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);
|
||||
color: var(--_label-text-color);
|
||||
}
|
||||
|
||||
|
@ -54,7 +54,10 @@ $supported-tokens: (
|
||||
'icon-color',
|
||||
'icon-size',
|
||||
'label-text-color',
|
||||
'label-text-type',
|
||||
'label-text-font',
|
||||
'label-text-line-height',
|
||||
'label-text-size',
|
||||
'label-text-weight',
|
||||
'pressed-icon-color',
|
||||
'pressed-label-text-color',
|
||||
'pressed-state-layer-color',
|
||||
@ -64,15 +67,14 @@ $supported-tokens: (
|
||||
);
|
||||
|
||||
$unsupported-tokens: (
|
||||
'with-label-text-label-text-font',
|
||||
'with-label-text-label-text-line-height',
|
||||
'with-label-text-label-text-size',
|
||||
'with-label-text-label-text-tracking',
|
||||
'with-label-text-label-text-weight',
|
||||
// go/keep-sorted start
|
||||
'active-focus-state-layer-color',
|
||||
'active-focus-state-layer-opacity',
|
||||
'focus-state-layer-color',
|
||||
'focus-state-layer-opacity'
|
||||
'focus-state-layer-opacity',
|
||||
'label-text-tracking',
|
||||
'label-text-type',
|
||||
// go/keep-sorted end
|
||||
);
|
||||
|
||||
@function values($deps: $_default, $exclude-hardcoded-values: false) {
|
||||
@ -81,14 +83,6 @@ $unsupported-tokens: (
|
||||
$exclude-hardcoded-values: $exclude-hardcoded-values
|
||||
);
|
||||
|
||||
// TODO(b/271876162): remove when tokens compiler emits typescale tokens
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
'label-text-type': map.get($deps, 'md-sys-typescale', 'title-small'),
|
||||
)
|
||||
);
|
||||
|
||||
@return values.validate(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
@ -112,6 +106,11 @@ $unsupported-tokens: (
|
||||
'with-icon-inactive-icon-color': 'icon-color',
|
||||
'with-icon-inactive-pressed-icon-color': 'pressed-icon-color',
|
||||
// rename with-label-text- and inactive-
|
||||
'with-label-text-label-text-font': 'label-text-font',
|
||||
'with-label-text-label-text-line-height': 'label-text-line-height',
|
||||
'with-label-text-label-text-size': 'label-text-size',
|
||||
'with-label-text-label-text-tracking': 'label-text-tracking',
|
||||
'with-label-text-label-text-weight': 'label-text-weight',
|
||||
'with-label-text-active-focus-label-text-color':
|
||||
'active-focus-label-text-color',
|
||||
'with-label-text-active-hover-label-text-color':
|
||||
|
@ -54,7 +54,10 @@ $supported-tokens: (
|
||||
'icon-color',
|
||||
'icon-size',
|
||||
'label-text-color',
|
||||
'label-text-type',
|
||||
'label-text-font',
|
||||
'label-text-line-height',
|
||||
'label-text-size',
|
||||
'label-text-weight',
|
||||
'pressed-icon-color',
|
||||
'pressed-label-text-color',
|
||||
'pressed-state-layer-color',
|
||||
@ -66,11 +69,8 @@ $unsupported-tokens: (
|
||||
// include an icon and the size will adjust;
|
||||
// height is 48 and it's 64 with icon
|
||||
'container-shadow-color',
|
||||
'label-text-font',
|
||||
'label-text-line-height',
|
||||
'label-text-size',
|
||||
'label-text-type',
|
||||
'label-text-tracking',
|
||||
'label-text-weight',
|
||||
'focus-state-layer-color',
|
||||
'focus-state-layer-opacity'
|
||||
);
|
||||
@ -81,14 +81,6 @@ $unsupported-tokens: (
|
||||
$exclude-hardcoded-values: $exclude-hardcoded-values
|
||||
);
|
||||
|
||||
// TODO(b/271876162): remove when tokens compiler emits typescale tokens
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
'label-text-type': map.get($deps, 'md-sys-typescale', 'title-small'),
|
||||
)
|
||||
);
|
||||
|
||||
$tokens: _add-missing-secondary-tokens($tokens);
|
||||
|
||||
$tokens: values.validate(
|
||||
|
Loading…
Reference in New Issue
Block a user