From db27c239de03cef27c64a2d37c648e45fbe469db Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Tue, 1 Oct 2024 16:27:16 -0400 Subject: [PATCH 1/4] refactor(material/core): move classes out of core --- src/material/core/_core.scss | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss index 34484bdac4c9..5467f883b2b3 100644 --- a/src/material/core/_core.scss +++ b/src/material/core/_core.scss @@ -16,7 +16,10 @@ @include cdk.a11y-visually-hidden(); @include private.structural-styling(); +} +// Mixin that provides the .mat-app-background class. +@mixin app-background() { // Wrapper element that provides the theme background when the // user's content isn't inside of a `mat-sidenav-container`. @at-root { @@ -26,7 +29,14 @@ @include token-utils.create-token-slot(background-color, background-color, transparent); @include token-utils.create-token-slot(color, text-color, inherit); } + } + } +} +// Mixin that provides the .mat-elevation-* classes. +@mixin elevation-classes() { + @at-root { + @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) { // Provides external CSS classes for each elevation value. Each CSS class is formatted as // `mat-elevation-z$z-value` where `$z-value` corresponds to the z-space to which the element // is elevated. @@ -42,9 +52,3 @@ } } } - -// Mixin that provides the .mat-app-background class. -@mixin app-background() {} - -// Mixin that provides the .mat-elevation-* classes. -@mixin elevation-classes() {} From 70607e96063651a88c6d7c5ac08d393a40b5f8c2 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Tue, 1 Oct 2024 16:35:36 -0400 Subject: [PATCH 2/4] fixup! refactor(material/core): move classes out of core --- src/material/core/_core.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss index 5467f883b2b3..13a7d4297578 100644 --- a/src/material/core/_core.scss +++ b/src/material/core/_core.scss @@ -18,7 +18,8 @@ @include private.structural-styling(); } -// Mixin that provides the .mat-app-background class. +// Emits the mat-app-background CSS class. This predefined class sets the +// background color and text color of an element. @mixin app-background() { // Wrapper element that provides the theme background when the // user's content isn't inside of a `mat-sidenav-container`. @@ -33,7 +34,10 @@ } } -// Mixin that provides the .mat-elevation-* classes. +// Emits CSS classes for applying elevation. These classes follow the pattern +// mat-elevation-z#, where # is the elevation number you want, from 0 to 24. +// These predefined classes use the CSS box-shadow settings defined by the +// Material Design specification. @mixin elevation-classes() { @at-root { @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) { From 2a2feefc555b5fb33f7e68e7fca0043e007af58e Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Wed, 2 Oct 2024 09:12:20 -0400 Subject: [PATCH 3/4] fixup! refactor(material/core): move classes out of core --- src/material/core/_core.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss index 13a7d4297578..a60951c5156f 100644 --- a/src/material/core/_core.scss +++ b/src/material/core/_core.scss @@ -6,6 +6,13 @@ // Mixin that renders all of the core styles that are not theme-dependent. @mixin core() { + @include cdk.a11y-visually-hidden(); + @include private.structural-styling(); +} + +// Emits the mat-app-background CSS class. This predefined class sets the +// background color and text color of an element. +@mixin app-background() { // TODO: Move ripple styles to be dynamically loaded instead of in core. // This variable is used as a fallback for the ripple element's // background color. However, if it isn't defined anywhere, then MSS @@ -14,13 +21,6 @@ --mat-app-on-surface: initial; } - @include cdk.a11y-visually-hidden(); - @include private.structural-styling(); -} - -// Emits the mat-app-background CSS class. This predefined class sets the -// background color and text color of an element. -@mixin app-background() { // Wrapper element that provides the theme background when the // user's content isn't inside of a `mat-sidenav-container`. @at-root { From 7f6e3c092f53eed46a951be1c94f680ed982f9d3 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Wed, 2 Oct 2024 11:26:34 -0400 Subject: [PATCH 4/4] fixup! refactor(material/core): move classes out of core --- src/material/core/theming/prebuilt/azure-blue.scss | 2 ++ src/material/core/theming/prebuilt/cyan-orange.scss | 2 ++ src/material/core/theming/prebuilt/deeppurple-amber.scss | 2 ++ src/material/core/theming/prebuilt/indigo-pink.scss | 2 ++ src/material/core/theming/prebuilt/magenta-violet.scss | 2 ++ src/material/core/theming/prebuilt/pink-bluegrey.scss | 2 ++ src/material/core/theming/prebuilt/purple-green.scss | 2 ++ src/material/core/theming/prebuilt/rose-red.scss | 2 ++ 8 files changed, 16 insertions(+) diff --git a/src/material/core/theming/prebuilt/azure-blue.scss b/src/material/core/theming/prebuilt/azure-blue.scss index d32fb2610f5e..679fe103d0c6 100644 --- a/src/material/core/theming/prebuilt/azure-blue.scss +++ b/src/material/core/theming/prebuilt/azure-blue.scss @@ -6,6 +6,8 @@ @use '../../typography/typography'; @include core.core(); +@include core.app-background(); +@include core.elevation-classes(); $theme: definition.define-theme(( color: ( diff --git a/src/material/core/theming/prebuilt/cyan-orange.scss b/src/material/core/theming/prebuilt/cyan-orange.scss index 69836aa4cf98..3bb56e93d571 100644 --- a/src/material/core/theming/prebuilt/cyan-orange.scss +++ b/src/material/core/theming/prebuilt/cyan-orange.scss @@ -6,6 +6,8 @@ @use '../../typography/typography'; @include core.core(); +@include core.app-background(); +@include core.elevation-classes(); $theme: definition.define-theme(( color: ( diff --git a/src/material/core/theming/prebuilt/deeppurple-amber.scss b/src/material/core/theming/prebuilt/deeppurple-amber.scss index 27c69c101a0e..d2b1b501ca25 100644 --- a/src/material/core/theming/prebuilt/deeppurple-amber.scss +++ b/src/material/core/theming/prebuilt/deeppurple-amber.scss @@ -5,6 +5,8 @@ // Include non-theme styles for core. @include core.core(); +@include core.app-background(); +@include core.elevation-classes(); // Define a theme. $primary: m2.define-palette(m2.$deep-purple-palette); diff --git a/src/material/core/theming/prebuilt/indigo-pink.scss b/src/material/core/theming/prebuilt/indigo-pink.scss index 1ce0fcfdd2e5..69befacb992a 100644 --- a/src/material/core/theming/prebuilt/indigo-pink.scss +++ b/src/material/core/theming/prebuilt/indigo-pink.scss @@ -6,6 +6,8 @@ // Include non-theme styles for core. @include core.core(); +@include core.app-background(); +@include core.elevation-classes(); // Define a theme. $primary: m2.define-palette(m2.$indigo-palette); diff --git a/src/material/core/theming/prebuilt/magenta-violet.scss b/src/material/core/theming/prebuilt/magenta-violet.scss index 060ece5b8d65..22535103829c 100644 --- a/src/material/core/theming/prebuilt/magenta-violet.scss +++ b/src/material/core/theming/prebuilt/magenta-violet.scss @@ -6,6 +6,8 @@ @use '../../typography/typography'; @include core.core(); +@include core.app-background(); +@include core.elevation-classes(); $theme: definition.define-theme(( color: ( diff --git a/src/material/core/theming/prebuilt/pink-bluegrey.scss b/src/material/core/theming/prebuilt/pink-bluegrey.scss index 7e5b8bf81315..5872bd4d1e05 100644 --- a/src/material/core/theming/prebuilt/pink-bluegrey.scss +++ b/src/material/core/theming/prebuilt/pink-bluegrey.scss @@ -6,6 +6,8 @@ // Include non-theme styles for core. @include core.core(); +@include core.app-background(); +@include core.elevation-classes(); // Define a theme. $primary: m2.define-palette(m2.$pink-palette, 700, 500, 900); diff --git a/src/material/core/theming/prebuilt/purple-green.scss b/src/material/core/theming/prebuilt/purple-green.scss index ee4212d4cd54..851155e161e4 100644 --- a/src/material/core/theming/prebuilt/purple-green.scss +++ b/src/material/core/theming/prebuilt/purple-green.scss @@ -6,6 +6,8 @@ // Include non-theme styles for core. @include core.core(); +@include core.app-background(); +@include core.elevation-classes(); // Define a theme. $primary: m2.define-palette(m2.$purple-palette, 700, 500, 800); diff --git a/src/material/core/theming/prebuilt/rose-red.scss b/src/material/core/theming/prebuilt/rose-red.scss index b9904a21702c..22efa203137a 100644 --- a/src/material/core/theming/prebuilt/rose-red.scss +++ b/src/material/core/theming/prebuilt/rose-red.scss @@ -6,6 +6,8 @@ @use '../../typography/typography'; @include core.core(); +@include core.app-background(); +@include core.elevation-classes(); $theme: definition.define-theme(( color: (