Add Tritanopia theme (#1997)

* yarn add @primer/[email protected] * Add tritanopia themes * Add tritanopia to Storybook * Create healthy-zoos-play.md * yarn add @primer/primitives@^7.7.0
primer · Apr 3, 2022 · 9806b54 · 9806b54
1 parent d7b8a78
commit 9806b54
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 5 deletions.
diff --git a/.changeset/healthy-zoos-play.md b/.changeset/healthy-zoos-play.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Add Tritanopia theme
diff --git a/docs/src/stories/playground/ColorPlayground.stories.jsx b/docs/src/stories/playground/ColorPlayground.stories.jsx
@@ -2,11 +2,13 @@ import React from 'react'
 import clsx from 'clsx'
 import ColorBlock from '../helpers/ColorBlock'
 import DarkColorblind from '@primer/primitives/dist/json/colors/dark_colorblind.json'
+import DarkTritanopia from '@primer/primitives/dist/json/colors/dark_tritanopia.json'
 import DarkDimmed from '@primer/primitives/dist/json/colors/dark_dimmed.json'
 import DarkHighContrast from '@primer/primitives/dist/json/colors/dark_high_contrast.json'
 import Dark from '@primer/primitives/dist/json/colors/dark.json'
 import Light from '@primer/primitives/dist/json/colors/light.json'
 import LightColorblind from '@primer/primitives/dist/json/colors/light_colorblind.json'
+import LightTritanopia from '@primer/primitives/dist/json/colors/light_tritanopia.json'
 
 /*
 * Welcome to the Primer CSS Playground!
@@ -53,6 +55,10 @@ Color.parameters = {
         name: 'dark_colorblind',
         palette: DarkColorblind
       },
+      {
+        name: 'dark_tritanopia',
+        palette: DarkTritanopia
+      },
       {
         name: 'dark_dimmed',
         palette: DarkDimmed
@@ -72,6 +78,10 @@ Color.parameters = {
       {
         name: 'light_colorblind',
         palette: LightColorblind
+      },
+      {
+        name: 'light_tritanopia',
+        palette: LightTritanopia
       }
     ]
   }

diff --git a/docs/src/stories/playground/Playground.stories.jsx b/docs/src/stories/playground/Playground.stories.jsx
@@ -1,11 +1,13 @@
 import React from 'react'
 import clsx from 'clsx'
 import DarkColorblind from '@primer/primitives/dist/json/colors/dark_colorblind.json'
+import DarkTritanopia from '@primer/primitives/dist/json/colors/dark_tritanopia.json'
 import DarkDimmed from '@primer/primitives/dist/json/colors/dark_dimmed.json'
 import DarkHighContrast from '@primer/primitives/dist/json/colors/dark_high_contrast.json'
 import Dark from '@primer/primitives/dist/json/colors/dark.json'
 import Light from '@primer/primitives/dist/json/colors/light.json'
 import LightColorblind from '@primer/primitives/dist/json/colors/light_colorblind.json'
+import LightTritanopia from '@primer/primitives/dist/json/colors/light_tritanopia.json'
 // import useToggle from '../helpers/useToggle.jsx'
 // import ColorBlock from '../helpers/ColorBlock'
 // import { StoryTemplateName } from './OtherStoryFile.stories' // import stories for component compositions
@@ -86,6 +88,10 @@ Playground.parameters = {
         name: 'dark_colorblind',
         palette: DarkColorblind
       },
+      {
+        name: 'dark_tritanopia',
+        palette: DarkTritanopia
+      },
       {
         name: 'dark_dimmed',
         palette: DarkDimmed
@@ -105,6 +111,10 @@ Playground.parameters = {
       {
         name: 'light_colorblind',
         palette: LightColorblind
+      },
+      {
+        name: 'light_tritanopia',
+        palette: LightTritanopia
       }
     ]
   }

diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.5.1"
+    "@primer/primitives": "^7.7.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.3",

diff --git a/src/color-modes/index.scss b/src/color-modes/index.scss
@@ -3,8 +3,10 @@
 @import './themes/light.scss';
 @import './themes/light_colorblind.scss';
 @import './themes/light_high_contrast.scss';
+@import './themes/light_tritanopia.scss';
 @import './themes/dark.scss';
 @import './themes/dark_dimmed.scss';
 @import './themes/dark_high_contrast.scss';
 @import './themes/dark_colorblind.scss';
+@import './themes/dark_tritanopia.scss';
 @import './native.scss';
diff --git a/src/color-modes/themes/dark_tritanopia.scss b/src/color-modes/themes/dark_tritanopia.scss
@@ -0,0 +1,6 @@
+@import '../../support/index.scss';
+@import '@primer/primitives/dist/scss/colors/_dark_tritanopia.scss';
+
+@include color-mode-theme(dark_tritanopia) {
+  @include primer-colors-dark_tritanopia;
+}
diff --git a/src/color-modes/themes/light_tritanopia.scss b/src/color-modes/themes/light_tritanopia.scss
@@ -0,0 +1,6 @@
+@import '../../support/index.scss';
+@import '@primer/primitives/dist/scss/colors/_light_tritanopia.scss';
+
+@include color-mode-theme(light_tritanopia) {
+  @include primer-colors-light_tritanopia;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1148,10 +1148,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@primer/primitives@^7.5.1":
-  version "7.5.1"
-  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.5.1.tgz#18aa8a0f3a3f7fd49fcad31a7efb86688bffb9de"
-  integrity sha512-1pFKR+FcYRPXJ+zK/qtidrCJB7WmTaAX4sG7zE5LvGWjS5latue4pzZrK0FxxGGBdAU3HpoabANsGjv7T7sRRg==
+"@primer/primitives@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.7.0.tgz#4e838afaf997036720a43ebab0211d2de77b1606"
+  integrity sha512-LSd96U2/A70obilbdYiEKI8D/wXUtZnKmUI/ScLOlGDju4iuwd3pJsmFoBwM1Us6vV23V6mapIG+lh27RzauaA==
 
 "@primer/stylelint-config@^12.3.3":
   version "12.3.3"