From c8c42d5010f609d90722114fe17deefbc064dfeb Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 19 Apr 2024 20:00:39 +0200 Subject: [PATCH] feat(material/core): move Material 3 support into stable Moves all of the Material 3 theming APIs into stable since they'll be considered stable APIs in v18. --- guides/material-3.md | 57 ++-- package.json | 1 + packages.bzl | 1 + src/dev-app/theme-m3.scss | 11 +- src/e2e-app/theme.scss | 7 +- src/material-experimental/BUILD.bazel | 4 +- src/material-experimental/_index.scss | 7 - src/material-experimental/theming/BUILD.bazel | 9 - .../theming/_color-api-back-compat.scss | 111 ------- src/material/_index.scss | 7 + .../_color-api-backwards-compatibility.scss | 128 ++++++++ .../core}/theming/_config-validation.scss | 34 +- .../core}/theming/_definition.scss | 10 +- .../core/theming/_palettes.scss} | 0 .../core/theming/prebuilt/azure-blue.scss | 12 +- .../core/theming/prebuilt/cyan-orange.scss | 12 +- .../core/theming/prebuilt/magenta-violet.scss | 12 +- .../core/theming/prebuilt/rose-red.scss | 12 +- .../core/theming/tests/m3-theme.spec.ts | 5 +- .../tests/theming-definition-api.spec.ts | 41 ++- .../tests/theming-inspection-api.spec.ts | 43 ++- .../theming-typography-hierarchy.spec.ts | 3 +- .../core/tokens}/_custom-tokens.scss | 178 +++++------ .../core/tokens/_density.scss} | 4 +- .../core/tokens}/_format-tokens.scss | 0 .../core/tokens}/_m3-tokens.scss | 38 +-- src/material/schematics/ng-add/index.spec.ts | 3 +- .../ng-add/theming/create-custom-theme.ts | 9 +- .../ng-generate/m3-theme/index.spec.ts | 296 +++++++++--------- .../schematics/ng-generate/m3-theme/index.ts | 4 +- src/universal-app/styles.scss | 7 +- 31 files changed, 534 insertions(+), 532 deletions(-) delete mode 100644 src/material-experimental/theming/BUILD.bazel delete mode 100644 src/material-experimental/theming/_color-api-back-compat.scss create mode 100644 src/material/core/theming/_color-api-backwards-compatibility.scss rename src/{material-experimental => material/core}/theming/_config-validation.scss (79%) rename src/{material-experimental => material/core}/theming/_definition.scss (94%) rename src/{material-experimental/theming/_m3-palettes.scss => material/core/theming/_palettes.scss} (100%) rename src/{material-experimental/theming => material/core/tokens}/_custom-tokens.scss (94%) rename src/{material-experimental/theming/_m3-density.scss => material/core/tokens/_density.scss} (98%) rename src/{material-experimental/theming => material/core/tokens}/_format-tokens.scss (100%) rename src/{material-experimental/theming => material/core/tokens}/_m3-tokens.scss (97%) diff --git a/guides/material-3.md b/guides/material-3.md index b141e9ca09e8..6dba646d8da5 100644 --- a/guides/material-3.md +++ b/guides/material-3.md @@ -6,21 +6,17 @@ system, Material Design. It is the successor to [Material 2 (M2)](https://m2.material.io/), the design system which Angular Material has followed. -As of v17.2.0, Angular Material includes experimental support for M3 styling in addition to M2. The -team plans to stabilize support for M3 after a brief period in experimental in order to get feedback -on the design and API. - ## How to use Material 3 in your app M3 is implemented in Angular Material as an alternate Sass theme for the same set of Angular Material components already used by many apps. To use M3 with Angular Material, create your theme -using the `define-theme` function from `@angular/material-experimental`, as opposed to the +using the `define-theme` function from `@angular/material`, as opposed to the `define-light-theme` or `define-dark-theme` from `@angular/material` that are used to create M2 themes. ### Defining your theme -The simplest usage of the API, `$theme: matx.define-theme()` defines a theme with default values. +The simplest usage of the API, `$theme: mat.define-theme()` defines a theme with default values. However, like its M2 counterparts, `define-theme` allows you to configure the appearance of your Angular Material app along three theming dimensions: color, typography, and density, by passing a theme configuration object. The configuration object may have the following properties. @@ -34,12 +30,12 @@ theme configuration object. The configuration object may have the following prop ```scss -@use '@angular/material-experimental' as matx; +@use '@angular/material' as mat; -$theme: matx.define-theme(( +$theme: mat.define-theme(( color: ( theme-type: dark, - primary: matx.$m3-violet-palette, + primary: mat.$violet-palette, ), typography: ( brand-family: 'Comic Sans', @@ -63,20 +59,20 @@ more about these terms): | `primary` | [Optional] Specifies the palette to use for the app's primary color palette. (Note: the secondary, neutral, and neutral-variant palettes described in the M3 spec will be automatically chosen based on your primary palette, to ensure a harmonious color combination). | | `tertiary` | [Optional] Specifies the palette to use for the app's tertiary color palette. | -There are a number of color palettes available in `@angular/material-experimental` that can be +There are a number of color palettes available in `@angular/material` that can be used with the `primary` and `tertiary` options: -- `$m3-red-palette` -- `$m3-green-palette` -- `$m3-blue-palette` -- `$m3-yellow-palette` -- `$m3-cyan-palette` -- `$m3-magenta-palette` -- `$m3-orange-palette` -- `$m3-chartreuse-palette` -- `$m3-azure-palette` -- `$m3-violet-palette` -- `$m3-rose-palette` +- `$red-palette` +- `$green-palette` +- `$blue-palette` +- `$yellow-palette` +- `$cyan-palette` +- `$magenta-palette` +- `$orange-palette` +- `$chartreuse-palette` +- `$azure-palette` +- `$violet-palette` +- `$rose-palette` Alternatively, a theme can be generated with a custom color with the following schematic: @@ -161,9 +157,8 @@ can instead apply color variants by passing the `$color-variant` option to a com ```scss @use '@angular/material' as mat; -@use '@angular/material-experimental' as matx; -$theme: matx.define-theme(); +$theme: mat.define-theme(); .tertiary-checkbox { @include mat.checkbox-color($theme, $color-variant: tertiary); @@ -231,10 +226,9 @@ overrides on the highest-level selector where they apply. ```scss @use '@angular/material' as mat; -@use '@angular/material-experimental' as matx; -$light-theme: matx.define-theme(); -$dark-theme: matx.define-theme(( +$light-theme: mat.define-theme(); +$dark-theme: mat.define-theme(( color: ( theme-type: dark ) @@ -273,7 +267,6 @@ provided by Angular Material to access properties of the theme. ```scss @use '@angular/material' as mat; -@use '@angular/material-experimental' as matx; @mixin my-comp-theme($theme) { .my-comp { @@ -410,20 +403,19 @@ We recommend _not_ relying on the `color="primary"`, `color="accent"`, or `color that are offered by a number of Angular Material components for M2 themes. However, if you want to quickly update to M3 and are willing to accept the extra CSS generated for these variants, you can enable backwards compatibility styles that restore the behavior of this API. Call the -`color-variants-back-compat` mixin from `@angular/material-experimental` with the M3 theme you want +`color-variants-backwards-compatibility` mixin from `@angular/material` with the M3 theme you want to generate color variant styles for. ```scss @use '@angular/material' as mat; -@use '@angular/material-experimental' as matx; -$theme: matx.define-theme(); +$theme: mat.define-theme(); html { @include mat.all-component-themes($theme); - @include matx.color-variants-back-compat($theme); + @include mat.color-variants-backwards-compatibility($theme); } ``` @@ -441,9 +433,8 @@ styles, pass an additional argument `$back-compat: true` to the mixin. ```scss @use '@angular/material' as mat; -@use '@angular/material-experimental' as matx; -$theme: matx.define-theme(); +$theme: mat.define-theme(); @include mat.typography-hierarchy($theme, $back-compat: true); ``` diff --git a/package.json b/package.json index 935b473b5a44..0fbbf7f7a21c 100644 --- a/package.json +++ b/package.json @@ -142,6 +142,7 @@ "@material/textfield": "15.0.0-canary.7f224ddd4.0", "@material/theme": "15.0.0-canary.7f224ddd4.0", "@material/tooltip": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", "@material/top-app-bar": "15.0.0-canary.7f224ddd4.0", "@material/touch-target": "15.0.0-canary.7f224ddd4.0", "@material/typography": "15.0.0-canary.7f224ddd4.0", diff --git a/packages.bzl b/packages.bzl index 08570f4e144d..6c2023b2cd0f 100644 --- a/packages.bzl +++ b/packages.bzl @@ -75,6 +75,7 @@ MDC_PACKAGES = [ "@material/textfield", "@material/theme", "@material/tooltip", + "@material/tokens", "@material/top-app-bar", "@material/touch-target", "@material/typography", diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss index fa15459453f0..f7ca1446af3f 100644 --- a/src/dev-app/theme-m3.scss +++ b/src/dev-app/theme-m3.scss @@ -1,5 +1,4 @@ @use '@angular/material' as mat; -@use '@angular/material-experimental' as matx; // Plus imports for other components in your app. @@ -8,11 +7,11 @@ mat.$theme-legacy-inspection-api-compatibility: false; // Create a theme with the specified color type and density. @function create-theme($type: light, $density: 0) { - @return matx.define-theme(( + @return mat.define-theme(( color: ( theme-type: $type, - primary: matx.$m3-azure-palette, - tertiary: matx.$m3-blue-palette, + primary: mat.$azure-palette, + tertiary: mat.$blue-palette, ), density: ( scale: $density @@ -78,11 +77,11 @@ $density-scales: (-1, -2, -3, -4, minimum, maximum); // Enable back-compat CSS for color="..." API & typography hierarchy. .demo-color-api-back-compat { - @include matx.color-variants-back-compat($light-theme); + @include mat.color-variants-backwards-compatibility($light-theme); @include mat.typography-hierarchy($light-theme, $back-compat: true); &.demo-unicorn-dark-theme { - @include matx.color-variants-back-compat($dark-theme); + @include mat.color-variants-backwards-compatibility($dark-theme); } } diff --git a/src/e2e-app/theme.scss b/src/e2e-app/theme.scss index ae8533a75c1f..e103c7802fb7 100644 --- a/src/e2e-app/theme.scss +++ b/src/e2e-app/theme.scss @@ -1,13 +1,12 @@ @use '@angular/material' as mat; -@use '@angular/material-experimental' as matx; @include mat.core(); -$theme: matx.define-theme(( +$theme: mat.define-theme(( color: ( theme-type: light, - primary: matx.$m3-azure-palette, - tertiary: matx.$m3-blue-palette, + primary: mat.$azure-palette, + tertiary: mat.$blue-palette, ), density: ( scale: 0, diff --git a/src/material-experimental/BUILD.bazel b/src/material-experimental/BUILD.bazel index 824cdbbf664b..7140791e0db2 100644 --- a/src/material-experimental/BUILD.bazel +++ b/src/material-experimental/BUILD.bazel @@ -19,9 +19,7 @@ ts_library( sass_library( name = "theming_scss_lib", - srcs = MATERIAL_EXPERIMENTAL_SCSS_LIBS + [ - "//src/material-experimental/theming:theming_scss_lib", - ], + srcs = MATERIAL_EXPERIMENTAL_SCSS_LIBS, ) sass_library( diff --git a/src/material-experimental/_index.scss b/src/material-experimental/_index.scss index b901ad4151ba..b862e70da073 100644 --- a/src/material-experimental/_index.scss +++ b/src/material-experimental/_index.scss @@ -4,11 +4,4 @@ @forward './popover-edit/popover-edit-theme' as popover-edit-* show popover-edit-color, popover-edit-typography, popover-edit-density, popover-edit-theme; -// Token-based theming API -@forward './theming/definition' show define-theme, define-colors, define-typography, define-density; -@forward './theming/m3-palettes' as m3-* show $m3-red-palette, $m3-green-palette, $m3-blue-palette, - $m3-yellow-palette, $m3-cyan-palette, $m3-magenta-palette, $m3-orange-palette, - $m3-chartreuse-palette, $m3-azure-palette, $m3-violet-palette, $m3-rose-palette; -@forward './theming/color-api-back-compat' show color-variants-back-compat; - // Additional public APIs for individual components diff --git a/src/material-experimental/theming/BUILD.bazel b/src/material-experimental/theming/BUILD.bazel deleted file mode 100644 index dd86907ef7c4..000000000000 --- a/src/material-experimental/theming/BUILD.bazel +++ /dev/null @@ -1,9 +0,0 @@ -load("//tools:defaults.bzl", "sass_library") - -package(default_visibility = ["//visibility:public"]) - -sass_library( - name = "theming_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = ["//src/material:sass_lib"], -) diff --git a/src/material-experimental/theming/_color-api-back-compat.scss b/src/material-experimental/theming/_color-api-back-compat.scss deleted file mode 100644 index 9ebebf185a53..000000000000 --- a/src/material-experimental/theming/_color-api-back-compat.scss +++ /dev/null @@ -1,111 +0,0 @@ -@use '@angular/material' as mat; - -// We want to emit only the overrides, because the backwards compatibility styles are usually -// emitted after all the tokens have been included once already. This allows us to save ~50kb -// from the bundle. -$_overrides-only: true; - -@mixin color-variant-styles($theme, $color-variant) { - $primary-options: (color-variant: $color-variant, emit-overrides-only: $_overrides-only); - - // Some components use the secondary color rather than primary color for `.mat-primary`. - // Those components should use the $secondary-color-variant. - $secondary-options: ( - color-variant: if($color-variant == primary, secondary, $color-variant), - emit-overrides-only: $_overrides-only - ); - - @include mat.option-color($theme, $secondary-options...); - @include mat.progress-spinner-color($theme, $primary-options...); - @include mat.pseudo-checkbox-color($theme, $primary-options...); - @include mat.stepper-color($theme, $primary-options...); - - &.mat-icon { - @include mat.icon-color($theme, $primary-options...); - } - - &.mat-mdc-checkbox { - @include mat.checkbox-color($theme, $primary-options...); - } - - &.mat-mdc-slider { - @include mat.slider-color($theme, $primary-options...); - } - - &.mat-mdc-tab-group, - &.mat-mdc-tab-nav-bar { - @include mat.tabs-color($theme, $primary-options...); - } - - &.mat-mdc-slide-toggle { - @include mat.slide-toggle-color($theme, $primary-options...); - } - - &.mat-mdc-form-field { - @include mat.select-color($theme, $primary-options...); - } - - &.mat-mdc-radio-button { - @include mat.radio-color($theme, $primary-options...); - } - - &.mat-mdc-progress-bar { - @include mat.progress-bar-color($theme, $primary-options...); - } - - &.mat-mdc-form-field { - @include mat.form-field-color($theme, $primary-options...); - } - - &.mat-datepicker-content { - @include mat.datepicker-color($theme, $primary-options...); - } - - &.mat-mdc-button-base { - @include mat.button-color($theme, $primary-options...); - } - - &.mat-mdc-standard-chip { - @include mat.chips-color($theme, $secondary-options...); - } - - .mdc-list-item__start, - .mdc-list-item__end { - @include mat.checkbox-color($theme, $primary-options...); - @include mat.radio-color($theme, $primary-options...); - } - - // M3 dropped support for warn/error color FABs. - @if $color-variant != error { - &.mat-mdc-fab, - &.mat-mdc-mini-fab { - @include mat.fab-color($theme, $primary-options...); - } - } -} - -@mixin color-variants-back-compat($theme) { - .mat-primary { - @include color-variant-styles($theme, primary); - } - .mat-badge { - @include mat.badge-color($theme, $color-variant: primary, - $emit-overrides-only: $_overrides-only); - } - - .mat-accent { - @include color-variant-styles($theme, tertiary); - } - .mat-badge-accent { - @include mat.badge-color($theme, $color-variant: tertiary, - $emit-overrides-only: $_overrides-only); - } - - .mat-warn { - @include color-variant-styles($theme, error); - } - .mat-badge-warn { - @include mat.badge-color($theme, $color-variant: error, - $emit-overrides-only: $_overrides-only); - } -} diff --git a/src/material/_index.scss b/src/material/_index.scss index d18260386643..4a1b5189b27d 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -4,6 +4,13 @@ // New theming APIs @forward './core/theming/inspection' show get-theme-version, get-theme-type, get-theme-color, get-theme-typography, get-theme-density, theme-has, theme-remove; +@forward './core/theming/definition' show define-theme, define-colors, define-typography, + define-density; +@forward './core/theming/palettes' show $red-palette, $green-palette, $blue-palette, + $yellow-palette, $cyan-palette, $magenta-palette, $orange-palette, + $chartreuse-palette, $azure-palette, $violet-palette, $rose-palette; +@forward './core/theming/color-api-backwards-compatibility' show + color-variants-backwards-compatibility; @forward './core/theming/theming' show $theme-ignore-duplication-warnings, $theme-legacy-inspection-api-compatibility; diff --git a/src/material/core/theming/_color-api-backwards-compatibility.scss b/src/material/core/theming/_color-api-backwards-compatibility.scss new file mode 100644 index 000000000000..96637f3aed3a --- /dev/null +++ b/src/material/core/theming/_color-api-backwards-compatibility.scss @@ -0,0 +1,128 @@ +@use '../../badge/badge-theme'; +@use '../../button/button-theme'; +@use '../../button/fab-theme'; +@use '../../checkbox/checkbox-theme'; +@use '../../chips/chips-theme'; +@use '../../datepicker/datepicker-theme'; +@use '../../icon/icon-theme'; +@use '../../progress-bar/progress-bar-theme'; +@use '../../progress-spinner/progress-spinner-theme'; +@use '../../radio/radio-theme'; +@use '../../select/select-theme'; +@use '../../slide-toggle/slide-toggle-theme'; +@use '../../slider/slider-theme'; +@use '../../stepper/stepper-theme'; +@use '../../tabs/tabs-theme'; +@use '../../form-field/form-field-theme'; +@use '../option/option-theme'; +@use '../selection/pseudo-checkbox/pseudo-checkbox-theme'; + +// We want to emit only the overrides, because the backwards compatibility styles are usually +// emitted after all the tokens have been included once already. This allows us to save ~50kb +// from the bundle. +$_overrides-only: true; + +@mixin color-variant-styles($theme, $color-variant) { + $primary-options: (color-variant: $color-variant, emit-overrides-only: $_overrides-only); + + // Some components use the secondary color rather than primary color for `.mat-primary`. + // Those components should use the $secondary-color-variant. + $secondary-options: ( + color-variant: if($color-variant == primary, secondary, $color-variant), + emit-overrides-only: $_overrides-only + ); + + @include option-theme.color($theme, $secondary-options...); + @include progress-spinner-theme.color($theme, $primary-options...); + @include pseudo-checkbox-theme.color($theme, $primary-options...); + @include stepper-theme.color($theme, $primary-options...); + + &.mat-icon { + @include icon-theme.color($theme, $primary-options...); + } + + &.mat-mdc-checkbox { + @include checkbox-theme.color($theme, $primary-options...); + } + + &.mat-mdc-slider { + @include slider-theme.color($theme, $primary-options...); + } + + &.mat-mdc-tab-group, + &.mat-mdc-tab-nav-bar { + @include tabs-theme.color($theme, $primary-options...); + } + + &.mat-mdc-slide-toggle { + @include slide-toggle-theme.color($theme, $primary-options...); + } + + &.mat-mdc-form-field { + @include select-theme.color($theme, $primary-options...); + } + + &.mat-mdc-radio-button { + @include radio-theme.color($theme, $primary-options...); + } + + &.mat-mdc-progress-bar { + @include progress-bar-theme.color($theme, $primary-options...); + } + + &.mat-mdc-form-field { + @include form-field-theme.color($theme, $primary-options...); + } + + &.mat-datepicker-content { + @include datepicker-theme.color($theme, $primary-options...); + } + + &.mat-mdc-button-base { + @include button-theme.color($theme, $primary-options...); + } + + &.mat-mdc-standard-chip { + @include chips-theme.color($theme, $secondary-options...); + } + + .mdc-list-item__start, + .mdc-list-item__end { + @include checkbox-theme.color($theme, $primary-options...); + @include radio-theme.color($theme, $primary-options...); + } + + // M3 dropped support for warn/error color FABs. + @if $color-variant != error { + &.mat-mdc-fab, + &.mat-mdc-mini-fab { + @include fab-theme.color($theme, $primary-options...); + } + } +} + +@mixin color-variants-backwards-compatibility($theme) { + .mat-primary { + @include color-variant-styles($theme, primary); + } + .mat-badge { + @include badge-theme.color($theme, $color-variant: primary, + $emit-overrides-only: $_overrides-only); + } + + .mat-accent { + @include color-variant-styles($theme, tertiary); + } + .mat-badge-accent { + @include badge-theme.color($theme, $color-variant: tertiary, + $emit-overrides-only: $_overrides-only); + } + + .mat-warn { + @include color-variant-styles($theme, error); + } + .mat-badge-warn { + @include badge-theme.color($theme, $color-variant: error, + $emit-overrides-only: $_overrides-only); + } +} diff --git a/src/material-experimental/theming/_config-validation.scss b/src/material/core/theming/_config-validation.scss similarity index 79% rename from src/material-experimental/theming/_config-validation.scss rename to src/material/core/theming/_config-validation.scss index 4dbf6a4dc58d..15048a99be1f 100644 --- a/src/material-experimental/theming/_config-validation.scss +++ b/src/material/core/theming/_config-validation.scss @@ -2,8 +2,8 @@ @use 'sass:map'; @use 'sass:meta'; @use 'sass:string'; -@use '@angular/material' as mat; -@use './m3-palettes'; +@use '../style/validation'; +@use './palettes'; /// Creates an error message by finding `$config` in the existing message and appending a suffix to /// it. @@ -34,15 +34,15 @@ @return true; } $keys: map.keys($palette); - $expected-keys: map.keys(m3-palettes.$red-palette); - @if mat.private-validate-allowed-values($keys, $expected-keys...) or - mat.private-validate-required-values($keys, $expected-keys...) { + $expected-keys: map.keys(palettes.$red-palette); + @if validation.validate-allowed-values($keys, $expected-keys...) or + validation.validate-required-values($keys, $expected-keys...) { @return true; } $nv-keys: map.keys(map.get($palette, neutral-variant)); - $expected-nv-keys: map.keys(map.get(m3-palettes.$red-palette, neutral-variant)); - @if mat.private-validate-allowed-values($nv-keys, $expected-nv-keys...) or - mat.private-validate-required-values($nv-keys, $expected-nv-keys...) { + $expected-nv-keys: map.keys(map.get(palettes.$red-palette, neutral-variant)); + @if validation.validate-allowed-values($nv-keys, $expected-nv-keys...) or + validation.validate-required-values($nv-keys, $expected-nv-keys...) { @return true; } @return null; @@ -52,12 +52,12 @@ /// @param {Map} $config The config to test. /// @return {List} null if no error, else the error message @function validate-theme-config($config) { - $err: mat.private-validate-type($config, 'map', 'null'); + $err: validation.validate-type($config, 'map', 'null'); @if $err { @return (#{'$config should be a configuration object. Got:'} $config); } $allowed: (color, typography, density); - $err: mat.private-validate-allowed-values(map.keys($config or ()), $allowed...); + $err: validation.validate-allowed-values(map.keys($config or ()), $allowed...); @if $err { @return ( #{'$config has unexpected properties. Valid properties are'} @@ -85,12 +85,12 @@ /// @param {Map} $config The config to test. /// @return {List} null if no error, else the error message @function validate-color-config($config) { - $err: mat.private-validate-type($config, 'map', 'null'); + $err: validation.validate-type($config, 'map', 'null'); @if $err { @return (#{'$config should be a color configuration object. Got:'} $config); } $allowed: (theme-type, primary, tertiary); - $err: mat.private-validate-allowed-values(map.keys($config or ()), $allowed...); + $err: validation.validate-allowed-values(map.keys($config or ()), $allowed...); @if $err { @return ( #{'$config has unexpected properties. Valid properties are'} @@ -124,12 +124,12 @@ /// @param {Map} $config The config to test. /// @return {List} null if no error, else the error message @function validate-typography-config($config) { - $err: mat.private-validate-type($config, 'map', 'null'); + $err: validation.validate-type($config, 'map', 'null'); @if $err { @return (#{'$config should be a typography configuration object. Got:'} $config); } $allowed: (brand-family, plain-family, bold-weight, medium-weight, regular-weight); - $err: mat.private-validate-allowed-values(map.keys($config or ()), $allowed...); + $err: validation.validate-allowed-values(map.keys($config or ()), $allowed...); @if $err { @return ( #{'$config has unexpected properties. Valid properties are'} @@ -145,17 +145,17 @@ /// @param {Map} $config The config to test. /// @return {List} null if no error, else the error message @function validate-density-config($config) { - $err: mat.private-validate-type($config, 'map', 'null'); + $err: validation.validate-type($config, 'map', 'null'); @if $err { @return (#{'$config should be a density configuration object. Got:'} $config); } - $err: mat.private-validate-allowed-values(map.keys($config or ()), scale); + $err: validation.validate-allowed-values(map.keys($config or ()), scale); @if $err { @return (#{'$config has unexpected properties. Valid properties are: scale. Found:'} $err); } @if $config and map.has-key($config, scale) { $allowed-scales: (0, -1, -2, -3, -4, -5, minimum, maximum); - @if mat.private-validate-allowed-values(map.get($config, scale), $allowed-scales...) { + @if validation.validate-allowed-values(map.get($config, scale), $allowed-scales...) { @return ( #{'Expected $config.scale to be one of: #{$allowed-scales}. Got:'} map.get($config, scale) diff --git a/src/material-experimental/theming/_definition.scss b/src/material/core/theming/_definition.scss similarity index 94% rename from src/material-experimental/theming/_definition.scss rename to src/material/core/theming/_definition.scss index cbdb0f8a0193..44567a20b9b5 100644 --- a/src/material-experimental/theming/_definition.scss +++ b/src/material/core/theming/_definition.scss @@ -1,9 +1,9 @@ // This file contains functions used to define Angular Material theme objects. @use 'sass:map'; -@use '@angular/material' as mat; -@use './m3-palettes'; -@use './m3-tokens'; +@use '../style/sass-utils'; +@use './palettes'; +@use '../tokens/m3-tokens'; @use './config-validation'; /// Map key used to store internals of theme config. @@ -20,7 +20,7 @@ $theme-version: 1; @error $err; } - @return mat.private-deep-merge-all( + @return sass-utils.deep-merge-all( define-colors(map.get($config, color) or ()), define-typography(map.get($config, typography) or ()), define-density(map.get($config, density) or ()), @@ -38,7 +38,7 @@ $theme-version: 1; } $type: map.get($config, theme-type) or light; - $primary: map.get($config, primary) or m3-palettes.$violet-palette; + $primary: map.get($config, primary) or palettes.$violet-palette; $tertiary: map.get($config, tertiary) or $primary; @return ( diff --git a/src/material-experimental/theming/_m3-palettes.scss b/src/material/core/theming/_palettes.scss similarity index 100% rename from src/material-experimental/theming/_m3-palettes.scss rename to src/material/core/theming/_palettes.scss diff --git a/src/material/core/theming/prebuilt/azure-blue.scss b/src/material/core/theming/prebuilt/azure-blue.scss index 947bc5988411..d32fb2610f5e 100644 --- a/src/material/core/theming/prebuilt/azure-blue.scss +++ b/src/material/core/theming/prebuilt/azure-blue.scss @@ -1,15 +1,17 @@ -@use '@angular/material-experimental' as matx; +@use '../../theming/definition'; +@use '../../theming/color-api-backwards-compatibility'; +@use '../../theming/palettes'; @use '../all-theme'; @use '../../core'; @use '../../typography/typography'; @include core.core(); -$theme: matx.define-theme(( +$theme: definition.define-theme(( color: ( theme-type: light, - primary: matx.$m3-azure-palette, - tertiary: matx.$m3-blue-palette, + primary: palettes.$azure-palette, + tertiary: palettes.$blue-palette, ), density: ( scale: 0, @@ -20,5 +22,5 @@ html { @include all-theme.all-component-themes($theme); } -@include matx.color-variants-back-compat($theme); +@include color-api-backwards-compatibility.color-variants-backwards-compatibility($theme); @include typography.typography-hierarchy($theme); diff --git a/src/material/core/theming/prebuilt/cyan-orange.scss b/src/material/core/theming/prebuilt/cyan-orange.scss index 2c80746c5a84..69836aa4cf98 100644 --- a/src/material/core/theming/prebuilt/cyan-orange.scss +++ b/src/material/core/theming/prebuilt/cyan-orange.scss @@ -1,15 +1,17 @@ -@use '@angular/material-experimental' as matx; +@use '../../theming/definition'; +@use '../../theming/color-api-backwards-compatibility'; +@use '../../theming/palettes'; @use '../all-theme'; @use '../../core'; @use '../../typography/typography'; @include core.core(); -$theme: matx.define-theme(( +$theme: definition.define-theme(( color: ( theme-type: dark, - primary: matx.$m3-cyan-palette, - tertiary: matx.$m3-orange-palette, + primary: palettes.$cyan-palette, + tertiary: palettes.$orange-palette, ), density: ( scale: 0, @@ -20,5 +22,5 @@ html { @include all-theme.all-component-themes($theme); } -@include matx.color-variants-back-compat($theme); +@include color-api-backwards-compatibility.color-variants-backwards-compatibility($theme); @include typography.typography-hierarchy($theme); diff --git a/src/material/core/theming/prebuilt/magenta-violet.scss b/src/material/core/theming/prebuilt/magenta-violet.scss index 3356ba52370f..060ece5b8d65 100644 --- a/src/material/core/theming/prebuilt/magenta-violet.scss +++ b/src/material/core/theming/prebuilt/magenta-violet.scss @@ -1,15 +1,17 @@ -@use '@angular/material-experimental' as matx; +@use '../../theming/definition'; +@use '../../theming/color-api-backwards-compatibility'; +@use '../../theming/palettes'; @use '../all-theme'; @use '../../core'; @use '../../typography/typography'; @include core.core(); -$theme: matx.define-theme(( +$theme: definition.define-theme(( color: ( theme-type: dark, - primary: matx.$m3-magenta-palette, - tertiary: matx.$m3-violet-palette, + primary: palettes.$magenta-palette, + tertiary: palettes.$violet-palette, ), density: ( scale: 0, @@ -20,5 +22,5 @@ html { @include all-theme.all-component-themes($theme); } -@include matx.color-variants-back-compat($theme); +@include color-api-backwards-compatibility.color-variants-backwards-compatibility($theme); @include typography.typography-hierarchy($theme); diff --git a/src/material/core/theming/prebuilt/rose-red.scss b/src/material/core/theming/prebuilt/rose-red.scss index d6f7f25b5d21..b9904a21702c 100644 --- a/src/material/core/theming/prebuilt/rose-red.scss +++ b/src/material/core/theming/prebuilt/rose-red.scss @@ -1,15 +1,17 @@ -@use '@angular/material-experimental' as matx; +@use '../../theming/definition'; +@use '../../theming/color-api-backwards-compatibility'; +@use '../../theming/palettes'; @use '../all-theme'; @use '../../core'; @use '../../typography/typography'; @include core.core(); -$theme: matx.define-theme(( +$theme: definition.define-theme(( color: ( theme-type: light, - primary: matx.$m3-rose-palette, - tertiary: matx.$m3-red-palette, + primary: palettes.$rose-palette, + tertiary: palettes.$red-palette, ), density: ( scale: 0, @@ -20,5 +22,5 @@ html { @include all-theme.all-component-themes($theme); } -@include matx.color-variants-back-compat($theme); +@include color-api-backwards-compatibility.color-variants-backwards-compatibility($theme); @include typography.typography-hierarchy($theme); diff --git a/src/material/core/theming/tests/m3-theme.spec.ts b/src/material/core/theming/tests/m3-theme.spec.ts index 49ba039a643e..f23544ec13b1 100644 --- a/src/material/core/theming/tests/m3-theme.spec.ts +++ b/src/material/core/theming/tests/m3-theme.spec.ts @@ -29,11 +29,10 @@ function transpile(content: string) { return compileString( ` @use '../../../index' as mat; - @use '../../../../material-experimental/index' as matx; $internals: _mat-theming-internals-do-not-access; - $theme: matx.define-theme(); + $theme: mat.define-theme(); ${content} `, @@ -85,7 +84,7 @@ describe('M3 theme', () => { it('should not have overlapping tokens between theme dimensions', () => { const css = transpile(` - $theme: matx.define-theme(); + $theme: mat.define-theme(); base { @include mat.all-component-bases($theme); } diff --git a/src/material/core/theming/tests/theming-definition-api.spec.ts b/src/material/core/theming/tests/theming-definition-api.spec.ts index 3c2ef4bccb86..7d10ac16608e 100644 --- a/src/material/core/theming/tests/theming-definition-api.spec.ts +++ b/src/material/core/theming/tests/theming-definition-api.spec.ts @@ -31,7 +31,6 @@ function transpile(content: string) { @use 'sass:list'; @use 'sass:map'; @use '../../../index' as mat; - @use '../../../../material-experimental/index' as matx; $internals: _mat-theming-internals-do-not-access; @@ -64,7 +63,7 @@ describe('theming definition api', () => { describe('define-theme', () => { it('should fill in defaults', () => { const css = transpile(` - $theme: matx.define-theme(); + $theme: mat.define-theme(); $data: map.get($theme, $internals); :root { --keys: #{map.keys($data)}; @@ -108,11 +107,11 @@ describe('theming definition api', () => { it('should customize colors', () => { const css = transpile(` - $theme: matx.define-theme(( + $theme: mat.define-theme(( color: ( theme-type: dark, - primary: matx.$m3-yellow-palette, - tertiary: matx.$m3-red-palette, + primary: mat.$yellow-palette, + tertiary: mat.$red-palette, ) )); $data: map.get($theme, $internals); @@ -140,7 +139,7 @@ describe('theming definition api', () => { it('should customize typography', () => { const css = transpile(` - $theme: matx.define-theme(( + $theme: mat.define-theme(( typography: ( brand-family: Comic Sans, plain-family: Wingdings, @@ -170,7 +169,7 @@ describe('theming definition api', () => { it('should customize density', () => { const css = transpile(` - $theme: matx.define-theme(( + $theme: mat.define-theme(( density: ( scale: -2 ) @@ -185,67 +184,67 @@ describe('theming definition api', () => { }); it('should throw for invalid system config', () => { - expect(() => transpile(`$theme: matx.define-theme(5)`)).toThrowError( + expect(() => transpile(`$theme: mat.define-theme(5)`)).toThrowError( /\$config should be a configuration object\. Got: 5/, ); }); it('should throw for invalid color config', () => { - expect(() => transpile(`$theme: matx.define-theme((color: 5))`)).toThrowError( + expect(() => transpile(`$theme: mat.define-theme((color: 5))`)).toThrowError( /\$config\.color should be a color configuration object\. Got: 5/, ); }); it('should throw for invalid typography config', () => { - expect(() => transpile(`$theme: matx.define-theme((typography: 5))`)).toThrowError( + expect(() => transpile(`$theme: mat.define-theme((typography: 5))`)).toThrowError( /\$config\.typography should be a typography configuration object\. Got: 5/, ); }); it('should throw for invalid density config', () => { - expect(() => transpile(`$theme: matx.define-theme((density: 5))`)).toThrowError( + expect(() => transpile(`$theme: mat.define-theme((density: 5))`)).toThrowError( /\$config\.density should be a density configuration object\. Got: 5/, ); }); it('should throw for invalid config property', () => { - expect(() => transpile(`$theme: matx.define-theme((fake: 5))`)).toThrowError( + expect(() => transpile(`$theme: mat.define-theme((fake: 5))`)).toThrowError( /\$config has unexpected properties.*Found: fake/, ); }); it('should throw for invalid color property', () => { - expect(() => transpile(`$theme: matx.define-theme((color: (fake: 5)))`)).toThrowError( + expect(() => transpile(`$theme: mat.define-theme((color: (fake: 5)))`)).toThrowError( /\$config\.color has unexpected properties.*Found: fake/, ); }); it('should throw for invalid typography property', () => { - expect(() => transpile(`$theme: matx.define-theme((typography: (fake: 5)))`)).toThrowError( + expect(() => transpile(`$theme: mat.define-theme((typography: (fake: 5)))`)).toThrowError( /\$config\.typography has unexpected properties.*Found: fake/, ); }); it('should throw for invalid density property', () => { - expect(() => transpile(`$theme: matx.define-theme((density: (fake: 5)))`)).toThrowError( + expect(() => transpile(`$theme: mat.define-theme((density: (fake: 5)))`)).toThrowError( /\$config\.density has unexpected properties.*Found: fake/, ); }); it('should throw for invalid theme type', () => { expect(() => - transpile(`$theme: matx.define-theme((color: (theme-type: black)))`), + transpile(`$theme: mat.define-theme((color: (theme-type: black)))`), ).toThrowError(/Expected \$config\.color.theme-type to be one of:.*Got: black/); }); it('should throw for invalid palette', () => { expect(() => - transpile(`$theme: matx.define-theme((color: (tertiary: mat.$m2-red-palette)))`), + transpile(`$theme: mat.define-theme((color: (tertiary: mat.$m2-red-palette)))`), ).toThrowError(/Expected \$config\.color\.tertiary to be a valid M3 palette\. Got:/); }); it('should throw for invalid density scale', () => { - expect(() => transpile(`$theme: matx.define-theme((density: (scale: 10)))`)).toThrowError( + expect(() => transpile(`$theme: mat.define-theme((density: (scale: 10)))`)).toThrowError( /Expected \$config\.density\.scale to be one of:.*Got: 10/, ); }); @@ -254,7 +253,7 @@ describe('theming definition api', () => { describe('define-colors', () => { it('should omit non-color info', () => { const css = transpile(` - $theme: matx.define-colors(); + $theme: mat.define-colors(); $data: map.get($theme, $internals); :root { --keys: #{map.keys($data)}; @@ -273,7 +272,7 @@ describe('theming definition api', () => { describe('define-typography', () => { it('should omit non-typography info', () => { const css = transpile(` - $theme: matx.define-typography(); + $theme: mat.define-typography(); $data: map.get($theme, $internals); :root { --keys: #{map.keys($data)}; @@ -287,7 +286,7 @@ describe('theming definition api', () => { describe('define-density', () => { it('should omit non-color info', () => { const css = transpile(` - $theme: matx.define-density(); + $theme: mat.define-density(); $data: map.get($theme, $internals); :root { --keys: #{map.keys($data)}; diff --git a/src/material/core/theming/tests/theming-inspection-api.spec.ts b/src/material/core/theming/tests/theming-inspection-api.spec.ts index 6cdb770fc517..43b1e807143f 100644 --- a/src/material/core/theming/tests/theming-inspection-api.spec.ts +++ b/src/material/core/theming/tests/theming-inspection-api.spec.ts @@ -29,7 +29,6 @@ function transpile(content: string) { ` @use 'sass:map'; @use '../../../index' as mat; - @use '../../../../material-experimental/index' as matx; ${content} `, @@ -246,7 +245,7 @@ describe('theming inspection api', () => { it('should get theme version', () => { expect( transpile(` - $theme: matx.define-theme(); + $theme: mat.define-theme(); div { --theme-version: #{mat.get-theme-version($theme)}; } @@ -257,7 +256,7 @@ describe('theming inspection api', () => { it('should get theme type', () => { expect( transpile(` - $theme: matx.define-theme(); + $theme: mat.define-theme(); div { --theme-type: #{mat.get-theme-type($theme)}; } @@ -268,7 +267,7 @@ describe('theming inspection api', () => { it('should get role color', () => { expect( transpile(` - $theme: matx.define-theme(); + $theme: mat.define-theme(); div { color: mat.get-theme-color($theme, primary-container); } @@ -279,7 +278,7 @@ describe('theming inspection api', () => { it('should error on invalid color role', () => { expect(() => transpile(` - $theme: matx.define-theme(); + $theme: mat.define-theme(); div { color: mat.get-theme-color($theme, fake-role); } @@ -290,7 +289,7 @@ describe('theming inspection api', () => { it('should get palette color', () => { expect( transpile(` - $theme: matx.define-theme(); + $theme: mat.define-theme(); div { color: mat.get-theme-color($theme, tertiary, 20); } @@ -301,7 +300,7 @@ describe('theming inspection api', () => { it('should error on invalid color palette', () => { expect(() => transpile(` - $theme: matx.define-theme(); + $theme: mat.define-theme(); div { color: mat.get-theme-color($theme, fake-palette, 20); } @@ -312,7 +311,7 @@ describe('theming inspection api', () => { it('should error on invalid color hue', () => { expect(() => transpile(` - $theme: matx.define-theme(); + $theme: mat.define-theme(); div { color: mat.get-theme-color($theme, neutral, 11); } @@ -323,7 +322,7 @@ describe('theming inspection api', () => { it('should error on wrong number of get-color-theme args', () => { expect(() => transpile(` - $theme: matx.define-theme(); + $theme: mat.define-theme(); div { color: mat.get-theme-color($theme); } @@ -333,7 +332,7 @@ describe('theming inspection api', () => { it('should get typography properties from theme', () => { const css = transpile(` - $theme: matx.define-theme(); + $theme: mat.define-theme(); div { font: mat.get-theme-typography($theme, headline-large); font-family: mat.get-theme-typography($theme, headline-large, font-family); @@ -354,7 +353,7 @@ describe('theming inspection api', () => { it('should error on invalid typescale', () => { expect(() => transpile(` - $theme: matx.define-theme(); + $theme: mat.define-theme(); div { font: mat.get-theme-typography($theme, subtitle-large); } @@ -365,7 +364,7 @@ describe('theming inspection api', () => { it('should error on invalid typography property', () => { expect(() => transpile(` - $theme: matx.define-theme(); + $theme: mat.define-theme(); div { text-transform: mat.get-theme-typography($theme, body-small, text-transform); } @@ -376,7 +375,7 @@ describe('theming inspection api', () => { it('should get density scale', () => { expect( transpile(` - $theme: matx.define-theme(); + $theme: mat.define-theme(); div { --density-scale: #{mat.get-theme-density($theme)}; } @@ -386,10 +385,10 @@ describe('theming inspection api', () => { it('should check what information the theme has', () => { const css = transpile(` - $theme: matx.define-theme(); - $color-only: matx.define-colors(); - $typography-only: matx.define-typography(); - $density-only: matx.define-density(); + $theme: mat.define-theme(); + $color-only: mat.define-colors(); + $typography-only: mat.define-typography(); + $density-only: mat.define-density(); div { --base: #{( mat.theme-has($theme, base), @@ -426,7 +425,7 @@ describe('theming inspection api', () => { it('should error when reading theme type from a theme with no color information', () => { expect(() => transpile(` - $theme: matx.define-density(); + $theme: mat.define-density(); div { color: mat.get-theme-type($theme); } @@ -437,7 +436,7 @@ describe('theming inspection api', () => { it('should error when reading color from a theme with no color information', () => { expect(() => transpile(` - $theme: matx.define-density(); + $theme: mat.define-density(); div { color: mat.get-theme-color($theme, primary); } @@ -448,7 +447,7 @@ describe('theming inspection api', () => { it('should error when reading typography from a theme with no typography information', () => { expect(() => transpile(` - $theme: matx.define-density(); + $theme: mat.define-density(); div { font: mat.get-theme-typography($theme, body-small); } @@ -459,7 +458,7 @@ describe('theming inspection api', () => { it('should error when reading density from a theme with no density information', () => { expect(() => transpile(` - $theme: matx.define-colors(); + $theme: mat.define-colors(); div { --density: #{mat.get-theme-density($theme)}; } @@ -469,7 +468,7 @@ describe('theming inspection api', () => { it('should not emit styles for removed theme dimensions', () => { const css = transpile(` - $theme: mat.theme-remove(matx.define-theme(), base, color, typography, density); + $theme: mat.theme-remove(mat.define-theme(), base, color, typography, density); div { @include mat.all-component-themes($theme); }`); diff --git a/src/material/core/theming/tests/theming-typography-hierarchy.spec.ts b/src/material/core/theming/tests/theming-typography-hierarchy.spec.ts index a8ecbbf278a1..d882ea1e2212 100644 --- a/src/material/core/theming/tests/theming-typography-hierarchy.spec.ts +++ b/src/material/core/theming/tests/theming-typography-hierarchy.spec.ts @@ -28,11 +28,10 @@ function transpile(content: string) { return compileString( ` @use '../../../index' as mat; - @use '../../../../material-experimental/index' as matx; $internals: _mat-theming-internals-do-not-access; - $theme: matx.define-theme(); + $theme: mat.define-theme(); ${content} `, diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material/core/tokens/_custom-tokens.scss similarity index 94% rename from src/material-experimental/theming/_custom-tokens.scss rename to src/material/core/tokens/_custom-tokens.scss index 54c98dd2229b..ebc3fa052f52 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material/core/tokens/_custom-tokens.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '@angular/material' as mat; +@use '../style/sass-utils'; @use '@material/elevation/elevation-theme' as mdc-elevation; /// Hardcode the given value, or null if hardcoded values are excluded. @@ -54,7 +54,7 @@ @return (( background-color: map.get($systems, md-sys-color, error), text-color: map.get($systems, md-sys-color, on-error), - disabled-state-background-color: mat.private-safe-color-change( + disabled-state-background-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, error), $alpha: 0.38, ), @@ -86,7 +86,7 @@ primary: ( background-color: map.get($systems, md-sys-color, primary), text-color: map.get($systems, md-sys-color, on-primary), - disabled-state-background-color: mat.private-safe-color-change( + disabled-state-background-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, primary), $alpha: 0.38, ), @@ -95,7 +95,7 @@ secondary: ( background-color: map.get($systems, md-sys-color, secondary), text-color: map.get($systems, md-sys-color, on-secondary), - disabled-state-background-color: mat.private-safe-color-change( + disabled-state-background-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, secondary), $alpha: 0.38, ), @@ -104,7 +104,7 @@ tertiary: ( background-color: map.get($systems, md-sys-color, tertiary), text-color: map.get($systems, md-sys-color, on-tertiary), - disabled-state-background-color: mat.private-safe-color-change( + disabled-state-background-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, tertiary), $alpha: 0.38, ), @@ -119,7 +119,7 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the mat-bottom-sheet @function bottom-sheet($systems, $exclude-hardcoded) { - @return mat.private-merge-all( + @return sass-utils.merge-all( _generate-typography-tokens($systems, container-text, body-large), ( container-shape: _hardcode(28px, $exclude-hardcoded), @@ -134,7 +134,7 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the mat-button-toggle @function button-toggle($systems, $exclude-hardcoded) { - @return mat.private-merge-all( + @return sass-utils.merge-all( _generate-typography-tokens($systems, label-text, label-large), ( shape: map.get($systems, md-sys-shape, corner-full), @@ -145,16 +145,16 @@ state-layer-color: map.get($systems, md-sys-color, on-surface), selected-state-background-color: map.get($systems, md-sys-color, secondary-container), selected-state-text-color: map.get($systems, md-sys-color, on-secondary-container), - disabled-state-text-color: mat.private-safe-color-change( + disabled-state-text-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38, ), disabled-state-background-color: _hardcode(transparent, $exclude-hardcoded), - disabled-selected-state-text-color: mat.private-safe-color-change( + disabled-selected-state-text-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38, ), - disabled-selected-state-background-color: mat.private-safe-color-change( + disabled-selected-state-background-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.12, ), @@ -182,7 +182,7 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the mat-card @function card($systems, $exclude-hardcoded) { - @return mat.private-merge-all( + @return sass-utils.merge-all( _generate-typography-tokens($systems, title-text, title-large), _generate-typography-tokens($systems, subtitle-text, title-medium), ( @@ -236,7 +236,7 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the mdc-chip @function mdc-chip($systems, $exclude-hardcoded) { - @return (mat.private-merge-all( + @return (sass-utils.merge-all( _generate-typography-tokens($systems, label-text, label-large), ( container-shape: _hardcode(( @@ -245,7 +245,7 @@ ), $exclude-hardcoded), with-avatar-avatar-size: _hardcode(24px, $exclude-hardcoded), label-text-color: map.get($systems, md-sys-color, on-surface-variant), - disabled-label-text-color: mat.private-safe-color-change( + disabled-label-text-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38, ), @@ -259,7 +259,7 @@ focus-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), outline-width: _hardcode(1px, $exclude-hardcoded), outline-color: map.get($systems, md-sys-color, outline), - disabled-outline-color: mat.private-safe-color-change( + disabled-outline-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.12, ), @@ -270,7 +270,7 @@ elevated-selected-container-color: map.get($systems, md-sys-color, secondary-container), flat-selected-outline-width: _hardcode(0, $exclude-hardcoded), selected-label-text-color: map.get($systems, md-sys-color, on-secondary-container), - flat-disabled-selected-container-color: mat.private-safe-color-change( + flat-disabled-selected-container-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.12, ), @@ -326,16 +326,16 @@ map.get($systems, md-sys-color, secondary), calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-primary), calendar-date-selected-state-background-color: map.get($systems, md-sys-color, primary), - calendar-date-selected-disabled-state-background-color: mat.private-safe-color-change( + calendar-date-selected-disabled-state-background-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38 ), calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, primary), - calendar-date-focus-state-background-color: mat.private-safe-color-change( + calendar-date-focus-state-background-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity) ), - calendar-date-hover-state-background-color: mat.private-safe-color-change( + calendar-date-hover-state-background-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity) ), @@ -348,23 +348,23 @@ calendar-header-divider-color: _hardcode(transparent, $exclude-hardcoded), calendar-header-text-color: map.get($systems, md-sys-color, on-surface-variant), calendar-date-today-outline-color: map.get($systems, md-sys-color, primary), - calendar-date-today-disabled-state-outline-color: mat.private-safe-color-change( + calendar-date-today-disabled-state-outline-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38 ), calendar-date-text-color: map.get($systems, md-sys-color, on-surface), calendar-date-outline-color: _hardcode(transparent, $exclude-hardcoded), - calendar-date-disabled-state-text-color: mat.private-safe-color-change( + calendar-date-disabled-state-text-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38 ), calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, primary), range-input-separator-color: map.get($systems, md-sys-color, on-surface), - range-input-disabled-state-separator-color: mat.private-safe-color-change( + range-input-disabled-state-separator-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38 ), - range-input-disabled-state-text-color: mat.private-safe-color-change( + range-input-disabled-state-text-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38 ), @@ -462,7 +462,7 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the mat-expansion @function expansion($systems, $exclude-hardcoded) { - @return mat.private-merge-all( + @return sass-utils.merge-all( _generate-typography-tokens($systems, header-text, title-medium), _generate-typography-tokens($systems, container-text, body-large), ( @@ -472,15 +472,15 @@ container-background-color: map.get($systems, md-sys-color, surface), container-text-color: map.get($systems, md-sys-color, on-surface), actions-divider-color: map.get($systems, md-sys-color, outline-variant), - header-hover-state-layer-color: mat.private-safe-color-change( + header-hover-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity) ), - header-focus-state-layer-color: mat.private-safe-color-change( + header-focus-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity) ), - header-disabled-state-text-color: mat.private-safe-color-change( + header-disabled-state-text-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), header-text-color: map.get($systems, md-sys-color, on-surface), header-description-color: map.get($systems, md-sys-color, on-surface-variant), @@ -497,16 +497,16 @@ @return (( foreground-color: map.get($systems, md-sys-color, on-primary-container), state-layer-color: map.get($systems, md-sys-color, on-primary-container), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-primary-container), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), - disabled-state-container-color: mat.private-safe-color-change( + disabled-state-container-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.12), - disabled-state-foreground-color: mat.private-safe-color-change( + disabled-state-foreground-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), ), ( // Color variants @@ -514,7 +514,7 @@ secondary: ( foreground-color: map.get($systems, md-sys-color, on-secondary-container), state-layer-color: map.get($systems, md-sys-color, on-secondary-container), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-secondary-container), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), @@ -522,7 +522,7 @@ tertiary: ( foreground-color: map.get($systems, md-sys-color, on-tertiary-container), state-layer-color: map.get($systems, md-sys-color, on-tertiary-container), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-tertiary-container), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), @@ -538,16 +538,16 @@ @return (( foreground-color: map.get($systems, md-sys-color, on-primary-container), state-layer-color: map.get($systems, md-sys-color, on-primary-container), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-primary-container), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), - disabled-state-container-color: mat.private-safe-color-change( + disabled-state-container-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.12), - disabled-state-foreground-color: mat.private-safe-color-change( + disabled-state-foreground-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), ), ( // Color variants @@ -555,7 +555,7 @@ secondary: ( foreground-color: map.get($systems, md-sys-color, on-secondary-container), state-layer-color: map.get($systems, md-sys-color, on-secondary-container), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-secondary-container), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), @@ -563,7 +563,7 @@ tertiary: ( foreground-color: map.get($systems, md-sys-color, on-tertiary-container), state-layer-color: map.get($systems, md-sys-color, on-tertiary-container), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-tertiary-container), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), @@ -576,19 +576,19 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the mat-form-field @function form-field($systems, $exclude-hardcoded) { - @return (mat.private-merge-all( + @return (sass-utils.merge-all( _generate-typography-tokens($systems, container-text, body-large), _generate-typography-tokens($systems, subscript-text, body-small), ( - disabled-input-text-placeholder-color: mat.private-safe-color-change( + disabled-input-text-placeholder-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), state-layer-color: map.get($systems, md-sys-color, on-surface), error-text-color: map.get($systems, md-sys-color, error), select-option-text-color: map.get($systems, md-ref-palette, neutral10), - select-disabled-option-text-color: mat.private-safe-color-change( + select-disabled-option-text-color: sass-utils.safe-color-change( map.get($systems, md-ref-palette, neutral10), $alpha: 0.38), enabled-select-arrow-color: map.get($systems, md-sys-color, on-surface-variant), - disabled-select-arrow-color: mat.private-safe-color-change( + disabled-select-arrow-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), focus-state-layer-opacity: _hardcode(0, $exclude-hardcoded), @@ -596,11 +596,11 @@ outlined-label-text-populated-size: map.get($systems, md-sys-typeface, body-large-size), leading-icon-color: map.get($systems, md-sys-color, on-surface-variant), - disabled-leading-icon-color: mat.private-safe-color-change( + disabled-leading-icon-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant), - disabled-trailing-icon-color: mat.private-safe-color-change( + disabled-trailing-icon-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), error-focus-trailing-icon-color: map.get($systems, md-sys-color, error), error-hover-trailing-icon-color: map.get($systems, md-sys-color, on-error-container), @@ -682,7 +682,7 @@ icon-offset: _hardcode(-4px, $exclude-hardcoded), state-layer-color: map.get($systems, md-sys-color, primary), disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, primary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), @@ -694,21 +694,21 @@ primary: (), // Default, no overrides needed. secondary: ( state-layer-color: map.get($systems, md-sys-color, secondary), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, secondary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ) ), tertiary: ( state-layer-color: map.get($systems, md-sys-color, tertiary), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, tertiary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ) ), error: ( state-layer-color: map.get($systems, md-sys-color, error), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, error), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ) @@ -727,7 +727,7 @@ icon-offset: _hardcode(-8px, $exclude-hardcoded), state-layer-color: map.get($systems, md-sys-color, on-primary), disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-primary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), @@ -739,21 +739,21 @@ primary: (), // Default, no overrides needed. secondary: ( state-layer-color: map.get($systems, md-sys-color, on-secondary), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-secondary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), ), tertiary: ( state-layer-color: map.get($systems, md-sys-color, on-tertiary), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-tertiary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), ), error: ( state-layer-color: map.get($systems, md-sys-color, on-error), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-error), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), @@ -772,7 +772,7 @@ icon-offset: _hardcode(-8px, $exclude-hardcoded), state-layer-color: map.get($systems, md-sys-color, primary), disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, primary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), @@ -784,21 +784,21 @@ primary: (), // Default, no overrides needed. secondary: ( state-layer-color: map.get($systems, md-sys-color, secondary), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, secondary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), ), tertiary: ( state-layer-color: map.get($systems, md-sys-color, tertiary), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, tertiary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), ), error: ( state-layer-color: map.get($systems, md-sys-color, error), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, error), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), @@ -817,7 +817,7 @@ icon-offset: _hardcode(-8px, $exclude-hardcoded), state-layer-color: map.get($systems, md-sys-color, primary), disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, primary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), @@ -829,21 +829,21 @@ primary: (), // Default, no overrides needed. secondary: ( state-layer-color: map.get($systems, md-sys-color, secondary), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, secondary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), ), tertiary: ( state-layer-color: map.get($systems, md-sys-color, tertiary), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, tertiary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), ), error: ( state-layer-color: map.get($systems, md-sys-color, error), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, error), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), @@ -859,7 +859,7 @@ @return ( state-layer-color: map.get($systems, md-sys-color, on-surface-variant), disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), - ripple-color: mat.private-safe-color-change( + ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface-variant), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), @@ -874,7 +874,7 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the mat-menu @function menu($systems, $exclude-hardcoded) { - @return mat.private-merge-all( + @return sass-utils.merge-all( _generate-typography-tokens($systems, item-label-text, label-large), ( container-shape: map.get($systems, md-sys-shape, corner-extra-small), @@ -884,11 +884,11 @@ item-label-text-color: map.get($systems, md-sys-color, on-surface), item-icon-color: map.get($systems, md-sys-color, on-surface-variant), item-icon-size: _hardcode(24px, $exclude-hardcoded), - item-hover-state-layer-color: mat.private-safe-color-change( + item-hover-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity) ), - item-focus-state-layer-color: mat.private-safe-color-change( + item-focus-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity) ), @@ -907,7 +907,7 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the mat-optgroup @function optgroup($systems, $exclude-hardcoded) { - @return mat.private-merge-all( + @return sass-utils.merge-all( _generate-typography-tokens($systems, label-text, title-small), ( label-text-color: map.get($systems, md-sys-color, on-surface-variant), @@ -923,11 +923,11 @@ @return (( selected-state-label-text-color: map.get($systems, md-sys-color, on-secondary-container), label-text-color: map.get($systems, md-sys-color, on-surface), - hover-state-layer-color: mat.private-safe-color-change( + hover-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity) ), - focus-state-layer-color: mat.private-safe-color-change( + focus-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity) ), @@ -966,13 +966,13 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the mat-paginator @function paginator($systems, $exclude-hardcoded) { - @return mat.private-merge-all( + @return sass-utils.merge-all( _generate-typography-tokens($systems, container-text, body-small), ( container-text-color: map.get($systems, md-sys-color, on-surface), container-background-color: map.get($systems, md-sys-color, surface), enabled-icon-color: map.get($systems, md-sys-color, on-surface-variant), - disabled-icon-color: mat.private-safe-color-change( + disabled-icon-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), select-trigger-text-size: map.get($systems, md-sys-typescale, body-small-size), ) @@ -984,7 +984,7 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the full variant of mat-pseudo-checkbox @function full-pseudo-checkbox($systems, $exclude-hardcoded) { - $disabled-color: mat.private-safe-color-change( + $disabled-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38); @return (( @@ -1019,7 +1019,7 @@ @function minimal-pseudo-checkbox($systems, $exclude-hardcoded) { @return (( selected-checkmark-color: map.get($systems, md-sys-color, primary), - disabled-selected-checkmark-color: mat.private-safe-color-change( + disabled-selected-checkmark-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), ), ( // Color variants: @@ -1042,7 +1042,7 @@ /// @return {Map} A set of custom tokens for mat-checkbox @function checkbox($systems, $exclude-hardcoded) { @return ( - disabled-label-color: mat.private-safe-color-change( + disabled-label-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), ); } @@ -1056,7 +1056,7 @@ @return (( ripple-color: map.get($systems, md-sys-color, on-surface), checked-ripple-color: map.get($systems, md-sys-color, primary), - disabled-label-color: mat.private-safe-color-change( + disabled-label-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), ), ( // Color variants: @@ -1079,7 +1079,7 @@ /// @return {Map} A set of custom tokens for the mat-ripple @function ripple($systems, $exclude-hardcoded) { @return ( - color: mat.private-safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.1), + color: sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.1), ); } @@ -1088,16 +1088,16 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the mat-select @function select($systems, $exclude-hardcoded) { - @return (mat.private-merge-all( + @return (sass-utils.merge-all( _generate-typography-tokens($systems, trigger-text, body-large), ( panel-background-color: map.get($systems, md-sys-color, surface-container), enabled-trigger-text-color: map.get($systems, md-sys-color, on-surface), - disabled-trigger-text-color: mat.private-safe-color-change( + disabled-trigger-text-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), placeholder-text-color: map.get($systems, md-sys-color, on-surface-variant), enabled-arrow-color: map.get($systems, md-sys-color, on-surface-variant), - disabled-arrow-color: mat.private-safe-color-change( + disabled-arrow-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), focused-arrow-color: map.get($systems, md-sys-color, primary), invalid-arrow-color: map.get($systems, md-sys-color, error), @@ -1133,7 +1133,7 @@ container-text-color: map.get($systems, md-sys-color, on-surface-variant), content-background-color: map.get($systems, md-sys-color, background), content-text-color: map.get($systems, md-sys-color, on-background), - scrim-color: mat.private-safe-color-change( + scrim-color: sass-utils.safe-color-change( map.get($systems, md-ref-palette, neutral-variant20), $alpha: 0.4), ); } @@ -1145,9 +1145,9 @@ @function slider($systems, $exclude-hardcoded) { @return (( ripple-color: map.get($systems, md-sys-color, primary), - hover-state-layer-color: mat.private-safe-color-change( + hover-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, primary), $alpha: 0.05), - focus-state-layer-color: mat.private-safe-color-change( + focus-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, primary), $alpha: 0.2), value-indicator-opacity: _hardcode(1, $exclude-hardcoded), value-indicator-padding: _hardcode(0, $exclude-hardcoded), @@ -1163,23 +1163,23 @@ primary: (), // Default, no overrides needed secondary: ( ripple-color: map.get($systems, md-sys-color, secondary), - hover-state-layer-color: mat.private-safe-color-change( + hover-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, secondary), $alpha: 0.05), - focus-state-layer-color: mat.private-safe-color-change( + focus-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, secondary), $alpha: 0.2), ), tertiary: ( ripple-color: map.get($systems, md-sys-color, tertiary), - hover-state-layer-color: mat.private-safe-color-change( + hover-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, tertiary), $alpha: 0.05), - focus-state-layer-color: mat.private-safe-color-change( + focus-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, tertiary), $alpha: 0.2), ), error: ( ripple-color: map.get($systems, md-sys-color, error), - hover-state-layer-color: mat.private-safe-color-change( + hover-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, error), $alpha: 0.05), - focus-state-layer-color: mat.private-safe-color-change( + focus-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, error), $alpha: 0.2), ), )); @@ -1250,11 +1250,11 @@ ( container-color: map.get($systems, md-sys-color, surface), line-color: map.get($systems, md-sys-color, outline-variant), - header-hover-state-layer-color: mat.private-safe-color-change( + header-hover-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, inverse-surface), $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity) ), - header-focus-state-layer-color: mat.private-safe-color-change( + header-focus-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, inverse-surface), $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity) ), @@ -1315,7 +1315,7 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the mat-tab-header @function tab-header($systems, $exclude-hardcoded) { - @return (mat.private-merge-all( + @return (sass-utils.merge-all( _generate-typography-tokens($systems, label-text, title-small), ( divider-color: map.get($systems, md-sys-color, surface-variant), @@ -1382,7 +1382,7 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the mat-table @function table($systems, $exclude-hardcoded) { - @return mat.private-merge-all( + @return sass-utils.merge-all( _generate-typography-tokens($systems, header-headline, title-small), _generate-typography-tokens($systems, row-item-label-text, body-medium), _generate-typography-tokens($systems, footer-supporting-text, body-medium), @@ -1401,7 +1401,7 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the mat-toolbar @function toolbar($systems, $exclude-hardcoded) { - @return mat.private-merge-all( + @return sass-utils.merge-all( _generate-typography-tokens($systems, title-text, title-large), ( container-background-color: map.get($systems, md-sys-color, surface), diff --git a/src/material-experimental/theming/_m3-density.scss b/src/material/core/tokens/_density.scss similarity index 98% rename from src/material-experimental/theming/_m3-density.scss rename to src/material/core/tokens/_density.scss index 6bab557a82e8..992efa60462e 100644 --- a/src/material-experimental/theming/_m3-density.scss +++ b/src/material/core/tokens/_density.scss @@ -1,6 +1,6 @@ @use 'sass:list'; @use 'sass:map'; -@use '@angular/material' as mat; +@use '../theming/theming'; /// Maps namespaced tokens to per-density-scale values. /// This is used as a temporary solution for density, since Material Design currently does not have @@ -163,7 +163,7 @@ $_density-tokens: ( /// @param {Number} $scale The density scale to get the value for. /// @return {*} The value for the given scale. @function _get-value-for-scale($density-values, $scale) { - $scale: mat.private-clamp-density($scale, -1 * list.length($density-values) + 1); + $scale: theming.clamp-density($scale, -1 * list.length($density-values) + 1); $index: -$scale + 1; @return list.nth($density-values, $index); } diff --git a/src/material-experimental/theming/_format-tokens.scss b/src/material/core/tokens/_format-tokens.scss similarity index 100% rename from src/material-experimental/theming/_format-tokens.scss rename to src/material/core/tokens/_format-tokens.scss diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material/core/tokens/_m3-tokens.scss similarity index 97% rename from src/material-experimental/theming/_m3-tokens.scss rename to src/material/core/tokens/_m3-tokens.scss index e2654e5f1463..b417b0e3e206 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/src/material/core/tokens/_m3-tokens.scss @@ -1,9 +1,11 @@ @use 'sass:list'; @use 'sass:map'; @use 'sass:meta'; -@use '@angular/material' as mat; @use '@material/tokens/v0_161' as mdc-tokens; -@use './m3-density'; +@use '../style/sass-utils'; +@use '../m2' as m2-theming; +@use '../tokens/m2' as m2-tokens; +@use './density'; @use './custom-tokens'; @use './format-tokens'; @@ -64,7 +66,7 @@ /// Gets the MDC tokens for the given prefix, M3 token values, and supported token slots. /// @param {List} $prefix The token prefix for the given tokens. -/// @param {Map|(Map, Map)} $m3-values A map of M3 token values for the given prefix. +/// @param {Map|(Map, Map)} $values A map of M3 token values for the given prefix. /// This param may also be a tuple of maps, the first one representing the default M3 token values, // and the second containing overrides for different color variants. // Single map example: @@ -80,17 +82,17 @@ /// @param {Map} $slots A map of token slots, with null value indicating the token is not supported. /// @param {String|null} $variant The name of the variant the token values are for. /// @return {Map} A map of fully qualified token names to values, for only the supported tokens. -@function _namespace-tokens($prefix, $m3-values, $slots, $variant: null) { +@function _namespace-tokens($prefix, $values, $slots, $variant: null) { $result: (); - @if $variant == null and meta.type-of($m3-values) == 'list' and list.length($m3-values == 2) { - $variants: list.nth($m3-values, 2); - $m3-values: list.nth($m3-values, 1); + @if $variant == null and meta.type-of($values) == 'list' and list.length($values == 2) { + $variants: list.nth($values, 2); + $values: list.nth($values, 1); @each $variant, $overrides in $variants { $result: map.merge($result, _namespace-tokens($prefix, $overrides, $slots, $variant)); } } $used-token-names: map.keys(_filter-nulls(map.get($slots, $prefix))); - $used-m3-tokens: _pick(_filter-nulls($m3-values), $used-token-names); + $used-m3-tokens: _pick(_filter-nulls($values), $used-token-names); $prefix: if($variant == null, $prefix, list.append($prefix, $variant)); @return map.merge($result, ($prefix: $used-m3-tokens)); } @@ -116,7 +118,7 @@ /// @param {Map} $error The error palette /// @return {Map} A set of `md-ref-palette` tokens @function _generate-ref-palette-tokens($primary, $tertiary, $error) { - @return mat.private-merge-all( + @return sass-utils.merge-all( (black: #000, white: #fff), _generate-palette-tokens($primary, primary), _generate-palette-tokens(map.get($primary, secondary), secondary), @@ -508,19 +510,19 @@ // TODO(mmalerba): Refactor this to not depend on the legacy theme when moving out of // material-experimental. This is a hack for now because there is no good way to get the token // slots in material-experimental without exposing them all from material. - $fake-theme: mat.m2-define-light-theme(( + $fake-theme: m2-theming.define-light-theme(( color: ( - primary: mat.m2-define-palette(mat.$m2-red-palette), - accent: mat.m2-define-palette(mat.$m2-red-palette), - warn: mat.m2-define-palette(mat.$m2-red-palette), + primary: m2-theming.define-palette(m2-theming.$red-palette), + accent: m2-theming.define-palette(m2-theming.$red-palette), + warn: m2-theming.define-palette(m2-theming.$red-palette), ), - typography: mat.m2-define-typography-config(), + typography: m2-theming.define-typography-config(), density: 0 )); - $token-slots: mat.m2-tokens-from-theme($fake-theme); + $token-slots: m2-tokens.m2-tokens-from-theme($fake-theme); // TODO(mmalerba): Fill in remaining tokens. - $result: mat.private-deep-merge-all( + $result: sass-utils.deep-merge-all( // Add the system color & typography tokens (so we can give users access via an API). ( (mdc, theme): map.get($systems, md-sys-color), @@ -972,7 +974,7 @@ // Strip out tokens that are systemized by our made up density system. @each $namespace, $tokens in $result { @each $token, $value in $tokens { - @if m3-density.is-systemized($namespace, $token) { + @if density.is-systemized($namespace, $token) { $tokens: map.remove($tokens, $token); } } @@ -1027,7 +1029,7 @@ /// @param {String|Number} $scale The regular font-weight /// @return {Map} A map of namespaced density tokens @function generate-density-tokens($scale) { - @return m3-density.get-tokens-for-scale($scale); + @return density.get-tokens-for-scale($scale); } /// Generates a set of namespaced tokens not related to color, typography, or density for all diff --git a/src/material/schematics/ng-add/index.spec.ts b/src/material/schematics/ng-add/index.spec.ts index b215a6fa06b6..095090cca825 100644 --- a/src/material/schematics/ng-add/index.spec.ts +++ b/src/material/schematics/ng-add/index.spec.ts @@ -124,8 +124,7 @@ describe('ng-add schematic', () => { const themeContent = buffer!.toString(); expect(themeContent).toContain(`@use '@angular/material' as mat;`); - expect(themeContent).toContain(`@use '@angular/material-experimental' as matx;`); - expect(themeContent).toContain(`$material-theme: matx.define-theme((`); + expect(themeContent).toContain(`$material-theme: mat.define-theme((`); }); it('should create a custom theme file if no SCSS file could be found', async () => { diff --git a/src/material/schematics/ng-add/theming/create-custom-theme.ts b/src/material/schematics/ng-add/theming/create-custom-theme.ts index 8db827ba1317..f5cd62cefaed 100644 --- a/src/material/schematics/ng-add/theming/create-custom-theme.ts +++ b/src/material/schematics/ng-add/theming/create-custom-theme.ts @@ -12,7 +12,6 @@ export function createCustomTheme(name: string = 'app') { // Custom Theming for Angular Material // For more information: https://material.angular.io/guide/theming @use '@angular/material' as mat; -@use '@angular/material-experimental' as matx; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only @@ -21,11 +20,11 @@ export function createCustomTheme(name: string = 'app') { @include mat.core(); // Define the theme object. -$${name}-theme: matx.define-theme(( +$${name}-theme: mat.define-theme(( color: ( theme-type: light, - primary: matx.$m3-azure-palette, - tertiary: matx.$m3-blue-palette, + primary: mat.$azure-palette, + tertiary: mat.$blue-palette, ), density: ( scale: 0, @@ -44,6 +43,6 @@ $${name}-theme: matx.define-theme(( // @include mat.typography-hierarchy($theme); // Comment out the line below if you want to use the deprecated \`color\` inputs. -// @include matx.color-variants-back-compat($theme); +// @include mat.color-variants-backwards-compatibility($theme); `; } diff --git a/src/material/schematics/ng-generate/m3-theme/index.spec.ts b/src/material/schematics/ng-generate/m3-theme/index.spec.ts index 3da21f06e086..9ad4f3abad98 100644 --- a/src/material/schematics/ng-generate/m3-theme/index.spec.ts +++ b/src/material/schematics/ng-generate/m3-theme/index.spec.ts @@ -9,153 +9,11 @@ import {pathToFileURL} from 'url'; import {generateSCSSTheme} from './index'; import {Schema} from './schema'; -// Hue maps created from https://m3.material.io/theme-builder#/custom (using -// #984061 as source color). Not using predefined M3 palettes since some neutral -// hues are slightly off from generated theme. -const testM3ThemePalette = new Map([ - [ - 'primary', - new Map([ - [0, '#000000'], - [10, '#3e001d'], - [20, '#5e1133'], - [25, '#6c1d3e'], - [30, '#7b2949'], - [35, '#893455'], - [40, '#984061'], - [50, '#b6587a'], - [60, '#d57194'], - [70, '#f48bae'], - [80, '#ffb0c8'], - [90, '#ffd9e2'], - [95, '#ffecf0'], - [98, '#fff8f8'], - [99, '#fffbff'], - [100, '#ffffff'], - ]), - ], - [ - 'secondary', - new Map([ - [0, '#000000'], - [10, '#2b151c'], - [20, '#422931'], - [25, '#4e343c'], - [30, '#5a3f47'], - [35, '#674b53'], - [40, '#74565f'], - [50, '#8e6f77'], - [60, '#aa8891'], - [70, '#c6a2ab'], - [80, '#e2bdc6'], - [90, '#ffd9e2'], - [95, '#ffecf0'], - [98, '#fff8f8'], - [99, '#fffbff'], - [100, '#ffffff'], - ]), - ], - [ - 'tertiary', - new Map([ - [0, '#000000'], - [10, '#2e1500'], - [20, '#48290c'], - [25, '#543416'], - [30, '#623f20'], - [35, '#6f4a2a'], - [40, '#7c5635'], - [50, '#986e4b'], - [60, '#b48862'], - [70, '#d1a27b'], - [80, '#efbd94'], - [90, '#ffdcc2'], - [95, '#ffeee2'], - [98, '#fff8f5'], - [99, '#fffbff'], - [100, '#ffffff'], - ]), - ], - [ - 'neutral', - new Map([ - [0, '#000000'], - [10, '#201a1b'], - [20, '#352f30'], - [25, '#413a3b'], - [30, '#4c4546'], - [35, '#585052'], - [40, '#645c5e'], - [50, '#7e7576'], - [60, '#988e90'], - [70, '#b3a9aa'], - [80, '#cfc4c5'], - [90, '#ebe0e1'], - [95, '#faeeef'], - [98, '#fff8f8'], - [99, '#fffbff'], - [100, '#ffffff'], - [4, '#120d0e'], - [6, '#171213'], - [12, '#241e1f'], - [17, '#2f282a'], - [22, '#3a3334'], - [24, '#3e3739'], - [87, '#e3d7d9'], - [92, '#f1e5e7'], - [94, '#f7ebec'], - [96, '#fdf1f2'], - ]), - ], - [ - 'neutral-variant', - new Map([ - [0, '#000000'], - [10, '#24191c'], - [20, '#3a2d30'], - [25, '#45383b'], - [30, '#514347'], - [35, '#5d4f52'], - [40, '#6a5b5e'], - [50, '#837377'], - [60, '#9e8c90'], - [70, '#b9a7ab'], - [80, '#d5c2c6'], - [90, '#f2dde2'], - [95, '#ffecf0'], - [98, '#fff8f8'], - [99, '#fffbff'], - [100, '#ffffff'], - ]), - ], - [ - 'error', - new Map([ - [0, '#000000'], - [10, '#410002'], - [20, '#690005'], - [25, '#7e0007'], - [30, '#93000a'], - [35, '#a80710'], - [40, '#ba1a1a'], - [50, '#de3730'], - [60, '#ff5449'], - [70, '#ff897d'], - [80, '#ffb4ab'], - [90, '#ffdad6'], - [95, '#ffedea'], - [98, '#fff8f7'], - [99, '#fffbff'], - [100, '#ffffff'], - ]), - ], -]); - const testM3ThemeScss = `// This file was generated by running 'ng generate @angular/material:m3-theme'. // Proceed with caution if making changes to this file. @use 'sass:map'; -@use '@angular/material-experimental' as matx; +@use '@angular/material' as mat; // Note: Color palettes are generated from primary: #984061 $_palettes: ( @@ -288,14 +146,14 @@ $_rest: ( $_primary: map.merge(map.get($_palettes, primary), $_rest); $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest); -$light-theme: matx.define-theme(( +$light-theme: mat.define-theme(( color: ( theme-type: light, primary: $_primary, tertiary: $_tertiary, ) )); -$dark-theme: matx.define-theme(( +$dark-theme: mat.define-theme(( color: ( theme-type: dark, primary: $_primary, @@ -322,13 +180,12 @@ const mdcSassImporter = { describe('material-m3-theme-schematic', () => { let runner: SchematicTestRunner; + let testM3ThemePalette: Map>; /** Transpiles given Sass content into CSS. */ function transpileTheme(content: string): string { return compileString( ` - @use '@angular/material' as mat; - ${content} html { @@ -356,6 +213,7 @@ describe('material-m3-theme-schematic', () => { } beforeEach(() => { + testM3ThemePalette = getPaletteMap(); runner = new SchematicTestRunner( '@angular/material', runfiles.resolveWorkspaceRelative('src/material/schematics/collection.json'), @@ -529,3 +387,147 @@ describe('material-m3-theme-schematic', () => { expect(transpileTheme(generatedSCSS)).toBe(transpileTheme(testSCSS)); }); }); + +function getPaletteMap() { + // Hue maps created from https://m3.material.io/theme-builder#/custom (using + // #984061 as source color). Not using predefined M3 palettes since some neutral + // hues are slightly off from generated theme. + return new Map([ + [ + 'primary', + new Map([ + [0, '#000000'], + [10, '#3e001d'], + [20, '#5e1133'], + [25, '#6c1d3e'], + [30, '#7b2949'], + [35, '#893455'], + [40, '#984061'], + [50, '#b6587a'], + [60, '#d57194'], + [70, '#f48bae'], + [80, '#ffb0c8'], + [90, '#ffd9e2'], + [95, '#ffecf0'], + [98, '#fff8f8'], + [99, '#fffbff'], + [100, '#ffffff'], + ]), + ], + [ + 'secondary', + new Map([ + [0, '#000000'], + [10, '#2b151c'], + [20, '#422931'], + [25, '#4e343c'], + [30, '#5a3f47'], + [35, '#674b53'], + [40, '#74565f'], + [50, '#8e6f77'], + [60, '#aa8891'], + [70, '#c6a2ab'], + [80, '#e2bdc6'], + [90, '#ffd9e2'], + [95, '#ffecf0'], + [98, '#fff8f8'], + [99, '#fffbff'], + [100, '#ffffff'], + ]), + ], + [ + 'tertiary', + new Map([ + [0, '#000000'], + [10, '#2e1500'], + [20, '#48290c'], + [25, '#543416'], + [30, '#623f20'], + [35, '#6f4a2a'], + [40, '#7c5635'], + [50, '#986e4b'], + [60, '#b48862'], + [70, '#d1a27b'], + [80, '#efbd94'], + [90, '#ffdcc2'], + [95, '#ffeee2'], + [98, '#fff8f5'], + [99, '#fffbff'], + [100, '#ffffff'], + ]), + ], + [ + 'neutral', + new Map([ + [0, '#000000'], + [10, '#201a1b'], + [20, '#352f30'], + [25, '#413a3b'], + [30, '#4c4546'], + [35, '#585052'], + [40, '#645c5e'], + [50, '#7e7576'], + [60, '#988e90'], + [70, '#b3a9aa'], + [80, '#cfc4c5'], + [90, '#ebe0e1'], + [95, '#faeeef'], + [98, '#fff8f8'], + [99, '#fffbff'], + [100, '#ffffff'], + [4, '#120d0e'], + [6, '#171213'], + [12, '#241e1f'], + [17, '#2f282a'], + [22, '#3a3334'], + [24, '#3e3739'], + [87, '#e3d7d9'], + [92, '#f1e5e7'], + [94, '#f7ebec'], + [96, '#fdf1f2'], + ]), + ], + [ + 'neutral-variant', + new Map([ + [0, '#000000'], + [10, '#24191c'], + [20, '#3a2d30'], + [25, '#45383b'], + [30, '#514347'], + [35, '#5d4f52'], + [40, '#6a5b5e'], + [50, '#837377'], + [60, '#9e8c90'], + [70, '#b9a7ab'], + [80, '#d5c2c6'], + [90, '#f2dde2'], + [95, '#ffecf0'], + [98, '#fff8f8'], + [99, '#fffbff'], + [100, '#ffffff'], + ]), + ], + [ + 'error', + new Map([ + [0, '#000000'], + [10, '#410002'], + [20, '#690005'], + [25, '#7e0007'], + [30, '#93000a'], + [35, '#a80710'], + [40, '#ba1a1a'], + [50, '#de3730'], + [60, '#ff5449'], + [70, '#ff897d'], + [80, '#ffb4ab'], + [90, '#ffdad6'], + [95, '#ffedea'], + [98, '#fff8f7'], + [99, '#fffbff'], + [100, '#ffffff'], + ]), + ], + ]); +} diff --git a/src/material/schematics/ng-generate/m3-theme/index.ts b/src/material/schematics/ng-generate/m3-theme/index.ts index 0e0dcd4d0c83..9449f406029f 100644 --- a/src/material/schematics/ng-generate/m3-theme/index.ts +++ b/src/material/schematics/ng-generate/m3-theme/index.ts @@ -112,7 +112,7 @@ export function generateSCSSTheme( '// Proceed with caution if making changes to this file.', '', "@use 'sass:map';", - "@use '@angular/material-experimental' as matx;", + "@use '@angular/material' as mat;", '', '// Note: ' + colorComment, '$_palettes: ' + getColorPalettesSCSS(colorPalettes), @@ -132,7 +132,7 @@ export function generateSCSSTheme( // from the palettes is a private function for (const themeType of themeTypes) { scss = scss.concat([ - '$' + themeType + '-theme: matx.define-theme((', + '$' + themeType + '-theme: mat.define-theme((', ' color: (', ' theme-type: ' + themeType + ',', ' primary: $_primary,', diff --git a/src/universal-app/styles.scss b/src/universal-app/styles.scss index 5e48b27aebb7..9e1af4470a0e 100644 --- a/src/universal-app/styles.scss +++ b/src/universal-app/styles.scss @@ -1,13 +1,12 @@ @use '@angular/material' as mat; -@use '@angular/material-experimental' as matx; @include mat.core(); -$theme: matx.define-theme(( +$theme: mat.define-theme(( color: ( theme-type: light, - primary: matx.$m3-azure-palette, - tertiary: matx.$m3-blue-palette, + primary: mat.$azure-palette, + tertiary: mat.$blue-palette, ), density: ( scale: 0,