Skip to content

Commit

Permalink
Adding overrides for dark tritanopia (#597)
Browse files Browse the repository at this point in the history
* adding overrides for dark tritanopia
  • Loading branch information
lukasoppermann authored and langermank committed Jun 1, 2023
1 parent 7c90c35 commit 596b4cb
Show file tree
Hide file tree
Showing 3 changed files with 210 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/violet-cameras-love.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/primitives': patch
---

Replacing dark tritanopia scale with overrides
7 changes: 5 additions & 2 deletions scripts/themes.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,11 +76,14 @@ export const themes: TokenBuildInput[] = [
source: [
`src/tokens/functional/color/dark/*.json5`,
`src/tokens/functional/color/scales.json5`,
`src/tokens/functional/color/dark/overrides/dark.tritanopia.json5`,
`src/tokens/functional/shadow/dark.json5`,
`src/tokens/functional/border/dark.json5`,
`src/tokens/functional/color/dark/overrides/dark.tritanopia.json5`,
],
include: [
`src/tokens/base/color/dark/dark.json5`,
// `src/tokens/base/color/dark/dark.tritanopia.json5`,
],
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/dark.tritanopia.json5`],
},
{
filename: 'dark-colorblind',
Expand Down
200 changes: 200 additions & 0 deletions src/tokens/functional/color/dark/overrides/dark.tritanopia.json5
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
/**
* Dark tritanopia theme
* @extends all functional tokens
* @description All overwrites for functional color tokens for this theme are in this file
*/
{
fgColor: {
success: {
$value: '{base.color.blue.3}',
$type: 'color',
},
severe: {
$value: '{base.color.red.4}',
$type: 'color',
},
},
bgColor: {
success: {
muted: {
$value: '{base.color.blue.4}',
$type: 'color',
},
emphasis: {
$value: '{base.color.blue.5}',
$type: 'color'
},
},
severe: {
muted: {
$value: '{base.color.red.4}',
$type: 'color',
},
emphasis: {
$value: '{base.color.red.5}',
$type: 'color',
},
},
},
borderColor: {
success: {
muted: {
$value: '{base.color.blue.4}',
$type: 'color',
alpha: 0.4,
},
emphasis: {
$value: '{base.color.blue.5}',
$type: 'color',
},
},
severe: {
muted: {
$value: '{base.color.red.4}',
$type: 'color',
alpha: 0.4,
},
emphasis: {
$value: '{base.color.red.5}',
$type: 'color',
},
},
},
diffBlob: {
addition: {
bgColor: {
num: {
$value: '{base.color.blue.3}',
$type: 'color',
},
line: {
$value: '{base.color.blue.4}',
$type: 'color',
},
word: {
$value: '{base.color.blue.4}',
$type: 'color',
},
},
},
},
codeMirror: {
syntax: {
fgColor: {
variable: {
$value: '{base.color.red.2}',
$type: 'color',
},
},
},
},
button: {
primary: {
bgColor: {
hover: {
$value: '{bgColor.success.emphasis}',
$type: 'color',
mix: {
color: '{base.color.blue.3}',
weight: 0.2,
},
},
active: {
$value: '{bgColor.success.emphasis}',
$type: 'color',
mix: {
color: '{base.color.blue.3}',
weight: 0.4,
},
},
disabled: {
$value: '{base.color.blue.4}',
$type: 'color',
mix: {
color: '{base.color.blue.2}',
weight: 0.6,
},
},
},
},
},
color: {
ansi: {
green: {
$value: '{base.color.blue.3}',
$type: 'color',
},
'green-bright': {
$value: '{base.color.blue.2}',
$type: 'color',
},
},
prettylights: {
syntax: {
'string-regexp': {
$value: '{base.color.blue.1}',
$type: 'color',
},
'entity-tag': {
$value: '{base.color.blue.1}',
$type: 'color',
},
variable: {
$value: '{base.color.red.2}',
$type: 'color',
},
markup: {
inserted: {
text: {
$value: '{base.color.blue.0}',
$type: 'color',
},
bg: {
$value: '{base.color.blue.8}',
$type: 'color',
},
},
changed: {
text: {
$value: '{base.color.red.0}',
$type: 'color',
},
bg: {
$value: '{base.color.red.8}',
$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}'},
},
orange: {
'0': {$value: '{base.color.red.0}'},
'1': {$value: '{base.color.red.1}'},
'2': {$value: '{base.color.red.2}'},
'3': {$value: '{base.color.red.3}'},
'4': {$value: '{base.color.red.4}'},
'5': {$value: '{base.color.red.5}'},
'6': {$value: '{base.color.red.6}'},
'7': {$value: '{base.color.red.7}'},
'8': {$value: '{base.color.red.8}'},
'9': {$value: '{base.color.red.9}'},
},
},
},
}

0 comments on commit 596b4cb

Please sign in to comment.