Updating primer/primitives@7.1.0 and adding Light High Contrast theme (…

…#1755) * Updating primer/primitives * Adding light high contrast theme * Adding light high contrast theme * Create quiet-spiders-help.md
primer · Nov 18, 2021 · 1714778 · 1714778
1 parent 3838e17
commit 1714778
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 12 deletions.
diff --git a/.changeset/quiet-spiders-help.md b/.changeset/quiet-spiders-help.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Updating primer/primitives@7.1.0 and adding Light High Contrast theme
diff --git a/docs/.storybook/preview.js b/docs/.storybook/preview.js
@@ -104,7 +104,16 @@ export const globalTypes = {
     defaultValue: 'light',
     toolbar: {
       icon: 'circlehollow',
-      items: ['light', 'light_protanopia', 'dark', 'dark_dimmed', 'dark_high_contrast', 'dark_protanopia', 'all'],
+      items: [
+        'light',
+        'light_colorblind',
+        'light_high_contrast',
+        'dark',
+        'dark_dimmed',
+        'dark_high_contrast',
+        'dark_colorblind',
+        'all'
+      ],
       showName: true
     }
   }
@@ -119,7 +128,11 @@ export const decorators = [
             <Story {...context} />
           </div>
 
-          <div data-color-mode="light" data-light-theme="light_protanopia" className="story-wrap" id="story">
+          <div data-color-mode="light" data-light-theme="light_colorblind" className="story-wrap" id="story">
+            <Story {...context} />
+          </div>
+
+          <div data-color-mode="light" data-light-theme="light_high_contrast" className="story-wrap" id="story">
             <Story {...context} />
           </div>
 
@@ -135,7 +148,7 @@ export const decorators = [
             <Story {...context} />
           </div>
 
-          <div data-color-mode="dark" data-dark-theme="dark_protanopia" className="story-wrap" id="story">
+          <div data-color-mode="dark" data-dark-theme="dark_colorblind" className="story-wrap" id="story">
             <Story {...context} />
           </div>
         </div>
@@ -150,9 +163,17 @@ export const decorators = [
       )
     }
 
-    if (context.globals.theme === 'light_protanopia') {
+    if (context.globals.theme === 'light_colorblind') {
+      return (
+        <div data-color-mode="light" data-light-theme="light_colorblind" className="story-wrap" id="story">
+          <Story {...context} />
+        </div>
+      )
+    }
+
+    if (context.globals.theme === 'light_high_contrast') {
       return (
-        <div data-color-mode="light" data-light-theme="light_protanopia" className="story-wrap" id="story">
+        <div data-color-mode="light" data-light-theme="light_high_contrast" className="story-wrap" id="story">
           <Story {...context} />
         </div>
       )
@@ -182,9 +203,9 @@ export const decorators = [
       )
     }
 
-    if (context.globals.theme === 'dark_protanopia') {
+    if (context.globals.theme === 'dark_colorblind') {
       return (
-        <div data-color-mode="dark" data-dark-theme="dark_protanopia" className="story-wrap" id="story">
+        <div data-color-mode="dark" data-dark-theme="dark_colorblind" className="story-wrap" id="story">
           <Story {...context} />
         </div>
       )

diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.0.1"
+    "@primer/primitives": "^7.1.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.1",

diff --git a/src/color-modes/index.scss b/src/color-modes/index.scss
@@ -2,6 +2,7 @@
 
 @import './themes/light.scss';
 @import './themes/light_colorblind.scss';
+@import './themes/light_high_contrast.scss';
 @import './themes/dark.scss';
 @import './themes/dark_dimmed.scss';
 @import './themes/dark_high_contrast.scss';

diff --git a/src/color-modes/themes/light_high_contrast.scss b/src/color-modes/themes/light_high_contrast.scss
@@ -0,0 +1,7 @@
+@import "../../support/index.scss";
+
+@import "@primer/primitives/dist/scss/colors/_light_high_contrast.scss";
+
+@include color-mode-theme(light_high_contrast) {
+  @include primer-colors-light_high_contrast;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -965,10 +965,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@primer/primitives@^7.0.1":
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.0.1.tgz#bb867672214a561a910f11eabf7babf72c5994ec"
-  integrity sha512-Ddmi5Fuck3nsHt1+uvZiVzLwtjNrBloWq8FfQz74Qd9TXKxvHxrGxQuEJ21T3PxJMMwwEsKo7fk18oy1rTmFiA==
+"@primer/primitives@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.1.0.tgz#944151afb8b0e8ffd33c1cfdc4f873b5dd46cbe5"
+  integrity sha512-XVM535ieY+ohh82oMCZZwlebsnNtJORR5vpiUk/OLT1KX7pr2aRiSbitFwZ3umo0dw/L5tr6ebSJjRCXLu8UJg==
 
 "@primer/stylelint-config@12.1.0":
   version "12.1.0"