@angular/material 16.2.2 → 17.0.0-next.1

package/core/theming/_m2-inspection.scss

@@ -0,0 +1,211 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use './theming';
+@use '../typography/property-getters' as typography-getters;
+@use '../typography/versioning' as typography-versioning;
+
+/// Key used to access the Angular Material theme internals.
+$_internals: _mat-theming-internals-do-not-access;
+
+/// Keys that indicate a config object is a color config.
+$_color-keys: (
+  primary,
+  accent,
+  warn,
+  foreground,
+  background,
+  is-dark,
+  color, /* included for themes that incorrectly nest the color config: (color: (color: (....))) */
+);
+
+/// Keys that indicate a config object is a typography config.
+$_typography-keys: (
+  headline-1,
+  headline-2,
+  headline-3,
+  headline-4,
+  headline-5,
+  headline-6,
+  subtitle-1,
+  font-famiy,
+  subtitle-2,
+  body-1,
+  body-2,
+  button,
+  caption,
+  overline,
+);
+
+/// The CSS typography properties supported by the inspection API.
+$_typography-properties: (font, font-family, line-height, font-size, letter-spacing, font-weight);
+
+/// Gets the m2-config from the theme.
+@function _get-m2-config($theme) {
+  // It is possible for a user to pass a "density theme" that is just a number.
+  @if meta.type-of($theme) != 'map' {
+    @return $theme;
+  }
+  $internal: map.get($theme, $_internals, m2-config);
+  $theme: map.remove($theme, $_internals);
+  @return if(_is-error-theme($theme), $internal, $theme);
+}
+
+/// Checks whether the given theme contains error values.
+/// @param {*} $theme The theme to check.
+/// @return {Boolean} true if the theme contains error values, else false.
+@function _is-error-theme($theme) {
+  @if meta.type-of($theme) != 'map' {
+    @return false;
+  }
+  @if map.get($theme, ERROR) {
+    @return true;
+  }
+  @return _is-error-theme(list.nth(map.values($theme), 1));
+}
+
+/// Checks whether the given theme object has any of the given keys.
+/// @param {Map} $theme The theme to check
+/// @param {List} $keys The keys to check for
+/// @return {Boolean} Whether the theme has any of the given keys.
+@function _has-any-key($theme, $keys) {
+  @each $key in $keys {
+    @if map.has-key($theme, $key) {
+      @return true;
+    }
+  }
+  @return false;
+}
+
+/// Checks whether the given theme is a density scale value.
+/// @param {*} $theme The theme to check.
+/// @return {Boolean} true if the theme is a density scale value, else false.
+@function _is-density-value($theme) {
+  @return $theme == minimum or $theme == maximum or meta.type-of($theme) == 'number';
+}
+
+/// Gets the type of theme represented by a theme object (light or dark).
+/// @param {Map} $theme The theme
+/// @return {String} The type of theme (either `light` or `dark`).
+@function get-theme-type($theme) {
+  $theme: _get-m2-config($theme);
+  @if not theme-has($theme, color) {
+    @error 'Color information is not available on this theme.';
+  }
+  $colors: theming.get-color-config($theme);
+  // Some apps seem to have mistakenly created nested color themes that somehow work with our old
+  // theme normalization logic. This check allows those apps to keep working.
+  @if theme-has($colors, color) {
+    $colors: theming.get-color-config($colors);
+  }
+  @return if(map.get($colors, is-dark), dark, light);
+}
+
+/// Gets a color from a theme object. This function can take 2 or 3 arguments. If 2 arguments are
+/// passed, the second argument is treated as the name of a color role. If 3 arguments are passed,
+/// the second argument is treated as the name of a color palette (primary, secondary, etc.) and the
+/// third is treated as the palette hue (10, 50, etc.)
+/// @param {Map} $theme The theme
+/// @param {String} $palette-name The name of a color palette.
+/// @param {Number} $hue The palette hue to get (passing this argument means the second argument is
+///   interpreted as a palette name).
+/// @return {Color} The requested theme color.
+@function get-theme-color($theme, $palette-name, $args...) {
+  $theme: _get-m2-config($theme);
+  @if not theme-has($theme, color) {
+    @error 'Color information is not available on this theme.';
+  }
+  $colors: theming.get-color-config($theme);
+  // Some apps seem to have mistakenly created nested color themes that somehow work with our old
+  // theme normalization logic. This check allows those apps to keep working.
+  @if theme-has($colors, color) {
+    $colors: theming.get-color-config($colors);
+  }
+  $palette: map.get($colors, $palette-name);
+  @if not $palette {
+    @error 'Unrecognized palette name:' $palette-name;
+  }
+  @return theming.get-color-from-palette($palette, $args...);
+}
+
+/// Gets a typography value from a theme object.
+/// @param {Map} $theme The theme
+/// @param {String} $typescale The typescale name.
+/// @param {String} $property The CSS font property to get
+///   (font, font-family, font-size, font-weight, line-height, or letter-spacing).
+/// @return {*} The value of the requested font property.
+@function get-theme-typography($theme, $typescale, $property) {
+  $theme: _get-m2-config($theme);
+  @if not theme-has($theme, typography) {
+    @error 'Typography information is not available on this theme.';
+  }
+  $typography: typography-versioning.private-typography-to-2018-config(
+      theming.get-typography-config($theme));
+  @if $property == font {
+    $font-weight: typography-getters.font-weight($typography, $typescale);
+    $font-size: typography-getters.font-size($typography, $typescale);
+    $line-height: typography-getters.line-height($typography, $typescale);
+    $font-family: typography-getters.font-family($typography, $typescale);
+    @return ($font-weight list.slash($font-size, $line-height) $font-family);
+  }
+  @else if $property == font-family {
+    $result: typography-getters.font-family($typography, $typescale);
+    @return $result or typography-getters.font-family($typography);
+  }
+  @else if $property == font-size {
+    @return typography-getters.font-size($typography, $typescale);
+  }
+  @else if $property == font-weight {
+    @return typography-getters.font-weight($typography, $typescale);
+  }
+  @else if $property == line-height {
+    @return typography-getters.line-height($typography, $typescale);
+  }
+  @else if $property == letter-spacing {
+    @return typography-getters.letter-spacing($typography, $typescale);
+  }
+  @else {
+    @error #{'Valid typography properties are: #{$_typography-properties}. Got:'} $property;
+  }
+}
+
+/// Gets the density scale from a theme object.
+/// @param {Map} $theme The theme
+/// @return {Number} The density scale.
+@function get-theme-density($theme) {
+  $theme: _get-m2-config($theme);
+  @if not theme-has($theme, density) {
+    @error 'Density information is not available on this theme.';
+  }
+  $scale: theming.get-density-config($theme);
+  @return theming.clamp-density($scale, -5);
+}
+
+/// Checks whether the theme has information about given theming system.
+/// @param {Map} $theme The theme
+/// @param {String} $system The system to check
+/// @param {Boolean} Whether the theme has information about the system.
+@function theme-has($theme, $system) {
+  $theme: _get-m2-config($theme);
+  @if $system == base {
+    @return true;
+  }
+  @if $system == color {
+    $color: theming.get-color-config($theme);
+    @return $color != null and _has-any-key($color, $_color-keys);
+  }
+  @if $system == typography {
+    $typography: theming.get-typography-config($theme);
+    @return $typography != null and _has-any-key($typography, $_typography-keys);
+  }
+  @if $system == density {
+    // Backwards compatibility for the case where an explicit, but invalid density is given
+    // (this was previously treated as density 0).
+    @if meta.type-of($theme) == 'map' and map.get($theme, density) {
+      @return true;
+    }
+    $density: theming.get-density-config($theme);
+    @return $density != null and _is-density-value($density);
+  }
+  @error 'Valid systems are: base, color, typography, density. Got:' $system;
+}

package/core/theming/_theming.scss

@@ -5,6 +5,9 @@
 @use 'palette';
 @use '../density/private/compatibility';
 
+// Whether to enable compatibility with legacy methods for accessing theme information.
+$theme-legacy-inspection-api-compatibility: true !default;
+
 // Whether duplication warnings should be disabled. Warnings enabled by default.
 $theme-ignore-duplication-warnings: false !default;
 
@@ -35,6 +38,7 @@ $_disable-color-backwards-compatibility: false;
 $_emitted-color: () !default;
 $_emitted-typography: () !default;
 $_emitted-density: () !default;
+$_emitted-base: () !default;
 
 /// Extracts a color from a palette or throws an error if it doesn't exist.
 /// @param {Map} $palette The palette from which to extract a color.
@@ -71,7 +75,6 @@ $_emitted-density: () !default;
     lighter: _get-color-from-palette($base-palette, $lighter),
     darker: _get-color-from-palette($base-palette, $darker),
     text: _get-color-from-palette($base-palette, $text),
-
     default-contrast: get-contrast-color-from-palette($base-palette, $default),
     lighter-contrast: get-contrast-color-from-palette($base-palette, $lighter),
     darker-contrast: get-contrast-color-from-palette($base-palette, $darker)
@@ -184,10 +187,10 @@ $_emitted-density: () !default;
   // configuration for the `color` theming part.
   @if $accent != null {
     @warn $_legacy-theme-warning;
-    @return private-create-backwards-compatibility-theme(_mat-validate-theme((
+    @return _internalize-theme(private-create-backwards-compatibility-theme(_mat-validate-theme((
       _is-legacy-theme: true,
       color: _mat-create-light-color-config($primary, $accent, $warn),
-    )));
+    ))));
   }
   // If the map pattern is used (1), we just pass-through the configurations for individual
   // parts of the theming system, but update the `color` configuration if set. As explained
@@ -200,7 +203,8 @@ $_emitted-density: () !default;
     $warn: map.get($color-settings, warn);
     $result: map.merge($result, (color: _mat-create-light-color-config($primary, $accent, $warn)));
   }
-  @return private-create-backwards-compatibility-theme(_mat-validate-theme($result));
+  @return _internalize-theme(
+      private-create-backwards-compatibility-theme(_mat-validate-theme($result)));
 }
 
 // TODO: Remove legacy API and rename below `$primary` to `$config`. Currently it cannot be renamed
@@ -225,10 +229,10 @@ $_emitted-density: () !default;
   // configuration for the `color` theming part.
   @if $accent != null {
     @warn $_legacy-theme-warning;
-    @return private-create-backwards-compatibility-theme(_mat-validate-theme((
+    @return _internalize-theme(private-create-backwards-compatibility-theme(_mat-validate-theme((
       _is-legacy-theme: true,
       color: _mat-create-dark-color-config($primary, $accent, $warn),
-    )));
+    ))));
   }
   // If the map pattern is used (1), we just pass-through the configurations for individual
   // parts of the theming system, but update the `color` configuration if set. As explained
@@ -241,7 +245,8 @@ $_emitted-density: () !default;
     $warn: map.get($color-settings, warn);
     $result: map.merge($result, (color: _mat-create-dark-color-config($primary, $accent, $warn)));
   }
-  @return private-create-backwards-compatibility-theme(_mat-validate-theme($result));
+  @return _internalize-theme(
+      private-create-backwards-compatibility-theme(_mat-validate-theme($result)));
 }
 
 /// Gets the color configuration from the given theme or configuration.
@@ -321,6 +326,8 @@ $_emitted-density: () !default;
 // Private APIs
 //
 
+$_internals: _mat-theming-internals-do-not-access;
+
 // Checks if configurations that have been declared in the given theme have been generated
 // before. If so, warnings will be reported. This should notify developers in case duplicate
 // styles are accidentally generated due to wrong usage of the all-theme mixins.
@@ -334,6 +341,111 @@ $_emitted-density: () !default;
 // (e.g. `all-component-themes` and `all-legacy-component-themes`) without causing any
 // style duplication.
 @mixin private-check-duplicate-theme-styles($theme-or-color-config, $id) {
+  // TODO(mmalerba): use get-theme-version for this check when its moved out of experimental.
+  @if map.get($theme-or-color-config, $_internals, theme-version) == 1 {
+    @include _check-duplicate-theme-styles-v1($theme-or-color-config, $id) {
+      // Optionally, consumers of this mixin can wrap contents inside so that nested
+      // duplicate style checks do not report another warning. e.g. if developers include
+      // the `all-component-themes` mixin twice, only the top-level duplicate styles check
+      // should report a warning. Not all individual components should report a warning too.
+      $orig-mat-theme-ignore-duplication-warnings: $theme-ignore-duplication-warnings;
+      $theme-ignore-duplication-warnings: true !global;
+      @content;
+      $theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global;
+    }
+  }
+  @else {
+    @include _check-duplicate-theme-styles-v0($theme-or-color-config, $id) {
+      // Optionally, consumers of this mixin can wrap contents inside so that nested
+      // duplicate style checks do not report another warning. e.g. if developers include
+      // the `all-component-themes` mixin twice, only the top-level duplicate styles check
+      // should report a warning. Not all individual components should report a warning too.
+      $orig-mat-theme-ignore-duplication-warnings: $theme-ignore-duplication-warnings;
+      $theme-ignore-duplication-warnings: true !global;
+      @content;
+      $theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global;
+    }
+  }
+}
+
+/// Strip out any settings map entries that have empty values (null or ()).
+@function _strip-empty-settings($settings) {
+  $result: ();
+  @each $key, $value in $settings {
+    @if $value != null and $value != () {
+      $result: map.set($result, $key, $value);
+    }
+  }
+  @return if($result == (), null, $result);
+}
+
+// Checks for duplicate styles in a `theme-version: 1` style theme.
+@mixin _check-duplicate-theme-styles-v1($theme-or-color-config, $id) {
+  $color-settings: _strip-empty-settings((
+    theme-type: map.get($theme-or-color-config, $_internals, theme-type),
+    color-tokens: map.get($theme-or-color-config, $_internals, color-tokens),
+  ));
+  $typography-settings: _strip-empty-settings((
+    typography-tokens: map.get($theme-or-color-config, $_internals, typography-tokens),
+  ));
+  $density-settings: _strip-empty-settings((
+    density-scale: map.get($theme-or-color-config, $_internals, density-scale),
+    density-tokens: map.get($theme-or-color-config, $_internals, density-tokens),
+  ));
+  $base-settings: _strip-empty-settings((
+    base-tokens: map.get($theme-or-color-config, $_internals, base-tokens),
+  ));
+  $previous-color-settings: map.get($_emitted-color, $id) or ();
+  $previous-typography-settings: map.get($_emitted-typography, $id) or ();
+  $previous-density-settings: map.get($_emitted-density, $id) or ();
+  $previous-base-settings: map.get($_emitted-base, $id) or ();
+
+  // Check if the color configuration has been generated before.
+  @if $color-settings != null {
+    @if list.index($previous-color-settings, $color-settings) != null and
+        not $theme-ignore-duplication-warnings {
+      @warn 'The same color styles are generated multiple times. ' + $_duplicate-warning;
+    }
+    $previous-color-settings: list.append($previous-color-settings, $color-settings);
+  }
+
+  // Check if the typography configuration has been generated before.
+  @if $typography-settings != null {
+    @if list.index($previous-typography-settings, $typography-settings) != null and
+        not $theme-ignore-duplication-warnings {
+      @warn 'The same typography styles are generated multiple times. ' + $_duplicate-warning;
+    }
+    $previous-typography-settings: list.append($previous-typography-settings, $typography-settings);
+  }
+
+  // Check if the density configuration has been generated before.
+  @if $density-settings != null {
+    @if list.index($previous-density-settings, $density-settings) != null and
+        not $theme-ignore-duplication-warnings {
+      @warn 'The same density styles are generated multiple times. ' + $_duplicate-warning;
+    }
+    $previous-density-settings: list.append($previous-density-settings, $density-settings);
+  }
+
+  // Check if the base configuration has been generated before.
+  @if $base-settings != null {
+    @if list.index($previous-base-settings, $base-settings) != null and
+        not $theme-ignore-duplication-warnings {
+      @warn 'The same base theme styles are generated multiple times. ' + $_duplicate-warning;
+    }
+    $previous-base-settings: list.append($previous-base-settings, $base-settings);
+  }
+
+  $_emitted-color: map.set($_emitted-color, $id, $previous-color-settings) !global;
+  $_emitted-density: map.set($_emitted-density, $id, $previous-density-settings) !global;
+  $_emitted-typography: map.set($_emitted-typography, $id, $previous-typography-settings) !global;
+  $_emitted-base: map.set($_emitted-base, $id, $previous-base-settings) !global;
+
+  @content;
+}
+
+// Checks for duplicate styles in a `theme-version: 0` style theme.
+@mixin _check-duplicate-theme-styles-v0($theme-or-color-config, $id) {
   $theme: private-legacy-get-theme($theme-or-color-config);
   $color-config: get-color-config($theme);
   $density-config: get-density-config($theme);
@@ -383,13 +495,6 @@ $_emitted-density: () !default;
   $_emitted-density: map.merge($_emitted-density, ($id: $previous-density)) !global;
   $_emitted-typography: map.merge($_emitted-typography, ($id: $previous-typography)) !global;
 
-  // Optionally, consumers of this mixin can wrap contents inside so that nested
-  // duplicate style checks do not report another warning. e.g. if developers include
-  // the `all-component-themes` mixin twice, only the top-level duplicate styles check
-  // should report a warning. Not all individual components should report a warning too.
-  $orig-mat-theme-ignore-duplication-warnings: $theme-ignore-duplication-warnings;
-  $theme-ignore-duplication-warnings: true !global;
-
   // If duplicate default density styles would be generated for a legacy constructed theme,
   // we adjust the density generation so that no density styles are generated by default.
   // If no default density styles have been generated yet, we ensure that the styles
@@ -401,7 +506,6 @@ $_emitted-density: () !default;
   compatibility.$private-density-generate-styles: not $duplicate-legacy-density;
 
   @content;
-  $theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global;
 
   compatibility.$private-density-generate-at-root: false;
   compatibility.$private-density-generate-styles: true;
@@ -456,7 +560,8 @@ $_emitted-density: () !default;
 // TODO(devversion): remove this in the future. Constructing themes manually is rare,
 // and the code can be easily updated to the new API.
 @function private-legacy-get-theme($theme-or-color-config) {
-  @if private-is-theme-object($theme-or-color-config) {
+  @if private-is-theme-object($theme-or-color-config) or
+      map.get($theme-or-color-config, $_internals, theme-version) == 1 {
     @return $theme-or-color-config;
   }
 
@@ -495,3 +600,51 @@ $_emitted-density: () !default;
   }
   @return $density-scale;
 }
+
+/// Copies the given theme object and nests it within itself under a secret key and replaces the
+/// original map keys with error values. This allows the inspection API which is aware of the secret
+/// key to access the real values, but attempts to directly access the map will result in errors.
+/// @param {Map} $theme The theme map.
+@function _internalize-theme($theme) {
+  @if map.has-key($theme, $_internals) {
+    @return $theme;
+  }
+  $internalized-theme: (
+    $_internals: (
+      theme-version: 0,
+      m2-config: $theme
+    )
+  );
+  @if ($theme-legacy-inspection-api-compatibility) {
+    @return map.merge($theme, $internalized-theme);
+  }
+  $error-theme:
+    _replace-values-with-errors($theme, 'Theme may only be accessed via theme inspection API');
+  @return map.merge($error-theme, $internalized-theme);
+}
+
+/// Replaces concrete CSS values with errors in a theme object.
+/// Errors are represented as a map `(ERROR: <message>)`. Because maps are not valid CSS values,
+/// the Sass will not compile if the user tries to use any of the error theme values in their CSS.
+/// Users will see a message about `(ERROR: <message>)` not being a valid CSS value. Using the
+/// message, that winds up getting shown, we can help explain to users why they're getting the
+/// error.
+/// @param {*} $value The theme value to replace with errors.
+/// @param {String} $message The error message to sow users.
+/// @return {Map} A version of $value where concrete CSS values have been replaced with errors
+@function _replace-values-with-errors($value, $message) {
+  $value-type: meta.type-of($value);
+  @if $value-type == 'map' {
+    @each $k, $v in $value {
+      $value: map.set($value, $k, _replace-values-with-errors($v, $message));
+    }
+    @return $value;
+  }
+  @else if $value-type == 'list' and list.length($value) > 0 {
+    @for $i from 1 through list.length() {
+      $value: list.set-nth($value, $i, _replace-values-with-errors(list.nth($value, $i), $message));
+    }
+    @return $value;
+  }
+  @return (ERROR: $message);
+}

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

@@ -1,7 +1,5 @@
-@use 'sass:map';
 @use '../../token-utils';
-@use '../../../theming/theming';
-@use '../../../typography/typography-utils';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -14,45 +12,41 @@ $prefix: (mat, card);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-
+@function get-color-tokens($theme) {
   @return (
     // Text color of the card's subtitle.
-    subtitle-text-color: theming.get-color-from-palette($foreground, secondary-text),
+    subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return (
     // Font family of the card's title.
-    title-text-font: typography-utils.font-family($config, headline-6)
-          or typography-utils.font-family($config),
+    title-text-font: inspection.get-theme-typography($theme, headline-6, font-family),
     // Line height of the card's title.
-    title-text-line-height: typography-utils.line-height($config, headline-6),
+    title-text-line-height: inspection.get-theme-typography($theme, headline-6, line-height),
     // Font size of the card's title.
-    title-text-size: typography-utils.font-size($config, headline-6),
+    title-text-size: inspection.get-theme-typography($theme, headline-6, font-size),
     // Letter spacing of the card's title.
-    title-text-tracking: typography-utils.letter-spacing($config, headline-6),
+    title-text-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing),
     // Font weight of the card's title.
-    title-text-weight: typography-utils.font-weight($config, headline-6),
+    title-text-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
     // Font family of the card's subtitle.
-    subtitle-text-font: typography-utils.font-family($config, subtitle-2)
-          or typography-utils.font-family($config),
+    subtitle-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
     // Line height of the card's subtitle.
-    subtitle-text-line-height: typography-utils.line-height($config, subtitle-2),
+    subtitle-text-line-height: inspection.get-theme-typography($theme, subtitle-2, line-height),
     // Font size of the card's subtitle.
-    subtitle-text-size: typography-utils.font-size($config, subtitle-2),
+    subtitle-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
     // Letter spacing of the card's subtitle.
-    subtitle-text-tracking: typography-utils.letter-spacing($config, subtitle-2),
+    subtitle-text-tracking: inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
     // Font weight of the card's subtitle.
-    subtitle-text-weight: typography-utils.font-weight($config, subtitle-2),
+    subtitle-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
   );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 

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

@@ -1,7 +1,8 @@
 @use 'sass:map';
 @use '../../token-utils';
 @use '../../../style/sass-utils';
-@use '../../../typography/typography-utils';
+@use '../../../theming/inspection';
+@use '../../../theming/palette';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, form-field);
@@ -13,29 +14,57 @@ $prefix: (mat, form-field);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $is-dark: map.get($config, is-dark);
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
   $on-surface: if($is-dark, #fff, #000);
+  $color-tokens: private-get-color-palette-color-tokens($theme, primary);
 
-  @return (
+  @return map.merge($color-tokens, (
     // MDC has a token for the enabled placeholder, but not for the disabled one.
     disabled-input-text-placeholder-color: rgba($on-surface, 0.38),
+    state-layer-color: rgba($on-surface, 0.87),
+    error-text-color: inspection.get-theme-color($theme, warn),
+
+    // On dark themes we set the native `select` color to some shade of white,
+    // however the color propagates to all of the `option` elements, which are
+    // always on a white background inside the dropdown, causing them to blend in.
+    // Since we can't change background of the dropdown, we need to explicitly
+    // reset the color of the options to something dark.
+    select-option-text-color: if($is-dark, palette.$dark-primary-text, inherit),
+    // Note the spelling of the `GrayText` here which is a system color. See:
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/system-color
+    select-disabled-option-text-color: if($is-dark, palette.$dark-disabled-text, GrayText),
+
+    // These values are taken from the MDC select implementation:
+    // https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/_select-theme.scss
+    enabled-select-arrow-color: rgba($on-surface, 0.54),
+    disabled-select-arrow-color: rgba($on-surface, 0.38),
+
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+  ));
+}
+
+// Generates the mapping for the properties that change based on the form field color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $palette-color: inspection.get-theme-color($theme, $palette-name);
+
+  @return (
+    focus-select-arrow-color: sass-utils.safe-color-change($palette-color, $alpha: 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);
-
+@function get-typography-tokens($theme) {
   @return (
     // MDC uses `subtitle1` for the input value, placeholder and floating label. The spec
     // shows `body1` for text fields though, so we manually override the typography.
     // Note: Form controls inherit the typography from the parent form field.
-    container-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family,
-    container-text-line-height: typography-utils.line-height($config, body-1),
-    container-text-size: typography-utils.font-size($config, body-1),
-    container-text-tracking: typography-utils.letter-spacing($config, body-1),
-    container-text-weight: typography-utils.font-weight($config, body-1),
+    container-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    container-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
+    container-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    container-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    container-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
 
     // In the container styles, we updated the floating label to use the `body-1` typography level.
     // The MDC notched outline overrides this accidentally (only when the label floats) to a
@@ -45,18 +74,18 @@ $prefix: (mat, form-field);
     // https://github.com/material-components/material-components-web/blob/master/packages/mdc-notched-outline/_mixins.scss#L272-L292.
     // This is why we can't use their `label-text-populated-size` token and we have to declare
     // our own version of it.
-    outlined-label-text-populated-size: typography-utils.font-size($config, body-1),
+    outlined-label-text-populated-size: inspection.get-theme-typography($theme, body-1, font-size),
 
-    subscript-text-font: typography-utils.font-family($config, caption) or $fallback-font-family,
-    subscript-text-line-height: typography-utils.line-height($config, caption),
-    subscript-text-size: typography-utils.font-size($config, caption),
-    subscript-text-tracking: typography-utils.letter-spacing($config, caption),
-    subscript-text-weight: typography-utils.font-weight($config, caption),
+    subscript-text-font: inspection.get-theme-typography($theme, caption, font-family),
+    subscript-text-line-height: inspection.get-theme-typography($theme, caption, line-height),
+    subscript-text-size: inspection.get-theme-typography($theme, caption, font-size),
+    subscript-text-tracking: inspection.get-theme-typography($theme, caption, letter-spacing),
+    subscript-text-weight: inspection.get-theme-typography($theme, caption, font-weight),
   );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }