bug(toolbar): Form fields with outline appearance not using light color font or border on dark colored toolbar

[sherrim]

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

13 (maybe 14, but I skipped to 15)

Description

When a primary color toolbar is dark, buttons and text normally switch to using white as their color. However, form-fields with appearance=outline are not using white for the text or borders. And I'm having trouble overriding css rules to force the outline/border to white.

Reproduction

StackBlitz: https://stackblitz.com/edit/angular-kxyauq?file=src/app/toolbar-basic-example.html

Steps to reproduce:

1. Just look at the form field within the toolbar to see it's the wrong color

Expected Behavior

The select menu to be white on the primary colored toolbar.

Actual Behavior

The select menu was still using dark colors.

Environment

Angular CLI: 15.1.6
Node: 16.13.2
Package Manager: npm 8.3.0
OS: darwin x64

Angular: 15.1.5
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router, service-worker

Package Version

@angular-devkit/architect 0.1501.6
@angular-devkit/build-angular 15.1.6
@angular-devkit/core 15.1.6
@angular-devkit/schematics 15.1.6
@angular/cli 15.1.6
@angular/flex-layout 13.0.0-beta.36
@schematics/angular 15.1.6
rxjs 7.5.7
typescript 4.8.4

• Browser(s): Version 1.48.164 Chromium: 110.0.5481.100 (Official Build) (arm64)
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS 12.2

[mmalerba]

A workaround for this is to create a dark theme and apply it to the components you need to use in the toolbar under the mat-toolbar selector:

$dark-theme: ...;

mat-toolbar {
  @include mat.form-field($dark-theme);
  @include mat.select($dark-theme);
  @include mat.input($dark-theme);
}

You can see an example of that here: https://stackblitz.com/edit/angular-kxyauq-dkcpnn?file=src%2Ftheme.scss

[SvenBudak]

I try to load only styles for form-field and input. because i dont use other components. But it seems that there are only private styles for form-field: