refactor: merge light/dark color config definition

Author: andrewseguin

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,10 @@
 /// @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);
+}
+
+@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 +173,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 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-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))
   );
 }