Update styleguide colors & typography

[jimbo]

Description

This PR introduces the first aspects of new design to the Venia Styleguide. It updates colors & typography, and uses them to update the button component's presentation.

This PR also renames the footer component to button group, since it's not really a footer, and updates it to reflect guidance from the new design.

Related Issue

• PWA-433
• PWA-435

Acceptance

@soumya-ashok
@schensley

Verification Stakeholders

Specification

Verification Steps

1. Visit /page/color and verify the colors are correct
2. Visit /page/typography and verify the fonts are correct
3. Visit /page/button and verify the appearance and guidelines are correct
4. Visit /page/button-group and verify the appearance and guidelines are correct

Screenshots / Screen Captures (if appropriate)

Checklist

• I have updated the documentation accordingly, if necessary.
• I have added tests to cover my changes, if necessary.

[PWAStudioBot]

	Messages
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).
📖	Associated JIRA tickets: PWA-433.

Generated by 🚫 dangerJS against 3b4e7a6

[soumya-ashok]

@jimbo - Looks good overall. A few thoughts -

1. Could we indicate which the brand color is and which ones are derivatives?
2. We originally had 3 weights for the sans serif which may be helpful as we scale the design since we haven't hit all the use cases yet. 2 might be limiting.
3. I think we could do with just one variant on the serif since it is used only for headings
4. I'm not sure we're using italics anywhere yet in the body, but probably good to have the option open?
5. Button label might need to have a heavier font weight. I'm unsure about the overflow bit especially if the button label is in a different language that might cause issues? How would someone view the overflow text?

@schensley Could you also take a look if possible?

[jimbo]

1. Could we indicate which the brand color is and which ones are derivatives?

Yes. I've pushed this change.

2. We originally had 3 weights for the sans serif which may be helpful as we scale the design since we haven't hit all the use cases yet. 2 might be limiting.

We currently use 400 and 600 for everything, though in this PR we're adding 700 for buttons (and potentially other things). Fonts are an expensive resource and each weight adds a lot to the initial load, so ideally we would draw a line here and try not to use more than these three, especially since we've already accomplished a nearly full design with what we have.

3. I think we could do with just one variant on the serif since it is used only for headings

I agree. I've pushed this change.

4. I'm not sure we're using italics anywhere yet in the body, but probably good to have the option open?

Again, adding another style would increase the load a fair bit—especially if we were to do so for all three weights. Also, the browser can simulate italics for a font with a fair degree of accuracy without loading any actual new glyphs. Could we rely on that, given that we will hardly be using italics (if we do at all)?

5. Button label might need to have a heavier font weight. I'm unsure about the overflow bit especially if the button label is in a different language that might cause issues? How would someone view the overflow text?

I agree. I've pushed a change adding the 700 weight for buttons. We can change the buttons to overflow to a second line, if you like; the new button style can probably handle it better.

[soumya-ashok]

1. Could we indicate which the brand color is and which ones are derivatives?

Yes. I've pushed this change.

Looks good

2. We originally had 3 weights for the sans serif which may be helpful as we scale the design since we haven't hit all the use cases yet. 2 might be limiting.

We currently use 400 and 600 for everything, though in this PR we're adding 700 for buttons (and potentially other things). Fonts are an expensive resource and each weight adds a lot to the initial load, so ideally we would draw a line here and try not to use more than these three, especially since we've already accomplished a nearly full design with what we have.

Yes, not planning to use more than 3. The buttons look better now with 700.

3. I think we could do with just one variant on the serif since it is used only for headings

I agree. I've pushed this change.

Looks good

4. I'm not sure we're using italics anywhere yet in the body, but probably good to have the option open?

Again, adding another style would increase the load a fair bit—especially if we were to do so for all three weights. Also, the browser can simulate italics for a font with a fair degree of accuracy without loading any actual new glyphs. Could we rely on that, given that we will hardly be using italics (if we do at all)?

Yes.

5. Button label might need to have a heavier font weight. I'm unsure about the overflow bit especially if the button label is in a different language that might cause issues? How would someone view the overflow text?

I agree. I've pushed a change adding the 700 weight for buttons. We can change the buttons to overflow to a second line, if you like; the new button style can probably handle it better.

I wonder if the button should become more of a square with rounded corners if the label were to wrap? The shape of the fully rounded button seems compromised when this happens.

Another general question - I see that there are no visuals for a few sections on the button and typography pages. Assume the gray placeholder boxes would be replaced with these at a later time? Let me know if you need anything from design for this.

[jimbo]

I wonder if the button should become more of a square with rounded corners if the label were to wrap? The shape of the fully rounded button seems compromised when this happens.

Oh, I meant to fix that. CSS doesn't tell us when the contents have overflowed (wrapped, in this case), so we can't set a conditional style for that case, but I can use a trick to always have the proper rounding. I'll update it.

Another general question - I see that there are no visuals for a few sections on the button and typography pages. Assume the gray placeholder boxes would be replaced with these at a later time? Let me know if you need anything from design for this.

Yeah, I just haven't prioritized filling those in. Unlike most style guides, where those boxes contain images sliced from a high-fidelity mockup, ours are currently live views. We'll probably want to switch to images at some point, but doing that responsively is going to be a challenge. Just trying to move quickly at the moment.

[soumya-ashok]

I wonder if the button should become more of a square with rounded corners if the label were to wrap? The shape of the fully rounded button seems compromised when this happens.

Oh, I meant to fix that. CSS doesn't tell us when the contents have overflowed (wrapped, in this case), so we can't set a conditional style for that case, but I can use a trick to always have the proper rounding. I'll update it.

Great!

Another general question - I see that there are no visuals for a few sections on the button and typography pages. Assume the gray placeholder boxes would be replaced with these at a later time? Let me know if you need anything from design for this.

Yeah, I just haven't prioritized filling those in. Unlike most style guides, where those boxes contain images sliced from a high-fidelity mockup, ours are currently live views. We'll probably want to switch to images at some point, but doing that responsively is going to be a challenge. Just trying to move quickly at the moment.

Okay, happy to give you images once I have the sticker sheet built out.

[dpatil-magento]

Verification steps pass.

[soumya-ashok]

The changes are UX approved.