Textfield floating label doesn't follow theme colors

[loicdekester]

Development Relevant Information:

• BalmUI version: v 10.23.0
• Browser: Chrome v 119.0.6045.124
• Operating System: Windows 10

Description:

When changing the theme colors like so: app.use(BalmUI, { $theme: { primary: "#ffd54f", secondary: "#ec407a" }, });

The floating label of the textfield when focused is still purple and it should be yellow:

Steps To Reproduce:

1. Create vue Project
2. Add balm-ui dependency
3. Change $theme.primary color
4. Add ui-textfield with a label to the DOM
5. When focusing the textfield the label has the wrong color.

https://jsfiddle.net/loicdekester/bnmdwsj3/

[elf-mouse]

Hi @loicdekester , This is a default value bug in the MDC design.

You need overwrite sass variables like this:

@use '@material/textfield' with (
  // $focused-label-color: rgba(theme-color.prop-value(primary), 0.87),
  $focused-label-color: primary,
);

[loicdekester]

Thank you for the quick support. I will use scss files for the theming from now on.