mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +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
|
### Primary tab tokens
|
||||||
|
|
||||||
Token | Default value
|
Token | Default value
|
||||||
----------------------------------------- | -----------------------------------
|
----------------------------------------- | -------------
|
||||||
`--md-primary-tab-container-color` | `--md-sys-color-surface`
|
`--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-active-indicator-color` | `--md-sys-color-primary`
|
||||||
`--md-primary-tab-icon-color` | `--md-sys-color-on-surface-variant`
|
`--md-primary-tab-icon-color` | `--md-sys-color-on-surface-variant`
|
||||||
`--md-primary-tab-container-shape` | `0px`
|
`--md-primary-tab-container-shape` | `0px`
|
||||||
@ -217,7 +217,8 @@ Token | Default value
|
|||||||
--md-sys-color-primary: #005353;
|
--md-sys-color-primary: #005353;
|
||||||
|
|
||||||
/* Component tokens */
|
/* 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>
|
</style>
|
||||||
|
|
||||||
@ -233,7 +234,7 @@ Token | Default value
|
|||||||
Token | Default value
|
Token | Default value
|
||||||
------------------------------------------- | -------------
|
------------------------------------------- | -------------
|
||||||
`--md-secondary-tab-container-color` | `--md-sys-color-surface`
|
`--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-active-indicator-color` | `--md-sys-color-primary`
|
||||||
`--md-secondary-tab-icon-color` | `--md-sys-color-on-surface-variant`
|
`--md-secondary-tab-icon-color` | `--md-sys-color-on-surface-variant`
|
||||||
`--md-secondary-tab-container-shape` | `0px`
|
`--md-secondary-tab-container-shape` | `0px`
|
||||||
@ -255,7 +256,8 @@ Token | Default value
|
|||||||
--md-sys-color-primary: #005353;
|
--md-sys-color-primary: #005353;
|
||||||
|
|
||||||
/* Component tokens */
|
/* 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>
|
</style>
|
||||||
|
|
||||||
|
@ -145,7 +145,8 @@ const custom: MaterialStoryInit<StoryKnobs> = {
|
|||||||
css`
|
css`
|
||||||
.custom {
|
.custom {
|
||||||
/* text */
|
/* 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 */
|
/* indicator */
|
||||||
--md-primary-tab-active-indicator-color: firebrick;
|
--md-primary-tab-active-indicator-color: firebrick;
|
||||||
--md-primary-tab-active-indicator-height: 8px;
|
--md-primary-tab-active-indicator-height: 8px;
|
||||||
|
@ -56,7 +56,10 @@
|
|||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
z-index: 0; // Ensure this is a stacking context so the indicator displays
|
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);
|
color: var(--_label-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -54,7 +54,10 @@ $supported-tokens: (
|
|||||||
'icon-color',
|
'icon-color',
|
||||||
'icon-size',
|
'icon-size',
|
||||||
'label-text-color',
|
'label-text-color',
|
||||||
'label-text-type',
|
'label-text-font',
|
||||||
|
'label-text-line-height',
|
||||||
|
'label-text-size',
|
||||||
|
'label-text-weight',
|
||||||
'pressed-icon-color',
|
'pressed-icon-color',
|
||||||
'pressed-label-text-color',
|
'pressed-label-text-color',
|
||||||
'pressed-state-layer-color',
|
'pressed-state-layer-color',
|
||||||
@ -64,15 +67,14 @@ $supported-tokens: (
|
|||||||
);
|
);
|
||||||
|
|
||||||
$unsupported-tokens: (
|
$unsupported-tokens: (
|
||||||
'with-label-text-label-text-font',
|
// go/keep-sorted start
|
||||||
'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',
|
|
||||||
'active-focus-state-layer-color',
|
'active-focus-state-layer-color',
|
||||||
'active-focus-state-layer-opacity',
|
'active-focus-state-layer-opacity',
|
||||||
'focus-state-layer-color',
|
'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) {
|
@function values($deps: $_default, $exclude-hardcoded-values: false) {
|
||||||
@ -81,14 +83,6 @@ $unsupported-tokens: (
|
|||||||
$exclude-hardcoded-values: $exclude-hardcoded-values
|
$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(
|
@return values.validate(
|
||||||
$tokens,
|
$tokens,
|
||||||
$supported-tokens: $supported-tokens,
|
$supported-tokens: $supported-tokens,
|
||||||
@ -112,6 +106,11 @@ $unsupported-tokens: (
|
|||||||
'with-icon-inactive-icon-color': 'icon-color',
|
'with-icon-inactive-icon-color': 'icon-color',
|
||||||
'with-icon-inactive-pressed-icon-color': 'pressed-icon-color',
|
'with-icon-inactive-pressed-icon-color': 'pressed-icon-color',
|
||||||
// rename with-label-text- and inactive-
|
// 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':
|
'with-label-text-active-focus-label-text-color':
|
||||||
'active-focus-label-text-color',
|
'active-focus-label-text-color',
|
||||||
'with-label-text-active-hover-label-text-color':
|
'with-label-text-active-hover-label-text-color':
|
||||||
|
@ -54,7 +54,10 @@ $supported-tokens: (
|
|||||||
'icon-color',
|
'icon-color',
|
||||||
'icon-size',
|
'icon-size',
|
||||||
'label-text-color',
|
'label-text-color',
|
||||||
'label-text-type',
|
'label-text-font',
|
||||||
|
'label-text-line-height',
|
||||||
|
'label-text-size',
|
||||||
|
'label-text-weight',
|
||||||
'pressed-icon-color',
|
'pressed-icon-color',
|
||||||
'pressed-label-text-color',
|
'pressed-label-text-color',
|
||||||
'pressed-state-layer-color',
|
'pressed-state-layer-color',
|
||||||
@ -66,11 +69,8 @@ $unsupported-tokens: (
|
|||||||
// include an icon and the size will adjust;
|
// include an icon and the size will adjust;
|
||||||
// height is 48 and it's 64 with icon
|
// height is 48 and it's 64 with icon
|
||||||
'container-shadow-color',
|
'container-shadow-color',
|
||||||
'label-text-font',
|
'label-text-type',
|
||||||
'label-text-line-height',
|
|
||||||
'label-text-size',
|
|
||||||
'label-text-tracking',
|
'label-text-tracking',
|
||||||
'label-text-weight',
|
|
||||||
'focus-state-layer-color',
|
'focus-state-layer-color',
|
||||||
'focus-state-layer-opacity'
|
'focus-state-layer-opacity'
|
||||||
);
|
);
|
||||||
@ -81,14 +81,6 @@ $unsupported-tokens: (
|
|||||||
$exclude-hardcoded-values: $exclude-hardcoded-values
|
$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: _add-missing-secondary-tokens($tokens);
|
||||||
|
|
||||||
$tokens: values.validate(
|
$tokens: values.validate(
|
||||||
|
Loading…
Reference in New Issue
Block a user