Should it be possible to set the text color of an Angular Material theme?

Question

Using Material's public functions and not overriding the CSS is it possible to set the text color?

The define-palette function takes an argument called text and this sets a text property of the palette. But if I call mat.get-theme-color($AngularMaterialTest-theme, foreground, text) I get rgba(0, 0, 0, 0.87).

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$AngularMaterialTest-primary: mat.define-palette(mat.$indigo-palette, A200, A100, A400, A700); //A700 = #303f9f
$AngularMaterialTest-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400, A700);

// The warn palette is optional (defaults to red).
$AngularMaterialTest-warn: mat.define-palette(mat.$red-palette, A200, A100, A400, A700);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$AngularMaterialTest-theme: mat.define-light-theme((
  color: (
    primary: $AngularMaterialTest-primary,
    accent: $AngularMaterialTest-accent,
    warn: $AngularMaterialTest-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($AngularMaterialTest-theme);

@debug($AngularMaterialTest-primary); // Has text: #304ffe
@debug(mat.get-theme-color($AngularMaterialTest-theme, foreground, text)); // rgba(0, 0, 0, 0.87)

Answer 1

Base on the source code it isn't design to have anything other than black or white text.

The resolves the text colour for "text" buttons. You can see it only looks at $is-dark which is set when you call either mat.define-light-theme or mat.define-dark-theme. It not checking any color values from the theme.

@function get-color-tokens($theme) {
  $is-dark: inspection.get-theme-type($theme) == dark;
  $on-surface: if($is-dark, #fff, #000);

  @return (
    label-text-color: $on-surface,
    disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
  );
}

https://github.com/angular/components/blob/b43c73c836fc46fccb8510d7a4da04b612929610/src/material/core/tokens/m2/mdc/_text-button.scss#L46

Doing a search for if($is-dark, #fff, #000) shows how many places the color is hardcoded to either black or white

https://github.com/search?q=repo%3Aangular%2Fcomponents+if%28%24is-dark%2C+%23fff%2C+%23000%29&type=code&p=1