From a2d38eb0b3f4be195bf4eb589068de0eecdd82e2 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Fri, 30 May 2025 15:53:07 -0600 Subject: [PATCH] refactor: merge light/dark color config definition --- src/material/core/m2/_theming.scss | 134 +++++++++-------------------- 1 file changed, 39 insertions(+), 95 deletions(-) diff --git a/src/material/core/m2/_theming.scss b/src/material/core/m2/_theming.scss index bd53421f7f4f..a246c39aa3ad 100644 --- a/src/material/core/m2/_theming.scss +++ b/src/material/core/m2/_theming.scss @@ -113,52 +113,30 @@ @return $theme; } -// Creates a light-themed color configuration from the specified -// primary, accent and warn palettes. -@function _mat-create-light-color-config($primary, $accent, $warn: null) { +// Creates a color configuration from the specified primary, accent and warn palettes. +@function _mat-create-color-config($primary, $accent, $warn, $is-dark) { @return ( primary: $primary, accent: $accent, - warn: if($warn != null, $warn, define-palette(palette.$red-palette)), - is-dark: false, - foreground: palette.$light-theme-foreground-palette, - background: palette.$light-theme-background-palette, + warn: $warn, + is-dark: $is-dark, + foreground: if($is-dark, + palette.$dark-theme-foreground-palette, + palette.$light-theme-foreground-palette), + background: if($is-dark, + palette.$dark-theme-background-palette, + palette.$light-theme-background-palette), system: ( - surface: white, - on-surface: rgba(black, 0.87), - on-surface-variant: rgba(black, 0.54), - background: map.get(palette.$grey-palette, 50), - inverse-surface: map.get(palette.$grey-palette, 800), - inverse-on-surface: white, - outline: rgba(black, 0.12), + surface: if($is-dark, map.get(palette.$grey-palette, 800), white), + on-surface: if($is-dark, white, rgba(black, 0.87)), + on-surface-variant: if($is-dark, rgba(white, 0.7), rgba(black, 0.54)), + background: if($is-dark, #303030, map.get(palette.$grey-palette, 50)), + inverse-surface: if($is-dark, white, map.get(palette.$grey-palette, 800)), + inverse-on-surface: if($is-dark, rgba(black, 0.87), white), + outline: if($is-dark, rgba(white, 0.12), rgba(black, 0.12)), hover-state-layer-opacity: 0.04, focus-state-layer-opacity: 0.12, - pressed-state-layer-opacity: 0.12, - ), - ); -} - -// Creates a dark-themed color configuration from the specified -// primary, accent and warn palettes. -@function _mat-create-dark-color-config($primary, $accent, $warn: null) { - @return ( - primary: $primary, - accent: $accent, - warn: if($warn != null, $warn, define-palette(palette.$red-palette)), - is-dark: true, - foreground: palette.$dark-theme-foreground-palette, - background: palette.$dark-theme-background-palette, - system: ( - surface: map.get(palette.$grey-palette, 800), - on-surface: white, - on-surface-variant: rgba(white, 0.7), - background: #303030, - inverse-surface: white, - inverse-on-surface: rgba(black, 0.87), - outline: rgba(white, 0.12), - hover-state-layer-opacity: 0.04, - focus-state-layer-opacity: 0.12, - pressed-state-layer-opacity: 0.12, + pressed-state-layer-opacity: 0.12 ), ); } @@ -170,49 +148,7 @@ /// @param {Map} $primary The theme configuration object. /// @returns {Map} A complete Angular Material theme map. @function define-light-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) { - // This function creates a container object for the individual component theme mixins. Consumers - // can construct such an object by calling this function, or by building the object manually. - // There are two possible ways to invoke this function in order to create such an object: - // - // (1) Passing in a map that holds optional configurations for individual parts of the - // theming system. For `color` configurations, the function only expects the palettes - // for `primary` and `accent` (and optionally `warn`). The function will expand the - // shorthand into an actual configuration that can be consumed in `-color` mixins. - // (2) Legacy pattern: Passing in the palettes as parameters. This is not as flexible - // as passing in a configuration map because only the `color` system can be configured. - // - // If the legacy pattern is used, we generate a container object only with a light-themed - // configuration for the `color` theming part. - @if $accent != null { - @warn theming.$private-legacy-theme-warning; - $theme: _mat-validate-theme( - ( - _is-legacy-theme: true, - color: _mat-create-light-color-config($primary, $accent, $warn), - ) - ); - - @return _internalize-theme(theming.private-create-backwards-compatibility-theme($theme)); - } - // If the map pattern is used (1), we just pass-through the configurations for individual - // parts of the theming system, but update the `color` configuration if set. As explained - // above, the color shorthand will be expanded to an actual light-themed color configuration. - $result: $primary; - @if map.get($primary, color) { - $color-settings: map.get($primary, color); - $primary: map.get($color-settings, primary); - $accent: map.get($color-settings, accent); - $warn: map.get($color-settings, warn); - $result: map.merge( - $result, - ( - color: _mat-create-light-color-config($primary, $accent, $warn), - ) - ); - } - @return _internalize-theme( - theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result)) - ); + @return _define-theme($primary, $accent, $warn, false); } // TODO: Remove legacy API and rename below `$primary` to `$config`. Currently it cannot be renamed @@ -222,6 +158,13 @@ /// @param {Map} $primary The theme configuration object. /// @returns {Map} A complete Angular Material theme map. @function define-dark-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) { + @return _define-theme($primary, $accent, $warn, true); +} + +/// Creates a container object for a theme to be given to individual component theme mixins. +/// @param {Map} $primary The theme configuration object. +/// @returns {Map} A complete Angular Material theme map. +@function _define-theme($primary, $accent, $warn, $is-dark) { // This function creates a container object for the individual component theme mixins. Consumers // can construct such an object by calling this function, or by building the object manually. // There are two possible ways to invoke this function in order to create such an object: @@ -233,36 +176,37 @@ // (2) Legacy pattern: Passing in the palettes as parameters. This is not as flexible // as passing in a configuration map because only the `color` system can be configured. // - // If the legacy pattern is used, we generate a container object only with a dark-themed + // If the legacy pattern is used, we generate a container object only with a themed // configuration for the `color` theming part. @if $accent != null { @warn theming.$private-legacy-theme-warning; $theme: _mat-validate-theme( - ( - _is-legacy-theme: true, - color: _mat-create-dark-color-config($primary, $accent, $warn), - ) + ( + _is-legacy-theme: true, + color: _mat-create-color-config($primary, $accent, $warn, $is-dark), + ) ); + @return _internalize-theme(theming.private-create-backwards-compatibility-theme($theme)); } // If the map pattern is used (1), we just pass-through the configurations for individual // parts of the theming system, but update the `color` configuration if set. As explained - // above, the color shorthand will be expanded to an actual dark-themed color configuration. + // above, the color shorthand will be expanded to an actual light-themed color configuration. $result: $primary; @if map.get($primary, color) { $color-settings: map.get($primary, color); $primary: map.get($color-settings, primary); $accent: map.get($color-settings, accent); - $warn: map.get($color-settings, warn); + $warn: map.get($color-settings, warn) or define-palette(palette.$red-palette); $result: map.merge( - $result, - ( - color: _mat-create-dark-color-config($primary, $accent, $warn), - ) + $result, + ( + color: _mat-create-color-config($primary, $accent, $warn, $is-dark), + ) ); } @return _internalize-theme( - theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result)) + theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result)) ); }