diff --git a/.changeset/long-moose-kiss.md b/.changeset/long-moose-kiss.md new file mode 100644 index 000000000..10698fd1d --- /dev/null +++ b/.changeset/long-moose-kiss.md @@ -0,0 +1,5 @@ +--- +"@primer/primitives": minor +--- + +Add Tritanopia theme diff --git a/data/colors/index.ts b/data/colors/index.ts index ecbb28c12..4ea90d6a2 100644 --- a/data/colors/index.ts +++ b/data/colors/index.ts @@ -1,17 +1,21 @@ import light from './themes/light' import light_high_contrast from './themes/light_high_contrast' import light_colorblind from './themes/light_colorblind' +import light_tritanopia from './themes/light_tritanopia' import dark from './themes/dark' import dark_dimmed from './themes/dark_dimmed' import dark_high_contrast from './themes/dark_high_contrast' import dark_colorblind from './themes/dark_colorblind' +import dark_tritanopia from './themes/dark_tritanopia' export default { light, light_high_contrast, light_colorblind, + light_tritanopia, dark, dark_dimmed, dark_high_contrast, - dark_colorblind + dark_colorblind, + dark_tritanopia } diff --git a/data/colors/themes/dark_tritanopia.ts b/data/colors/themes/dark_tritanopia.ts new file mode 100644 index 000000000..d4d5f1453 --- /dev/null +++ b/data/colors/themes/dark_tritanopia.ts @@ -0,0 +1,62 @@ +import {merge} from '../../../src/utils' +import dark_colorblind from './dark_colorblind' + +const scale = { + black: '#010409', + white: '#ffffff', + gray: ['#f0f6fc', '#c9d1d9', '#b1bac4', '#8b949e', '#6e7681', '#484f58', '#30363d', '#21262d', '#161b22', '#0d1117'], + blue: ['#cae8ff', '#a5d6ff', '#79c0ff', '#58a6ff', '#388bfd', '#1f6feb', '#1158c7', '#0d419d', '#0c2d6b', '#051d4d'], + green: ['#cae8ff', '#a5d6ff', '#79c0ff', '#58a6ff', '#388bfd', '#1f6feb', '#1158c7', '#0d419d', '#0c2d6b', '#051d4d'], + yellow: [ + '#f8e3a1', + '#f2cc60', + '#e3b341', + '#d29922', + '#bb8009', + '#9e6a03', + '#845306', + '#693e00', + '#4b2900', + '#341a00' + ], + orange: [ + '#ffdcd7', + '#ffc1ba', + '#ffa198', + '#ff7b72', + '#f85149', + '#da3633', + '#b62324', + '#8e1519', + '#67060c', + '#490202' + ], + red: [ + '#ffdcd7', + '#ffc1ba', + '#ffa198', + '#ff7b72', + '#f85149', + '#da3633', + '#b62324', + '#8e1519', + '#67060c', + '#490202' + ], + 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_colorblind, {scale}) diff --git a/data/colors/themes/light_tritanopia.ts b/data/colors/themes/light_tritanopia.ts new file mode 100644 index 000000000..d1e97ca39 --- /dev/null +++ b/data/colors/themes/light_tritanopia.ts @@ -0,0 +1,62 @@ +import {merge} from '../../../src/utils' +import light_colorblind from './light_colorblind' + +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: ['#ddf4ff', '#b6e3ff', '#80ccff', '#54aeff', '#218bff', '#0969da', '#0550ae', '#033d8b', '#0a3069', '#002155'], + yellow: [ + '#fff8c5', + '#fae17d', + '#eac54f', + '#d4a72c', + '#bf8700', + '#9a6700', + '#7d4e00', + '#633c01', + '#4d2d00', + '#3b2300' + ], + orange: [ + '#FFEBE9', + '#ffcecb', + '#ffaba8', + '#ff8182', + '#fa4549', + '#cf222e', + '#a40e26', + '#82071e', + '#660018', + '#4c0014' + ], + red: [ + '#FFEBE9', + '#ffcecb', + '#ffaba8', + '#ff8182', + '#fa4549', + '#cf222e', + '#a40e26', + '#82071e', + '#660018', + '#4c0014' + ], + 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_colorblind, {scale})