From 94d62ff9dc5201d87278ca03d32687755ce1e820 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 10 Oct 2024 22:04:35 +0000 Subject: [PATCH] feat(material/theming): Disambiguate token names in theme overrides Prior to this change a single key in the theme overrides map sometimes resulted in mutliple tokens being overridden. This change gives every token a unique name, by prefixing when necessary. The old ambiguous keys are still allowed for compatibility, but will now log a warning when they're used. --- .../autocomplete/_autocomplete-theme.scss | 51 +-- src/material/badge/_badge-theme.scss | 52 +-- .../bottom-sheet/_bottom-sheet-theme.scss | 42 ++- .../button-toggle/_button-toggle-theme.scss | 84 +++-- src/material/button/_button-theme.scss | 320 ++++++++++++------ src/material/button/_fab-theme.scss | 129 ++++--- src/material/button/_icon-button-theme.scss | 53 +-- src/material/card/_card-theme.scss | 107 ++++-- src/material/checkbox/_checkbox-theme.scss | 10 +- src/material/chips/_chips-theme.scss | 84 +++-- src/material/core/_core-theme.scss | 81 +++-- src/material/core/option/_optgroup-theme.scss | 37 +- src/material/core/option/_option-theme.scss | 45 ++- src/material/core/ripple/_ripple-theme.scss | 44 ++- .../_pseudo-checkbox-theme.scss | 58 +++- .../core/theming/tests/m3-theme.spec.ts | 133 +++++++- src/material/core/tokens/_token-utils.scss | 119 +++++-- .../datepicker/_datepicker-theme.scss | 75 ++-- src/material/dialog/_dialog-theme.scss | 59 ++-- src/material/divider/_divider-theme.scss | 35 +- src/material/expansion/_expansion-theme.scss | 50 +-- .../form-field/_form-field-theme.scss | 161 ++++++--- src/material/grid-list/_grid-list-theme.scss | 30 +- src/material/icon/_icon-theme.scss | 26 +- src/material/input/_input-theme.scss | 19 +- src/material/list/_list-theme.scss | 126 ++++--- src/material/menu/_menu-theme.scss | 44 ++- src/material/paginator/_paginator-theme.scss | 51 +-- .../progress-bar/_progress-bar-theme.scss | 24 +- .../_progress-spinner-theme.scss | 54 +-- src/material/radio/_radio-theme.scss | 76 +++-- src/material/select/_select-theme.scss | 53 +-- src/material/sidenav/_sidenav-theme.scss | 35 +- .../slide-toggle/_slide-toggle-theme.scss | 64 ++-- src/material/slider/_slider-theme.scss | 90 +++-- src/material/snack-bar/_snack-bar-theme.scss | 36 +- src/material/sort/_sort-theme.scss | 44 ++- src/material/stepper/_stepper-theme.scss | 57 ++-- src/material/table/_table-theme.scss | 49 +-- src/material/tabs/_tabs-theme.scss | 135 +++++--- .../timepicker/_timepicker-theme.scss | 51 +-- src/material/toolbar/_toolbar-theme.scss | 47 +-- src/material/tooltip/_tooltip-theme.scss | 23 +- src/material/tree/_tree-theme.scss | 44 ++- 44 files changed, 1959 insertions(+), 1048 deletions(-) diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss index 31273e0a8e91..ceb526ec2e91 100644 --- a/src/material/autocomplete/_autocomplete-theme.scss +++ b/src/material/autocomplete/_autocomplete-theme.scss @@ -10,11 +10,12 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix, - tokens-mat-autocomplete.get-unthemable-tokens()); + @include token-utils.create-token-values( + tokens-mat-autocomplete.$prefix, + tokens-mat-autocomplete.get-unthemable-tokens() + ); } } } @@ -22,11 +23,12 @@ @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix, - tokens-mat-autocomplete.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-autocomplete.$prefix, + tokens-mat-autocomplete.get-color-tokens($theme) + ); } } } @@ -34,11 +36,12 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix, - tokens-mat-autocomplete.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-autocomplete.$prefix, + tokens-mat-autocomplete.get-typography-tokens($theme) + ); } } } @@ -46,11 +49,12 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix, - tokens-mat-autocomplete.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-autocomplete.$prefix, + tokens-mat-autocomplete.get-density-tokens($theme) + ); } } } @@ -58,7 +62,10 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-autocomplete.$prefix, tokens: tokens-mat-autocomplete.get-token-slots()), + ( + namespace: tokens-mat-autocomplete.$prefix, + tokens: tokens-mat-autocomplete.get-token-slots(), + ) ); } @@ -66,8 +73,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -84,9 +90,12 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-autocomplete.$prefix, map.get($tokens, tokens-mat-autocomplete.$prefix)); + tokens-mat-autocomplete.$prefix, + map.get($tokens, tokens-mat-autocomplete.$prefix) + ); } } diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss index 1cb96ffd9759..74e0470109f8 100644 --- a/src/material/badge/_badge-theme.scss +++ b/src/material/badge/_badge-theme.scss @@ -13,11 +13,12 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-badge.$prefix, - tokens-mat-badge.get-unthemable-tokens()); + @include token-utils.create-token-values( + tokens-mat-badge.$prefix, + tokens-mat-badge.get-unthemable-tokens() + ); } } } @@ -30,21 +31,26 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-badge.$prefix, - tokens-mat-badge.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-badge.$prefix, + tokens-mat-badge.get-color-tokens($theme) + ); } .mat-badge-accent { - @include token-utils.create-token-values(tokens-mat-badge.$prefix, - tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent)); + @include token-utils.create-token-values( + tokens-mat-badge.$prefix, + tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent) + ); } .mat-badge-warn { - @include token-utils.create-token-values(tokens-mat-badge.$prefix, - tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn)); + @include token-utils.create-token-values( + tokens-mat-badge.$prefix, + tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn) + ); } } } @@ -54,11 +60,12 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-badge.$prefix, - tokens-mat-badge.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-badge.$prefix, + tokens-mat-badge.get-typography-tokens($theme) + ); } } } @@ -68,8 +75,8 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } @else { } - @else {} } /// Outputs the CSS variable values for the given tokens. @@ -77,7 +84,10 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-badge.$prefix, tokens: tokens-mat-badge.get-token-slots()), + ( + namespace: tokens-mat-badge.$prefix, + tokens: tokens-mat-badge.get-token-slots(), + ) ); } @@ -90,8 +100,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -108,7 +117,8 @@ @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); $mat-badge-tokens: token-utils.get-tokens-for($tokens, tokens-mat-badge.$prefix, $options...); @include token-utils.create-token-values(tokens-mat-badge.$prefix, $mat-badge-tokens); } diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss index 38a7c6032b36..85585111bd25 100644 --- a/src/material/bottom-sheet/_bottom-sheet-theme.scss +++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss @@ -10,11 +10,12 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-unthemable-tokens()); + tokens-mat-bottom-sheet.$prefix, + tokens-mat-bottom-sheet.get-unthemable-tokens() + ); } } } @@ -22,11 +23,12 @@ @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix, - tokens-mat-bottom-sheet.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-bottom-sheet.$prefix, + tokens-mat-bottom-sheet.get-color-tokens($theme) + ); } } } @@ -34,11 +36,12 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix, - tokens-mat-bottom-sheet.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-bottom-sheet.$prefix, + tokens-mat-bottom-sheet.get-typography-tokens($theme) + ); } } } @@ -46,14 +49,17 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } @else { } - @else {} } @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-bottom-sheet.$prefix, tokens: tokens-mat-bottom-sheet.get-token-slots()), + ( + namespace: tokens-mat-bottom-sheet.$prefix, + tokens: tokens-mat-bottom-sheet.get-token-slots(), + ) ); } @@ -61,8 +67,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -79,9 +84,12 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-bottom-sheet.$prefix, map.get($tokens, tokens-mat-bottom-sheet.$prefix)); + tokens-mat-bottom-sheet.$prefix, + map.get($tokens, tokens-mat-bottom-sheet.$prefix) + ); } } diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss index f28f084fded0..534501da096d 100644 --- a/src/material/button-toggle/_button-toggle-theme.scss +++ b/src/material/button-toggle/_button-toggle-theme.scss @@ -13,16 +13,15 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mat-legacy-button-toggle.$prefix, - tokens-mat-legacy-button-toggle.get-unthemable-tokens() + tokens-mat-legacy-button-toggle.$prefix, + tokens-mat-legacy-button-toggle.get-unthemable-tokens() ); @include token-utils.create-token-values( - tokens-mat-standard-button-toggle.$prefix, - tokens-mat-standard-button-toggle.get-unthemable-tokens() + tokens-mat-standard-button-toggle.$prefix, + tokens-mat-standard-button-toggle.get-unthemable-tokens() ); } } @@ -36,13 +35,16 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix, - tokens-mat-legacy-button-toggle.get-color-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix, - tokens-mat-standard-button-toggle.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-legacy-button-toggle.$prefix, + tokens-mat-legacy-button-toggle.get-color-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-standard-button-toggle.$prefix, + tokens-mat-standard-button-toggle.get-color-tokens($theme) + ); } } } @@ -52,13 +54,16 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix, - tokens-mat-legacy-button-toggle.get-typography-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix, - tokens-mat-standard-button-toggle.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-legacy-button-toggle.$prefix, + tokens-mat-legacy-button-toggle.get-typography-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-standard-button-toggle.$prefix, + tokens-mat-standard-button-toggle.get-typography-tokens($theme) + ); } } } @@ -68,13 +73,16 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix, - tokens-mat-legacy-button-toggle.get-density-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix, - tokens-mat-standard-button-toggle.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-legacy-button-toggle.$prefix, + tokens-mat-legacy-button-toggle.get-density-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-standard-button-toggle.$prefix, + tokens-mat-standard-button-toggle.get-density-tokens($theme) + ); } } } @@ -86,8 +94,15 @@ $standard-tokens: tokens-mat-standard-button-toggle.get-token-slots(); @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-legacy-button-toggle.$prefix, tokens: $legacy-tokens), - (prefix: tokens-mat-standard-button-toggle.$prefix, tokens: $standard-tokens), + ( + namespace: tokens-mat-legacy-button-toggle.$prefix, + tokens: $legacy-tokens, + prefix: 'legacy-', + ), + ( + namespace: tokens-mat-standard-button-toggle.$prefix, + tokens: $standard-tokens, + ) ); } @@ -100,8 +115,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -118,9 +132,15 @@ @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); - $mat-standard-button-toggle-tokens: - token-utils.get-tokens-for($tokens, tokens-mat-standard-button-toggle.$prefix, $options...); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); + $mat-standard-button-toggle-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mat-standard-button-toggle.$prefix, + $options... + ); @include token-utils.create-token-values( - tokens-mat-standard-button-toggle.$prefix, $mat-standard-button-toggle-tokens); + tokens-mat-standard-button-toggle.$prefix, + $mat-standard-button-toggle-tokens + ); } diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss index ee85325714fb..62c88a0597c8 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -14,12 +14,14 @@ @use '../core/style/sass-utils'; @mixin _text-button-variant($theme, $palette) { - $mdc-tokens: if($palette, + $mdc-tokens: if( + $palette, tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, $palette), tokens-mdc-text-button.get-color-tokens($theme) ); - $mat-tokens: if($palette, + $mat-tokens: if( + $palette, tokens-mat-text-button.private-get-color-palette-color-tokens($theme, $palette), tokens-mat-text-button.get-color-tokens($theme) ); @@ -29,12 +31,14 @@ } @mixin _filled-button-variant($theme, $palette) { - $mdc-tokens: if($palette, + $mdc-tokens: if( + $palette, tokens-mdc-filled-button.private-get-color-palette-color-tokens($theme, $palette), tokens-mdc-filled-button.get-color-tokens($theme) ); - $mat-tokens: if($palette, + $mat-tokens: if( + $palette, tokens-mat-filled-button.private-get-color-palette-color-tokens($theme, $palette), tokens-mat-filled-button.get-color-tokens($theme) ); @@ -44,12 +48,14 @@ } @mixin _protected-button-variant($theme, $palette) { - $mdc-tokens: if($palette, + $mdc-tokens: if( + $palette, tokens-mdc-protected-button.private-get-color-palette-color-tokens($theme, $palette), tokens-mdc-protected-button.get-color-tokens($theme) ); - $mat-tokens: if($palette, + $mat-tokens: if( + $palette, tokens-mat-protected-button.private-get-color-palette-color-tokens($theme, $palette), tokens-mat-protected-button.get-color-tokens($theme) ); @@ -59,12 +65,14 @@ } @mixin _outlined-button-variant($theme, $palette) { - $mdc-tokens: if($palette, + $mdc-tokens: if( + $palette, tokens-mdc-outlined-button.private-get-color-palette-color-tokens($theme, $palette), tokens-mdc-outlined-button.get-color-tokens($theme) ); - $mat-tokens: if($palette, + $mat-tokens: if( + $palette, tokens-mat-outlined-button.private-get-color-palette-color-tokens($theme, $palette), tokens-mat-outlined-button.get-color-tokens($theme) ); @@ -75,38 +83,75 @@ @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); - $mdc-text-button-tokens: - token-utils.get-tokens-for($tokens, tokens-mdc-text-button.$prefix, $options...); - $mdc-protected-button-tokens: - token-utils.get-tokens-for($tokens, tokens-mdc-protected-button.$prefix, $options...); - $mdc-filled-button-tokens: - token-utils.get-tokens-for($tokens, tokens-mdc-filled-button.$prefix, $options...); - $mdc-outlined-button-tokens: - token-utils.get-tokens-for($tokens, tokens-mdc-outlined-button.$prefix, $options...); - $mat-text-button-tokens: - token-utils.get-tokens-for($tokens, tokens-mat-text-button.$prefix, $options...); - $mat-protected-button-tokens: - token-utils.get-tokens-for($tokens, tokens-mat-protected-button.$prefix, $options...); - $mat-filled-button-tokens: - token-utils.get-tokens-for($tokens, tokens-mat-filled-button.$prefix, $options...); - $mat-outlined-button-tokens: - token-utils.get-tokens-for($tokens, tokens-mat-outlined-button.$prefix, $options...); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); + $mdc-text-button-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mdc-text-button.$prefix, + $options... + ); + $mdc-protected-button-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mdc-protected-button.$prefix, + $options... + ); + $mdc-filled-button-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mdc-filled-button.$prefix, + $options... + ); + $mdc-outlined-button-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mdc-outlined-button.$prefix, + $options... + ); + $mat-text-button-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mat-text-button.$prefix, + $options... + ); + $mat-protected-button-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mat-protected-button.$prefix, + $options... + ); + $mat-filled-button-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mat-filled-button.$prefix, + $options... + ); + $mat-outlined-button-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mat-outlined-button.$prefix, + $options... + ); @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-text-button-tokens); @include token-utils.create-token-values( - tokens-mdc-protected-button.$prefix, $mdc-protected-button-tokens); + tokens-mdc-protected-button.$prefix, + $mdc-protected-button-tokens + ); @include token-utils.create-token-values( - tokens-mdc-filled-button.$prefix, $mdc-filled-button-tokens); + tokens-mdc-filled-button.$prefix, + $mdc-filled-button-tokens + ); @include token-utils.create-token-values( - tokens-mdc-outlined-button.$prefix, $mdc-outlined-button-tokens); + tokens-mdc-outlined-button.$prefix, + $mdc-outlined-button-tokens + ); @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-text-button-tokens); @include token-utils.create-token-values( - tokens-mat-protected-button.$prefix, $mat-protected-button-tokens); + tokens-mat-protected-button.$prefix, + $mat-protected-button-tokens + ); @include token-utils.create-token-values( - tokens-mat-filled-button.$prefix, $mat-filled-button-tokens); + tokens-mat-filled-button.$prefix, + $mat-filled-button-tokens + ); @include token-utils.create-token-values( - tokens-mat-outlined-button.$prefix, $mat-outlined-button-tokens); + tokens-mat-outlined-button.$prefix, + $mat-outlined-button-tokens + ); } /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) @@ -115,26 +160,41 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, - tokens-mdc-text-button.get-unthemable-tokens()); - @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix, - tokens-mdc-filled-button.get-unthemable-tokens()); - @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix, - tokens-mdc-protected-button.get-unthemable-tokens()); - @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix, - tokens-mdc-outlined-button.get-unthemable-tokens()); - - @include token-utils.create-token-values(tokens-mat-text-button.$prefix, - tokens-mat-text-button.get-unthemable-tokens()); - @include token-utils.create-token-values(tokens-mat-filled-button.$prefix, - tokens-mat-filled-button.get-unthemable-tokens()); - @include token-utils.create-token-values(tokens-mat-protected-button.$prefix, - tokens-mat-protected-button.get-unthemable-tokens()); - @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, - tokens-mat-outlined-button.get-unthemable-tokens()); + @include token-utils.create-token-values( + tokens-mdc-text-button.$prefix, + tokens-mdc-text-button.get-unthemable-tokens() + ); + @include token-utils.create-token-values( + tokens-mdc-filled-button.$prefix, + tokens-mdc-filled-button.get-unthemable-tokens() + ); + @include token-utils.create-token-values( + tokens-mdc-protected-button.$prefix, + tokens-mdc-protected-button.get-unthemable-tokens() + ); + @include token-utils.create-token-values( + tokens-mdc-outlined-button.$prefix, + tokens-mdc-outlined-button.get-unthemable-tokens() + ); + + @include token-utils.create-token-values( + tokens-mat-text-button.$prefix, + tokens-mat-text-button.get-unthemable-tokens() + ); + @include token-utils.create-token-values( + tokens-mat-filled-button.$prefix, + tokens-mat-filled-button.get-unthemable-tokens() + ); + @include token-utils.create-token-values( + tokens-mat-protected-button.$prefix, + tokens-mat-protected-button.get-unthemable-tokens() + ); + @include token-utils.create-token-values( + tokens-mat-outlined-button.$prefix, + tokens-mat-outlined-button.get-unthemable-tokens() + ); } } } @@ -147,8 +207,7 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include _text-button-variant($theme, null); @include _filled-button-variant($theme, null); @@ -219,26 +278,41 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, - tokens-mdc-text-button.get-typography-tokens($theme)); - @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix, - tokens-mdc-filled-button.get-typography-tokens($theme)); - @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix, - tokens-mdc-protected-button.get-typography-tokens($theme)); - @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix, - tokens-mdc-outlined-button.get-typography-tokens($theme)); - - @include token-utils.create-token-values(tokens-mat-text-button.$prefix, - tokens-mat-text-button.get-typography-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-filled-button.$prefix, - tokens-mat-filled-button.get-typography-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-protected-button.$prefix, - tokens-mat-protected-button.get-typography-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, - tokens-mat-outlined-button.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mdc-text-button.$prefix, + tokens-mdc-text-button.get-typography-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mdc-filled-button.$prefix, + tokens-mdc-filled-button.get-typography-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mdc-protected-button.$prefix, + tokens-mdc-protected-button.get-typography-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mdc-outlined-button.$prefix, + tokens-mdc-outlined-button.get-typography-tokens($theme) + ); + + @include token-utils.create-token-values( + tokens-mat-text-button.$prefix, + tokens-mat-text-button.get-typography-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-filled-button.$prefix, + tokens-mat-filled-button.get-typography-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-protected-button.$prefix, + tokens-mat-protected-button.get-typography-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-outlined-button.$prefix, + tokens-mat-outlined-button.get-typography-tokens($theme) + ); } } } @@ -248,26 +322,41 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, - tokens-mdc-text-button.get-density-tokens($theme)); - @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix, - tokens-mdc-filled-button.get-density-tokens($theme)); - @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix, - tokens-mdc-protected-button.get-density-tokens($theme)); - @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix, - tokens-mdc-outlined-button.get-density-tokens($theme)); - - @include token-utils.create-token-values(tokens-mat-text-button.$prefix, - tokens-mat-text-button.get-density-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-filled-button.$prefix, - tokens-mat-filled-button.get-density-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-protected-button.$prefix, - tokens-mat-protected-button.get-density-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, - tokens-mat-outlined-button.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mdc-text-button.$prefix, + tokens-mdc-text-button.get-density-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mdc-filled-button.$prefix, + tokens-mdc-filled-button.get-density-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mdc-protected-button.$prefix, + tokens-mdc-protected-button.get-density-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mdc-outlined-button.$prefix, + tokens-mdc-outlined-button.get-density-tokens($theme) + ); + + @include token-utils.create-token-values( + tokens-mat-text-button.$prefix, + tokens-mat-text-button.get-density-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-filled-button.$prefix, + tokens-mat-filled-button.get-density-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-protected-button.$prefix, + tokens-mat-protected-button.get-density-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-outlined-button.$prefix, + tokens-mat-outlined-button.get-density-tokens($theme) + ); } } } @@ -286,14 +375,46 @@ @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mdc-filled-button.$prefix, tokens: $mdc-filled-button-tokens), - (prefix: tokens-mat-filled-button.$prefix, tokens: $mat-filled-button-tokens), - (prefix: tokens-mdc-outlined-button.$prefix, tokens: $mdc-outlined-button-tokens), - (prefix: tokens-mat-outlined-button.$prefix, tokens: $mat-outlined-button-tokens), - (prefix: tokens-mdc-protected-button.$prefix, tokens: $mdc-protected-button-tokens), - (prefix: tokens-mat-protected-button.$prefix, tokens: $mat-protected-button-tokens), - (prefix: tokens-mdc-text-button.$prefix, tokens: $mdc-text-button-tokens), - (prefix: tokens-mat-text-button.$prefix, tokens: $mat-text-button-tokens), + ( + namespace: tokens-mdc-filled-button.$prefix, + tokens: $mdc-filled-button-tokens, + prefix: 'filled-', + ), + ( + namespace: tokens-mat-filled-button.$prefix, + tokens: $mat-filled-button-tokens, + prefix: 'filled-', + ), + ( + namespace: tokens-mdc-outlined-button.$prefix, + tokens: $mdc-outlined-button-tokens, + prefix: 'outlined-', + ), + ( + namespace: tokens-mat-outlined-button.$prefix, + tokens: $mat-outlined-button-tokens, + prefix: 'outlined-', + ), + ( + namespace: tokens-mdc-protected-button.$prefix, + tokens: $mdc-protected-button-tokens, + prefix: 'protected-', + ), + ( + namespace: tokens-mat-protected-button.$prefix, + tokens: $mat-protected-button-tokens, + prefix: 'protected-', + ), + ( + namespace: tokens-mdc-text-button.$prefix, + tokens: $mdc-text-button-tokens, + prefix: 'text-', + ), + ( + namespace: tokens-mat-text-button.$prefix, + tokens: $mat-text-button-tokens, + prefix: 'text-', + ) ); } @@ -306,8 +427,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); diff --git a/src/material/button/_fab-theme.scss b/src/material/button/_fab-theme.scss index 49caf90fa4f1..c7e78e68aa7c 100644 --- a/src/material/button/_fab-theme.scss +++ b/src/material/button/_fab-theme.scss @@ -16,26 +16,33 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mdc-fab.$prefix, tokens-mdc-fab.get-unthemable-tokens()); + tokens-mdc-fab.$prefix, + tokens-mdc-fab.get-unthemable-tokens() + ); @include token-utils.create-token-values( - tokens-mdc-fab-small.$prefix, tokens-mdc-fab-small.get-unthemable-tokens()); + tokens-mdc-fab-small.$prefix, + tokens-mdc-fab-small.get-unthemable-tokens() + ); @include token-utils.create-token-values( - tokens-mdc-extended-fab.$prefix, tokens-mdc-extended-fab.get-unthemable-tokens()); + tokens-mdc-extended-fab.$prefix, + tokens-mdc-extended-fab.get-unthemable-tokens() + ); } } } @mixin _fab-variant($theme, $palette) { - $mdc-tokens: if($palette, + $mdc-tokens: if( + $palette, tokens-mdc-fab.private-get-color-palette-color-tokens($theme, $palette), tokens-mdc-fab.get-color-tokens($theme) ); - $mat-tokens: if($palette, + $mat-tokens: if( + $palette, tokens-mat-fab.private-get-color-palette-color-tokens($theme, $palette), tokens-mat-fab.get-color-tokens($theme) ); @@ -45,12 +52,14 @@ } @mixin _fab-small-variant($theme, $palette) { - $mdc-tokens: if($palette, + $mdc-tokens: if( + $palette, tokens-mdc-fab-small.private-get-color-palette-color-tokens($theme, $palette), tokens-mdc-fab-small.get-color-tokens($theme) ); - $mat-tokens: if($palette, + $mat-tokens: if( + $palette, tokens-mat-fab-small.private-get-color-palette-color-tokens($theme, $palette), tokens-mat-fab-small.get-color-tokens($theme) ); @@ -67,13 +76,14 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include _fab-variant($theme, null); @include _fab-small-variant($theme, null); @include token-utils.create-token-values( - tokens-mdc-extended-fab.$prefix, tokens-mdc-extended-fab.get-color-tokens($theme)); + tokens-mdc-extended-fab.$prefix, + tokens-mdc-extended-fab.get-color-tokens($theme) + ); .mat-mdc-fab { &.mat-primary { @@ -111,15 +121,20 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-extended-fab.$prefix, - tokens-mdc-extended-fab.get-typography-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-fab.$prefix, - tokens-mat-fab.get-typography-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, - tokens-mat-fab-small.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mdc-extended-fab.$prefix, + tokens-mdc-extended-fab.get-typography-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-fab.$prefix, + tokens-mat-fab.get-typography-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-fab-small.$prefix, + tokens-mat-fab-small.get-typography-tokens($theme) + ); } } } @@ -129,13 +144,16 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-fab.$prefix, - tokens-mat-fab.get-density-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, - tokens-mat-fab-small.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-fab.$prefix, + tokens-mat-fab.get-density-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-fab-small.$prefix, + tokens-mat-fab-small.get-density-tokens($theme) + ); } } } @@ -145,11 +163,29 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mdc-fab.$prefix, tokens: tokens-mdc-fab.get-token-slots()), - (prefix: tokens-mdc-fab-small.$prefix, tokens: tokens-mdc-fab-small.get-token-slots()), - (prefix: tokens-mdc-extended-fab.$prefix, tokens: tokens-mdc-extended-fab.get-token-slots()), - (prefix: tokens-mat-fab.$prefix, tokens: tokens-mat-fab.get-token-slots()), - (prefix: tokens-mat-fab-small.$prefix, tokens: tokens-mat-fab-small.get-token-slots()), + ( + namespace: tokens-mdc-fab.$prefix, + tokens: tokens-mdc-fab.get-token-slots(), + ), + ( + namespace: tokens-mdc-fab-small.$prefix, + tokens: tokens-mdc-fab-small.get-token-slots(), + prefix: 'small-', + ), + ( + namespace: tokens-mdc-extended-fab.$prefix, + tokens: tokens-mdc-extended-fab.get-token-slots(), + prefix: 'extended-', + ), + ( + namespace: tokens-mat-fab.$prefix, + tokens: tokens-mat-fab.get-token-slots(), + ), + ( + namespace: tokens-mat-fab-small.$prefix, + tokens: tokens-mat-fab-small.get-token-slots(), + prefix: 'small-', + ) ); } @@ -162,8 +198,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-fab') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -180,17 +215,29 @@ @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); $mdc-extended-fab-tokens: token-utils.get-tokens-for( - $tokens, tokens-mdc-extended-fab.$prefix, $options...); + $tokens, + tokens-mdc-extended-fab.$prefix, + $options... + ); $mdc-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-fab.$prefix, $options...); - $mdc-fab-small-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-fab-small.$prefix, - $options...); + $mdc-fab-small-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mdc-fab-small.$prefix, + $options... + ); $mat-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab.$prefix, $options...); - $mat-fab-small-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab-small.$prefix, - $options...); - @include token-utils.create-token-values(tokens-mdc-extended-fab.$prefix, - $mdc-extended-fab-tokens); + $mat-fab-small-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mat-fab-small.$prefix, + $options... + ); + @include token-utils.create-token-values( + tokens-mdc-extended-fab.$prefix, + $mdc-extended-fab-tokens + ); @include token-utils.create-token-values(tokens-mdc-fab.$prefix, $mdc-fab-tokens); @include token-utils.create-token-values(tokens-mdc-fab-small.$prefix, $mdc-fab-small-tokens); @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-fab-tokens); diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss index aef468241a6f..4d95740943d4 100644 --- a/src/material/button/_icon-button-theme.scss +++ b/src/material/button/_icon-button-theme.scss @@ -8,27 +8,29 @@ @use '../core/theming/inspection'; @use '../core/theming/validation'; - @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-icon-button.$prefix, - tokens-mdc-icon-button.get-unthemable-tokens()); + @include token-utils.create-token-values( + tokens-mdc-icon-button.$prefix, + tokens-mdc-icon-button.get-unthemable-tokens() + ); } } } @mixin _icon-button-variant($theme, $palette) { - $mdc-tokens: if($palette, + $mdc-tokens: if( + $palette, tokens-mdc-icon-button.private-get-color-palette-color-tokens($theme, $palette), tokens-mdc-icon-button.get-color-tokens($theme) ); - $mat-tokens: if($palette, + $mat-tokens: if( + $palette, tokens-mat-icon-button.private-get-color-palette-color-tokens($theme, $palette), tokens-mat-icon-button.get-color-tokens($theme) ); @@ -44,8 +46,7 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include _icon-button-variant($theme, null); @@ -69,11 +70,12 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, - tokens-mat-icon-button.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-icon-button.$prefix, + tokens-mat-icon-button.get-typography-tokens($theme) + ); } } } @@ -81,8 +83,7 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { $icon-size: 24px; $density-scale: inspection.get-theme-density($theme); $size-map: ( @@ -96,8 +97,10 @@ $calculated-size: map.get($size-map, $density-scale); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, - tokens-mat-icon-button.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-icon-button.$prefix, + tokens-mat-icon-button.get-density-tokens($theme) + ); } // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles. @@ -121,8 +124,14 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mdc-icon-button.$prefix, tokens: tokens-mdc-icon-button.get-token-slots()), - (prefix: tokens-mat-icon-button.$prefix, tokens: tokens-mat-icon-button.get-token-slots()), + ( + namespace: tokens-mdc-icon-button.$prefix, + tokens: tokens-mdc-icon-button.get-token-slots(), + ), + ( + namespace: tokens-mat-icon-button.$prefix, + tokens: tokens-mat-icon-button.get-token-slots(), + ) ); } @@ -134,8 +143,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -152,7 +160,8 @@ @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { $mdc-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-icon-button.$prefix, $options...); $mat-tokens: token-utils.get-tokens-for($tokens, tokens-mat-icon-button.$prefix, $options...); diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss index c6602e0388a6..c8c4a7f59311 100644 --- a/src/material/card/_card-theme.scss +++ b/src/material/card/_card-theme.scss @@ -12,15 +12,20 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mdc-elevated-card.$prefix, tokens-mdc-elevated-card.get-unthemable-tokens()); + tokens-mdc-elevated-card.$prefix, + tokens-mdc-elevated-card.get-unthemable-tokens() + ); @include token-utils.create-token-values( - tokens-mdc-outlined-card.$prefix, tokens-mdc-outlined-card.get-unthemable-tokens()); + tokens-mdc-outlined-card.$prefix, + tokens-mdc-outlined-card.get-unthemable-tokens() + ); @include token-utils.create-token-values( - tokens-mat-card.$prefix, tokens-mat-card.get-unthemable-tokens()); + tokens-mat-card.$prefix, + tokens-mat-card.get-unthemable-tokens() + ); } } } @@ -28,15 +33,20 @@ @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-elevated-card.$prefix, - tokens-mdc-elevated-card.get-color-tokens($theme)); - @include token-utils.create-token-values(tokens-mdc-outlined-card.$prefix, - tokens-mdc-outlined-card.get-color-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-card.$prefix, - tokens-mat-card.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mdc-elevated-card.$prefix, + tokens-mdc-elevated-card.get-color-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mdc-outlined-card.$prefix, + tokens-mdc-outlined-card.get-color-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-card.$prefix, + tokens-mat-card.get-color-tokens($theme) + ); } } } @@ -44,15 +54,20 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mdc-elevated-card.$prefix, tokens-mdc-elevated-card.get-typography-tokens($theme)); + tokens-mdc-elevated-card.$prefix, + tokens-mdc-elevated-card.get-typography-tokens($theme) + ); @include token-utils.create-token-values( - tokens-mdc-outlined-card.$prefix, tokens-mdc-outlined-card.get-typography-tokens($theme)); + tokens-mdc-outlined-card.$prefix, + tokens-mdc-outlined-card.get-typography-tokens($theme) + ); @include token-utils.create-token-values( - tokens-mat-card.$prefix, tokens-mat-card.get-typography-tokens($theme)); + tokens-mat-card.$prefix, + tokens-mat-card.get-typography-tokens($theme) + ); } } } @@ -60,15 +75,20 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-elevated-card.$prefix, - tokens-mdc-elevated-card.get-density-tokens($theme)); - @include token-utils.create-token-values(tokens-mdc-outlined-card.$prefix, - tokens-mdc-outlined-card.get-density-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-card.$prefix, - tokens-mat-card.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mdc-elevated-card.$prefix, + tokens-mdc-elevated-card.get-density-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mdc-outlined-card.$prefix, + tokens-mdc-outlined-card.get-density-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-card.$prefix, + tokens-mat-card.get-density-tokens($theme) + ); } } } @@ -76,9 +96,20 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-card.$prefix, tokens: tokens-mat-card.get-token-slots()), - (prefix: tokens-mdc-elevated-card.$prefix, tokens: tokens-mdc-elevated-card.get-token-slots()), - (prefix: tokens-mdc-outlined-card.$prefix, tokens: tokens-mdc-outlined-card.get-token-slots()), + ( + namespace: tokens-mat-card.$prefix, + tokens: tokens-mat-card.get-token-slots(), + ), + ( + namespace: tokens-mdc-elevated-card.$prefix, + tokens: tokens-mdc-elevated-card.get-token-slots(), + prefix: 'elevated-', + ), + ( + namespace: tokens-mdc-outlined-card.$prefix, + tokens: tokens-mdc-outlined-card.get-token-slots(), + prefix: 'outlined-', + ) ); } @@ -86,8 +117,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-card') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -104,13 +134,20 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mdc-elevated-card.$prefix, map.get($tokens, tokens-mdc-elevated-card.$prefix)); + tokens-mdc-elevated-card.$prefix, + map.get($tokens, tokens-mdc-elevated-card.$prefix) + ); @include token-utils.create-token-values( - tokens-mdc-outlined-card.$prefix, map.get($tokens, tokens-mdc-outlined-card.$prefix)); + tokens-mdc-outlined-card.$prefix, + map.get($tokens, tokens-mdc-outlined-card.$prefix) + ); @include token-utils.create-token-values( - tokens-mat-card.$prefix, map.get($tokens, tokens-mat-card.$prefix)); + tokens-mat-card.$prefix, + map.get($tokens, tokens-mat-card.$prefix) + ); } } diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss index 13d106a71781..e91f6510bac6 100644 --- a/src/material/checkbox/_checkbox-theme.scss +++ b/src/material/checkbox/_checkbox-theme.scss @@ -51,13 +51,15 @@ &.mat-primary { @include token-utils.create-token-values( tokens-mdc-checkbox.$prefix, - tokens-mdc-checkbox.get-color-tokens($theme, primary)); + tokens-mdc-checkbox.get-color-tokens($theme, primary) + ); } &.mat-warn { @include token-utils.create-token-values( tokens-mdc-checkbox.$prefix, - tokens-mdc-checkbox.get-color-tokens($theme, warn)); + tokens-mdc-checkbox.get-color-tokens($theme, warn) + ); } } } @@ -109,11 +111,11 @@ @include token-utils.batch-create-token-values( $tokens, ( - prefix: tokens-mat-checkbox.$prefix, + namespace: tokens-mat-checkbox.$prefix, tokens: tokens-mat-checkbox.get-token-slots(), ), ( - prefix: tokens-mdc-checkbox.$prefix, + namespace: tokens-mdc-checkbox.$prefix, tokens: tokens-mdc-checkbox.get-token-slots(), ) ); diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss index 2528a8685bdb..015cb521950c 100644 --- a/src/material/chips/_chips-theme.scss +++ b/src/material/chips/_chips-theme.scss @@ -13,13 +13,16 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { .mat-mdc-standard-chip { @include token-utils.create-token-values( - tokens-mdc-chip.$prefix, tokens-mdc-chip.get-unthemable-tokens()); + tokens-mdc-chip.$prefix, + tokens-mdc-chip.get-unthemable-tokens() + ); @include token-utils.create-token-values( - tokens-mat-chip.$prefix, tokens-mat-chip.get-unthemable-tokens()); + tokens-mat-chip.$prefix, + tokens-mat-chip.get-unthemable-tokens() + ); } } } @@ -32,35 +35,50 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { .mat-mdc-standard-chip { @include token-utils.create-token-values( - tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme)); + tokens-mdc-chip.$prefix, + tokens-mdc-chip.get-color-tokens($theme) + ); @include token-utils.create-token-values( - tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme)); + tokens-mat-chip.$prefix, + tokens-mat-chip.get-color-tokens($theme) + ); &.mat-mdc-chip-selected, &.mat-mdc-chip-highlighted { &.mat-primary { @include token-utils.create-token-values( - tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme, primary)); + tokens-mdc-chip.$prefix, + tokens-mdc-chip.get-color-tokens($theme, primary) + ); @include token-utils.create-token-values( - tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, primary)); + tokens-mat-chip.$prefix, + tokens-mat-chip.get-color-tokens($theme, primary) + ); } &.mat-accent { @include token-utils.create-token-values( - tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme, accent)); + tokens-mdc-chip.$prefix, + tokens-mdc-chip.get-color-tokens($theme, accent) + ); @include token-utils.create-token-values( - tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, accent)); + tokens-mat-chip.$prefix, + tokens-mat-chip.get-color-tokens($theme, accent) + ); } &.mat-warn { @include token-utils.create-token-values( - tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme, warn)); + tokens-mdc-chip.$prefix, + tokens-mdc-chip.get-color-tokens($theme, warn) + ); @include token-utils.create-token-values( - tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, warn)); + tokens-mat-chip.$prefix, + tokens-mat-chip.get-color-tokens($theme, warn) + ); } } } @@ -72,13 +90,16 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { .mat-mdc-standard-chip { @include token-utils.create-token-values( - tokens-mdc-chip.$prefix, tokens-mdc-chip.get-typography-tokens($theme)); + tokens-mdc-chip.$prefix, + tokens-mdc-chip.get-typography-tokens($theme) + ); @include token-utils.create-token-values( - tokens-mat-chip.$prefix, tokens-mat-chip.get-typography-tokens($theme)); + tokens-mat-chip.$prefix, + tokens-mat-chip.get-typography-tokens($theme) + ); } } } @@ -88,13 +109,16 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { .mat-mdc-chip.mat-mdc-standard-chip { @include token-utils.create-token-values( - tokens-mdc-chip.$prefix, tokens-mdc-chip.get-density-tokens($theme)); + tokens-mdc-chip.$prefix, + tokens-mdc-chip.get-density-tokens($theme) + ); @include token-utils.create-token-values( - tokens-mat-chip.$prefix, tokens-mat-chip.get-density-tokens($theme)); + tokens-mat-chip.$prefix, + tokens-mat-chip.get-density-tokens($theme) + ); } } } @@ -104,8 +128,14 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mdc-chip.$prefix, tokens: tokens-mdc-chip.get-token-slots()), - (prefix: tokens-mat-chip.$prefix, tokens: tokens-mat-chip.get-token-slots()), + ( + namespace: tokens-mdc-chip.$prefix, + tokens: tokens-mdc-chip.get-token-slots(), + ), + ( + namespace: tokens-mat-chip.$prefix, + tokens: tokens-mat-chip.get-token-slots(), + ) ); } @@ -118,8 +148,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-chips') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -136,7 +165,8 @@ @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); $mdc-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-chip.$prefix, $options...); $mat-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mat-chip.$prefix, $options...); @include token-utils.create-token-values(tokens-mdc-chip.$prefix, $mdc-chip-tokens); diff --git a/src/material/core/_core-theme.scss b/src/material/core/_core-theme.scss index 8e6b3061d1d8..82e11da6ab84 100644 --- a/src/material/core/_core-theme.scss +++ b/src/material/core/_core-theme.scss @@ -18,15 +18,16 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include ripple-theme.base($theme); @include option-theme.base($theme); @include optgroup-theme.base($theme); @include pseudo-checkbox-theme.base($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-app.$prefix, - tokens-mat-app.get-unthemable-tokens()); + @include token-utils.create-token-values( + tokens-mat-app.$prefix, + tokens-mat-app.get-unthemable-tokens() + ); } } } @@ -34,15 +35,16 @@ @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include ripple-theme.color($theme); @include option-theme.color($theme); @include optgroup-theme.color($theme); @include pseudo-checkbox-theme.color($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-app.$prefix, - tokens-mat-app.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-app.$prefix, + tokens-mat-app.get-color-tokens($theme) + ); } } } @@ -50,8 +52,7 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include option-theme.typography($theme); @include optgroup-theme.typography($theme); @include pseudo-checkbox-theme.typography($theme); @@ -62,8 +63,7 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include option-theme.density($theme); @include optgroup-theme.density($theme); @include pseudo-checkbox-theme.density($theme); @@ -84,11 +84,19 @@ $minimal-pseudo-checkbox-tokens: tokens-mat-minimal-pseudo-checkbox.get-token-slots(); @return ( - (prefix: tokens-mat-app.$prefix, tokens: $app-tokens), - (prefix: tokens-mat-ripple.$prefix, tokens: $ripple-tokens), - (prefix: tokens-mat-option.$prefix, tokens: $option-tokens), - (prefix: tokens-mat-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens), - (prefix: tokens-mat-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens), + (namespace: tokens-mat-app.$prefix, tokens: $app-tokens, prefix: 'app-'), + (namespace: tokens-mat-ripple.$prefix, tokens: $ripple-tokens, prefix: 'ripple-'), + (namespace: tokens-mat-option.$prefix, tokens: $option-tokens, prefix: 'option-'), + ( + namespace: tokens-mat-full-pseudo-checkbox.$prefix, + tokens: $full-pseudo-checkbox-tokens, + prefix: 'pseudo-checkbox-full-' + ), + ( + namespace: tokens-mat-minimal-pseudo-checkbox.$prefix, + tokens: $minimal-pseudo-checkbox-tokens, + prefix: 'pseudo-checkbox-minimal-' + ) ); } @@ -104,8 +112,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-core') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -122,23 +129,37 @@ @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); $mat-app-tokens: token-utils.get-tokens-for($tokens, tokens-mat-app.$prefix, $options...); $mat-ripple-tokens: token-utils.get-tokens-for($tokens, tokens-mat-ripple.$prefix, $options...); $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...); - $mat-optgroup-tokens: - token-utils.get-tokens-for($tokens, tokens-mat-optgroup.$prefix, $options...); - $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens, - tokens-mat-full-pseudo-checkbox.$prefix, $options...); - $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens, - tokens-mat-minimal-pseudo-checkbox.$prefix, $options...); + $mat-optgroup-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mat-optgroup.$prefix, + $options... + ); + $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mat-full-pseudo-checkbox.$prefix, + $options... + ); + $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mat-minimal-pseudo-checkbox.$prefix, + $options... + ); @include token-utils.create-token-values(tokens-mat-app.$prefix, $mat-app-tokens); @include token-utils.create-token-values(tokens-mat-ripple.$prefix, $mat-ripple-tokens); @include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens); @include token-utils.create-token-values(tokens-mat-optgroup.$prefix, $mat-optgroup-tokens); - @include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix, - $mat-full-pseudo-checkbox-tokens); - @include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix, - $mat-minimal-pseudo-checkbox-tokens); + @include token-utils.create-token-values( + tokens-mat-full-pseudo-checkbox.$prefix, + $mat-full-pseudo-checkbox-tokens + ); + @include token-utils.create-token-values( + tokens-mat-minimal-pseudo-checkbox.$prefix, + $mat-minimal-pseudo-checkbox-tokens + ); } diff --git a/src/material/core/option/_optgroup-theme.scss b/src/material/core/option/_optgroup-theme.scss index 5c39fe2f32bb..1c896de357f6 100644 --- a/src/material/core/option/_optgroup-theme.scss +++ b/src/material/core/option/_optgroup-theme.scss @@ -10,18 +10,19 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } @else { } - @else {} } @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-optgroup.$prefix, - tokens-mat-optgroup.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-optgroup.$prefix, + tokens-mat-optgroup.get-color-tokens($theme) + ); } } } @@ -29,11 +30,12 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-optgroup.$prefix, - tokens-mat-optgroup.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-optgroup.$prefix, + tokens-mat-optgroup.get-typography-tokens($theme) + ); } } } @@ -41,14 +43,17 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } @else { } - @else {} } @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-optgroup.$prefix, tokens: tokens-mat-optgroup.get-token-slots()), + ( + namespace: tokens-mat-optgroup.$prefix, + tokens: tokens-mat-optgroup.get-token-slots(), + ) ); } @@ -56,8 +61,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-optgroup') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -74,9 +78,12 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-optgroup.$prefix, map.get($tokens, tokens-mat-optgroup.$prefix)); + tokens-mat-optgroup.$prefix, + map.get($tokens, tokens-mat-optgroup.$prefix) + ); } } diff --git a/src/material/core/option/_option-theme.scss b/src/material/core/option/_option-theme.scss index 4cc6f7839379..dc927e275ed6 100644 --- a/src/material/core/option/_option-theme.scss +++ b/src/material/core/option/_option-theme.scss @@ -12,8 +12,8 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } @else { } - @else {} } /// Outputs color theme styles for the mat-option. @@ -24,21 +24,26 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-option.$prefix, - tokens-mat-option.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-option.$prefix, + tokens-mat-option.get-color-tokens($theme) + ); } .mat-accent { - @include token-utils.create-token-values(tokens-mat-option.$prefix, - tokens-mat-option.get-color-tokens($theme, accent)); + @include token-utils.create-token-values( + tokens-mat-option.$prefix, + tokens-mat-option.get-color-tokens($theme, accent) + ); } .mat-warn { - @include token-utils.create-token-values(tokens-mat-option.$prefix, - tokens-mat-option.get-color-tokens($theme, warn)); + @include token-utils.create-token-values( + tokens-mat-option.$prefix, + tokens-mat-option.get-color-tokens($theme, warn) + ); } } } @@ -48,11 +53,12 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-option.$prefix, - tokens-mat-option.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-option.$prefix, + tokens-mat-option.get-typography-tokens($theme) + ); } } } @@ -62,8 +68,8 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } @else { } - @else {} } /// Outputs the CSS variable values for the given tokens. @@ -71,7 +77,10 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-option.$prefix, tokens: tokens-mat-option.get-token-slots()), + ( + namespace: tokens-mat-option.$prefix, + tokens: tokens-mat-option.get-token-slots(), + ) ); } @@ -84,8 +93,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-option') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -102,7 +110,8 @@ @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...); @include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens); } diff --git a/src/material/core/ripple/_ripple-theme.scss b/src/material/core/ripple/_ripple-theme.scss index 750fcd08ea40..800e56c50cd0 100644 --- a/src/material/core/ripple/_ripple-theme.scss +++ b/src/material/core/ripple/_ripple-theme.scss @@ -9,18 +9,19 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } @else { } - @else {} } @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-ripple.$prefix, - tokens-mat-ripple.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-ripple.$prefix, + tokens-mat-ripple.get-color-tokens($theme) + ); } } } @@ -28,11 +29,12 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-ripple.$prefix, - tokens-mat-ripple.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-ripple.$prefix, + tokens-mat-ripple.get-typography-tokens($theme) + ); } } } @@ -40,11 +42,12 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-ripple.$prefix, - tokens-mat-ripple.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-ripple.$prefix, + tokens-mat-ripple.get-density-tokens($theme) + ); } } } @@ -52,7 +55,10 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-ripple.$prefix, tokens: tokens-mat-ripple.get-token-slots()), + ( + namespace: tokens-mat-ripple.$prefix, + tokens: tokens-mat-ripple.get-token-slots(), + ) ); } @@ -60,8 +66,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -78,9 +83,12 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-ripple.$prefix, map.get($tokens, tokens-mat-ripple.$prefix)); + tokens-mat-ripple.$prefix, + map.get($tokens, tokens-mat-ripple.$prefix) + ); } } diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss index a745d9df688e..766f90a4a35d 100644 --- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss @@ -8,30 +8,46 @@ @mixin _palette-styles($theme, $palette-name) { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix, - tokens-mat-full-pseudo-checkbox.get-color-tokens($theme, $palette-name)); - @include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix, - tokens-mat-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name)); + @include token-utils.create-token-values( + tokens-mat-full-pseudo-checkbox.$prefix, + tokens-mat-full-pseudo-checkbox.get-color-tokens($theme, $palette-name) + ); + @include token-utils.create-token-values( + tokens-mat-minimal-pseudo-checkbox.$prefix, + tokens-mat-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name) + ); } } @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); - $mat-full-pseudo-checkbox-tokens: - token-utils.get-tokens-for($tokens, tokens-mat-full-pseudo-checkbox.$prefix, $options...); - $mat-minimal-pseudo-checkbox-tokens: - token-utils.get-tokens-for($tokens, tokens-mat-minimal-pseudo-checkbox.$prefix, $options...); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); + $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mat-full-pseudo-checkbox.$prefix, + $options... + ); + $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mat-minimal-pseudo-checkbox.$prefix, + $options... + ); @include token-utils.create-token-values( - tokens-mat-full-pseudo-checkbox.$prefix, $mat-full-pseudo-checkbox-tokens); + tokens-mat-full-pseudo-checkbox.$prefix, + $mat-full-pseudo-checkbox-tokens + ); @include token-utils.create-token-values( - tokens-mat-minimal-pseudo-checkbox.$prefix, $mat-minimal-pseudo-checkbox-tokens); + tokens-mat-minimal-pseudo-checkbox.$prefix, + $mat-minimal-pseudo-checkbox-tokens + ); } /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) /// for the mat-pseudo-checkbox. /// @param {Map} $theme The theme to generate base styles for. -@mixin base($theme) {} +@mixin base($theme) { +} /// Outputs the CSS variable values for the given tokens. /// @param {Map} $tokens The token values to emit. @@ -41,8 +57,16 @@ @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens), - (prefix: tokens-mat-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens), + ( + namespace: tokens-mat-full-pseudo-checkbox.$prefix, + tokens: $full-pseudo-checkbox-tokens, + prefix: 'full-', + ), + ( + namespace: tokens-mat-minimal-pseudo-checkbox.$prefix, + tokens: $minimal-pseudo-checkbox-tokens, + prefix: 'minimal-', + ) ); } @@ -54,8 +78,7 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the // theme from their parent, rather than implementing their own theming, which is why we // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary` @@ -96,8 +119,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); diff --git a/src/material/core/theming/tests/m3-theme.spec.ts b/src/material/core/theming/tests/m3-theme.spec.ts index e05486afb200..fac03197a185 100644 --- a/src/material/core/theming/tests/m3-theme.spec.ts +++ b/src/material/core/theming/tests/m3-theme.spec.ts @@ -1,7 +1,7 @@ -import {parse} from 'postcss'; -import {compileString} from 'sass'; import {runfiles} from '@bazel/runfiles'; import * as path from 'path'; +import {parse} from 'postcss'; +import {compileString} from 'sass'; import {createLocalAngularPackageImporter} from '../../../../../tools/sass/local-sass-importer'; @@ -39,6 +39,32 @@ function intersection(set: Set, ...sets: Set[]): Set { return new Set([...set].filter(i => sets.every(s => s.has(i)))); } +/** Expects the given warning to be reported in Sass. */ +function expectWarning(message: RegExp) { + expect(getMatchingWarning(message)).withContext('Expected warning to be printed.').toBeDefined(); +} + +/** Expects the given warning not to be reported in Sass. */ +function expectNoWarning(message: RegExp) { + expect(getMatchingWarning(message)) + .withContext('Expected no warning to be printed.') + .toBeUndefined(); +} + +/** + * Gets first instance of the given warning reported in Sass. Dart sass directly writes + * to the `process.stderr` stream, so we spy on the `stderr.write` method. We + * cannot expect a specific amount of writes as Sass calls `stderr.write` multiple + * times for a warning (e.g. spacing and stack trace) + */ +function getMatchingWarning(message: RegExp) { + const writeSpy = process.stderr.write as jasmine.Spy; + return (writeSpy.calls?.all() ?? []).find( + (s: jasmine.CallInfo) => + typeof s.args[0] === 'string' && message.test(s.args[0]), + ); +} + describe('M3 theme', () => { it('should emit all styles under the given selector', () => { const root = parse( @@ -112,4 +138,107 @@ describe('M3 theme', () => { /Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector/, ); }); + + describe('theme override API', () => { + beforeEach(() => { + spyOn(process.stderr, 'write').and.callThrough(); + }); + + it('should allow overriding non-ambiguous token value', () => { + const css = transpile(` + div { + @include mat.checkbox-overrides((selected-checkmark-color: magenta)); + } + `); + + expect(css).toContain('--mdc-checkbox-selected-checkmark-color: magenta'); + expectNoWarning(/`selected-checkmark-color` is deprecated/); + }); + + it('should allow overriding ambiguous token value using prefix', () => { + const css = transpile(` + div { + @include mat.form-field-overrides((filled-caret-color: magenta)); + } + `); + + expect(css).toContain('--mdc-filled-text-field-caret-color: magenta'); + expect(css).not.toContain('--mdc-outline-text-field-caret-color: magenta'); + expectNoWarning(/`filled-caret-color` is deprecated/); + }); + + it('should allow overriding ambiguous token value without using prefix, but warn', () => { + const css = transpile(` + div { + @include mat.form-field-overrides((caret-color: magenta)); + } + `); + + expect(css).toContain('--mdc-filled-text-field-caret-color: magenta'); + expect(css).toContain('--mdc-outlined-text-field-caret-color: magenta'); + expectWarning( + /Token `caret-color` is deprecated. Please use one of the following alternatives: filled-caret-color, outlined-caret-color/, + ); + }); + + it('should error on invalid token name', () => { + expect(() => + transpile(` + div { + @include mat.form-field-overrides((fake: magenta)); + } + `), + ).toThrowError(/Invalid token name `fake`./); + }); + + it('should not error when calling theme override functions', () => { + // Ensures that no components have issues with ambiguous token names. + expect(() => + transpile(` + html { + @include mat.core-overrides(()); + @include mat.ripple-overrides(()); + @include mat.option-overrides(()); + @include mat.optgroup-overrides(()); + @include mat.pseudo-checkbox-overrides(()); + @include mat.autocomplete-overrides(()); + @include mat.badge-overrides(()); + @include mat.bottom-sheet-overrides(()); + @include mat.button-overrides(()); + @include mat.fab-overrides(()); + @include mat.icon-button-overrides(()); + @include mat.button-toggle-overrides(()); + @include mat.card-overrides(()); + @include mat.checkbox-overrides(()); + @include mat.chips-overrides(()); + @include mat.datepicker-overrides(()); + @include mat.dialog-overrides(()); + @include mat.divider-overrides(()); + @include mat.expansion-overrides(()); + @include mat.form-field-overrides(()); + @include mat.grid-list-overrides(()); + @include mat.icon-overrides(()); + @include mat.list-overrides(()); + @include mat.menu-overrides(()); + @include mat.paginator-overrides(()); + @include mat.progress-bar-overrides(()); + @include mat.progress-spinner-overrides(()); + @include mat.radio-overrides(()); + @include mat.select-overrides(()); + @include mat.sidenav-overrides(()); + @include mat.slide-toggle-overrides(()); + @include mat.slider-overrides(()); + @include mat.snack-bar-overrides(()); + @include mat.sort-overrides(()); + @include mat.stepper-overrides(()); + @include mat.table-overrides(()); + @include mat.tabs-overrides(()); + @include mat.toolbar-overrides(()); + @include mat.tooltip-overrides(()); + @include mat.tree-overrides(()); + } + `), + ).not.toThrow(); + }); + }); }); diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss index 018d8161b2e0..18bbbd7db28e 100644 --- a/src/material/core/tokens/_token-utils.scss +++ b/src/material/core/tokens/_token-utils.scss @@ -138,10 +138,13 @@ $_system-fallbacks: m3-system.create-system-fallbacks(); @function resolve-elevation($tokens, $elevation-token, $shadow-color-token) { $elevation: map.get($tokens, $elevation-token); $shadow-color: map.get($tokens, $shadow-color-token); - @return map.merge($tokens, ( - $elevation-token: elevation.get-box-shadow($elevation, $shadow-color), - $shadow-color-token: null, - )); + @return map.merge( + $tokens, + ( + $elevation-token: elevation.get-box-shadow($elevation, $shadow-color), + $shadow-color-token: null, + ) + ); } /// Checks whether a list starts wih a given prefix @@ -195,7 +198,8 @@ $_system-fallbacks: m3-system.create-system-fallbacks(); $overrides: map.get($tokens, list.append($prefix, $color-variant)); @if $overrides == null { $variants: _supported-color-variants($tokens, $prefix); - $secondary-message: if($variants == (), + $secondary-message: if( + $variants == (), 'Mixin does not support color variants', 'Supported color variants are: #{$variants}' ); @@ -208,41 +212,92 @@ $_system-fallbacks: m3-system.create-system-fallbacks(); /// Emits new token values for the given token overrides. /// Verifies that the overrides passed in are valid tokens. /// New token values are emitted under the current selector or root. -@mixin batch-create-token-values($overrides: (), $token-maps...) { - @include _validate-token-overrides($overrides, $token-maps); - - @each $token-map in $token-maps { - $prefix: map.get($token-map, prefix); - $tokens: map.get($token-map, tokens); - +@mixin batch-create-token-values($overrides: (), $namespace-configs...) { + $prefixed-name-data: (); + $unprefixed-name-data: (); + $all-names: (); + + @each $config in $namespace-configs { + $namespace: map.get($config, namespace); + $prefix: if(map.has-key($config, prefix), map.get($config, prefix), ''); + $tokens: _filter-nulls(map.get($config, tokens)); @each $name, $value in $tokens { - $tokens: map.set($tokens, $name, map.get($overrides, $name)); - } - - @include sass-utils.current-selector-or-root() { - @include create-token-values($prefix, $tokens); + $prefixed-name: $prefix + $name; + $all-names: list.append($all-names, $prefixed-name, $separator: comma); + @if map.has-key($prefixed-name-data, $prefixed-name) { + @error #{ + 'Error overriding token: Ambiguous token name `' + }#{ + $prefixed-name + }#{ + '` exists in multiple namespaces: `(' + }#{ + list.nth(map.get($prefixed-name-data, $prefixed-name), 1) + }#{ + ')` and `(' + }#{ + $namespace + }#{ + ')`' + }; + } + $prefixed-name-data: map.set($prefixed-name-data, $prefixed-name, ($namespace, $name)); + $unprefixed-data: map.has-key($unprefixed-name-data, $name) and + map.get($unprefixed-name-data, $name) or + (); + $unprefixed-data: list.append($unprefixed-data, ($namespace, $prefixed-name)); + $unprefixed-name-data: map.set($unprefixed-name-data, $name, $unprefixed-data); } } -} -/// Verifies that the token overrides exist and are used in one of the given token maps. -@mixin _validate-token-overrides($overrides: (), $token-maps) { - $valid-token-names: (); - - @each $token-map in $token-maps { - @each $name, $value in map.get($token-map, tokens) { - @if ($value != null and list.index($valid-token-names, $name) == null) { - $valid-token-names: list.append($valid-token-names, $name); + @each $name, $value in $overrides { + @if map.has-key($prefixed-name-data, $name) { + $data: map.get($prefixed-name-data, $name); + $namespace: list.nth($data, 1); + $name: list.nth($data, 2); + @include create-token-values( + $namespace, + ( + $name: $value, + ) + ); + } @else if (map.has-key($unprefixed-name-data, $name)) { + $datalist: map.get($unprefixed-name-data, $name); + $prefixed-names: (); + @each $data in $datalist { + $namespace: list.nth($data, 1); + $prefixed-names: list.append($prefixed-names, list.nth($data, 2), $separator: comma); + @include create-token-values( + $namespace, + ( + $name: $value, + ) + ); } + @warn #{ + 'Token `' + }#{ + $name + }#{ + '` is deprecated. Please use one of the following alternatives: ' + }#{ + $prefixed-names + }; + } @else { + @error #{'Invalid token name `'}#{$name}#{'`. '}#{'Valid tokens are: '}#{$all-names}; } } +} - @each $name in map.keys($overrides) { - @if (list.index($valid-token-names, $name) == null) { - @error ( - 'Invalid token: "' + $name + '"' - 'Valid tokens include: ' $valid-token-names - ); +/// Filters keys with a null value out of the map. +/// @param {Map} $map The map to filter. +/// @return {Map} The given map with all of the null keys filtered out. +@function _filter-nulls($map) { + $result: (); + @each $key, $val in $map { + @if $val != null { + $result: map.set($result, $key, $val); } } + @return $result; } diff --git a/src/material/datepicker/_datepicker-theme.scss b/src/material/datepicker/_datepicker-theme.scss index 669873845cd8..c6b998d34a28 100644 --- a/src/material/datepicker/_datepicker-theme.scss +++ b/src/material/datepicker/_datepicker-theme.scss @@ -21,11 +21,15 @@ $calendar-weekday-table-font-size: 11px !default; $palette-color: inspection.get-theme-color($theme, $palette-name); $range-color: tokens-mat-datepicker.private-get-range-background-color($palette-color); $range-tokens: tokens-mat-datepicker.get-range-color-tokens($range-color); - $calendar-tokens: - tokens-mat-datepicker.private-get-calendar-color-palette-color-tokens($theme, $palette-name); + $calendar-tokens: tokens-mat-datepicker.private-get-calendar-color-palette-color-tokens( + $theme, + $palette-name + ); - @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, - map.merge($calendar-tokens, $range-tokens)); + @include token-utils.create-token-values( + tokens-mat-datepicker.$prefix, + map.merge($calendar-tokens, $range-tokens) + ); } /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) @@ -34,11 +38,12 @@ $calendar-weekday-table-font-size: 11px !default; @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, - tokens-mat-datepicker.get-unthemable-tokens()); + @include token-utils.create-token-values( + tokens-mat-datepicker.$prefix, + tokens-mat-datepicker.get-unthemable-tokens() + ); } } } @@ -51,11 +56,12 @@ $calendar-weekday-table-font-size: 11px !default; @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, - tokens-mat-datepicker.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-datepicker.$prefix, + tokens-mat-datepicker.get-color-tokens($theme) + ); } .mat-datepicker-content { @@ -70,14 +76,18 @@ $calendar-weekday-table-font-size: 11px !default; .mat-datepicker-toggle-active { &.mat-accent { - $accent-tokens: - tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent); + $accent-tokens: tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens( + $theme, + accent + ); @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $accent-tokens); } &.mat-warn { - $warn-tokens: - tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn); + $warn-tokens: tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens( + $theme, + warn + ); @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $warn-tokens); } } @@ -89,11 +99,12 @@ $calendar-weekday-table-font-size: 11px !default; @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, - tokens-mat-datepicker.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-datepicker.$prefix, + tokens-mat-datepicker.get-typography-tokens($theme) + ); } } } @@ -103,7 +114,8 @@ $calendar-weekday-table-font-size: 11px !default; $comparison-color: tokens-mat-datepicker.$private-default-comparison-color, $overlap-color: tokens-mat-datepicker.$private-default-overlap-color, $overlap-selected-color: - tokens-mat-datepicker.private-get-default-overlap-selected-color($overlap-color)) { + tokens-mat-datepicker.private-get-default-overlap-selected-color($overlap-color) +) { $tokens: tokens-mat-datepicker.get-range-color-tokens( $range-color: $range-color, $comparison-color: $comparison-color, @@ -121,8 +133,7 @@ $calendar-weekday-table-font-size: 11px !default; @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { // TODO(crisbeto): move this into the structural styles // once the icon button density is switched to tokens. @@ -139,7 +150,10 @@ $calendar-weekday-table-font-size: 11px !default; @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-datepicker.$prefix, tokens: tokens-mat-datepicker.get-token-slots()), + ( + namespace: tokens-mat-datepicker.$prefix, + tokens: tokens-mat-datepicker.get-token-slots(), + ) ); } @@ -152,8 +166,7 @@ $calendar-weekday-table-font-size: 11px !default; @include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -170,8 +183,12 @@ $calendar-weekday-table-font-size: 11px !default; @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); - $mat-datepicker-tokens: - token-utils.get-tokens-for($tokens, tokens-mat-datepicker.$prefix, $options...); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); + $mat-datepicker-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mat-datepicker.$prefix, + $options... + ); @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $mat-datepicker-tokens); } diff --git a/src/material/dialog/_dialog-theme.scss b/src/material/dialog/_dialog-theme.scss index 3e02b5c4319d..b2a7f1add9da 100644 --- a/src/material/dialog/_dialog-theme.scss +++ b/src/material/dialog/_dialog-theme.scss @@ -11,14 +11,17 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mdc-dialog.$prefix, tokens-mdc-dialog.get-unthemable-tokens()); + tokens-mdc-dialog.$prefix, + tokens-mdc-dialog.get-unthemable-tokens() + ); @include token-utils.create-token-values( - tokens-mat-dialog.$prefix, tokens-mat-dialog.get-unthemable-tokens()); + tokens-mat-dialog.$prefix, + tokens-mat-dialog.get-unthemable-tokens() + ); } } } @@ -26,13 +29,16 @@ @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mdc-dialog.$prefix, tokens-mdc-dialog.get-color-tokens($theme)); + tokens-mdc-dialog.$prefix, + tokens-mdc-dialog.get-color-tokens($theme) + ); @include token-utils.create-token-values( - tokens-mat-dialog.$prefix, tokens-mat-dialog.get-color-tokens($theme)); + tokens-mat-dialog.$prefix, + tokens-mat-dialog.get-color-tokens($theme) + ); } } } @@ -40,13 +46,16 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mdc-dialog.$prefix, tokens-mdc-dialog.get-typography-tokens($theme)); + tokens-mdc-dialog.$prefix, + tokens-mdc-dialog.get-typography-tokens($theme) + ); @include token-utils.create-token-values( - tokens-mat-dialog.$prefix, tokens-mat-dialog.get-typography-tokens($theme)); + tokens-mat-dialog.$prefix, + tokens-mat-dialog.get-typography-tokens($theme) + ); } } } @@ -54,15 +63,21 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } @else { } - @else {} } @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mdc-dialog.$prefix, tokens: tokens-mdc-dialog.get-token-slots()), - (prefix: tokens-mat-dialog.$prefix, tokens: tokens-mat-dialog.get-token-slots()), + ( + namespace: tokens-mdc-dialog.$prefix, + tokens: tokens-mdc-dialog.get-token-slots(), + ), + ( + namespace: tokens-mat-dialog.$prefix, + tokens: tokens-mat-dialog.get-token-slots(), + ) ); } @@ -70,8 +85,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-dialog') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -88,11 +102,16 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mdc-dialog.$prefix, map.get($tokens, tokens-mdc-dialog.$prefix)); + tokens-mdc-dialog.$prefix, + map.get($tokens, tokens-mdc-dialog.$prefix) + ); @include token-utils.create-token-values( - tokens-mat-dialog.$prefix, map.get($tokens, tokens-mat-dialog.$prefix)); + tokens-mat-dialog.$prefix, + map.get($tokens, tokens-mat-dialog.$prefix) + ); } } diff --git a/src/material/divider/_divider-theme.scss b/src/material/divider/_divider-theme.scss index 0b2694c459ec..f3e3306ae2ca 100644 --- a/src/material/divider/_divider-theme.scss +++ b/src/material/divider/_divider-theme.scss @@ -9,11 +9,12 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mat-divider.$prefix, tokens-mat-divider.get-unthemable-tokens()); + tokens-mat-divider.$prefix, + tokens-mat-divider.get-unthemable-tokens() + ); } } } @@ -21,11 +22,12 @@ @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-divider.$prefix, - tokens-mat-divider.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-divider.$prefix, + tokens-mat-divider.get-color-tokens($theme) + ); } } } @@ -33,21 +35,24 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); + } @else { } - @else {} } @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } @else { } - @else {} } @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-divider.$prefix, tokens: tokens-mat-divider.get-token-slots()), + ( + namespace: tokens-mat-divider.$prefix, + tokens: tokens-mat-divider.get-token-slots(), + ) ); } @@ -55,8 +60,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-divider') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -73,9 +77,12 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-divider.$prefix, map.get($tokens, tokens-mat-divider.$prefix)); + tokens-mat-divider.$prefix, + map.get($tokens, tokens-mat-divider.$prefix) + ); } } diff --git a/src/material/expansion/_expansion-theme.scss b/src/material/expansion/_expansion-theme.scss index 8b0acb394e06..e789efdc5f94 100644 --- a/src/material/expansion/_expansion-theme.scss +++ b/src/material/expansion/_expansion-theme.scss @@ -10,11 +10,12 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mat-expansion.$prefix, tokens-mat-expansion.get-unthemable-tokens()); + tokens-mat-expansion.$prefix, + tokens-mat-expansion.get-unthemable-tokens() + ); } } } @@ -22,11 +23,12 @@ @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-expansion.$prefix, - tokens-mat-expansion.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-expansion.$prefix, + tokens-mat-expansion.get-color-tokens($theme) + ); } } } @@ -34,14 +36,15 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { // TODO(mmalerba): Stop calling this and resolve resulting screen diffs. $theme: inspection.private-get-typography-back-compat-theme($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-expansion.$prefix, - tokens-mat-expansion.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-expansion.$prefix, + tokens-mat-expansion.get-typography-tokens($theme) + ); } } } @@ -49,11 +52,12 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-expansion.$prefix, - tokens-mat-expansion.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-expansion.$prefix, + tokens-mat-expansion.get-density-tokens($theme) + ); } } } @@ -61,7 +65,10 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-expansion.$prefix, tokens: tokens-mat-expansion.get-token-slots()), + ( + namespace: tokens-mat-expansion.$prefix, + tokens: tokens-mat-expansion.get-token-slots(), + ) ); } @@ -69,8 +76,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-expansion') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -85,12 +91,14 @@ } } - @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-expansion.$prefix, map.get($tokens, tokens-mat-expansion.$prefix)); + tokens-mat-expansion.$prefix, + map.get($tokens, tokens-mat-expansion.$prefix) + ); } } diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss index 7ce5cb3acc9b..d17886a244f8 100644 --- a/src/material/form-field/_form-field-theme.scss +++ b/src/material/form-field/_form-field-theme.scss @@ -14,18 +14,20 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mdc-filled-text-field.$prefix, - tokens-mdc-filled-text-field.get-unthemable-tokens()); + tokens-mdc-filled-text-field.$prefix, + tokens-mdc-filled-text-field.get-unthemable-tokens() + ); @include token-utils.create-token-values( - tokens-mdc-outlined-text-field.$prefix, - tokens-mdc-outlined-text-field.get-unthemable-tokens()); + tokens-mdc-outlined-text-field.$prefix, + tokens-mdc-outlined-text-field.get-unthemable-tokens() + ); @include token-utils.create-token-values( - tokens-mat-form-field.$prefix, - tokens-mat-form-field.get-unthemable-tokens()); + tokens-mat-form-field.$prefix, + tokens-mat-form-field.get-unthemable-tokens() + ); } } } @@ -38,33 +40,50 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix, - tokens-mdc-filled-text-field.get-color-tokens($theme)); - @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix, - tokens-mdc-outlined-text-field.get-color-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-form-field.$prefix, - tokens-mat-form-field.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mdc-filled-text-field.$prefix, + tokens-mdc-filled-text-field.get-color-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mdc-outlined-text-field.$prefix, + tokens-mdc-outlined-text-field.get-color-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-form-field.$prefix, + tokens-mat-form-field.get-color-tokens($theme) + ); } .mat-mdc-form-field.mat-accent { - @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix, - tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent)); - @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix, - tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent)); - @include token-utils.create-token-values(tokens-mat-form-field.$prefix, - tokens-mat-form-field.private-get-color-palette-color-tokens($theme, accent)); + @include token-utils.create-token-values( + tokens-mdc-filled-text-field.$prefix, + tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent) + ); + @include token-utils.create-token-values( + tokens-mdc-outlined-text-field.$prefix, + tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent) + ); + @include token-utils.create-token-values( + tokens-mat-form-field.$prefix, + tokens-mat-form-field.private-get-color-palette-color-tokens($theme, accent) + ); } .mat-mdc-form-field.mat-warn { - @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix, - tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn)); - @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix, - tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn)); - @include token-utils.create-token-values(tokens-mat-form-field.$prefix, - tokens-mat-form-field.private-get-color-palette-color-tokens($theme, warn)); + @include token-utils.create-token-values( + tokens-mdc-filled-text-field.$prefix, + tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn) + ); + @include token-utils.create-token-values( + tokens-mdc-outlined-text-field.$prefix, + tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn) + ); + @include token-utils.create-token-values( + tokens-mat-form-field.$prefix, + tokens-mat-form-field.private-get-color-palette-color-tokens($theme, warn) + ); } } } @@ -74,15 +93,20 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix, - tokens-mdc-filled-text-field.get-typography-tokens($theme)); - @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix, - tokens-mdc-outlined-text-field.get-typography-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-form-field.$prefix, - tokens-mat-form-field.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mdc-filled-text-field.$prefix, + tokens-mdc-filled-text-field.get-typography-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mdc-outlined-text-field.$prefix, + tokens-mdc-outlined-text-field.get-typography-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-form-field.$prefix, + tokens-mat-form-field.get-typography-tokens($theme) + ); } } } @@ -92,11 +116,12 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-form-field.$prefix, - tokens-mat-form-field.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-form-field.$prefix, + tokens-mat-form-field.get-density-tokens($theme) + ); } } } @@ -110,9 +135,20 @@ @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mdc-filled-text-field.$prefix, tokens: $filled-text-field-tokens), - (prefix: tokens-mdc-outlined-text-field.$prefix, tokens: $outlined-text-field-tokens), - (prefix: tokens-mat-form-field.$prefix, tokens: $form-field-tokens), + ( + namespace: tokens-mdc-filled-text-field.$prefix, + tokens: $filled-text-field-tokens, + prefix: 'filled-', + ), + ( + namespace: tokens-mdc-outlined-text-field.$prefix, + tokens: $outlined-text-field-tokens, + prefix: 'outlined-', + ), + ( + namespace: tokens-mat-form-field.$prefix, + tokens: $form-field-tokens, + ) ); } @@ -125,8 +161,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -143,16 +178,30 @@ @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); - $mdc-filled-text-field-tokens: - token-utils.get-tokens-for($tokens, tokens-mdc-filled-text-field.$prefix, $options...); - $mdc-outlined-text-field-tokens: - token-utils.get-tokens-for($tokens, tokens-mdc-outlined-text-field.$prefix, $options...); - $mat-form-field-tokens: - token-utils.get-tokens-for($tokens, tokens-mat-form-field.$prefix, $options...); - @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix, - $mdc-filled-text-field-tokens); - @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix, - $mdc-outlined-text-field-tokens); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); + $mdc-filled-text-field-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mdc-filled-text-field.$prefix, + $options... + ); + $mdc-outlined-text-field-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mdc-outlined-text-field.$prefix, + $options... + ); + $mat-form-field-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mat-form-field.$prefix, + $options... + ); + @include token-utils.create-token-values( + tokens-mdc-filled-text-field.$prefix, + $mdc-filled-text-field-tokens + ); + @include token-utils.create-token-values( + tokens-mdc-outlined-text-field.$prefix, + $mdc-outlined-text-field-tokens + ); @include token-utils.create-token-values(tokens-mat-form-field.$prefix, $mat-form-field-tokens); } diff --git a/src/material/grid-list/_grid-list-theme.scss b/src/material/grid-list/_grid-list-theme.scss index d7ac871c65f5..74d10b2dfce9 100644 --- a/src/material/grid-list/_grid-list-theme.scss +++ b/src/material/grid-list/_grid-list-theme.scss @@ -10,26 +10,27 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } @else { } - @else {} } // Include this empty mixin for consistency with the other components. @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); + } @else { } - @else {} } @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-grid-list.$prefix, - tokens-mat-grid-list.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-grid-list.$prefix, + tokens-mat-grid-list.get-typography-tokens($theme) + ); } } } @@ -37,14 +38,17 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } @else { } - @else {} } @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-grid-list.$prefix, tokens: tokens-mat-grid-list.get-token-slots()), + ( + namespace: tokens-mat-grid-list.$prefix, + tokens: tokens-mat-grid-list.get-token-slots(), + ) ); } @@ -52,8 +56,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-grid-list') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -70,9 +73,12 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-grid-list.$prefix, map.get($tokens, tokens-mat-grid-list.$prefix)); + tokens-mat-grid-list.$prefix, + map.get($tokens, tokens-mat-grid-list.$prefix) + ); } } diff --git a/src/material/icon/_icon-theme.scss b/src/material/icon/_icon-theme.scss index bee253f672eb..269322de6efa 100644 --- a/src/material/icon/_icon-theme.scss +++ b/src/material/icon/_icon-theme.scss @@ -17,8 +17,8 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } @else { } - @else {} } /// Outputs color theme styles for the mat-icon. @@ -29,11 +29,12 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-icon.$prefix, - tokens-mat-icon.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-icon.$prefix, + tokens-mat-icon.get-color-tokens($theme) + ); } .mat-icon { @@ -57,8 +58,8 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); + } @else { } - @else {} } /// Outputs density theme styles for the mat-icon. @@ -66,8 +67,8 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } @else { } - @else {} } /// Outputs the CSS variable values for the given tokens. @@ -75,7 +76,10 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-icon.$prefix, tokens: tokens-mat-icon.get-token-slots()), + ( + namespace: tokens-mat-icon.$prefix, + tokens: tokens-mat-icon.get-token-slots(), + ) ); } @@ -88,8 +92,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -106,7 +109,8 @@ @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); $mat-icon-tokens: token-utils.get-tokens-for($tokens, tokens-mat-icon.$prefix, $options...); @include token-utils.create-token-values(tokens-mat-icon.$prefix, $mat-icon-tokens); } diff --git a/src/material/input/_input-theme.scss b/src/material/input/_input-theme.scss index 8cac2a2a94f9..02ac63142b93 100644 --- a/src/material/input/_input-theme.scss +++ b/src/material/input/_input-theme.scss @@ -7,35 +7,38 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } @else { } - @else {} } @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); + } @else { } - @else {} } @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); + } @else { } - @else {} } @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } @else { } - @else {} } @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: '', tokens: ()), + ( + namespace: '', + tokens: (), + ) ); } @@ -43,8 +46,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-input') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -61,5 +63,6 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); } diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss index daa96261b4ab..aa987161b1ea 100644 --- a/src/material/list/_list-theme.scss +++ b/src/material/list/_list-theme.scss @@ -15,13 +15,16 @@ // Add default values for tokens not related to color, typography, or density. @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mdc-list.$prefix, tokens-mdc-list.get-unthemable-tokens()); + tokens-mdc-list.$prefix, + tokens-mdc-list.get-unthemable-tokens() + ); @include token-utils.create-token-values( - tokens-mat-list.$prefix, tokens-mat-list.get-unthemable-tokens()); + tokens-mat-list.$prefix, + tokens-mat-list.get-unthemable-tokens() + ); } } } @@ -29,26 +32,33 @@ @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mdc-list.$prefix, tokens-mdc-list.get-color-tokens($theme)); + tokens-mdc-list.$prefix, + tokens-mdc-list.get-color-tokens($theme) + ); @include token-utils.create-token-values( - tokens-mat-list.$prefix, tokens-mat-list.get-color-tokens($theme)); + tokens-mat-list.$prefix, + tokens-mat-list.get-color-tokens($theme) + ); } .mdc-list-item__start, .mdc-list-item__end { @include token-utils.create-token-values( - tokens-mdc-radio.$prefix, tokens-mdc-radio.get-color-tokens($theme, primary)); + tokens-mdc-radio.$prefix, + tokens-mdc-radio.get-color-tokens($theme, primary) + ); } .mat-accent { .mdc-list-item__start, .mdc-list-item__end { @include token-utils.create-token-values( - tokens-mdc-radio.$prefix, tokens-mdc-radio.get-color-tokens($theme, accent)); + tokens-mdc-radio.$prefix, + tokens-mdc-radio.get-color-tokens($theme, accent) + ); } } @@ -56,21 +66,29 @@ .mdc-list-item__start, .mdc-list-item__end { @include token-utils.create-token-values( - tokens-mdc-radio.$prefix, tokens-mdc-radio.get-color-tokens($theme, warn)); + tokens-mdc-radio.$prefix, + tokens-mdc-radio.get-color-tokens($theme, warn) + ); } } .mat-mdc-list-option { @include token-utils.create-token-values( - tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, primary)); + tokens-mdc-checkbox.$prefix, + tokens-mdc-checkbox.get-color-tokens($theme, primary) + ); } .mat-mdc-list-option.mat-accent { @include token-utils.create-token-values( - tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, accent)); + tokens-mdc-checkbox.$prefix, + tokens-mdc-checkbox.get-color-tokens($theme, accent) + ); } .mat-mdc-list-option.mat-warn { @include token-utils.create-token-values( - tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, warn)); + tokens-mdc-checkbox.$prefix, + tokens-mdc-checkbox.get-color-tokens($theme, warn) + ); } // There is no token for activated color on nav list. @@ -101,21 +119,26 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { $density-scale: inspection.get-theme-density($theme); @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mdc-list.$prefix, tokens-mdc-list.get-density-tokens($theme)); + tokens-mdc-list.$prefix, + tokens-mdc-list.get-density-tokens($theme) + ); @include token-utils.create-token-values( - tokens-mat-list.$prefix, tokens-mat-list.get-density-tokens($theme)); + tokens-mat-list.$prefix, + tokens-mat-list.get-density-tokens($theme) + ); } .mdc-list-item__start, .mdc-list-item__end { @include token-utils.create-token-values( - tokens-mdc-radio.$prefix, tokens-mdc-radio.get-density-tokens($theme)); + tokens-mdc-radio.$prefix, + tokens-mdc-radio.get-density-tokens($theme) + ); } // TODO(mmalerba): This is added to maintain the same style MDC used prior to the token-based @@ -126,25 +149,31 @@ &.mdc-list-item--with-leading-checkbox, &.mdc-list-item--with-leading-icon { &.mdc-list-item--with-one-line { - height: map.get(( - 0: 56px, - -1: 52px, - -2: 48px, - -3: 44px, - -4: 40px, - -5: 40px, - ), $density-scale); + height: map.get( + ( + 0: 56px, + -1: 52px, + -2: 48px, + -3: 44px, + -4: 40px, + -5: 40px, + ), + $density-scale + ); } &.mdc-list-item--with-two-lines { - height: map.get(( - 0: 72px, - -1: 68px, - -2: 64px, - -3: 60px, - -4: 56px, - -5: 56px, - ), $density-scale); + height: map.get( + ( + 0: 72px, + -1: 68px, + -2: 64px, + -3: 60px, + -4: 56px, + -5: 56px, + ), + $density-scale + ); } } } @@ -154,13 +183,16 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mdc-list.$prefix, tokens-mdc-list.get-typography-tokens($theme)); + tokens-mdc-list.$prefix, + tokens-mdc-list.get-typography-tokens($theme) + ); @include token-utils.create-token-values( - tokens-mat-list.$prefix, tokens-mat-list.get-typography-tokens($theme)); + tokens-mat-list.$prefix, + tokens-mat-list.get-typography-tokens($theme) + ); } // MDC does not have tokens for the subheader. @@ -175,8 +207,14 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-list.$prefix, tokens: tokens-mat-list.get-token-slots()), - (prefix: tokens-mdc-list.$prefix, tokens: tokens-mdc-list.get-token-slots()), + ( + namespace: tokens-mat-list.$prefix, + tokens: tokens-mat-list.get-token-slots(), + ), + ( + namespace: tokens-mdc-list.$prefix, + tokens: tokens-mdc-list.get-token-slots(), + ) ); } @@ -184,8 +222,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-list') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -202,7 +239,8 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); $mdc-list-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-list.$prefix); $mat-list-tokens: token-utils.get-tokens-for($tokens, tokens-mat-list.$prefix); @include token-utils.create-token-values(tokens-mdc-list.$prefix, $mdc-list-tokens); diff --git a/src/material/menu/_menu-theme.scss b/src/material/menu/_menu-theme.scss index 2855984022aa..6f058a1f72b8 100644 --- a/src/material/menu/_menu-theme.scss +++ b/src/material/menu/_menu-theme.scss @@ -10,11 +10,12 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-menu.$prefix, - tokens-mat-menu.get-unthemable-tokens()); + @include token-utils.create-token-values( + tokens-mat-menu.$prefix, + tokens-mat-menu.get-unthemable-tokens() + ); } } } @@ -22,11 +23,12 @@ @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-menu.$prefix, - tokens-mat-menu.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-menu.$prefix, + tokens-mat-menu.get-color-tokens($theme) + ); } } } @@ -34,11 +36,12 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-menu.$prefix, - tokens-mat-menu.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-menu.$prefix, + tokens-mat-menu.get-typography-tokens($theme) + ); } } } @@ -46,14 +49,17 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } @else { } - @else {} } @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-menu.$prefix, tokens: tokens-mat-menu.get-token-slots()), + ( + namespace: tokens-mat-menu.$prefix, + tokens: tokens-mat-menu.get-token-slots(), + ) ); } @@ -61,8 +67,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-menu') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -79,9 +84,12 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-menu.$prefix, map.get($tokens, tokens-mat-menu.$prefix)); + tokens-mat-menu.$prefix, + map.get($tokens, tokens-mat-menu.$prefix) + ); } } diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss index 2f7a1c5ed707..a51cc3a59a56 100644 --- a/src/material/paginator/_paginator-theme.scss +++ b/src/material/paginator/_paginator-theme.scss @@ -11,18 +11,19 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } @else { } - @else {} } @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-paginator.$prefix, - tokens-mat-paginator.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-paginator.$prefix, + tokens-mat-paginator.get-color-tokens($theme) + ); } } } @@ -30,27 +31,32 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-paginator.$prefix, - tokens-mat-paginator.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-paginator.$prefix, + tokens-mat-paginator.get-typography-tokens($theme) + ); } } } @mixin density($theme) { $density-scale: inspection.get-theme-density($theme); - $form-field-density: if((meta.type-of($density-scale) == 'number' and $density-scale >= -4) or - $density-scale == maximum, -4, $density-scale); + $form-field-density: if( + (meta.type-of($density-scale) == 'number' and $density-scale >= -4) or $density-scale == maximum, + -4, + $density-scale + ); @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-paginator.$prefix, - tokens-mat-paginator.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-paginator.$prefix, + tokens-mat-paginator.get-density-tokens($theme) + ); } } } @@ -58,7 +64,10 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-paginator.$prefix, tokens: tokens-mat-paginator.get-token-slots()), + ( + namespace: tokens-mat-paginator.$prefix, + tokens: tokens-mat-paginator.get-token-slots(), + ) ); } @@ -66,8 +75,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-paginator') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -84,9 +92,12 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-paginator.$prefix, map.get($tokens, tokens-mat-paginator.$prefix)); + tokens-mat-paginator.$prefix, + map.get($tokens, tokens-mat-paginator.$prefix) + ); } } diff --git a/src/material/progress-bar/_progress-bar-theme.scss b/src/material/progress-bar/_progress-bar-theme.scss index 8003fb0d80d3..4b3e1287805d 100644 --- a/src/material/progress-bar/_progress-bar-theme.scss +++ b/src/material/progress-bar/_progress-bar-theme.scss @@ -11,8 +11,7 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( @@ -38,8 +37,7 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { .mat-mdc-progress-bar { @include _palette-styles($theme, primary); @@ -56,12 +54,13 @@ /// Outputs typography theme styles for the mat-progress-bar. /// @param {Map} $theme The theme to generate typography styles for. -@mixin typography($theme) {} - +@mixin typography($theme) { +} /// Outputs density theme styles for the mat-progress-bar. /// @param {Map} $theme The theme to generate density styles for. -@mixin density($theme) {} +@mixin density($theme) { +} /// Outputs the CSS variable values for the given tokens. /// @param {Map} $tokens The token values to emit. @@ -70,7 +69,10 @@ @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mdc-linear-progress.$prefix, tokens: $linear-progress-tokens), + ( + namespace: tokens-mdc-linear-progress.$prefix, + tokens: $linear-progress-tokens, + ) ); } @@ -83,8 +85,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-progress-bar') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -101,7 +102,8 @@ @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); $tokens: token-utils.get-tokens-for($tokens, tokens-mdc-linear-progress.$prefix, $options...); @include token-utils.create-token-values(tokens-mdc-linear-progress.$prefix, $tokens); } diff --git a/src/material/progress-spinner/_progress-spinner-theme.scss b/src/material/progress-spinner/_progress-spinner-theme.scss index e57c4780427b..6b0e905be6ec 100644 --- a/src/material/progress-spinner/_progress-spinner-theme.scss +++ b/src/material/progress-spinner/_progress-spinner-theme.scss @@ -11,11 +11,12 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-circular-progress.$prefix, - tokens-mdc-circular-progress.get-unthemable-tokens()); + @include token-utils.create-token-values( + tokens-mdc-circular-progress.$prefix, + tokens-mdc-circular-progress.get-unthemable-tokens() + ); } } } @@ -28,20 +29,25 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-circular-progress.$prefix, - tokens-mdc-circular-progress.get-color-tokens($theme, primary)); + @include token-utils.create-token-values( + tokens-mdc-circular-progress.$prefix, + tokens-mdc-circular-progress.get-color-tokens($theme, primary) + ); .mat-accent { - @include token-utils.create-token-values(tokens-mdc-circular-progress.$prefix, - tokens-mdc-circular-progress.get-color-tokens($theme, accent)); + @include token-utils.create-token-values( + tokens-mdc-circular-progress.$prefix, + tokens-mdc-circular-progress.get-color-tokens($theme, accent) + ); } .mat-warn { - @include token-utils.create-token-values(tokens-mdc-circular-progress.$prefix, - tokens-mdc-circular-progress.get-color-tokens($theme, warn)); + @include token-utils.create-token-values( + tokens-mdc-circular-progress.$prefix, + tokens-mdc-circular-progress.get-color-tokens($theme, warn) + ); } } } @@ -64,7 +70,10 @@ @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mdc-circular-progress.$prefix, tokens: $circular-progress-tokens), + ( + namespace: tokens-mdc-circular-progress.$prefix, + tokens: $circular-progress-tokens, + ) ); } @@ -77,8 +86,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-progress-spinner') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -95,9 +103,15 @@ @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); - $mdc-circular-progress-tokens: - token-utils.get-tokens-for($tokens, tokens-mdc-circular-progress.$prefix, $options...); - @include token-utils.create-token-values(tokens-mdc-circular-progress.$prefix, - $mdc-circular-progress-tokens); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); + $mdc-circular-progress-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mdc-circular-progress.$prefix, + $options... + ); + @include token-utils.create-token-values( + tokens-mdc-circular-progress.$prefix, + $mdc-circular-progress-tokens + ); } diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss index 7e79d83f5973..a2986e5e609f 100644 --- a/src/material/radio/_radio-theme.scss +++ b/src/material/radio/_radio-theme.scss @@ -15,10 +15,14 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-radio.$prefix, - tokens-mdc-radio.get-unthemable-tokens()); - @include token-utils.create-token-values(tokens-mat-radio.$prefix, - tokens-mat-radio.get-unthemable-tokens()); + @include token-utils.create-token-values( + tokens-mdc-radio.$prefix, + tokens-mdc-radio.get-unthemable-tokens() + ); + @include token-utils.create-token-values( + tokens-mat-radio.$prefix, + tokens-mat-radio.get-unthemable-tokens() + ); } } } @@ -34,24 +38,36 @@ } @else { .mat-mdc-radio-button { &.mat-primary { - @include token-utils.create-token-values(tokens-mdc-radio.$prefix, - tokens-mdc-radio.get-color-tokens($theme, primary)); - @include token-utils.create-token-values(tokens-mat-radio.$prefix, - tokens-mat-radio.get-color-tokens($theme, primary)); + @include token-utils.create-token-values( + tokens-mdc-radio.$prefix, + tokens-mdc-radio.get-color-tokens($theme, primary) + ); + @include token-utils.create-token-values( + tokens-mat-radio.$prefix, + tokens-mat-radio.get-color-tokens($theme, primary) + ); } &.mat-accent { - @include token-utils.create-token-values(tokens-mdc-radio.$prefix, - tokens-mdc-radio.get-color-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-radio.$prefix, - tokens-mat-radio.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mdc-radio.$prefix, + tokens-mdc-radio.get-color-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-radio.$prefix, + tokens-mat-radio.get-color-tokens($theme) + ); } &.mat-warn { - @include token-utils.create-token-values(tokens-mdc-radio.$prefix, - tokens-mdc-radio.get-color-tokens($theme, warn)); - @include token-utils.create-token-values(tokens-mat-radio.$prefix, - tokens-mat-radio.get-color-tokens($theme, warn)); + @include token-utils.create-token-values( + tokens-mdc-radio.$prefix, + tokens-mdc-radio.get-color-tokens($theme, warn) + ); + @include token-utils.create-token-values( + tokens-mat-radio.$prefix, + tokens-mat-radio.get-color-tokens($theme, warn) + ); } } } @@ -64,10 +80,14 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-radio.$prefix, - tokens-mdc-radio.get-typography-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-radio.$prefix, - tokens-mat-radio.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mdc-radio.$prefix, + tokens-mdc-radio.get-typography-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-radio.$prefix, + tokens-mat-radio.get-typography-tokens($theme) + ); } } } @@ -81,10 +101,14 @@ $density-scale: inspection.get-theme-density($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-radio.$prefix, - tokens-mdc-radio.get-density-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-radio.$prefix, - tokens-mat-radio.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mdc-radio.$prefix, + tokens-mdc-radio.get-density-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-radio.$prefix, + tokens-mat-radio.get-density-tokens($theme) + ); } } } @@ -95,11 +119,11 @@ @include token-utils.batch-create-token-values( $tokens, ( - prefix: tokens-mdc-radio.$prefix, + namespace: tokens-mdc-radio.$prefix, tokens: tokens-mdc-radio.get-token-slots(), ), ( - prefix: tokens-mat-radio.$prefix, + namespace: tokens-mat-radio.$prefix, tokens: tokens-mat-radio.get-token-slots(), ) ); diff --git a/src/material/select/_select-theme.scss b/src/material/select/_select-theme.scss index dd3d4aac1a99..7c54e743d98c 100644 --- a/src/material/select/_select-theme.scss +++ b/src/material/select/_select-theme.scss @@ -13,8 +13,7 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { $mat-tokens: tokens-mat-select.get-unthemable-tokens(); @include token-utils.create-token-values(tokens-mat-select.$prefix, $mat-tokens); @@ -30,20 +29,25 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-select.$prefix, - tokens-mat-select.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-select.$prefix, + tokens-mat-select.get-color-tokens($theme) + ); .mat-mdc-form-field.mat-accent { - @include token-utils.create-token-values(tokens-mat-select.$prefix, - tokens-mat-select.get-color-tokens($theme, accent)); + @include token-utils.create-token-values( + tokens-mat-select.$prefix, + tokens-mat-select.get-color-tokens($theme, accent) + ); } .mat-mdc-form-field.mat-warn { - @include token-utils.create-token-values(tokens-mat-select.$prefix, - tokens-mat-select.get-color-tokens($theme, warn)); + @include token-utils.create-token-values( + tokens-mat-select.$prefix, + tokens-mat-select.get-color-tokens($theme, warn) + ); } } } @@ -54,11 +58,12 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-select.$prefix, - tokens-mat-select.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-select.$prefix, + tokens-mat-select.get-typography-tokens($theme) + ); } } } @@ -68,11 +73,12 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-select.$prefix, - tokens-mat-select.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-select.$prefix, + tokens-mat-select.get-density-tokens($theme) + ); } } } @@ -82,7 +88,10 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-select.$prefix, tokens: tokens-mat-select.get-token-slots()), + ( + namespace: tokens-mat-select.$prefix, + tokens: tokens-mat-select.get-token-slots(), + ) ); } @@ -95,8 +104,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-select') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -113,7 +121,8 @@ @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); $mat-select-tokens: token-utils.get-tokens-for($tokens, tokens-mat-select.$prefix, $options...); @include token-utils.create-token-values(tokens-mat-select.$prefix, $mat-select-tokens); } diff --git a/src/material/sidenav/_sidenav-theme.scss b/src/material/sidenav/_sidenav-theme.scss index bc1f5f5683dc..887305f4d3ba 100644 --- a/src/material/sidenav/_sidenav-theme.scss +++ b/src/material/sidenav/_sidenav-theme.scss @@ -9,11 +9,12 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-unthemable-tokens()); + tokens-mat-sidenav.$prefix, + tokens-mat-sidenav.get-unthemable-tokens() + ); } } } @@ -21,11 +22,12 @@ @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-sidenav.$prefix, - tokens-mat-sidenav.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-sidenav.$prefix, + tokens-mat-sidenav.get-color-tokens($theme) + ); } } } @@ -33,21 +35,24 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); + } @else { } - @else {} } @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } @else { } - @else {} } @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-sidenav.$prefix, tokens: tokens-mat-sidenav.get-token-slots()), + ( + namespace: tokens-mat-sidenav.$prefix, + tokens: tokens-mat-sidenav.get-token-slots(), + ) ); } @@ -55,8 +60,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-sidenav') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -73,9 +77,12 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-sidenav.$prefix, map.get($tokens, tokens-mat-sidenav.$prefix)); + tokens-mat-sidenav.$prefix, + map.get($tokens, tokens-mat-sidenav.$prefix) + ); } } diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss index 5b569b1a748c..d6a317ad3ca6 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.scss @@ -15,12 +15,16 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-switch.$prefix, - tokens-mdc-switch.get-unthemable-tokens()); + @include token-utils.create-token-values( + tokens-mdc-switch.$prefix, + tokens-mdc-switch.get-unthemable-tokens() + ); .mat-mdc-slide-toggle { - @include token-utils.create-token-values(tokens-mat-switch.$prefix, - tokens-mat-switch.get-unthemable-tokens()); + @include token-utils.create-token-values( + tokens-mat-switch.$prefix, + tokens-mat-switch.get-unthemable-tokens() + ); } } } @@ -39,8 +43,10 @@ // Add values for MDC slide toggles tokens @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-switch.$prefix, - tokens-mdc-switch.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mdc-switch.$prefix, + tokens-mdc-switch.get-color-tokens($theme) + ); & { // TODO(wagnermaciel): Use our token system to define this css variable. @@ -52,18 +58,24 @@ } .mat-mdc-slide-toggle { - @include token-utils.create-token-values(tokens-mat-switch.$prefix, - tokens-mat-switch.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-switch.$prefix, + tokens-mat-switch.get-color-tokens($theme) + ); // Change the color palette related tokens to accent or warn if applicable &.mat-accent { - @include token-utils.create-token-values(tokens-mdc-switch.$prefix, - tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent)); + @include token-utils.create-token-values( + tokens-mdc-switch.$prefix, + tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent) + ); } &.mat-warn { - @include token-utils.create-token-values(tokens-mdc-switch.$prefix, - tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn)); + @include token-utils.create-token-values( + tokens-mdc-switch.$prefix, + tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn) + ); } } } @@ -77,12 +89,16 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-switch.$prefix, - tokens-mdc-switch.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mdc-switch.$prefix, + tokens-mdc-switch.get-typography-tokens($theme) + ); .mat-mdc-slide-toggle { - @include token-utils.create-token-values(tokens-mat-switch.$prefix, - tokens-mat-switch.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-switch.$prefix, + tokens-mat-switch.get-typography-tokens($theme) + ); } } } @@ -95,12 +111,16 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-switch.$prefix, - tokens-mdc-switch.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mdc-switch.$prefix, + tokens-mdc-switch.get-density-tokens($theme) + ); .mat-mdc-slide-toggle { - @include token-utils.create-token-values(tokens-mat-switch.$prefix, - tokens-mat-switch.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-switch.$prefix, + tokens-mat-switch.get-density-tokens($theme) + ); } } } @@ -112,11 +132,11 @@ @include token-utils.batch-create-token-values( $tokens, ( - prefix: tokens-mat-switch.$prefix, + namespace: tokens-mat-switch.$prefix, tokens: tokens-mat-switch.get-token-slots(), ), ( - prefix: tokens-mdc-switch.$prefix, + namespace: tokens-mdc-switch.$prefix, tokens: tokens-mdc-switch.get-token-slots(), ) ); diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss index 58929ed25473..40fccd49cb3e 100644 --- a/src/material/slider/_slider-theme.scss +++ b/src/material/slider/_slider-theme.scss @@ -13,13 +13,16 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-slider.$prefix, - tokens-mdc-slider.get-unthemable-tokens()); - @include token-utils.create-token-values(tokens-mat-slider.$prefix, - tokens-mat-slider.get-unthemable-tokens()); + @include token-utils.create-token-values( + tokens-mdc-slider.$prefix, + tokens-mdc-slider.get-unthemable-tokens() + ); + @include token-utils.create-token-values( + tokens-mat-slider.$prefix, + tokens-mat-slider.get-unthemable-tokens() + ); } } } @@ -32,57 +35,68 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-slider.$prefix, - tokens-mdc-slider.get-color-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-slider.$prefix, - tokens-mat-slider.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mdc-slider.$prefix, + tokens-mdc-slider.get-color-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-slider.$prefix, + tokens-mat-slider.get-color-tokens($theme) + ); .mat-accent { - @include token-utils.create-token-values(tokens-mdc-slider.$prefix, - tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent)); - @include token-utils.create-token-values(tokens-mat-slider.$prefix, - tokens-mat-slider.private-get-color-palette-color-tokens($theme, accent)); + @include token-utils.create-token-values( + tokens-mdc-slider.$prefix, + tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent) + ); + @include token-utils.create-token-values( + tokens-mat-slider.$prefix, + tokens-mat-slider.private-get-color-palette-color-tokens($theme, accent) + ); } .mat-warn { - @include token-utils.create-token-values(tokens-mdc-slider.$prefix, - tokens-mdc-slider.private-get-color-palette-color-tokens($theme, warn)); - @include token-utils.create-token-values(tokens-mat-slider.$prefix, - tokens-mat-slider.private-get-color-palette-color-tokens($theme, warn)); + @include token-utils.create-token-values( + tokens-mdc-slider.$prefix, + tokens-mdc-slider.private-get-color-palette-color-tokens($theme, warn) + ); + @include token-utils.create-token-values( + tokens-mat-slider.$prefix, + tokens-mat-slider.private-get-color-palette-color-tokens($theme, warn) + ); } } } } - /// Outputs typography theme styles for the mat-slider. /// @param {Map} $theme The theme to generate typography styles for. @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-slider.$prefix, - tokens-mdc-slider.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mdc-slider.$prefix, + tokens-mdc-slider.get-typography-tokens($theme) + ); } } } - /// Outputs density theme styles for the mat-slider. /// @param {Map} $theme The theme to generate density styles for. @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mdc-slider.$prefix, - tokens-mdc-slider.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mdc-slider.$prefix, + tokens-mdc-slider.get-density-tokens($theme) + ); } } } @@ -92,8 +106,14 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-slider.$prefix, tokens: tokens-mat-slider.get-token-slots()), - (prefix: tokens-mdc-slider.$prefix, tokens: tokens-mdc-slider.get-token-slots()), + ( + namespace: tokens-mat-slider.$prefix, + tokens: tokens-mat-slider.get-token-slots(), + ), + ( + namespace: tokens-mdc-slider.$prefix, + tokens: tokens-mdc-slider.get-token-slots(), + ) ); } @@ -106,8 +126,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-slider') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -124,7 +143,8 @@ @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); $mdc-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-slider.$prefix, $options...); $mat-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mat-slider.$prefix, $options...); @include token-utils.create-token-values(tokens-mdc-slider.$prefix, $mdc-slider-tokens); diff --git a/src/material/snack-bar/_snack-bar-theme.scss b/src/material/snack-bar/_snack-bar-theme.scss index 76ca26de5b18..808d6d1e86c6 100644 --- a/src/material/snack-bar/_snack-bar-theme.scss +++ b/src/material/snack-bar/_snack-bar-theme.scss @@ -11,8 +11,7 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( @@ -26,8 +25,7 @@ @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( tokens-mdc-snack-bar.$prefix, @@ -44,8 +42,7 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( tokens-mdc-snack-bar.$prefix, @@ -55,15 +52,22 @@ } } -@mixin density($theme) {} +@mixin density($theme) { +} /// Outputs the CSS variable values for the given tokens. /// @param {Map} $tokens The token values to emit. @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mdc-snack-bar.$prefix, tokens: tokens-mdc-snack-bar.get-token-slots()), - (prefix: tokens-mat-snack-bar.$prefix, tokens: tokens-mat-snack-bar.get-token-slots()), + ( + namespace: tokens-mdc-snack-bar.$prefix, + tokens: tokens-mdc-snack-bar.get-token-slots(), + ), + ( + namespace: tokens-mat-snack-bar.$prefix, + tokens: tokens-mat-snack-bar.get-token-slots(), + ) ); } @@ -71,8 +75,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-snack-bar') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -89,11 +92,16 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mdc-snack-bar.$prefix, map.get($tokens, tokens-mdc-snack-bar.$prefix)); + tokens-mdc-snack-bar.$prefix, + map.get($tokens, tokens-mdc-snack-bar.$prefix) + ); @include token-utils.create-token-values( - tokens-mat-snack-bar.$prefix, map.get($tokens, tokens-mat-snack-bar.$prefix)); + tokens-mat-snack-bar.$prefix, + map.get($tokens, tokens-mat-snack-bar.$prefix) + ); } } diff --git a/src/material/sort/_sort-theme.scss b/src/material/sort/_sort-theme.scss index b855a57e2b35..4b308b11b1f5 100644 --- a/src/material/sort/_sort-theme.scss +++ b/src/material/sort/_sort-theme.scss @@ -10,18 +10,19 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } @else { } - @else {} } @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-sort.$prefix, - tokens-mat-sort.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-sort.$prefix, + tokens-mat-sort.get-color-tokens($theme) + ); } } } @@ -29,11 +30,12 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-sort.$prefix, - tokens-mat-sort.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-sort.$prefix, + tokens-mat-sort.get-typography-tokens($theme) + ); } } } @@ -41,11 +43,12 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-sort.$prefix, - tokens-mat-sort.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-sort.$prefix, + tokens-mat-sort.get-density-tokens($theme) + ); } } } @@ -53,7 +56,10 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-sort.$prefix, tokens: tokens-mat-sort.get-token-slots()), + ( + namespace: tokens-mat-sort.$prefix, + tokens: tokens-mat-sort.get-token-slots(), + ) ); } @@ -61,8 +67,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-sort') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -79,9 +84,12 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-sort.$prefix, map.get($tokens, tokens-mat-sort.$prefix)); + tokens-mat-sort.$prefix, + map.get($tokens, tokens-mat-sort.$prefix) + ); } } diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss index 590d32e1c747..dfe1b5c54f45 100644 --- a/src/material/stepper/_stepper-theme.scss +++ b/src/material/stepper/_stepper-theme.scss @@ -12,8 +12,8 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } @else { } - @else {} } /// Outputs color theme styles for mat-stepper. @@ -24,20 +24,25 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-stepper.$prefix, - tokens-mat-stepper.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-stepper.$prefix, + tokens-mat-stepper.get-color-tokens($theme) + ); .mat-step-header.mat-accent { - @include token-utils.create-token-values(tokens-mat-stepper.$prefix, - tokens-mat-stepper.private-get-color-palette-color-tokens($theme, accent)); + @include token-utils.create-token-values( + tokens-mat-stepper.$prefix, + tokens-mat-stepper.private-get-color-palette-color-tokens($theme, accent) + ); } .mat-step-header.mat-warn { - @include token-utils.create-token-values(tokens-mat-stepper.$prefix, - tokens-mat-stepper.private-get-color-palette-color-tokens($theme, warn)); + @include token-utils.create-token-values( + tokens-mat-stepper.$prefix, + tokens-mat-stepper.private-get-color-palette-color-tokens($theme, warn) + ); } } } @@ -48,11 +53,12 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-stepper.$prefix, - tokens-mat-stepper.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-stepper.$prefix, + tokens-mat-stepper.get-typography-tokens($theme) + ); } } } @@ -62,11 +68,12 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-stepper.$prefix, - tokens-mat-stepper.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-stepper.$prefix, + tokens-mat-stepper.get-density-tokens($theme) + ); } } } @@ -76,7 +83,10 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-stepper.$prefix, tokens: tokens-mat-stepper.get-token-slots()), + ( + namespace: tokens-mat-stepper.$prefix, + tokens: tokens-mat-stepper.get-token-slots(), + ) ); } @@ -85,12 +95,11 @@ /// @param {ArgList} Additional optional arguments (only supported for M3 themes): /// $color-variant: The color variant to use for the stepper: primary, secondary, /// tertiary, or error (If not specified, primary color values will be used). -@mixin theme($theme, $options...) { +@mixin theme($theme, $options...) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-stepper') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -107,14 +116,14 @@ @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { $mat-stepper-tokens: token-utils.get-tokens-for( $tokens, tokens-mat-stepper.$prefix, $options... ); - @include token-utils.create-token-values( - tokens-mat-stepper.$prefix, $mat-stepper-tokens); + @include token-utils.create-token-values(tokens-mat-stepper.$prefix, $mat-stepper-tokens); } } diff --git a/src/material/table/_table-theme.scss b/src/material/table/_table-theme.scss index 06a5292a8515..ccbf0d530d5a 100644 --- a/src/material/table/_table-theme.scss +++ b/src/material/table/_table-theme.scss @@ -10,11 +10,12 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( - tokens-mat-table.$prefix, tokens-mat-table.get-unthemable-tokens()); + tokens-mat-table.$prefix, + tokens-mat-table.get-unthemable-tokens() + ); } } } @@ -22,11 +23,12 @@ @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-table.$prefix, - tokens-mat-table.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-table.$prefix, + tokens-mat-table.get-color-tokens($theme) + ); } } } @@ -34,11 +36,12 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-table.$prefix, - tokens-mat-table.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-table.$prefix, + tokens-mat-table.get-typography-tokens($theme) + ); } } } @@ -46,11 +49,12 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-table.$prefix, - tokens-mat-table.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-table.$prefix, + tokens-mat-table.get-density-tokens($theme) + ); } } } @@ -58,7 +62,10 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-table.$prefix, tokens: tokens-mat-table.get-token-slots()), + ( + namespace: tokens-mat-table.$prefix, + tokens: tokens-mat-table.get-token-slots(), + ) ); } @@ -66,8 +73,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-table') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -84,9 +90,12 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-table.$prefix, map.get($tokens, tokens-mat-table.$prefix)); + tokens-mat-table.$prefix, + map.get($tokens, tokens-mat-table.$prefix) + ); } } diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss index 348139743a32..6ee62b5c2730 100644 --- a/src/material/tabs/_tabs-theme.scss +++ b/src/material/tabs/_tabs-theme.scss @@ -15,19 +15,24 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( tokens-mdc-secondary-navigation-tab.$prefix, - tokens-mdc-secondary-navigation-tab.get-unthemable-tokens()); + tokens-mdc-secondary-navigation-tab.get-unthemable-tokens() + ); @include token-utils.create-token-values( - tokens-mdc-tab-indicator.$prefix, tokens-mdc-tab-indicator.get-unthemable-tokens()); + tokens-mdc-tab-indicator.$prefix, + tokens-mdc-tab-indicator.get-unthemable-tokens() + ); @include token-utils.create-token-values( - tokens-mat-tab-header.$prefix, tokens-mat-tab-header.get-unthemable-tokens()); + tokens-mat-tab-header.$prefix, + tokens-mat-tab-header.get-unthemable-tokens() + ); @include token-utils.create-token-values( tokens-mat-tab-header-with-background.$prefix, - tokens-mat-tab-header-with-background.get-unthemable-tokens()); + tokens-mat-tab-header-with-background.get-unthemable-tokens() + ); } } } @@ -40,9 +45,9 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { - .mat-mdc-tab-group, .mat-mdc-tab-nav-bar { + } @else { + .mat-mdc-tab-group, + .mat-mdc-tab-nav-bar { @include _palette-styles($theme, primary); &.mat-accent { @@ -69,8 +74,10 @@ } @mixin _background-styles($theme, $palette-name) { - @include token-utils.create-token-values(tokens-mat-tab-header-with-background.$prefix, - tokens-mat-tab-header-with-background.get-color-tokens($theme, $palette-name)); + @include token-utils.create-token-values( + tokens-mat-tab-header-with-background.$prefix, + tokens-mat-tab-header-with-background.get-color-tokens($theme, $palette-name) + ); } @mixin _palette-styles($theme, $palette-name) { @@ -80,9 +87,12 @@ ); @include token-utils.create-token-values( tokens-mdc-tab-indicator.$prefix, - tokens-mdc-tab-indicator.get-color-tokens($theme, $palette-name)); - @include token-utils.create-token-values(tokens-mat-tab-header.$prefix, - tokens-mat-tab-header.get-color-tokens($theme, $palette-name)); + tokens-mdc-tab-indicator.get-color-tokens($theme, $palette-name) + ); + @include token-utils.create-token-values( + tokens-mat-tab-header.$prefix, + tokens-mat-tab-header.get-color-tokens($theme, $palette-name) + ); } /// Outputs typography theme styles for the mat-tab. @@ -90,18 +100,24 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { .mat-mdc-tab-header { @include token-utils.create-token-values( tokens-mdc-secondary-navigation-tab.$prefix, - tokens-mdc-secondary-navigation-tab.get-typography-tokens($theme)); + tokens-mdc-secondary-navigation-tab.get-typography-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mdc-tab-indicator.$prefix, + tokens-mdc-tab-indicator.get-typography-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-tab-header.$prefix, + tokens-mat-tab-header.get-typography-tokens($theme) + ); @include token-utils.create-token-values( - tokens-mdc-tab-indicator.$prefix, tokens-mdc-tab-indicator.get-typography-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-tab-header.$prefix, - tokens-mat-tab-header.get-typography-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-tab-header-with-background.$prefix, - tokens-mat-tab-header-with-background.get-typography-tokens($theme)); + tokens-mat-tab-header-with-background.$prefix, + tokens-mat-tab-header-with-background.get-typography-tokens($theme) + ); } } } @@ -111,18 +127,24 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { .mat-mdc-tab-header { @include token-utils.create-token-values( tokens-mdc-secondary-navigation-tab.$prefix, - tokens-mdc-secondary-navigation-tab.get-density-tokens($theme)); + tokens-mdc-secondary-navigation-tab.get-density-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mdc-tab-indicator.$prefix, + tokens-mdc-tab-indicator.get-density-tokens($theme) + ); @include token-utils.create-token-values( - tokens-mdc-tab-indicator.$prefix, tokens-mdc-tab-indicator.get-density-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-tab-header.$prefix, - tokens-mat-tab-header.get-density-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-tab-header-with-background.$prefix, - tokens-mat-tab-header-with-background.get-density-tokens($theme)); + tokens-mat-tab-header.$prefix, + tokens-mat-tab-header.get-density-tokens($theme) + ); + @include token-utils.create-token-values( + tokens-mat-tab-header-with-background.$prefix, + tokens-mat-tab-header-with-background.get-density-tokens($theme) + ); } } } @@ -137,13 +159,22 @@ @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mdc-secondary-navigation-tab.$prefix, tokens: $tab-tokens), - (prefix: tokens-mdc-tab-indicator.$prefix, tokens: $tab-indicator-tokens), - (prefix: tokens-mat-tab-header.$prefix, tokens: $tab-header-tokens), ( - prefix: tokens-mat-tab-header-with-background.$prefix, - tokens: $tab-header-with-background-tokens, + namespace: tokens-mdc-secondary-navigation-tab.$prefix, + tokens: $tab-tokens, + ), + ( + namespace: tokens-mdc-tab-indicator.$prefix, + tokens: $tab-indicator-tokens, ), + ( + namespace: tokens-mat-tab-header.$prefix, + tokens: $tab-header-tokens, + ), + ( + namespace: tokens-mat-tab-header-with-background.$prefix, + tokens: $tab-header-with-background-tokens, + ) ); } @@ -156,8 +187,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-tabs') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -174,18 +204,31 @@ @mixin _theme-from-tokens($tokens, $options...) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); $mdc-tab-indicator-tokens: token-utils.get-tokens-for( - $tokens, tokens-mdc-tab-indicator.$prefix, $options...); + $tokens, + tokens-mdc-tab-indicator.$prefix, + $options... + ); $mat-tab-header-tokens: token-utils.get-tokens-for( - $tokens, tokens-mat-tab-header.$prefix, $options...); + $tokens, + tokens-mat-tab-header.$prefix, + $options... + ); // Don't pass $options here, because the mdc-tab doesn't have color variants, // only the mdc-tab-indicator and mat-tab-header do. - $mdc-secondary-navigation-tab-tokens: - token-utils.get-tokens-for($tokens, tokens-mdc-secondary-navigation-tab.$prefix); - @include token-utils.create-token-values(tokens-mdc-secondary-navigation-tab.$prefix, - $mdc-secondary-navigation-tab-tokens); - @include token-utils.create-token-values(tokens-mdc-tab-indicator.$prefix, - $mdc-tab-indicator-tokens); + $mdc-secondary-navigation-tab-tokens: token-utils.get-tokens-for( + $tokens, + tokens-mdc-secondary-navigation-tab.$prefix + ); + @include token-utils.create-token-values( + tokens-mdc-secondary-navigation-tab.$prefix, + $mdc-secondary-navigation-tab-tokens + ); + @include token-utils.create-token-values( + tokens-mdc-tab-indicator.$prefix, + $mdc-tab-indicator-tokens + ); @include token-utils.create-token-values(tokens-mat-tab-header.$prefix, $mat-tab-header-tokens); } diff --git a/src/material/timepicker/_timepicker-theme.scss b/src/material/timepicker/_timepicker-theme.scss index 769ffa9eb0d4..ac83cd6e009d 100644 --- a/src/material/timepicker/_timepicker-theme.scss +++ b/src/material/timepicker/_timepicker-theme.scss @@ -13,11 +13,12 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-timepicker.$prefix, - tokens-mat-timepicker.get-unthemable-tokens()); + @include token-utils.create-token-values( + tokens-mat-timepicker.$prefix, + tokens-mat-timepicker.get-unthemable-tokens() + ); } } } @@ -30,11 +31,12 @@ @mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-timepicker.$prefix, - tokens-mat-timepicker.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-timepicker.$prefix, + tokens-mat-timepicker.get-color-tokens($theme) + ); } } } @@ -44,11 +46,12 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-timepicker.$prefix, - tokens-mat-timepicker.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-timepicker.$prefix, + tokens-mat-timepicker.get-typography-tokens($theme) + ); } } } @@ -58,11 +61,12 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-timepicker.$prefix, - tokens-mat-timepicker.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-timepicker.$prefix, + tokens-mat-timepicker.get-density-tokens($theme) + ); } } } @@ -72,7 +76,10 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-timepicker.$prefix, tokens: tokens-mat-timepicker.get-token-slots()), + ( + namespace: tokens-mat-timepicker.$prefix, + tokens: tokens-mat-timepicker.get-token-slots(), + ) ); } @@ -85,8 +92,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-timepicker') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -103,9 +109,12 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-timepicker.$prefix, map.get($tokens, tokens-mat-timepicker.$prefix)); + tokens-mat-timepicker.$prefix, + map.get($tokens, tokens-mat-timepicker.$prefix) + ); } } diff --git a/src/material/toolbar/_toolbar-theme.scss b/src/material/toolbar/_toolbar-theme.scss index a920caa8fb3f..b3eb67d23f73 100644 --- a/src/material/toolbar/_toolbar-theme.scss +++ b/src/material/toolbar/_toolbar-theme.scss @@ -17,16 +17,18 @@ ); } -@mixin base($theme) {} +@mixin base($theme) { +} @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-toolbar.$prefix, - tokens-mat-toolbar.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-toolbar.$prefix, + tokens-mat-toolbar.get-color-tokens($theme) + ); } .mat-toolbar { @@ -48,14 +50,15 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { // TODO(mmalerba): Stop calling this and resolve resulting screen diffs. $theme: inspection.private-get-typography-back-compat-theme($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-toolbar.$prefix, - tokens-mat-toolbar.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-toolbar.$prefix, + tokens-mat-toolbar.get-typography-tokens($theme) + ); } } } @@ -63,11 +66,12 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-toolbar.$prefix, - tokens-mat-toolbar.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-toolbar.$prefix, + tokens-mat-toolbar.get-density-tokens($theme) + ); } } } @@ -77,7 +81,10 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-toolbar.$prefix, tokens: tokens-mat-toolbar.get-token-slots()), + ( + namespace: tokens-mat-toolbar.$prefix, + tokens: tokens-mat-toolbar.get-token-slots(), + ) ); } @@ -85,8 +92,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-toolbar') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -103,9 +109,12 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { - @include token-utils.create-token-values(tokens-mat-toolbar.$prefix, - map.get($tokens, tokens-mat-toolbar.$prefix)); + @include token-utils.create-token-values( + tokens-mat-toolbar.$prefix, + map.get($tokens, tokens-mat-toolbar.$prefix) + ); } } diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss index 5615194ada4b..8b70a532c82a 100644 --- a/src/material/tooltip/_tooltip-theme.scss +++ b/src/material/tooltip/_tooltip-theme.scss @@ -9,8 +9,7 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); - } - @else { + } @else { // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( @@ -24,8 +23,7 @@ @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( tokens-mdc-plain-tooltip.$prefix, @@ -38,8 +36,7 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( tokens-mdc-plain-tooltip.$prefix, @@ -52,8 +49,7 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values( tokens-mdc-plain-tooltip.$prefix, @@ -66,7 +62,10 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mdc-plain-tooltip.$prefix, tokens: tokens-mdc-plain-tooltip.get-token-slots()), + ( + namespace: tokens-mdc-plain-tooltip.$prefix, + tokens: tokens-mdc-plain-tooltip.get-token-slots(), + ) ); } @@ -74,8 +73,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-tooltip') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -92,7 +90,8 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if $tokens != () { $tokens: token-utils.get-tokens-for($tokens, tokens-mdc-plain-tooltip.$prefix); @include token-utils.create-token-values(tokens-mdc-plain-tooltip.$prefix, $tokens); diff --git a/src/material/tree/_tree-theme.scss b/src/material/tree/_tree-theme.scss index 3f941e1c8b46..341237a41224 100644 --- a/src/material/tree/_tree-theme.scss +++ b/src/material/tree/_tree-theme.scss @@ -10,18 +10,19 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } @else { } - @else {} } @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); - } - @else { + } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-tree.$prefix, - tokens-mat-tree.get-color-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-tree.$prefix, + tokens-mat-tree.get-color-tokens($theme) + ); } } } @@ -29,14 +30,15 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); - } - @else { + } @else { // TODO(mmalerba): Stop calling this and resolve resulting screen diffs. $theme: inspection.private-get-typography-back-compat-theme($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-tree.$prefix, - tokens-mat-tree.get-typography-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-tree.$prefix, + tokens-mat-tree.get-typography-tokens($theme) + ); } } } @@ -44,13 +46,14 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); - } - @else { + } @else { $density-scale: inspection.get-theme-density($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-tree.$prefix, - tokens-mat-tree.get-density-tokens($theme)); + @include token-utils.create-token-values( + tokens-mat-tree.$prefix, + tokens-mat-tree.get-density-tokens($theme) + ); } } } @@ -58,7 +61,10 @@ @mixin overrides($tokens: ()) { @include token-utils.batch-create-token-values( $tokens, - (prefix: tokens-mat-tree.$prefix, tokens: tokens-mat-tree.get-token-slots()), + ( + namespace: tokens-mat-tree.$prefix, + tokens: tokens-mat-tree.get-token-slots(), + ) ); } @@ -66,8 +72,7 @@ @include theming.private-check-duplicate-theme-styles($theme, 'mat-tree') { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme)); - } - @else { + } @else { @include base($theme); @if inspection.theme-has($theme, color) { @include color($theme); @@ -84,9 +89,12 @@ @mixin _theme-from-tokens($tokens) { @include validation.selector-defined( - 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); + 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' + ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-tree.$prefix, map.get($tokens, tokens-mat-tree.$prefix)); + tokens-mat-tree.$prefix, + map.get($tokens, tokens-mat-tree.$prefix) + ); } }