@angular/material 16.2.0-next.4 → 16.2.0-rc.0

package/core/tokens/m2/mat/_toolbar.scss

@@ -0,0 +1,79 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../typography/typography-utils';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, toolbar);
+
+// 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($config) {
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+
+  @return private-get-color-palette-color-tokens(
+    $background-color: theming.get-color-from-palette($background, app-bar),
+    $text-color: theming.get-color-from-palette($foreground, text),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    title-text-font: typography-utils.font-family($config, title) or
+      typography-utils.font-family($config),
+    title-text-line-height: typography-utils.line-height($config, title),
+    title-text-size: typography-utils.font-size($config, title),
+    title-text-tracking: typography-utils.letter-spacing($config, title),
+    title-text-weight: typography-utils.font-weight($config, title),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  $density-scale: theming.clamp-density($config, -3);
+  $standard-scale: (
+    0: 64px,
+    -1: 60px,
+    -2: 56px,
+    -3: 52px,
+  );
+
+  $mobile-scale: (
+    0: 56px,
+    -1: 52px,
+    -2: 48px,
+    -3: 44px,
+  );
+
+  @return (
+    standard-height: map.get($standard-scale, $density-scale),
+    mobile-height: map.get($mobile-scale, $density-scale),
+  );
+}
+
+// Generates the tokens used to theme the toolbar based on a palette.
+@function private-get-color-palette-color-tokens($background-color, $text-color) {
+  @return (
+    container-background-color: $background-color,
+    container-text-color: $text-color,
+  );
+}
+
+// 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/_circular-progress.scss

@@ -16,7 +16,7 @@ $prefix: (mdc, circular-progress);
   @return (
     // The thickness of the progress spinner's active indicator.
     active-indicator-width: 4px,
-    // The the diameter of the spinner
+    // The diameter of the spinner
     size: 48px,
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =

package/core/tokens/m2/mdc/_filled-text-field.scss

@@ -0,0 +1,175 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+@use '../../../typography/typography-utils';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, filled-text-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.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    active-indicator-height: 1px,
+    focus-active-indicator-height: 2px,
+    container-shape: 4px,
+
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
+    disabled-active-indicator-height: null,
+    hover-active-indicator-height: null,
+    disabled-active-indicator-opacity: null,
+    error-focus-caret-color: null,
+    error-hover-caret-color: null,
+    focus-caret-color: null,
+    hover-caret-color: null,
+    label-text-populated-line-height: null,
+    label-text-populated-size: null,
+    label-text-type: null,
+    disabled-label-text-opacity: null,
+    hover-label-text-color: null,
+    error-hover-label-text-color: null,
+    supporting-text-color: null,
+    supporting-text-font: null,
+    supporting-text-line-height: null,
+    supporting-text-size: null,
+    supporting-text-tracking: null,
+    supporting-text-weight: null,
+    disabled-supporting-text-color: null,
+    disabled-supporting-text-opacity: null,
+    error-focus-supporting-text-color: null,
+    error-hover-supporting-text-color: null,
+    error-supporting-text-color: null,
+    focus-supporting-text-color: null,
+    hover-supporting-text-color: null,
+    input-text-prefix-color: null,
+    container-height: null,
+    disabled-trailing-icon-color: null,
+    disabled-trailing-icon-opacity: null,
+    error-focus-trailing-icon-color: null,
+    error-hover-trailing-icon-color: null,
+    error-trailing-icon-color: null,
+    focus-trailing-icon-color: null,
+    hover-trailing-icon-color: null,
+    trailing-icon-color: null,
+    trailing-icon-size: null,
+    disabled-leading-icon-color: null,
+    disabled-leading-icon-opacity: null,
+    error-focus-leading-icon-color: null,
+    error-hover-leading-icon-color: null,
+    error-leading-icon-color: null,
+    focus-leading-icon-color: null,
+    hover-leading-icon-color: null,
+    leading-icon-color: null,
+    leading-icon-size: null,
+    input-text-type: null,
+    input-text-suffix-color: null,
+    input-text-font: null,
+    input-text-line-height: null,
+    input-text-size: null,
+    input-text-tracking: null,
+    input-text-weight: null,
+    error-input-text-color: null,
+    focus-input-text-color: null,
+    hover-input-text-color: null,
+    disabled-input-text-opacity: null,
+    error-focus-input-text-color: null,
+    error-hover-input-text-color: null,
+    disabled-container-opacity: null,
+    error-hover-state-layer-color: null,
+    error-hover-state-layer-opacity: null,
+    hover-state-layer-color: null,
+    hover-state-layer-opacity: null,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $warn: map.get($config, warn);
+  $is-dark: map.get($config, is-dark);
+  $surface: theming.get-color-from-palette($background, card);
+  $on-surface: if($is-dark, #fff, #000);
+  $warn-color: theming.get-color-from-palette($warn);
+  $color-tokens: private-get-color-palette-color-tokens($config, primary);
+
+  @return map.merge($color-tokens, (
+    container-color: _variable-safe-mix($on-surface, $surface, 4%),
+    disabled-container-color: _variable-safe-mix($on-surface, $surface, 2%),
+
+    label-text-color: rgba($on-surface, 0.6),
+    disabled-label-text-color: rgba($on-surface, 0.38),
+
+    input-text-color: rgba($on-surface, 0.87),
+    disabled-input-text-color: rgba($on-surface, 0.38),
+    input-text-placeholder-color: rgba($on-surface, 0.6),
+
+    error-focus-label-text-color: $warn-color,
+    error-label-text-color: $warn-color,
+    error-caret-color: $warn-color,
+
+    active-indicator-color: rgba($on-surface, 0.42),
+    disabled-active-indicator-color: rgba($on-surface, 0.06),
+    hover-active-indicator-color: rgba($on-surface, 0.87),
+    error-active-indicator-color: $warn-color,
+    error-focus-active-indicator-color: $warn-color,
+    error-hover-active-indicator-color: $warn-color,
+  ));
+}
+
+@function _variable-safe-mix($first-color, $second-color, $amount) {
+  @if (meta.type-of($first-color) == color and meta.type-of($second-color) == color) {
+    @return color.mix($first-color, $second-color, $amount);
+  }
+  @return $first-color;
+}
+
+// Generates the mapping for the properties that change based on the slide toggle color.
+@function private-get-color-palette-color-tokens($config, $palette-name) {
+  $palette: map.get($config, $palette-name);
+  $palette-color: theming.get-color-from-palette($palette);
+
+  @return (
+    caret-color: $palette-color,
+    focus-active-indicator-color: $palette-color,
+    focus-label-text-color: theming.get-color-from-palette($palette, default, 0.87),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  $fallback-font-family: typography-utils.font-family($config);
+
+  @return (
+    label-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family,
+    label-text-line-height: typography-utils.line-height($config, body-1),
+    label-text-size: typography-utils.font-size($config, body-1),
+    label-text-tracking: typography-utils.letter-spacing($config, body-1),
+    label-text-weight: typography-utils.font-weight($config, body-1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @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/_outlined-text-field.scss

@@ -0,0 +1,158 @@
+@use 'sass:map';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+@use '../../../typography/typography-utils';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, outlined-text-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.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    outline-width: 1px,
+    focus-outline-width: 2px,
+    container-shape: 4px,
+
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
+    error-focus-caret-color: null,
+    error-hover-caret-color: null,
+    focus-caret-color: null,
+    hover-caret-color: null,
+    disabled-outline-opacity: null,
+    hover-outline-width: null,
+    disabled-outline-width: null,
+    label-text-type: null,
+    label-text-populated-line-height: null,
+    label-text-populated-size: null,
+    hover-label-text-color: null,
+    error-hover-label-text-color: null,
+    disabled-label-text-opacity: null,
+    disabled-supporting-text-color: null,
+    disabled-supporting-text-opacity: null,
+    error-focus-supporting-text-color: null,
+    error-hover-supporting-text-color: null,
+    error-supporting-text-color: null,
+    focus-supporting-text-color: null,
+    hover-supporting-text-color: null,
+    supporting-text-color: null,
+    supporting-text-font: null,
+    supporting-text-line-height: null,
+    supporting-text-size: null,
+    supporting-text-tracking: null,
+    supporting-text-type: null,
+    supporting-text-weight: null,
+    disabled-leading-icon-color: null,
+    disabled-leading-icon-opacity: null,
+    error-focus-leading-icon-color: null,
+    error-hover-leading-icon-color: null,
+    error-leading-icon-color: null,
+    focus-leading-icon-color: null,
+    hover-leading-icon-color: null,
+    leading-icon-color: null,
+    leading-icon-size: null,
+    disabled-trailing-icon-color: null,
+    disabled-trailing-icon-opacity: null,
+    error-focus-trailing-icon-color: null,
+    error-hover-trailing-icon-color: null,
+    error-trailing-icon-color: null,
+    focus-trailing-icon-color: null,
+    hover-trailing-icon-color: null,
+    trailing-icon-color: null,
+    trailing-icon-size: null,
+    input-text-prefix-color: null,
+    input-text-type: null,
+    container-height: null,
+    input-text-suffix-color: null,
+    input-text-font: null,
+    input-text-line-height: null,
+    input-text-size: null,
+    input-text-tracking: null,
+    input-text-weight: null,
+    disabled-input-text-opacity: null,
+    error-focus-input-text-color: null,
+    error-hover-input-text-color: null,
+    error-input-text-color: null,
+    focus-input-text-color: null,
+    hover-input-text-color: null,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+  $warn: map.get($config, warn);
+  $is-dark: map.get($config, is-dark);
+  $on-surface: if($is-dark, #fff, #000);
+  $warn-color: theming.get-color-from-palette($warn);
+  $color-tokens: private-get-color-palette-color-tokens($config, primary);
+
+  @return map.merge($color-tokens, (
+    label-text-color: rgba($on-surface, 0.6),
+    disabled-label-text-color: rgba($on-surface, 0.38),
+
+    input-text-color: rgba($on-surface, 0.87),
+    disabled-input-text-color: rgba($on-surface, 0.38),
+    input-text-placeholder-color: rgba($on-surface, 0.6),
+
+    error-caret-color: $warn-color,
+    error-focus-label-text-color: $warn-color,
+    error-label-text-color: $warn-color,
+
+    // Outline tokens
+    outline-color: rgba($on-surface, 0.38),
+    disabled-outline-color: rgba($on-surface, 0.06),
+    hover-outline-color: rgba($on-surface, 0.87),
+    error-focus-outline-color: $warn-color,
+    error-hover-outline-color: $warn-color,
+    error-outline-color: $warn-color,
+  ));
+}
+
+// Generates the mapping for the properties that change based on the slide toggle color.
+@function private-get-color-palette-color-tokens($config, $palette-name) {
+  $palette: map.get($config, $palette-name);
+  $palette-color: theming.get-color-from-palette($palette);
+
+  @return (
+    caret-color: $palette-color,
+    focus-outline-color: $palette-color,
+    focus-label-text-color: theming.get-color-from-palette($palette, default, 0.87),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  $fallback-font-family: typography-utils.font-family($config);
+
+  @return (
+    label-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family,
+    label-text-line-height: typography-utils.line-height($config, body-1),
+    label-text-size: typography-utils.font-size($config, body-1),
+    label-text-tracking: typography-utils.letter-spacing($config, body-1),
+    label-text-weight: typography-utils.font-weight($config, body-1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @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/_plain-tooltip.scss

@@ -51,9 +51,9 @@ $prefix: (mdc, plain-tooltip);
     // Font for the tooltip text.
     supporting-text-font: typography-utils.font-family($config, caption)
     or typography-utils.font-family($config),
-    // Font size for the the tooltip text.
+    // Font size for the tooltip text.
     supporting-text-size: typography-utils.font-size($config, caption),
-    // Font weight of the the tooltip text.
+    // Font weight of the tooltip text.
     supporting-text-weight: typography-utils.font-weight($config, caption),
     // Tracking (space between letters) of the tooltip text.
     supporting-text-tracking: typography-utils.letter-spacing($config, caption),