diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss index 8f05b884eff4..0cc28c935fcf 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -13,6 +13,7 @@ @use '../core/theming/inspection'; @use '../core/typography/typography'; @use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button; +@use '../core/tokens/m2/mdc/outlined-button' as tokens-mdc-outlined-button; @use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button; @use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button; @@ -40,39 +41,6 @@ $secondary: mdc-theme-color.prop-value(secondary); $error: mdc-theme-color.prop-value(error); - .mat-mdc-outlined-button { - @include mdc-button-outlined-theme.theme(( - outline-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12) - )); - - &.mat-unthemed { - @include _outlined-button-variant($on-surface); - } - - &.mat-primary { - @include _outlined-button-variant($primary); - } - - &.mat-accent { - @include _outlined-button-variant($secondary); - } - - &.mat-warn { - @include _outlined-button-variant($error); - } - - @include button-theme-private.apply-disabled-style() { - @include mdc-button-outlined-theme.theme(( - // We need to pass both the disabled and enabled values, because the enabled - // ones apply to anchors while the disabled ones are for buttons. - label-text-color: $disabled-ink-color, - disabled-label-text-color: $disabled-ink-color, - outline-color: rgba($on-surface, 0.12), - disabled-outline-color: rgba($on-surface, 0.12), - )); - } - } - // Ripple colors .mat-mdc-button, .mat-mdc-outlined-button { @include button-theme-private.ripple-theme-styles($theme, false); @@ -179,6 +147,37 @@ } } + .mat-mdc-outlined-button { + $default-color-tokens: tokens-mdc-outlined-button.get-color-tokens( + $theme, + $on-surface, + $on-surface + ); + $primary-color-tokens: tokens-mdc-outlined-button.get-color-tokens( + $theme, + $primary, + $on-primary + ); + $accent-color-tokens: tokens-mdc-outlined-button.get-color-tokens($theme, $accent, $on-accent); + $warn-color-tokens: tokens-mdc-outlined-button.get-color-tokens($theme, $error, $on-error); + + &.mat-unthemed { + @include mdc-button-outlined-theme.theme($default-color-tokens); + } + + &.mat-primary { + @include mdc-button-outlined-theme.theme($primary-color-tokens); + } + + &.mat-accent { + @include mdc-button-outlined-theme.theme($accent-color-tokens); + } + + &.mat-warn { + @include mdc-button-outlined-theme.theme($warn-color-tokens); + } + } + $is-dark: inspection.get-theme-type($theme) == dark; $disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38)); $disabled-container-color: rgba($on-surface, 0.12); @@ -206,6 +205,17 @@ } } + .mat-mdc-outlined-button { + @include button-theme-private.apply-disabled-style() { + @include mdc-button-outlined-theme.theme(( + label-text-color: $disabled-ink-color, + disabled-label-text-color: $disabled-ink-color, + disabled-outline-color: rgba($on-surface, 0.12), + outline-color: rgba($on-surface, 0.12), + )); + } + } + .mat-mdc-unelevated-button { @include button-theme-private.apply-disabled-style() { @include mdc-button-filled-theme.theme(( diff --git a/src/material/button/button.scss b/src/material/button/button.scss index 4e39daf20351..05c82c60d3e3 100644 --- a/src/material/button/button.scss +++ b/src/material/button/button.scss @@ -13,27 +13,12 @@ @use '../core/style/private' as style-private; @use '../core/focus-indicators/private' as focus-indicators-private; @use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button; +@use '../core/tokens/m2/mdc/outlined-button' as tokens-mdc-outlined-button; @use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button; @use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button; @include mdc-helpers.disable-mdc-fallback-declarations { @include mdc-button.static-styles-without-ripple($query: mdc-helpers.$mdc-base-styles-query); - - .mat-mdc-outlined-button { - // Keys to exclude from the MDC theme config, allowing us to drop styles we don't need. - $override-keys: button-base.mat-private-button-remove-ripple(( - label-text-font: null, - label-text-size: null, - label-text-tracking: null, - label-text-transform: null, - label-text-weight: null, - with-icon-icon-size: null, - label-text-color: inherit, - )); - - @include mdc-button-outlined-theme.theme-styles( - map.merge(mdc-button-outlined-theme.$light-theme, $override-keys)); - } } @include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) { @@ -65,6 +50,18 @@ // Add default values for MDC text button tokens that aren't outputted by the theming API. @include mdc-button-protected-theme.theme(tokens-mdc-protected-button.get-unthemable-tokens()); } + + // Note that we don't include a feature query, because this mixins declare + // all the "slots" for CSS variables that will be defined in the theme. + .mat-mdc-outlined-button { + $mdc-outlined-button-slots: tokens-mdc-outlined-button.get-token-slots(); + + // Add the slots for MDC text button. + @include mdc-button-outlined-theme.theme-styles($mdc-outlined-button-slots); + + // Add default values for MDC text button tokens that aren't outputted by the theming API. + @include mdc-button-outlined-theme.theme(tokens-mdc-outlined-button.get-unthemable-tokens()); + } } .mat-mdc-button, diff --git a/src/material/core/tokens/m2/mdc/_outlined-button.scss b/src/material/core/tokens/m2/mdc/_outlined-button.scss new file mode 100644 index 000000000000..fa31d5a2802e --- /dev/null +++ b/src/material/core/tokens/m2/mdc/_outlined-button.scss @@ -0,0 +1,96 @@ +@use '../../token-utils'; +@use '../../../mdc-helpers/mdc-helpers'; +@use '../../../style/sass-utils'; +@use '../../../theming/inspection'; + +// The prefix used to generate the fully qualified name for tokens in this file. +$prefix: (mdc, outlined-button); + +// Tokens that can't be configured through Angular Material's current theming API, +// but may be in a future version of the theming API. +// +// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. +// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in +// our CSS. +@function get-unthemable-tokens() { + @return ( + keep-touch-target: false, + + outline-width: 1px, + container-shape: 4px, + + hover-state-layer-opacity: 0.04, + focus-state-layer-opacity: 0.12, + pressed-state-layer-opacity: 0.12, + + hover-label-text-color: null, + focus-label-text-color: null, + pressed-label-text-color: null, + + hover-outline-color: null, + focus-outline-color: null, + pressed-outline-color: null, + + focus-ring-color: null, + focus-ring-offset: null, + + with-icon-icon-size: null, + with-icon-icon-color: null, + with-icon-hover-icon-color: null, + with-icon-focus-icon-color: null, + with-icon-pressed-icon-color: null, + with-icon-disabled-icon-color: null, + + label-text-size: null, + label-text-font: null, + label-text-weight: null, + label-text-tracking: null, + label-text-transform: null, + + container-height: 36px + ); +} + +@function _on-color($theme, $palette) { + @if ($palette) { + $is-dark: inspection.get-theme-type($theme) == dark; + @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff); + } +} + +// Tokens that can be configured through Angular Material's color theming API. +@function get-color-tokens($theme, $color: null, $on-color: null) { + $surface: inspection.get-theme-color($theme, background, card); + $on-surface: _on-color($theme, $surface); + + @return ( + focus-state-layer-color: $color, + hover-state-layer-color: $color, + pressed-state-layer-color: $color, + disabled-outline-color: rgba($on-surface, 0.12), + disabled-label-text-color: rgba($on-surface, 0.38), + label-text-color: if($color, $color, inherit), + outline-color: rgba($on-surface, 0.12) + ); +} + +// Tokens that can be configured through Angular Material's typography theming API. +@function get-typography-tokens($theme) { + @return (); +} + +// Tokens that can be configured through Angular Material's density theming API. +@function get-density-tokens($theme) { + @return (); +} + +// Combines the tokens generated by the above functions into a single map with placeholder values. +// This is used to create token slots. +@function get-token-slots() { + @return sass-utils.deep-merge-all( + get-unthemable-tokens(), + get-color-tokens(token-utils.$placeholder-color-config), + get-typography-tokens(token-utils.$placeholder-typography-config), + get-density-tokens(token-utils.$placeholder-density-config) + ); +} diff --git a/src/material/core/tokens/tests/test-validate-tokens.scss b/src/material/core/tokens/tests/test-validate-tokens.scss index fc588bf0753d..a45248c2e1a8 100644 --- a/src/material/core/tokens/tests/test-validate-tokens.scss +++ b/src/material/core/tokens/tests/test-validate-tokens.scss @@ -1,6 +1,7 @@ @use 'sass:list'; @use 'sass:map'; +@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme; @use '@material/button/button-protected-theme' as mdc-button-protected-theme; @use '@material/button/button-filled-theme' as mdc-button-filled-theme; @use '@material/button/button-text-theme' as mdc-button-text-theme; @@ -29,6 +30,7 @@ @use '../m2/mdc/protected-button' as tokens-mdc-protected-button; @use '../m2/mdc/filled-button' as tokens-mdc-filled-button; @use '../m2/mdc/text-button' as tokens-mdc-text-button; +@use '../m2/mdc/outlined-button' as tokens-mdc-outlined-button; @use '../m2/mdc/circular-progress' as tokens-mdc-circular-progress; @use '../m2/mdc/linear-progress' as tokens-mdc-linear-progress; @use '../m2/mdc/elevated-card' as tokens-mdc-elevated-card; @@ -177,3 +179,8 @@ $slots: tokens-mdc-text-button.get-token-slots(), $reference: mdc-button-text-theme.$light-theme ); +@include validate-slots( + $component: 'm2.mdc.outlined-button', + $slots: tokens-mdc-outlined-button.get-token-slots(), + $reference: mdc-button-outlined-theme.$light-theme +);