SaltProviderNext - Accent customization

[fernandoabel]

Description

Hi,
If we are trying to add custom color as Accent in SaltProviderNext, what would be the best way to achieve this?
We can achieve anything creating a new theme to be used, however this represents a lot of effort to start with.

So, could customizing Accent be an option?
Doing like this below would be the same as creating a whole theme?

Expected behavior

• SaltProviderNext - accent property accepts Accent | string
• Then accent value can be customized to 'orange', for example.
• data-accent is added to html tag
• A custom style css like below could be created:

.salt-theme.salt-theme-next[data-mode='light'][data-accent='orange'] {
    --salt-palette-accent: var(--salt-color-orange-500);
    --salt-palette-accent-disabled: var(--salt-color-orange-500-40a);
    --salt-palette-accent-strong: var(--salt-color-orange-600);
    --salt-palette-accent-strong-disabled: var(--salt-color-orange-600-40a);
    --salt-palette-accent-stronger: var(--salt-color-orange-700);
    --salt-palette-accent-stronger-disabled: var(--salt-color-orange-700-40a);
    --salt-palette-accent-strongest: var(--salt-color-orange-800);
    --salt-palette-accent-weak: var(--salt-color-orange-400);
    --salt-palette-accent-weaker: var(--salt-color-orange-200);
    --salt-palette-accent-weaker-disabled: var(--salt-color-orange-200-40a);
    --salt-palette-accent-weakest: var(--salt-color-orange-100);
    --salt-palette-accent-action-hover: var(--salt-color-orange-600);
    --salt-palette-accent-action-active: var(--salt-color-orange-800);
}
.salt-theme.salt-theme-next[data-mode='dark'][data-accent='orange'] {
    --salt-palette-accent: var(--salt-color-orange-500);
    --salt-palette-accent-disabled: var(--salt-color-orange-500-40a);
    --salt-palette-accent-strong: var(--salt-color-orange-400);
    --salt-palette-accent-strong-disabled: var(--salt-color-orange-400-40a);
    --salt-palette-accent-stronger: var(--salt-color-orange-300);
    --salt-palette-accent-stronger-disabled: var(--salt-color-orange-300-40a);
    --salt-palette-accent-strongest: var(--salt-color-orange-200);
    --salt-palette-accent-weak: var(--salt-color-orange-600);
    --salt-palette-accent-weaker: var(--salt-color-orange-800);
    --salt-palette-accent-weaker-disabled: var(--salt-color-orange-800-40a);
    --salt-palette-accent-weakest: var(--salt-color-orange-900);
    --salt-palette-accent-action-hover: var(--salt-color-orange-600);
    --salt-palette-accent-action-active: var(--salt-color-orange-800);
}

Alternatives and examples

Setting a theme works the same way, but then should a theme be created for each color?

Context

Giving the option to the user customize his application

Are you a JPMorgan Chase & Co. employee?

• I am an employee of JPMorgan Chase & Co.

[origami-z]

@fernandoabel Thanks for raising this. The request heavily depends on your business goal.

Adding a net-new styling option to Salt needs a lot of cross-LOB vetting. Current accent color existed so that teams can be better aligned to JPM brand.

Can you elaborate the scope of outcome you want to achieve? Accent color reaches out to a lot of components, and if you're part of JPMC, it is less likely that's what you want. If you can't post information here, feel free to reach out to us via email [email protected]