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

@simurai simurai added this to 🚧 Work in Progress in 📦 Primer CSS release tracking via automation Feb 26, 2020
@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 moved this from 🚧 Work in Progress to 🔍 Ready to release in 📦 Primer CSS release tracking Feb 26, 2020
@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.

😍

📦 Primer CSS release tracking automation moved this from 🔍 Ready to release to ✅ Approved for release Feb 26, 2020
@simurai simurai merged commit e5f3767 into next Feb 27, 2020
📦 Primer CSS release tracking automation moved this from ✅ Approved for release to 💜 Done Feb 27, 2020
@simurai simurai deleted the next-overlays branch February 27, 2020 01:07
@simurai simurai mentioned this pull request Jul 2, 2020
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

None yet

2 participants