From a966803b90dbd3a2dd776cd266826831c052e897 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Wed, 30 Aug 2023 21:43:24 +0000 Subject: [PATCH] refactor(multiple): convert components to theme inspection API (round 4) --- src/dev-app/theme.scss | 5 +- src/e2e-app/theme.scss | 3 + .../selection/_selection.scss | 5 +- .../autocomplete/_autocomplete-theme.scss | 30 +++----- src/material/badge/_badge-theme.scss | 41 ++++------ .../bottom-sheet/_bottom-sheet-theme.scss | 35 ++++----- .../button-toggle/_button-toggle-theme.scss | 45 +++++------ src/material/chips/_chips-theme.scss | 70 +++++------------ .../_focus-indicators-theme.scss | 12 +-- src/material/core/style/_form-common.scss | 12 +-- src/material/core/style/_private.scss | 5 +- .../core/tokens/m2/mat/_autocomplete.scss | 11 ++- src/material/core/tokens/m2/mat/_badge.scss | 25 +++---- .../core/tokens/m2/mat/_bottom-sheet.scss | 25 +++---- src/material/core/tokens/m2/mat/_divider.scss | 11 ++- .../core/tokens/m2/mat/_expansion.scss | 51 ++++++------- .../core/tokens/m2/mat/_grid-list.scss | 15 ++-- src/material/core/tokens/m2/mat/_icon.scss | 6 +- .../tokens/m2/mat/_legacy-button-toggle.scss | 31 ++++---- src/material/core/tokens/m2/mat/_menu.scss | 26 +++---- src/material/core/tokens/m2/mat/_select.scss | 40 ++++------ src/material/core/tokens/m2/mat/_sidenav.scss | 24 +++--- .../core/tokens/m2/mat/_snack-bar.scss | 13 ++-- .../m2/mat/_standard-button-toggle.scss | 44 +++++------ .../m2/mat/_tab-header-with-background.scss | 12 +-- .../core/tokens/m2/mat/_tab-header.scss | 28 ++++--- src/material/core/tokens/m2/mat/_table.scss | 41 +++++----- src/material/core/tokens/m2/mat/_toolbar.scss | 27 +++---- src/material/core/tokens/m2/mdc/_chip.scss | 61 +++++++++------ .../tokens/m2/mdc/_circular-progress.scss | 9 ++- src/material/core/tokens/m2/mdc/_dialog.scss | 42 ++++------- .../core/tokens/m2/mdc/_icon-button.scss | 4 +- .../core/tokens/m2/mdc/_plain-tooltip.scss | 27 +++---- .../core/tokens/m2/mdc/_snack-bar.scss | 29 +++---- .../core/tokens/m2/mdc/_tab-indicator.scss | 11 ++- src/material/core/tokens/m2/mdc/_tab.scss | 9 ++- src/material/dialog/_dialog-theme.scss | 39 ++++------ src/material/divider/_divider-theme.scss | 30 +++----- src/material/expansion/_expansion-theme.scss | 39 ++++------ src/material/grid-list/_grid-list-theme.scss | 31 +++----- src/material/icon/_icon-theme.scss | 41 +++++----- src/material/list/_list-theme.scss | 2 +- src/material/menu/_menu-theme.scss | 35 ++++----- .../_progress-spinner-theme.scss | 37 ++++----- src/material/select/_select-theme.scss | 47 +++++------- src/material/sidenav/_sidenav-theme.scss | 30 +++----- src/material/snack-bar/_snack-bar-theme.scss | 39 ++++------ src/material/table/_table-theme.scss | 39 ++++------ src/material/tabs/_tabs-theme.scss | 75 ++++++++----------- src/material/toolbar/_toolbar-theme.scss | 51 +++++-------- src/material/tooltip/_tooltip-theme.scss | 38 ++++------ src/universal-app/theme.scss | 3 + 52 files changed, 615 insertions(+), 846 deletions(-) diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss index 7b2b87fe30af..779c3ef69762 100644 --- a/src/dev-app/theme.scss +++ b/src/dev-app/theme.scss @@ -3,9 +3,8 @@ // Plus imports for other components in your app. -// Disable legacy API compatibility. -// TODO: uncomment once conversion to inspection API is complete. -//mat.$theme-legacy-inspection-api-compatibility: false; +// Disable legacy API compatibility, since dev-app is fully migrated to theme inspection API. +mat.$theme-legacy-inspection-api-compatibility: false; // Define the default (light) theme. $candy-app-primary: mat.define-palette(mat.$indigo-palette); diff --git a/src/e2e-app/theme.scss b/src/e2e-app/theme.scss index 910e09d01e19..8671b8fce364 100644 --- a/src/e2e-app/theme.scss +++ b/src/e2e-app/theme.scss @@ -2,6 +2,9 @@ // Plus imports for other components in your app. +// Disable legacy API compatibility, since e2e-app is fully migrated to theme inspection API. +mat.$theme-legacy-inspection-api-compatibility: false; + // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // **Be sure that you only ever include this mixin once!** diff --git a/src/material-experimental/selection/_selection.scss b/src/material-experimental/selection/_selection.scss index 2df0365bb442..05457c06bcd2 100644 --- a/src/material-experimental/selection/_selection.scss +++ b/src/material-experimental/selection/_selection.scss @@ -1,8 +1,7 @@ @use '@angular/material' as mat; -@mixin theme($theme-or-color-config) { - $theme: mat.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include mat.private-check-duplicate-theme-styles($theme, 'mat-selection'); } -@mixin typography($config-or-theme) {} +@mixin typography($theme) {} diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss index a10049668498..f537a04ccdd9 100644 --- a/src/material/autocomplete/_autocomplete-theme.scss +++ b/src/material/autocomplete/_autocomplete-theme.scss @@ -1,37 +1,31 @@ @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/typography/typography'; @use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; @use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete; -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - +@mixin color($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix, - tokens-mat-autocomplete.get-color-tokens($config)); + tokens-mat-autocomplete.get-color-tokens($theme)); } } -@mixin typography($config-or-theme) {} +@mixin typography($theme) {} -@mixin density($config-or-theme) {} +@mixin density($theme) {} -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss index c55c73169968..01f3d8f8ac9e 100644 --- a/src/material/badge/_badge-theme.scss +++ b/src/material/badge/_badge-theme.scss @@ -4,6 +4,7 @@ @use '@angular/cdk'; @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/typography/typography'; @use '../core/tokens/m2/mat/badge' as tokens-mat-badge; @use '../core/tokens/token-utils'; @@ -164,46 +165,34 @@ $_emit-fallback-vars: true; } } -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - $accent: map.get($config, accent); - $warn: map.get($config, warn); - +@mixin color($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-badge.$prefix, - tokens-mat-badge.get-color-tokens($config)); + 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($accent)); + 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($warn)); + tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn)); } } -@mixin typography($config-or-theme) { - $config: typography.private-typography-to-2014-config( - theming.get-typography-config($config-or-theme)); - +@mixin typography($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-badge.$prefix, - tokens-mat-badge.get-typography-tokens($config)); + tokens-mat-badge.get-typography-tokens($theme)); } } -@mixin density($config-or-theme) {} +@mixin density($theme) {} -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - // Try to reduce the number of times that the structural styles are emitted. @if not $_badge-structure-emitted { @include _badge-structure; @@ -216,14 +205,14 @@ $_emit-fallback-vars: true; } } - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss index 122e93d99a02..bfb5a8cde56e 100644 --- a/src/material/bottom-sheet/_bottom-sheet-theme.scss +++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss @@ -1,45 +1,36 @@ @use '../core/typography/typography'; @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; @use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet; -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - +@mixin color($theme) { @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($config)); + tokens-mat-bottom-sheet.get-color-tokens($theme)); } } -@mixin typography($config-or-theme) { - $config: typography.private-typography-to-2014-config( - theming.get-typography-config($config-or-theme)); - +@mixin typography($theme) { @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($config)); + tokens-mat-bottom-sheet.get-typography-tokens($theme)); } } -@mixin density($config-or-theme) {} +@mixin density($theme) {} -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss index 5a113c16f4f3..d0db197e966d 100644 --- a/src/material/button-toggle/_button-toggle-theme.scss +++ b/src/material/button-toggle/_button-toggle-theme.scss @@ -1,59 +1,48 @@ @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/typography/typography'; @use '../core/tokens/m2/mat/legacy-button-toggle' as tokens-mat-legacy-button-toggle; @use '../core/tokens/m2/mat/standard-button-toggle' as tokens-mat-standard-button-toggle; @use '../core/tokens/token-utils'; @use '../core/style/sass-utils'; -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - +@mixin color($theme) { @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($config)); + 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($config)); + tokens-mat-standard-button-toggle.get-color-tokens($theme)); } } -@mixin typography($config-or-theme) { - $config: typography.private-typography-to-2014-config( - theming.get-typography-config($config-or-theme)); - +@mixin typography($theme) { @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($config)); + 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($config)); + tokens-mat-standard-button-toggle.get-typography-tokens($theme)); } } -@mixin density($config-or-theme) { - $density-scale: theming.get-density-config($config-or-theme); - +@mixin density($theme) { @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($density-scale)); + 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($density-scale)); + tokens-mat-standard-button-toggle.get-density-tokens($theme)); } } -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss index 40cababb87a7..225e3058ae82 100644 --- a/src/material/chips/_chips-theme.scss +++ b/src/material/chips/_chips-theme.scss @@ -5,95 +5,61 @@ @use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip; @use '../core/theming/palette'; @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/typography/typography'; @use '../core/mdc-helpers/mdc-helpers'; -@function _get-default-palette($config) { - $is-dark: map.get($config, is-dark); - $grey-50: map.get(palette.$grey-palette, 50); - $grey-900: map.get(palette.$grey-palette, 900); - $default-foreground: if($is-dark, $grey-50, $grey-900); - - $surface: map.get(map.get($config, background), card); - $on-surface: if( - mdc-helpers.variable-safe-contrast-tone($surface, $is-dark) == 'dark', - #000, - #fff - ); - $default-background: if( - meta.type-of($on-surface) == color and meta.type-of($surface) == color, - color.mix($on-surface, $surface, 12%), - $on-surface - ); - - @return (default: $default-background, default-contrast: $default-foreground); -} - -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - +@mixin color($theme) { .mat-mdc-standard-chip { - $default-palette: _get-default-palette($config); - $default-config: map.merge($config, (primary: $default-palette)); - $default-color-tokens: tokens-mdc-chip.get-color-tokens($default-config); + $default-color-tokens: tokens-mdc-chip.get-color-tokens($theme); @include mdc-chip-theme.theme($default-color-tokens); &.mat-mdc-chip-selected, &.mat-mdc-chip-highlighted { &.mat-primary { - $primary-color-tokens: tokens-mdc-chip.get-color-tokens($config); + $primary-color-tokens: tokens-mdc-chip.get-color-tokens($theme, primary); @include mdc-chip-theme.theme($primary-color-tokens); } &.mat-accent { - $accent-config: map.merge($config, (primary: map.get($config, accent))); - $accent-color-tokens: tokens-mdc-chip.get-color-tokens($accent-config); + $accent-color-tokens: tokens-mdc-chip.get-color-tokens($theme, accent); @include mdc-chip-theme.theme($accent-color-tokens); } &.mat-warn { - $warn-config: map.merge($config, (primary: map.get($config, warn))); - $warn-color-tokens: tokens-mdc-chip.get-color-tokens($warn-config); + $warn-color-tokens: tokens-mdc-chip.get-color-tokens($theme, warn); @include mdc-chip-theme.theme($warn-color-tokens); } } } } -@mixin typography($config-or-theme) { - $config: typography.private-typography-to-2018-config( - theming.get-typography-config($config-or-theme) - ); - $typography-tokens: tokens-mdc-chip.get-typography-tokens($config); +@mixin typography($theme) { + $typography-tokens: tokens-mdc-chip.get-typography-tokens($theme); .mat-mdc-standard-chip { @include mdc-chip-theme.theme($typography-tokens); } } -@mixin density($config-or-theme) { - $density-scale: theming.get-density-config($config-or-theme); - $density-tokens: tokens-mdc-chip.get-density-tokens($density-scale); +@mixin density($theme) { + $density-tokens: tokens-mdc-chip.get-density-tokens($theme); + .mat-mdc-chip.mat-mdc-standard-chip { @include mdc-chip-theme.theme($density-tokens); } } -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-chips') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/core/focus-indicators/_focus-indicators-theme.scss b/src/material/core/focus-indicators/_focus-indicators-theme.scss index 34321058999c..3a2d776a802c 100644 --- a/src/material/core/focus-indicators/_focus-indicators-theme.scss +++ b/src/material/core/focus-indicators/_focus-indicators-theme.scss @@ -1,13 +1,13 @@ @use './private'; // stylelint-disable-next-line material/theme-mixin-api -@mixin color($config-or-theme-or-color) { - @include private.strong-focus-indicators-color($config-or-theme-or-color); - @include private.mdc-strong-focus-indicators-color($config-or-theme-or-color); +@mixin color($theme) { + @include private.strong-focus-indicators-color($theme); + @include private.mdc-strong-focus-indicators-color($theme); } // stylelint-disable-next-line material/theme-mixin-api -@mixin theme($theme-or-color-config-or-color) { - @include private.strong-focus-indicators-theme($theme-or-color-config-or-color); - @include private.mdc-strong-focus-indicators-theme($theme-or-color-config-or-color); +@mixin theme($theme) { + @include private.strong-focus-indicators-theme($theme); + @include private.mdc-strong-focus-indicators-theme($theme); } diff --git a/src/material/core/style/_form-common.scss b/src/material/core/style/_form-common.scss index dc9e06d4cc07..d213f84fed1f 100644 --- a/src/material/core/style/_form-common.scss +++ b/src/material/core/style/_form-common.scss @@ -1,5 +1,7 @@ @use 'sass:map'; @use '../theming/theming'; +@use '../theming/inspection'; +@use './sass-utils'; // Renders a gradient for showing the dashed line when the input is disabled. // Unlike using a border, a gradient allows us to adjust the spacing of the dotted line @@ -13,9 +15,9 @@ // Figures out the color of the placeholder for a form control. // Used primarily to prevent the various form controls from // becoming out of sync since these colors aren't in a palette. -@function private-control-placeholder-color($config) { - $foreground: map.get($config, foreground); - $is-dark-theme: map.get($config, is-dark); - @return theming.get-color-from-palette($foreground, secondary-text, - if($is-dark-theme, 0.5, 0.42)); +@function private-control-placeholder-color($theme) { + $is-dark-theme: inspection.get-theme-type($theme) == dark; + @return sass-utils.safe-color-change( + inspection.get-theme-color($theme, foreground, secondary-text), + $alpha: if($is-dark-theme, 0.5, 0.42)); } diff --git a/src/material/core/style/_private.scss b/src/material/core/style/_private.scss index 509885122769..e6f5db50b5ee 100644 --- a/src/material/core/style/_private.scss +++ b/src/material/core/style/_private.scss @@ -9,9 +9,8 @@ @include elevation.elevation($zValue, $elevation-color-or-default); } -@mixin private-theme-overridable-elevation($zValue, $config) { - $foreground: map.get($config, foreground); - $elevation-color: map.get($foreground, elevation); +@mixin private-theme-overridable-elevation($zValue, $theme) { + $elevation-color: inspection.get-theme-color($theme, foreground, elevation); $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color); @include elevation.overridable-elevation($zValue, $elevation-color-or-default); diff --git a/src/material/core/tokens/m2/mat/_autocomplete.scss b/src/material/core/tokens/m2/mat/_autocomplete.scss index 13747f52a87f..9a00e0b84346 100644 --- a/src/material/core/tokens/m2/mat/_autocomplete.scss +++ b/src/material/core/tokens/m2/mat/_autocomplete.scss @@ -1,6 +1,7 @@ @use 'sass:map'; @use '../../token-utils'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -13,21 +14,19 @@ $prefix: (mat, autocomplete); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $background: map.get($config, background); - +@function get-color-tokens($theme) { @return ( - background-color: theming.get-color-from-palette($background, card) + background-color: inspection.get-theme-color($theme, background, card) ); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return (); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mat/_badge.scss b/src/material/core/tokens/m2/mat/_badge.scss index 60fdd6d95043..d772d51115c7 100644 --- a/src/material/core/tokens/m2/mat/_badge.scss +++ b/src/material/core/tokens/m2/mat/_badge.scss @@ -4,6 +4,7 @@ @use '../../token-utils'; @use '../../../typography/typography-utils'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -16,12 +17,10 @@ $prefix: (mat, badge); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $foreground: map.get($config, foreground); - $background: map.get($config, background); - $primary-color-tokens: private-get-color-palette-color-tokens(map.get($config, primary)); - $app-background: theming.get-color-from-palette($background, 'background'); - $disabled-background: theming.get-color-from-palette($foreground, disabled-button); +@function get-color-tokens($theme) { + $primary-color-tokens: private-get-color-palette-color-tokens($theme, primary); + $app-background: inspection.get-theme-color($theme, background, background); + $disabled-background: inspection.get-theme-color($theme, foreground, disabled-button); // The disabled color usually has some kind of opacity, but because the badge is overlayed // on top of something else, it won't look good if it's opaque. If it is a color *type*, @@ -36,24 +35,24 @@ $prefix: (mat, badge); @return map.merge($primary-color-tokens, ( disabled-state-background-color: $disabled-background, - disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-text), + disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text), )); } // Generates the tokens used to theme the badge based on a palette. -@function private-get-color-palette-color-tokens($palette) { +@function private-get-color-palette-color-tokens($theme, $palette-name: primary) { @return ( - background-color: theming.get-color-from-palette($palette), - text-color: theming.get-color-from-palette($palette, default-contrast), + background-color: inspection.get-theme-color($theme, $palette-name), + text-color: inspection.get-theme-color($theme, $palette-name, default-contrast), ); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { $base-size: 12px; @return ( - text-font: typography-utils.font-family($config), + text-font: inspection.get-theme-typography($theme, body-2, font-family), text-size: $base-size, text-weight: 600, small-size-text-size: $base-size * 0.75, @@ -62,7 +61,7 @@ $prefix: (mat, badge); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mat/_bottom-sheet.scss b/src/material/core/tokens/m2/mat/_bottom-sheet.scss index e8a45d035461..ffddc1af021b 100644 --- a/src/material/core/tokens/m2/mat/_bottom-sheet.scss +++ b/src/material/core/tokens/m2/mat/_bottom-sheet.scss @@ -2,6 +2,7 @@ @use '../../token-utils'; @use '../../../typography/typography-utils'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -17,30 +18,26 @@ $prefix: (mat, bottom-sheet); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $foreground: map.get($config, foreground); - $background: map.get($config, background); - +@function get-color-tokens($theme) { @return ( - container-text-color: theming.get-color-from-palette($foreground, text), - container-background-color: theming.get-color-from-palette($background, dialog), + container-text-color: inspection.get-theme-color($theme, foreground, text), + container-background-color: inspection.get-theme-color($theme, background, dialog), ); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return ( - container-text-font: typography-utils.font-family($config, body-1) or - typography-utils.font-family($config), - container-text-line-height: typography-utils.line-height($config, body-1), - container-text-size: typography-utils.font-size($config, body-1), - container-text-tracking: typography-utils.letter-spacing($config, body-1), - container-text-weight: typography-utils.font-weight($config, body-1), + container-text-font: inspection.get-theme-typography($theme, body-2, font-family), + container-text-line-height: inspection.get-theme-typography($theme, body-2, line-height), + container-text-size: inspection.get-theme-typography($theme, body-2, font-size), + container-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing), + container-text-weight: inspection.get-theme-typography($theme, body-2, font-weight), ); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mat/_divider.scss b/src/material/core/tokens/m2/mat/_divider.scss index ee30de54a6e3..912bd1e1553b 100644 --- a/src/material/core/tokens/m2/mat/_divider.scss +++ b/src/material/core/tokens/m2/mat/_divider.scss @@ -1,6 +1,7 @@ @use 'sass:map'; @use '../../token-utils'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -15,21 +16,19 @@ $prefix: (mat, divider); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $foreground: map.get($config, foreground); - +@function get-color-tokens($theme) { @return ( - color: theming.get-color-from-palette($foreground, divider) + color: inspection.get-theme-color($theme, foreground, divider) ); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return (); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mat/_expansion.scss b/src/material/core/tokens/m2/mat/_expansion.scss index 2d850df9ba53..0d7dcb0eca73 100644 --- a/src/material/core/tokens/m2/mat/_expansion.scss +++ b/src/material/core/tokens/m2/mat/_expansion.scss @@ -1,6 +1,7 @@ @use 'sass:map'; @use '../../token-utils'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../style/sass-utils'; @use '../../../typography/typography-utils'; @@ -16,49 +17,45 @@ $prefix: (mat, expansion); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $foreground: map.get($config, foreground); - $background: map.get($config, background); - +@function get-color-tokens($theme) { @return ( - container-background-color: theming.get-color-from-palette($background, card), - container-text-color: theming.get-color-from-palette($foreground, text), - actions-divider-color: theming.get-color-from-palette($foreground, divider), - header-hover-state-layer-color: theming.get-color-from-palette($background, hover), - header-focus-state-layer-color: theming.get-color-from-palette($background, hover), - header-disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-button), - header-text-color: theming.get-color-from-palette($foreground, text), - header-description-color: theming.get-color-from-palette($foreground, secondary-text), - header-indicator-color: theming.get-color-from-palette($foreground, secondary-text), + container-background-color: inspection.get-theme-color($theme, background, card), + container-text-color: inspection.get-theme-color($theme, foreground, text), + actions-divider-color: inspection.get-theme-color($theme, foreground, divider), + header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover), + header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover), + header-disabled-state-text-color: inspection.get-theme-color( + $theme, foreground, disabled-button), + header-text-color: inspection.get-theme-color($theme, foreground, text), + header-description-color: inspection.get-theme-color($theme, foreground, secondary-text), + header-indicator-color: inspection.get-theme-color($theme, foreground, secondary-text), ); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { - $fallback-font-family: typography-utils.font-family($config); - +@function get-typography-tokens($theme) { @return ( - header-text-font: typography-utils.font-family($config, subheading-1) or $fallback-font-family, - header-text-size: typography-utils.font-size($config, subheading-1), - header-text-weight: typography-utils.font-weight($config, subheading-1), + header-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family), + header-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size), + header-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight), // TODO(crisbeto): these two properties weren't set at all before the introduction of tokens, // but it's inconsistent not to provide them since the container sets all of them. Eventually - // we should change the values to use come from `subheading-1`. + // we should change the values to use come from `subtitle-2`. header-text-line-height: inherit, header-text-tracking: inherit, - container-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family, - container-text-line-height: typography-utils.line-height($config, body-1), - container-text-size: typography-utils.font-size($config, body-1), - container-text-tracking: typography-utils.letter-spacing($config, body-1), - container-text-weight: typography-utils.font-weight($config, body-1), + container-text-font: inspection.get-theme-typography($theme, body-2, font-family), + container-text-line-height: inspection.get-theme-typography($theme, body-2, line-height), + container-text-size: inspection.get-theme-typography($theme, body-2, font-size), + container-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing), + container-text-weight: inspection.get-theme-typography($theme, body-2, font-weight), ); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { - $scale: theming.clamp-density($config, -3); +@function get-density-tokens($theme) { + $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); $collapsed-scale: ( 0: 48px, -1: 44px, diff --git a/src/material/core/tokens/m2/mat/_grid-list.scss b/src/material/core/tokens/m2/mat/_grid-list.scss index 3374d1f2bdc7..fa6e1c6fcdce 100644 --- a/src/material/core/tokens/m2/mat/_grid-list.scss +++ b/src/material/core/tokens/m2/mat/_grid-list.scss @@ -1,4 +1,5 @@ @use '../../token-utils'; +@use '../../../theming/inspection'; @use '../../../typography/typography-utils'; @use '../../../style/sass-utils'; @@ -12,25 +13,25 @@ $prefix: (mat, grid-list); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { +@function get-color-tokens($theme) { @return (); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return ( // TODO(crisbeto): other components have tokens for all typography dimensions. // Here we only set the font size to maintain the same appearance as the pre-tokens // theming API. Consider adding more tokens for letter spacing, font weight etc. - tile-header-primary-text-size: typography-utils.font-size($config, body-1), - tile-header-secondary-text-size: typography-utils.font-size($config, caption), - tile-footer-primary-text-size: typography-utils.font-size($config, body-1), - tile-footer-secondary-text-size: typography-utils.font-size($config, caption), + tile-header-primary-text-size: inspection.get-theme-typography($theme, body-2, font-size), + tile-header-secondary-text-size: inspection.get-theme-typography($theme, caption, font-size), + tile-footer-primary-text-size: inspection.get-theme-typography($theme, body-2, font-size), + tile-footer-secondary-text-size: inspection.get-theme-typography($theme, caption, font-size), ); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mat/_icon.scss b/src/material/core/tokens/m2/mat/_icon.scss index e7d4e1489e39..ec4de5a28967 100644 --- a/src/material/core/tokens/m2/mat/_icon.scss +++ b/src/material/core/tokens/m2/mat/_icon.scss @@ -11,18 +11,18 @@ $prefix: (mat, icon); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { +@function get-color-tokens($theme) { // Default the icon to `inherit` so it matches the text around it. @return private-get-icon-color-tokens(inherit); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return (); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mat/_legacy-button-toggle.scss b/src/material/core/tokens/m2/mat/_legacy-button-toggle.scss index 90991f15613a..5ed3b2b3fee8 100644 --- a/src/material/core/tokens/m2/mat/_legacy-button-toggle.scss +++ b/src/material/core/tokens/m2/mat/_legacy-button-toggle.scss @@ -2,6 +2,7 @@ @use '../../token-utils'; @use '../../../typography/typography-utils'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -18,36 +19,34 @@ $prefix: (mat, legacy-button-toggle); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $foreground: map.get($config, foreground); - $background: map.get($config, background); - +@function get-color-tokens($theme) { @return ( - text-color: theming.get-color-from-palette($foreground, hint-text), - state-layer-color: theming.get-color-from-palette($background, focused-button), - selected-state-text-color: theming.get-color-from-palette($foreground, secondary-text), - selected-state-background-color: theming.get-color-from-palette($background, selected-button), - disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-button), - disabled-state-background-color: - theming.get-color-from-palette($background, disabled-button-toggle), - disabled-selected-state-background-color: - theming.get-color-from-palette($background, selected-disabled-button) + text-color: inspection.get-theme-color($theme, foreground, hint-text), + state-layer-color: inspection.get-theme-color($theme, background, focused-button), + selected-state-text-color: inspection.get-theme-color($theme, foreground, secondary-text), + selected-state-background-color: inspection.get-theme-color( + $theme, background, selected-button), + disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button), + disabled-state-background-color: inspection.get-theme-color( + $theme, background, disabled-button-toggle), + disabled-selected-state-background-color: inspection.get-theme-color( + $theme, background, selected-disabled-button) ); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return ( // TODO(crisbeto): other components have tokens for all typography dimensions (font weight, // letter spacing etc). The button toggle only has the font to match what it had in the // old theming API and to reduce internal breakages. We should introduce more typography // tokens at some point. - text-font: typography-utils.font-family($config), + text-font: inspection.get-theme-typography($theme, body-1, font-family), ); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mat/_menu.scss b/src/material/core/tokens/m2/mat/_menu.scss index f06c35575030..02648bf1d24d 100644 --- a/src/material/core/tokens/m2/mat/_menu.scss +++ b/src/material/core/tokens/m2/mat/_menu.scss @@ -1,6 +1,7 @@ @use 'sass:map'; @use '../../token-utils'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../style/sass-utils'; @use '../../../typography/typography-utils'; @@ -16,37 +17,34 @@ $prefix: (mat, menu); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $is-dark: map.get($config, is-dark); - $foreground: map.get($config, foreground); - $background: map.get($config, background); +@function get-color-tokens($theme) { + $is-dark: inspection.get-theme-type($theme) == dark; $on-surface: if($is-dark, #fff, #000); $active-state-layer-color: rgba($on-surface, if($is-dark, 0.08, 0.04)); - $text-color: theming.get-color-from-palette($foreground, text); + $text-color: inspection.get-theme-color($theme, foreground, text); @return ( item-label-text-color: $text-color, item-icon-color: $text-color, item-hover-state-layer-color: $active-state-layer-color, item-focus-state-layer-color: $active-state-layer-color, - container-color: theming.get-color-from-palette($background, card), + container-color: inspection.get-theme-color($theme, background, card), ); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return ( - item-label-text-font: - typography-utils.font-family($config, body-1) or typography-utils.font-family($config), - item-label-text-size: typography-utils.font-size($config, body-1), - item-label-text-tracking: typography-utils.letter-spacing($config, body-1), - item-label-text-line-height: typography-utils.line-height($config, body-1), - item-label-text-weight: typography-utils.font-weight($config, body-1), + item-label-text-font: inspection.get-theme-typography($theme, body-1, font-family), + item-label-text-size: inspection.get-theme-typography($theme, body-1, font-size), + item-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing), + item-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height), + item-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight), ); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mat/_select.scss b/src/material/core/tokens/m2/mat/_select.scss index 7093411c5afa..c65f0f7ffe9c 100644 --- a/src/material/core/tokens/m2/mat/_select.scss +++ b/src/material/core/tokens/m2/mat/_select.scss @@ -3,6 +3,7 @@ @use '../../../typography/typography-utils'; @use '../../../mdc-helpers/mdc-helpers'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -15,48 +16,37 @@ $prefix: (mat, select); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $is-dark: map.get($config, is-dark); - $foreground: map.get($config, foreground); - $background: map.get($config, background); - $primary: map.get($config, primary); - $warn: map.get($config, warn); +@function get-color-tokens($theme, $palette-name: primary) { + $is-dark: inspection.get-theme-type($theme) == dark; $on-surface: if($is-dark, #fff, #000); @return ( - panel-background-color: theming.get-color-from-palette($background, card), + panel-background-color: inspection.get-theme-color($theme, background, card), enabled-trigger-text-color: rgba($on-surface, 0.87), disabled-trigger-text-color: rgba($on-surface, 0.38), placeholder-text-color: rgba($on-surface, 0.6), enabled-arrow-color: rgba($on-surface, 0.54), disabled-arrow-color: rgba($on-surface, 0.38), - focused-arrow-color: theming.get-color-from-palette($primary, default, 0.87), - invalid-arrow-color: theming.get-color-from-palette($warn, default, 0.87), + focused-arrow-color: sass-utils.safe-color-change( + inspection.get-theme-color($theme, $palette-name, default), $alpha: 0.87), + invalid-arrow-color: sass-utils.safe-color-change( + inspection.get-theme-color($theme, warn, default), $alpha: 0.87), ); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { - // TODO(crisbeto): The earlier implementation of the select used MDC's APIs to create the - // typography tokens. As a result, we unintentionally allowed `null` typography configs to be - // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary - // fallback. - @if ($config == null) { - $config: mdc-helpers.private-fallback-typography-from-mdc(); - } - +@function get-typography-tokens($theme) { @return ( - trigger-text-font: typography-utils.font-family($config, body-1) or - typography-utils.font-family($config), - trigger-text-line-height: typography-utils.line-height($config, body-1), - trigger-text-size: typography-utils.font-size($config, body-1), - trigger-text-tracking: typography-utils.letter-spacing($config, body-1), - trigger-text-weight: typography-utils.font-weight($config, body-1) + trigger-text-font: inspection.get-theme-typography($theme, body-1, font-family), + trigger-text-line-height: inspection.get-theme-typography($theme, body-1, line-height), + trigger-text-size: inspection.get-theme-typography($theme, body-1, font-size), + trigger-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing), + trigger-text-weight: inspection.get-theme-typography($theme, body-1, font-weight) ); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mat/_sidenav.scss b/src/material/core/tokens/m2/mat/_sidenav.scss index a17dfa6c7873..bae536b5ac49 100644 --- a/src/material/core/tokens/m2/mat/_sidenav.scss +++ b/src/material/core/tokens/m2/mat/_sidenav.scss @@ -3,6 +3,7 @@ @use 'sass:meta'; @use '../../token-utils'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -19,20 +20,19 @@ $prefix: (mat, sidenav); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $is-dark: map.get($config, is-dark); - $foreground: map.get($config, foreground); - $background: map.get($config, background); +@function get-color-tokens($theme) { + $is-dark: inspection.get-theme-type($theme) == dark; $scrim-opacity: 0.6; - $scrim-color: theming.get-color-from-palette($background, card, $scrim-opacity); + $scrim-color: sass-utils.safe-color-change( + inspection.get-theme-color($theme, background, card), $alpha: $scrim-opacity); $fallback-scrim-color: if($is-dark, rgba(#fff, $scrim-opacity), rgba(#000, $scrim-opacity)); @return ( - container-divider-color: theming.get-color-from-palette($foreground, divider), - container-background-color: theming.get-color-from-palette($background, dialog), - container-text-color: theming.get-color-from-palette($foreground, text), - content-background-color: theming.get-color-from-palette($background, background), - content-text-color: theming.get-color-from-palette($foreground, text), + container-divider-color: inspection.get-theme-color($theme, foreground, divider), + container-background-color: inspection.get-theme-color($theme, background, dialog), + container-text-color: inspection.get-theme-color($theme, foreground, text), + content-background-color: inspection.get-theme-color($theme, background, background), + content-text-color: inspection.get-theme-color($theme, foreground, text), // We use invert() here to have the darken the background color expected to be used. // If the background is light, we use a dark backdrop. If the background is dark, we @@ -44,12 +44,12 @@ $prefix: (mat, sidenav); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return (); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mat/_snack-bar.scss b/src/material/core/tokens/m2/mat/_snack-bar.scss index 70f704467494..df21777e97bf 100644 --- a/src/material/core/tokens/m2/mat/_snack-bar.scss +++ b/src/material/core/tokens/m2/mat/_snack-bar.scss @@ -1,6 +1,7 @@ @use 'sass:map'; @use '../../token-utils'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -13,22 +14,22 @@ $prefix: (mat, snack-bar); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $is-dark: map.get($config, is-dark); - $accent: map.get($config, accent); +@function get-color-tokens($theme) { + $is-dark: inspection.get-theme-type($theme) == dark; @return ( - button-color: if($is-dark, rgba(0, 0, 0, 0.87), theming.get-color-from-palette($accent, text)) + button-color: if( + $is-dark, rgba(0, 0, 0, 0.87), inspection.get-theme-color($theme, accent, text)) ); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return (); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mat/_standard-button-toggle.scss b/src/material/core/tokens/m2/mat/_standard-button-toggle.scss index 76c66844373f..fd8a483bf5a5 100644 --- a/src/material/core/tokens/m2/mat/_standard-button-toggle.scss +++ b/src/material/core/tokens/m2/mat/_standard-button-toggle.scss @@ -3,6 +3,7 @@ @use '../../token-utils'; @use '../../../typography/typography-utils'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -19,49 +20,50 @@ $prefix: (mat, standard-button-toggle); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $foreground: map.get($config, foreground); - $background: map.get($config, background); - $theme-divider-color: theming.get-color-from-palette($foreground, divider); +@function get-color-tokens($theme) { + $theme-divider-color: inspection.get-theme-color($theme, foreground, divider); // By default the theme usually has an rgba color for the dividers, which can // stack up with the background of a button toggle. This can cause the border // of a selected toggle to look different from an deselected one. We use a solid // color to ensure that the border always stays the same. - $divider-color: if(meta.type-of($theme-divider-color) == color, - theming.private-rgba-to-hex($theme-divider-color, map.get($background, card)), - $theme-divider-color - ); + $divider-color: if( + meta.type-of($theme-divider-color) == color, + theming.private-rgba-to-hex( + $theme-divider-color, inspection.get-theme-color($theme, background, card)), + $theme-divider-color); @return ( - text-color: theming.get-color-from-palette($foreground, text), - background-color: theming.get-color-from-palette($background, card), - state-layer-color: theming.get-color-from-palette($background, focused-button, 1), - selected-state-background-color: theming.get-color-from-palette($background, selected-button), - selected-state-text-color: theming.get-color-from-palette($foreground, text), - disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-button), - disabled-state-background-color: theming.get-color-from-palette($background, card), - disabled-selected-state-text-color: theming.get-color-from-palette($foreground, text), + text-color: inspection.get-theme-color($theme, foreground, text), + background-color: inspection.get-theme-color($theme, background, card), + state-layer-color: sass-utils.safe-color-change( + inspection.get-theme-color($theme, background, focused-button), $alpha: 1), + selected-state-background-color: inspection.get-theme-color( + $theme, background, selected-button), + selected-state-text-color: inspection.get-theme-color($theme, foreground, text), + disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button), + disabled-state-background-color: inspection.get-theme-color($theme, background, card), + disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, text), disabled-selected-state-background-color: - theming.get-color-from-palette($background, selected-disabled-button), + inspection.get-theme-color($theme, background, selected-disabled-button), divider-color: $divider-color, ); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return ( // TODO(crisbeto): other components have tokens for all typography dimensions (font weight, // letter spacing etc). The button toggle only has the font to match what it had in the // old theming API and to reduce internal breakages. We should introduce more typography // tokens at some point. - text-font: typography-utils.font-family($config), + text-font: inspection.get-theme-typography($theme, body-1, font-family), ); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { - $density-scale: theming.clamp-density($config, -4); +@function get-density-tokens($theme) { + $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -4); $size-scale: ( 0: 48px, -1: 44px, diff --git a/src/material/core/tokens/m2/mat/_tab-header-with-background.scss b/src/material/core/tokens/m2/mat/_tab-header-with-background.scss index d332fa7ce7c5..fb40ea190ff1 100644 --- a/src/material/core/tokens/m2/mat/_tab-header-with-background.scss +++ b/src/material/core/tokens/m2/mat/_tab-header-with-background.scss @@ -1,6 +1,7 @@ @use 'sass:map'; @use '../../token-utils'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -13,22 +14,21 @@ $prefix: (mat, tab-header-with-background); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $primary: map.get($config, primary); +@function get-color-tokens($theme, $palette-name: primary) { @return ( - background-color: theming.get-color-from-palette($primary, default), - foreground-color: theming.get-color-from-palette($primary, default-contrast), + background-color: inspection.get-theme-color($theme, $palette-name, default), + foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast), ); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return (); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mat/_tab-header.scss b/src/material/core/tokens/m2/mat/_tab-header.scss index edcd1fd437f6..3429533920ed 100644 --- a/src/material/core/tokens/m2/mat/_tab-header.scss +++ b/src/material/core/tokens/m2/mat/_tab-header.scss @@ -1,6 +1,7 @@ @use 'sass:map'; @use '../../token-utils'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../typography/typography-utils'; @use '../../../style/sass-utils'; @@ -14,16 +15,14 @@ $prefix: (mat, tab-header); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $is-dark: map.get($config, is-dark); - $foreground: map.get($config, foreground); - $primary: map.get($config, primary); +@function get-color-tokens($theme, $palette-name: primary) { + $is-dark: inspection.get-theme-type($theme) == dark; $inactive-label-text-color: rgba(if($is-dark, #fff, #000), 0.6); - $active-label-text-color: theming.get-color-from-palette($primary, default); - $ripple-color: theming.get-color-from-palette($primary, default); + $active-label-text-color: inspection.get-theme-color($theme, $palette-name, default); + $ripple-color: inspection.get-theme-color($theme, $palette-name, default); @return ( - disabled-ripple-color: theming.get-color-from-palette($foreground, disabled), + disabled-ripple-color: inspection.get-theme-color($theme, foreground, disabled), pagination-icon-color: if($is-dark, #fff, #000), // Note: MDC has equivalents of these tokens, but they lead to much higher selector specificity. @@ -43,20 +42,19 @@ $prefix: (mat, tab-header); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return ( // Note: MDC has equivalents of these tokens, but they lead to much higher selector specificity. - label-text-font: - typography-utils.font-family($config, button) or typography-utils.font-family($config), - label-text-size: typography-utils.font-size($config, button), - label-text-tracking: typography-utils.letter-spacing($config, button), - label-text-line-height: typography-utils.line-height($config, button), - label-text-weight: typography-utils.font-weight($config, button), + label-text-font: inspection.get-theme-typography($theme, button, font-family), + label-text-size: inspection.get-theme-typography($theme, button, font-size), + label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), + label-text-line-height: inspection.get-theme-typography($theme, button, line-height), + label-text-weight: inspection.get-theme-typography($theme, button, font-weight), ); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mat/_table.scss b/src/material/core/tokens/m2/mat/_table.scss index cd9f442e338d..819545c674b7 100644 --- a/src/material/core/tokens/m2/mat/_table.scss +++ b/src/material/core/tokens/m2/mat/_table.scss @@ -1,5 +1,6 @@ @use 'sass:map'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../typography/typography-utils'; @use '../../token-utils'; @use '../../../style/sass-utils'; @@ -16,34 +17,30 @@ $prefix: (mat, table); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $foreground: map.get($config, foreground); - $background: map.get($config, background); - +@function get-color-tokens($theme) { @return ( - background-color: theming.get-color-from-palette($background, 'card'), + background-color: inspection.get-theme-color($theme, background, 'card'), - header-headline-color: theming.get-color-from-palette($foreground, text), - row-item-label-text-color: theming.get-color-from-palette($foreground, text), - row-item-outline-color: theming.get-color-from-palette($foreground, divider), + header-headline-color: inspection.get-theme-color($theme, foreground, text), + row-item-label-text-color: inspection.get-theme-color($theme, foreground, text), + row-item-outline-color: inspection.get-theme-color($theme, foreground, divider), ); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { - $fallback-font: typography-utils.font-family($config); - $cell-font-family: typography-utils.font-family($config, body-2) or $fallback-font; - $cell-line-height: typography-utils.line-height($config, body-2); - $cell-font-size: typography-utils.font-size($config, body-2); - $cell-font-weight: typography-utils.font-weight($config, body-2); - $cell-letter-spacing: typography-utils.letter-spacing($config, body-2); +@function get-typography-tokens($theme) { + $cell-font-family: inspection.get-theme-typography($theme, body-2, font-family); + $cell-line-height: inspection.get-theme-typography($theme, body-2, line-height); + $cell-font-size: inspection.get-theme-typography($theme, body-2, font-size); + $cell-font-weight: inspection.get-theme-typography($theme, body-2, font-weight); + $cell-letter-spacing: inspection.get-theme-typography($theme, body-2, letter-spacing); @return ( - header-headline-font: typography-utils.font-family($config, subtitle-2) or $fallback-font, - header-headline-line-height: typography-utils.line-height($config, subtitle-2), - header-headline-size: typography-utils.font-size($config, subtitle-2), - header-headline-weight: typography-utils.font-weight($config, subtitle-2), - header-headline-tracking: typography-utils.letter-spacing($config, subtitle-2), + header-headline-font: inspection.get-theme-typography($theme, subtitle-2, font-family), + header-headline-line-height: inspection.get-theme-typography($theme, subtitle-2, line-height), + header-headline-size: inspection.get-theme-typography($theme, subtitle-2, font-size), + header-headline-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight), + header-headline-tracking: inspection.get-theme-typography($theme, subtitle-2, letter-spacing), // Plain cells and footer cells have the same typography. row-item-label-text-font: $cell-font-family, @@ -61,8 +58,8 @@ $prefix: (mat, table); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { - $scale: theming.clamp-density($config, -4); +@function get-density-tokens($theme) { + $scale: theming.clamp-density(inspection.get-theme-density($theme), -4); $header-scale: ( 0: 56px, -1: 52px, diff --git a/src/material/core/tokens/m2/mat/_toolbar.scss b/src/material/core/tokens/m2/mat/_toolbar.scss index 3b472dcd20c2..0179b7c6e808 100644 --- a/src/material/core/tokens/m2/mat/_toolbar.scss +++ b/src/material/core/tokens/m2/mat/_toolbar.scss @@ -2,6 +2,7 @@ @use '../../token-utils'; @use '../../../typography/typography-utils'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -14,31 +15,27 @@ $prefix: (mat, toolbar); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $foreground: map.get($config, foreground); - $background: map.get($config, background); - +@function get-color-tokens($theme) { @return private-get-color-palette-color-tokens( - $background-color: theming.get-color-from-palette($background, app-bar), - $text-color: theming.get-color-from-palette($foreground, text), + $background-color: inspection.get-theme-color($theme, background, app-bar), + $text-color: inspection.get-theme-color($theme, foreground, text), ); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return ( - title-text-font: typography-utils.font-family($config, title) or - typography-utils.font-family($config), - title-text-line-height: typography-utils.line-height($config, title), - title-text-size: typography-utils.font-size($config, title), - title-text-tracking: typography-utils.letter-spacing($config, title), - title-text-weight: typography-utils.font-weight($config, title), + title-text-font: inspection.get-theme-typography($theme, headline-6, font-family), + title-text-line-height: inspection.get-theme-typography($theme, headline-6, line-height), + title-text-size: inspection.get-theme-typography($theme, headline-6, font-size), + title-text-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing), + title-text-weight: inspection.get-theme-typography($theme, headline-6, font-weight), ); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { - $density-scale: theming.clamp-density($config, -3); +@function get-density-tokens($theme) { + $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3); $standard-scale: ( 0: 64px, -1: 60px, diff --git a/src/material/core/tokens/m2/mdc/_chip.scss b/src/material/core/tokens/m2/mdc/_chip.scss index b1d562df7203..ea79a6756170 100644 --- a/src/material/core/tokens/m2/mdc/_chip.scss +++ b/src/material/core/tokens/m2/mdc/_chip.scss @@ -1,8 +1,12 @@ +@use 'sass:color'; @use 'sass:map'; +@use 'sass:meta'; @use '../../token-utils'; @use '../../../mdc-helpers/mdc-helpers'; @use '../../../style/sass-utils'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; +@use '../../../theming/palette'; @use '../../../typography/typography-utils'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -228,14 +232,34 @@ $prefix: (mdc, chip); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $palette: map.get($config, primary); +@function get-color-tokens($theme, $palette-name: null) { + $foreground: null; + $background: null; + $state-layer-color: inspection.get-theme-color($theme, foreground, base); + $state-layer-opacity: 0.12; // 0.12 is a common value in Material Design for opacity. - $background: theming.get-color-from-palette($palette); - $foreground: theming.get-color-from-palette($palette, default-contrast); + @if $palette-name == null { + $is-dark: inspection.get-theme-type($theme) == dark; + $grey-50: map.get(palette.$grey-palette, 50); + $grey-900: map.get(palette.$grey-palette, 900); + $foreground: if($is-dark, $grey-50, $grey-900); - $state-layer-color: theming.get-color-from-palette(map.get($config, foreground), base); - $state-layer-opacity: 0.12; // 0.12 is a common value in Material Design for opacity. + $surface: inspection.get-theme-color($theme, background, card); + $on-surface: if( + mdc-helpers.variable-safe-contrast-tone($surface, $is-dark) == 'dark', + #000, + #fff + ); + $background: if( + meta.type-of($on-surface) == color and meta.type-of($surface) == color, + color.mix($on-surface, $surface, 12%), + $on-surface + ); + } + @else { + $background: inspection.get-theme-color($theme, $palette-name); + $foreground: inspection.get-theme-color($theme, $palette-name, default-contrast); + } @return ( // The text color of a disabled chip. @@ -264,33 +288,24 @@ $prefix: (mdc, chip); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { - // TODO(wagnermaciel): The earlier implementation of the chip used MDC's APIs to create the - // typography tokens. As a result, we unintentionally allowed `null` typography configs to be - // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary - // fallback. - @if ($config == null) { - $config: mdc-helpers.private-fallback-typography-from-mdc(); - } - +@function get-typography-tokens($theme) { @return ( // The font family of the chip text. - label-text-font: typography-utils.font-family($config, body-2) or - typography-utils.font-family($config), + label-text-font: inspection.get-theme-typography($theme, body-2, font-family), // The line height of the chip text. - label-text-line-height: typography-utils.line-height($config, body-2), + label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height), // The font size of the chip text. - label-text-size: typography-utils.font-size($config, body-2), + label-text-size: inspection.get-theme-typography($theme, body-2, font-size), // The letter spacing of the chip label. - label-text-tracking: typography-utils.letter-spacing($config, body-2), + label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing), // The font weight of the chip text. - label-text-weight: typography-utils.font-weight($config, body-2) + label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight) ); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { - $scale: theming.clamp-density($config, -2); +@function get-density-tokens($theme) { + $scale: theming.clamp-density(inspection.get-theme-density($theme), -2); @return ( // The height of the chip. container-height: diff --git a/src/material/core/tokens/m2/mdc/_circular-progress.scss b/src/material/core/tokens/m2/mdc/_circular-progress.scss index d8e436ddd1ec..1f04dde06726 100644 --- a/src/material/core/tokens/m2/mdc/_circular-progress.scss +++ b/src/material/core/tokens/m2/mdc/_circular-progress.scss @@ -1,5 +1,6 @@ @use 'sass:map'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../style/sass-utils'; @use '../../token-utils'; @@ -33,20 +34,20 @@ $prefix: (mdc, circular-progress); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { +@function get-color-tokens($theme) { @return ( // The color of the progress spinner's active indicator. - active-indicator-color: theming.get-color-from-palette(map.get($config, primary)) + active-indicator-color: inspection.get-theme-color($theme, primary) ); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return (); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mdc/_dialog.scss b/src/material/core/tokens/m2/mdc/_dialog.scss index b717c7885cf8..3f2f2b5d9665 100644 --- a/src/material/core/tokens/m2/mdc/_dialog.scss +++ b/src/material/core/tokens/m2/mdc/_dialog.scss @@ -1,5 +1,6 @@ @use 'sass:map'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../typography/typography-utils'; @use '../../../mdc-helpers/mdc-helpers'; @use '../../../style/sass-utils'; @@ -56,14 +57,13 @@ $prefix: (mdc, dialog); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $is-dark: map.get($config, 'is-dark'); - $background: map.get($config, background); +@function get-color-tokens($theme) { + $is-dark: inspection.get-theme-type($theme) == dark; $on-surface: if($is-dark, #fff, #000); @return ( // Background color of the container. - container-color: theming.get-color-from-palette($background, dialog), + container-color: inspection.get-theme-color($theme, background, dialog), // Color of the dialog header. subhead-color: rgba($on-surface, 0.87), // Color of the dialog body text. @@ -72,35 +72,25 @@ $prefix: (mdc, dialog); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { - // TODO(crisbeto): The earlier implementation of the dialog used MDC's APIs to create the - // typography tokens. As a result, we unintentionally allowed `null` typography configs to be - // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary - // fallback. - @if ($config == null) { - $config: mdc-helpers.private-fallback-typography-from-mdc(); - } - +@function get-typography-tokens($theme) { @return ( // Typography of the dialog header. - subhead-font: typography-utils.font-family($config, headline-6) - or typography-utils.font-family($config), - subhead-line-height: typography-utils.line-height($config, headline-6), - subhead-size: typography-utils.font-size($config, headline-6), - subhead-weight: typography-utils.font-weight($config, headline-6), - subhead-tracking: typography-utils.letter-spacing($config, headline-6), + subhead-font: inspection.get-theme-typography($theme, headline-6, font-family), + subhead-line-height: inspection.get-theme-typography($theme, headline-6, line-height), + subhead-size: inspection.get-theme-typography($theme, headline-6, font-size), + subhead-weight: inspection.get-theme-typography($theme, headline-6, font-weight), + subhead-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing), // Typography of the dialog body text. - supporting-text-font: typography-utils.font-family($config, body-1) - or typography-utils.font-family($config), - supporting-text-line-height: typography-utils.line-height($config, body-1), - supporting-text-size: typography-utils.font-size($config, body-1), - supporting-text-weight: typography-utils.font-weight($config, body-1), - supporting-text-tracking: typography-utils.letter-spacing($config, body-1), + supporting-text-font: inspection.get-theme-typography($theme, body-1, font-family), + supporting-text-line-height: inspection.get-theme-typography($theme, body-1, line-height), + supporting-text-size: inspection.get-theme-typography($theme, body-1, font-size), + supporting-text-weight: inspection.get-theme-typography($theme, body-1, font-weight), + supporting-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing), ); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mdc/_icon-button.scss b/src/material/core/tokens/m2/mdc/_icon-button.scss index ee89b90cc731..b79931ce895c 100644 --- a/src/material/core/tokens/m2/mdc/_icon-button.scss +++ b/src/material/core/tokens/m2/mdc/_icon-button.scss @@ -50,12 +50,12 @@ $prefix: (mdc, icon-button); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return (); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mdc/_plain-tooltip.scss b/src/material/core/tokens/m2/mdc/_plain-tooltip.scss index 83e3ce579ccf..4ed57079e776 100644 --- a/src/material/core/tokens/m2/mdc/_plain-tooltip.scss +++ b/src/material/core/tokens/m2/mdc/_plain-tooltip.scss @@ -1,5 +1,6 @@ @use 'sass:map'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../typography/typography-utils'; @use '../../../mdc-helpers/mdc-helpers'; @use '../../../style/sass-utils'; @@ -26,42 +27,32 @@ $prefix: (mdc, plain-tooltip); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $background: map.get($config, background); +@function get-color-tokens($theme) { @return ( // Color of the tooltip container. - container-color: theming.get-color-from-palette($background, tooltip), + container-color: inspection.get-theme-color($theme, background, tooltip), // Color of the tooltip text. supporting-text-color: #fff, ); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { - // TODO(amysorto): The earlier implementation of the tooltip used MDC's APIs to create the - // typography tokens. As a result, we unintentionally allowed `null` typography configs to be - // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary - // fallback. - @if ($config == null) { - $config: mdc-helpers.private-fallback-typography-from-mdc(); - } - +@function get-typography-tokens($theme) { @return ( // Font for the tooltip text. - supporting-text-font: typography-utils.font-family($config, caption) - or typography-utils.font-family($config), + supporting-text-font: inspection.get-theme-typography($theme, caption, font-family), // Font size for the tooltip text. - supporting-text-size: typography-utils.font-size($config, caption), + supporting-text-size: inspection.get-theme-typography($theme, caption, font-size), // Font weight of the tooltip text. - supporting-text-weight: typography-utils.font-weight($config, caption), + supporting-text-weight: inspection.get-theme-typography($theme, caption, font-weight), // Tracking (space between letters) of the tooltip text. - supporting-text-tracking: typography-utils.letter-spacing($config, caption), + supporting-text-tracking: inspection.get-theme-typography($theme, caption, letter-spacing), ); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mdc/_snack-bar.scss b/src/material/core/tokens/m2/mdc/_snack-bar.scss index cd191a22fa2e..03024f32017d 100644 --- a/src/material/core/tokens/m2/mdc/_snack-bar.scss +++ b/src/material/core/tokens/m2/mdc/_snack-bar.scss @@ -2,6 +2,7 @@ @use 'sass:meta'; @use 'sass:color'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../token-utils'; @use '../../../typography/typography-utils'; @use '../../../mdc-helpers/mdc-helpers'; @@ -58,10 +59,9 @@ $prefix: (mdc, snackbar); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $background-palette: map.get($config, background); - $is-dark: map.get($config, is-dark); - $surface: theming.get-color-from-palette($background-palette, card); +@function get-color-tokens($theme) { + $is-dark: inspection.get-theme-type($theme) == dark; + $surface: inspection.get-theme-color($theme, background, card); @return ( container-color: if(meta.type-of($surface) == color, @@ -71,26 +71,17 @@ $prefix: (mdc, snackbar); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { - // TODO(crisbeto): The earlier implementation of the snack bar used MDC's APIs to create the - // typography tokens. As a result, we unintentionally allowed `null` typography configs to be - // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary - // fallback. - @if ($config == null) { - $config: mdc-helpers.private-fallback-typography-from-mdc(); - } - +@function get-typography-tokens($theme) { @return ( - supporting-text-font: typography-utils.font-family($config, body-2) - or typography-utils.font-family($config), - supporting-text-line-height: typography-utils.line-height($config, body-2), - supporting-text-size: typography-utils.font-size($config, body-2), - supporting-text-weight: typography-utils.font-weight($config, body-2), + supporting-text-font: inspection.get-theme-typography($theme, body-2, font-family), + supporting-text-line-height: inspection.get-theme-typography($theme, body-2, line-height), + supporting-text-size: inspection.get-theme-typography($theme, body-2, font-size), + supporting-text-weight: inspection.get-theme-typography($theme, body-2, font-weight), ); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mdc/_tab-indicator.scss b/src/material/core/tokens/m2/mdc/_tab-indicator.scss index 1b8d0776497e..7ec63371a973 100644 --- a/src/material/core/tokens/m2/mdc/_tab-indicator.scss +++ b/src/material/core/tokens/m2/mdc/_tab-indicator.scss @@ -1,5 +1,6 @@ @use 'sass:map'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../style/sass-utils'; @use '../../token-utils'; @@ -21,21 +22,19 @@ $prefix: (mdc, tab-indicator); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { - $primary: map.get($config, primary); - +@function get-color-tokens($theme, $palette-name: primary) { @return ( - active-indicator-color: theming.get-color-from-palette($primary, default), + active-indicator-color: inspection.get-theme-color($theme, $palette-name, default), ); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return (); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { +@function get-density-tokens($theme) { @return (); } diff --git a/src/material/core/tokens/m2/mdc/_tab.scss b/src/material/core/tokens/m2/mdc/_tab.scss index 3869ef97da2a..e95c7e670280 100644 --- a/src/material/core/tokens/m2/mdc/_tab.scss +++ b/src/material/core/tokens/m2/mdc/_tab.scss @@ -1,5 +1,6 @@ @use 'sass:map'; @use '../../../theming/theming'; +@use '../../../theming/inspection'; @use '../../../style/sass-utils'; @use '../../token-utils'; @@ -50,18 +51,18 @@ $prefix: (mdc, tab); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($config) { +@function get-color-tokens($theme, $palette-name: primary) { @return (); } // Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($config) { +@function get-typography-tokens($theme) { @return (); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($config) { - $scale: theming.clamp-density($config, -4); +@function get-density-tokens($theme) { + $scale: theming.clamp-density(inspection.get-theme-density($theme), -4); @return ( container-height: map.get(( diff --git a/src/material/dialog/_dialog-theme.scss b/src/material/dialog/_dialog-theme.scss index 586097721f22..3cd2a4e2f7bc 100644 --- a/src/material/dialog/_dialog-theme.scss +++ b/src/material/dialog/_dialog-theme.scss @@ -2,53 +2,42 @@ @use '../core/style/sass-utils'; @use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog; @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/typography/typography'; -@mixin base($config-or-theme) { +@mixin base($theme) { // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-unthemable-tokens()); } } -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - +@mixin color($theme) { .mat-mdc-dialog-container { - @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-color-tokens($config)); + @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-color-tokens($theme)); } } -@mixin typography($config-or-theme) { - $config: typography.private-typography-to-2018-config( - theming.get-typography-config($config-or-theme)); - +@mixin typography($theme) { .mat-mdc-dialog-container { - @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-typography-tokens($config)); + @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-typography-tokens($theme)); } } -@mixin density($config-or-theme) { - $density-scale: theming.get-density-config($config-or-theme); -} +@mixin density($theme) {} -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-dialog') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - @include base($theme); - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/divider/_divider-theme.scss b/src/material/divider/_divider-theme.scss index 3ee3d0680ff5..b179d84e559a 100644 --- a/src/material/divider/_divider-theme.scss +++ b/src/material/divider/_divider-theme.scss @@ -1,36 +1,30 @@ @use '../core/style/sass-utils'; @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/tokens/token-utils'; @use '../core/tokens/m2/mat/divider' as tokens-mat-divider; -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - +@mixin color($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-divider.$prefix, - tokens-mat-divider.get-color-tokens($config)); + tokens-mat-divider.get-color-tokens($theme)); } } -@mixin typography($config-or-theme) {} +@mixin typography($theme) {} -@mixin density($config-or-theme) {} +@mixin density($theme) {} -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-divider') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/expansion/_expansion-theme.scss b/src/material/expansion/_expansion-theme.scss index 4d14da51c9da..39de4f050ad5 100644 --- a/src/material/expansion/_expansion-theme.scss +++ b/src/material/expansion/_expansion-theme.scss @@ -1,52 +1,41 @@ @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/typography/typography'; @use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; @use '../core/tokens/m2/mat/expansion' as tokens-mat-expansion; -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - +@mixin color($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-expansion.$prefix, - tokens-mat-expansion.get-color-tokens($config)); + tokens-mat-expansion.get-color-tokens($theme)); } } -@mixin typography($config-or-theme) { - $config: typography.private-typography-to-2014-config( - theming.get-typography-config($config-or-theme)); - +@mixin typography($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-expansion.$prefix, - tokens-mat-expansion.get-typography-tokens($config)); + tokens-mat-expansion.get-typography-tokens($theme)); } } -@mixin density($config-or-theme) { - $density-scale: theming.get-density-config($config-or-theme); - +@mixin density($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-expansion.$prefix, - tokens-mat-expansion.get-density-tokens($density-scale)); + tokens-mat-expansion.get-density-tokens($theme)); } } -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-expansion') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/grid-list/_grid-list-theme.scss b/src/material/grid-list/_grid-list-theme.scss index 1a3b0a18c342..03c54567b926 100644 --- a/src/material/grid-list/_grid-list-theme.scss +++ b/src/material/grid-list/_grid-list-theme.scss @@ -1,4 +1,5 @@ @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/typography/typography'; @use '../core/tokens/m2/mat/grid-list' as tokens-mat-grid-list; @use '../core/style/sass-utils'; @@ -6,35 +7,27 @@ // Include this empty mixin for consistency with the other components. -@mixin color($config-or-theme) {} - -@mixin typography($config-or-theme) { - $config: typography.private-typography-to-2014-config( - theming.get-typography-config($config-or-theme)); +@mixin color($theme) {} +@mixin typography($theme) { @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($config)); + tokens-mat-grid-list.get-typography-tokens($theme)); } } -@mixin density($config-or-theme) {} +@mixin density($theme) {} -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-grid-list') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/icon/_icon-theme.scss b/src/material/icon/_icon-theme.scss index 1daac623b3fc..ecefc6a8147c 100644 --- a/src/material/icon/_icon-theme.scss +++ b/src/material/icon/_icon-theme.scss @@ -1,58 +1,51 @@ @use 'sass:map'; @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/tokens/m2/mat/icon' as tokens-mat-icon; @use '../core/tokens/token-utils'; @use '../core/style/sass-utils'; -@mixin _palette-colors($config, $palette-name) { - $palette: map.get($config, $palette-name); - $color: theming.get-color-from-palette($palette, text); +@mixin _palette-colors($theme, $palette-name) { + $color: inspection.get-theme-color($theme, $palette-name, text); $tokens: tokens-mat-icon.private-get-icon-color-tokens($color); @include token-utils.create-token-values(tokens-mat-icon.$prefix, $tokens); } -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - +@mixin color($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-icon.$prefix, - tokens-mat-icon.get-color-tokens($config)); + tokens-mat-icon.get-color-tokens($theme)); } .mat-icon { &.mat-primary { - @include _palette-colors($config, primary); + @include _palette-colors($theme, primary); } &.mat-accent { - @include _palette-colors($config, accent); + @include _palette-colors($theme, accent); } &.mat-warn { - @include _palette-colors($config, warn); + @include _palette-colors($theme, warn); } } } -@mixin typography($config-or-theme) {} +@mixin typography($theme) {} -@mixin density($config-or-theme) {} +@mixin density($theme) {} -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss index 2335395f21c5..0e12d9098e29 100644 --- a/src/material/list/_list-theme.scss +++ b/src/material/list/_list-theme.scss @@ -12,7 +12,7 @@ @use '../core/tokens/m2/mdc/list' as tokens-mdc-list; @use '../core/typography/typography'; -@mixin base($config-or-theme) { +@mixin base($theme) { // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include mdc-list-theme.theme(tokens-mdc-list.get-unthemable-tokens()); diff --git a/src/material/menu/_menu-theme.scss b/src/material/menu/_menu-theme.scss index bc0d4fe382f5..7d1213f1e4dc 100644 --- a/src/material/menu/_menu-theme.scss +++ b/src/material/menu/_menu-theme.scss @@ -2,44 +2,35 @@ @use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/typography/typography'; - -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - +@mixin color($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-menu.$prefix, - tokens-mat-menu.get-color-tokens($config)); + tokens-mat-menu.get-color-tokens($theme)); } } -@mixin typography($config-or-theme) { - $config: typography.private-typography-to-2018-config( - theming.get-typography-config($config-or-theme)); +@mixin typography($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-menu.$prefix, - tokens-mat-menu.get-typography-tokens($config)); + tokens-mat-menu.get-typography-tokens($theme)); } } -@mixin density($config-or-theme) {} +@mixin density($theme) {} -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-menu') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/progress-spinner/_progress-spinner-theme.scss b/src/material/progress-spinner/_progress-spinner-theme.scss index 9e229dd0708f..7b7336fd2347 100644 --- a/src/material/progress-spinner/_progress-spinner-theme.scss +++ b/src/material/progress-spinner/_progress-spinner-theme.scss @@ -1,10 +1,11 @@ @use 'sass:map'; @use '../core/style/sass-utils'; @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/tokens/m2/mdc/circular-progress' as tokens-mdc-circular-progress; @use '@material/circular-progress/circular-progress-theme' as mdc-circular-progress-theme; -@mixin base($config-or-theme) { +@mixin base($theme) { // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include mdc-circular-progress-theme.theme( @@ -13,45 +14,39 @@ } } -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - $mdc-circular-progress-color-tokens: tokens-mdc-circular-progress.get-color-tokens($config); - @include sass-utils.current-selector-or-root() { +@mixin color($theme) { + $mdc-circular-progress-color-tokens: tokens-mdc-circular-progress.get-color-tokens($theme); + @include sass-utils.current-selector-or-root() { @include mdc-circular-progress-theme.theme($mdc-circular-progress-color-tokens); .mat-accent { - $color: theming.get-color-from-palette(map.get($config, accent)); + $color: inspection.get-theme-color($theme, accent); @include mdc-circular-progress-theme.theme((active-indicator-color: $color)); } .mat-warn { - $color: theming.get-color-from-palette(map.get($config, warn)); + $color: inspection.get-theme-color($theme, warn); @include mdc-circular-progress-theme.theme((active-indicator-color: $color)); } } } -@mixin typography($config-or-theme) {} +@mixin typography($theme) {} -@mixin density($config-or-theme) {} +@mixin density($theme) {} -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-progress-spinner') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - @include base($theme); - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/select/_select-theme.scss b/src/material/select/_select-theme.scss index 841c8c108022..54f94c34b1d5 100644 --- a/src/material/select/_select-theme.scss +++ b/src/material/select/_select-theme.scss @@ -6,43 +6,35 @@ @use '../core/style/sass-utils'; @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/typography/typography'; -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - +@mixin color($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-select.$prefix, - tokens-mat-select.get-color-tokens($config)); + tokens-mat-select.get-color-tokens($theme)); .mat-mdc-form-field.mat-accent { - $accent: map.get($config, accent); - $accent-config: map.merge($config, (primary: $accent)); @include token-utils.create-token-values(tokens-mat-select.$prefix, - tokens-mat-select.get-color-tokens($accent-config)); + tokens-mat-select.get-color-tokens($theme, accent)); } .mat-mdc-form-field.mat-warn { - $warn: map.get($config, warn); - $warn-config: map.merge($config, (primary: $warn)); @include token-utils.create-token-values(tokens-mat-select.$prefix, - tokens-mat-select.get-color-tokens($warn-config)); + tokens-mat-select.get-color-tokens($theme, warn)); } } } -@mixin typography($config-or-theme) { - $config: typography.private-typography-to-2018-config( - theming.get-typography-config($config-or-theme)); - +@mixin typography($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-select.$prefix, - tokens-mat-select.get-typography-tokens($config)); + tokens-mat-select.get-typography-tokens($theme)); } } -@mixin density($config-or-theme) { - $density-scale: theming.get-density-config($config-or-theme); +@mixin density($theme) { + $density-scale: inspection.get-theme-density($theme); // Density is clamped at -5 here, because MDC's form field throws an error for anything lower. $form-field-height: mdc-density.prop-value( @@ -61,25 +53,20 @@ @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-select.$prefix, - tokens-mat-select.get-density-tokens($density-scale)); + tokens-mat-select.get-density-tokens($theme)); } } -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-select') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/sidenav/_sidenav-theme.scss b/src/material/sidenav/_sidenav-theme.scss index 70407e8a8e63..494930ae0ec6 100644 --- a/src/material/sidenav/_sidenav-theme.scss +++ b/src/material/sidenav/_sidenav-theme.scss @@ -1,36 +1,30 @@ @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/tokens/m2/mat/sidenav' as tokens-mat-sidenav; @use '../core/tokens/token-utils'; @use '../core/style/sass-utils'; -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - +@mixin color($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-sidenav.$prefix, - tokens-mat-sidenav.get-color-tokens($config)); + tokens-mat-sidenav.get-color-tokens($theme)); } } -@mixin typography($config-or-theme) {} +@mixin typography($theme) {} -@mixin density($config-or-theme) {} +@mixin density($theme) {} -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-sidenav') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/snack-bar/_snack-bar-theme.scss b/src/material/snack-bar/_snack-bar-theme.scss index dcb40283ffff..edac05f72484 100644 --- a/src/material/snack-bar/_snack-bar-theme.scss +++ b/src/material/snack-bar/_snack-bar-theme.scss @@ -1,57 +1,48 @@ @use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme; @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/style/sass-utils'; @use '../core/typography/typography'; @use '../core/tokens/token-utils'; @use '../core/tokens/m2/mdc/snack-bar' as tokens-mdc-snack-bar; @use '../core/tokens/m2/mat/snack-bar' as tokens-mat-snack-bar; -@mixin base($config-or-theme) { +@mixin base($theme) { // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-unthemable-tokens()); } } -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - +@mixin color($theme) { @include sass-utils.current-selector-or-root() { - @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-color-tokens($config)); + @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-color-tokens($theme)); @include token-utils.create-token-values( tokens-mat-snack-bar.$prefix, - tokens-mat-snack-bar.get-color-tokens($config) + tokens-mat-snack-bar.get-color-tokens($theme) ); } } -@mixin typography($config-or-theme) { - $config: typography.private-typography-to-2018-config( - theming.get-typography-config($config-or-theme)); - +@mixin typography($theme) { @include sass-utils.current-selector-or-root() { - @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-typography-tokens($config)); + @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-typography-tokens($theme)); } } -@mixin density($config-or-theme) {} +@mixin density($theme) {} -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-snack-bar') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - @include base($theme); - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/table/_table-theme.scss b/src/material/table/_table-theme.scss index cc15290349ce..f3b7e609e212 100644 --- a/src/material/table/_table-theme.scss +++ b/src/material/table/_table-theme.scss @@ -1,5 +1,6 @@ @use '../core/tokens/m2/mat/table' as tokens-mat-table; @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/typography/typography'; @use '../core/tokens/token-utils'; @@ -14,49 +15,37 @@ } } -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - +@mixin color($theme) { @include _output-tokens { @include token-utils.create-token-values(tokens-mat-table.$prefix, - tokens-mat-table.get-color-tokens($config)); + tokens-mat-table.get-color-tokens($theme)); } } -@mixin typography($config-or-theme) { - $config: typography.private-typography-to-2018-config( - theming.get-typography-config($config-or-theme)); - +@mixin typography($theme) { @include _output-tokens { @include token-utils.create-token-values(tokens-mat-table.$prefix, - tokens-mat-table.get-typography-tokens($config)); + tokens-mat-table.get-typography-tokens($theme)); } } -@mixin density($config-or-theme) { - $density-scale: theming.get-density-config($config-or-theme); - +@mixin density($theme) { @include _output-tokens { @include token-utils.create-token-values(tokens-mat-table.$prefix, - tokens-mat-table.get-density-tokens($density-scale)); + tokens-mat-table.get-density-tokens($theme)); } } -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-table') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss index d4d85fc32382..5d47888af6cb 100644 --- a/src/material/tabs/_tabs-theme.scss +++ b/src/material/tabs/_tabs-theme.scss @@ -6,99 +6,86 @@ @use '../core/tokens/m2/mat/tab-header' as tokens-mat-tab-header; @use '../core/tokens/m2/mat/tab-header-with-background' as tokens-mat-tab-header-with-background; @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/typography/typography'; @use '../core/tokens/token-utils'; - -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - +@mixin color($theme) { .mat-mdc-tab-group, .mat-mdc-tab-nav-bar { - @include _palette-styles($config, primary); + @include _palette-styles($theme, primary); &.mat-accent { - @include _palette-styles($config, accent); + @include _palette-styles($theme, accent); } &.mat-warn { - @include _palette-styles($config, warn); + @include _palette-styles($theme, warn); } &.mat-background-primary { - @include _background-styles($config, primary); + @include _background-styles($theme, primary); } &.mat-background-accent { - @include _background-styles($config, accent); + @include _background-styles($theme, accent); } &.mat-background-warn { - @include _background-styles($config, warn); + @include _background-styles($theme, warn); } } } -@mixin _background-styles($initial-config, $palette) { - $config: map.merge($initial-config, (primary: map.get($initial-config, $palette))); +@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($config)); + tokens-mat-tab-header-with-background.get-color-tokens($theme, $palette-name)); } -@mixin _palette-styles($initial-config, $palette) { - $config: map.merge($initial-config, (primary: map.get($initial-config, $palette))); +@mixin _palette-styles($theme, $palette-name) { @include mdc-tab-theme.secondary-navigation-tab-theme( - tokens-mdc-tab.get-color-tokens($config)); + tokens-mdc-tab.get-color-tokens($theme, $palette-name)); @include mdc-tab-indicator-theme.theme( - tokens-mdc-tab-indicator.get-color-tokens($config)); + 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($config)); + tokens-mat-tab-header.get-color-tokens($theme, $palette-name)); } -@mixin typography($config-or-theme) { - $config: typography.private-typography-to-2018-config( - theming.get-typography-config($config-or-theme)); - +@mixin typography($theme) { .mat-mdc-tab-header { @include mdc-tab-theme.secondary-navigation-tab-theme( - tokens-mdc-tab.get-typography-tokens($config)); + tokens-mdc-tab.get-typography-tokens($theme)); @include mdc-tab-indicator-theme.theme( - tokens-mdc-tab-indicator.get-typography-tokens($config)); + 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($config)); + 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($config)); + tokens-mat-tab-header-with-background.get-typography-tokens($theme)); } } -@mixin density($config-or-theme) { - $density-scale: theming.get-density-config($config-or-theme); +@mixin density($theme) { .mat-mdc-tab-header { @include mdc-tab-theme.secondary-navigation-tab-theme( - tokens-mdc-tab.get-density-tokens($density-scale)); + tokens-mdc-tab.get-density-tokens($theme)); @include mdc-tab-indicator-theme.theme( - tokens-mdc-tab-indicator.get-density-tokens($density-scale)); + 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($density-scale)); + 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($density-scale)); + tokens-mat-tab-header-with-background.get-density-tokens($theme)); } } -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-tabs') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/toolbar/_toolbar-theme.scss b/src/material/toolbar/_toolbar-theme.scss index f456c176d2be..bf3cdbe462c8 100644 --- a/src/material/toolbar/_toolbar-theme.scss +++ b/src/material/toolbar/_toolbar-theme.scss @@ -1,77 +1,66 @@ @use 'sass:map'; @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/typography/typography'; @use '../core/tokens/m2/mat/toolbar' as tokens-mat-toolbar; @use '../core/tokens/token-utils'; @use '../core/style/sass-utils'; -@mixin _palette-styles($palette) { +@mixin _palette-styles($theme, $palette-name) { @include token-utils.create-token-values( tokens-mat-toolbar.$prefix, tokens-mat-toolbar.private-get-color-palette-color-tokens( - $background-color: theming.get-color-from-palette($palette), - $text-color: theming.get-color-from-palette($palette, default-contrast) + $background-color: inspection.get-theme-color($theme, $palette-name), + $text-color: inspection.get-theme-color($theme, $palette-name, default-contrast) ) ); } -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - +@mixin color($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-toolbar.$prefix, - tokens-mat-toolbar.get-color-tokens($config)); + tokens-mat-toolbar.get-color-tokens($theme)); } .mat-toolbar { &.mat-primary { - @include _palette-styles(map.get($config, primary)); + @include _palette-styles($theme, primary); } &.mat-accent { - @include _palette-styles(map.get($config, accent)); + @include _palette-styles($theme, accent); } &.mat-warn { - @include _palette-styles(map.get($config, warn)); + @include _palette-styles($theme, warn); } } } -@mixin typography($config-or-theme) { - $config: typography.private-typography-to-2014-config( - theming.get-typography-config($config-or-theme)); - +@mixin typography($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-toolbar.$prefix, - tokens-mat-toolbar.get-typography-tokens($config)); + tokens-mat-toolbar.get-typography-tokens($theme)); } } -@mixin density($config-or-theme) { - $density-scale: theming.get-density-config($config-or-theme); - +@mixin density($theme) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-toolbar.$prefix, - tokens-mat-toolbar.get-density-tokens($density-scale)); + tokens-mat-toolbar.get-density-tokens($theme)); } } -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-toolbar') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss index af2dcfc525cd..862202f300f5 100644 --- a/src/material/tooltip/_tooltip-theme.scss +++ b/src/material/tooltip/_tooltip-theme.scss @@ -1,19 +1,19 @@ @use '@material/tooltip/plain-tooltip-theme' as mdc-plain-tooltip-theme; @use '../core/style/sass-utils'; @use '../core/theming/theming'; +@use '../core/theming/inspection'; @use '../core/typography/typography'; @use '../core/tokens/m2/mdc/plain-tooltip' as m2-mdc-plain-tooltip; -@mixin base($config-or-theme) { +@mixin base($theme) { // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include mdc-plain-tooltip-theme.theme(m2-mdc-plain-tooltip.get-unthemable-tokens()); } } -@mixin color($config-or-theme) { - $config: theming.get-color-config($config-or-theme); - $mdc-tooltip-color-tokens: m2-mdc-plain-tooltip.get-color-tokens($config); +@mixin color($theme) { + $mdc-tooltip-color-tokens: m2-mdc-plain-tooltip.get-color-tokens($theme); // Add values for MDC tooltip tokens. @include sass-utils.current-selector-or-root() { @@ -21,10 +21,8 @@ } } -@mixin typography($config-or-theme) { - $config: typography.private-typography-to-2018-config( - theming.get-typography-config($config-or-theme)); - $mdc-tooltip-typography-tokens: m2-mdc-plain-tooltip.get-typography-tokens($config); +@mixin typography($theme) { + $mdc-tooltip-typography-tokens: m2-mdc-plain-tooltip.get-typography-tokens($theme); // Add values for MDC tooltip tokens. @include sass-utils.current-selector-or-root() { @@ -32,9 +30,8 @@ } } -@mixin density($config-or-theme) { - $density-scale: theming.get-density-config($config-or-theme); - $mdc-tooltip-density-tokens: m2-mdc-plain-tooltip.get-density-tokens($density-scale); +@mixin density($theme) { + $mdc-tooltip-density-tokens: m2-mdc-plain-tooltip.get-density-tokens($theme); // Add values for MDC tooltip tokens. @include sass-utils.current-selector-or-root() { @@ -42,22 +39,17 @@ } } -@mixin theme($theme-or-color-config) { - $theme: theming.private-legacy-get-theme($theme-or-color-config); +@mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-tooltip') { - $color: theming.get-color-config($theme); - $density: theming.get-density-config($theme); - $typography: theming.get-typography-config($theme); - @include base($theme); - @if $color != null { - @include color($color); + @if inspection.theme-has($theme, color) { + @include color($theme); } - @if $density != null { - @include density($density); + @if inspection.theme-has($theme, density) { + @include density($theme); } - @if $typography != null { - @include typography($typography); + @if inspection.theme-has($theme, typography) { + @include typography($theme); } } } diff --git a/src/universal-app/theme.scss b/src/universal-app/theme.scss index 910e09d01e19..5e44bb588c60 100644 --- a/src/universal-app/theme.scss +++ b/src/universal-app/theme.scss @@ -2,6 +2,9 @@ // Plus imports for other components in your app. +// Disable legacy API compatibility, since universal-app is fully migrated to theme inspection API. +mat.$theme-legacy-inspection-api-compatibility: false; + // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // **Be sure that you only ever include this mixin once!**