[SAGE-497] Label - align to spec

[QuintonJason]

Closes SAGE-497
Dependent on SAGE-554

Description

• align label to spec
  • update interactive border-radius
  • reduce label text font-weight

Screenshots

Before	After

Testing in sage-lib

Visit the label rails and react page

Testing in kajabi-products

1. (LOW) Label component adjusted to latest specs. Label changes will occur as a result in kajabi-products but no adverse effects expected.

Related

[teenwolfblitzer]

Looking fantastic! Just to confirm, will the focus outline states be handled in a separate button/interaction PR?

[teenwolfblitzer]

👍🏼 LGTM!

Firefox seems to be rendering the alignment in its own way from Chrome/Safari, so the added transform/margin ends up pushing the button an additional 1px off the vertical line. I don't think it's a major concern, though:

[philschanely]

Looks and works well. 🙌 One non-blocker is this older interactive—effect which I imagine will go away soon given your fabulous new interactive effects PR—does look a little odd with the new pill shape:

Definitely an optional fix but wanted to raise awareness just in case it was of interest to fix now.

[philschanely]

Looking good, @QuintonJason .

These may deserve a follow-up or two, but I noted the following:

1. To match the specs closer it appears we need to revise the secondary button hover settings a bit:

   Spec:

   

   As built to date:
   

2. There are also some aspects of how the colors and the mixture of sage btn within this component for the secondary button feel potentially leaky that might be nice revisit. See color settings in loop in _label.scss that override those in _button.scss. I wonder if we indeed need to use SageButton there or if the tradeoff is in our favor to use a custom styled HTML button instead?

Bottom line is nothing blocking this PR but some ideas about potential follow up. If you agree, I'm happy to file them in an issue for later. Thoughts?

[QuintonJason]

Looking good, @QuintonJason .

These may deserve a follow-up or two, but I noted the following:

1. To match the specs closer it appears we need to revise the secondary button hover settings a bit:
   Spec:
   
   As built to date:
   
2. There are also some aspects of how the colors and the mixture of sage btn within this component for the secondary button feel potentially leaky that might be nice revisit. See color settings in loop in _label.scss that override those in _button.scss. I wonder if we indeed need to use SageButton there or if the tradeoff is in our favor to use a custom styled HTML button instead?

Bottom line is nothing blocking this PR but some ideas about potential follow up. If you agree, I'm happy to file them in an issue for later. Thoughts?

@philschanely Great callout! Made one commit to update hover colors, but we can revisit the need for the SageButton in a followup

[QuintonJason]

@philschanely issue to investigate the inner button further #640