mirror of
https://github.com/material-components/material-web.git
synced 2024-09-19 09:37:36 +03:00
fix(button)!: replace label-text-* tokens with label-text-type
PiperOrigin-RevId: 510222434
This commit is contained in:
Daniel Freedman
Copybara-Service
parent
6e31262aab
commit
69f9a17a12
@ -7,7 +7,6 @@
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use '../../sass/resolvers';
|
||||
@use '../../sass/shape';
|
||||
@use '../../sass/theme';
|
||||
@use '../../sass/typography';
|
||||
@ -20,10 +19,9 @@ $_custom-property-prefix: 'elevated-button';
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$tokens: theme.validate-theme(
|
||||
tokens.md-comp-elevated-button-values(),
|
||||
$tokens
|
||||
_resolve-tokens(tokens.md-comp-elevated-button-values()),
|
||||
_resolve-tokens($tokens)
|
||||
);
|
||||
$tokens: _resolve-tokens($tokens);
|
||||
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
||||
$tokens: shape.resolve-tokens($tokens, 'container-shape');
|
||||
|
||||
@ -55,10 +53,6 @@ $_custom-property-prefix: 'elevated-button';
|
||||
@function _resolve-tokens($tokens) {
|
||||
$tokens: shared.flatten-disabled-colors($tokens);
|
||||
$tokens: shared.remove-unsupported-tokens($tokens);
|
||||
$tokens: typography.resolve-theme(
|
||||
$tokens,
|
||||
map.get(resolvers.$material, 'typography'),
|
||||
'label-text'
|
||||
);
|
||||
$tokens: typography.resolve-tokens($tokens, 'label-text');
|
||||
@return elevation.resolve-tokens($tokens);
|
||||
}
|
||||
|
||||
@ -7,7 +7,6 @@
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use '../../sass/resolvers';
|
||||
@use '../../sass/shape';
|
||||
@use '../../sass/theme';
|
||||
@use '../../sass/typography';
|
||||
@ -19,8 +18,10 @@
|
||||
$_custom-property-prefix: 'filled-button';
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$tokens: theme.validate-theme(tokens.md-comp-filled-button-values(), $tokens);
|
||||
$tokens: _resolve-tokens($tokens);
|
||||
$tokens: theme.validate-theme(
|
||||
_resolve-tokens(tokens.md-comp-filled-button-values()),
|
||||
_resolve-tokens($tokens)
|
||||
);
|
||||
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
||||
$tokens: shape.resolve-tokens($tokens, 'container-shape');
|
||||
|
||||
@ -51,10 +52,6 @@ $_custom-property-prefix: 'filled-button';
|
||||
@function _resolve-tokens($tokens) {
|
||||
$tokens: shared.flatten-disabled-colors($tokens);
|
||||
$tokens: shared.remove-unsupported-tokens($tokens);
|
||||
$tokens: typography.resolve-theme(
|
||||
$tokens,
|
||||
map.get(resolvers.$material, 'typography'),
|
||||
'label-text'
|
||||
);
|
||||
$tokens: typography.resolve-tokens($tokens, 'label-text');
|
||||
@return elevation.resolve-tokens($tokens);
|
||||
}
|
||||
|
||||
@ -7,7 +7,6 @@
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use '../../sass/resolvers';
|
||||
@use '../../sass/shape';
|
||||
@use '../../sass/theme';
|
||||
@use '../../sass/typography';
|
||||
@ -22,10 +21,9 @@ $_custom-property-prefix: 'outlined-button';
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$tokens: theme.validate-theme(
|
||||
tokens.md-comp-outlined-button-values(),
|
||||
$tokens
|
||||
_resolve-tokens(tokens.md-comp-outlined-button-values()),
|
||||
_resolve-tokens($tokens)
|
||||
);
|
||||
$tokens: _resolve-theme($tokens);
|
||||
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
||||
$tokens: shape.resolve-tokens($tokens, 'container-shape');
|
||||
|
||||
@ -88,10 +86,6 @@ $_custom-property-prefix: 'outlined-button';
|
||||
@function _resolve-tokens($tokens) {
|
||||
$tokens: shared.flatten-disabled-colors($tokens);
|
||||
$tokens: shared.remove-unsupported-tokens($tokens);
|
||||
$tokens: typography.resolve-theme(
|
||||
$tokens,
|
||||
map.get(resolvers.$material, 'typography'),
|
||||
'label-text'
|
||||
);
|
||||
$tokens: typography.resolve-tokens($tokens, 'label-text');
|
||||
@return $tokens;
|
||||
}
|
||||
|
||||
@ -66,7 +66,6 @@
|
||||
min-inline-size: 64px;
|
||||
border: none;
|
||||
outline: none;
|
||||
line-height: inherit;
|
||||
user-select: none;
|
||||
-webkit-appearance: none;
|
||||
vertical-align: middle;
|
||||
@ -76,10 +75,7 @@
|
||||
position: relative;
|
||||
z-index: 0; // Place content on top of elevation and ripple
|
||||
block-size: var(--_container-height);
|
||||
font-family: var(--_label-text-font);
|
||||
font-size: var(--_label-text-size);
|
||||
letter-spacing: var(--_label-text-tracking);
|
||||
font-weight: var(--_label-text-weight);
|
||||
font: var(--_label-text-type);
|
||||
background-color: var(--_container-color);
|
||||
color: var(--_label-text-color);
|
||||
// TODO(b/181413732): Verify token below are named correctly
|
||||
@ -184,12 +180,7 @@
|
||||
'dragged-label-text-color',
|
||||
'dragged-state-layer-color',
|
||||
'dragged-state-layer-opacity',
|
||||
'with-icon-dragged-icon-color',
|
||||
// b/189346077#comment2: `label-text-line-height` is included in token set
|
||||
// "just in case", but it's okay to ignore.
|
||||
'label-text-line-height',
|
||||
// b/203778922: `label-text-type` used by other platforms but not web.
|
||||
'label-text-type'
|
||||
'with-icon-dragged-icon-color'
|
||||
);
|
||||
@return map.remove($tokens, $unsupported-tokens);
|
||||
}
|
||||
|
||||
@ -7,7 +7,6 @@
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use '../../sass/resolvers';
|
||||
@use '../../sass/shape';
|
||||
@use '../../sass/theme';
|
||||
@use '../../sass/typography';
|
||||
@ -18,8 +17,10 @@
|
||||
$_custom-property-prefix: 'text-button';
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$tokens: theme.validate-theme(tokens.md-comp-text-button-values(), $tokens);
|
||||
$tokens: _resolve-tokens($tokens);
|
||||
$tokens: theme.validate-theme(
|
||||
_resolve-tokens(tokens.md-comp-text-button-values()),
|
||||
_resolve-tokens($tokens)
|
||||
);
|
||||
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
||||
$tokens: shape.resolve-tokens($tokens, 'container-shape');
|
||||
|
||||
@ -56,10 +57,6 @@ $_custom-property-prefix: 'text-button';
|
||||
);
|
||||
$tokens: shared.flatten-disabled-colors($tokens);
|
||||
$tokens: shared.remove-unsupported-tokens($tokens);
|
||||
$tokens: typography.resolve-theme(
|
||||
$tokens,
|
||||
map.get(resolvers.$material, 'typography'),
|
||||
'label-text'
|
||||
);
|
||||
$tokens: typography.resolve-tokens($tokens, 'label-text');
|
||||
@return $tokens;
|
||||
}
|
||||
|
||||
@ -7,7 +7,6 @@
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use '../../sass/resolvers';
|
||||
@use '../../sass/shape';
|
||||
@use '../../sass/theme';
|
||||
@use '../../sass/typography';
|
||||
@ -20,10 +19,9 @@ $_custom-property-prefix: 'tonal-button';
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$tokens: theme.validate-theme(
|
||||
tokens.md-comp-filled-tonal-button-values(),
|
||||
$tokens
|
||||
_resolve-tokens(tokens.md-comp-filled-tonal-button-values()),
|
||||
_resolve-tokens($tokens)
|
||||
);
|
||||
$tokens: _resolve-tokens($tokens);
|
||||
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
||||
$tokens: shape.resolve-tokens($tokens, 'container-shape');
|
||||
|
||||
@ -54,10 +52,6 @@ $_custom-property-prefix: 'tonal-button';
|
||||
@function _resolve-tokens($tokens) {
|
||||
$tokens: shared.flatten-disabled-colors($tokens);
|
||||
$tokens: shared.remove-unsupported-tokens($tokens);
|
||||
$tokens: typography.resolve-theme(
|
||||
$tokens,
|
||||
map.get(resolvers.$material, 'typography'),
|
||||
'label-text'
|
||||
);
|
||||
$tokens: typography.resolve-tokens($tokens, 'label-text');
|
||||
@return elevation.resolve-tokens($tokens);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user