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

package/theming/_color-api-back-compat.scss

@@ -1,111 +0,0 @@
-@use '@angular/material' as mat;
-
-// We want to emit only the overrides, because the backwards compatibility styles are usually
-// emitted after all the tokens have been included once already. This allows us to save ~50kb
-// from the bundle.
-$_overrides-only: true;
-
-@mixin color-variant-styles($theme, $color-variant) {
-  $primary-options: (color-variant: $color-variant, emit-overrides-only: $_overrides-only);
-
-  // Some components use the secondary color rather than primary color for `.mat-primary`.
-  // Those components should use the $secondary-color-variant.
-  $secondary-options: (
-    color-variant: if($color-variant == primary, secondary, $color-variant),
-    emit-overrides-only: $_overrides-only
-  );
-
-  @include mat.option-color($theme, $secondary-options...);
-  @include mat.progress-spinner-color($theme, $primary-options...);
-  @include mat.pseudo-checkbox-color($theme, $primary-options...);
-  @include mat.stepper-color($theme, $primary-options...);
-
-  &.mat-icon {
-    @include mat.icon-color($theme, $primary-options...);
-  }
-
-  &.mat-mdc-checkbox {
-    @include mat.checkbox-color($theme, $primary-options...);
-  }
-
-  &.mat-mdc-slider {
-    @include mat.slider-color($theme, $primary-options...);
-  }
-
-  &.mat-mdc-tab-group,
-  &.mat-mdc-tab-nav-bar {
-    @include mat.tabs-color($theme, $primary-options...);
-  }
-
-  &.mat-mdc-slide-toggle {
-    @include mat.slide-toggle-color($theme, $primary-options...);
-  }
-
-  &.mat-mdc-form-field {
-    @include mat.select-color($theme, $primary-options...);
-  }
-
-  &.mat-mdc-radio-button {
-    @include mat.radio-color($theme, $primary-options...);
-  }
-
-  &.mat-mdc-progress-bar {
-    @include mat.progress-bar-color($theme, $primary-options...);
-  }
-
-  &.mat-mdc-form-field {
-    @include mat.form-field-color($theme, $primary-options...);
-  }
-
-  &.mat-datepicker-content {
-    @include mat.datepicker-color($theme, $primary-options...);
-  }
-
-  &.mat-mdc-button-base {
-    @include mat.button-color($theme, $primary-options...);
-  }
-
-  &.mat-mdc-standard-chip {
-    @include mat.chips-color($theme, $secondary-options...);
-  }
-
-  .mdc-list-item__start,
-  .mdc-list-item__end {
-    @include mat.checkbox-color($theme, $primary-options...);
-    @include mat.radio-color($theme, $primary-options...);
-  }
-
-  // M3 dropped support for warn/error color FABs.
-  @if $color-variant != error {
-    &.mat-mdc-fab,
-    &.mat-mdc-mini-fab {
-      @include mat.fab-color($theme, $primary-options...);
-    }
-  }
-}
-
-@mixin color-variants-back-compat($theme) {
-  .mat-primary {
-    @include color-variant-styles($theme, primary);
-  }
-  .mat-badge {
-    @include mat.badge-color($theme, $color-variant: primary,
-      $emit-overrides-only: $_overrides-only);
-  }
-
-  .mat-accent {
-    @include color-variant-styles($theme, tertiary);
-  }
-  .mat-badge-accent {
-    @include mat.badge-color($theme, $color-variant: tertiary,
-      $emit-overrides-only: $_overrides-only);
-  }
-
-  .mat-warn {
-    @include color-variant-styles($theme, error);
-  }
-  .mat-badge-warn {
-    @include mat.badge-color($theme, $color-variant: error,
-      $emit-overrides-only: $_overrides-only);
-  }
-}

package/theming/_config-validation.scss

@@ -1,166 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use '@angular/material' as mat;
-@use './m3-palettes';
-
-/// Creates an error message by finding `$config` in the existing message and appending a suffix to
-/// it.
-/// @param {List|String} $err The error message.
-/// @param {String} $suffix The suffix to add.
-/// @return {List|String} The updated error message.
-@function _create-dollar-config-error-message($err, $suffix) {
-  @if meta.type-of($err) == 'list' {
-    @for $i from 1 through list.length($err) {
-      $err: list.set-nth($err, $i,
-        _create-dollar-config-error-message(list.nth($err, $i), $suffix));
-    }
-  }
-  @else if meta.type-of($err) == 'string' {
-    $start: string.index($err, '$config');
-    @if $start {
-      $err: string.insert($err, $suffix, $start + 7);
-    }
-  }
-  @return $err;
-}
-
-/// Validates that the given object is an M3 palette.
-/// @param {*} $palette The object to test
-/// @return {Boolean|null} null if it is a valid M3 palette, else true.
-@function _validate-palette($palette) {
-  @if not meta.type-of($palette) == 'map' {
-    @return true;
-  }
-  $keys: map.keys($palette);
-  $expected-keys: map.keys(m3-palettes.$red-palette);
-  @if mat.private-validate-allowed-values($keys, $expected-keys...) or
-      mat.private-validate-required-values($keys, $expected-keys...) {
-    @return true;
-  }
-  $nv-keys: map.keys(map.get($palette, neutral-variant));
-  $expected-nv-keys: map.keys(map.get(m3-palettes.$red-palette, neutral-variant));
-  @if mat.private-validate-allowed-values($nv-keys, $expected-nv-keys...) or
-      mat.private-validate-required-values($nv-keys, $expected-nv-keys...) {
-    @return true;
-  }
-  @return null;
-}
-
-/// Validates a theme config.
-/// @param {Map} $config The config to test.
-/// @return {List} null if no error, else the error message
-@function validate-theme-config($config) {
-  $err: mat.private-validate-type($config, 'map', 'null');
-  @if $err {
-    @return (#{'$config should be a configuration object. Got:'} $config);
-  }
-  $allowed: (color, typography, density);
-  $err: mat.private-validate-allowed-values(map.keys($config or ()), $allowed...);
-  @if $err {
-    @return (
-      #{'$config has unexpected properties. Valid properties are'}
-      #{'#{$allowed}.'}
-      #{'Found:'}
-      $err
-    );
-  }
-  $err: validate-color-config(map.get($config, color));
-  @if $err {
-    @return _create-dollar-config-error-message($err, '.color');
-  }
-  $err: validate-typography-config(map.get($config, typography));
-  @if $err {
-    @return _create-dollar-config-error-message($err, '.typography');
-  }
-  $err: validate-density-config(map.get($config, density));
-  @if $err {
-    @return _create-dollar-config-error-message($err, '.density');
-  }
-  @return null;
-}
-
-/// Validates a theme color config.
-/// @param {Map} $config The config to test.
-/// @return {List} null if no error, else the error message
-@function validate-color-config($config) {
-  $err: mat.private-validate-type($config, 'map', 'null');
-  @if $err {
-    @return (#{'$config should be a color configuration object. Got:'} $config);
-  }
-  $allowed: (theme-type, primary, tertiary);
-  $err: mat.private-validate-allowed-values(map.keys($config or ()), $allowed...);
-  @if $err {
-    @return (
-      #{'$config has unexpected properties. Valid properties are'}
-      #{'#{$allowed}.'}
-      #{'Found:'}
-      $err
-    );
-  }
-  @if $config and map.has-key($config, theme-type) and
-      not list.index((light, dark), map.get($config, theme-type)) {
-    @return (
-      #{'Expected $config.theme-type to be one of: light, dark. Got:'}
-      map.get($config, theme-type)
-    );
-  }
-  @each $palette in (primary, secondary, tertiary) {
-    @if $config and map.has-key($config, $palette) {
-      $err: _validate-palette(map.get($config, $palette));
-      @if $err {
-        @return (
-          #{'Expected $config.#{$palette} to be a valid M3 palette. Got:'}
-          map.get($config, $palette)
-        );
-      }
-    }
-  }
-  @return null;
-}
-
-/// Validates a theme typography config.
-/// @param {Map} $config The config to test.
-/// @return {List} null if no error, else the error message
-@function validate-typography-config($config) {
-  $err: mat.private-validate-type($config, 'map', 'null');
-  @if $err {
-    @return (#{'$config should be a typography configuration object. Got:'} $config);
-  }
-  $allowed: (brand-family, plain-family, bold-weight, medium-weight, regular-weight);
-  $err: mat.private-validate-allowed-values(map.keys($config or ()), $allowed...);
-  @if $err {
-    @return (
-      #{'$config has unexpected properties. Valid properties are'}
-      #{'#{$allowed}.'}
-      #{'Found:'}
-      $err
-    );
-  }
-  @return null;
-}
-
-/// Validates a theme density config.
-/// @param {Map} $config The config to test.
-/// @return {List} null if no error, else the error message
-@function validate-density-config($config) {
-  $err: mat.private-validate-type($config, 'map', 'null');
-  @if $err {
-    @return (#{'$config should be a density configuration object. Got:'} $config);
-  }
-  $err: mat.private-validate-allowed-values(map.keys($config or ()), scale);
-  @if $err {
-    @return (#{'$config has unexpected properties. Valid properties are: scale. Found:'} $err);
-  }
-  @if $config and map.has-key($config, scale) {
-    $allowed-scales: (0, -1, -2, -3, -4, -5, minimum, maximum);
-    @if mat.private-validate-allowed-values(map.get($config, scale), $allowed-scales...) {
-      @return (
-        #{'Expected $config.scale to be one of: #{$allowed-scales}. Got:'}
-        map.get($config, scale)
-      );
-    }
-  }
-  @return null;
-}