Merge branch 'angular:main' into menu

Author: adolgachev

goldens/material/chips/index.api.md

@@ -423,6 +423,8 @@ export class MatChipRow extends MatChip implements AfterViewInit {
     editable: boolean;
     readonly edited: EventEmitter<MatChipEditedEvent>;
     // (undocumented)
+    _handleClick(event: MouseEvent): void;
+    // (undocumented)
     _handleDoubleclick(event: MouseEvent): void;
     _handleFocus(): void;
     // (undocumented)
@@ -434,6 +436,8 @@ export class MatChipRow extends MatChip implements AfterViewInit {
     // (undocumented)
     _isRippleDisabled(): boolean;
     // (undocumented)
+    ngAfterViewInit(): void;
+    // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", never, { "editable": { "alias": "editable"; "required": false; }; }, { "edited": "edited"; }, ["contentEditInput"], ["mat-chip-avatar, [matChipAvatar]", "[matChipEditInput]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipRow, never>;

src/material/_index.scss

@@ -17,7 +17,6 @@
 @forward './core/theming/theming' as private-* show private-clamp-density;
 @forward './core/typography/typography' show typography-hierarchy;
 @forward './core/typography/typography-utils' show font-shorthand;
-@forward 'core/tokens/m2-tokens' show m2-tokens-from-theme;
 @forward './core/tokens/m3-system' show system-level-colors,
     system-level-typography, system-level-elevation, system-level-shape,
     system-level-motion, system-level-state, theme, theme-overrides;

src/material/badge/_m2-badge.scss

@@ -1,7 +1,5 @@
-@use 'sass:meta';
 @use 'sass:map';
 @use 'sass:math';
-@use 'sass:color';
 @use '../core/theming/inspection';
 
 $_default-size: 22px;
@@ -42,22 +40,9 @@ $_large-size: $_default-size + 6px;
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $primary-color-tokens: private-get-color-palette-color-tokens($theme, primary);
-  $app-background: inspection.get-theme-color($theme, background, background);
-  $disabled-background: inspection.get-theme-color($theme, foreground, disabled-button);
-
-  // The disabled color usually has some kind of opacity, but because the badge is overlayed
-  // on top of something else, it won't look good if it's opaque. If it is a color *type*,
-  // we convert it into a solid color by taking the opacity from the rgba value and using
-  // the value to determine the percentage of the background to put into foreground when
-  // mixing the colors together.
-  @if (meta.type-of($disabled-background) == color and meta.type-of($app-background) == color) {
-    $badge-opacity: color.opacity($disabled-background);
-    $disabled-background: color.mix($app-background,
-      rgba($disabled-background, 1), (1 - $badge-opacity) * 100%);
-  }
-
   @return map.merge($primary-color-tokens, (
-    badge-disabled-state-background-color: $disabled-background,
+    badge-disabled-state-background-color:
+        inspection.get-theme-color($theme, foreground, disabled-button),
     badge-disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text),
   ));
 }

src/material/button-toggle/_m2-button-toggle.scss

@@ -19,17 +19,17 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    button-toggle-background-color: inspection.get-theme-color($theme, system, surface),
+    button-toggle-background-color: map.get($system, surface),
     button-toggle-disabled-selected-state-background-color:
         inspection.get-theme-color($theme, background, selected-disabled-button),
-    button-toggle-disabled-selected-state-text-color:
-        inspection.get-theme-color($theme, system, on-surface),
-    button-toggle-disabled-state-background-color:
-        inspection.get-theme-color($theme, system, surface),
+    button-toggle-disabled-selected-state-text-color: map.get($system, on-surface),
+    button-toggle-disabled-state-background-color: map.get($system, surface),
     button-toggle-disabled-state-text-color:
         inspection.get-theme-color($theme, foreground, disabled-button),
-    button-toggle-divider-color: inspection.get-theme-color($theme, system, outline),
+    button-toggle-divider-color: map.get($system, outline),
     button-toggle-legacy-disabled-selected-state-background-color:
         inspection.get-theme-color($theme, background, selected-disabled-button),
     button-toggle-legacy-disabled-state-background-color:
@@ -38,16 +38,15 @@
         inspection.get-theme-color($theme, foreground, disabled-button),
     button-toggle-legacy-selected-state-background-color:
         inspection.get-theme-color($theme, background, selected-button),
-    button-toggle-legacy-selected-state-text-color:
-        inspection.get-theme-color($theme, foreground, secondary-text),
+    button-toggle-legacy-selected-state-text-color: map.get($system, surface-variant),
     button-toggle-legacy-state-layer-color:
         inspection.get-theme-color($theme, background, focused-button),
     button-toggle-legacy-text-color: inspection.get-theme-color($theme, foreground, hint-text),
     button-toggle-selected-state-background-color:
         inspection.get-theme-color($theme, background, selected-button),
-    button-toggle-selected-state-text-color: inspection.get-theme-color($theme, system, on-surface),
-    button-toggle-state-layer-color: inspection.get-theme-color($theme, background, base),
-    button-toggle-text-color: inspection.get-theme-color($theme, system, on-surface),
+    button-toggle-selected-state-text-color: map.get($system, on-surface),
+    button-toggle-state-layer-color: inspection.get-theme-color($theme, system, on-surface),
+    button-toggle-text-color: map.get($system, on-surface),
   );
 }
 

src/material/button/_m2-button.scss

@@ -1,6 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
@@ -45,21 +46,21 @@
   $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) == dark;
   $outline: inspection.get-theme-color($theme, system, outline);
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
+  $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
+
   @return (
     button-filled-container-color: map.get($system, surface),
-    button-filled-disabled-container-color:
-        inspection.get-theme-color($theme, foreground, base, 0.12),
-    button-filled-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
+    button-filled-disabled-container-color: $disabled-container,
+    button-filled-disabled-label-text-color: $disabled,
     button-filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     button-filled-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     button-filled-label-text-color: inspection.get-theme-color($theme, foreground, base),
     button-filled-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     button-filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-filled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-outlined-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
+    button-outlined-disabled-label-text-color: $disabled,
     button-outlined-disabled-outline-color: $outline,
     button-outlined-disabled-state-layer-color:
         inspection.get-theme-color($theme, foreground, base),
@@ -72,10 +73,8 @@
     button-outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     button-protected-container-color: map.get($system, surface),
-    button-protected-disabled-container-color:
-        inspection.get-theme-color($theme, foreground, base, 0.12),
-    button-protected-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
+    button-protected-disabled-container-color: $disabled-container,
+    button-protected-disabled-label-text-color: $disabled,
     button-protected-disabled-state-layer-color:
         inspection.get-theme-color($theme, foreground, base),
     button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
@@ -85,8 +84,7 @@
         map.get($system, pressed-state-layer-opacity),
     button-protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-protected-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-text-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
+    button-text-disabled-label-text-color: $disabled,
     button-text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     button-text-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
@@ -95,10 +93,8 @@
     button-text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     button-tonal-container-color: map.get($system, surface),
-    button-tonal-disabled-container-color:
-        inspection.get-theme-color($theme, foreground, base, 0.12),
-    button-tonal-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
+    button-tonal-disabled-container-color: $disabled-container,
+    button-tonal-disabled-label-text-color: $disabled,
     button-tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     button-tonal-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),

src/material/button/_m2-fab.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
@@ -31,24 +32,22 @@
 @function get-color-tokens($theme) {
   $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) == dark;
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
+  $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
 
   @return (
     fab-container-color: map.get($system, surface),
-    fab-disabled-state-container-color:
-        inspection.get-theme-color($theme, foreground, base, 0.12),
-    fab-disabled-state-foreground-color:
-        inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
+    fab-disabled-state-container-color: $disabled-container,
+    fab-disabled-state-foreground-color: $disabled,
     fab-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     fab-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     fab-foreground-color: inspection.get-theme-color($theme, foreground, base),
     fab-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     fab-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     fab-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     fab-small-container-color: map.get($system, surface),
-    fab-small-disabled-state-container-color:
-        inspection.get-theme-color($theme, foreground, base, 0.12),
-    fab-small-disabled-state-foreground-color:
-        inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
+    fab-small-disabled-state-container-color: $disabled-container,
+    fab-small-disabled-state-foreground-color: $disabled,
     fab-small-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     fab-small-foreground-color: inspection.get-theme-color($theme, foreground, base),

src/material/card/_m2-card.scss

@@ -1,5 +1,7 @@
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -14,14 +16,16 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    card-elevated-container-color: inspection.get-theme-color($theme, system, surface),
+    card-elevated-container-color: map.get($system, surface),
     card-elevated-container-elevation: elevation.get-box-shadow(1),
-    card-outlined-container-color: inspection.get-theme-color($theme, system, surface),
+    card-outlined-container-color: map.get($system, surface),
     card-outlined-container-elevation: elevation.get-box-shadow(0),
     card-outlined-outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
-    card-subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    card-filled-container-color: inspection.get-theme-color($theme, system, surface),
+    card-subtitle-text-color: map.get($system, surface-variant),
+    card-filled-container-color: map.get($system, surface),
     card-filled-container-elevation: elevation.get-box-shadow(0)
   );
 }

src/material/checkbox/_m2-checkbox.scss

@@ -1,9 +1,8 @@
 @use 'sass:map';
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/m2/theming' as m2-theming;
-@use '../core/m2/palette' as m2-palette;
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -28,32 +27,30 @@
   $is-dark: inspection.get-theme-type($theme) == dark;
   $foreground-base: inspection.get-theme-color($theme, foreground, base);
   $palette-default: inspection.get-theme-color($theme, $palette-name, default);
-  $disabled-color: inspection.get-theme-color($theme, foreground, base, 0.38);
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
   $palette-selected: inspection.get-theme-color($theme, $palette-name);
   $border-color: inspection.get-theme-color($theme, foreground, base, 0.54);
-  $active-border-color:
-    m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
   $selected-checkmark-color:
     inspection.get-theme-color($theme, $palette-name, default-contrast);
 
   $tokens: (
-    checkbox-disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
+    checkbox-disabled-label-color: $disabled,
     checkbox-label-text-color: map.get($system, on-surface),
-    checkbox-disabled-selected-icon-color: $disabled-color,
-    checkbox-disabled-unselected-icon-color: $disabled-color,
+    checkbox-disabled-selected-icon-color: $disabled,
+    checkbox-disabled-unselected-icon-color: $disabled,
     checkbox-selected-checkmark-color: $selected-checkmark-color,
     checkbox-selected-focus-icon-color: $palette-selected,
     checkbox-selected-hover-icon-color: $palette-selected,
     checkbox-selected-icon-color: $palette-selected,
     checkbox-selected-pressed-icon-color: $palette-selected,
-    checkbox-unselected-focus-icon-color: $active-border-color,
-    checkbox-unselected-hover-icon-color: $active-border-color,
+    checkbox-unselected-focus-icon-color: map.get($system, on-surface),
+    checkbox-unselected-hover-icon-color: map.get($system, on-surface),
     checkbox-unselected-icon-color: $border-color,
     checkbox-selected-focus-state-layer-color: $palette-default,
     checkbox-selected-hover-state-layer-color: $palette-default,
     checkbox-selected-pressed-state-layer-color: $palette-default,
-    checkbox-unselected-focus-state-layer-color: $foreground-base,
-    checkbox-unselected-hover-state-layer-color: $foreground-base,
+    checkbox-unselected-focus-state-layer-color: map.get($system, on-surface),
+    checkbox-unselected-hover-state-layer-color: map.get($system, on-surface),
     checkbox-unselected-pressed-state-layer-color: $foreground-base,
   );