Modification - lgVariant directive

[elenagarrone]

Type of request
Modification

Component, pattern, template, helper or foundation?
Helper

Nature of request
We need a way of applying certain styles based on the background colour we want to use.
We believe that the current lgVariant directive should be a bit more flexible. At the moment we have styling for generic, info, success, warning and error. This was working fine for the previous scenarios but as we develop more designs it seems like we need a more flexible solution.

@alexcanning and I have discussed the idea of having three new variants: neutral, light and dark:

Variant	Text colour	Link colour
Neutral	charcoal	super-blue
Light	white	white
Dark	charcoal	charcoal

The buttons will need design (or will the current variants work?).

One issue I see is that none of the new variants will cover the old variants designs - e.g. in the previous ones the coloured one had coloured text while now, if we switch them to the dark varian, they will have charcoal text.
How do we solve this? do we create a fourth variant that uses rgba colours for the text and links - e.g. Shade?

Proposal
The lgVariant should be updated to have a foreground and background input:

• The foreground will take the name of the variants (neutral, light or dark - default will be neutral);
• The backround will take the string value of a colour code/css variable (this cannot be a fixed colour because it will make branding complicated). The background will be optional.

<lg-card lgVariant foreground="light" background="--color-super-blue">

Initially, we will have these new variants working together with the old ones so that we don't create a breaking change. The old variants will be deprecated.
We will create a change in the next branch to remove the old deprecated variants.

[owensgit]

We have the following designs from the Messaging Framework which might be enough to do the dev work: https://www.figma.com/file/iYCsbVcJuJxIDkruYvq2i2/SSOPT_Messaging-framework?type=design&node-id=453-126151&mode=dev

[elenagarrone]

Yes, I believe these are enough to get started as they cover the three variants mentioned above.
We still need to understand if we'll need a fourth variant for the tints but that work can be done later as part of the next branch.

[elenagarrone]

I talked to Alex and looks like for now, we are not going to have a fourth variant but instead, we are going to keep the "old" variants as they behave slightly different.

This means this change will NOT be a breaking one.

[owensgit]

I agree with the proposed API as mentioned above 👍
It's developer friendly and flexible, and allows us to implement the improvement now while deprecating the original named variants and refactoring later on in the next branch, as mentioned.

[alexcanning]

Hi Owen, here's some thoughts I'd had about variant organisation - the background for which is:

1. Investigating the right way to implement Figma variables in a way that scales well across the components, and allows for future white labelling.
2. Looking at fixing mismatched taxonomy between design and development libraries.

In the table, the colours are basically the same but the intent behind them is different and allows for theming. In future they could even diverge.

[owensgit]

Thanks @alexcanning, those tables are really useful. It looks like the name "Name TBD" part of the taxonomy is something that can be covered by updates in the Storybook docs aligning with the design docs as guidelines, and the foreground / background combinations will be covered by the proposed API:

<lg-card lgVariant foreground="light" background="--color-super-blue">

Foreground	Text colour	Link colour
Neutral	charcoal	super-blue
Light	white	white
Dark	charcoal	charcoal

E.g. as a developer you choose the correct combination of foreground / background for given scenario, each of which is detailed in the Storybook docs. This flexibility also lends itself to branding/theming - when a theme is applicable it's a case of choosing the correct combination based on the theme.

Does that sound good from your perspective? If easier we could still arrange a call to chat in more detail incase there's something not covered.

[elenagarrone]

Yes, this is what I was thinking too. But Alex and I will have a discussion about it and post an update here.

For the moment, let's add those 3 new variants with the API discussed above and leave the old variants as they are 👍

[elenagarrone]

I've completed a spike on this. Draft PR with link of deployment here: #1308