Consistent button style

[MekalaNagarajan-Centrica]

Outcome

Align the consistency of the buttons between the Homepage and the Component pages.

Scope

• Implement button style defined in Buttons - refined style definition #387

[evecrabb]

Discovery notes

Assumptions I'm making based on information given

• The Figma file visually indicates light and dark modes but the current site doesn't appear, on the surface, tp cater for dark mode. However, I have noticed dark and light mode styles in the css. I will therefore apply both dark and light mode styles.
• The secondary buttons on the homepage have no design to match within Figma, and the homepage design on Figma is different to what's live so I'm not sure what the "correct" version is. Since these are secondary, I'll be using the secondary button designs as indicated in the before/after visual below.
• The link buttons (a tags with the appearance of buttons) on the homepage have the class of .action, not .button. I am making the assumption that this ticket covers actions as well as buttons, considering there are no actual button elements on screen.

Button comparison on homepage:

Visual

Type	Class	State	Before	After
Primary	.action .primary	Normal
Primary	.action .primary	Hover
Secondary	.action .secondary	Normal
Secondary	.action .secondary	Hover

Code

Type	Class	State	Before	After
Primary	.action .primary	Normal	.action.primary { background: var(--sl-color-text-accent); color: var(--sl-color-black); } --ns-hue-pink: 327; /* Light mode */ --sl-color-text-accent: var(--sl-color-accent-high); --sl-color-accent-high: hsl(var(--ns-hue-pink), 60%, 54%); /* Dark mode */ --sl-color-accent-high: hsl(var(--ns-hue-pink), 100%, 85%); --sl-color-text-accent : var(--sl-color-accent-high); --sl-color-text-accent (light): hsl(327, 60%, 54%) --sl-color-text-accent (dark): hsl(327, 100%, 85%)	As indicated in Figma: light-mode: pink-500 hsl(327, 60%, 47%) dark-mode: pink-600 hsl(327, 60%, 36%) Font weight: 500
Primary	.action .primary	Hover	No styles for hover.	light: pink-600: hsl(327, 60%, 36%) dark: pink-500: hsl(327, 60%, 47%)
Secondary	.action .secondary	Normal	border: 1px solid;	background colour - light: Teal 100: hsl(202, 22%, 96%)
Secondary	.action .secondary	Hover

Button comparison on component pages

Type	Class	State	Before	After
Secondary	.button .secondary	Normal
Secondary	.button .secondary	Hover

Button comparison on component configuration pages

Type	State	Before	After
Primary	.button .primary	Normal
Primary	.button .primary	Hover
Secondary	.button .secondary	Normal
Secondary	.button .secondary	Hover
Tertiary	.button .reset	Normal
Tertiary	.button .reset	Hover

[evecrabb]

Implications of the work I've committed

I've added some new vars

My reasoning for this stemmed from the fact that I was unable to easily add primary button hover styling. There was a primary background colour set for dark/light, but the button then flips those values around in the Figma for hover.

It felt more natural and easy for me to add vars that match the ones coming out of Figma for this repo, which will save time if further changes are required.

However, when I started looking into the secondary button styles, I realised (after what felt like a real headache) that the following colours are the same:

/* for reference */
--ns-hue-teal: 202;
--ns-hue-base: var(--ns-hue-teal); 

--ns-color-base-100: hsl(var(--ns-hue-base), 22%, 96%);
--ns-color-teal-100: hsl(var(--ns-hue-teal), 22%, 96%); /* My new proposed var */

--sl-color-gray-7: var(--ns-color-base-100);

I suppose where I'm going with this is that by trying to start to add standardisation on naming conventions between Figma and nucleus-docs, I'm also adding an implication that --ns-color-base-100 is no longer needed?

What I'm going to do in the PR, and this is essentially where i want to keep a reference as to WHY I've done some of what will probably look like half baked imbecile behaviour, is push up what i believe we should do with this, and I can then be argued down next week.

[evecrabb]

Questions

The buttons have transitions set on the styling for hover. Do we want to do the same for .actions?

    transition-property: color, background-color;
    transition-delay: 0ms;
    transition-duration: 1000ms;
    transition-timing-function: ease-in-out;

Me going ham with creating new vars has created an inconsistency with button vars. Should we create all button vars for consistency?

exhibit a:

    &.primary {
      background-color: var(--sl-color-text-accent);
      color: var(--sl-color-black) !important;

      &:hover {
        background-color: var(--button-primary-bg-hover);
      }      
    }   
  
    &.secondary {
      background-color: var(--button-secondary-bg);
      color: var(--button-secondary-color);
  
      &:hover {
        background-color: var(--button-secondary-bg-hover);
        color: var(--button-secondary-color-hover);
      }
    
      &:focus {
        background-color: var(--sl-color-gray-6);
      }
    }

Do we want to consider creating a var for the font-weight?

We're now using it in more than one place.

How do I test in dark mode?

Tip

SOLVED! Just manually changed the mode.

It's really not obvious how to toggle the modes.