angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.36k stars 6.74k forks source link

feat(filled-text-field): make text colors themeable #28429

Open kroeder opened 9 months ago

kroeder commented 9 months ago

Feature Description

This issue is specifically for filled-text-field, though most likely affects other places in this repo as well.

In https://github.com/angular/components/blob/main/src/material/core/tokens/m2/mdc/_filled-text-field.scss#L97 a scss variable $on-surface is set. Depending on light or dark-theme, the outcome is hard-coded: #fff or #000

Based on black or white, all text colors are calculated using rgba($on-surface, 0.xx). Without overwriting the theme with css I don't see any way to apply our own design-system colors to inputs.

What I would have expected is e.g. using the already provided foreground and background colors

Use Case

I want to create a 100% custom theme and apply all colors from my own design system. At the same time I want to use the theming API as much as possible without the need to write many custom css workarounds that can break during major releases.

princehorn commented 7 months ago

Moin Kai,

maybe your issue is related to https://github.com/angular/components/issues/26153