mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
fix(button)!: remove with-* prefix from tokens
PiperOrigin-RevId: 546883625
This commit is contained in:
parent
1893e08f54
commit
25be982568
11
button/elevated-button_test.ts
Normal file
11
button/elevated-button_test.ts
Normal file
@ -0,0 +1,11 @@
|
||||
// import 'jasmine'; (google3-only)
|
||||
|
||||
import {createTokenTests} from '../testing/tokens.js';
|
||||
|
||||
import {MdElevatedButton} from './elevated-button.js';
|
||||
|
||||
describe('<md-elevated-button>', () => {
|
||||
describe('.styles', () => {
|
||||
createTokenTests(MdElevatedButton.styles);
|
||||
});
|
||||
});
|
@ -16,27 +16,27 @@
|
||||
position: relative;
|
||||
writing-mode: horizontal-tb;
|
||||
fill: currentColor;
|
||||
color: var(--_with-icon-icon-color);
|
||||
font-size: var(--_with-icon-icon-size);
|
||||
inline-size: var(--_with-icon-icon-size);
|
||||
block-size: var(--_with-icon-icon-size);
|
||||
color: var(--_icon-color);
|
||||
font-size: var(--_icon-size);
|
||||
inline-size: var(--_icon-size);
|
||||
block-size: var(--_icon-size);
|
||||
}
|
||||
|
||||
.md3-button:hover & {
|
||||
color: var(--_with-icon-hover-icon-color);
|
||||
color: var(--_hover-icon-color);
|
||||
}
|
||||
|
||||
.md3-button:focus & {
|
||||
color: var(--_with-icon-focus-icon-color);
|
||||
color: var(--_focus-icon-color);
|
||||
}
|
||||
|
||||
.md3-button:active & {
|
||||
color: var(--_with-icon-pressed-icon-color);
|
||||
color: var(--_pressed-icon-color);
|
||||
}
|
||||
|
||||
.md3-button:disabled & {
|
||||
color: var(--_with-icon-disabled-icon-color);
|
||||
opacity: var(--_with-icon-disabled-icon-opacity);
|
||||
color: var(--_disabled-icon-color);
|
||||
opacity: var(--_disabled-icon-opacity);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -44,6 +44,10 @@
|
||||
--_#{$token}: var(--md-outlined-button-#{$token}, #{$value});
|
||||
}
|
||||
|
||||
--_container-color: none;
|
||||
--_disabled-container-color: none;
|
||||
--_disabled-container-opacity: 0;
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-outlined-button-container-shape-start-start,
|
||||
|
11
button/outlined-button_test.ts
Normal file
11
button/outlined-button_test.ts
Normal file
@ -0,0 +1,11 @@
|
||||
// import 'jasmine'; (google3-only)
|
||||
|
||||
import {createTokenTests} from '../testing/tokens.js';
|
||||
|
||||
import {MdOutlinedButton} from './outlined-button.js';
|
||||
|
||||
describe('<md-outlined-button>', () => {
|
||||
describe('.styles', () => {
|
||||
createTokenTests(MdOutlinedButton.styles);
|
||||
});
|
||||
});
|
11
button/text-button_test.ts
Normal file
11
button/text-button_test.ts
Normal file
@ -0,0 +1,11 @@
|
||||
// import 'jasmine'; (google3-only)
|
||||
|
||||
import {createTokenTests} from '../testing/tokens.js';
|
||||
|
||||
import {MdTextButton} from './text-button.js';
|
||||
|
||||
describe('<md-text-button>', () => {
|
||||
describe('.styles', () => {
|
||||
createTokenTests(MdTextButton.styles);
|
||||
});
|
||||
});
|
11
button/tonal-button_test.ts
Normal file
11
button/tonal-button_test.ts
Normal file
@ -0,0 +1,11 @@
|
||||
// import 'jasmine'; (google3-only)
|
||||
|
||||
import {createTokenTests} from '../testing/tokens.js';
|
||||
|
||||
import {MdTonalButton} from './tonal-button.js';
|
||||
|
||||
describe('<md-tonal-button>', () => {
|
||||
describe('.styles', () => {
|
||||
createTokenTests(MdTonalButton.styles);
|
||||
});
|
||||
});
|
@ -26,29 +26,29 @@ $supported-tokens: (
|
||||
'disabled-container-color',
|
||||
'disabled-container-elevation',
|
||||
'disabled-container-opacity',
|
||||
'disabled-icon-color',
|
||||
'disabled-icon-opacity',
|
||||
'disabled-label-text-color',
|
||||
'disabled-label-text-opacity',
|
||||
'focus-container-elevation',
|
||||
'focus-icon-color',
|
||||
'focus-label-text-color',
|
||||
'hover-container-elevation',
|
||||
'hover-icon-color',
|
||||
'hover-label-text-color',
|
||||
'hover-state-layer-color',
|
||||
'hover-state-layer-opacity',
|
||||
'icon-color',
|
||||
'icon-size',
|
||||
'label-text-color',
|
||||
'label-text-type',
|
||||
'pressed-container-elevation',
|
||||
'pressed-icon-color',
|
||||
'pressed-label-text-color',
|
||||
'pressed-state-layer-color',
|
||||
'pressed-state-layer-opacity',
|
||||
'spacing-leading',
|
||||
'spacing-trailing',
|
||||
'with-icon-disabled-icon-color',
|
||||
'with-icon-disabled-icon-opacity',
|
||||
'with-icon-focus-icon-color',
|
||||
'with-icon-hover-icon-color',
|
||||
'with-icon-icon-color',
|
||||
'with-icon-icon-size',
|
||||
'with-icon-pressed-icon-color',
|
||||
'with-icon-spacing-leading',
|
||||
'with-icon-spacing-trailing',
|
||||
'with-trailing-icon-spacing-leading',
|
||||
@ -93,6 +93,16 @@ $_default: (
|
||||
'with-trailing-icon-spacing-trailing':
|
||||
if($exclude-hardcoded-values, null, 16px),
|
||||
// go/keep-sorted end
|
||||
),
|
||||
$renamed-tokens: (
|
||||
// Remove "with-*" prefixes (b/273534858)
|
||||
'with-icon-disabled-icon-color': 'disabled-icon-color',
|
||||
'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',
|
||||
'with-icon-focus-icon-color': 'focus-icon-color',
|
||||
'with-icon-hover-icon-color': 'hover-icon-color',
|
||||
'with-icon-icon-color': 'icon-color',
|
||||
'with-icon-icon-size': 'icon-size',
|
||||
'with-icon-pressed-icon-color': 'pressed-icon-color'
|
||||
)
|
||||
);
|
||||
|
||||
|
@ -26,29 +26,29 @@ $supported-tokens: (
|
||||
'disabled-container-color',
|
||||
'disabled-container-elevation',
|
||||
'disabled-container-opacity',
|
||||
'disabled-icon-color',
|
||||
'disabled-icon-opacity',
|
||||
'disabled-label-text-color',
|
||||
'disabled-label-text-opacity',
|
||||
'focus-container-elevation',
|
||||
'focus-icon-color',
|
||||
'focus-label-text-color',
|
||||
'hover-container-elevation',
|
||||
'hover-icon-color',
|
||||
'hover-label-text-color',
|
||||
'hover-state-layer-color',
|
||||
'hover-state-layer-opacity',
|
||||
'icon-color',
|
||||
'icon-size',
|
||||
'label-text-color',
|
||||
'label-text-type',
|
||||
'pressed-container-elevation',
|
||||
'pressed-icon-color',
|
||||
'pressed-label-text-color',
|
||||
'pressed-state-layer-color',
|
||||
'pressed-state-layer-opacity',
|
||||
'spacing-leading',
|
||||
'spacing-trailing',
|
||||
'with-icon-disabled-icon-color',
|
||||
'with-icon-disabled-icon-opacity',
|
||||
'with-icon-focus-icon-color',
|
||||
'with-icon-hover-icon-color',
|
||||
'with-icon-icon-color',
|
||||
'with-icon-icon-size',
|
||||
'with-icon-pressed-icon-color',
|
||||
'with-icon-spacing-leading',
|
||||
'with-icon-spacing-trailing',
|
||||
'with-trailing-icon-spacing-leading',
|
||||
@ -93,6 +93,16 @@ $_default: (
|
||||
'with-trailing-icon-spacing-trailing':
|
||||
if($exclude-hardcoded-values, null, 16px),
|
||||
// go/keep-sorted end
|
||||
),
|
||||
$renamed-tokens: (
|
||||
// Remove "with-*" prefixes (b/273534858)
|
||||
'with-icon-disabled-icon-color': 'disabled-icon-color',
|
||||
'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',
|
||||
'with-icon-focus-icon-color': 'focus-icon-color',
|
||||
'with-icon-hover-icon-color': 'hover-icon-color',
|
||||
'with-icon-icon-color': 'icon-color',
|
||||
'with-icon-icon-size': 'icon-size',
|
||||
'with-icon-pressed-icon-color': 'pressed-icon-color'
|
||||
)
|
||||
);
|
||||
|
||||
|
@ -26,29 +26,29 @@ $supported-tokens: (
|
||||
'disabled-container-color',
|
||||
'disabled-container-elevation',
|
||||
'disabled-container-opacity',
|
||||
'disabled-icon-color',
|
||||
'disabled-icon-opacity',
|
||||
'disabled-label-text-color',
|
||||
'disabled-label-text-opacity',
|
||||
'focus-container-elevation',
|
||||
'focus-icon-color',
|
||||
'focus-label-text-color',
|
||||
'hover-container-elevation',
|
||||
'hover-icon-color',
|
||||
'hover-label-text-color',
|
||||
'hover-state-layer-color',
|
||||
'hover-state-layer-opacity',
|
||||
'icon-color',
|
||||
'icon-size',
|
||||
'label-text-color',
|
||||
'label-text-type',
|
||||
'pressed-container-elevation',
|
||||
'pressed-icon-color',
|
||||
'pressed-label-text-color',
|
||||
'pressed-state-layer-color',
|
||||
'pressed-state-layer-opacity',
|
||||
'spacing-leading',
|
||||
'spacing-trailing',
|
||||
'with-icon-disabled-icon-color',
|
||||
'with-icon-disabled-icon-opacity',
|
||||
'with-icon-focus-icon-color',
|
||||
'with-icon-hover-icon-color',
|
||||
'with-icon-icon-color',
|
||||
'with-icon-icon-size',
|
||||
'with-icon-pressed-icon-color',
|
||||
'with-icon-spacing-leading',
|
||||
'with-icon-spacing-trailing',
|
||||
'with-trailing-icon-spacing-leading',
|
||||
@ -93,6 +93,16 @@ $_default: (
|
||||
'with-trailing-icon-spacing-trailing':
|
||||
if($exclude-hardcoded-values, null, 16px),
|
||||
// go/keep-sorted end
|
||||
),
|
||||
$renamed-tokens: (
|
||||
// Remove "with-*" prefixes (b/273534858)
|
||||
'with-icon-disabled-icon-color': 'disabled-icon-color',
|
||||
'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',
|
||||
'with-icon-focus-icon-color': 'focus-icon-color',
|
||||
'with-icon-hover-icon-color': 'hover-icon-color',
|
||||
'with-icon-icon-color': 'icon-color',
|
||||
'with-icon-icon-size': 'icon-size',
|
||||
'with-icon-pressed-icon-color': 'pressed-icon-color'
|
||||
)
|
||||
);
|
||||
|
||||
|
@ -19,33 +19,31 @@ $supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'container-height',
|
||||
'container-shape',
|
||||
'disabled-icon-color',
|
||||
'disabled-icon-opacity',
|
||||
'disabled-label-text-color',
|
||||
'disabled-label-text-opacity',
|
||||
'disabled-outline-color',
|
||||
'disabled-outline-opacity',
|
||||
'focus-icon-color',
|
||||
'focus-label-text-color',
|
||||
'focus-outline-color',
|
||||
'hover-icon-color',
|
||||
'hover-label-text-color',
|
||||
'hover-outline-color',
|
||||
'hover-state-layer-color',
|
||||
'hover-state-layer-opacity',
|
||||
'icon-color',
|
||||
'icon-size',
|
||||
'label-text-color',
|
||||
'label-text-type',
|
||||
'outline-color',
|
||||
'outline-width',
|
||||
'pressed-icon-color',
|
||||
'pressed-label-text-color',
|
||||
'pressed-outline-color',
|
||||
'pressed-state-layer-color',
|
||||
'pressed-state-layer-opacity',
|
||||
'spacing-leading',
|
||||
'spacing-trailing',
|
||||
'with-icon-disabled-icon-color',
|
||||
'with-icon-disabled-icon-opacity',
|
||||
'with-icon-focus-icon-color',
|
||||
'with-icon-hover-icon-color',
|
||||
'with-icon-icon-color',
|
||||
'with-icon-icon-size',
|
||||
'with-icon-pressed-icon-color',
|
||||
'with-icon-spacing-leading',
|
||||
'with-icon-spacing-trailing',
|
||||
'with-trailing-icon-spacing-leading',
|
||||
@ -55,8 +53,10 @@ $supported-tokens: (
|
||||
|
||||
$unsupported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'focus-outline-color',
|
||||
'focus-state-layer-color',
|
||||
'focus-state-layer-opacity',
|
||||
'hover-outline-color',
|
||||
'label-text-font',
|
||||
'label-text-line-height',
|
||||
'label-text-size',
|
||||
@ -89,6 +89,16 @@ $_default: (
|
||||
'with-trailing-icon-spacing-trailing':
|
||||
if($exclude-hardcoded-values, null, 16px),
|
||||
// go/keep-sorted end
|
||||
),
|
||||
$renamed-tokens: (
|
||||
// Remove "with-*" prefixes (b/273534858)
|
||||
'with-icon-disabled-icon-color': 'disabled-icon-color',
|
||||
'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',
|
||||
'with-icon-focus-icon-color': 'focus-icon-color',
|
||||
'with-icon-hover-icon-color': 'hover-icon-color',
|
||||
'with-icon-icon-color': 'icon-color',
|
||||
'with-icon-icon-size': 'icon-size',
|
||||
'with-icon-pressed-icon-color': 'pressed-icon-color'
|
||||
)
|
||||
);
|
||||
|
||||
|
@ -19,26 +19,26 @@ $supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'container-height',
|
||||
'container-shape',
|
||||
'disabled-icon-color',
|
||||
'disabled-icon-opacity',
|
||||
'disabled-label-text-color',
|
||||
'disabled-label-text-opacity',
|
||||
'focus-icon-color',
|
||||
'focus-label-text-color',
|
||||
'hover-icon-color',
|
||||
'hover-label-text-color',
|
||||
'hover-state-layer-color',
|
||||
'hover-state-layer-opacity',
|
||||
'icon-color',
|
||||
'icon-size',
|
||||
'label-text-color',
|
||||
'label-text-type',
|
||||
'pressed-icon-color',
|
||||
'pressed-label-text-color',
|
||||
'pressed-state-layer-color',
|
||||
'pressed-state-layer-opacity',
|
||||
'spacing-leading',
|
||||
'spacing-trailing',
|
||||
'with-icon-disabled-icon-color',
|
||||
'with-icon-disabled-icon-opacity',
|
||||
'with-icon-focus-icon-color',
|
||||
'with-icon-hover-icon-color',
|
||||
'with-icon-icon-color',
|
||||
'with-icon-icon-size',
|
||||
'with-icon-pressed-icon-color',
|
||||
'with-icon-spacing-leading',
|
||||
'with-icon-spacing-trailing',
|
||||
'with-trailing-icon-spacing-leading',
|
||||
@ -82,6 +82,16 @@ $_default: (
|
||||
'with-trailing-icon-spacing-trailing':
|
||||
if($exclude-hardcoded-values, null, 12px),
|
||||
// go/keep-sorted end
|
||||
),
|
||||
$renamed-tokens: (
|
||||
// Remove "with-*" prefixes (b/273534858)
|
||||
'with-icon-disabled-icon-color': 'disabled-icon-color',
|
||||
'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',
|
||||
'with-icon-focus-icon-color': 'focus-icon-color',
|
||||
'with-icon-hover-icon-color': 'hover-icon-color',
|
||||
'with-icon-icon-color': 'icon-color',
|
||||
'with-icon-icon-size': 'icon-size',
|
||||
'with-icon-pressed-icon-color': 'pressed-icon-color'
|
||||
)
|
||||
);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user