Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refresh box-shadow and borders #1040

Merged
merged 2 commits into from
Feb 27, 2020
Merged

Refresh box-shadow and borders #1040

merged 2 commits into from
Feb 27, 2020

Conversation

simurai
Copy link
Contributor

@simurai simurai commented Feb 26, 2020

This updates the "overlays".

  • Lighter borders: $border-gray-dark 👉 $border-color
  • Softer box-shadow.

The new box-shadow values are:

$box-shadow:              0  1px  0px rgba($gray-400, 0.1);
$box-shadow-medium:       0  3px  6px rgba($gray-400, 0.15);
$box-shadow-large:        0  8px 24px rgba($gray-400, 0.2);
$box-shadow-extra-large:  0 12px 48px rgba($gray-400, 0.3);

Screen Shot 2020-02-26 at 6 00 15 PM

Default box-shadow

Screen Shot 2020-02-26 at 6 08 03 PM

Medium box-shadow

Screen Shot 2020-02-26 at 6 01 46 PM

Large box-shadow

Screen Shot 2020-02-26 at 6 02 15 PM

Extra large box-shadow

The .box-shadow-extra-large utility only gets used on some marketing pages.

API changes

There should be no breaking changes.

  • The $box-shadow-highlight got added. It's used for the top highlight on buttons.

/cc @primer/ds-core

@vercel
Copy link

vercel bot commented Feb 26, 2020

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-css/9umqtdw9s
✅ Preview: https://primer-css-git-next-overlays.primer.now.sh

@vercel vercel bot temporarily deployed to Preview February 26, 2020 12:30 Inactive
@simurai simurai marked this pull request as ready for review February 26, 2020 12:33
Copy link
Contributor

@colebemis colebemis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants