Skip to content

Repository navigation

Add overlay-shadow - #135

Merged
simurai merged 7 commits into
mainfrom
overlay-shadow
Jun 14, 2021
Merged

Add overlay-shadow#135
simurai merged 7 commits into
mainfrom
overlay-shadow

Conversation

@simurai

@simurai simurai commented Jun 11, 2021 •
edited
Loading

Copy link
Copy Markdown
Contributor

This add overlay-shadow variable. Meant to be used for the new Overlay component. Output:

--color-overlay-shadow: 0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12); // light
--color-overlay-shadow: 0 0 0 1px #30363d, 0 1px 3px rgba(1,4,9,0.12), 0 16px 32px rgba(1,4,9,0.85); // dark

@changeset-bot

changeset-bot Bot commented Jun 11, 2021 •
edited
Loading

Copy link
Copy Markdown

πŸ¦‹ Changeset detected

Latest commit: e35c063

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/primitives Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercel Bot commented Jun 11, 2021 •
edited
Loading

Copy link
Copy Markdown

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

πŸ” Inspect: https://vercel.com/primer/primitives/496U6wzcVyXUxCa1CoNmeaWBATTX
βœ… Preview: https://primitives-git-overlay-shadow-primer.vercel.app

@simurai
simurai marked this pull request as ready for review June 11, 2021 12:10
@simurai
simurai requested review from auareyou and vdepizzol June 11, 2021 12:10
@vdepizzol

vdepizzol commented Jun 11, 2021 •
edited
Loading

Copy link
Copy Markdown
Contributor

@simurai @auareyou can you confirm this is how your proposal would look on these different canvases?

Preview of shadows in under different themes and canvases

Link to Figma

Some thoughts:

  • I'm worried about not having enough visual separation for overlays in dark mode. If you look at the light mode I provided, the shadows render a soft shadow that replaces the need for borders around the overlay. Can we adjust the dark version of the shadow to follow a similar pattern? Example:

    Overlay on dark mode with improved visual separation

  • While on light mode under a dark canvas (such as the Actions log page), the shadows get a glow instead. That's because the shadow color is a light gray β€” can that be improved by using a darker tint with adjustments in its alpha?

Thank you!

vdepizzol
vdepizzol suggested changes Jun 11, 2021
View reviewed changes

@vdepizzol vdepizzol left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@simurai I chatted with @auareyou and we covered some quick fixes that would improve the concerns I shared above.

Figma screenshot

Link to Figma

Comment thread data/colors/light.ts Resolved
Comment thread data/colors/dark.ts Resolved
Comment thread data/colors_v2/vars/component_dark.ts Resolved
Comment thread data/colors_v2/vars/component_light.ts Resolved
@vdepizzol vdepizzol mentioned this pull request Jun 11, 2021
Merged
3 of 6 tasks
simurai and others added 4 commits June 14, 2021 12:20
@simurai @vdepizzol
Update data/colors/light.ts
8ec166d 
Co-authored-by: Vinicius Depizzol <vdepizzol@github.com>
@simurai @vdepizzol
Update data/colors/dark.ts
d653b74 
Co-authored-by: Vinicius Depizzol <vdepizzol@github.com>
@simurai @vdepizzol
Update data/colors_v2/vars/component_dark.ts
f66522a 
Co-authored-by: Vinicius Depizzol <vdepizzol@github.com>
@simurai @vdepizzol
Update data/colors_v2/vars/component_light.ts
891e9a2 
Co-authored-by: Vinicius Depizzol <vdepizzol@github.com>
simurai
simurai commented Jun 14, 2021
View reviewed changes
Comment thread data/colors/dark.ts Resolved
@simurai

simurai commented Jun 14, 2021 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

@vdepizzol I chatted with @auareyou and we covered some quick fixes that would improve the concerns I shared above.

Ok, great. Committed all the suggestions. πŸ‘ Let's get it published.

@simurai
simurai requested a review from vdepizzol June 14, 2021 03:29
@simurai
simurai merged commit a46aad8 into main Jun 14, 2021
@simurai
simurai deleted the overlay-shadow branch June 14, 2021 11:01
@github-actions github-actions Bot mentioned this pull request Jun 14, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@auareyou auareyou Awaiting requested review from auareyou
@vdepizzol vdepizzol Awaiting requested review from vdepizzol

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@simurai @vdepizzol