Colour overrides

[Fercas123]

We currently have our colours declared in color.css like this:

  --salt-color-blue-600: rgb(21, 92, 147);

when trying to apply alpha to them in a custom theme, we found in fade.css values that have the same opacity applied to them but named differently

  --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
  --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));

but there is no consistency in the naming i.e.

// the below feels like it should be `fade-disabled`
  --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-disabled)); // -border
  --salt-color-black-fade-backdrop: rgba(36, 37, 38, var(--salt-palette-opacity-backdrop)); // -backdrop

or guarantee that we will find all the colors we need in a fade variant. i.e. we need --salt-color-blue-800-fade-fill in our theme.

Given adding a variable per opacity variable per color seems like an overkill, exposing the color in a variable could be something to consider, so

  --salt-blue-600: 21, 92, 147;
  --salt-color-blue-600: rgb(var(--salt-blue-600));

and as a consumer, we can apply alpha values by doing

  --custom-color-blue-600-fade-background: rgba(var(--salt-blue-600), var(--custom-palette-opacity-background));

[libertymayc]

going this way would allow us to drop fade completely - we could just directly use the opacity in the token e.g.

-salt-palette-accent-background-disabled: rgba(var(--salt-rgb-blue-500), var(--salt-palette-opacity-background));

but there is no consistency in the naming i.e.

oops, when border, fill, etc all merged into disabled in the palette, I didn't update fade to reflect - will make a pr for this! #2466

[lukeac123]

Correct me if i'm wrong but I don't think you can rgba and already rgb value in css so this wouldn't work:
-salt-palette-accent-background-disabled: rgba(var(--salt-rgb-blue-500), var(--salt-palette-opacity-background))

[libertymayc]

the --salt-rgb-blue-500 wouldnt have the rgb() around it, just the raw values like fernanda put above

[feliciackh]

--salt-blue-600: 21, 92, 147;
--salt-color-blue-600: rgb(var(--salt-blue-600));

like the idea of splitting color values and color tokens, lessens the overhead to maintain a separate fade variable esp now that fade renaming is a breaking change and won't be actioned anytime soon

[mark-tate]

this was an maintainers discussion, closing due to in-activity