bug(optgroup): Overriding label-text-color has no effect

[martinboue]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Using Angular and Material v19, I am trying to change the optgroup text color using the new mat.optgroup-overrides with label-text-color token mixins documented here but it has no effect.

Note: This is not a regression, same issue with v18.

Reproduction

My scss file:

html {
  @include mat.optgroup-overrides((
     label-text-color: red
  ));
}

and html:

<mat-form-field>
   <mat-label>My label</mat-label>
   <mat-select [formControl]="form.controls.myControl">
      <mat-optgroup label="Category 1">
         <mat-option [value]="1">Value 1</mat-option>
         <mat-option [value]="2">Value 2</mat-option>
      </mat-optgroup>
      <mat-optgroup label="Category 2">
         <mat-option [value]="3">Value 3</mat-option>
      </mat-optgroup>
   </mat-select>
</mat-form-field>

But it has no effect, the color stays to its default value --mat-sys-on-surface.

Inspecting CSS

I can see the red color being applied to the mat-optgroup host element.

But it is overriden in the inner child that contains the text: <span class="mdc-list-item__primary-text">Category 1</span> which has the following CSS:

.mdc-list-item__primary-text {
   ...
   color: var(--mdc-list-list-item-label-text-color, var(--mat-sys-on-surface))
}

Workaround

You could use mat.list-overrides but it will affect every list not just optgroup so I'm overriding the list CSS variable only for optgroups.

mat-optgroup .mat-mdc-optgroup-label {
   --mdc-list-list-item-label-text-color: red;
}

Note that this is not recommended by the documentation on "Direct Style Overrides" but that's the only way I know.

After that it works fine:

Expected Behavior

Optgroup text should be red.

Actual Behavior

Optgroup text stays grey.

Environment

• Angular v19.0.0
• Material v19.0.0