chore(button): remove compat deps

PiperOrigin-RevId: 477772962
This commit is contained in:
Elizabeth Mitchell 2022-09-29 11:13:51 -07:00 committed by Copybara-Service
parent bcf19bc081
commit 6059aa1c8f
6 changed files with 60 additions and 95 deletions

View File

@ -6,21 +6,9 @@
// stylelint-disable selector-class-pattern --
// Selector '.md3-*' should only be used in this project.
// TODO(b/228217731): Remove MDC/MWC dependencies
@use 'sass:map';
@use '@material/web/sass/color';
@use '@material/web/ripple/ripple-theme';
@use '@material/web/compat/theme/state';
$selectors: (
// :not(:disabled) is used to support link styled as button
// as link does not support :enabled style
enabled: ':not(:disabled)',
disabled: ':disabled',
focus: ':focus',
hover: ':hover',
pressed: ':active'
);
@mixin theme-styles($theme) {
@include _set-label-text-typography(
@ -127,46 +115,44 @@ $selectors: (
}
@mixin _container-fill-color($color-or-map) {
@include state.default($selectors) {
@include _set-container-fill-color(state.get-default-state($color-or-map));
&:not(:disabled) {
@include _set-container-fill-color(map.get($color-or-map, default));
}
@include state.hover($selectors) {
@include _set-container-fill-color(state.get-hover-state($color-or-map));
&:hover {
@include _set-container-fill-color(map.get($color-or-map, hover));
}
@include state.focus($selectors) {
@include _set-container-fill-color(state.get-focus-state($color-or-map));
&:focus {
@include _set-container-fill-color(map.get($color-or-map, focus));
}
@include state.pressed($selectors) {
@include _set-container-fill-color(state.get-pressed-state($color-or-map));
&:active {
@include _set-container-fill-color(map.get($color-or-map, pressed));
}
@include state.disabled($selectors) {
@include _set-container-fill-color(state.get-disabled-state($color-or-map));
&:disabled {
@include _set-container-fill-color(map.get($color-or-map, disabled));
}
}
@mixin _ink-color($color-or-map) {
@include state.default($selectors) {
@include _set-ink-color(state.get-default-state($color-or-map));
@include _set-ink-color(map.get($color-or-map, default));
&:hover {
@include _set-ink-color(map.get($color-or-map, hover));
}
@include state.hover($selectors) {
@include _set-ink-color(state.get-hover-state($color-or-map));
&:focus {
@include _set-ink-color(map.get($color-or-map, focus));
}
@include state.focus($selectors) {
@include _set-ink-color(state.get-focus-state($color-or-map));
&:active {
@include _set-ink-color(map.get($color-or-map, pressed));
}
@include state.pressed($selectors) {
@include _set-ink-color(state.get-pressed-state($color-or-map));
}
@include state.disabled($selectors) {
@include _set-ink-color(state.get-disabled-state($color-or-map));
&:disabled {
@include _set-ink-color(map.get($color-or-map, disabled));
}
}

View File

@ -6,10 +6,7 @@
// stylelint-disable selector-class-pattern --
// Selector '.md3-*' should only be used in this project.
// TODO(b/228217731): Remove compat dependencies
@use '@material/web/compat/touchtarget/touch-target';
@use '@material/web/elevation/lib/surface' as elevation-surface;
@use '@material/web/compat/theme/selector-ext';
@use '@material/web/sass/dom';
@use './button-theme';
@ -17,9 +14,10 @@
@mixin static-styles() {
:host {
@include host-root;
@include selector-ext.append-strict(&, '[disabled]') {
@include disabled;
}
:host([disabled]) {
@include disabled;
}
.md3-button {

View File

@ -3,20 +3,13 @@
// SPDX-License-Identifier: Apache-2.0
//
// TODO(b/228217731): Remove MDC/MWC dependencies
@use 'sass:map';
@use 'sass:meta';
@use '@material/web/elevation/lib/elevation-theme';
@use '@material/web/ripple/ripple-theme';
@use '@material/web/compat/theme/state';
@use './button-theme';
$_selectors: button-theme.$selectors;
@mixin theme-styles($theme) {
@debug map.get($theme, container-elevation-shadow);
@include _elevation(
(
default: (
@ -70,25 +63,23 @@ $_selectors: button-theme.$selectors;
}
@mixin _elevation($elevations) {
@include state.default($_selectors) {
@include elevation-theme.theme-styles(state.get-default-state($elevations));
@include elevation-theme.theme-styles(map.get($elevations, default));
&:hover {
@include elevation-theme.theme-styles(map.get($elevations, hover));
}
@include state.hover($_selectors) {
@include elevation-theme.theme-styles(state.get-hover-state($elevations));
&:focus {
@include elevation-theme.theme-styles(map.get($elevations, focus));
}
@include state.focus($_selectors) {
@include elevation-theme.theme-styles(state.get-focus-state($elevations));
&:active {
@include elevation-theme.theme-styles(map.get($elevations, pressed));
}
@include state.pressed($_selectors) {
@include elevation-theme.theme-styles(state.get-pressed-state($elevations));
}
@include state.disabled($_selectors) {
&:disabled {
@include elevation-theme.theme-styles(
state.get-disabled-state($elevations)
map.get($elevations, disabled)
);
}
}

View File

@ -6,13 +6,8 @@
// stylelint-disable selector-class-pattern --
// Selector '.md3-*' should only be used in this project.
// TODO(b/228217731): Remove MDC/MWC dependencies
@use 'sass:map';
@use '@material/web/ripple/ripple-theme';
@use '@material/web/compat/theme/state';
@use './button-theme';
$_selectors: button-theme.$selectors;
@mixin theme-styles($theme) {
@include _set-icon-color(
@ -29,24 +24,22 @@ $_selectors: button-theme.$selectors;
}
@mixin _set-icon-color($colors) {
@include state.default($_selectors) {
@include _icon-color(state.get-default-state($colors));
@include _icon-color(map.get($colors, default));
&:hover {
@include _icon-color(map.get($colors, hover));
}
@include state.hover($_selectors) {
@include _icon-color(state.get-hover-state($colors));
&:focus {
@include _icon-color(map.get($colors, focus));
}
@include state.focus($_selectors) {
@include _icon-color(state.get-focus-state($colors));
&:active {
@include _icon-color(map.get($colors, pressed));
}
@include state.pressed($_selectors) {
@include _icon-color(state.get-pressed-state($colors));
}
@include state.disabled($_selectors) {
@include _icon-color(state.get-disabled-state($colors));
&:disabled {
@include _icon-color(map.get($colors, disabled));
}
}

View File

@ -6,9 +6,7 @@
// stylelint-disable selector-class-pattern --
// Selector '.md3-*' should only be used in this project.
// TODO(b/228217731): Remove compat dependencies
@use 'sass:map';
@use '@material/web/compat/theme/state';
@use '@material/web/sass/resolvers';
@use '@material/web/sass/theme';
@use '@material/web/sass/typography';
@ -16,7 +14,6 @@
@use './button-theme';
@use './icon-theme';
$_selectors: button-theme.$selectors;
$_custom-property-prefix: 'outlined-button';
$light-theme: tokens.md-comp-outlined-button-values();
@ -72,24 +69,22 @@ $light-theme: tokens.md-comp-outlined-button-values();
}
@mixin _outline-color($colors) {
@include state.default($_selectors) {
@include _set-outline-color(state.get-default-state($colors));
@include _set-outline-color(map.get($colors, default));
&:hover {
@include _set-outline-color(map.get($colors, hover));
}
@include state.hover($_selectors) {
@include _set-outline-color(state.get-hover-state($colors));
&:focus {
@include _set-outline-color(map.get($colors, focus));
}
@include state.focus($_selectors) {
@include _set-outline-color(state.get-focus-state($colors));
&:active {
@include _set-outline-color(map.get($colors, pressed));
}
@include state.pressed($_selectors) {
@include _set-outline-color(state.get-pressed-state($colors));
}
@include state.disabled($_selectors) {
@include _set-outline-color(state.get-disabled-state($colors));
&:disabled {
@include _set-outline-color(map.get($colors, disabled));
}
}

View File

@ -6,11 +6,13 @@
// stylelint-disable selector-class-pattern --
// Selector '.md3-*' should only be used in this project.
// TODO(b/228217731): Remove compat dependencies
@use '@material/web/compat/touchtarget/touch-target';
@mixin static-styles() {
.md3-button__touch {
@include touch-target.touch-target;
position: absolute;
top: 50%;
height: 48px;
left: 0;
right: 0;
transform: translateY(-50%);
}
}