Theming for deprecated MWC components hides secondary text

[danyill]

Currently, --mdc-theme-text-secondary-on-background is var(--oscd-base3) but this is set the same as: --mdc-theme-background, therefore the text disappears.

See:

oscd-shell/src/oscd-shell.ts

Lines 529 to 541 in 15f10d1

	/* MDC Theme Colors
	* Needed for supporting any pluggins still using the depricated MWC Components
	*/
	--mdc-theme-primary: var(--oscd-primary);
	--mdc-theme-secondary: var(--oscd-secondary);
	--mdc-theme-background: var(--oscd-base3);
	--mdc-theme-surface: var(--oscd-base3);
	--mdc-theme-on-primary: var(--oscd-base2);
	--mdc-theme-on-secondary: var(--oscd-base3);
	--mdc-theme-on-background: var(--oscd-base00);
	--mdc-theme-on-surface: var(--oscd-base00);
	--mdc-theme-text-primary-on-background: var(--oscd-base01);
	--mdc-theme-text-secondary-on-background: var(--oscd-base3);

Would this be better?

      --mdc-theme-text-primary-on-background: var(--oscd-primary);
      --mdc-theme-text-secondary-on-background: var(--oscd-secondary);

I can do a PR if this is of value.

[stee-re]

This area is massively confusing for me and I simply cannot find anything concrete in the documentation, but it seems to be that this concept of "text-primary..." is not related to the branding colors (e.g. primary).

So I guess the bottom line here is how we interpret them and to this end, I am guessing what is today in open-scd.io (open-scd-core) is (right or wrong) how it is mapped to our theme colors. Currently the mapping (found here) is:

    --mdc-theme-text-primary-on-background: var(--oscd-base01);
    --mdc-theme-text-secondary-on-background: var(--oscd-base00);

With that in mind, I went through all of the mdc variables and without removing any, I just aligned any variables I'm setting with the values referenced in open-scd-core. The net result being:

    --mdc-theme-primary: var(--oscd-primary);
    --mdc-theme-secondary: var(--oscd-secondary);
    --mdc-theme-background: var(--oscd-base3);
    --mdc-theme-surface: var(--oscd-base3);
    --mdc-theme-on-primary: var(--oscd-base2);
    --mdc-theme-on-secondary: var(--oscd-base2);
    --mdc-theme-on-background: var(--oscd-base00);
    --mdc-theme-on-surface: var(--oscd-base00);
    --mdc-theme-text-primary-on-background: var(--oscd-base01);
    --mdc-theme-text-secondary-on-background: var(--oscd-base00);
    --mdc-theme-text-icon-on-background: var(--oscd-base00);
    --mdc-theme-error: var(--oscd-error);
    --mdc-button-disabled-ink-color: var(--oscd-base1);
    --mdc-drawer-heading-ink-color: var(--oscd-base00);
    --mdc-dialog-heading-ink-color: var(--oscd-base00);
    --mdc-text-field-fill-color: var(--oscd-base2);
    --mdc-text-field-disabled-fill-color: var(--oscd-base3);
    --mdc-text-field-ink-color: var(--oscd-base00);
    --mdc-text-field-label-ink-color: var(--oscd-base00);
    --mdc-text-field-idle-line-color: var(--oscd-base00);
    --mdc-text-field-hover-line-color: var(--oscd-base02);
    --mdc-select-fill-color: var(--oscd-base2);
    --mdc-select-disabled-fill-color: var(--oscd-base3);
    --mdc-select-ink-color: var(--oscd-base00);
    --mdc-select-label-ink-color: var(--oscd-base00);
    --mdc-select-idle-line-color: var(--oscd-base00);
    --mdc-select-hover-line-color: var(--oscd-base02);
    --mdc-select-dropdown-icon-color: var(--oscd-base01);
    --mdc-typography-font-family: var(--oscd-text-font);
    --mdc-icon-font: var(--oscd-icon-font);
    --mdc-theme-text-disabled-on-light: rgba(255, 255, 255, 0.38);

I'm struggling to find a means of testing all of these in the use cases they are typically used in OpenSCD plugins. So if these don't line up, then I would propose to remove any mdc variables I'm setting which are not being set in open-scd.
@danyill what do you think?

[danyill]

It seems much better, thank you 💌

[danyill]

I'll close this and create new issues as required.