Use Select item on primary color

[throni3git]

Is your feature request related to a problem? Please describe.
In my app i'd like to use a Select dropdown element on a surface that uses the primary color from the Material color palette. While out of the box it seems to be designed for the surface color as background, i'd like to change the color to something different (e.g. primary and on-primary).

Describe the solution you'd like
A nice solution would be by providing some variables that the color and background-color values would be derived from.

Describe alternatives you've considered
In the style section of the Svelte component where i am using the Select component from SMUI, i tried a wild mixture of :global selectors for .mdc-select and related classes. I copied those lines from Chromium dev tools from the related elements, used color-mix to apply transparency (that is given by Material design itself i guess?) to my variables. It is hard to get it right because there are loads of classes and i think i am still missing some classes...

  :global(:root) {
    --replace-background: var(--mdc-theme-primary);
    --replace-foreground: var(--mdc-theme-on-primary);
  }

  :global(.mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text) {
    color: rgba(22, 29, 28, 0.87);
    color: color-mix(in srgb, var(--replace-foreground) 87%, transparent) !important;
  }
  :global(.mdc-select.mdc-select--disabled .mdc-select__selected-text) {
    color: rgba(22, 29, 28, 0.38);
    color: color-mix(in srgb, var(--replace-foreground) 38%, transparent) !important;
  }
  :global(.mdc-select:not(.mdc-select--disabled) .mdc-floating-label) {
    color: rgba(22, 29, 28, 0.6);
    color: color-mix(in srgb, var(--replace-foreground) 60%, transparent) !important;
  }
  :global(.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label) {
    color: rgba(0, 106, 97, 0.87);
    color: color-mix(in srgb, var(--mdc-theme-inverse-primary) 87%, transparent) !important;
  }
  :global(.mdc-select.mdc-select--disabled .mdc-floating-label) {
    color: rgba(22, 29, 28, 0.38);
    color: color-mix(in srgb, var(--replace-foreground) 38%, transparent) !important;
  }
  :global(.mdc-select:not(.mdc-select--disabled) .mdc-select__dropdown-icon) {
    fill: rgba(22, 29, 28, 0.54);
    fill: color-mix(in srgb, var(--replace-foreground) 54%, transparent) !important;
  }
  :global(.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-select__dropdown-icon) {
    fill: rgb(0, 106, 97);
    fill: color-mix(in srgb, var(--mdc-theme-inverse-primary) 100%, transparent) !important;
    /* @alternate */
    /* fill: var(--mdc-theme-primary, rgb(0, 106, 97)); */
  }
  :global(.mdc-select.mdc-select--disabled .mdc-select__dropdown-icon) {
    fill: rgba(22, 29, 28, 0.38);
    fill: color-mix(in srgb, var(--replace-foreground) 38%, transparent) !important;
  }
  :global(.mdc-select:not(.mdc-select--disabled) + .mdc-select-helper-text) {
    color: rgba(22, 29, 28, 0.6);
    color: color-mix(in srgb, var(--replace-foreground) 60%, transparent) !important;
  }
  :global(.mdc-select.mdc-select--disabled + .mdc-select-helper-text) {
    color: rgba(22, 29, 28, 0.38);
    color: color-mix(in srgb, var(--replace-foreground) 38%, transparent) !important;
  }
  :global(.mdc-select:not(.mdc-select--disabled) .mdc-select__icon) {
    color: rgba(22, 29, 28, 0.54);
    color: color-mix(in srgb, var(--replace-foreground) 54%, transparent) !important;
  }
  :global(.mdc-select.mdc-select--disabled .mdc-select__icon) {
    color: rgba(22, 29, 28, 0.38);
    color: color-mix(in srgb, var(--replace-foreground) 38%, transparent) !important;
  }

  :global(.mdc-select--filled:not(.mdc-select--disabled) .mdc-select__anchor) {
    background-color: rgb(235.12, 242.12, 239.2);
    background-color: var(--replace-background) !important;
  }
  :global(.mdc-select--filled.mdc-select--disabled .mdc-select__anchor) {
    background-color: rgb(239.56, 246.56, 243.6);
    background-color: var(--replace-background) !important;
  }
  :global(.mdc-select--filled:not(.mdc-select--disabled) .mdc-line-ripple::before) {
    border-bottom-color: rgba(22, 29, 28, 0.42);
    border-bottom-color: color-mix(in srgb, var(--replace-foreground) 42%, transparent) !important;
  }
  :global(.mdc-select--filled:not(.mdc-select--disabled):hover .mdc-line-ripple::before) {
    border-bottom-color: rgba(22, 29, 28, 0.87);
    border-bottom-color: color-mix(in srgb, var(--replace-foreground) 87%, transparent) !important;
  }
  :global(.mdc-select--filled:not(.mdc-select--disabled) .mdc-line-ripple::after) {
    border-bottom-color: rgb(0, 106, 97);
    /* @alternate */
    border-bottom-color: var(--mdc-theme-primary, rgb(0, 106, 97));
    border-bottom-color: color-mix(in srgb, var(--mdc-theme-inverse-primary) 100%, transparent) !important;
  }
  :global(.mdc-select--filled.mdc-select--disabled .mdc-line-ripple::before) {
    border-bottom-color: rgba(22, 29, 28, 0.06);
    border-bottom-color: color-mix(in srgb, var(--replace-foreground) 6%, transparent) !important;
  }

Additional context
My app is using SMUI@7 and Svelte@4.

Any tips on how to achieve a clean solution for setting a different foreground-background color set for the Select element is welcome.