@angular/material 17.1.0-next.0 → 17.1.0-next.2

package/core/tokens/m2/mat/_full-pseudo-checkbox.scss

@@ -0,0 +1,49 @@
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, full-pseudo-checkbox);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme, $palette-name: accent) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $disabled-color: if($is-dark, #686868, #b0b0b0);
+  $checkmark-color: inspection.get-theme-color($theme, background, background);
+
+  @return (
+    selected-icon-color: inspection.get-theme-color($theme, $palette-name),
+    selected-checkmark-color: $checkmark-color,
+    unselected-icon-color: inspection.get-theme-color($theme, foreground, secondary-text),
+    disabled-selected-checkmark-color: $checkmark-color,
+    disabled-unselected-icon-color: $disabled-color,
+    disabled-selected-icon-color: $disabled-color,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mat/_minimal-pseudo-checkbox.scss

@@ -0,0 +1,43 @@
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, minimal-pseudo-checkbox);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme, $palette-name: accent) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+
+  @return (
+    selected-checkmark-color: inspection.get-theme-color($theme, $palette-name),
+    disabled-selected-checkmark-color: if($is-dark, #686868, #b0b0b0),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mdc/_form-field.scss

@@ -0,0 +1,46 @@
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, form-field);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  @return (
+    label-text-color: inspection.get-theme-color($theme, foreground, text),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
+    label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/datepicker/_datepicker-theme.scss

@@ -27,43 +27,58 @@ $calendar-weekday-table-font-size: 11px !default;
     map.merge($calendar-tokens, $range-tokens));
 }
 
-@mixin base($theme) {}
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {}
+}
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
-      tokens-mat-datepicker.get-color-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
-
-  .mat-datepicker-content {
-    &.mat-accent {
-      @include _calendar-color($theme, accent);
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
+        tokens-mat-datepicker.get-color-tokens($theme));
     }
 
-    &.mat-warn {
-      @include _calendar-color($theme, warn);
-    }
-  }
+    .mat-datepicker-content {
+      &.mat-accent {
+        @include _calendar-color($theme, accent);
+      }
 
-  .mat-datepicker-toggle-active {
-    &.mat-accent {
-      $accent-tokens:
-        tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent);
-      @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $accent-tokens);
+      &.mat-warn {
+        @include _calendar-color($theme, warn);
+      }
     }
 
-    &.mat-warn {
-      $warn-tokens:
-        tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn);
-      @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $warn-tokens);
+    .mat-datepicker-toggle-active {
+      &.mat-accent {
+        $accent-tokens:
+          tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent);
+        @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $accent-tokens);
+      }
+
+      &.mat-warn {
+        $warn-tokens:
+          tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn);
+        @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $warn-tokens);
+      }
     }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
-      tokens-mat-datepicker.get-typography-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
+        tokens-mat-datepicker.get-typography-tokens($theme));
+    }
   }
 }
 
@@ -86,27 +101,44 @@ $calendar-weekday-table-font-size: 11px !default;
 }
 
 @mixin density($theme) {
-  // TODO(crisbeto): move this into the structural styles
-  // once the icon button density is switched to tokens.
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {
+    // TODO(crisbeto): move this into the structural styles
+    // once the icon button density is switched to tokens.
 
-  // Regardless of the user-passed density, we want the calendar
-  // previous/next buttons to remain at density -2
-  .mat-calendar-controls {
-    @include icon-button-theme.density(-2);
+    // Regardless of the user-passed density, we want the calendar
+    // previous/next buttons to remain at density -2
+    .mat-calendar-controls {
+      @include icon-button-theme.density(-2);
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
-    }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(
+        tokens-mat-datepicker.$prefix, map.get($tokens, tokens-mat-datepicker.$prefix));
+  }
+}