@ng-matero/extensions 19.4.0 → 20.0.0

package/core/theming/_definition.scss

@@ -2,21 +2,24 @@
 
 @use 'sass:map';
 @use '@angular/material' as mat;
+@use './palettes';
 @use '../tokens/m3-tokens';
 @use './config-validation';
+@use '../tokens/m3';
 
 // Prefix used for component token fallback variables, e.g.
-// `color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));`
+// `color: var(--mat-text-button-label-text-color, var(--mat-sys-primary));`
 $system-fallback-prefix: mat-sys;
 
 // Default system level prefix to use when directly calling the `system-level-*` mixins.
 // Prefix used for component token fallback variables, e.g.
-// `color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));`
+// `color: var(--mat-text-button-label-text-color, var(--mat-sys-primary));`
 // TODO: Remove this variable after internal clients are migrated from "sys"
 $system-level-prefix: mat-sys;
 
 /// Map key used to store internals of theme config.
 $internals: _mat-theming-internals-do-not-access;
+
 /// The theme version of generated themes.
 $theme-version: 1;
 
@@ -29,98 +32,101 @@ $theme-version: 1;
     @error $err;
   }
 
-  @return mat.private-deep-merge-all(
-      define-colors(map.get($config, color) or ()),
-      define-typography(map.get($config, typography) or ()),
-      define-density(map.get($config, density) or ()),
-      ($internals: (base-tokens: m3-tokens.generate-base-tokens())),
+  $color-config: map.get($config, color) or ();
+  $typography-config: map.get($config, typography) or ();
+  $density-config: map.get($config, density) or ();
+
+  // colors
+  $type: map.get($color-config, theme-type) or light;
+  $primary: map.get($color-config, primary) or palettes.$violet-palette;
+  $tertiary: map.get($color-config, tertiary) or $primary;
+  $color-system-variables-prefix:
+    map.get($color-config, system-variables-prefix) or $system-level-prefix;
+  mat.$private-use-system-color-variables: map.get($color-config, use-system-variables) or false;
+
+  $palettes: (
+    primary: map.remove($primary, neutral, neutral-variant, secondary),
+    secondary: map.get($primary, secondary),
+    tertiary: map.remove($tertiary, neutral, neutral-variant, secondary, error),
+    neutral: map.get($primary, neutral),
+    neutral-variant: map.get($primary, neutral-variant),
+    error: map.get($primary, error),
   );
-}
 
-/// Defines an Angular Material theme object with color settings.
-/// @param {Map} $config The color configuration
-/// @return {Map} A theme object
-@function define-colors($config: ()) {
-$err: config-validation.validate-color-config($config);
-  @if $err {
-    @error $err;
-  }
+  // typography
+  $default-plain: (Roboto, sans-serif);
+  $default-brand: $default-plain;
+  $plain: map.get($typography-config, plain-family) or $default-plain;
+  $brand: map.get($typography-config, brand-family) or $default-brand;
+  $bold: map.get($typography-config, bold-weight) or 700;
+  $medium: map.get($typography-config, medium-weight) or 500;
+  $regular: map.get($typography-config, regular-weight) or 400;
+  $typography-system-variables-prefix: map.get($typography-config, system-variables-prefix) or
+    $system-level-prefix;
+  mat.$private-use-system-typography-variables:
+    map.get($typography-config, use-system-variables) or false;
+  $typography: (
+    plain: $plain,
+    brand: $brand,
+    bold: $bold,
+    medium: $medium,
+    regular: $regular,
+  );
 
-  $type: map.get($config, theme-type) or light;
-  $primary: map.get($config, primary) or palettes.$violet-palette;
-  $tertiary: map.get($config, tertiary) or $primary;
-  $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
-  mat.$private-use-system-color-variables: map.get($config, use-system-variables) or false;
+  // density
+  $density-scale: map.get($density-config, scale) or 0;
 
   @return (
     $internals: (
-      theme-version: $theme-version,
-      theme-type: $type,
-      palettes: (
-        primary: map.remove($primary, neutral, neutral-variant, secondary),
-        secondary: map.get($primary, secondary),
-        tertiary: map.remove($tertiary, neutral, neutral-variant, secondary),
-        neutral: map.get($primary, neutral),
-        neutral-variant: map.get($primary, neutral-variant),
-        error: map.get($primary, error),
+      base-tokens: m3-tokens.generate-base-tokens(),
+      color-system-variables-prefix: $color-system-variables-prefix,
+      color-tokens:
+        m3-tokens.generate-color-tokens($type, $palettes, $color-system-variables-prefix),
+      density-scale: $density-scale,
+      font-definition: $typography,
+      md-sys-color: m3-tokens.get-sys-color($type, $palettes, $color-system-variables-prefix),
+      md-sys-elevation: m3.md-sys-elevation-values(),
+      md-sys-motion: m3.md-sys-motion-values(),
+      md-sys-shape: m3.md-sys-shape-values(),
+      md-sys-state: m3.md-sys-state-values(),
+      md-ref-palette: (
+        // Form field native select option text color
+        neutral10: map.get($palettes, neutral, 10),
+        // Sidenav scrim (container background shadow when opened),
+        neutral-variant20: map.get($palettes, neutral-variant, 20),
       ),
-      color-system-variables-prefix: $system-variables-prefix,
-      color-tokens: m3-tokens.generate-color-tokens(
-          $type, $primary, $tertiary, map.get($primary, error), $system-variables-prefix)
+      md-sys-typescale:
+        m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
+      palettes: $palettes,
+      theme-type: $type,
+      theme-version: $theme-version,
+      typography-system-variables-prefix: $typography-system-variables-prefix,
+      typography-tokens:
+          m3-tokens.generate-typography-tokens($typography, $typography-system-variables-prefix),
     )
   );
 }
 
+/// Defines an Angular Material theme object with color settings.
+/// @param {Map} $config The color configuration
+/// @return {Map} A theme object
+/// @deprecated Use define-theme with a map using the "color" key
+@function define-colors($config: ()) {
+  @return define-theme((color: $config));
+}
+
 /// Defines an Angular Material theme object with typography settings.
 /// @param {Map} $config The typography configuration
 /// @return {Map} A theme object
+/// @deprecated Use define-theme with a map using the "typography" key
 @function define-typography($config: ()) {
-  $err: config-validation.validate-typography-config($config);
-  @if $err {
-    @error $err;
-  }
-
-  $plain: map.get($config, plain-family) or (Roboto, sans-serif);
-  $brand: map.get($config, brand-family) or $plain;
-  $bold: map.get($config, bold-weight) or 700;
-  $medium: map.get($config, medium-weight) or 500;
-  $regular: map.get($config, regular-weight) or 400;
-  $system-variables-prefix: map.get($config, system-variables-prefix) or sys;
-  mat.$private-use-system-typography-variables: map.get($config, use-system-variables) or false;
-
-  @return (
-    $internals: (
-      theme-version: $theme-version,
-      font-definition: (
-        plain: $plain,
-        brand: $brand,
-        bold: $bold,
-        medium: $medium,
-        regular: $regular,
-      ),
-      typography-system-variables-prefix: $system-variables-prefix,
-      typography-tokens: m3-tokens.generate-typography-tokens(
-          $brand, $plain, $bold, $medium, $regular, $system-variables-prefix)
-    )
-  );
+  @return define-theme((typography: $config));
 }
 
 /// Defines an Angular Material theme object with density settings.
 /// @param {Map} $config The density configuration
 /// @return {Map} A theme object
+/// @deprecated Use define-theme with a map using the "density" key
 @function define-density($config: ()) {
-  $err: config-validation.validate-density-config($config);
-  @if $err {
-    @error $err;
-  }
-
-  $density-scale: map.get($config, scale) or 0;
-
-  @return (
-    $internals: (
-      theme-version: $theme-version,
-      density-scale: $density-scale,
-      density-tokens: m3-tokens.generate-density-tokens($density-scale)
-    )
-  );
+  @return define-theme((density: $config));
 }