From d0fe5c09f4144618bd1ce643f2e0c8e98163709a Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Wed, 11 Dec 2024 11:56:26 +0100 Subject: [PATCH 1/3] working on compnent tokens --- scripts/themes.config.ts | 20 +- src/tokens/component/diffBlob.json5 | 356 ++++++++++++++++++ src/tokens/component/topicTag.json5 | 19 + .../functional/color/dark/app-dark.json5 | 316 ---------------- .../dark/overrides/dark.high-contrast.json5 | 66 ---- .../functional/color/dark/patterns-dark.json5 | 16 + .../functional/color/light/app-light.json5 | 287 -------------- .../light/overrides/light.high-contrast.json5 | 45 --- .../color/light/patterns-light.json5 | 15 + 9 files changed, 416 insertions(+), 724 deletions(-) create mode 100644 src/tokens/component/diffBlob.json5 create mode 100644 src/tokens/component/topicTag.json5 diff --git a/scripts/themes.config.ts b/scripts/themes.config.ts index 21a67802f..d0a4f52e3 100644 --- a/scripts/themes.config.ts +++ b/scripts/themes.config.ts @@ -8,7 +8,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/color/light/*.json5`, `src/tokens/functional/shadow/light.json5`, `src/tokens/functional/border/*.json5`, - `src/tokens/functional/color/components/*.json5`, + `src/tokens/component/*.json5`, ], include: [ `src/tokens/functional/size/border.json5`, @@ -23,7 +23,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/color/light/*.json5`, `src/tokens/functional/shadow/light.json5`, `src/tokens/functional/border/*.json5`, - `src/tokens/functional/color/components/*.json5`, + `src/tokens/component/*.json5`, `src/tokens/functional/color/light/overrides/light.tritanopia.json5`, ], include: [ @@ -39,7 +39,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/color/light/*.json5`, `src/tokens/functional/shadow/light.json5`, `src/tokens/functional/border/*.json5`, - `src/tokens/functional/color/components/*.json5`, + `src/tokens/component/*.json5`, `src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`, ], include: [ @@ -55,7 +55,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/color/light/*.json5`, `src/tokens/functional/shadow/light.json5`, `src/tokens/functional/border/*.json5`, - `src/tokens/functional/color/components/*.json5`, + `src/tokens/component/*.json5`, `src/tokens/functional/color/light/overrides/light.high-contrast.json5`, ], include: [ @@ -72,7 +72,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/color/dark/*.json5`, `src/tokens/functional/shadow/dark.json5`, `src/tokens/functional/border/*.json5`, - `src/tokens/functional/color/components/*.json5`, + `src/tokens/component/*.json5`, ], include: [ `src/tokens/functional/size/border.json5`, @@ -88,14 +88,14 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/color/dark/overrides/dark.dimmed.json5`, `src/tokens/functional/shadow/dark.json5`, `src/tokens/functional/border/*.json5`, - `src/tokens/functional/color/components/*.json5`, + `src/tokens/component/*.json5`, ], include: [ `src/tokens/functional/size/border.json5`, `src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/dark.dimmed.json5`, `src/tokens/base/color/dark/display-dark.json5`, - `src/tokens/functional/color/components/*.json5`, + `src/tokens/component/*.json5`, ], }, { @@ -105,7 +105,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/color/dark/*.json5`, `src/tokens/functional/shadow/dark.json5`, `src/tokens/functional/border/*.json5`, - `src/tokens/functional/color/components/*.json5`, + `src/tokens/component/*.json5`, `src/tokens/functional/color/dark/overrides/dark.tritanopia.json5`, ], include: [ @@ -121,7 +121,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/color/dark/*.json5`, `src/tokens/functional/shadow/dark.json5`, `src/tokens/functional/border/*.json5`, - `src/tokens/functional/color/components/*.json5`, + `src/tokens/component/*.json5`, `src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`, ], include: [ @@ -137,7 +137,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/color/dark/*.json5`, `src/tokens/functional/shadow/dark.json5`, `src/tokens/functional/border/*.json5`, - `src/tokens/functional/color/components/*.json5`, + `src/tokens/component/*.json5`, `src/tokens/functional/color/dark/overrides/dark.high-contrast.json5`, ], include: [ diff --git a/src/tokens/component/diffBlob.json5 b/src/tokens/component/diffBlob.json5 new file mode 100644 index 000000000..e9409e14c --- /dev/null +++ b/src/tokens/component/diffBlob.json5 @@ -0,0 +1,356 @@ +{ + diffBlob: { + additionLine: { + fgColor: { + $value: '{fgColor.default}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['fgColor'], + }, + }, + }, + bgColor: { + $value: '{bgColor.success.muted}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['bgColor'], + }, + 'org.primer.overrides': { + 'dark-high-contrast': { + $value: '{bgColor.success.muted}', + alpha: 0.2, + }, + 'light-protanopia-deuteranopia': {}, + 'light-tritanopia': {}, + 'light-high-contrast': {}, + 'dark-protanopia-deuteranopia': {}, + 'dark-tritanopia': {}, + dark: { + alpha: 0.15, + }, + }, + }, + }, + }, + additionWord: { + fgColor: { + $value: '{fgColor.default}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['fgColor'], + }, + 'org.primer.overrides': { + 'dark-high-contrast': '{fgColor.onEmphasis}', + 'light-high-contrast': '{fgColor.onEmphasis}', + }, + }, + }, + bgColor: { + $value: '{base.color.green.1}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['bgColor'], + }, + 'org.primer.overrides': { + 'light-protanopia-deuteranopia': {}, + 'light-tritanopia': {}, + 'light-high-contrast': '{base.color.green.5}', + 'dark-high-contrast': '{bgColor.success.emphasis}', + 'dark-protanopia-deuteranopia': {}, + 'dark-tritanopia': {}, + dark: { + $value: '{base.color.green.4}', + alpha: 0.4, + }, + }, + }, + }, + }, + additionNum: { + fgColor: { + $value: '{fgColor.default}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['fgColor'], + }, + }, + }, + bgColor: { + $value: '{base.color.green.1}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['bgColor'], + }, + 'org.primer.overrides': { + 'light-protanopia-deuteranopia': {}, + 'light-tritanopia': {}, + 'light-high-contrast': {}, + 'dark-high-contrast': {}, + 'dark-protanopia-deuteranopia': {}, + 'dark-tritanopia': {}, + dark: { + $value: '{base.color.green.3}', + alpha: 0.3, + }, + }, + }, + }, + }, + deletionLine: { + fgColor: { + $value: '{fgColor.default}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['fgColor'], + }, + }, + }, + bgColor: { + $value: '{bgColor.danger.muted}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['bgColor'], + }, + 'org.primer.overrides': { + 'dark-high-contrast': { + $value: '{bgColor.danger.muted}', + alpha: 0.2, + }, + }, + }, + }, + }, + deletionWord: { + fgColor: { + $value: '{fgColor.default}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['fgColor'], + }, + 'org.primer.overrides': { + 'light-high-contrast': '{fgColor.onEmphasis}', + 'dark-high-contrast': '{fgColor.onEmphasis}', + }, + }, + }, + bgColor: { + $value: '{base.color.red.1}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['bgColor'], + }, + 'org.primer.overrides': { + 'light-protanopia-deuteranopia': {}, + 'light-tritanopia': {}, + 'light-high-contrast': '{base.color.red.5}', + 'dark-high-contrast': '{bgColor.danger.emphasis}', + 'dark-protanopia-deuteranopia': {}, + 'dark-tritanopia': {}, + dark: { + $value: '{base.color.red.4}', + alpha: 0.4, + }, + }, + }, + }, + }, + deletionNum: { + fgColor: { + $value: '{fgColor.default}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['fgColor'], + }, + }, + }, + bgColor: { + $value: '{base.color.red.1}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['bgColor'], + }, + 'org.primer.overrides': { + 'light-protanopia-deuteranopia': {}, + 'light-tritanopia': {}, + 'light-high-contrast': {}, + 'dark-high-contrast': {}, + 'dark-protanopia-deuteranopia': {}, + 'dark-tritanopia': {}, + dark: { + $value: '{base.color.red.4}', + alpha: 0.3, + }, + }, + }, + }, + }, + hunkLine: { + fgColor: { + $value: '{fgColor.muted}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['fgColor'], + }, + }, + }, + bgColor: { + $value: '{bgColor.accent.muted}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['bgColor'], + }, + 'org.primer.overrides': { + 'dark-high-contrast': { + $value: '{bgColor.accent.muted}', + alpha: 0.2, + }, + }, + }, + }, + }, + hunkNum: { + fgColor: { + rest: { + $value: '{fgColor.default}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['fgColor'], + }, + }, + }, + hover: { + $value: '{fgColor.onEmphasis}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['fgColor'], + }, + }, + }, + }, + bgColor: { + rest: { + $value: '{base.color.blue.1}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['bgColor'], + }, + 'org.primer.overrides': { + dark: '{base.color.blue.8}', + 'dark-high-contrast': { + $value: '{base.color.blue.4}', + alpha: 0.4, + }, + 'light-high-contrast': '{base.color.blue.1}', + }, + }, + }, + hover: { + $value: '{bgColor.accent.emphasis}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['bgColor'], + }, + }, + }, + }, + }, + emptyNum: { + bgColor: { + $value: '{bgColor.muted}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['bgColor'], + }, + }, + }, + }, + emptyLine: { + bgColor: { + $value: '{bgColor.muted}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['bgColor'], + }, + }, + }, + }, + expander: { + iconColor: { + $value: '{fgColor.muted}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['fgColor'], + }, + 'org.primer.overrides': { + 'light-high-contrast': '{fgColor.default}', + 'dark-high-contrast': '{fgColor.default}', + }, + }, + }, + }, + }, + '----------': '----------', +} diff --git a/src/tokens/component/topicTag.json5 b/src/tokens/component/topicTag.json5 new file mode 100644 index 000000000..58f7cea6a --- /dev/null +++ b/src/tokens/component/topicTag.json5 @@ -0,0 +1,19 @@ +{ + topicTag: { + borderColor: { + $value: '{base.color.transparent}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['borderColor'], + }, + 'org.primer.overrides': { + 'light-high-contrast': '{borderColor.accent.emphasis}', + 'dark-high-contrast': '{borderColor.accent.emphasis}', + }, + }, + }, + }, +} diff --git a/src/tokens/functional/color/dark/app-dark.json5 b/src/tokens/functional/color/dark/app-dark.json5 index c4047aa8b..f6e5c34ae 100644 --- a/src/tokens/functional/color/dark/app-dark.json5 +++ b/src/tokens/functional/color/dark/app-dark.json5 @@ -1,35 +1,4 @@ { - topicTag: { - borderColor: { - $value: '{base.color.transparent}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['borderColor'], - }, - }, - }, - }, - highlight: { - neutral: { - bgColor: { - $value: '{base.color.yellow.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - alpha: 0.4, - }, - }, - }, page: { header: { bgColor: { @@ -46,291 +15,6 @@ }, }, }, - diffBlob: { - additionLine: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{bgColor.success.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - alpha: 0.15, - }, - }, - additionWord: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{base.color.green.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - alpha: 0.4, - }, - }, - additionNum: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{base.color.green.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - alpha: 0.3, - }, - }, - deletionLine: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{bgColor.danger.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - deletionWord: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{base.color.red.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - alpha: 0.4, - }, - }, - deletionNum: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{base.color.red.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - alpha: 0.3, - }, - }, - hunkLine: { - fgColor: { - $value: '{fgColor.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{bgColor.accent.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - hunkNum: { - fgColor: { - rest: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - hover: { - $value: '{fgColor.onEmphasis}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - }, - bgColor: { - rest: { - $value: '{base.color.blue.8}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - hover: { - $value: '{bgColor.accent.emphasis}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - }, - emptyNum: { - bgColor: { - $value: '{bgColor.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - emptyLine: { - bgColor: { - $value: '{bgColor.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - expander: { - iconColor: { - $value: '{fgColor.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - }, - }, codeMirror: { fgColor: { $value: '{fgColor.default}', diff --git a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 index c75a17645..188535bb2 100644 --- a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 @@ -220,12 +220,6 @@ alpha: 0.9, }, }, - topicTag: { - borderColor: { - $value: '{borderColor.accent.emphasis}', - $type: 'color', - }, - }, counter: { borderColor: { $value: '{borderColor.default}', @@ -514,66 +508,6 @@ }, }, }, - diffBlob: { - additionLine: { - fgColor: { - $value: '{fgColor.onEmphasis}', - $type: 'color', - }, - bgColor: { - $value: '{bgColor.success.muted}', - $type: 'color', - alpha: 0.2, - }, - }, - additionWord: { - bgColor: { - $value: '{bgColor.success.emphasis}', - $type: 'color', - alpha: 1, - }, - }, - deletionLine: { - fgColor: { - $value: '{fgColor.onEmphasis}', - $type: 'color', - }, - bgColor: { - $value: '{bgColor.danger.muted}', - $type: 'color', - alpha: 0.2, - }, - }, - deletionWord: { - bgColor: { - $value: '{bgColor.danger.emphasis}', - $type: 'color', - alpha: 1, - }, - }, - hunkNum: { - bgColor: { - rest: { - $value: '{base.color.blue.4}', - $type: 'color', - alpha: 0.4, - }, - }, - }, - hunkLine: { - bgColor: { - $value: '{bgColor.accent.muted}', - $type: 'color', - alpha: 0.2, - }, - }, - expander: { - iconColor: { - $value: '{fgColor.default}', - $type: 'color', - }, - }, - }, codeMirror: { selection: { bgColor: { diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5 index d8fb47228..78c70c127 100644 --- a/src/tokens/functional/color/dark/patterns-dark.json5 +++ b/src/tokens/functional/color/dark/patterns-dark.json5 @@ -1,4 +1,20 @@ { + highlight: { + neutral: { + bgColor: { + $value: '{base.color.yellow.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['bgColor'], + }, + }, + alpha: 0.4, + }, + }, + }, avatar: { bgColor: { $value: '{base.color.neutral.13}', diff --git a/src/tokens/functional/color/light/app-light.json5 b/src/tokens/functional/color/light/app-light.json5 index caf51b7fa..1c89e8d57 100644 --- a/src/tokens/functional/color/light/app-light.json5 +++ b/src/tokens/functional/color/light/app-light.json5 @@ -1,32 +1,4 @@ { - topicTag: { - borderColor: { - $value: '{base.color.transparent}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['borderColor'], - }, - }, - }, - }, - highlight: { - neutral: { - bgColor: { - $value: '{base.color.yellow.0}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - }, page: { header: { bgColor: { @@ -42,265 +14,6 @@ }, }, }, - diffBlob: { - additionLine: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{bgColor.success.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - additionWord: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{base.color.green.1}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - additionNum: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{base.color.green.1}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - deletionLine: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{bgColor.danger.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - deletionWord: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{base.color.red.1}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - deletionNum: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{base.color.red.1}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - hunkLine: { - bgColor: { - $value: '{bgColor.accent.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - fgColor: { - $value: '{fgColor.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - }, - hunkNum: { - fgColor: { - rest: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - hover: { - $value: '{fgColor.onEmphasis}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - }, - bgColor: { - rest: { - $value: '{base.color.blue.1}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - hover: { - $value: '{bgColor.accent.emphasis}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - }, - emptyNum: { - bgColor: { - $value: '{bgColor.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - emptyLine: { - bgColor: { - $value: '{bgColor.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - expander: { - iconColor: { - $value: '{fgColor.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - }, - }, codeMirror: { fgColor: { $value: '{fgColor.default}', diff --git a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 b/src/tokens/functional/color/light/overrides/light.high-contrast.json5 index 62ac2b611..e04234d9b 100644 --- a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +++ b/src/tokens/functional/color/light/overrides/light.high-contrast.json5 @@ -198,12 +198,6 @@ alpha: 0.9, }, }, - topicTag: { - borderColor: { - $value: '{borderColor.accent.emphasis}', - $type: 'color', - }, - }, counter: { borderColor: { $value: '{borderColor.default}', @@ -446,45 +440,6 @@ }, }, }, - diffBlob: { - additionWord: { - fgColor: { - $value: '{fgColor.onEmphasis}', - $type: 'color', - }, - bgColor: { - $value: '{base.color.green.5}', - $type: 'color', - alpha: 1, - }, - }, - deletionWord: { - fgColor: { - $value: '{fgColor.onEmphasis}', - $type: 'color', - }, - bgColor: { - $value: '{base.color.red.5}', - $type: 'color', - alpha: 1, - }, - }, - hunkNum: { - bgColor: { - rest: { - $value: '{base.color.blue.1}', - $type: 'color', - alpha: 1, - }, - }, - }, - expander: { - iconColor: { - $value: '{fgColor.default}', - $type: 'color', - }, - }, - }, header: { borderColor: { divider: { diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5 index 0948fa2f5..9ff6b46a3 100644 --- a/src/tokens/functional/color/light/patterns-light.json5 +++ b/src/tokens/functional/color/light/patterns-light.json5 @@ -1,4 +1,19 @@ { + highlight: { + neutral: { + bgColor: { + $value: '{base.color.yellow.0}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['bgColor'], + }, + }, + }, + }, + }, avatar: { bgColor: { $value: '{base.color.neutral.0}', From 91bbac4d4541fd0d92d571c8c5fe44fe7dd3d3c1 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Wed, 11 Dec 2024 13:27:17 +0100 Subject: [PATCH 2/3] working on component tokens --- src/tokens/component/diffBlob.json5 | 56 ++++++++++++--- .../dark/overrides/dark.tritanopia.json5 | 47 ------------ .../light/overrides/light.tritanopia.json5 | 72 +------------------ 3 files changed, 47 insertions(+), 128 deletions(-) diff --git a/src/tokens/component/diffBlob.json5 b/src/tokens/component/diffBlob.json5 index e9409e14c..7135da823 100644 --- a/src/tokens/component/diffBlob.json5 +++ b/src/tokens/component/diffBlob.json5 @@ -65,11 +65,14 @@ }, 'org.primer.overrides': { 'light-protanopia-deuteranopia': {}, - 'light-tritanopia': {}, + 'light-tritanopia': '{base.color.blue.1}', 'light-high-contrast': '{base.color.green.5}', 'dark-high-contrast': '{bgColor.success.emphasis}', 'dark-protanopia-deuteranopia': {}, - 'dark-tritanopia': {}, + 'dark-tritanopia': { + $value: '{base.color.blue.4}', + alpha: 0.4, + }, dark: { $value: '{base.color.green.4}', alpha: 0.4, @@ -101,11 +104,12 @@ }, 'org.primer.overrides': { 'light-protanopia-deuteranopia': {}, - 'light-tritanopia': {}, - 'light-high-contrast': {}, - 'dark-high-contrast': {}, + 'light-tritanopia': '{base.color.blue.1}', 'dark-protanopia-deuteranopia': {}, - 'dark-tritanopia': {}, + 'dark-tritanopia': { + $value: '{base.color.blue.3}', + alpha: 0.3, + }, dark: { $value: '{base.color.green.3}', alpha: 0.3, @@ -171,11 +175,10 @@ }, 'org.primer.overrides': { 'light-protanopia-deuteranopia': {}, - 'light-tritanopia': {}, + 'light-tritanopia': '{base.color.red.1}', 'light-high-contrast': '{base.color.red.5}', 'dark-high-contrast': '{bgColor.danger.emphasis}', 'dark-protanopia-deuteranopia': {}, - 'dark-tritanopia': {}, dark: { $value: '{base.color.red.4}', alpha: 0.4, @@ -207,11 +210,10 @@ }, 'org.primer.overrides': { 'light-protanopia-deuteranopia': {}, - 'light-tritanopia': {}, + 'light-tritanopia': '{base.color.red.1}', 'light-high-contrast': {}, 'dark-high-contrast': {}, 'dark-protanopia-deuteranopia': {}, - 'dark-tritanopia': {}, dark: { $value: '{base.color.red.4}', alpha: 0.3, @@ -242,6 +244,8 @@ scopes: ['bgColor'], }, 'org.primer.overrides': { + 'light-tritanopia': '{base.color.neutral.1}', + 'dark-tritanopia': '{base.color.neutral.3}', 'dark-high-contrast': { $value: '{bgColor.accent.muted}', alpha: 0.2, @@ -287,6 +291,7 @@ }, 'org.primer.overrides': { dark: '{base.color.blue.8}', + 'dark-tritanopia': '{base.color.neutral.6}', 'dark-high-contrast': { $value: '{base.color.blue.4}', alpha: 0.4, @@ -304,6 +309,9 @@ group: 'component', scopes: ['bgColor'], }, + 'org.primer.overrides': { + 'dark-tritanopia': '{base.color.neutral.8}', + }, }, }, }, @@ -353,4 +361,32 @@ }, }, '----------': '----------', + 'light-tritanopia': { + hunkNum: { + bgColor: { + rest: { + $value: '{base.color.neutral.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['bgColor'], + }, + }, + }, + hover: { + $value: '{base.color.neutral.7}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'component', + scopes: ['bgColor'], + }, + }, + }, + }, + }, + }, } diff --git a/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 b/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 index 0148f45da..964795774 100644 --- a/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 @@ -129,53 +129,6 @@ }, }, }, - diffBlob: { - additionNum: { - bgColor: { - $value: '{base.color.blue.3}', - $type: 'color', - $extensions: { - alpha: 0.3, - }, - }, - }, - additionWord: { - bgColor: { - $value: '{base.color.blue.4}', - $type: 'color', - $extensions: { - alpha: 0.4, - }, - }, - }, - hunkNum: { - bgColor: { - rest: { - $value: '{base.color.neutral.6}', - $type: 'color', - $extensions: { - alpha: 1, - }, - }, - hover: { - $value: '{base.color.neutral.8}', - $type: 'color', - $extensions: { - alpha: 1, - }, - }, - }, - }, - hunkLine: { - bgColor: { - $value: '{base.color.neutral.3}', - $type: 'color', - $extensions: { - alpha: 1, - }, - }, - }, - }, codeMirror: { syntax: { fgColor: { diff --git a/src/tokens/functional/color/light/overrides/light.tritanopia.json5 b/src/tokens/functional/color/light/overrides/light.tritanopia.json5 index bb1dfb014..b4d63778e 100644 --- a/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +++ b/src/tokens/functional/color/light/overrides/light.tritanopia.json5 @@ -112,77 +112,7 @@ }, }, }, - diffBlob: { - additionNum: { - bgColor: { - $value: '{base.color.blue.1}', - $type: 'color', - }, - }, - additionWord: { - bgColor: { - $value: '{base.color.blue.1}', - $type: 'color', - }, - }, - deletionNum: { - bgColor: { - $value: '{base.color.red.1}', - $type: 'color', - }, - }, - deletionWord: { - bgColor: { - $value: '{base.color.red.1}', - $type: 'color', - }, - }, - hunkLine: { - bgColor: { - $value: '{base.color.neutral.1}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - hunkNum: { - bgColor: { - rest: { - $value: '{base.color.neutral.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - hover: { - $value: '{base.color.neutral.7}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - fgColor: { - hover: { - $value: '{fgColor.default}', - $type: 'color', - }, - }, - }, - }, + codeMirror: { syntax: { fgColor: { From 19ed17b24574c07c57c76423e3a00c3a9b00cb63 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Wed, 11 Dec 2024 13:29:40 +0100 Subject: [PATCH 3/3] update tritanopia --- src/tokens/component/diffBlob.json5 | 79 +++++++++++++++---- .../dark.protanopia-deuteranopia.json5 | 64 --------------- .../light.protanopia-deuteranopia.json5 | 71 ----------------- 3 files changed, 62 insertions(+), 152 deletions(-) diff --git a/src/tokens/component/diffBlob.json5 b/src/tokens/component/diffBlob.json5 index 7135da823..aa9a18bb8 100644 --- a/src/tokens/component/diffBlob.json5 +++ b/src/tokens/component/diffBlob.json5 @@ -64,7 +64,7 @@ scopes: ['bgColor'], }, 'org.primer.overrides': { - 'light-protanopia-deuteranopia': {}, + 'light-protanopia-deuteranopia': '{base.color.blue.1}', 'light-tritanopia': '{base.color.blue.1}', 'light-high-contrast': '{base.color.green.5}', 'dark-high-contrast': '{bgColor.success.emphasis}', @@ -103,7 +103,7 @@ scopes: ['bgColor'], }, 'org.primer.overrides': { - 'light-protanopia-deuteranopia': {}, + 'light-protanopia-deuteranopia': '{base.color.blue.1}', 'light-tritanopia': '{base.color.blue.1}', 'dark-protanopia-deuteranopia': {}, 'dark-tritanopia': { @@ -174,7 +174,7 @@ scopes: ['bgColor'], }, 'org.primer.overrides': { - 'light-protanopia-deuteranopia': {}, + 'light-protanopia-deuteranopia': '{base.color.orange.1}', 'light-tritanopia': '{base.color.red.1}', 'light-high-contrast': '{base.color.red.5}', 'dark-high-contrast': '{bgColor.danger.emphasis}', @@ -209,7 +209,7 @@ scopes: ['bgColor'], }, 'org.primer.overrides': { - 'light-protanopia-deuteranopia': {}, + 'light-protanopia-deuteranopia': '{base.color.orange.1}', 'light-tritanopia': '{base.color.red.1}', 'light-high-contrast': {}, 'dark-high-contrast': {}, @@ -244,6 +244,7 @@ scopes: ['bgColor'], }, 'org.primer.overrides': { + 'light-protanopia-deuteranopia': '{base.color.neutral.1}', 'light-tritanopia': '{base.color.neutral.1}', 'dark-tritanopia': '{base.color.neutral.3}', 'dark-high-contrast': { @@ -297,6 +298,8 @@ alpha: 0.4, }, 'light-high-contrast': '{base.color.blue.1}', + 'light-tritanopia': '{base.color.neutral.3}', + 'light-protanopia-deuteranopia': '{base.color.neutral.3}', }, }, }, @@ -310,7 +313,9 @@ scopes: ['bgColor'], }, 'org.primer.overrides': { + 'light-protanopia-deuteranopia': '{base.color.neutral.7}', 'dark-tritanopia': '{base.color.neutral.8}', + 'light-tritanopia': '{base.color.neutral.7}', }, }, }, @@ -361,32 +366,72 @@ }, }, '----------': '----------', - 'light-tritanopia': { + 'dark-protanopia-deuteranopia': { + additionNum: { + bgColor: { + $value: '{base.color.blue.3}', + $type: 'color', + alpha: 0.3, + }, + }, + additionWord: { + bgColor: { + $value: '{base.color.blue.4}', + $type: 'color', + alpha: 0.4, + }, + }, + deletionNum: { + bgColor: { + $value: '{base.color.orange.4}', + $type: 'color', + alpha: 0.3, + }, + }, + deletionLine: { + bgColor: { + $value: '{base.color.orange.4}', + $type: 'color', + alpha: 0.15, + mix: null, + }, + }, + deletionWord: { + bgColor: { + $value: '{base.color.orange.4}', + $type: 'color', + alpha: 0.4, + }, + }, hunkNum: { bgColor: { rest: { - $value: '{base.color.neutral.3}', + $value: '{base.color.neutral.6}', $type: 'color', + mix: null, $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, + alpha: 1, }, }, hover: { - $value: '{base.color.neutral.7}', + $value: '{base.color.neutral.8}', $type: 'color', + mix: null, $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, + alpha: 1, }, }, }, }, + hunkLine: { + bgColor: { + $value: '{base.color.neutral.3}', + $type: 'color', + mix: null, + $extensions: { + alpha: 1, + }, + }, + }, }, } 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 ce02164e6..d6c82bf02 100644 --- a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 @@ -190,70 +190,6 @@ }, }, }, - diffBlob: { - additionNum: { - bgColor: { - $value: '{base.color.blue.3}', - $type: 'color', - alpha: 0.3, - }, - }, - additionWord: { - bgColor: { - $value: '{base.color.blue.4}', - $type: 'color', - alpha: 0.4, - }, - }, - deletionNum: { - bgColor: { - $value: '{base.color.orange.4}', - $type: 'color', - alpha: 0.3, - }, - }, - deletionLine: { - bgColor: { - $value: '{base.color.orange.4}', - $type: 'color', - alpha: 0.15, - }, - }, - deletionWord: { - bgColor: { - $value: '{base.color.orange.4}', - $type: 'color', - alpha: 0.4, - }, - }, - hunkNum: { - bgColor: { - rest: { - $value: '{base.color.neutral.6}', - $type: 'color', - $extensions: { - alpha: 1, - }, - }, - hover: { - $value: '{base.color.neutral.8}', - $type: 'color', - $extensions: { - alpha: 1, - }, - }, - }, - }, - hunkLine: { - bgColor: { - $value: '{base.color.neutral.3}', - $type: 'color', - $extensions: { - alpha: 1, - }, - }, - }, - }, color: { ansi: { green: { diff --git a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 index c5ce46d55..0b4eaeb1c 100644 --- a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 @@ -112,77 +112,6 @@ }, }, }, - diffBlob: { - additionNum: { - bgColor: { - $value: '{base.color.blue.1}', - $type: 'color', - }, - }, - additionWord: { - bgColor: { - $value: '{base.color.blue.1}', - $type: 'color', - }, - }, - deletionNum: { - bgColor: { - $value: '{base.color.orange.1}', - $type: 'color', - }, - }, - deletionWord: { - bgColor: { - $value: '{base.color.orange.1}', - $type: 'color', - }, - }, - hunkLine: { - bgColor: { - $value: '{base.color.neutral.1}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - hunkNum: { - bgColor: { - rest: { - $value: '{base.color.neutral.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - hover: { - $value: '{base.color.neutral.7}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - fgColor: { - hover: { - $value: '{fgColor.default}', - $type: 'color', - }, - }, - }, - }, codeMirror: { syntax: { fgColor: {