diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss index 7943e00fe3e6..b123cd888aa7 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -81,13 +81,32 @@ } @mixin base($theme) { - // TODO(mmalerba): Move button base tokens here + @if inspection.get-theme-version($theme) == 1 { + // TODO(crisbeto): emit M3 base tokens here. + } + @else { + @include sass-utils.current-selector-or-root() { + @include mdc-button-text-theme.theme( + tokens-mdc-text-button.get-unthemable-tokens()); + @include mdc-button-filled-theme.theme( + tokens-mdc-filled-button.get-unthemable-tokens()); + @include mdc-button-protected-theme.theme( + tokens-mdc-protected-button.get-unthemable-tokens()); + @include mdc-button-outlined-theme.theme( + tokens-mdc-outlined-button.get-unthemable-tokens()); + } + } } @mixin color($theme) { - .mat-mdc-button { + @include sass-utils.current-selector-or-root() { @include _text-button-variant($theme, null); + @include _filled-button-variant($theme, null); + @include _protected-button-variant($theme, null); + @include _outlined-button-variant($theme, null); + } + .mat-mdc-button { &.mat-primary { @include _text-button-variant($theme, primary); } @@ -102,8 +121,6 @@ } .mat-mdc-unelevated-button { - @include _filled-button-variant($theme, null); - &.mat-primary { @include _filled-button-variant($theme, primary); } @@ -118,8 +135,6 @@ } .mat-mdc-raised-button { - @include _protected-button-variant($theme, null); - &.mat-primary { @include _protected-button-variant($theme, primary); } @@ -147,8 +162,6 @@ } .mat-mdc-outlined-button { - @include _outlined-button-variant($theme, null); - &.mat-primary { @include _outlined-button-variant($theme, primary); } @@ -164,12 +177,12 @@ } @mixin typography($theme) { - @include sass-utils.current-selector-or-root() { - $text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme); - $filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme); - $outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme); - $protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme); + $text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme); + $filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme); + $outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme); + $protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme); + @include sass-utils.current-selector-or-root() { @include mdc-button-text-theme.theme($text-typography-tokens); @include mdc-button-filled-theme.theme($filled-typography-tokens); @include mdc-button-outlined-theme.theme($outlined-typography-tokens); @@ -179,28 +192,23 @@ @mixin density($theme) { $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3); + $text-density-tokens: tokens-mdc-text-button.get-density-tokens($theme); + $filled-density-tokens: tokens-mdc-filled-button.get-density-tokens($theme); + $outlined-density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme); + $protected-density-tokens: tokens-mdc-protected-button.get-density-tokens($theme); - .mat-mdc-button { - $density-tokens: tokens-mdc-text-button.get-density-tokens($theme); - @include mdc-button-text-theme.theme($density-tokens); - @include button-base.mat-private-button-touch-target-density($density-scale); - } - - .mat-mdc-raised-button { - $density-tokens: tokens-mdc-protected-button.get-density-tokens($theme); - @include mdc-button-protected-theme.theme($density-tokens); - @include button-base.mat-private-button-touch-target-density($density-scale); - } - - .mat-mdc-unelevated-button { - $density-tokens: tokens-mdc-filled-button.get-density-tokens($theme); - @include mdc-button-filled-theme.theme($density-tokens); - @include button-base.mat-private-button-touch-target-density($density-scale); + @include sass-utils.current-selector-or-root() { + @include mdc-button-text-theme.theme($text-density-tokens); + @include mdc-button-filled-theme.theme($filled-density-tokens); + @include mdc-button-outlined-theme.theme($outlined-density-tokens); + @include mdc-button-protected-theme.theme($protected-density-tokens); } + .mat-mdc-button, + .mat-mdc-raised-button, + .mat-mdc-unelevated-button, .mat-mdc-outlined-button { - $density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme); - @include mdc-button-outlined-theme.theme($density-tokens); + // TODO: tokenize the touch target visibility. @include button-base.mat-private-button-touch-target-density($density-scale); } } diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss index 67833f41b768..93139949c3d6 100644 --- a/src/material/button/_icon-button-theme.scss +++ b/src/material/button/_icon-button-theme.scss @@ -43,19 +43,21 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { - .mat-mdc-icon-button { + @include sass-utils.current-selector-or-root() { @include _icon-button-variant($theme, null); - &.mat-primary { - @include _icon-button-variant($theme, primary); - } + .mat-mdc-icon-button { + &.mat-primary { + @include _icon-button-variant($theme, primary); + } - &.mat-accent { - @include _icon-button-variant($theme, accent); - } + &.mat-accent { + @include _icon-button-variant($theme, accent); + } - &.mat-warn { - @include _icon-button-variant($theme, warn); + &.mat-warn { + @include _icon-button-variant($theme, warn); + } } } } diff --git a/src/material/button/button.scss b/src/material/button/button.scss index 0acf153cf973..fa78bb40753f 100644 --- a/src/material/button/button.scss +++ b/src/material/button/button.scss @@ -30,7 +30,6 @@ $mdc-text-button-slots: tokens-mdc-text-button.get-token-slots(); @include mdc-button-text-theme.theme-styles($mdc-text-button-slots); - @include mdc-button-text-theme.theme(tokens-mdc-text-button.get-unthemable-tokens()); @include button-base.mat-private-button-ripple(tokens-mat-text-button.$prefix, tokens-mat-text-button.get-token-slots()); @@ -47,7 +46,6 @@ $mdc-filled-button-slots: tokens-mdc-filled-button.get-token-slots(); @include mdc-button-filled-theme.theme-styles($mdc-filled-button-slots); - @include mdc-button-filled-theme.theme(tokens-mdc-filled-button.get-unthemable-tokens()); @include button-base.mat-private-button-ripple(tokens-mat-filled-button.$prefix, tokens-mat-filled-button.get-token-slots()); @@ -65,7 +63,6 @@ $mdc-button-protected-slots: tokens-mdc-protected-button.get-token-slots(); @include mdc-button-protected-theme.theme-styles($mdc-button-protected-slots); - @include mdc-button-protected-theme.theme(tokens-mdc-protected-button.get-unthemable-tokens()); @include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix, tokens-mat-protected-button.get-token-slots()); @@ -90,7 +87,6 @@ $mdc-outlined-button-slots: tokens-mdc-outlined-button.get-token-slots(); @include mdc-button-outlined-theme.theme-styles($mdc-outlined-button-slots); - @include mdc-button-outlined-theme.theme(tokens-mdc-outlined-button.get-unthemable-tokens()); @include button-base.mat-private-button-ripple(tokens-mat-outlined-button.$prefix, tokens-mat-outlined-button.get-token-slots()); diff --git a/src/material/core/tokens/m2/mdc/_text-button.scss b/src/material/core/tokens/m2/mdc/_text-button.scss index a2083c5fbc02..9f8cfc0cc088 100644 --- a/src/material/core/tokens/m2/mdc/_text-button.scss +++ b/src/material/core/tokens/m2/mdc/_text-button.scss @@ -17,10 +17,6 @@ $prefix: (mdc, text-button); @return ( container-shape: 4px, - // TODO: `container-height` is also included so it has a default value to - // prevent the buttons from collapsing if a density mixin isn't included. - container-height: 36px, - // ============================================================================================= // = TOKENS NOT USED IN ANGULAR MATERIAL = // ============================================================================================= diff --git a/src/material/toolbar/toolbar.scss b/src/material/toolbar/toolbar.scss index 1f89e1bfab9c..932264441c61 100644 --- a/src/material/toolbar/toolbar.scss +++ b/src/material/toolbar/toolbar.scss @@ -1,6 +1,8 @@ @use '@angular/cdk'; @use '../core/tokens/token-utils'; @use '../core/tokens/m2/mat/toolbar' as tokens-mat-toolbar; +@use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button; +@use '../core/tokens/m2/mdc/outlined-button' as tokens-mdc-outlined-button; @use '../core/style/variables'; $row-padding: 16px !default; @@ -49,8 +51,24 @@ $height-mobile-portrait: 56px !default; } .mat-mdc-button-base.mat-mdc-button-base.mat-unthemed { - --mdc-text-button-label-text-color: inherit; - --mdc-outlined-button-label-text-color: inherit; + $color-token: null; + + @include token-utils.use-tokens( + tokens-mat-toolbar.$prefix, tokens-mat-toolbar.get-token-slots()) { + $color-token: var(#{token-utils.get-token-variable(container-text-color)}); + } + + @include token-utils.use-tokens( + tokens-mdc-text-button.$prefix, tokens-mdc-text-button.get-token-slots()) { + $token: token-utils.get-token-variable(label-text-color); + #{$token}: #{$color-token}; + } + + @include token-utils.use-tokens( + tokens-mdc-outlined-button.$prefix, tokens-mdc-outlined-button.get-token-slots()) { + $token: token-utils.get-token-variable(label-text-color); + #{$token}: #{$color-token}; + } } }