@angular/material 17.0.0-rc.1 → 17.0.0-rc.2

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

@@ -0,0 +1,87 @@
+@use 'sass:map';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, fab);
+
+// 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) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of icons and text projected into a FAB.
+    foreground-color: inspection.get-theme-color($theme, foreground, base),
+
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+
+    // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
+    // Background color of the container when the FAB is disabled.
+    disabled-state-container-color: rgba($on-surface, 0.12),
+
+    // Color of the icons and projected text when the FAB is disabled.
+    disabled-state-foreground-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
+  );
+}
+
+// Generates the mapping for the properties that change based on the FAB palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $container-color: inspection.get-theme-color($theme, $palette-name);
+  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+  $color: if($contrast-tone == 'dark', #000, #fff);
+
+  @return (
+    foreground-color: $color,
+    state-layer-color: $color,
+    ripple-color: rgba($color, 0.1),
+  );
+}
+
+// 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/_filled-button.scss

@@ -0,0 +1,76 @@
+@use 'sass:map';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, filled-button);
+
+// 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) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $container-color: inspection.get-theme-color($theme, $palette-name);
+  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+  $color: if($contrast-tone == 'dark', #000, #fff);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: rgba($color, 0.1),
+  );
+}
+
+// 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/_icon-button.scss

@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@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, icon-button);
+
+// 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) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $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/_outlined-button.scss

@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@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, outlined-button);
+
+// 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) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $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/_protected-button.scss

@@ -0,0 +1,76 @@
+@use 'sass:map';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, protected-button);
+
+// 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) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $container-color: inspection.get-theme-color($theme, $palette-name);
+  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+  $color: if($contrast-tone == 'dark', #000, #fff);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: rgba($color, 0.1),
+  );
+}
+
+// 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/_text-button.scss

@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@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, text-button);
+
+// 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) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $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/mdc/_extended-fab.scss

@@ -8,6 +8,9 @@ $prefix: (mdc, extended-fab);
 
 @function get-unthemable-tokens() {
   @return (
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
     container-color: null,
     container-elevation: null,
     container-height: null,

package/core/tokens/m2/mdc/_fab.scss

@@ -22,6 +22,13 @@ $ripple-target: '.mdc-fab__ripple';
     container-shape: 50%,
     icon-size: 24px,
 
+    // We don't use this token, because it doesn't set the color of any text inside the FAB.
+    // We create a custom token for it instead.
+    icon-color: null,
+
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
     container-elevation: null,
     container-height: null,
     container-shadow-color: null,
@@ -56,10 +63,17 @@ $ripple-target: '.mdc-fab__ripple';
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $surface: inspection.get-theme-color($theme, primary, default);
-  $on-surface: inspection.get-theme-color($theme, primary, default-contrast);
+  @return (
+    // Background color of the FAB.
+    container-color: inspection.get-theme-color($theme, background, card),
+  );
+}
 
-  @return (container-color: $surface, icon-color: $on-surface);
+// Generates the mapping for the properties that change based on the FAB palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  @return (
+    container-color: inspection.get-theme-color($theme, $palette-name, default),
+  );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.

package/core/tokens/m2/mdc/_filled-button.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
 @use '../../token-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
 @use '../../../theming/theming';
+@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, filled-button);
@@ -24,6 +24,9 @@ $prefix: (mdc, filled-button);
     keep-touch-target: false,
     pressed-container-elevation: 0,
 
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
     focus-ring-color: null,
     focus-ring-offset: null,
     focus-state-layer-opacity: null,
@@ -43,33 +46,36 @@ $prefix: (mdc, filled-button);
     with-icon-hover-icon-color: null,
     with-icon-icon-color: null,
     with-icon-icon-size: null,
-    with-icon-pressed-icon-color: null
+    with-icon-pressed-icon-color: null,
+    focus-state-layer-color: null,
+    hover-state-layer-color: null,
+    pressed-state-layer-color: null,
   );
 }
 
-@function _on-color($theme, $palette) {
-  @if ($palette) {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
-  }
-}
-
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $color: null, $on-color: null) {
+@function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $primary: inspection.get-theme-color($theme, primary);
   $surface: inspection.get-theme-color($theme, background, card);
-  $on-primary: _on-color($theme, $primary);
-  $on-surface: _on-color($theme, $surface);
+  $on-surface: if($is-dark, #fff, #000);
 
   @return (
-    container-color: if($color, $color, transparent),
+    container-color: $surface,
+    label-text-color: $on-surface,
     disabled-container-color: rgba($on-surface, 0.12),
     disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
-    focus-state-layer-color: $on-primary,
-    hover-state-layer-color: $on-primary,
-    label-text-color: if($on-color, $on-color, inherit),
-    pressed-state-layer-color: $on-primary
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $container-color: inspection.get-theme-color($theme, $palette-name, default);
+  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+
+  @return (
+    container-color: $container-color,
+    label-text-color: if($contrast-tone == 'dark', #000, #fff),
   );
 }
 

package/core/tokens/m2/mdc/_icon-button.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
 @use '../../token-utils';
@@ -57,8 +56,6 @@ $prefix: (mdc, icon-button);
 
 // Generates the mapping for the properties that change based on the button palette color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $palette: map.get($theme, $palette-name);
-
   @return (
     icon-color: inspection.get-theme-color($theme, $palette-name)
   );