diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss index fcc4a53ca8e8..709199c40f82 100644 --- a/src/material/autocomplete/_autocomplete-theme.scss +++ b/src/material/autocomplete/_autocomplete-theme.scss @@ -71,10 +71,10 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-autocomplete.$prefix, + namespace: tokens-mat-autocomplete.$prefix, tokens: tokens-mat-autocomplete.get-token-slots(), ) ); diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss index 1d517e021bd3..c32bdb4d0f20 100644 --- a/src/material/badge/_badge-theme.scss +++ b/src/material/badge/_badge-theme.scss @@ -82,10 +82,10 @@ /// 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( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-badge.$prefix, + namespace: tokens-mat-badge.$prefix, tokens: tokens-mat-badge.get-token-slots(), ) ); diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss index ec29cd693a8f..60bb8b2e3df9 100644 --- a/src/material/bottom-sheet/_bottom-sheet-theme.scss +++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss @@ -54,10 +54,10 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-bottom-sheet.$prefix, + namespace: tokens-mat-bottom-sheet.$prefix, tokens: tokens-mat-bottom-sheet.get-token-slots(), ) ); diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss index b9706e511908..4ba25baa8754 100644 --- a/src/material/button-toggle/_button-toggle-theme.scss +++ b/src/material/button-toggle/_button-toggle-theme.scss @@ -92,14 +92,10 @@ @mixin overrides($tokens: ()) { $legacy-tokens: tokens-mat-legacy-button-toggle.get-token-slots(); $standard-tokens: tokens-mat-standard-button-toggle.get-token-slots(); - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-legacy-button-toggle.$prefix, - tokens: $legacy-tokens, - ), - ( - prefix: tokens-mat-standard-button-toggle.$prefix, + namespace: tokens-mat-standard-button-toggle.$prefix, tokens: $standard-tokens, ) ); diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss index cdf4cbf6e31d..f1dac5fed58c 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -359,39 +359,47 @@ $mdc-text-button-tokens: tokens-mdc-text-button.get-token-slots(); $mat-text-button-tokens: tokens-mat-text-button.get-token-slots(); - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mdc-filled-button.$prefix, + namespace: tokens-mdc-filled-button.$prefix, tokens: $mdc-filled-button-tokens, + prefix: 'filled-', ), ( - prefix: tokens-mat-filled-button.$prefix, + namespace: tokens-mat-filled-button.$prefix, tokens: $mat-filled-button-tokens, + prefix: 'filled-', ), ( - prefix: tokens-mdc-outlined-button.$prefix, + namespace: tokens-mdc-outlined-button.$prefix, tokens: $mdc-outlined-button-tokens, + prefix: 'outlined-', ), ( - prefix: tokens-mat-outlined-button.$prefix, + namespace: tokens-mat-outlined-button.$prefix, tokens: $mat-outlined-button-tokens, + prefix: 'outlined-', ), ( - prefix: tokens-mdc-protected-button.$prefix, + namespace: tokens-mdc-protected-button.$prefix, tokens: $mdc-protected-button-tokens, + prefix: 'protected-', ), ( - prefix: tokens-mat-protected-button.$prefix, + namespace: tokens-mat-protected-button.$prefix, tokens: $mat-protected-button-tokens, + prefix: 'protected-', ), ( - prefix: tokens-mdc-text-button.$prefix, + namespace: tokens-mdc-text-button.$prefix, tokens: $mdc-text-button-tokens, + prefix: 'text-', ), ( - prefix: tokens-mat-text-button.$prefix, + namespace: tokens-mat-text-button.$prefix, tokens: $mat-text-button-tokens, + prefix: 'text-', ) ); } diff --git a/src/material/button/_fab-theme.scss b/src/material/button/_fab-theme.scss index 4ec906a2543d..ae9bc25b11c3 100644 --- a/src/material/button/_fab-theme.scss +++ b/src/material/button/_fab-theme.scss @@ -158,27 +158,30 @@ /// 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( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mdc-fab.$prefix, + namespace: tokens-mdc-fab.$prefix, tokens: tokens-mdc-fab.get-token-slots(), ), ( - prefix: tokens-mdc-fab-small.$prefix, + namespace: tokens-mdc-fab-small.$prefix, tokens: tokens-mdc-fab-small.get-token-slots(), + prefix: 'small-', ), ( - prefix: tokens-mdc-extended-fab.$prefix, + namespace: tokens-mdc-extended-fab.$prefix, tokens: tokens-mdc-extended-fab.get-token-slots(), + prefix: 'extended-', ), ( - prefix: tokens-mat-fab.$prefix, + namespace: tokens-mat-fab.$prefix, tokens: tokens-mat-fab.get-token-slots(), ), ( - prefix: tokens-mat-fab-small.$prefix, + namespace: tokens-mat-fab-small.$prefix, tokens: tokens-mat-fab-small.get-token-slots(), + prefix: 'small-', ) ); } diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss index e3a370f76e4a..369166da6fcf 100644 --- a/src/material/button/_icon-button-theme.scss +++ b/src/material/button/_icon-button-theme.scss @@ -118,14 +118,14 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mdc-icon-button.$prefix, + namespace: tokens-mdc-icon-button.$prefix, tokens: tokens-mdc-icon-button.get-token-slots(), ), ( - prefix: tokens-mat-icon-button.$prefix, + namespace: tokens-mat-icon-button.$prefix, tokens: tokens-mat-icon-button.get-token-slots(), ) ); diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss index f993a0d42fdd..970d0b01dcab 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,25 +75,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-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) + ); } } } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $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-', + ) ); } @@ -107,8 +138,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); @@ -125,13 +155,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-common.scss b/src/material/checkbox/_checkbox-common.scss index 0a713417a551..332bae6f9753 100644 --- a/src/material/checkbox/_checkbox-common.scss +++ b/src/material/checkbox/_checkbox-common.scss @@ -33,8 +33,9 @@ $_fallback-size: 40px; @include token-utils.use-tokens($prefix, $slots) { $layer-size: token-utils.get-token-variable(state-layer-size); padding: calc((var(#{$layer-size}, #{$_fallback-size}) - #{$_icon-size}) / 2); - margin: calc((var(#{$layer-size}, #{$_fallback-size}) - - var(#{$layer-size}, #{$_fallback-size})) / 2); + margin: calc( + (var(#{$layer-size}, #{$_fallback-size}) - var(#{$layer-size}, #{$_fallback-size})) / 2 + ); @if ($include-state-layer-styles) { @include _state-layer-styles; @@ -52,8 +53,9 @@ $_fallback-size: 40px; @include token-utils.use-tokens($prefix, $slots) { $layer-size: token-utils.get-token-variable(state-layer-size); - $offset: calc((var(#{$layer-size}, #{$_fallback-size}) - - var(#{$layer-size}, #{$_fallback-size})) / 2); + $offset: calc( + (var(#{$layer-size}, #{$_fallback-size}) - var(#{$layer-size}, #{$_fallback-size})) / 2 + ); width: var(#{$layer-size}, #{$_fallback-size}); height: var(#{$layer-size}, #{$_fallback-size}); top: $offset; @@ -81,8 +83,9 @@ $_fallback-size: 40px; background-color: transparent; pointer-events: none; will-change: background-color, border-color; - transition: background-color $_transition-duration $_exit-curve, - border-color $_transition-duration $_exit-curve; + transition: + background-color $_transition-duration $_exit-curve, + border-color $_transition-duration $_exit-curve; @include token-utils.use-tokens($prefix, $slots) { $layer-size: token-utils.get-token-variable(state-layer-size); @@ -178,8 +181,9 @@ $_fallback-size: 40px; border-width: math.div(math.floor($_mark-stroke-size), 2); border-style: solid; opacity: 0; - transition: opacity $_transition-duration $_exit-curve, - transform $_transition-duration $_exit-curve; + transition: + opacity $_transition-duration $_exit-curve, + transform $_transition-duration $_exit-curve; @include cdk.high-contrast(active, off) { margin: 0 1px; @@ -210,8 +214,7 @@ $_fallback-size: 40px; .mdc-checkbox--anim-unchecked-checked { .mdc-checkbox__checkmark-path { - animation: mdc-checkbox-unchecked-checked-checkmark-path - $_transition-duration * 2 linear; + animation: mdc-checkbox-unchecked-checked-checkmark-path $_transition-duration * 2 linear; transition: none; } } @@ -244,30 +247,31 @@ $_fallback-size: 40px; .mdc-checkbox--anim-indeterminate-checked { .mdc-checkbox__checkmark { - animation: mdc-checkbox-indeterminate-checked-checkmark - $_indeterminate-change-duration linear; + animation: mdc-checkbox-indeterminate-checked-checkmark $_indeterminate-change-duration + linear; transition: none; } .mdc-checkbox__mixedmark { - animation: mdc-checkbox-indeterminate-checked-mixedmark - $_indeterminate-change-duration linear; + animation: mdc-checkbox-indeterminate-checked-mixedmark $_indeterminate-change-duration + linear; transition: none; } } .mdc-checkbox--anim-indeterminate-unchecked { .mdc-checkbox__mixedmark { - animation: mdc-checkbox-indeterminate-unchecked-mixedmark - $_indeterminate-change-duration * 0.6 linear; + animation: mdc-checkbox-indeterminate-unchecked-mixedmark $_indeterminate-change-duration * + 0.6 linear; transition: none; } } .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background, .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background { - transition: border-color $_transition-duration $_enter-curve, - background-color $_transition-duration $_enter-curve; + transition: + border-color $_transition-duration $_enter-curve, + background-color $_transition-duration $_enter-curve; .mdc-checkbox__checkmark-path { stroke-dashoffset: 0; @@ -276,8 +280,9 @@ $_fallback-size: 40px; .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background { .mdc-checkbox__checkmark { - transition: opacity $_transition-duration * 2 $_enter-curve, - transform $_transition-duration * 2 $_enter-curve; + transition: + opacity $_transition-duration * 2 $_enter-curve, + transform $_transition-duration * 2 $_enter-curve; opacity: 1; } @@ -289,8 +294,9 @@ $_fallback-size: 40px; .mdc-checkbox__checkmark { transform: rotate(45deg); opacity: 0; - transition: opacity $_transition-duration $_exit-curve, - transform $_transition-duration $_exit-curve; + transition: + opacity $_transition-duration $_exit-curve, + transform $_transition-duration $_exit-curve; } .mdc-checkbox__mixedmark { @@ -300,7 +306,8 @@ $_fallback-size: 40px; } @keyframes mdc-checkbox-unchecked-checked-checkmark-path { - 0%, 50% { + 0%, + 50% { stroke-dashoffset: $_path-length; } @@ -314,7 +321,8 @@ $_fallback-size: 40px; } @keyframes mdc-checkbox-unchecked-indeterminate-mixedmark { - 0%, 68.2% { + 0%, + 68.2% { transform: scaleX(0); } @@ -399,7 +407,8 @@ $_fallback-size: 40px; opacity: 1; } - 32.8%, 100% { + 32.8%, + 100% { transform: scaleX(0); opacity: 0; } @@ -409,7 +418,8 @@ $_fallback-size: 40px; // Conditionally disables the animations of the checkbox. @mixin checkbox-noop-animations() { &._mat-animation-noopable .mdc-checkbox { - *, *::before { + *, + *::before { transition: none !important; animation: none !important; } @@ -422,34 +432,22 @@ $_fallback-size: 40px; &:hover { .mdc-checkbox__ripple { @include token-utils.create-token-slot(opacity, unselected-hover-state-layer-opacity); - @include token-utils.create-token-slot( - background-color, - unselected-hover-state-layer-color - ); + @include token-utils.create-token-slot(background-color, unselected-hover-state-layer-color); } .mat-mdc-checkbox-ripple .mat-ripple-element { - @include token-utils.create-token-slot( - background-color, - unselected-hover-state-layer-color - ); + @include token-utils.create-token-slot(background-color, unselected-hover-state-layer-color); } } .mdc-checkbox__native-control:focus { & ~ .mdc-checkbox__ripple { @include token-utils.create-token-slot(opacity, unselected-focus-state-layer-opacity); - @include token-utils.create-token-slot( - background-color, - unselected-focus-state-layer-color - ); + @include token-utils.create-token-slot(background-color, unselected-focus-state-layer-color); } & ~ .mat-mdc-checkbox-ripple .mat-ripple-element { - @include token-utils.create-token-slot( - background-color, - unselected-focus-state-layer-color - ); + @include token-utils.create-token-slot(background-color, unselected-focus-state-layer-color); } } @@ -473,51 +471,33 @@ $_fallback-size: 40px; &:hover .mdc-checkbox__native-control:checked { & ~ .mdc-checkbox__ripple { @include token-utils.create-token-slot(opacity, selected-hover-state-layer-opacity); - @include token-utils.create-token-slot( - background-color, - selected-hover-state-layer-color - ); + @include token-utils.create-token-slot(background-color, selected-hover-state-layer-color); } & ~ .mat-mdc-checkbox-ripple .mat-ripple-element { - @include token-utils.create-token-slot( - background-color, - selected-hover-state-layer-color - ); + @include token-utils.create-token-slot(background-color, selected-hover-state-layer-color); } } .mdc-checkbox__native-control:focus:checked { & ~ .mdc-checkbox__ripple { @include token-utils.create-token-slot(opacity, selected-focus-state-layer-opacity); - @include token-utils.create-token-slot( - background-color, - selected-focus-state-layer-color - ); + @include token-utils.create-token-slot(background-color, selected-focus-state-layer-color); } & ~ .mat-mdc-checkbox-ripple .mat-ripple-element { - @include token-utils.create-token-slot( - background-color, - selected-focus-state-layer-color - ); + @include token-utils.create-token-slot(background-color, selected-focus-state-layer-color); } } &:active .mdc-checkbox__native-control:checked { & ~ .mdc-checkbox__ripple { @include token-utils.create-token-slot(opacity, selected-pressed-state-layer-opacity); - @include token-utils.create-token-slot( - background-color, - selected-pressed-state-layer-color - ); + @include token-utils.create-token-slot(background-color, selected-pressed-state-layer-color); } & ~ .mat-mdc-checkbox-ripple .mat-ripple-element { - @include token-utils.create-token-slot( - background-color, - selected-pressed-state-layer-color - ); + @include token-utils.create-token-slot(background-color, selected-pressed-state-layer-color); } } } diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss index 48480994284d..cb94697af61e 100644 --- a/src/material/checkbox/_checkbox-theme.scss +++ b/src/material/checkbox/_checkbox-theme.scss @@ -108,14 +108,14 @@ /// 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( + @include token-utils.override-tokens( $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 f6c42521fc33..637350b93a86 100644 --- a/src/material/chips/_chips-theme.scss +++ b/src/material/chips/_chips-theme.scss @@ -131,14 +131,14 @@ /// 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( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mdc-chip.$prefix, + namespace: tokens-mdc-chip.$prefix, tokens: tokens-mdc-chip.get-token-slots(), ), ( - prefix: tokens-mat-chip.$prefix, + namespace: tokens-mat-chip.$prefix, tokens: tokens-mat-chip.get-token-slots(), ) ); diff --git a/src/material/core/_core-theme.scss b/src/material/core/_core-theme.scss index 6f7f849d8335..48b0761ebb27 100644 --- a/src/material/core/_core-theme.scss +++ b/src/material/core/_core-theme.scss @@ -98,31 +98,37 @@ $_has-inserted-loaded-marker: false; $full-pseudo-checkbox-tokens: tokens-mat-full-pseudo-checkbox.get-token-slots(); $minimal-pseudo-checkbox-tokens: tokens-mat-minimal-pseudo-checkbox.get-token-slots(); - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-app.$prefix, + namespace: tokens-mat-app.$prefix, tokens: $app-tokens, + prefix: 'app-', ), ( - prefix: tokens-mat-ripple.$prefix, + namespace: tokens-mat-ripple.$prefix, tokens: $ripple-tokens, + prefix: 'ripple-', ), ( - prefix: tokens-mat-option.$prefix, + namespace: tokens-mat-option.$prefix, tokens: $option-tokens, + prefix: 'option-', ), ( - prefix: tokens-mat-optgroup.$prefix, + namespace: tokens-mat-optgroup.$prefix, tokens: $optgroup-tokens, + prefix: 'optgroup-', ), ( - prefix: tokens-mat-full-pseudo-checkbox.$prefix, + namespace: tokens-mat-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens, + prefix: 'pseudo-checkbox-full-', ), ( - prefix: tokens-mat-minimal-pseudo-checkbox.$prefix, + namespace: tokens-mat-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens, + prefix: 'pseudo-checkbox-minimal-', ) ); } diff --git a/src/material/core/option/_optgroup-theme.scss b/src/material/core/option/_optgroup-theme.scss index 3093200b226a..7d55e632618f 100644 --- a/src/material/core/option/_optgroup-theme.scss +++ b/src/material/core/option/_optgroup-theme.scss @@ -48,10 +48,10 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-optgroup.$prefix, + namespace: tokens-mat-optgroup.$prefix, tokens: tokens-mat-optgroup.get-token-slots(), ) ); diff --git a/src/material/core/option/_option-theme.scss b/src/material/core/option/_option-theme.scss index e8250a7efb42..975d6d20ffb1 100644 --- a/src/material/core/option/_option-theme.scss +++ b/src/material/core/option/_option-theme.scss @@ -75,10 +75,10 @@ /// 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( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-option.$prefix, + namespace: tokens-mat-option.$prefix, tokens: tokens-mat-option.get-token-slots(), ) ); diff --git a/src/material/core/ripple/_ripple-theme.scss b/src/material/core/ripple/_ripple-theme.scss index 76bede509f34..795c1f523ebb 100644 --- a/src/material/core/ripple/_ripple-theme.scss +++ b/src/material/core/ripple/_ripple-theme.scss @@ -53,10 +53,10 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-ripple.$prefix, + namespace: tokens-mat-ripple.$prefix, tokens: tokens-mat-ripple.get-token-slots(), ) ); 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 36f8a0d0e3db..80164830a1e9 100644 --- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss @@ -55,15 +55,17 @@ $full-pseudo-checkbox-tokens: tokens-mat-full-pseudo-checkbox.get-token-slots(); $minimal-pseudo-checkbox-tokens: tokens-mat-minimal-pseudo-checkbox.get-token-slots(); - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-full-pseudo-checkbox.$prefix, + namespace: tokens-mat-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens, + prefix: 'full-', ), ( - prefix: tokens-mat-minimal-pseudo-checkbox.$prefix, + namespace: tokens-mat-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens, + prefix: 'minimal-', ) ); } diff --git a/src/material/core/theming/tests/m3-theme.spec.ts b/src/material/core/theming/tests/m3-theme.spec.ts index c9484c194c73..51d9e11e4cd6 100644 --- a/src/material/core/theming/tests/m3-theme.spec.ts +++ b/src/material/core/theming/tests/m3-theme.spec.ts @@ -350,7 +350,8 @@ describe('M3 theme', () => { }); it('should not error when calling component extend-theme functions', () => { - // Ensures that no components have issues with ambiguous token names. + // Ensures that no components have issues with ambiguous token names, by triggering the + // validation logic for each extend-theme function. expect(() => transpile(` $theme: mat.core-extend-theme($theme, ()); @@ -401,4 +402,199 @@ describe('M3 theme', () => { ).not.toThrow(); }); }); + + describe('token override API', () => { + it('should emit override', () => { + const css = transpile(` + @use '../../tokens/token-utils'; + @use '../../tokens/m2/mdc/checkbox' as tokens-mdc-checkbox; + + @include token-utils.override-tokens( + ( + selected-checkmark-color: magenta + ), + ( + namespace: tokens-mdc-checkbox.$prefix, + tokens: tokens-mdc-checkbox.get-token-slots() + ) + ); + `); + + expect(css).toContain('--mdc-checkbox-selected-checkmark-color: magenta'); + }); + + it('should error on ambiguous shorthand token name', () => { + expect(() => + transpile(` + @use '../../tokens/token-utils'; + @use '../../tokens/m2/mat/full-pseudo-checkbox' as tokens-full-pcb; + @use '../../tokens/m2/mat/minimal-pseudo-checkbox' as tokens-minimal-pcb; + + @include token-utils.override-tokens( + ( + selected-checkmark-color: magenta + ), + ( + namespace: tokens-full-pcb.$prefix, + tokens: tokens-full-pcb.get-token-slots() + ), + ( + namespace: tokens-minimal-pcb.$prefix, + tokens: tokens-minimal-pcb.get-token-slots() + ) + ); + `), + ).toThrowError( + /Error overriding token: Ambiguous token name `selected-checkmark-color` exists in multiple namespaces: `\(mat, full-pseudo-checkbox\)` and `\(mat, minimal-pseudo-checkbox\)`/, + ); + }); + + it('should error on unknown token', () => { + expect(() => + transpile(` + @use '../../tokens/token-utils'; + @use '../../tokens/m2/mdc/checkbox' as tokens-mdc-checkbox; + + @include token-utils.override-tokens( + ( + fake-token: magenta + ), + ( + namespace: tokens-mdc-checkbox.$prefix, + tokens: tokens-mdc-checkbox.get-token-slots() + ) + ); + `), + ).toThrowError( + /Error overriding token: Unrecognized token `fake-token`. Allowed tokens are:/, + ); + }); + + it('should allow accessing a namespace with a prefix', () => { + const css = transpile(` + @use '../../tokens/token-utils'; + @use '../../tokens/m2/mat/full-pseudo-checkbox' as tokens-full-pcb; + @use '../../tokens/m2/mat/minimal-pseudo-checkbox' as tokens-minimal-pcb; + + @include token-utils.override-tokens( + ( + full-selected-checkmark-color: magenta, + minimal-selected-checkmark-color: cyan + ), + ( + namespace: tokens-full-pcb.$prefix, + tokens: tokens-full-pcb.get-token-slots(), + prefix: 'full-' + ), + ( + namespace: tokens-minimal-pcb.$prefix, + tokens: tokens-minimal-pcb.get-token-slots(), + prefix: 'minimal-' + ) + ); + `); + + expect(css).toContain('--mat-full-pseudo-checkbox-selected-checkmark-color: magenta'); + expect(css).toContain('--mat-minimal-pseudo-checkbox-selected-checkmark-color: cyan'); + }); + + it('should not allow accessing a prefixed namespace without its prefix', () => { + expect(() => + transpile(` + @use '../../tokens/token-utils'; + @use '../../tokens/m2/mat/minimal-pseudo-checkbox' as tokens-minimal-pcb; + + @include token-utils.override-tokens( + ( + selected-checkmark-color: magenta + ), + ( + namespace: tokens-minimal-pcb.$prefix, + tokens: tokens-minimal-pcb.get-token-slots(), + prefix: 'minimal-' + ) + ); + `), + ).toThrowError( + /Error overriding token: Unrecognized token `selected-checkmark-color`. Allowed tokens are:.* minimal-selected-checkmark-color/, + ); + }); + + it('should detect name collisions that remain after prefixes are applied', () => { + expect(() => + transpile(` + @use '../../tokens/token-utils'; + @use '../../tokens/m2/mat/full-pseudo-checkbox' as tokens-full-pcb; + @use '../../tokens/m2/mat/minimal-pseudo-checkbox' as tokens-minimal-pcb; + + @include token-utils.override-tokens( + ( + both-selected-checkmark-color: magenta, + ), + ( + namespace: tokens-full-pcb.$prefix, + tokens: tokens-full-pcb.get-token-slots(), + prefix: 'both-' + ), + ( + namespace: tokens-minimal-pcb.$prefix, + tokens: tokens-minimal-pcb.get-token-slots(), + prefix: 'both-' + ) + ); + `), + ).toThrowError( + /Error overriding token: Ambiguous token name `both-selected-checkmark-color` exists in multiple namespaces/, + ); + }); + + it('should not error when calling component extend-theme functions', () => { + // Ensures that no components have issues with ambiguous token names, by triggering the + // validation logic for each override mixin. + expect(() => + transpile(` + @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 27aa9787417b..b57e819e02e9 100644 --- a/src/material/core/tokens/_token-utils.scss +++ b/src/material/core/tokens/_token-utils.scss @@ -236,26 +236,6 @@ $_component-prefix: null; @return if($emit-overrides-only, $overrides, map.merge($values, $overrides)); } -/// 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); - - @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); - } - } -} - /// Gets the MDC tokens for the given prefix, M3 token values, and supported token slots. /// @param {List} $prefix The token prefix for the given tokens. /// @param {Map|(Map, Map)} $values A map of M3 token values for the given prefix. @@ -422,6 +402,50 @@ $_component-prefix: null; @return $result; } +/// Returns a theme config with the given tokens overridden. +/// @param {Map} $overrides The token values to override in the theme. +/// @param {List} $override-namespaces The namespaces available to override. +/// New token values are emitted under the current selector or root. +@mixin override-tokens($overrides, $override-namespaces...) { + // Determine which system and namespace each shorthand token belongs to. + $seen-tokens: (); + @each $namespace in $override-namespaces { + $prefix: map.get($namespace, prefix) or ''; + $tokens: _filter-nulls(map.get($namespace, tokens)); + $namespace: map.get($namespace, namespace); + @each $name, $value in $tokens { + $prefixed-name: $prefix + $name; + // If multiple namespaces have the same token name, report an error. + @if map.has-key($seen-tokens, $prefixed-name) { + @error #{'Error overriding token: Ambiguous token name `'}#{$prefixed-name}#{ + '` exists in multiple namespaces: `('}#{ + list.nth(map.get($seen-tokens, $prefixed-name), 1)}#{')` and `('}#{$namespace}#{')`'}; + } + $seen-tokens: map.set($seen-tokens, $prefixed-name, ($namespace, $name)); + } + } + + // Collate the overrides. + $batched-overrides: (); + @each $token, $value in $overrides { + $token-info: map.get($seen-tokens, $token); + @if $token-info == null { + @error #{'Error overriding token: Unrecognized token `'}#{$token}#{ + '`. Allowed tokens are: '}#{map.keys($seen-tokens)}; + } + $namespace: list.nth($token-info, 1); + $token-name: list.nth($token-info, 2); + $batched-overrides: map.set($batched-overrides, $namespace, $token-name, $value); + } + + // Apply the overrides + @include sass-utils.current-selector-or-root() { + @each $namespace, $tokens in $batched-overrides { + @include create-token-values($namespace, $tokens); + } + } +} + /// Returns a theme config with the given tokens overridden. /// @param {Map} $theme The material theme for an application. /// @param {List} $extend-namespaces The namespaces to extend in the theme. Each item can be either: @@ -430,7 +454,7 @@ $_component-prefix: null; /// name must start with to match this namespace. The prefix will be stripped before matching /// the token name. /// @param {Map} $overrides The token values to override in the theme. -@function extend-theme($theme, $extend-namespaces, $overrides: ()) { +@function extend-theme($theme, $extend-namespaces, $overrides) { $internals: _mat-theming-internals-do-not-access; $systems: (color-tokens, typography-tokens, density-tokens, base-tokens); $variants: (primary, secondary, tertiary, error, surface); @@ -448,6 +472,7 @@ $_component-prefix: null; $prefix: map.get($namespace, prefix); $namespace: map.get($namespace, namespace); } + // Check each system to see if it has tokens for the given namespace. $namespace-found: false; @each $system in $systems { $tokens: map.get($theme, $internals, $system, $namespace); @@ -455,6 +480,7 @@ $_component-prefix: null; $namespace-found: true; @each $name, $value in $tokens { $prefixed-name: $prefix + $name; + // If multiple namespaces have the same token name, report an error. @if map.has-key($seen-tokens, $prefixed-name) { @error #{'Error extending theme: Ambiguous token name `'}#{$prefixed-name}#{ '` exists in multiple namespaces: `('}#{ @@ -464,6 +490,7 @@ $_component-prefix: null; } } } + // If no system had tokens for the given namespace, report an error. @if not $namespace-found { @error #{'Error extending theme: Theme does not have tokens for namespace `('}#{ $namespace}#{')`'}; diff --git a/src/material/datepicker/_datepicker-theme.scss b/src/material/datepicker/_datepicker-theme.scss index cd94735a7524..da4be5064ce5 100644 --- a/src/material/datepicker/_datepicker-theme.scss +++ b/src/material/datepicker/_datepicker-theme.scss @@ -148,10 +148,10 @@ $calendar-weekday-table-font-size: 11px !default; /// 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( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-datepicker.$prefix, + namespace: tokens-mat-datepicker.$prefix, tokens: tokens-mat-datepicker.get-token-slots(), ) ); diff --git a/src/material/dialog/_dialog-theme.scss b/src/material/dialog/_dialog-theme.scss index ee51884640ec..1fc5ad4e5be0 100644 --- a/src/material/dialog/_dialog-theme.scss +++ b/src/material/dialog/_dialog-theme.scss @@ -68,14 +68,14 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mdc-dialog.$prefix, + namespace: tokens-mdc-dialog.$prefix, tokens: tokens-mdc-dialog.get-token-slots(), ), ( - prefix: tokens-mat-dialog.$prefix, + namespace: tokens-mat-dialog.$prefix, tokens: tokens-mat-dialog.get-token-slots(), ) ); diff --git a/src/material/divider/_divider-theme.scss b/src/material/divider/_divider-theme.scss index a2506279edf4..dce728690559 100644 --- a/src/material/divider/_divider-theme.scss +++ b/src/material/divider/_divider-theme.scss @@ -47,10 +47,10 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-divider.$prefix, + namespace: tokens-mat-divider.$prefix, tokens: tokens-mat-divider.get-token-slots(), ) ); diff --git a/src/material/expansion/_expansion-theme.scss b/src/material/expansion/_expansion-theme.scss index 8c26ee8eec8b..c5a589f7396d 100644 --- a/src/material/expansion/_expansion-theme.scss +++ b/src/material/expansion/_expansion-theme.scss @@ -63,10 +63,10 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-expansion.$prefix, + namespace: tokens-mat-expansion.$prefix, tokens: tokens-mat-expansion.get-token-slots(), ) ); diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss index 2a553f2d0e77..72e353146e29 100644 --- a/src/material/form-field/_form-field-theme.scss +++ b/src/material/form-field/_form-field-theme.scss @@ -127,18 +127,20 @@ $outlined-text-field-tokens: tokens-mdc-outlined-text-field.get-token-slots(); $form-field-tokens: tokens-mat-form-field.get-token-slots(); - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mdc-filled-text-field.$prefix, + namespace: tokens-mdc-filled-text-field.$prefix, tokens: $filled-text-field-tokens, + prefix: 'filled-', ), ( - prefix: tokens-mdc-outlined-text-field.$prefix, + namespace: tokens-mdc-outlined-text-field.$prefix, tokens: $outlined-text-field-tokens, + prefix: 'outlined-', ), ( - prefix: tokens-mat-form-field.$prefix, + namespace: tokens-mat-form-field.$prefix, tokens: $form-field-tokens, ) ); @@ -153,11 +155,11 @@ sass-utils.list-of( ( namespace: tokens-mdc-filled-text-field.$prefix, - prefix: 'filled', + prefix: 'filled-', ), ( namespace: tokens-mdc-outlined-text-field.$prefix, - prefix: 'outlined', + prefix: 'outlined-', ), tokens-mat-form-field.$prefix ), diff --git a/src/material/grid-list/_grid-list-theme.scss b/src/material/grid-list/_grid-list-theme.scss index 2296f5b54d0e..886b75c21c0e 100644 --- a/src/material/grid-list/_grid-list-theme.scss +++ b/src/material/grid-list/_grid-list-theme.scss @@ -43,10 +43,10 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-grid-list.$prefix, + namespace: tokens-mat-grid-list.$prefix, tokens: tokens-mat-grid-list.get-token-slots(), ) ); diff --git a/src/material/icon/_icon-theme.scss b/src/material/icon/_icon-theme.scss index cc3ef2e85b8a..3e2fe9987131 100644 --- a/src/material/icon/_icon-theme.scss +++ b/src/material/icon/_icon-theme.scss @@ -74,10 +74,10 @@ /// 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( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-icon.$prefix, + namespace: tokens-mat-icon.$prefix, tokens: tokens-mat-icon.get-token-slots(), ) ); diff --git a/src/material/input/_input-theme.scss b/src/material/input/_input-theme.scss index 8cac2a2a94f9..9f0d5429a2bf 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( + @include token-utils.override-tokens( $tokens, - (prefix: '', tokens: ()), + ( + prefix: '', + 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 15eae4a04588..70207f17339f 100644 --- a/src/material/list/_list-theme.scss +++ b/src/material/list/_list-theme.scss @@ -46,14 +46,18 @@ .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) + ); } } @@ -61,7 +65,9 @@ .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) + ); } } @@ -124,7 +130,9 @@ .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 @@ -191,14 +199,14 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-list.$prefix, + namespace: tokens-mat-list.$prefix, tokens: tokens-mat-list.get-token-slots(), ), ( - prefix: tokens-mdc-list.$prefix, + namespace: tokens-mdc-list.$prefix, tokens: tokens-mdc-list.get-token-slots(), ) ); diff --git a/src/material/menu/_menu-theme.scss b/src/material/menu/_menu-theme.scss index 39f2554f2be7..5747e81425fd 100644 --- a/src/material/menu/_menu-theme.scss +++ b/src/material/menu/_menu-theme.scss @@ -54,10 +54,10 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-menu.$prefix, + namespace: tokens-mat-menu.$prefix, tokens: tokens-mat-menu.get-token-slots(), ) ); diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss index 01750571cc4f..de8ca14bef9c 100644 --- a/src/material/paginator/_paginator-theme.scss +++ b/src/material/paginator/_paginator-theme.scss @@ -63,10 +63,10 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-paginator.$prefix, + namespace: tokens-mat-paginator.$prefix, tokens: tokens-mat-paginator.get-token-slots(), ) ); diff --git a/src/material/progress-bar/_progress-bar-theme.scss b/src/material/progress-bar/_progress-bar-theme.scss index 750e857d9b8c..f78e9fb8daa3 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,21 +54,25 @@ /// 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. @mixin overrides($tokens: ()) { $linear-progress-tokens: tokens-mdc-linear-progress.get-token-slots(); - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, - (prefix: tokens-mdc-linear-progress.$prefix, tokens: $linear-progress-tokens), + ( + namespace: tokens-mdc-linear-progress.$prefix, + tokens: $linear-progress-tokens, + ) ); } @@ -79,9 +81,9 @@ /// @param {Map} $overrides The token values to override in the theme. @function extend-theme($theme, $overrides: ()) { @return token-utils.extend-theme( - $theme, - sass-utils.list-of(tokens-mdc-linear-progress.$prefix), - $overrides + $theme, + sass-utils.list-of(tokens-mdc-linear-progress.$prefix), + $overrides ); } @@ -94,8 +96,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); @@ -112,7 +113,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 73500fda71ed..6ab5dacbe77a 100644 --- a/src/material/progress-spinner/_progress-spinner-theme.scss +++ b/src/material/progress-spinner/_progress-spinner-theme.scss @@ -72,10 +72,10 @@ @mixin overrides($tokens: ()) { $circular-progress-tokens: tokens-mdc-circular-progress.get-token-slots(); - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mdc-circular-progress.$prefix, + namespace: tokens-mdc-circular-progress.$prefix, tokens: $circular-progress-tokens, ) ); diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss index 11cf20f01e80..7cb88c74fc28 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) + ); } } } @@ -92,14 +116,14 @@ /// 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( + @include token-utils.override-tokens( $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 f3126a21eb00..77efd6c11de1 100644 --- a/src/material/select/_select-theme.scss +++ b/src/material/select/_select-theme.scss @@ -86,10 +86,10 @@ /// 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( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-select.$prefix, + namespace: tokens-mat-select.$prefix, tokens: tokens-mat-select.get-token-slots(), ) ); diff --git a/src/material/sidenav/_sidenav-theme.scss b/src/material/sidenav/_sidenav-theme.scss index 605eba7765dd..0e468a1abadf 100644 --- a/src/material/sidenav/_sidenav-theme.scss +++ b/src/material/sidenav/_sidenav-theme.scss @@ -47,10 +47,10 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-sidenav.$prefix, + namespace: tokens-mat-sidenav.$prefix, tokens: tokens-mat-sidenav.get-token-slots(), ) ); diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss index 27a72c597936..cd5905299d0f 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.scss @@ -112,14 +112,14 @@ /// 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( + @include token-utils.override-tokens( $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 3c76fd1938e1..71a71995fb92 100644 --- a/src/material/slider/_slider-theme.scss +++ b/src/material/slider/_slider-theme.scss @@ -100,14 +100,14 @@ /// 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( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-slider.$prefix, + namespace: tokens-mat-slider.$prefix, tokens: tokens-mat-slider.get-token-slots(), ), ( - prefix: tokens-mdc-slider.$prefix, + namespace: tokens-mdc-slider.$prefix, tokens: tokens-mdc-slider.get-token-slots(), ) ); diff --git a/src/material/snack-bar/_snack-bar-theme.scss b/src/material/snack-bar/_snack-bar-theme.scss index f82b86a9af32..84c1f2721a8e 100644 --- a/src/material/snack-bar/_snack-bar-theme.scss +++ b/src/material/snack-bar/_snack-bar-theme.scss @@ -58,14 +58,14 @@ /// 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( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mdc-snack-bar.$prefix, + namespace: tokens-mdc-snack-bar.$prefix, tokens: tokens-mdc-snack-bar.get-token-slots(), ), ( - prefix: tokens-mat-snack-bar.$prefix, + namespace: tokens-mat-snack-bar.$prefix, tokens: tokens-mat-snack-bar.get-token-slots(), ) ); diff --git a/src/material/sort/_sort-theme.scss b/src/material/sort/_sort-theme.scss index 7821f14dc333..7f0f6a784135 100644 --- a/src/material/sort/_sort-theme.scss +++ b/src/material/sort/_sort-theme.scss @@ -54,10 +54,10 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-sort.$prefix, + namespace: tokens-mat-sort.$prefix, tokens: tokens-mat-sort.get-token-slots(), ) ); diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss index 9b28c01782aa..f78d01950f24 100644 --- a/src/material/stepper/_stepper-theme.scss +++ b/src/material/stepper/_stepper-theme.scss @@ -81,10 +81,10 @@ /// 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( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-stepper.$prefix, + namespace: tokens-mat-stepper.$prefix, tokens: tokens-mat-stepper.get-token-slots(), ) ); diff --git a/src/material/table/_table-theme.scss b/src/material/table/_table-theme.scss index 6f5671301f12..caf382dea291 100644 --- a/src/material/table/_table-theme.scss +++ b/src/material/table/_table-theme.scss @@ -60,10 +60,10 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-table.$prefix, + namespace: tokens-mat-table.$prefix, tokens: tokens-mat-table.get-token-slots(), ) ); diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss index b1d6125ae1e8..ea3634ab19e5 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-mat-tab-header-with-background.$prefix, - tokens-mat-tab-header-with-background.get-typography-tokens($theme)); + 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) + ); } } } @@ -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-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-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) + ); } } } @@ -135,11 +157,20 @@ $tab-header-tokens: tokens-mat-tab-header.get-token-slots(); $tab-header-with-background-tokens: tokens-mat-tab-header-with-background.get-token-slots(); - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $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) + ( + 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, + ) ); } @@ -167,8 +198,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); @@ -185,18 +215,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/toolbar/_toolbar-theme.scss b/src/material/toolbar/_toolbar-theme.scss index 3f5439f0c767..30bc6b6874b0 100644 --- a/src/material/toolbar/_toolbar-theme.scss +++ b/src/material/toolbar/_toolbar-theme.scss @@ -79,10 +79,10 @@ /// 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( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-toolbar.$prefix, + namespace: tokens-mat-toolbar.$prefix, tokens: tokens-mat-toolbar.get-token-slots(), ) ); diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss index 0de804912dde..0cf90e9dccb4 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, @@ -64,9 +60,12 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $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(), + ) ); } @@ -75,9 +74,9 @@ /// @param {Map} $overrides The token values to override in the theme. @function extend-theme($theme, $overrides: ()) { @return token-utils.extend-theme( - $theme, - sass-utils.list-of(tokens-mdc-plain-tooltip.$prefix), - $overrides + $theme, + sass-utils.list-of(tokens-mdc-plain-tooltip.$prefix), + $overrides ); } @@ -85,8 +84,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); @@ -103,7 +101,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 e0316988cb71..04e605f2f40a 100644 --- a/src/material/tree/_tree-theme.scss +++ b/src/material/tree/_tree-theme.scss @@ -59,10 +59,10 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( + @include token-utils.override-tokens( $tokens, ( - prefix: tokens-mat-tree.$prefix, + namespace: tokens-mat-tree.$prefix, tokens: tokens-mat-tree.get-token-slots(), ) );