material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-09-11 13:46:10 +03:00
Code Issues Projects Releases Wiki Activity

fix(button)!: remove with-* prefix from tokens

Browse Source 
PiperOrigin-RevId: 546883625
This commit is contained in:
Andrew Jakubowicz 2023-07-10 08:44:10 -07:00 committed by Copybara-Service
parent 1893e08f54
commit 25be982568
11 changed files with 144 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
button/elevated-button_test.ts Normal file
View 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);
});
});

18
button/lib/_icon.scss
View File

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

4
button/lib/_outlined-button.scss
View File

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

24
tokens/_md-comp-elevated-button.scss
View File

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

24
tokens/_md-comp-filled-button.scss
View File

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

24
tokens/_md-comp-filled-tonal-button.scss
View File

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

28
tokens/_md-comp-outlined-button.scss
View File

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

24
tokens/_md-comp-text-button.scss
View File

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