Add pageHeaderBg primitive

[simurai]

This adds the pageHeaderBg primitive. It makes the repo/org header use the canvas.default color in "Light High contrast".

Before	After

Reasoning

The repo/org header currently uses --color-page-header-bg. But using the color-variables() mixin we can only set the light/dark mode but not individual themes. Since it looks a bit too dark in "Light High contrast", this PR adds the pageHeaderBg to Primer Primitives so we can add an exception. The --color-page-header-bg should be mapped to canvas.default except for "Light default" and "Light colorblind":

Theme	Primitive	Color
Light default	canvas.subtle 👈
Light high contrast	canvas.default
Light colorblind	canvas.subtle 👈
Dark default	canvas.default
Dark high contrast	canvas.default
Dark colorblind	canvas.default
Dark dimmed	canvas.default

Are additional changes needed?

⚠️ Yes, on dotcom we should remove page-header-bg when shipping this change. 🚢

[changeset-bot]

🦋 Changeset detected

Latest commit: d875fe2

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]

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/75mBkVQnh8yuM8o2CnNRNM92nRT9
✅ Preview: https://primitives-git-page-header-bg-primer.vercel.app

[github-actions]

Variables changed

--- base/dist/scss/colors/_dark.scss	2021-12-16 06:33:20.488946925 +0000
+++ dist/scss/colors/_dark.scss	2021-12-16 06:33:10.064847608 +0000
@@ -3,2 +3,3 @@
     --color-canvas-default-transparent: rgba(13,17,23,0);
+    --color-page-header-bg: #0d1117;
     --color-marketing-icon-primary: #79c0ff;
--- base/dist/scss/colors/_dark_colorblind.scss	2021-12-16 06:33:20.504947042 +0000
+++ dist/scss/colors/_dark_colorblind.scss	2021-12-16 06:33:10.084847729 +0000
@@ -3,2 +3,3 @@
     --color-canvas-default-transparent: rgba(13,17,23,0);
+    --color-page-header-bg: #0d1117;
     --color-marketing-icon-primary: #79c0ff;
--- base/dist/scss/colors/_dark_dimmed.scss	2021-12-16 06:33:20.496946983 +0000
+++ dist/scss/colors/_dark_dimmed.scss	2021-12-16 06:33:10.072847657 +0000
@@ -3,2 +3,3 @@
     --color-canvas-default-transparent: rgba(34,39,46,0);
+    --color-page-header-bg: #22272e;
     --color-marketing-icon-primary: #6cb6ff;
--- base/dist/scss/colors/_dark_high_contrast.scss	2021-12-16 06:33:20.500947013 +0000
+++ dist/scss/colors/_dark_high_contrast.scss	2021-12-16 06:33:10.076847681 +0000
@@ -3,2 +3,3 @@
     --color-canvas-default-transparent: rgba(10,12,16,0);
+    --color-page-header-bg: #0a0c10;
     --color-marketing-icon-primary: #91cbff;
--- base/dist/scss/colors/_light.scss	2021-12-16 06:33:20.456946692 +0000
+++ dist/scss/colors/_light.scss	2021-12-16 06:33:10.036847439 +0000
@@ -3,2 +3,3 @@
     --color-canvas-default-transparent: rgba(255,255,255,0);
+    --color-page-header-bg: #f6f8fa;
     --color-marketing-icon-primary: #218bff;
--- base/dist/scss/colors/_light_colorblind.scss	2021-12-16 06:33:20.476946838 +0000
+++ dist/scss/colors/_light_colorblind.scss	2021-12-16 06:33:10.056847560 +0000
@@ -3,2 +3,3 @@
     --color-canvas-default-transparent: rgba(255,255,255,0);
+    --color-page-header-bg: #f6f8fa;
     --color-marketing-icon-primary: #218bff;
--- base/dist/scss/colors/_light_high_contrast.scss	2021-12-16 06:33:20.472946809 +0000
+++ dist/scss/colors/_light_high_contrast.scss	2021-12-16 06:33:10.048847512 +0000
@@ -3,2 +3,3 @@
     --color-canvas-default-transparent: rgba(255,255,255,0);
+    --color-page-header-bg: #ffffff;
     --color-marketing-icon-primary: #1168e3;