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(tabs): remove font shorthand tokens

Browse Source 
BREAKING CHANGE: replace `label-text-type` tokens with `-font`, `-size`, `-line-height`, and `-weight`

PiperOrigin-RevId: 563790527
This commit is contained in:
Elizabeth Mitchell 2023-09-08 10:34:20 -07:00 committed by Copybara-Service
parent bf48fc307e
commit 88eb1759c5
5 changed files with 32 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/components/tabs.md
View File

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

3
tabs/demo/stories.ts
View File

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

5
tabs/internal/_tab.scss
View File

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

29
tokens/_md-comp-primary-tab.scss
View File

@ -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':

18
tokens/_md-comp-secondary-tab.scss
View File

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