Add canvasDefaultTransparent

[simurai]

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

primitives/data/colors/vars/global_light.ts

Line 79 in 16f4670

primer: {

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

primitives/data/colors/vars/app_light.ts

Line 170 in 773ca67

gradientOut: alpha(get('scale.white'), 0)

but with a slightly different value for dark mode.

[changeset-bot]

🦋 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]

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]

Looks good 👍

[colebemis]

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

[simurai]

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