@angular/material-experimental 18.0.0-next.4 → 18.0.0-next.6

package/theming/_definition.scss

@@ -1,104 +0,0 @@
-// 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 './config-validation';
-
-/// 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;
-
-/// Defines an Angular Material theme object with color, typography, and density settings.
-/// @param {Map} $config The theme configuration
-/// @return {Map} A theme object
-@function define-theme($config: ()) {
-  $err: config-validation.validate-theme-config($config);
-  @if $err {
-    @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())),
-  );
-}
-
-/// 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;
-  }
-
-  $type: map.get($config, theme-type) or light;
-  $primary: map.get($config, primary) or m3-palettes.$violet-palette;
-  $tertiary: map.get($config, tertiary) or $primary;
-
-  @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),
-      ),
-      color-tokens: m3-tokens.generate-color-tokens(
-          $type, $primary, $tertiary, map.get($primary, error))
-    )
-  );
-}
-
-/// Defines an Angular Material theme object with typography settings.
-/// @param {Map} $config The typography configuration
-/// @return {Map} A theme object
-@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;
-
-  @return (
-    $internals: (
-      theme-version: $theme-version,
-      typography-tokens: m3-tokens.generate-typography-tokens(
-          $brand, $plain, $bold, $medium, $regular)
-    )
-  );
-}
-
-/// Defines an Angular Material theme object with density settings.
-/// @param {Map} $config The density configuration
-/// @return {Map} A theme object
-@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)
-    )
-  );
-}

package/theming/_format-tokens.scss

@@ -1,5 +0,0 @@
-// DO NOT REMOVE
-// This function is used internally.
-@function private-format-tokens($systems) {
-  @return $systems;
-}

package/theming/_m3-density.scss

@@ -1,191 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-/// Maps namespaced tokens to per-density-scale values.
-/// This is used as a temporary solution for density, since Material Design currently does not have
-/// systemized density.
-/// Format:
-/// (
-///   (mdc, comp): (
-///     token: (<scale 0 value>, <scale -1 value>, <scale -2 value>, ...),
-///     ...
-///   ),
-///   ...
-/// )
-// TODO(mmalerba): Add density tokens for remaining components.
-$_density-tokens: (
-  // MDC tokens
-  (mdc, checkbox): (
-    state-layer-size: (40px, 36px, 32px, 28px),
-  ),
-  (mdc, chip): (
-    container-height: (32px, 28px, 24px),
-  ),
-  (mdc, circular-progress): (),
-  (mdc, dialog): (),
-  (mdc, elevated-card): (),
-  (mdc, extended-fab): (),
-  (mdc, fab): (),
-  (mdc, fab-small): (),
-  (mdc, filled-text-field): (),
-  (mdc, text-button): (
-    container-height: (40px, 36px, 32px, 28px),
-  ),
-  (mdc, protected-button): (
-    container-height: (40px, 36px, 32px, 28px),
-  ),
-  (mdc, filled-button): (
-    container-height: (40px, 36px, 32px, 28px),
-  ),
-  (mdc, outlined-button): (
-    container-height: (40px, 36px, 32px, 28px),
-  ),
-  (mdc, icon-button): (
-    // The size caps out at 24px, because anything lower will be smaller than the icon.
-    state-layer-size: (40px, 36px, 32px, 28px, 24px, 24px),
-  ),
-  (mdc, linear-progress): (),
-  (mdc, list): (
-    list-item-one-line-container-height: (48px, 44px, 40px, 36px, 32px, 24px),
-    list-item-two-line-container-height: (64px, 60px, 56px, 52px, 48px, 48px),
-    list-item-three-line-container-height: (88px, 84px, 80px, 76px, 72px, 56px),
-  ),
-  (mdc, outlined-card): (),
-  (mdc, outlined-text-field): (),
-  (mdc, plain-tooltip): (),
-  (mdc, radio): (
-    state-layer-size: (40px, 36px, 32px, 28px),
-  ),
-  (mdc, slider): (),
-  (mdc, snackbar): (),
-  (mdc, switch): (),
-  (mdc, tab): (
-    container-height: (48px, 44px, 40px, 36px, 32px)
-  ),
-  (mdc, tab-indicator): (),
-
-  // Custom Angular Material tokens
-  (mat, autocomplete): (),
-  (mat, badge): (),
-  (mat, bottom-sheet): (),
-  (mat, card): (),
-  (mat, checkbox): (
-    touch-target-display: (block, block, none, none),
-  ),
-  (mat, dialog): (),
-  (mat, datepicker): (),
-  (mat, divider): (),
-  (mat, expansion): (
-    header-collapsed-state-height: (48px, 44px, 40px, 36px),
-    header-expanded-state-height: (64px, 60px, 56px, 48px),
-  ),
-  (mat, fab): (
-    touch-target-display: (block, block, none, none),
-  ),
-  (mat, form-field): (
-    container-height: (56px, 52px, 48px, 44px, 40px, 36px),
-    filled-label-display: (block, block, none, none, none, none),
-    container-vertical-padding: (16px, 14px, 12px, 10px, 8px, 6px),
-    filled-with-label-container-padding-top: (24px, 22px, 12px, 10px, 8px, 6px),
-    filled-with-label-container-padding-bottom: (8px, 6px, 12px, 10px, 8px, 6px),
-  ),
-  (mat, grid-list): (),
-  (mat, icon): (),
-  (mat, icon-button): (
-    touch-target-display: (block, block, none, none),
-  ),
-  (mat, list): (
-    list-item-leading-icon-start-space: (16px, 12px, 8px, 4px),
-    list-item-leading-icon-end-space: (16px, 12px, 8px, 4px),
-  ),
-  (mat, text-button): (
-    touch-target-display: (block, block, none, none),
-  ),
-  (mat, protected-button): (
-    touch-target-display: (block, block, none, none),
-  ),
-  (mat, filled-button): (
-    touch-target-display: (block, block, none, none),
-  ),
-  (mat, outlined-button): (
-    touch-target-display: (block, block, none, none),
-  ),
-  (mat, menu): (),
-  (mat, optgroup): (),
-  (mat, option): (),
-  (mat, full-pseudo-checkbox): (),
-  (mat, minimal-pseudo-checkbox): (),
-  (mat, paginator): (
-    container-size: (56px, 52px, 48px, 40px),
-    form-field-container-height: (40px, 40px, 40px, 40px, 40px, 36px),
-    form-field-container-vertical-padding: (8px, 8px, 8px, 8px, 8px, 6px),
-  ),
-  (mat, radio): (
-    touch-target-display: (block, block, none, none),
-  ),
-  (mat, ripple): (),
-  (mat, select): (
-    arrow-transform: (
-      translateY(-8px),
-      translateY(-8px),
-      none,
-    ),
-  ),
-  (mat, sidenav): (),
-  (mat, slide-toggle): (),
-  (mat, slider): (),
-  (mat, snack-bar): (),
-  (mat, sort): (),
-  (mat, standard-button-toggle): (
-    height: (40px, 40px, 40px, 36px, 24px),
-  ),
-  (mat, stepper): (
-    header-height: (72px, 68px, 64px, 60px, 42px),
-  ),
-  (mat, tab-header): (),
-  (mat, table): (
-    header-container-height: (56px, 52px, 48px, 44px, 40px),
-    footer-container-height: (52px, 48px, 44px, 40px, 36px),
-    row-item-container-height: (52px, 48px, 44px, 40px, 36px),
-  ),
-  (mat, toolbar): (
-    standard-height: (64px, 60px, 56px, 52px),
-    mobile-height: (56px, 52px, 48px, 44px),
-  ),
-  (mat, tree): (
-    node-min-height: (48px, 44px, 40px, 36px, 28px),
-  ),
-);
-
-/// Gets the value for the given density scale from the given set of density values.
-/// @param {List} $density-values The list of values for each density scale.
-/// @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);
-  $index: -$scale + 1;
-  @return list.nth($density-values, $index);
-}
-
-/// Gets a map of all density tokens for the given scale
-/// @param {Number} $scale The density scale
-/// @return {Map} Map of all fully qualified density tokens for the given scale.
-@function get-tokens-for-scale($scale) {
-  $result: ();
-  @each $namespace, $tokens in $_density-tokens {
-    @each $token, $density-values in $tokens {
-      $tokens: map.set($tokens, $token, _get-value-for-scale($density-values, $scale));
-    }
-    $result: map.set($result, $namespace, $tokens);
-  }
-  @return $result;
-}
-
-/// Checks whether the given token is systemized by Angular Material's made up density system.
-/// @param {List} $namespace The namespace of the token
-/// @param {String} $token The name of the token
-/// @return {Boolean} Whether the token is systemized by the density system
-@function is-systemized($namespace, $token) {
-  @return map.get($_density-tokens, $namespace, $token) != null;
-}