diff --git a/src/material-experimental/_index.scss b/src/material-experimental/_index.scss index 60405e7a2850..0dcaa9649807 100644 --- a/src/material-experimental/_index.scss +++ b/src/material-experimental/_index.scss @@ -27,6 +27,10 @@ mdc-autocomplete-typography, mdc-autocomplete-density, mdc-autocomplete-theme; @forward './mdc-button/button-theme' as mdc-button-* show mdc-button-color, mdc-button-typography, mdc-button-density, mdc-button-theme; +@forward './mdc-button/fab-theme' as mdc-fab-* show mdc-fab-color, mdc-fab-typography, + mdc-fab-density, mdc-fab-theme; +@forward './mdc-button/icon-button-theme' as mdc-icon-button-* show mdc-icon-button-color, + mdc-icon-button-typography, mdc-icon-button-density, mdc-icon-button-theme; @forward './mdc-card/card-theme' as mdc-card-* show mdc-card-color, mdc-card-typography, mdc-card-density, mdc-card-theme; @forward './mdc-checkbox/checkbox-theme' as mdc-checkbox-* show mdc-checkbox-color, diff --git a/src/material-experimental/mdc-button/_button-theme-private.scss b/src/material-experimental/mdc-button/_button-theme-private.scss new file mode 100644 index 000000000000..132b386b61ef --- /dev/null +++ b/src/material-experimental/mdc-button/_button-theme-private.scss @@ -0,0 +1,47 @@ +@use '@material/theme/theme-color' as mdc-theme-color; +@use '@material/theme/theme' as mdc-theme; +@use '../../material/core/ripple/ripple-theme'; + +// Selector for the element that has a background color and opacity applied to its ::before and +// ::after for state interactions (hover, active, focus). Their API calls this their +// "ripple target", but we do not use it as our ripple, just state color. +$button-state-target: '.mdc-button__ripple'; +$fab-state-target: '.mdc-fab__ripple'; + +// The MDC button's ripple ink color is based on the theme color, not on the foreground base +// which is what the ripple mixin uses. This creates a new theme that sets the color to the +// foreground base to appropriately color the ink. +@mixin ripple-ink-color($mdc-color) { + @include ripple-theme.theme(( + foreground: ( + base: mdc-theme-color.prop-value($mdc-color) + ), + )); +} + +// Applies the disabled theme color to the text color. +@mixin apply-disabled-color() { + @include mdc-theme.prop(color, + mdc-theme-color.ink-color-for-fill_(disabled, mdc-theme-color.$background)); +} + +// Wraps the content style in a selector for the disabled state. +// MDC adds theme color by using :not(:disabled), so just using [disabled] once will not +// override this, neither will it apply to anchor tags. This needs to override the +// previously set theme color, so it must be ordered after the theme styles. +// TODO(andrewseguin): Discuss with the MDC team to see if we can avoid the :not(:disabled) by +// manually styling disabled buttons with a [disabled] selector. +@mixin apply-disabled-style() { + &[disabled][disabled] { + @content; + } +} + +// Applies the disabled theme background color for raised buttons. Value is taken from +// mixin `mdc-button--filled`. +// TODO(andrewseguin): Discuss with the MDC team about providing a variable for the 0.12 value +// or otherwise have a mixin we can call to apply this style for both button and anchors. +@mixin apply-disabled-background() { + @include mdc-theme.prop(background-color, rgba(mdc-theme-color.prop-value(on-surface), 0.12)); +} + diff --git a/src/material-experimental/mdc-button/_button-theme.import.scss b/src/material-experimental/mdc-button/_button-theme.import.scss index b722129a8f5b..b2cbeb5577b4 100644 --- a/src/material-experimental/mdc-button/_button-theme.import.scss +++ b/src/material-experimental/mdc-button/_button-theme.import.scss @@ -1,19 +1,16 @@ @forward '../mdc-helpers/mdc-helpers.import'; @forward '../../material/core/ripple/ripple.import'; @forward '../mdc-helpers/mdc-helpers'; -@forward 'button-theme' hide color, density, fab-color, fab-density, fab-theme, fab-typography, -icon-button-color, icon-button-density, icon-button-theme, icon-button-typography, theme, -typography; +@forward 'button-theme' hide color, density, theme, typography; @forward 'button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, mat-mdc-color, mat-mdc-density, mat-mdc-mat-button-apply-disabled-style, mat-mdc-mat-button-disabled-background, mat-mdc-mat-button-disabled-color, mat-mdc-mat-button-ripple-ink-color, mat-mdc-theme, mat-mdc-typography; @forward 'button-theme' as mat-mdc-button-* hide $mat-mdc-button-mat-button-state-target, -mat-mdc-button-fab-color, mat-mdc-button-fab-density, mat-mdc-button-fab-theme, -mat-mdc-button-fab-typography, mat-mdc-button-icon-button-color, mat-mdc-button-icon-button-density, -mat-mdc-button-icon-button-theme, mat-mdc-button-icon-button-typography, mat-mdc-button-mat-button-apply-disabled-style, mat-mdc-button-mat-button-disabled-background, mat-mdc-button-mat-button-disabled-color, mat-mdc-button-mat-button-ripple-ink-color; +@forward 'fab-theme' as mat-mdc-fab-*; +@forward 'icon-button-theme' as mat-mdc-icon-button-*; @import '../../material/core/ripple/ripple'; @import '../mdc-helpers/mdc-helpers'; diff --git a/src/material-experimental/mdc-button/_button-theme.scss b/src/material-experimental/mdc-button/_button-theme.scss index 5e2d5898840c..bcbb44d60280 100644 --- a/src/material-experimental/mdc-button/_button-theme.scss +++ b/src/material-experimental/mdc-button/_button-theme.scss @@ -1,8 +1,5 @@ @use '@material/button/button' as mdc-button; @use '@material/button/button-theme' as mdc-button-theme; -@use '@material/fab/fab' as mdc-fab; -@use '@material/fab/fab-theme' as mdc-fab-theme; -@use '@material/icon-button/mixins' as mdc-icon-button; @use '@material/ripple/ripple-theme' as mdc-ripple-theme; @use '@material/theme/theme-color' as mdc-theme-color; @use '@material/theme/theme' as mdc-theme; @@ -11,51 +8,7 @@ @use '../../material/core/typography/typography'; @use '../mdc-helpers/mdc-helpers'; @use '../../material/core/theming/theming'; - -// Selector for the element that has a background color and opacity applied to its ::before and -// ::after for state interactions (hover, active, focus). Their API calls this their -// "ripple target", but we do not use it as our ripple, just state color. -$mat-button-state-target: '.mdc-button__ripple'; -$mat-fab-state-target: '.mdc-fab__ripple'; - -// Applies the disabled theme color to the text color. -@mixin _disabled-color() { - @include mdc-theme.prop(color, - mdc-theme-color.ink-color-for-fill_(disabled, mdc-theme-color.$background)); -} - -// Wraps the content style in a selector for the disabled state. -// MDC adds theme color by using :not(:disabled), so just using [disabled] once will not -// override this, neither will it apply to anchor tags. This needs to override the -// previously set theme color, so it must be ordered after the theme styles. -// TODO(andrewseguin): Discuss with the MDC team to see if we can avoid the :not(:disabled) by -// manually styling disabled buttons with a [disabled] selector. -@mixin _apply-disabled-style() { - &[disabled][disabled] { - @content; - } -} - -// The MDC button's ripple ink color is based on the theme color, not on the foreground base -// which is what the ripple mixin uses. This creates a new theme that sets the color to the -// foreground base to appropriately color the ink. -@mixin _ripple-color($mdcColor) { - @include ripple-theme.theme(( - foreground: ( - base: mdc-theme-color.prop-value($mdcColor) - ), - )); -} - -// Applies the disabled theme background color for raised buttons. Value is taken from -// mixin `mdc-button--filled`. -// TODO(andrewseguin): Discuss with the MDC team about providing a variable for the 0.12 value -// or otherwise have a mixin we can call to apply this style for both button and anchors. -@mixin _disabled-background() { - @include mdc-theme.prop(background-color, - rgba(mdc-theme-color.prop-value(on-surface), 0.12)); -} - +@use './button-theme-private'; @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); @@ -64,7 +17,8 @@ $mat-fab-state-target: '.mdc-fab__ripple'; // the mixin mdc-states-base-color .mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button { @include mdc-ripple-theme.states( - $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + $query: mdc-helpers.$mat-theme-styles-query, + $ripple-target: button-theme-private.$button-state-target); } .mat-mdc-button, .mat-mdc-outlined-button { @@ -77,24 +31,24 @@ $mat-fab-state-target: '.mdc-fab__ripple'; @include mdc-button-theme.ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query); @include mdc-ripple-theme.states-base-color(primary, $query: mdc-helpers.$mat-theme-styles-query, - $ripple-target: $mat-button-state-target); - @include _ripple-color(primary); + $ripple-target: button-theme-private.$button-state-target); + @include button-theme-private.ripple-ink-color(primary); } &.mat-accent { @include mdc-button-theme.ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query); @include mdc-ripple-theme.states-base-color(secondary, $query: mdc-helpers.$mat-theme-styles-query, - $ripple-target: $mat-button-state-target); - @include _ripple-color(secondary); + $ripple-target: button-theme-private.$button-state-target); + @include button-theme-private.ripple-ink-color(secondary); } &.mat-warn { @include mdc-button-theme.ink-color(error, $query: mdc-helpers.$mat-theme-styles-query); @include mdc-ripple-theme.states-base-color(error, $query: mdc-helpers.$mat-theme-styles-query, - $ripple-target: $mat-button-state-target); - @include _ripple-color(error); + $ripple-target: button-theme-private.$button-state-target); + @include button-theme-private.ripple-ink-color(error); } } @@ -106,7 +60,8 @@ $mat-fab-state-target: '.mdc-fab__ripple'; @include mdc-button-theme.ink-color(mdc-theme-color.$on-surface, $query: mdc-helpers.$mat-theme-styles-query); @include mdc-ripple-theme.states-base-color(mdc-theme-color.$on-surface, - $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); + $query: mdc-helpers.$mat-theme-styles-query, + $ripple-target: button-theme-private.$button-state-target); } &.mat-primary { @@ -116,8 +71,8 @@ $mat-fab-state-target: '.mdc-fab__ripple'; $query: mdc-helpers.$mat-theme-styles-query); @include mdc-ripple-theme.states-base-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query, - $ripple-target: $mat-button-state-target); - @include _ripple-color(on-primary); + $ripple-target: button-theme-private.$button-state-target); + @include button-theme-private.ripple-ink-color(on-primary); } &.mat-accent { @@ -127,8 +82,8 @@ $mat-fab-state-target: '.mdc-fab__ripple'; $query: mdc-helpers.$mat-theme-styles-query); @include mdc-ripple-theme.states-base-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query, - $ripple-target: $mat-button-state-target); - @include _ripple-color(on-secondary); + $ripple-target: button-theme-private.$button-state-target); + @include button-theme-private.ripple-ink-color(on-secondary); } &.mat-warn { @@ -137,12 +92,12 @@ $mat-fab-state-target: '.mdc-fab__ripple'; @include mdc-button-theme.ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query); @include mdc-ripple-theme.states-base-color(on-error, $query: mdc-helpers.$mat-theme-styles-query, - $ripple-target: $mat-button-state-target); - @include _ripple-color(on-error); + $ripple-target: button-theme-private.$button-state-target); + @include button-theme-private.ripple-ink-color(on-error); } - @include _apply-disabled-style() { - @include _disabled-background(); + @include button-theme-private.apply-disabled-style() { + @include button-theme-private.apply-disabled-background(); } } @@ -167,21 +122,21 @@ $mat-fab-state-target: '.mdc-fab__ripple'; $query: mdc-helpers.$mat-theme-styles-query); } - @include _apply-disabled-style() { + @include button-theme-private.apply-disabled-style() { @include mdc-theme.prop(border-color, mdc-theme-color.ink-color-for-fill_(disabled, mdc-theme-color.$background)); } } .mat-mdc-raised-button { - @include _apply-disabled-style() { + @include button-theme-private.apply-disabled-style() { @include mdc-elevation-theme.elevation(0, $query: mdc-helpers.$mat-theme-styles-query); } } .mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button { - @include _apply-disabled-style() { - @include _disabled-color(); + @include button-theme-private.apply-disabled-style() { + @include button-theme-private.apply-disabled-color(); } } @@ -225,163 +180,3 @@ $mat-fab-state-target: '.mdc-fab__ripple'; } } } - -@mixin fab-color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - @include mdc-helpers.mat-using-mdc-theme($config) { - .mat-mdc-fab, .mat-mdc-mini-fab { - @include mdc-ripple-theme.states( - $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-fab-state-target); - - &.mat-unthemed { - @include mdc-ripple-theme.states-base-color(mdc-theme-color.$on-surface, - $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-fab-state-target); - @include mdc-fab-theme.container-color(mdc-theme-color.$on-surface, - $query: mdc-helpers.$mat-theme-styles-query); - @include mdc-fab-theme.ink-color(mdc-theme-color.$on-surface, - $query: mdc-helpers.$mat-theme-styles-query); - } - - &.mat-primary { - @include mdc-ripple-theme.states-base-color(on-primary, - $query: mdc-helpers.$mat-theme-styles-query, - $ripple-target: $mat-fab-state-target); - @include mdc-fab-theme.container-color(primary, - $query: mdc-helpers.$mat-theme-styles-query); - @include mdc-fab-theme.ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query); - @include _ripple-color(on-primary); - } - - &.mat-accent { - @include mdc-ripple-theme.states-base-color(on-secondary, - $query: mdc-helpers.$mat-theme-styles-query, - $ripple-target: $mat-fab-state-target); - @include mdc-fab-theme.container-color(secondary, - $query: mdc-helpers.$mat-theme-styles-query); - @include mdc-fab-theme.ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query); - @include _ripple-color(on-secondary); - } - - &.mat-warn { - @include mdc-ripple-theme.states-base-color(on-error, - $query: mdc-helpers.$mat-theme-styles-query, - $ripple-target: $mat-fab-state-target); - @include mdc-fab-theme.container-color(error, $query: mdc-helpers.$mat-theme-styles-query); - @include mdc-fab-theme.ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query); - @include _ripple-color(on-error); - } - - @include _apply-disabled-style() { - @include _disabled-color(); - @include _disabled-background(); - @include mdc-elevation-theme.elevation(0, $query: mdc-helpers.$mat-theme-styles-query); - } - } - - @include mdc-fab.without-ripple($query: mdc-helpers.$mat-theme-styles-query); - } -} - -@mixin fab-typography($config-or-theme) { - $config: typography.private-typography-to-2018-config( - theming.get-typography-config($config-or-theme)); - @include mdc-helpers.mat-using-mdc-typography($config) { - @include mdc-fab.without-ripple($query: mdc-helpers.$mat-typography-styles-query); - } -} - -@mixin fab-density($config-or-theme) {} - -@mixin fab-theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); - @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-fab') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - - @if $color != null { - @include fab-color($color); - } - @if $density != null { - @include fab-density($density); - } - @if $typography != null { - @include fab-typography($typography); - } - } -} - - -@mixin icon-button-color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - @include mdc-helpers.mat-using-mdc-theme($config) { - .mat-mdc-icon-button { - @include mdc-ripple-theme.states( - $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target); - - &.mat-primary { - @include mdc-ripple-theme.states-base-color(primary, - $query: mdc-helpers.$mat-theme-styles-query, - $ripple-target: $mat-button-state-target); - @include mdc-icon-button.ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query); - @include _ripple-color(primary); - } - - &.mat-accent { - @include mdc-ripple-theme.states-base-color(secondary, - $query: mdc-helpers.$mat-theme-styles-query, - $ripple-target: $mat-button-state-target); - @include mdc-icon-button.ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query); - @include _ripple-color(secondary); - } - - &.mat-warn { - @include mdc-ripple-theme.states-base-color(error, - $query: mdc-helpers.$mat-theme-styles-query, - $ripple-target: $mat-button-state-target); - @include mdc-icon-button.ink-color(error, $query: mdc-helpers.$mat-theme-styles-query); - @include _ripple-color(error); - } - - @include _apply-disabled-style() { - @include _disabled-color(); - } - } - - @include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-theme-styles-query); - } -} - -@mixin icon-button-typography($config-or-theme) { - $config: typography.private-typography-to-2018-config( - theming.get-typography-config($config-or-theme)); - @include mdc-helpers.mat-using-mdc-typography($config) { - @include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-typography-styles-query); - } -} - -@mixin icon-button-density($config-or-theme) { - $density-scale: theming.get-density-config($config-or-theme); - .mat-mdc-icon-button { - @include mdc-icon-button.density($density-scale, $query: mdc-helpers.$mat-base-styles-query); - } -} - -@mixin icon-button-theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); - @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-icon-button') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - - @if $color != null { - @include icon-button-color($color); - } - @if $density != null { - @include icon-button-density($density); - } - @if $typography != null { - @include icon-button-typography($typography); - } - } -} diff --git a/src/material-experimental/mdc-button/_fab-theme.scss b/src/material-experimental/mdc-button/_fab-theme.scss new file mode 100644 index 000000000000..676fa8340ce3 --- /dev/null +++ b/src/material-experimental/mdc-button/_fab-theme.scss @@ -0,0 +1,96 @@ +@use '@material/fab/fab' as mdc-fab; +@use '@material/fab/fab-theme' as mdc-fab-theme; +@use '@material/ripple/ripple-theme' as mdc-ripple-theme; +@use '@material/elevation/elevation-theme' as mdc-elevation-theme; +@use '@material/theme/theme-color' as mdc-theme-color; +@use '../mdc-helpers/mdc-helpers'; +@use '../../material/core/theming/theming'; +@use '../../material/core/typography/typography'; +@use './button-theme-private'; + +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-theme($config) { + .mat-mdc-fab, .mat-mdc-mini-fab { + @include mdc-ripple-theme.states( + $query: mdc-helpers.$mat-theme-styles-query, + $ripple-target: button-theme-private.$fab-state-target); + + &.mat-unthemed { + @include mdc-ripple-theme.states-base-color(mdc-theme-color.$on-surface, + $query: mdc-helpers.$mat-theme-styles-query, + $ripple-target: button-theme-private.$fab-state-target); + @include mdc-fab-theme.container-color(mdc-theme-color.$on-surface, + $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-fab-theme.ink-color(mdc-theme-color.$on-surface, + $query: mdc-helpers.$mat-theme-styles-query); + } + + &.mat-primary { + @include mdc-ripple-theme.states-base-color(on-primary, + $query: mdc-helpers.$mat-theme-styles-query, + $ripple-target: button-theme-private.$fab-state-target); + @include mdc-fab-theme.container-color(primary, + $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-fab-theme.ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query); + @include button-theme-private.ripple-ink-color(on-primary); + } + + &.mat-accent { + @include mdc-ripple-theme.states-base-color(on-secondary, + $query: mdc-helpers.$mat-theme-styles-query, + $ripple-target: button-theme-private.$fab-state-target); + @include mdc-fab-theme.container-color(secondary, + $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-fab-theme.ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query); + @include button-theme-private.ripple-ink-color(on-secondary); + } + + &.mat-warn { + @include mdc-ripple-theme.states-base-color(on-error, + $query: mdc-helpers.$mat-theme-styles-query, + $ripple-target: button-theme-private.$fab-state-target); + @include mdc-fab-theme.container-color(error, $query: mdc-helpers.$mat-theme-styles-query); + @include mdc-fab-theme.ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query); + @include button-theme-private.ripple-ink-color(on-error); + } + + @include button-theme-private.apply-disabled-style() { + @include button-theme-private.apply-disabled-color(); + @include button-theme-private.apply-disabled-background(); + @include mdc-elevation-theme.elevation(0, $query: mdc-helpers.$mat-theme-styles-query); + } + } + + @include mdc-fab.without-ripple($query: mdc-helpers.$mat-theme-styles-query); + } +} + +@mixin typography($config-or-theme) { + $config: typography.private-typography-to-2018-config( + theming.get-typography-config($config-or-theme)); + @include mdc-helpers.mat-using-mdc-typography($config) { + @include mdc-fab.without-ripple($query: mdc-helpers.$mat-typography-styles-query); + } +} + +@mixin density($config-or-theme) {} + +@mixin theme($theme-or-color-config) { + $theme: theming.private-legacy-get-theme($theme-or-color-config); + @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-fab') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); + + @if $color != null { + @include color($color); + } + @if $density != null { + @include density($density); + } + @if $typography != null { + @include typography($typography); + } + } +} diff --git a/src/material-experimental/mdc-button/_icon-button-theme.scss b/src/material-experimental/mdc-button/_icon-button-theme.scss new file mode 100644 index 000000000000..a9b42d036313 --- /dev/null +++ b/src/material-experimental/mdc-button/_icon-button-theme.scss @@ -0,0 +1,81 @@ +@use '@material/icon-button/mixins' as mdc-icon-button; +@use '@material/ripple/ripple-theme' as mdc-ripple-theme; +@use '../mdc-helpers/mdc-helpers'; +@use '../../material/core/theming/theming'; +@use '../../material/core/typography/typography'; +@use './button-theme-private'; + +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + @include mdc-helpers.mat-using-mdc-theme($config) { + .mat-mdc-icon-button { + @include mdc-ripple-theme.states( + $query: mdc-helpers.$mat-theme-styles-query, + $ripple-target: button-theme-private.$button-state-target); + + &.mat-primary { + @include mdc-ripple-theme.states-base-color(primary, + $query: mdc-helpers.$mat-theme-styles-query, + $ripple-target: button-theme-private.$button-state-target); + @include mdc-icon-button.ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query); + @include button-theme-private.ripple-ink-color(primary); + } + + &.mat-accent { + @include mdc-ripple-theme.states-base-color(secondary, + $query: mdc-helpers.$mat-theme-styles-query, + $ripple-target: button-theme-private.$button-state-target); + @include mdc-icon-button.ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query); + @include button-theme-private.ripple-ink-color(secondary); + } + + &.mat-warn { + @include mdc-ripple-theme.states-base-color(error, + $query: mdc-helpers.$mat-theme-styles-query, + $ripple-target: button-theme-private.$button-state-target); + @include mdc-icon-button.ink-color(error, $query: mdc-helpers.$mat-theme-styles-query); + @include button-theme-private.ripple-ink-color(error); + } + + @include button-theme-private.apply-disabled-style() { + @include button-theme-private.apply-disabled-color(); + } + } + + @include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-theme-styles-query); + } +} + +@mixin typography($config-or-theme) { + $config: typography.private-typography-to-2018-config( + theming.get-typography-config($config-or-theme)); + @include mdc-helpers.mat-using-mdc-typography($config) { + @include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-typography-styles-query); + } +} + +@mixin density($config-or-theme) { + $density-scale: theming.get-density-config($config-or-theme); + .mat-mdc-icon-button { + @include mdc-icon-button.density($density-scale, $query: mdc-helpers.$mat-base-styles-query); + } +} + +@mixin theme($theme-or-color-config) { + $theme: theming.private-legacy-get-theme($theme-or-color-config); + @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-icon-button') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); + + @if $color != null { + @include color($color); + } + @if $density != null { + @include density($density); + } + @if $typography != null { + @include typography($typography); + } + } +} diff --git a/src/material-experimental/mdc-color/_all-color.import.scss b/src/material-experimental/mdc-color/_all-color.import.scss index 6d0fbe7c48ce..01ce168e9f1a 100644 --- a/src/material-experimental/mdc-color/_all-color.import.scss +++ b/src/material-experimental/mdc-color/_all-color.import.scss @@ -2,16 +2,13 @@ @forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; @forward '../../material/core/core.import'; -@forward '../mdc-button/button-theme' hide color, density, fab-color, fab-density, fab-theme, -fab-typography, icon-button-color, icon-button-density, icon-button-theme, icon-button-typography, -theme, typography; +@forward '../mdc-button/button-theme' hide color, density, theme, typography; @forward '../mdc-button/button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography; @forward '../mdc-button/button-theme' as mat-mdc-button-* hide -$mat-mdc-button-mat-button-state-target, mat-mdc-button-fab-color, mat-mdc-button-fab-density, -mat-mdc-button-fab-theme, mat-mdc-button-fab-typography, mat-mdc-button-icon-button-color, -mat-mdc-button-icon-button-density, mat-mdc-button-icon-button-theme, -mat-mdc-button-icon-button-typography; +$mat-mdc-button-mat-button-state-target; +@forward '../mdc-button/fab-theme' as mat-mdc-fab-*; +@forward '../mdc-button/icon-button-theme' as mat-mdc-icon-button-*; @forward '../mdc-card/card-theme' hide color, density, theme, typography; @forward '../mdc-card/card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color, $mat-mdc-card-mdc-card-outline-color; diff --git a/src/material-experimental/mdc-density/_all-density.import.scss b/src/material-experimental/mdc-density/_all-density.import.scss index 835430309e05..35159c73fdf9 100644 --- a/src/material-experimental/mdc-density/_all-density.import.scss +++ b/src/material-experimental/mdc-density/_all-density.import.scss @@ -2,16 +2,13 @@ @forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; @forward '../../material/core/core.import'; -@forward '../mdc-button/button-theme' hide color, density, fab-color, fab-density, fab-theme, -fab-typography, icon-button-color, icon-button-density, icon-button-theme, icon-button-typography, -theme, typography; +@forward '../mdc-button/button-theme' hide color, density, theme, typography; @forward '../mdc-button/button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography; @forward '../mdc-button/button-theme' as mat-mdc-button-* hide -$mat-mdc-button-mat-button-state-target, mat-mdc-button-fab-color, mat-mdc-button-fab-density, -mat-mdc-button-fab-theme, mat-mdc-button-fab-typography, mat-mdc-button-icon-button-color, -mat-mdc-button-icon-button-density, mat-mdc-button-icon-button-theme, -mat-mdc-button-icon-button-typography; +$mat-mdc-button-mat-button-state-target; +@forward '../mdc-button/fab-theme' as mat-mdc-fab-*; +@forward '../mdc-button/icon-button-theme' as mat-mdc-icon-button-*; @forward '../mdc-card/card-theme' hide color, density, theme, typography; @forward '../mdc-card/card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color, $mat-mdc-card-mdc-card-outline-color; diff --git a/src/material-experimental/mdc-theming/_all-theme.import.scss b/src/material-experimental/mdc-theming/_all-theme.import.scss index d16ad3c30022..9f97d8aabef6 100644 --- a/src/material-experimental/mdc-theming/_all-theme.import.scss +++ b/src/material-experimental/mdc-theming/_all-theme.import.scss @@ -2,16 +2,13 @@ @forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; @forward '../../material/core/core.import'; -@forward '../mdc-button/button-theme' hide color, density, fab-color, fab-density, fab-theme, -fab-typography, icon-button-color, icon-button-density, icon-button-theme, icon-button-typography, -theme, typography; +@forward '../mdc-button/button-theme' hide color, density, theme, typography; @forward '../mdc-button/button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography; @forward '../mdc-button/button-theme' as mat-mdc-button-* hide -$mat-mdc-button-mat-button-state-target, mat-mdc-button-fab-color, mat-mdc-button-fab-density, -mat-mdc-button-fab-theme, mat-mdc-button-fab-typography, mat-mdc-button-icon-button-color, -mat-mdc-button-icon-button-density, mat-mdc-button-icon-button-theme, -mat-mdc-button-icon-button-typography; +$mat-mdc-button-mat-button-state-target; +@forward '../mdc-button/fab-theme' as mat-mdc-fab-*; +@forward '../mdc-button/icon-button-theme' as mat-mdc-icon-button-*; @forward '../mdc-card/card-theme' hide color, density, theme, typography; @forward '../mdc-card/card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color, $mat-mdc-card-mdc-card-outline-color; diff --git a/src/material-experimental/mdc-theming/_all-theme.scss b/src/material-experimental/mdc-theming/_all-theme.scss index 4d9068e3afd4..36e7a18cb974 100644 --- a/src/material-experimental/mdc-theming/_all-theme.scss +++ b/src/material-experimental/mdc-theming/_all-theme.scss @@ -1,6 +1,8 @@ @use '../mdc-core/core-theme'; @use '../mdc-autocomplete/autocomplete-theme'; @use '../mdc-button/button-theme'; +@use '../mdc-button/fab-theme'; +@use '../mdc-button/icon-button-theme'; @use '../mdc-card/card-theme'; @use '../mdc-checkbox/checkbox-theme'; @use '../mdc-chips/chips-theme'; @@ -29,8 +31,8 @@ @include autocomplete-theme.theme($theme-or-color-config); @include button-theme.theme($theme-or-color-config); @include dialog-theme.theme($theme-or-color-config); - @include button-theme.fab-theme($theme-or-color-config); - @include button-theme.icon-button-theme($theme-or-color-config); + @include fab-theme.theme($theme-or-color-config); + @include icon-button-theme.theme($theme-or-color-config); @include card-theme.theme($theme-or-color-config); @include checkbox-theme.theme($theme-or-color-config); @include chips-theme.theme($theme-or-color-config); diff --git a/src/material-experimental/mdc-typography/_all-typography.import.scss b/src/material-experimental/mdc-typography/_all-typography.import.scss index e36a0a00a79b..ae9f9de1ef0f 100644 --- a/src/material-experimental/mdc-typography/_all-typography.import.scss +++ b/src/material-experimental/mdc-typography/_all-typography.import.scss @@ -2,16 +2,13 @@ @forward '../mdc-helpers/mdc-helpers.import'; @forward '../mdc-helpers/mdc-helpers'; @forward '../../material/core/core.import'; -@forward '../mdc-button/button-theme' hide color, density, fab-color, fab-density, fab-theme, -fab-typography, icon-button-color, icon-button-density, icon-button-theme, icon-button-typography, -theme, typography; +@forward '../mdc-button/button-theme' hide color, density, theme, typography; @forward '../mdc-button/button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography; @forward '../mdc-button/button-theme' as mat-mdc-button-* hide -$mat-mdc-button-mat-button-state-target, mat-mdc-button-fab-color, mat-mdc-button-fab-density, -mat-mdc-button-fab-theme, mat-mdc-button-fab-typography, mat-mdc-button-icon-button-color, -mat-mdc-button-icon-button-density, mat-mdc-button-icon-button-theme, -mat-mdc-button-icon-button-typography; +$mat-mdc-button-mat-button-state-target; +@forward '../mdc-button/fab-theme' as mat-mdc-fab-*; +@forward '../mdc-button/icon-button-theme' as mat-mdc-icon-button-*; @forward '../mdc-card/card-theme' hide color, density, theme, typography; @forward '../mdc-card/card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color, $mat-mdc-card-mdc-card-outline-color;