Skip to content

Add canvasDefaultTransparent - #235

Merged
simurai merged 3 commits into
mainfrom
transparent-canvas-default
Sep 16, 2021
Merged

simurai merged 3 commits into
mainfrom
transparent-canvas-default

Conversation

@simurai

@simurai simurai commented Sep 13, 2021 •

Copy link
Copy Markdown
Contributor

This adds a new canvasDefaultTransparent variable. It will be used to fix the "gradient bug" in Safari: https://github.com/github/github/issues/192288#issuecomment-916696060

I've a hard time coming up with a name/place for this variable. It's currently an "app" variable, but it's basically a variation of the global canvas.default. And it's meant to be used together like:

background: linear-gradient(to top, var(--color-canvas-default), var(--color-canvas-default-transparent));

I almost feel like it should be added to

but then the name "primer" isn't accurate. So we should change primer to misc or something else. Naming hell!! 🔥 😈

It's also very similar to

gradientOut: alpha(get('scale.white'), 0)
but with a slightly different value for dark mode.

@simurai
simurai requested a review from a team as a code owner September 13, 2021 03:16
@simurai
simurai requested review from tobiasahlin and removed request for a team September 13, 2021 03:16
@changeset-bot

changeset-bot Bot commented Sep 13, 2021 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 2187484

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 Patch

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 Sep 13, 2021 •

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/CLq37dFxP7ioASbCb87GxjZaM4Cg
✅ Preview: https://primitives-git-transparent-canvas-default-primer.vercel.app

@colebemis colebemis 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.

Looks good 👍

// Variables to be moved to github/github

export default {
canvasDefaultTransparent: alpha(get('canvas.default'), 0),

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.

I assume that you're adding this in Primitives because github/github doesn't support color functions. Is that correct?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Yes, right. There isn't a way to add transparency to canvas.default.

Comment thread .changeset/two-ears-yawn.md Resolved
Co-authored-by: Cole Bemis <colebemis@github.com>
@simurai
simurai merged commit ac4edb8 into main Sep 16, 2021
@simurai
simurai deleted the transparent-canvas-default branch September 16, 2021 03:01
@primer-css primer-css mentioned this pull request Sep 16, 2021
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.

4 participants