Refresh ✨

[emplums]

This PR brings the new visual refresh styles to Primer Components 🎉

Even though this PR doesn't introduce any breaking changes, I still recommend that we release it as a major release since it's making pretty big visual updates to the component library. What do you think @BinaryMuse?

👉 Stickersheet

Buttons

• Updated border radii
• Updated colors
• Updated box shadows
• Corrected padding on buttons
• Reorganized the theme file to store variables for buttons in a more organized manner
• Made sure all colors, bg, border colors, and box shadows pull from a button specific theme object instead of directly from the color shadows etc objects in the theme.
• Created a new internal ButtonBase component that all exported buttons are based on. This button has all the shared styles between the buttons, variant styles, and disabled behaviors. I did this so that we were not including the styles that are specific to our grey default Button in every other button component. Makes overriding styles more predictable and the internal API cleaner :)

UnderlineNav

• Use new orange color
• Remove bold from selected item

StateLabel

• Updated border radius
• Updated padding
• Updated line height

FilteredSearch

• Updated border radius

TextInput

• Updated border radius
• Updated disabled styles
• Fixed font size
• Updated left padding
• Updated border color

Dropdown

• Inherits updated Button styles
• Updated caret spacing
• Updated border radius of menu

Labels

• Updated padding
• Updated border radius
• Updated line heights
• Updated font sizes
• Made sure outline variant can use the borderColor system prop.
• Updated label documentation

BorderBox

• Updated default border radius

SubNav

• Updated border radius

TabNav

• Updated border radius
• Updated text colors

General System Changes:

• New button object in theme
• New border radius value in theme
• Updated formControl values in theme

Open Questions

• Should the border radius on the highlight for hovered FilteredList items be updated?
• Should the border radius for Flash be updated?

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/primer/primer-components/oq25q6r7l
✅ Preview: https://primer-components-git-refresh.primer.now.sh

[emplums]

And "Text Input" has no inner shadow. There might be more, but we can fine tune it once things a more finalized.

@simurai in the Figma file I'm seeing an inner shadow, has that been updated?

[simurai]

in the Figma file I'm seeing an inner shadow, has that been updated?

No, I think it has been there from the start and I just missed it. 😇 Sorry, you can disregard my "no inner shadow" comment.

[BinaryMuse]

I noticed the new buttons, other than the default one, have very little change in their active state; it feels like nothing is happening when they're clicked.

Compare this to dotcom:

[BinaryMuse]

Wow, really fantastic work @emplums! I agree about releasing this as a major version; I think it definitely counts as a breaking change, and probably deserves a major callout in the release notes.

[emplums]

@simurai @auareyou regarding the hover vs selected state - in the figma file it looks like the hover and selected state have the same background, with just a difference in the box shadow when a hovered button is selected. Is this intentional? As @BinaryMuse mentioned it's pretty subtle, and it looks like in .com there is a background change but I wasn't sure if that was left over from the button sass functions or a new background that should be applied.

[emplums]

Going to release this as - is as the background changes in the button feels like design feedback for future iterations and can be fixed up easily here when a decision is made! ✨

[emplums]

Skipping a release tracking PR since this release will only contain the changes here. Updating version number in this branch.

[simurai]

@BinaryMuse I noticed the new buttons, other than the default one, have very little change in their active state; it feels like nothing is happening when they're clicked.
Compare this to dotcom:

@emplums in the figma file it looks like the hover and selected state have the same background, with just a difference in the box shadow when a hovered button is selected. Is this intentional?

Yes, right... on dotcom we're currently testing a darker active state for buttons. Because, yeah.. it felt like there was not enough feedback when pressing a button:

• btn: 2% darker than the hover state: 👉 #edeff2
• btn-primary: 2% darker than the hover state: 👉 #128031
• btn-danger: 3% darker than the hover state: 👉 #be222e
• btn-outline: 3% darker than the hover state: 👉 #035fc7

Not sure if that's already final, but feel free to use the same for now.

Ohh.. also, on dotcom there is a script + styles that removes that blue "focus ring" when using the mouse, but shows it when using the keyboard to navigate. That doesn't work in the Primer CSS docs.

[emplums]

Rad! Thanks for pulling those variables @simurai! I've updated those values so this is good to go now 🎉