Skip to content

Commit

Permalink
Light protanopia deutranopia (#599)
Browse files Browse the repository at this point in the history 
* replace light colorblind mode scales with overrides
  • Loading branch information
@lukasoppermann
lukasoppermann authored May 3, 2023
1 parent b8bc786 commit f67de6a
Show file tree
Hide file tree
Showing 3 changed files with 268 additions and 8 deletions.
5 changes: 5 additions & 0 deletions .changeset/healthy-cats-warn.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/primitives': patch
---

Replace light-colorblind scale with overrides
4 changes: 2 additions & 2 deletions scripts/themes.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ export const themes: TokenBuildInput[] = [
source: [
`src/tokens/functional/color/light/*.json5`,
`src/tokens/functional/color/scales.json5`,
`src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`,
`src/tokens/functional/shadow/light.json5`,
`src/tokens/functional/border/light.json5`,
`src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`,
],
include: [
`src/tokens/base/color/light/light.json5`,
`src/tokens/base/color/light/light.protanopia-deuteranopia.json5`,
// `src/tokens/base/color/light/light.protanopia-deuteranopia.json5`,
],
},
{
Expand Down
267 changes: 261 additions & 6 deletions src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@
*/
{
fgColor: {
success: {
$value: '{base.color.blue.5}',
$type: 'color',
},
open: {
$value: '{base.color.orange.5}',
$type: 'color',
Expand All @@ -13,8 +17,30 @@
$value: '{base.color.gray.5}',
$type: 'color',
},
danger: {
$value: '{base.color.orange.5}',
$type: 'color',
mix: {
color: '{base.color.orange.4}',
weight: 0.05,
},
},
},
bgColor: {
success: {
muted: {
$value: '{base.color.blue.0}',
$type: 'color',
},
emphasis: {
$value: '{base.color.blue.4}',
$type: 'color',
mix: {
color: '{base.color.blue.5}',
weight: 0.75,
},
},
},
open: {
muted: {
$value: '{base.color.orange.3}',
Expand All @@ -26,6 +52,16 @@
$type: 'color',
},
},
danger: {
muted: {
$value: '{base.color.orange.0}',
$type: 'color',
},
emphasis: {
$value: '{base.color.orange.5}',
$type: 'color',
},
},
closed: {
muted: {
$value: '{base.color.gray.3}',
Expand Down Expand Up @@ -61,23 +97,45 @@
$type: 'color',
},
},
success: {
muted: {
$value: '{base.color.blue.3}',
$type: 'color',
alpha: 0.4,
},
emphasis: {
$value: '{base.color.blue.4}',
$type: 'color',
},
},
danger: {
muted: {
$value: '{base.color.orange.3}',
$type: 'color',
alpha: 0.4,
},
emphasis: {
$value: '{base.color.orange.5}',
$type: 'color',
},
},
},
diffBlob: {
addition: {
bgColor: {
num: {
$value: '{base.color.green.3}',
$value: '{base.color.blue.3}',
$type: 'color',
mix: null,
alpha: 0.4,
},
line: {
$value: '{base.color.green.0}',
$value: '{base.color.blue.0}',
$type: 'color',
alpha: 0.5,
},
word: {
$value: '{base.color.green.3}',
$value: '{base.color.blue.3}',
$type: 'color',
alpha: 0.4,
},
Expand All @@ -86,21 +144,218 @@
deletion: {
bgColor: {
num: {
$value: '{base.color.red.3}',
$value: '{base.color.orange.3}',
$type: 'color',
alpha: 0.4,
},
line: {
$value: '{base.color.red.0}',
$value: '{base.color.orange.0}',
$type: 'color',
alpha: 0.5,
},
word: {
$value: '{base.color.red.2}',
$value: '{base.color.orange.2}',
$type: 'color',
alpha: 0.5,
},
},
},
},
codeMirror: {
syntax: {
fgColor: {
keyword: {
$value: '{base.color.orange.5}',
$type: 'color',
},
storage: {
$value: '{base.color.orange.5}',
$type: 'color',
},
},
},
},
button: {
primary: {
bgColor: {
hover: {
$value: '{bgColor.success.emphasis}',
$type: 'color',
mix: {
color: '{base.color.blue.6}',
weight: 0.2,
},
},
active: {
$value: '{bgColor.success.emphasis}',
$type: 'color',
mix: {
color: '{base.color.blue.6}',
weight: 0.4,
},
},
disabled: {
$value: '{base.color.blue.4}',
$type: 'color',
mix: {
color: '{base.color.blue.0}',
weight: 0.6,
},
},
},
shadow: {
selected: {
$value: [
{
color: '{base.color.blue.9}',
alpha: 0.3,
offsetX: '0px',
offsetY: '1px',
blur: '0px',
spread: '0px',
inset: true,
},
],
$type: 'shadow',
},
},
},
danger: {
bgColor: {
hover: {
$value: '{base.color.orange.6}',
$type: 'color',
},
active: {
$value: '{base.color.orange.6}',
$type: 'color',
mix: {
color: '{base.color.orange.8}',
weight: 0.4,
},
},
},
shadow: {
selected: {
$value: [
{
color: '{base.color.orange.9}',
alpha: 0.2,
offsetX: '0px',
offsetY: '1px',
blur: '0px',
spread: '0px',
inset: true,
},
],
$type: 'shadow',
},
},
},
},
color: {
ansi: {
green: {
$value: '{base.color.blue.6}',
$type: 'color',
},
'green-bright': {
$value: '{base.color.blue.5}',
$type: 'color',
},
red: {
$value: '{base.color.orange.5}',
$type: 'color',
},
'red-bright': {
$value: '{base.color.orange.6}',
$type: 'color',
},
},
prettylights: {
syntax: {
keyword: {
$value: '{base.color.orange.5}',
$type: 'color',
},
invalid: {
illegal: {
bg: {
$value: '{base.color.orange.7}',
$type: 'color',
},
},
},
carriage: {
return: {
bg: {
$value: '{base.color.orange.5}',
$type: 'color',
},
},
},
'string-regexp': {
$value: '{base.color.blue.6}',
$type: 'color',
},
brackethighlighter: {
unmatched: {
$value: '{base.color.orange.7}',
$type: 'color',
},
},
markup: {
deleted: {
text: {
$value: '{base.color.orange.7}',
$type: 'color',
},
bg: {
$value: '{base.color.orange.0}',
$type: 'color',
},
},
inserted: {
text: {
$value: '{base.color.blue.6}',
$type: 'color',
},
bg: {
$value: '{base.color.blue.0}',
$type: 'color',
},
},
},
},
},
/**
* @description All overwrites for color scales
*/
scale: {
green: {
'0': {$value: '{base.color.blue.0}'},
'1': {$value: '{base.color.blue.1}'},
'2': {$value: '{base.color.blue.2}'},
'3': {$value: '{base.color.blue.3}'},
'4': {$value: '{base.color.blue.4}'},
'5': {$value: '{base.color.blue.5}'},
'6': {$value: '{base.color.blue.6}'},
'7': {$value: '{base.color.blue.7}'},
'8': {$value: '{base.color.blue.8}'},
'9': {$value: '{base.color.blue.9}'},
},
red: {
'0': {$value: '{base.color.orange.0}'},
'1': {$value: '{base.color.orange.1}'},
'2': {$value: '{base.color.orange.2}'},
'3': {$value: '{base.color.orange.3}'},
'4': {$value: '{base.color.orange.4}'},
'5': {$value: '{base.color.orange.5}'},
'6': {$value: '{base.color.orange.6}'},
'7': {$value: '{base.color.orange.7}'},
'8': {$value: '{base.color.orange.8}'},
'9': {$value: '{base.color.orange.9}'},
},
},
},
}

0 comments on commit f67de6a

Please sign in to comment.