Jules color blind theme setup (#236)

* Added light and dark color blind themes

Not sure if this makes any sense, I just copied what we did with dimmed and high contrast 🤷‍♂️

* Updated index file with new theme files

* Replaced Green + Red in light and dark colorblind palettes

- Green → optimized Blue
- Red → optimized Orange

* Changed colorblind theme names

Colorblind wasn’t appropriate so I changed it to Protanopia. Protanopia stands for Red/Green blindness.

* Changeset

* Update theme file extensions

* Update changeset

Co-authored-by: Cole Bemis <colebemis@github.com>

.changeset/popular-pugs-beg.md

@@ -0,0 +1,8 @@
+---
+"@primer/primitives": minor
+---
+
+Add new color blind themes: 
+- `light_protanopia`
+- `dark_protanopia`
+

data/colors/index.ts

@@ -1,11 +1,15 @@
 import light from './themes/light'
+import light_protanopia from './themes/light_protanopia'
 import dark from './themes/dark'
 import dark_dimmed from './themes/dark_dimmed'
 import dark_high_contrast from './themes/dark_high_contrast'
+import dark_protanopia from './themes/dark_protanopia'
 
 export default {
   light,
+  light_protanopia,
   dark,
   dark_dimmed,
-  dark_high_contrast
+  dark_high_contrast,
+  dark_protanopia
 }

data/colors/themes/dark_protanopia.ts

@@ -0,0 +1,51 @@
+import {merge} from '../../../src/utils'
+import dark from './dark'
+
+const scale = {
+  black: '#010409',
+  white: '#f0f6fc',
+  gray: ['#f0f6fc', '#c9d1d9', '#b1bac4', '#8b949e', '#6e7681', '#484f58', '#30363d', '#21262d', '#161b22', '#0d1117'],
+  blue: ['#cae8ff', '#a5d6ff', '#79c0ff', '#58a6ff', '#388bfd', '#1f6feb', '#1158c7', '#0d419d', '#0c2d6b', '#051d4d'],
+  green: ['#a0e8ff', '#83d4ff', '#66baff', '#42a0ff', '#1585fd', '#1d69e0', '#0f53bc', '#0b3c92', '#0a2861', '#041843'],
+  yellow: [
+    '#f8e3a1',
+    '#f2cc60',
+    '#e3b341',
+    '#d29922',
+    '#bb8009',
+    '#9e6a03',
+    '#845306',
+    '#693e00',
+    '#4b2900',
+    '#341a00'
+  ],
+  orange: [
+    '#ffdfb6',
+    '#ffc680',
+    '#ffa657',
+    '#f0883e',
+    '#db6d28',
+    '#bd561d',
+    '#9b4215',
+    '#762d0a',
+    '#5a1e02',
+    '#3d1300'
+  ],
+  red: ['#f0ec59', '#ecd334', '#e6b716', '#d69a00', '#c38000', '#a66900', '#865401', '#633e00', '#452f00', '#292100'],
+  purple: [
+    '#eddeff',
+    '#e2c5ff',
+    '#d2a8ff',
+    '#bc8cff',
+    '#a371f7',
+    '#8957e5',
+    '#6e40c9',
+    '#553098',
+    '#3c1e70',
+    '#271052'
+  ],
+  pink: ['#ffdaec', '#ffbedd', '#ff9bce', '#f778ba', '#db61a2', '#bf4b8a', '#9e3670', '#7d2457', '#5e103e', '#42062a'],
+  coral: ['#FFDDD2', '#FFC2B2', '#FFA28B', '#F78166', '#EA6045', '#CF462D', '#AC3220', '#872012', '#640D04', '#460701']
+}
+
+export default merge(dark, {scale})

data/colors/themes/light_protanopia.ts

@@ -0,0 +1,51 @@
+import {merge} from '../../../src/utils'
+import light from './light'
+
+const scale = {
+  black: '#1b1f24',
+  white: '#ffffff',
+  gray: ['#f6f8fa', '#eaeef2', '#d0d7de', '#afb8c1', '#8c959f', '#6e7781', '#57606a', '#424a53', '#32383f', '#24292f'],
+  blue: ['#ddf4ff', '#b6e3ff', '#80ccff', '#54aeff', '#218bff', '#0969da', '#0550ae', '#033d8b', '#0a3069', '#002155'],
+  green: ['#c0f6ff', '#96e5ff', '#65ccff', '#35adff', '#0088ff', '#0566d5', '#054da9', '#033a86', '#002d68', '#001f50'],
+  yellow: [
+    '#fff8c5',
+    '#fae17d',
+    '#eac54f',
+    '#d4a72c',
+    '#bf8700',
+    '#9a6700',
+    '#7d4e00',
+    '#633c01',
+    '#4d2d00',
+    '#3b2300'
+  ],
+  orange: [
+    '#fff1e5',
+    '#ffd8b5',
+    '#ffb77c',
+    '#fb8f44',
+    '#e16f24',
+    '#bc4c00',
+    '#953800',
+    '#762c00',
+    '#5c2200',
+    '#471700'
+  ],
+  red: ['#fefe48', '#fee325', '#f8c200', '#e7a100', '#d08002', '#ac5e00', '#8b4600', '#6c3900', '#4c3100', '#2f2900'],
+  purple: [
+    '#fbefff',
+    '#ecd8ff',
+    '#d8b9ff',
+    '#c297ff',
+    '#a475f9',
+    '#8250df',
+    '#6639ba',
+    '#512a97',
+    '#3e1f79',
+    '#2e1461'
+  ],
+  pink: ['#ffeff7', '#ffd3eb', '#ffadda', '#ff80c8', '#e85aad', '#bf3989', '#99286e', '#772057', '#611347', '#4d0336'],
+  coral: ['#FFF0EB', '#FFD6CC', '#FFB4A1', '#FD8C73', '#EC6547', '#C4432B', '#9E2F1C', '#801F0F', '#691105', '#510901']
+}
+
+export default merge(light, {scale})