From 1f2eff19399ccbfebb5886d8d347e09737affd0c Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Tue, 25 Apr 2023 11:53:45 +0200 Subject: [PATCH 1/2] adding overrides --- scripts/themes.config.ts | 7 +- .../dark.protanopia-deuteranopia.json5 | 267 +++++++++++++++++- 2 files changed, 271 insertions(+), 3 deletions(-) diff --git a/scripts/themes.config.ts b/scripts/themes.config.ts index b940943d3..47450a6d8 100644 --- a/scripts/themes.config.ts +++ b/scripts/themes.config.ts @@ -84,11 +84,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.protanopia-deuteranopia.json5`, `src/tokens/functional/shadow/dark.json5`, `src/tokens/functional/border/dark.json5`, + `src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`, + ], + include: [ + `src/tokens/base/color/dark/dark.json5`, + // , `src/tokens/base/color/dark/dark.protanopia-deuteranopia.json5` ], - include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/dark.protanopia-deuteranopia.json5`], }, { filename: 'dark-high-contrast', diff --git a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 index 72ee86699..1e8d1deaa 100644 --- a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 @@ -5,6 +5,14 @@ */ { fgColor: { + success: { + $value: '{base.color.blue.3}', + $type: 'color', + }, + danger: { + $value: '{base.color.orange.4}', + $type: 'color', + }, open: { $value: '{base.color.orange.3}', $type: 'color', @@ -15,6 +23,28 @@ }, }, bgColor: { + success: { + muted: { + $value: '{base.color.blue.4}', + $type: 'color', + alpha: 0.15, + }, + emphasis: { + $value: '{base.color.blue.5}', + $type: 'color', + }, + }, + danger: { + muted: { + $value: '{base.color.orange.4}', + $type: 'color', + alpha: 0.1, + }, + emphasis: { + $value: '{base.color.orange.5}', + $type: 'color', + }, + }, open: { muted: { $value: '{base.color.orange.4}', @@ -61,15 +91,250 @@ $type: 'color', }, }, + success: { + muted: { + $value: '{base.color.blue.4}', + $type: 'color', + alpha: 0.4, + }, + emphasis: { + $value: '{base.color.blue.5}', + $type: 'color', + }, + }, + danger: { + muted: { + $value: '{base.color.orange.4}', + $type: 'color', + alpha: 0.4, + }, + emphasis: { + $value: '{base.color.orange.5}', + $type: 'color', + }, + }, + }, + control: { + danger: { + fgColor: { + hover: { + $value: '{base.color.orange.3}', + $type: 'color', + }, + }, + }, + }, + codeMirror: { + syntax: { + fgColor: { + keyword: { + $value: '{base.color.orange.3}', + $type: 'color', + }, + storage: { + $value: '{base.color.orange.3}', + $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.green.6}', + $value: '{base.color.blue.6}', + $type: 'color', + mix: null, + }, + }, + }, + danger: { + bgColor: { + hover: { + $value: '{base.color.orange.6}', + $type: 'color', + }, + active: { + $value: '{base.color.orange.6}', + $type: 'color', + mix: { + color: '{base.color.orange.4}', + weight: 0.4, + }, + }, + }, + borderColor: { + hover: { + $value: '{base.color.orange.6}', + $type: 'color', + }, + }, + }, + }, + diffBlob: { + addition: { + bgColor: { + num: { + $value: '{base.color.blue.3}', + $type: 'color', + alpha: 0.3, + }, + line: { + $value: '{base.color.blue.4}', + $type: 'color', + alpha: 0.15, + mix: null, + }, + word: { + $value: '{base.color.blue.4}', + $type: 'color', + alpha: 0.4, + }, + }, + }, + deletion: { + bgColor: { + num: { + $value: '{base.color.orange.4}', + $type: 'color', + alpha: 0.3, + }, + line: { + $value: '{base.color.orange.4}', $type: 'color', + alpha: 0.15, mix: null, }, + word: { + $value: '{base.color.orange.4}', + $type: 'color', + alpha: 0.4, + }, + }, + }, + }, + color: { + ansi: { + green: { + $value: '{base.color.blue.3}', + $type: 'color', + }, + 'green-bright': { + $value: '{base.color.blue.2}', + $type: 'color', + }, + red: { + $value: '{base.color.orange.3}', + $type: 'color', + }, + 'red-bright': { + $value: '{base.color.orange.2}', + $type: 'color', + }, + }, + prettylights: { + syntax: { + 'entity-tag': { + $value: '{base.color.blue.1}', + $type: 'color', + }, + keyword: { + $value: '{base.color.orange.3}', + $type: 'color', + }, + brackethighlighter: { + unmatched: { + $value: '{base.color.orange.4}', + $type: 'color', + }, + }, + invalid: { + illegal: { + bg: { + $value: '{base.color.orange.7}', + $type: 'color', + }, + }, + }, + carriage: { + return: { + bg: { + $value: '{base.color.orange.6}', + $type: 'color', + }, + }, + }, + 'string-regexp': { + $value: '{base.color.blue.1}', + $type: 'color', + }, + markup: { + deleted: { + text: { + $value: '{base.color.orange.0}', + $type: 'color', + }, + bg: { + $value: '{base.color.orange.8}', + $type: 'color', + }, + }, + inserted: { + text: { + $value: '{base.color.blue.0}', + $type: 'color', + }, + bg: { + $value: '{base.color.blue.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}'}, + }, + 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}'}, }, }, }, From cc15b2ea53ddf6b060b8c543c4ca25d2ac3521f7 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Thu, 27 Apr 2023 10:23:36 +0200 Subject: [PATCH 2/2] add changeset --- .changeset/hip-trains-peel.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/hip-trains-peel.md diff --git a/.changeset/hip-trains-peel.md b/.changeset/hip-trains-peel.md new file mode 100644 index 000000000..fc09eb5c6 --- /dev/null +++ b/.changeset/hip-trains-peel.md @@ -0,0 +1,5 @@ +--- +'@primer/primitives': patch +--- + +Replace dark-colorblind scale with overrides