Skip to content

Primitives 7.0.0 - #267

Merged
simurai merged 8 commits into
mainfrom
next_major
Nov 9, 2021
Merged

simurai merged 8 commits into
mainfrom
next_major

Conversation

@simurai

@simurai simurai commented Nov 8, 2021 •

Copy link
Copy Markdown
Contributor

This is based on the next_major branch and closes #266. To make sure this PR doesn't get published as a .next version, the pre.json was deleted in f568693.

Note that there are Commits from the last major release, but Files changed doesn't include them. 🤔

Releases

@primer/primitives@7.0.0

Major Changes

jonrohan and others added 7 commits October 6, 2021 15:04
* Rename protanopia themes to colorblind

* Rename protanopia themes to colorblind

* Create green-apples-hang.md

* Update green-apples-hang.md
* Clean up unused vars

* Clean up unused utilities

* Clean up light colors

* Prep for new color mode supported gloss buttons

* Create swift-berries-learn.md

Co-authored-by: Jon Rohan <yes@jonrohan.codes>
@changeset-bot

changeset-bot Bot commented Nov 8, 2021 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: f568693

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 Major

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 Nov 8, 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/58t4oLGELHmQfLKbDYnd1BtYPV2u
âś… Preview: https://primitives-git-nextmajor-primer.vercel.app

@github-actions

github-actions Bot commented Nov 8, 2021 •

Copy link
Copy Markdown
Contributor
Variables changed
--- base/dist/scss/colors/_dark.scss	2021-11-08 07:50:32.794283733 +0000
+++ dist/scss/colors/_dark.scss	2021-11-08 07:50:17.874178619 +0000
@@ -148,33 +148,7 @@
     --color-project-gradient-out: rgba(22,27,34,0);
-    --color-mktg-success: rgba(41,147,61,1);
-    --color-mktg-info: rgba(42,123,243,1);
-    --color-mktg-bg-shade-gradient-top: rgba(1,4,9,0.065);
-    --color-mktg-bg-shade-gradient-bottom: rgba(1,4,9,0);
-    --color-mktg-btn-bg-top: hsla(228,82%,66%,1);
-    --color-mktg-btn-bg-bottom: #4969ed;
-    --color-mktg-btn-bg-overlay-top: hsla(228,74%,59%,1);
-    --color-mktg-btn-bg-overlay-bottom: #3355e0;
-    --color-mktg-btn-text: #f0f6fc;
-    --color-mktg-btn-primary-bg-top: hsla(137,56%,46%,1);
-    --color-mktg-btn-primary-bg-bottom: #2ea44f;
-    --color-mktg-btn-primary-bg-overlay-top: hsla(134,60%,38%,1);
-    --color-mktg-btn-primary-bg-overlay-bottom: #22863a;
-    --color-mktg-btn-primary-text: #f0f6fc;
-    --color-mktg-btn-enterprise-bg-top: hsla(249,100%,72%,1);
-    --color-mktg-btn-enterprise-bg-bottom: #6f57ff;
-    --color-mktg-btn-enterprise-bg-overlay-top: hsla(248,65%,63%,1);
-    --color-mktg-btn-enterprise-bg-overlay-bottom: #614eda;
-    --color-mktg-btn-enterprise-text: #f0f6fc;
-    --color-mktg-btn-outline-text: #f0f6fc;
-    --color-mktg-btn-outline-border: rgba(240,246,252,0.3);
-    --color-mktg-btn-outline-hover-text: #f0f6fc;
-    --color-mktg-btn-outline-hover-border: rgba(240,246,252,0.5);
-    --color-mktg-btn-outline-focus-border: #f0f6fc;
-    --color-mktg-btn-outline-focus-border-inset: rgba(240,246,252,0.5);
-    --color-mktg-btn-dark-text: #f0f6fc;
-    --color-mktg-btn-dark-border: rgba(240,246,252,0.3);
-    --color-mktg-btn-dark-hover-text: #f0f6fc;
-    --color-mktg-btn-dark-hover-border: rgba(240,246,252,0.5);
-    --color-mktg-btn-dark-focus-border: #f0f6fc;
-    --color-mktg-btn-dark-focus-border-inset: rgba(240,246,252,0.5);
+    --color-mktg-btn-bg: #f6f8fa;
+    --color-mktg-btn-shadow-outline: rgb(255 255 255 / 25%) 0 0 0 1px inset;
+    --color-mktg-btn-shadow-focus: rgb(255 255 255 / 25%) 0 0 0 4px;
+    --color-mktg-btn-shadow-hover: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
+    --color-mktg-btn-shadow-hover-muted: rgb(255 255 255) 0 0 0 2px inset;
     --color-avatar-bg: rgba(240,246,252,0.1);
--- base/dist/scss/colors/_dark_colorblind.scss	2021-11-08 07:50:32.822283935 +0000
+++ dist/scss/colors/_dark_colorblind.scss	2021-11-08 07:50:17.902178810 +0000
@@ -148,33 +148,7 @@
     --color-project-gradient-out: rgba(22,27,34,0);
-    --color-mktg-success: rgba(25,119,239,1);
-    --color-mktg-info: rgba(42,123,243,1);
-    --color-mktg-bg-shade-gradient-top: rgba(1,4,9,0.065);
-    --color-mktg-bg-shade-gradient-bottom: rgba(1,4,9,0);
-    --color-mktg-btn-bg-top: hsla(228,82%,66%,1);
-    --color-mktg-btn-bg-bottom: #4969ed;
-    --color-mktg-btn-bg-overlay-top: hsla(228,74%,59%,1);
-    --color-mktg-btn-bg-overlay-bottom: #3355e0;
-    --color-mktg-btn-text: #f0f6fc;
-    --color-mktg-btn-primary-bg-top: hsla(137,56%,46%,1);
-    --color-mktg-btn-primary-bg-bottom: #2ea44f;
-    --color-mktg-btn-primary-bg-overlay-top: hsla(134,60%,38%,1);
-    --color-mktg-btn-primary-bg-overlay-bottom: #22863a;
-    --color-mktg-btn-primary-text: #f0f6fc;
-    --color-mktg-btn-enterprise-bg-top: hsla(249,100%,72%,1);
-    --color-mktg-btn-enterprise-bg-bottom: #6f57ff;
-    --color-mktg-btn-enterprise-bg-overlay-top: hsla(248,65%,63%,1);
-    --color-mktg-btn-enterprise-bg-overlay-bottom: #614eda;
-    --color-mktg-btn-enterprise-text: #f0f6fc;
-    --color-mktg-btn-outline-text: #f0f6fc;
-    --color-mktg-btn-outline-border: rgba(240,246,252,0.3);
-    --color-mktg-btn-outline-hover-text: #f0f6fc;
-    --color-mktg-btn-outline-hover-border: rgba(240,246,252,0.5);
-    --color-mktg-btn-outline-focus-border: #f0f6fc;
-    --color-mktg-btn-outline-focus-border-inset: rgba(240,246,252,0.5);
-    --color-mktg-btn-dark-text: #f0f6fc;
-    --color-mktg-btn-dark-border: rgba(240,246,252,0.3);
-    --color-mktg-btn-dark-hover-text: #f0f6fc;
-    --color-mktg-btn-dark-hover-border: rgba(240,246,252,0.5);
-    --color-mktg-btn-dark-focus-border: #f0f6fc;
-    --color-mktg-btn-dark-focus-border-inset: rgba(240,246,252,0.5);
+    --color-mktg-btn-bg: #f6f8fa;
+    --color-mktg-btn-shadow-outline: rgb(255 255 255 / 25%) 0 0 0 1px inset;
+    --color-mktg-btn-shadow-focus: rgb(255 255 255 / 25%) 0 0 0 4px;
+    --color-mktg-btn-shadow-hover: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
+    --color-mktg-btn-shadow-hover-muted: rgb(255 255 255) 0 0 0 2px inset;
     --color-avatar-bg: rgba(240,246,252,0.1);
--- base/dist/scss/colors/_dark_dimmed.scss	2021-11-08 07:50:32.802283791 +0000
+++ dist/scss/colors/_dark_dimmed.scss	2021-11-08 07:50:17.886178701 +0000
@@ -148,33 +148,7 @@
     --color-project-gradient-out: rgba(45,51,59,0);
-    --color-mktg-success: rgba(61,137,66,1);
-    --color-mktg-info: rgba(56,119,213,1);
-    --color-mktg-bg-shade-gradient-top: rgba(28,33,40,0.065);
-    --color-mktg-bg-shade-gradient-bottom: rgba(28,33,40,0);
-    --color-mktg-btn-bg-top: hsla(228,82%,66%,1);
-    --color-mktg-btn-bg-bottom: #4969ed;
-    --color-mktg-btn-bg-overlay-top: hsla(228,74%,59%,1);
-    --color-mktg-btn-bg-overlay-bottom: #3355e0;
-    --color-mktg-btn-text: #cdd9e5;
-    --color-mktg-btn-primary-bg-top: hsla(137,56%,46%,1);
-    --color-mktg-btn-primary-bg-bottom: #2ea44f;
-    --color-mktg-btn-primary-bg-overlay-top: hsla(134,60%,38%,1);
-    --color-mktg-btn-primary-bg-overlay-bottom: #22863a;
-    --color-mktg-btn-primary-text: #cdd9e5;
-    --color-mktg-btn-enterprise-bg-top: hsla(249,100%,72%,1);
-    --color-mktg-btn-enterprise-bg-bottom: #6f57ff;
-    --color-mktg-btn-enterprise-bg-overlay-top: hsla(248,65%,63%,1);
-    --color-mktg-btn-enterprise-bg-overlay-bottom: #614eda;
-    --color-mktg-btn-enterprise-text: #cdd9e5;
-    --color-mktg-btn-outline-text: #cdd9e5;
-    --color-mktg-btn-outline-border: rgba(205,217,229,0.3);
-    --color-mktg-btn-outline-hover-text: #cdd9e5;
-    --color-mktg-btn-outline-hover-border: rgba(205,217,229,0.5);
-    --color-mktg-btn-outline-focus-border: #cdd9e5;
-    --color-mktg-btn-outline-focus-border-inset: rgba(205,217,229,0.5);
-    --color-mktg-btn-dark-text: #cdd9e5;
-    --color-mktg-btn-dark-border: rgba(205,217,229,0.3);
-    --color-mktg-btn-dark-hover-text: #cdd9e5;
-    --color-mktg-btn-dark-hover-border: rgba(205,217,229,0.5);
-    --color-mktg-btn-dark-focus-border: #cdd9e5;
-    --color-mktg-btn-dark-focus-border-inset: rgba(205,217,229,0.5);
+    --color-mktg-btn-bg: #f6f8fa;
+    --color-mktg-btn-shadow-outline: rgb(255 255 255 / 25%) 0 0 0 1px inset;
+    --color-mktg-btn-shadow-focus: rgb(255 255 255 / 25%) 0 0 0 4px;
+    --color-mktg-btn-shadow-hover: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
+    --color-mktg-btn-shadow-hover-muted: rgb(255 255 255) 0 0 0 2px inset;
     --color-avatar-bg: rgba(205,217,229,0.1);
--- base/dist/scss/colors/_dark_high_contrast.scss	2021-11-08 07:50:32.814283878 +0000
+++ dist/scss/colors/_dark_high_contrast.scss	2021-11-08 07:50:17.894178755 +0000
@@ -148,33 +148,7 @@
     --color-project-gradient-out: rgba(39,43,51,0);
-    --color-mktg-success: rgba(9,180,58,1);
-    --color-mktg-info: rgba(64,158,255,1);
-    --color-mktg-bg-shade-gradient-top: rgba(1,4,9,0.065);
-    --color-mktg-bg-shade-gradient-bottom: rgba(1,4,9,0);
-    --color-mktg-btn-bg-top: hsla(228,82%,66%,1);
-    --color-mktg-btn-bg-bottom: #4969ed;
-    --color-mktg-btn-bg-overlay-top: hsla(228,74%,59%,1);
-    --color-mktg-btn-bg-overlay-bottom: #3355e0;
-    --color-mktg-btn-text: #ffffff;
-    --color-mktg-btn-primary-bg-top: hsla(137,56%,46%,1);
-    --color-mktg-btn-primary-bg-bottom: #2ea44f;
-    --color-mktg-btn-primary-bg-overlay-top: hsla(134,60%,38%,1);
-    --color-mktg-btn-primary-bg-overlay-bottom: #22863a;
-    --color-mktg-btn-primary-text: #ffffff;
-    --color-mktg-btn-enterprise-bg-top: hsla(249,100%,72%,1);
-    --color-mktg-btn-enterprise-bg-bottom: #6f57ff;
-    --color-mktg-btn-enterprise-bg-overlay-top: hsla(248,65%,63%,1);
-    --color-mktg-btn-enterprise-bg-overlay-bottom: #614eda;
-    --color-mktg-btn-enterprise-text: #ffffff;
-    --color-mktg-btn-outline-text: #ffffff;
-    --color-mktg-btn-outline-border: rgba(255,255,255,0.3);
-    --color-mktg-btn-outline-hover-text: #ffffff;
-    --color-mktg-btn-outline-hover-border: rgba(255,255,255,0.5);
-    --color-mktg-btn-outline-focus-border: #ffffff;
-    --color-mktg-btn-outline-focus-border-inset: rgba(255,255,255,0.5);
-    --color-mktg-btn-dark-text: #ffffff;
-    --color-mktg-btn-dark-border: rgba(255,255,255,0.3);
-    --color-mktg-btn-dark-hover-text: #ffffff;
-    --color-mktg-btn-dark-hover-border: rgba(255,255,255,0.5);
-    --color-mktg-btn-dark-focus-border: #ffffff;
-    --color-mktg-btn-dark-focus-border-inset: rgba(255,255,255,0.5);
+    --color-mktg-btn-bg: #f6f8fa;
+    --color-mktg-btn-shadow-outline: rgb(255 255 255 / 25%) 0 0 0 1px inset;
+    --color-mktg-btn-shadow-focus: rgb(255 255 255 / 25%) 0 0 0 4px;
+    --color-mktg-btn-shadow-hover: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
+    --color-mktg-btn-shadow-hover-muted: rgb(255 255 255) 0 0 0 2px inset;
     --color-avatar-bg: rgba(255,255,255,0.1);
--- base/dist/scss/colors/_light.scss	2021-11-08 07:50:32.770283560 +0000
+++ dist/scss/colors/_light.scss	2021-11-08 07:50:17.850178455 +0000
@@ -148,33 +148,7 @@
     --color-project-gradient-out: rgba(255,255,255,0);
-    --color-mktg-success: rgba(36,146,67,1);
-    --color-mktg-info: rgba(19,119,234,1);
-    --color-mktg-bg-shade-gradient-top: rgba(27,31,36,0.065);
-    --color-mktg-bg-shade-gradient-bottom: rgba(27,31,36,0);
-    --color-mktg-btn-bg-top: hsla(228,82%,66%,1);
-    --color-mktg-btn-bg-bottom: #4969ed;
-    --color-mktg-btn-bg-overlay-top: hsla(228,74%,59%,1);
-    --color-mktg-btn-bg-overlay-bottom: #3355e0;
-    --color-mktg-btn-text: #ffffff;
-    --color-mktg-btn-primary-bg-top: hsla(137,56%,46%,1);
-    --color-mktg-btn-primary-bg-bottom: #2ea44f;
-    --color-mktg-btn-primary-bg-overlay-top: hsla(134,60%,38%,1);
-    --color-mktg-btn-primary-bg-overlay-bottom: #22863a;
-    --color-mktg-btn-primary-text: #ffffff;
-    --color-mktg-btn-enterprise-bg-top: hsla(249,100%,72%,1);
-    --color-mktg-btn-enterprise-bg-bottom: #6f57ff;
-    --color-mktg-btn-enterprise-bg-overlay-top: hsla(248,65%,63%,1);
-    --color-mktg-btn-enterprise-bg-overlay-bottom: #614eda;
-    --color-mktg-btn-enterprise-text: #ffffff;
-    --color-mktg-btn-outline-text: #4969ed;
-    --color-mktg-btn-outline-border: rgba(73,105,237,0.3);
-    --color-mktg-btn-outline-hover-text: #3355e0;
-    --color-mktg-btn-outline-hover-border: rgba(51,85,224,0.5);
-    --color-mktg-btn-outline-focus-border: #4969ed;
-    --color-mktg-btn-outline-focus-border-inset: rgba(73,105,237,0.5);
-    --color-mktg-btn-dark-text: #ffffff;
-    --color-mktg-btn-dark-border: rgba(255,255,255,0.3);
-    --color-mktg-btn-dark-hover-text: #ffffff;
-    --color-mktg-btn-dark-hover-border: rgba(255,255,255,0.5);
-    --color-mktg-btn-dark-focus-border: #ffffff;
-    --color-mktg-btn-dark-focus-border-inset: rgba(255,255,255,0.5);
+    --color-mktg-btn-bg: #1b1f23;
+    --color-mktg-btn-shadow-outline: rgb(0 0 0 / 15%) 0 0 0 1px inset;
+    --color-mktg-btn-shadow-focus: rgb(0 0 0 / 15%) 0 0 0 4px;
+    --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
+    --color-mktg-btn-shadow-hover-muted: rgb(0 0 0 / 70%) 0 0 0 2px inset;
     --color-avatar-bg: #ffffff;
--- base/dist/scss/colors/_light_colorblind.scss	2021-11-08 07:50:32.786283675 +0000
+++ dist/scss/colors/_light_colorblind.scss	2021-11-08 07:50:17.866178564 +0000
@@ -148,33 +148,7 @@
     --color-project-gradient-out: rgba(255,255,255,0);
-    --color-mktg-success: rgba(3,119,234,1);
-    --color-mktg-info: rgba(19,119,234,1);
-    --color-mktg-bg-shade-gradient-top: rgba(27,31,36,0.065);
-    --color-mktg-bg-shade-gradient-bottom: rgba(27,31,36,0);
-    --color-mktg-btn-bg-top: hsla(228,82%,66%,1);
-    --color-mktg-btn-bg-bottom: #4969ed;
-    --color-mktg-btn-bg-overlay-top: hsla(228,74%,59%,1);
-    --color-mktg-btn-bg-overlay-bottom: #3355e0;
-    --color-mktg-btn-text: #ffffff;
-    --color-mktg-btn-primary-bg-top: hsla(137,56%,46%,1);
-    --color-mktg-btn-primary-bg-bottom: #2ea44f;
-    --color-mktg-btn-primary-bg-overlay-top: hsla(134,60%,38%,1);
-    --color-mktg-btn-primary-bg-overlay-bottom: #22863a;
-    --color-mktg-btn-primary-text: #ffffff;
-    --color-mktg-btn-enterprise-bg-top: hsla(249,100%,72%,1);
-    --color-mktg-btn-enterprise-bg-bottom: #6f57ff;
-    --color-mktg-btn-enterprise-bg-overlay-top: hsla(248,65%,63%,1);
-    --color-mktg-btn-enterprise-bg-overlay-bottom: #614eda;
-    --color-mktg-btn-enterprise-text: #ffffff;
-    --color-mktg-btn-outline-text: #4969ed;
-    --color-mktg-btn-outline-border: rgba(73,105,237,0.3);
-    --color-mktg-btn-outline-hover-text: #3355e0;
-    --color-mktg-btn-outline-hover-border: rgba(51,85,224,0.5);
-    --color-mktg-btn-outline-focus-border: #4969ed;
-    --color-mktg-btn-outline-focus-border-inset: rgba(73,105,237,0.5);
-    --color-mktg-btn-dark-text: #ffffff;
-    --color-mktg-btn-dark-border: rgba(255,255,255,0.3);
-    --color-mktg-btn-dark-hover-text: #ffffff;
-    --color-mktg-btn-dark-hover-border: rgba(255,255,255,0.5);
-    --color-mktg-btn-dark-focus-border: #ffffff;
-    --color-mktg-btn-dark-focus-border-inset: rgba(255,255,255,0.5);
+    --color-mktg-btn-bg: #1b1f23;
+    --color-mktg-btn-shadow-outline: rgb(0 0 0 / 15%) 0 0 0 1px inset;
+    --color-mktg-btn-shadow-focus: rgb(0 0 0 / 15%) 0 0 0 4px;
+    --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
+    --color-mktg-btn-shadow-hover-muted: rgb(0 0 0 / 70%) 0 0 0 2px inset;
     --color-avatar-bg: #ffffff;

@simurai
simurai marked this pull request as ready for review November 8, 2021 07:51
@simurai
simurai requested a review from a team as a code owner November 8, 2021 07:51
@simurai
simurai requested review from a team, jonrohan, langermank and pksjce November 8, 2021 07:51
@simurai
simurai merged commit 39a664e into main Nov 9, 2021
@simurai
simurai deleted the next_major branch November 9, 2021 00:54
@primer-css primer-css mentioned this pull request Nov 9, 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.

3 participants