From 05edec6425b470c1a4c2e10997cbe961463e3880 Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Tue, 28 Mar 2023 11:05:06 -0700 Subject: [PATCH] Add Primitives v8 colors (#529) * move over from old pr * remove old files * replace decorative with muted * remove decorative * fix high contrast * lukas' tests saving the day * Create .changeset/cold-houses-swim.md * use correct alpha for muted bg in dark * fix dark alpha * undo change to css build --- .changeset/cold-houses-swim.md | 5 + docs/storybook/.storybook/preview.js | 2 +- .../Color/Functional/Border.stories.tsx | 8 +- .../stories/Demos/BorderDemo.stories.tsx | 2 +- src/tokens/base/color/light/light.json5 | 2 +- src/tokens/functional/border/dark.json5 | 2 +- src/tokens/functional/border/light.json5 | 6 +- .../functional/color/dark/ansi-dark.json5 | 74 -- .../functional/color/dark/app-dark.json5 | 242 ++++++ .../functional/color/dark/checks-dark.json5 | 289 ------- .../color/dark/components-dark.json5 | 556 ------------- .../functional/color/dark/diff-dark.json5 | 78 -- .../functional/color/dark/misc-dark.json5 | 38 - .../color/dark/overrides/dark.dimmed.json5 | 22 +- .../dark/overrides/dark.high-contrast.json5 | 349 ++++---- .../dark.protanopia-deuteranopia.json5 | 56 +- .../dark/overrides/dark.tritanopia.json5 | 49 -- .../functional/color/dark/patterns-dark.json5 | 751 +++++++++++++++++ .../color/dark/primitives-dark.json5 | 392 ++++----- .../functional/color/dark/syntax-dark.json5 | 348 ++++---- .../functional/color/light/ansi-light.json5 | 74 -- .../functional/color/light/app-light.json5 | 239 ++++++ .../functional/color/light/checks-light.json5 | 296 ------- .../color/light/components-light.json5 | 469 ----------- .../functional/color/light/diff-light.json5 | 76 -- .../functional/color/light/misc-light.json5 | 37 - .../light/overrides/light.high-contrast.json5 | 420 +++++----- .../light.protanopia-deuteranopia.json5 | 86 +- .../light/overrides/light.tritanopia.json5 | 92 --- .../color/light/patterns-light.json5 | 753 ++++++++++++++++++ .../color/light/primitives-light.json5 | 382 ++++----- .../functional/color/light/syntax-light.json5 | 394 +++++---- src/tokens/functional/shadow/dark.json5 | 313 ++++++-- src/tokens/functional/shadow/light.json5 | 303 +++++-- tsconfig.json | 2 +- 35 files changed, 3806 insertions(+), 3401 deletions(-) create mode 100644 .changeset/cold-houses-swim.md delete mode 100644 src/tokens/functional/color/dark/ansi-dark.json5 create mode 100644 src/tokens/functional/color/dark/app-dark.json5 delete mode 100644 src/tokens/functional/color/dark/checks-dark.json5 delete mode 100644 src/tokens/functional/color/dark/components-dark.json5 delete mode 100644 src/tokens/functional/color/dark/diff-dark.json5 delete mode 100644 src/tokens/functional/color/dark/misc-dark.json5 delete mode 100644 src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 create mode 100644 src/tokens/functional/color/dark/patterns-dark.json5 delete mode 100644 src/tokens/functional/color/light/ansi-light.json5 create mode 100644 src/tokens/functional/color/light/app-light.json5 delete mode 100644 src/tokens/functional/color/light/checks-light.json5 delete mode 100644 src/tokens/functional/color/light/components-light.json5 delete mode 100644 src/tokens/functional/color/light/diff-light.json5 delete mode 100644 src/tokens/functional/color/light/misc-light.json5 delete mode 100644 src/tokens/functional/color/light/overrides/light.tritanopia.json5 create mode 100644 src/tokens/functional/color/light/patterns-light.json5 diff --git a/.changeset/cold-houses-swim.md b/.changeset/cold-houses-swim.md new file mode 100644 index 000000000..44a8b8690 --- /dev/null +++ b/.changeset/cold-houses-swim.md @@ -0,0 +1,5 @@ +--- +"@primer/primitives": patch +--- + +Add Primitives v8 colors (private dist for testing) diff --git a/docs/storybook/.storybook/preview.js b/docs/storybook/.storybook/preview.js index 659bbf212..1d38d678f 100644 --- a/docs/storybook/.storybook/preview.js +++ b/docs/storybook/.storybook/preview.js @@ -127,7 +127,7 @@ const tempTheme = deepmerge(theme, { borderHover: 'var(--underlineNav-borderColor-hover)', }, actionListItem: { - inlineDivider: 'var(--borderColor-decorative)', + inlineDivider: 'var(--borderColor-muted)', default: { hoverBg: 'var(--control-transparent-bgColor-hover)', hoverBorder: 'var(--control-transparent-borderColor-hover)', diff --git a/docs/storybook/stories/Color/Functional/Border.stories.tsx b/docs/storybook/stories/Color/Functional/Border.stories.tsx index cbab59fea..faf1d11fa 100644 --- a/docs/storybook/stories/Color/Functional/Border.stories.tsx +++ b/docs/storybook/stories/Color/Functional/Border.stories.tsx @@ -8,13 +8,7 @@ export default { }, } -const borderColors = [ - 'borderColor-default', - 'borderColor-muted', - 'borderColor-decorative', - 'borderColor-emphasis', - 'borderColor-disabled', -] +const borderColors = ['borderColor-default', 'borderColor-muted', 'borderColor-emphasis', 'borderColor-disabled'] export const Border = () => { return ( diff --git a/docs/storybook/stories/Demos/BorderDemo.stories.tsx b/docs/storybook/stories/Demos/BorderDemo.stories.tsx index 17ea6e46d..ba1495c0d 100644 --- a/docs/storybook/stories/Demos/BorderDemo.stories.tsx +++ b/docs/storybook/stories/Demos/BorderDemo.stories.tsx @@ -52,7 +52,7 @@ export const Borders: ComponentStory = () => { Danger - +
diff --git a/src/tokens/base/color/light/light.json5 b/src/tokens/base/color/light/light.json5 index 31b550f4f..aa44e32ff 100644 --- a/src/tokens/base/color/light/light.json5 +++ b/src/tokens/base/color/light/light.json5 @@ -6,7 +6,7 @@ base: { color: { black: { - $value: '#1b1f24', + $value: '#1f2328', $type: 'color', }, transparent: { diff --git a/src/tokens/functional/border/dark.json5 b/src/tokens/functional/border/dark.json5 index d6582f4a4..3aade68d9 100644 --- a/src/tokens/functional/border/dark.json5 +++ b/src/tokens/functional/border/dark.json5 @@ -2,7 +2,7 @@ outline: { focus: { $value: { - color: '{color.focus}', + color: '{focus.outlineColor}', style: 'solid', width: '1px', }, diff --git a/src/tokens/functional/border/light.json5 b/src/tokens/functional/border/light.json5 index d6582f4a4..d0a8b9f71 100644 --- a/src/tokens/functional/border/light.json5 +++ b/src/tokens/functional/border/light.json5 @@ -1,8 +1,8 @@ { - outline: { - focus: { + focus: { + outline: { $value: { - color: '{color.focus}', + color: '{focus.outlineColor}', style: 'solid', width: '1px', }, diff --git a/src/tokens/functional/color/dark/ansi-dark.json5 b/src/tokens/functional/color/dark/ansi-dark.json5 deleted file mode 100644 index 6c633707e..000000000 --- a/src/tokens/functional/color/dark/ansi-dark.json5 +++ /dev/null @@ -1,74 +0,0 @@ -{ - color: { - ansi: { - black: { - $value: '{base.color.gray.5}', - $type: 'color', - }, - blackBright: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - white: { - $value: '{base.color.gray.2}', - $type: 'color', - }, - whiteBright: { - $value: '{base.color.white}', - $type: 'color', - }, - gray: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - red: { - $value: '{base.color.red.3}', - $type: 'color', - }, - redBright: { - $value: '{base.color.red.2}', - $type: 'color', - }, - green: { - $value: '{base.color.green.3}', - $type: 'color', - }, - greenBright: { - $value: '{base.color.green.2}', - $type: 'color', - }, - yellow: { - $value: '{base.color.yellow.3}', - $type: 'color', - }, - yellowBright: { - $value: '{base.color.yellow.2}', - $type: 'color', - }, - blue: { - $value: '{base.color.blue.3}', - $type: 'color', - }, - blueBright: { - $value: '{base.color.blue.2}', - $type: 'color', - }, - magenta: { - $value: '{base.color.purple.3}', - $type: 'color', - }, - magentaBright: { - $value: '{base.color.purple.2}', - $type: 'color', - }, - cyan: { - $value: '#39c5cf', - $type: 'color', - }, - cyanBright: { - $value: '#56d4dd', - $type: 'color', - }, - }, - }, -} diff --git a/src/tokens/functional/color/dark/app-dark.json5 b/src/tokens/functional/color/dark/app-dark.json5 new file mode 100644 index 000000000..6d1bad399 --- /dev/null +++ b/src/tokens/functional/color/dark/app-dark.json5 @@ -0,0 +1,242 @@ +{ + topicTag: { + borderColor: { + $value: '{base.color.transparent}', + $type: 'color', + }, + }, + highlight: { + neutral: { + bgColor: { + $value: '{base.color.yellow.3}', + $type: 'color', + alpha: 0.4, + }, + }, + }, + page: { + header: { + bgColor: { + $value: '{bgColor.default}', + $type: 'color', + }, + }, + }, + diffBlob: { + addition: { + fgColor: { + text: { + $value: '{fgColor.default}', + $type: 'color', + }, + num: { + $value: '{fgColor.default}', + $type: 'color', + }, + }, + bgColor: { + num: { + $value: '{base.color.green.3}', + $type: 'color', + alpha: 0.3, + }, + line: { + $value: '{base.color.green.4}', + $type: 'color', + alpha: 0.15, + mix: null, + }, + word: { + $value: '{base.color.green.4}', + $type: 'color', + alpha: 0.4, + }, + }, + }, + deletion: { + fgColor: { + text: { + $value: '{fgColor.default}', + $type: 'color', + }, + num: { + $value: '{fgColor.default}', + $type: 'color', + }, + }, + bgColor: { + num: { + $value: '{base.color.red.4}', + $type: 'color', + alpha: 0.3, + }, + line: { + $value: '{base.color.red.4}', + $type: 'color', + alpha: 0.15, + mix: null, + }, + word: { + $value: '{base.color.red.4}', + $type: 'color', + alpha: 0.4, + }, + }, + }, + hunk: { + bgColor: { + num: { + $value: '{borderColor.accent.muted}', + $type: 'color', + }, + }, + }, + expander: { + iconColor: { + $value: '{fgColor.muted}', + $type: 'color', + }, + }, + }, + diffStat: { + addition: { + bgColor: { + $value: '{bgColor.success.emphasis}', + $type: 'color', + }, + }, + }, + codeMirror: { + fgColor: { + $value: '{fgColor.default}', + $type: 'color', + }, + bgColor: { + $value: '{bgColor.default}', + $type: 'color', + }, + gutters: { + bgColor: { + $value: '{bgColor.default}', + $type: 'color', + }, + }, + gutterMarker: { + fgColor: { + default: { + $value: '{bgColor.default}', + $type: 'color', + }, + muted: { + $value: '{fgColor.muted}', + $type: 'color', + }, + }, + }, + lineNumber: { + fgColor: { + $value: '{fgColor.muted}', + $type: 'color', + }, + }, + cursor: { + fgColor: { + $value: '{fgColor.default}', + $type: 'color', + }, + }, + selection: { + bgColor: { + $value: '{borderColor.accent.muted}', + $type: 'color', + }, + }, + activeline: { + bgColor: { + $value: '{bgColor.neutral.muted}', + $type: 'color', + }, + }, + matchingBracket: { + fgColor: { + $value: '{fgColor.default}', + $type: 'color', + }, + }, + lines: { + bgColor: { + $value: '{bgColor.default}', + $type: 'color', + }, + }, + syntax: { + fgColor: { + comment: { + $value: '{base.color.gray.3}', + $type: 'color', + }, + constant: { + $value: '{base.color.blue.2}', + $type: 'color', + }, + entity: { + $value: '{base.color.purple.2}', + $type: 'color', + }, + keyword: { + $value: '{base.color.red.3}', + $type: 'color', + }, + storage: { + $value: '{base.color.red.3}', + $type: 'color', + }, + string: { + $value: '{base.color.blue.1}', + $type: 'color', + }, + support: { + $value: '{base.color.blue.2}', + $type: 'color', + }, + variable: { + $value: '{base.color.orange.2}', + $type: 'color', + }, + }, + }, + }, + header: { + fgColor: { + default: { + $value: '{fgColor.onEmphasis}', + $type: 'color', + alpha: 0.7, + }, + logo: { + $value: '{fgColor.onEmphasis}', + $type: 'color', + }, + }, + bgColor: { + $value: '{base.color.gray.9}', + $type: 'color', + }, + borderColor: { + divider: { + $value: '{base.color.gray.3}', + $type: 'color', + }, + }, + }, + headerSearch: { + bgColor: { + $value: '{base.color.gray.9}', + $type: 'color', + }, + borderColor: { + $value: '{base.color.gray.6}', + $type: 'color', + }, + }, +} diff --git a/src/tokens/functional/color/dark/checks-dark.json5 b/src/tokens/functional/color/dark/checks-dark.json5 deleted file mode 100644 index 58066b5a2..000000000 --- a/src/tokens/functional/color/dark/checks-dark.json5 +++ /dev/null @@ -1,289 +0,0 @@ -{ - color: { - checks: { - bg: { - $value: '{color.canvas.inset}', - $type: 'color', - }, - textPrimary: { - $value: '{color.fg.default}', - $type: 'color', - }, - textSecondary: { - $value: '{color.fg.muted}', - $type: 'color', - }, - textLink: { - $value: '{color.accent.fg}', - $type: 'color', - }, - btnIcon: { - $value: '{color.fg.muted}', - $type: 'color', - }, - btnHoverIcon: { - $value: '{color.fg.default}', - $type: 'color', - }, - btnHoverBg: { - $value: '{color.neutral.subtle}', - $type: 'color', - }, - inputText: { - $value: '{color.fg.muted}', - $type: 'color', - }, - inputPlaceholderText: { - $value: '{color.fg.subtle}', - $type: 'color', - }, - inputFocusText: { - $value: '{color.fg.default}', - $type: 'color', - }, - inputBg: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - donutError: { - $value: '{base.color.red.4}', - $type: 'color', - }, - donutPending: { - $value: '{base.color.yellow.3}', - $type: 'color', - }, - donutSuccess: { - $value: '{base.color.green.4}', - $type: 'color', - }, - donutNeutral: { - $value: '{base.color.gray.3}', - $type: 'color', - }, - dropdownText: { - $value: '{color.fg.default}', - $type: 'color', - }, - dropdownBg: { - $value: '{color.canvas.overlay}', - $type: 'color', - }, - dropdownBorder: { - $value: '{color.border.default}', - $type: 'color', - }, - dropdownShadow: { - $value: '{base.color.black}', - $type: 'color', - alpha: 0.3, - }, - dropdownHoverText: { - $value: '{color.fg.default}', - $type: 'color', - }, - dropdownHoverBg: { - $value: '{color.neutral.subtle}', - $type: 'color', - }, - dropdownBtnHoverText: { - $value: '{color.fg.default}', - $type: 'color', - }, - dropdownBtnHoverBg: { - $value: '{color.neutral.subtle}', - $type: 'color', - }, - scrollbarThumbBg: { - $value: '{color.neutral.muted}', - $type: 'color', - }, - headerLabelText: { - $value: '{color.fg.muted}', - $type: 'color', - }, - headerLabelOpenText: { - $value: '{color.fg.default}', - $type: 'color', - }, - headerBorder: { - $value: '{color.border.muted}', - $type: 'color', - }, - headerIcon: { - $value: '{color.fg.muted}', - $type: 'color', - }, - lineText: { - $value: '{color.fg.muted}', - $type: 'color', - }, - lineNumText: { - $value: '{color.fg.subtle}', - $type: 'color', - }, - lineTimestampText: { - $value: '{color.fg.subtle}', - $type: 'color', - }, - lineHoverBg: { - $value: '{color.neutral.subtle}', - $type: 'color', - }, - lineSelectedBg: { - $value: '{color.accent.subtle}', - $type: 'color', - }, - lineSelectedNumText: { - $value: '{color.accent.fg}', - $type: 'color', - }, - lineDtFmText: { - $value: '{color.fg.onEmphasis}', - $type: 'color', - }, - lineDtFmBg: { - $value: '{color.attention.emphasis}', - $type: 'color', - }, - gateBg: { - $value: '{color.attention.subtle}', - $type: 'color', - }, - gateText: { - $value: '{color.fg.muted}', - $type: 'color', - }, - gateWaitingText: { - $value: '{color.attention.fg}', - $type: 'color', - }, - stepHeaderOpenBg: { - $value: '{color.canvas.subtle}', - $type: 'color', - }, - stepErrorText: { - $value: '{color.danger.fg}', - $type: 'color', - }, - stepWarningText: { - $value: '{color.attention.fg}', - $type: 'color', - }, - loglineText: { - $value: '{color.fg.muted}', - $type: 'color', - }, - loglineNumText: { - $value: '{color.fg.subtle}', - $type: 'color', - }, - loglineDebugText: { - $value: '{color.done.fg}', - $type: 'color', - }, - loglineErrorText: { - $value: '{color.fg.muted}', - $type: 'color', - }, - loglineErrorNumText: { - $value: '{color.fg.subtle}', - $type: 'color', - }, - loglineErrorBg: { - $value: '{color.danger.subtle}', - $type: 'color', - }, - loglineWarningText: { - $value: '{color.fg.muted}', - $type: 'color', - }, - loglineWarningNumText: { - $value: '{color.attention.fg}', - $type: 'color', - }, - loglineWarningBg: { - $value: '{color.attention.subtle}', - $type: 'color', - }, - loglineCommandText: { - $value: '{color.accent.fg}', - $type: 'color', - }, - loglineSectionText: { - $value: '{color.success.fg}', - $type: 'color', - }, - ansi: { - black: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - blackBright: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - white: { - $value: '{base.color.gray.2}', - $type: 'color', - }, - whiteBright: { - $value: '{base.color.gray.2}', - $type: 'color', - }, - gray: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - red: { - $value: '{base.color.red.3}', - $type: 'color', - }, - redBright: { - $value: '{base.color.red.2}', - $type: 'color', - }, - green: { - $value: '{base.color.green.3}', - $type: 'color', - }, - greenBright: { - $value: '{base.color.green.2}', - $type: 'color', - }, - yellow: { - $value: '{base.color.yellow.3}', - $type: 'color', - }, - yellowBright: { - $value: '{base.color.yellow.2}', - $type: 'color', - }, - blue: { - $value: '{base.color.blue.3}', - $type: 'color', - }, - blueBright: { - $value: '{base.color.blue.2}', - $type: 'color', - }, - magenta: { - $value: '{base.color.purple.3}', - $type: 'color', - }, - magentaBright: { - $value: '{base.color.purple.2}', - $type: 'color', - }, - cyan: { - $value: '#76e3ea', - $type: 'color', - }, - cyanBright: { - $value: '#b3f0ff', - $type: 'color', - }, - }, - }, - }, -} diff --git a/src/tokens/functional/color/dark/components-dark.json5 b/src/tokens/functional/color/dark/components-dark.json5 deleted file mode 100644 index 968063045..000000000 --- a/src/tokens/functional/color/dark/components-dark.json5 +++ /dev/null @@ -1,556 +0,0 @@ -{ - color: { - avatar: { - bg: { - $value: '{base.color.white}', - $type: 'color', - alpha: 0.1, - }, - border: { - $value: '{color.border.subtle}', - $type: 'color', - }, - stackFade: { - $value: '{base.color.gray.6}', - $type: 'color', - }, - stackFadeMore: { - $value: '{base.color.gray.7}', - $type: 'color', - }, - }, - topicTag: { - border: { - $value: '{base.color.transparent}', - $type: 'color', - }, - }, - counter: { - border: { - $value: '{base.color.transparent}', - $type: 'color', - }, - }, - selectMenu: { - backdropBorder: { - $value: '{base.color.gray.5}', - $type: 'color', - }, - tapHighlight: { - $value: '{base.color.gray.6}', - $type: 'color', - alpha: 0.5, - }, - tapFocusBg: { - $value: '{base.color.blue.8}', - $type: 'color', - }, - }, - header: { - text: { - $value: '{base.color.white}', - $type: 'color', - alpha: 0.7, - }, - bg: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - divider: { - $value: '{base.color.gray.3}', - $type: 'color', - }, - logo: { - $value: '{base.color.gray.0}', - $type: 'color', - }, - }, - headerSearch: { - bg: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - border: { - $value: '{base.color.gray.6}', - $type: 'color', - }, - }, - sidenav: { - selectedBg: { - $value: '{base.color.gray.7}', - $type: 'color', - }, - }, - menu: { - bgActive: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - }, - input: { - disabledBg: { - $value: '{color.neutral.muted}', - $type: 'color', - alpha: 0.5, - }, - }, - timeline: { - badgeBg: { - $value: '{base.color.gray.7}', - $type: 'color', - }, - }, - ansi: { - black: { - $value: '{base.color.gray.5}', - $type: 'color', - }, - blackBright: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - white: { - $value: '{base.color.gray.2}', - $type: 'color', - }, - whiteBright: { - $value: '{base.color.white}', - $type: 'color', - }, - gray: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - red: { - $value: '{base.color.red.3}', - $type: 'color', - }, - redBright: { - $value: '{base.color.red.2}', - $type: 'color', - }, - green: { - $value: '{base.color.green.3}', - $type: 'color', - }, - greenBright: { - $value: '{base.color.green.2}', - $type: 'color', - }, - yellow: { - $value: '{base.color.yellow.3}', - $type: 'color', - }, - yellowBright: { - $value: '{base.color.yellow.2}', - $type: 'color', - }, - blue: { - $value: '{base.color.blue.3}', - $type: 'color', - }, - blueBright: { - $value: '{base.color.blue.2}', - $type: 'color', - }, - magenta: { - $value: '{base.color.purple.3}', - $type: 'color', - }, - magentaBright: { - $value: '{base.color.purple.2}', - $type: 'color', - }, - cyan: { - $value: '#39c5cf', - $type: 'color', - }, - cyanBright: { - $value: '#56d4dd', - $type: 'color', - }, - }, - btn: { - text: { - $value: '{base.color.gray.1}', - $type: 'color', - }, - bg: { - $value: '{base.color.gray.7}', - $type: 'color', - }, - border: { - $value: '{color.border.subtle}', - $type: 'color', - }, - hoverBg: { - $value: '{base.color.gray.6}', - $type: 'color', - }, - hoverBorder: { - $value: '{base.color.gray.3}', - $type: 'color', - }, - activeBg: { - $value: '#282e33', - $type: 'color', - }, - activeBorder: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - selectedBg: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - focusBg: { - $value: '{base.color.gray.7}', - $type: 'color', - }, - focusBorder: { - $value: '{base.color.gray.3}', - $type: 'color', - }, - - counterBg: { - $value: '{base.color.gray.6}', - $type: 'color', - }, - primary: { - text: { - $value: '#ffffff', - $type: 'color', - }, - bg: { - $value: '{base.color.green.5}', - $type: 'color', - }, - border: { - $value: '{color.border.subtle}', - $type: 'color', - }, - shadow: '0 0 transparent', - insetShadow: '0 0 transparent', - hover: { - bg: { - $value: '{base.color.green.4}', - $type: 'color', - }, - }, - hoverBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - selectedBg: { - $value: '{base.color.green.5}', - $type: 'color', - }, - selectedShadow: '0 0 transparent', - disabledText: { - $value: '{base.color.white}', - $type: 'color', - alpha: 0.5, - }, - disabledBg: { - $value: '{base.color.green.5}', - $type: 'color', - alpha: 0.6, - }, - disabledBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - focusBg: { - $value: '{base.color.green.5}', - $type: 'color', - }, - focusBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - - icon: { - $value: '{base.color.white}', - $type: 'color', - }, - counterBg: { - $value: '{base.color.white}', - $type: 'color', - alpha: 0.2, - }, - }, - - outline: { - text: { - $value: '{base.color.blue.3}', - $type: 'color', - }, - hoverText: { - $value: '{base.color.blue.3}', - $type: 'color', - }, - hoverBg: { - $value: '{base.color.gray.6}', - $type: 'color', - }, - hoverBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - - hoverCounterBg: { - $value: '{base.color.white}', - $type: 'color', - alpha: 0.2, - }, - selectedText: { - $value: '{base.color.white}', - $type: 'color', - }, - selectedBg: { - $value: '{base.color.blue.7}', - $type: 'color', - }, - selectedBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - selectedShadow: '0 0 transparent', - disabledText: { - $value: '{base.color.blue.3}', - $type: 'color', - alpha: 0.5, - }, - disabledBg: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - disabledCounterBg: { - $value: '{base.color.blue.5}', - $type: 'color', - alpha: 0.05, - }, - focusBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - - counterBg: { - $value: '{base.color.blue.5}', - $type: 'color', - alpha: 0.1, - }, - }, - danger: { - text: { - $value: '{base.color.red.4}', - $type: 'color', - }, - hoverText: { - $value: '{color.fg.onEmphasis}', - $type: 'color', - }, - hoverBg: { - $value: '{base.color.red.5}', - $type: 'color', - }, - hoverBorder: { - $value: '{base.color.red.4}', - $type: 'color', - }, - hoverShadow: '0 0 transparent', - hoverInsetShadow: '0 0 transparent', - hoverIcon: { - $value: '{color.fg.onEmphasis}', - $type: 'color', - }, - hover: { - counter: { - bg: { - $value: '#ffffff', - $type: 'color', - alpha: 0.2, - }, - }, - }, - selectedText: { - $value: '#ffffff', - $type: 'color', - }, - selectedBg: { - $value: '{base.color.red.6}', - $type: 'color', - }, - selectedBorder: { - $value: '{base.color.red.3}', - $type: 'color', - }, - selectedShadow: '0 0 transparent', - disabledText: { - $value: '{base.color.red.4}', - $type: 'color', - alpha: 0.5, - }, - disabledBg: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - disabledCounterBg: { - $value: '{base.color.red.5}', - $type: 'color', - alpha: 0.05, - }, - focusBorder: { - $value: '{base.color.red.4}', - $type: 'color', - }, - - counterBg: { - $value: '{base.color.red.5}', - $type: 'color', - alpha: 0.1, - }, - icon: { - $value: '{base.color.red.4}', - $type: 'color', - }, - }, - }, - underlinenav: { - icon: { - $value: '{color.fg.subtle}', - $type: 'color', - }, - borderHover: { - $value: '{color.neutral.muted}', - $type: 'color', - }, - }, - - actionListItem: { - inlineDivider: { - $value: '{color.border.default}', - $type: 'color', - alpha: 0.48, - }, - - default: { - hoverBg: { - $value: '{base.color.gray.2}', - $type: 'color', - alpha: 0.12, - }, - hoverBorder: { - $value: '{base.color.transparent}', - $type: 'color', - }, - - activeBg: { - $value: '{base.color.gray.2}', - $type: 'color', - alpha: 0.2, - }, - activeBorder: { - $value: '{base.color.transparent}', - $type: 'color', - }, - selectedBg: { - $value: '{base.color.gray.2}', - $type: 'color', - alpha: 0.08, - }, - }, - danger: { - hoverBg: { - $value: '{base.color.red.4}', - $type: 'color', - alpha: 0.16, - }, - activeBg: { - $value: '{base.color.red.4}', - $type: 'color', - alpha: 0.24, - }, - hoverText: { - $value: '{base.color.red.3}', - $type: 'color', - }, - }, - }, - - switchTrack: { - bg: { - $value: '{base.color.black}', - $type: 'color', - }, - border: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - - checked: { - bg: { - $value: '{base.color.blue.5}', - $type: 'color', - alpha: 0.35, - }, - hoverBg: { - $value: '{base.color.blue.5}', - $type: 'color', - alpha: 0.5, - }, - activeBg: { - $value: '{base.color.blue.5}', - $type: 'color', - alpha: 0.65, - }, - border: { - $value: '{base.color.blue.3}', - $type: 'color', - }, - }, - }, - - switchKnob: { - checked: { - bg: { - $value: '{base.color.blue.5}', - $type: 'color', - }, - disabledBg: { - $value: '{base.color.gray.5}', - $type: 'color', - }, - }, - }, - - segmentedControl: { - bg: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - - button: { - hover: { - bg: { - $value: '{base.color.gray.6}', - $type: 'color', - }, - }, - - active: { - bg: { - $value: '{base.color.gray.7}', - $type: 'color', - }, - }, - selected: { - border: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - }, - }, - }, - }, -} diff --git a/src/tokens/functional/color/dark/diff-dark.json5 b/src/tokens/functional/color/dark/diff-dark.json5 deleted file mode 100644 index 862a532c6..000000000 --- a/src/tokens/functional/color/dark/diff-dark.json5 +++ /dev/null @@ -1,78 +0,0 @@ -{ - color: { - diffBlob: { - addition: { - numText: { - $value: '{color.fg.default}', - $type: 'color', - }, - fg: { - $value: '{color.fg.default}', - $type: 'color', - }, - numBg: { - $value: '{base.color.green.3}', - $type: 'color', - alpha: 0.3, - }, - lineBg: { - $value: '{color.success.subtle}', - $type: 'color', - }, - wordBg: { - $value: '{color.success.muted}', - $type: 'color', - }, - }, - deletion: { - numText: { - $value: '{color.fg.default}', - $type: 'color', - }, - fg: { - $value: '{color.fg.default}', - $type: 'color', - }, - numBg: { - $value: '{base.color.red.4}', - $type: 'color', - alpha: 0.3, - }, - lineBg: { - $value: '{color.danger.subtle}', - $type: 'color', - }, - wordBg: { - $value: '{color.danger.muted}', - $type: 'color', - }, - }, - hunk: { - numBg: { - $value: '{color.accent.muted}', - $type: 'color', - }, - }, - expander: { - icon: { - $value: '{color.fg.muted}', - $type: 'color', - }, - }, - }, - diffstat: { - additionBg: { - $value: '{base.color.green.3}', - $type: 'color', - }, - deletionBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - additionBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - }, - }, -} diff --git a/src/tokens/functional/color/dark/misc-dark.json5 b/src/tokens/functional/color/dark/misc-dark.json5 deleted file mode 100644 index 2d0b10909..000000000 --- a/src/tokens/functional/color/dark/misc-dark.json5 +++ /dev/null @@ -1,38 +0,0 @@ -{ - color: { - page: { - header: { - bg: { - $value: '{color.canvas.default}', - $type: 'color', - }, - }, - }, - searchKeyword: { - hl: { - $value: '{base.color.yellow.3}', - $type: 'color', - alpha: 0.4, - }, - }, - project: { - headerBg: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - sidebarBg: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - gradientIn: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - gradientOut: { - $value: '{base.color.gray.8}', - $type: 'color', - alpha: 0, - }, - }, - }, -} diff --git a/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 b/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 index 788344a02..5ebed2c21 100644 --- a/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 @@ -4,12 +4,24 @@ * @description All overwrites for functional color tokens for dark dimmed color mode are in this file */ { - color: { - diffBlob: { - expander: { - icon: { - $value: '{color.fg.default}', + diffBlob: { + expander: { + iconColor: { + $value: '{fgColor.default}', + $type: 'color', + }, + }, + }, + button: { + primary: { + bgColor: { + disabled: { + $value: '{base.color.green.4}', $type: 'color', + mix: { + color: '{base.color.green.3}', + weight: 0.6, + }, }, }, }, 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 5ea217fd9..869f19b74 100644 --- a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 @@ -4,38 +4,43 @@ * @description All overwrites for functional color tokens for dark high contrast color mode are in this file */ { - color: { - fg: { - muted: { - $value: '{base.color.gray.1}', - $type: 'color', - }, - onEmphasis: { - $value: '{base.color.gray.9}', - $type: 'color', - }, + fgColor: { + onEmphasis: { + $value: '{base.color.gray.9}', + $type: 'color', }, - border: { - default: { - $value: '{base.color.gray.5}', - $type: 'color', - }, - muted: { - $value: '{base.color.gray.5}', - $type: 'color', - }, - subtle: { - $value: '{base.color.gray.5}', - $type: 'color', - }, + muted: { + $value: '{base.color.gray.1}', + $type: 'color', + mix: null, + alpha: 1, + }, + }, + bgColor: { + emphasis: { + $value: '{base.color.gray.0}', + $type: 'color', }, neutral: { emphasis: { $value: '{base.color.gray.4}', $type: 'color', }, - emphasisPlus: { - $value: '{base.color.gray.0}', + }, + }, + borderColor: { + default: { + $value: '{base.color.gray.5}', + $type: 'color', + }, + muted: { + $value: '{base.color.gray.5}', + $type: 'color', + alpha: 1, + }, + neutral: { + emphasis: { + $value: '{base.color.gray.4}', $type: 'color', }, }, @@ -43,234 +48,282 @@ muted: { $value: '{base.color.blue.4}', $type: 'color', + alpha: 1, }, }, success: { muted: { $value: '{base.color.green.4}', $type: 'color', + alpha: 1, }, }, attention: { muted: { $value: '{base.color.yellow.4}', $type: 'color', + alpha: 1, }, }, severe: { muted: { $value: '{base.color.orange.4}', $type: 'color', + alpha: 1, }, }, danger: { muted: { $value: '{base.color.red.4}', $type: 'color', + alpha: 1, }, }, done: { muted: { $value: '{base.color.purple.4}', $type: 'color', + alpha: 1, }, }, sponsors: { muted: { $value: '{base.color.pink.4}', $type: 'color', + alpha: 1, }, }, - avatar: { - border: { - $value: '{base.color.white}', - $type: 'color', - alpha: 0.9, - }, + }, + // patterns + avatar: { + borderColor: { + $value: '{base.color.white}', + $type: 'color', + alpha: 0.9, }, - diffstat: { - deletionBorder: { - $value: '{base.color.red.2}', - $type: 'color', - }, - additionBorder: { - $value: '{base.color.green.2}', - $type: 'color', - }, + }, + topicTag: { + borderColor: { + $value: '{borderColor.accent.emphasis}', + $type: 'color', }, - underlinenav: { - icon: { - $value: '{base.color.gray.1}', - $type: 'color', - }, - borderHover: { - $value: '{base.color.gray.3}', + }, + control: { + bgColor: { + selected: { + $value: '{base.color.gray.6}', $type: 'color', }, }, - topicTag: { - border: { - $value: '{color.accent.emphasis}', + borderColor: { + emphasis: { + $value: '{borderColor.emphasis}', $type: 'color', + mix: null, }, }, - btn: { - selectedBg: { - $value: '{base.color.gray.6}', - $type: 'color', - alpha: 0.9, - }, - primary: { - text: { - $value: '{color.fg.onEmphasis}', - $type: 'color', - }, - border: { - $value: '{base.color.green.2}', - $type: 'color', - }, + transparent: { + bgColor: { hover: { - bg: { - $value: '{base.color.green.3}', - $type: 'color', - }, - }, - hoverBorder: { - $value: '{base.color.green.2}', + $value: '{base.color.gray.8}', $type: 'color', + alpha: 1, }, - disabledText: { - $value: '{color.fg.onEmphasis}', + active: { + $value: '{base.color.gray.6}', $type: 'color', - alpha: 0.5, + alpha: 1, }, - disabledBg: { - $value: '{base.color.green.5}', + selected: { + $value: '{base.color.gray.6}', $type: 'color', - alpha: 0.6, + alpha: 1, }, - disabledBorder: { - $value: '{base.color.green.2}', + }, + borderColor: { + hover: { + $value: '{borderColor.default}', $type: 'color', - alpha: 0.4, }, - icon: { - $value: '{color.fg.onEmphasis}', + active: { + $value: '{base.color.gray.4}', $type: 'color', }, - counterBg: { - $value: '{base.color.black}', + }, + }, + danger: { + fgColor: { + hover: { + $value: '{fgColor.onEmphasis}', $type: 'color', - alpha: 0.15, }, }, - danger: { + bgColor: { hover: { - counter: { - bg: { - $value: '{base.color.black}', - $type: 'color', - alpha: 0.15, - }, - }, + $value: '{bgColor.danger.emphasis}', + $type: 'color', }, - counterBg: { - $value: '{base.color.black}', + active: { + $value: '{bgColor.danger.emphasis}', $type: 'color', - alpha: 0.15, + alpha: 1, + mix: { + color: '{base.color.red.7}', + weight: 0.4, + }, }, }, }, - codemirror: { - selectionBg: { - $value: '{base.color.blue.4}', + }, + controlTrack: { + fgColor: { + rest: { + $value: '{fgColor.onEmphasis}', $type: 'color', - alpha: 0.4, }, }, - diffBlob: { - addition: { - fg: { - $value: '{color.fg.onEmphasis}', + }, + button: { + primary: { + fgColor: { + rest: { + $value: '{fgColor.onEmphasis}', $type: 'color', }, + disabled: { + $value: '{fgColor.onEmphasis}', + $type: 'color', + alpha: 0.5, + }, }, - deletion: { - fg: { - $value: '{color.fg.onEmphasis}', + iconColor: { + rest: { + $value: '{fgColor.onEmphasis}', $type: 'color', }, }, - expander: { - icon: { - $value: '{color.fg.default}', + bgColor: { + disabled: { + $value: '{base.color.green.5}', $type: 'color', + mix: { + color: '{base.color.green.0}', + weight: 0.6, + }, }, }, - hunk: { - numBg: { - $value: '{color.accent.muted}', + borderColor: { + rest: { + $value: '{base.color.green.2}', + $type: 'color', + alpha: 1, + }, + hover: { + $value: '{base.color.green.2}', + $type: 'color', + alpha: 1, + }, + disabled: { + $value: '{base.color.green.2}', $type: 'color', alpha: 0.4, }, }, }, - - actionListItem: { - inlineDivider: { - $value: '{color.border.muted}', - $type: 'color', - }, - - default: { - hoverBg: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - hoverBorder: { - $value: '{color.border.default}', + }, + buttonCounter: { + primary: { + bgColor: { + rest: { + $value: '{base.color.black}', $type: 'color', + alpha: 0.15, }, - activeBg: { - $value: '{base.color.gray.6}', + }, + }, + danger: { + bgColor: { + hover: { + $value: '{base.color.black}', $type: 'color', + alpha: 0.15, }, - activeBorder: { - $value: '{base.color.gray.4}', + rest: { + $value: '{base.color.black}', $type: 'color', + alpha: 0.15, }, - selectedBg: { - $value: '{base.color.gray.6}', + }, + }, + }, + diffBlob: { + addition: { + fgColor: { + text: { + $value: '{fgColor.onEmphasis}', $type: 'color', }, }, - danger: { - hoverBg: { - $value: '{color.danger.emphasis}', + bgColor: { + word: { + $value: '{base.color.green.4}', $type: 'color', + alpha: 1, }, - activeBg: { - $value: '{base.color.red.6}', + }, + }, + deletion: { + fgColor: { + text: { + $value: '{fgColor.onEmphasis}', $type: 'color', }, - hoverText: { - $value: '{color.fg.onEmphasis}', + }, + bgColor: { + word: { + $value: '{base.color.red.5}', $type: 'color', + alpha: 1, }, }, }, - - switchTrack: { - border: { - $value: '{color.border.default}', + expander: { + iconColor: { + $value: '{fgColor.default}', $type: 'color', }, - checked: { - border: { - $value: '{base.color.blue.5}', + }, + hunk: { + bgColor: { + num: { + $value: '{base.color.blue.4}', $type: 'color', + alpha: 0.4, }, }, }, }, + underlineNav: { + borderColor: { + hover: { + $value: '{base.color.gray.3}', + $type: 'color', + }, + }, + iconColor: { + rest: { + $value: '{base.color.gray.1}', + $type: 'color', + }, + }, + }, + codeMirror: { + selection: { + bgColor: { + $value: '{base.color.blue.4}', + $type: 'color', + alpha: 0.4, + }, + }, + }, } 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 059f33660..72ee86699 100644 --- a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 @@ -1,49 +1,75 @@ /** * Dark protanopia and deuteranopia (colorblind) * @extends all functional tokens - * @description All overwrites for functional color tokens for dark protanopia and deuteranopia (colorblind) color mode are in this file + * @description All overwrites for functional color tokens for dark protanopia and deuteranopia color mode are in this file */ { - color: { + fgColor: { open: { - fg: { - $value: '{base.color.orange.3}', + $value: '{base.color.orange.3}', + $type: 'color', + }, + closed: { + $value: '{base.color.gray.3}', + $type: 'color', + }, + }, + bgColor: { + open: { + muted: { + $value: '{base.color.orange.4}', $type: 'color', + alpha: 0.4, }, emphasis: { $value: '{base.color.orange.5}', $type: 'color', }, + }, + closed: { muted: { - $value: '{base.color.orange.4}', + $value: '{base.color.gray.4}', $type: 'color', alpha: 0.4, }, - subtle: { - $value: '{base.color.orange.4}', + emphasis: { + $value: '{base.color.gray.4}', $type: 'color', - alpha: 0.15, }, }, - closed: { - fg: { - $value: '{base.color.gray.3}', + }, + borderColor: { + open: { + muted: { + $value: '{base.color.orange.4}', $type: 'color', + alpha: 0.4, }, - emphasis: { - $value: '{base.color.gray.4}', + $value: '{base.color.orange.4}', $type: 'color', }, + }, + closed: { muted: { $value: '{base.color.gray.4}', $type: 'color', alpha: 0.4, }, - subtle: { + emphasis: { $value: '{base.color.gray.4}', $type: 'color', - alpha: 0.1, + }, + }, + }, + button: { + primary: { + bgColor: { + disabled: { + $value: '{base.color.green.6}', + $type: 'color', + mix: null, + }, }, }, }, diff --git a/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 b/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 deleted file mode 100644 index aa99be107..000000000 --- a/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +++ /dev/null @@ -1,49 +0,0 @@ -/** - * Dark tritanopia - * @extends all functional tokens - * @description All overwrites for functional color tokens for dark tritanopia color mode are in this file - */ -{ - color: { - open: { - fg: { - $value: '{base.color.orange.3}', - $type: 'color', - }, - emphasis: { - $value: '{base.color.orange.5}', - $type: 'color', - }, - muted: { - $value: '{base.color.orange.4}', - $type: 'color', - alpha: 0.4, - }, - subtle: { - $value: '{base.color.orange.4}', - $type: 'color', - alpha: 0.15, - }, - }, - closed: { - fg: { - $value: '{base.color.gray.3}', - $type: 'color', - }, - emphasis: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - muted: { - $value: '{base.color.gray.4}', - $type: 'color', - alpha: 0.4, - }, - subtle: { - $value: '{base.color.gray.4}', - $type: 'color', - alpha: 0.1, - }, - }, - }, -} diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5 new file mode 100644 index 000000000..1de9c0350 --- /dev/null +++ b/src/tokens/functional/color/dark/patterns-dark.json5 @@ -0,0 +1,751 @@ +{ + avatar: { + bgColor: { + $value: '{base.color.white}', + $type: 'color', + alpha: 0.1, + }, + borderColor: { + $value: 'transparent', + $type: 'color', + }, + }, + avatarStack: { + fade: { + bgColor: { + default: { + $value: '{base.color.gray.6}', + $type: 'color', + }, + muted: { + $value: '{base.color.gray.7}', + $type: 'color', + }, + }, + }, + }, + control: { + bgColor: { + rest: { + $value: '{base.color.gray.7}', + $type: 'color', + }, + hover: { + $value: '{base.color.gray.7}', + $type: 'color', + mix: { + color: '{base.color.gray.5}', + weight: 0.2, + }, + }, + active: { + $value: '{base.color.gray.7}', + $type: 'color', + mix: { + color: '{base.color.gray.5}', + weight: 0.4, + }, + }, + disabled: { + $value: '{bgColor.disabled}', + $type: 'color', + }, + selected: { + $value: '{base.color.gray.8}', + $type: 'color', + }, + }, + fgColor: { + rest: { + $value: '{base.color.gray.1}', + $type: 'color', + }, + placeholder: { + $value: '{base.color.gray.5}', + $type: 'color', + }, + disabled: { + $value: '{fgColor.disabled}', + $type: 'color', + }, + }, + borderColor: { + rest: { + $value: '{borderColor.default}', + $type: 'color', + }, + emphasis: { + $value: '{base.color.gray.4}', + $type: 'color', + mix: { + color: '{base.color.gray.5}', + weight: 0.2, + }, + }, + disabled: { + $value: '{borderColor.disabled}', + $type: 'color', + }, + selected: { + $value: '{base.color.gray.0}', + $type: 'color', + }, + success: { + $value: '{borderColor.success.emphasis}', + $type: 'color', + }, + danger: { + $value: '{borderColor.danger.emphasis}', + $type: 'color', + }, + warning: { + $value: '{borderColor.attention.emphasis}', + $type: 'color', + }, + }, + iconColor: { + rest: { + $value: '{fgColor.muted}', + $type: 'color', + }, + }, + transparent: { + bgColor: { + rest: { + $value: 'transparent', + $type: 'color', + }, + hover: { + $value: '{base.color.gray.2}', + $type: 'color', + alpha: 0.12, + }, + active: { + $value: '{base.color.gray.2}', + $type: 'color', + alpha: 0.2, + }, + disabled: { + $value: 'transparent', + $type: 'color', + }, + selected: { + $value: '{base.color.gray.2}', + $type: 'color', + alpha: 0.08, + }, + }, + borderColor: { + rest: { + $value: 'transparent', + $type: 'color', + }, + hover: { + $value: 'transparent', + $type: 'color', + }, + active: { + $value: 'transparent', + $type: 'color', + }, + }, + }, + danger: { + fgColor: { + rest: { + $value: '{fgColor.danger}', + $type: 'color', + }, + hover: { + $value: '{base.color.red.3}', + $type: 'color', + }, + }, + bgColor: { + hover: { + $value: '{bgColor.danger.muted}', + $type: 'color', + }, + active: { + $value: '{bgColor.danger.muted}', + $type: 'color', + alpha: 0.4, + }, + }, + }, + checked: { + bgColor: { + rest: { + $value: '{bgColor.accent.emphasis}', + $type: 'color', + }, + hover: { + $value: '{bgColor.accent.emphasis}', + $type: 'color', + mix: { + color: '{base.color.blue.3}', + weight: 0.2, + }, + }, + active: { + $value: '{bgColor.accent.emphasis}', + $type: 'color', + mix: { + color: '{base.color.blue.3}', + weight: 0.4, + }, + }, + disabled: { + $value: '{fgColor.disabled}', + $type: 'color', + }, + }, + fgColor: { + rest: { + $value: '{fgColor.onEmphasis}', + $type: 'color', + }, + disabled: { + $value: '{base.color.black}', + $type: 'color', + }, + }, + borderColor: { + rest: { + $value: '{bgColor.accent.emphasis}', + $type: 'color', + }, + hover: { + $value: 'transparent', + $type: 'color', + }, + active: { + $value: 'transparent', + $type: 'color', + }, + disabled: { + $value: '{fgColor.disabled}', + $type: 'color', + }, + }, + }, + }, + controlTrack: { + bgColor: { + rest: { + $value: '{base.color.gray.7}', + $type: 'color', + }, + hover: { + $value: '{base.color.gray.7}', + $type: 'color', + mix: { + color: '{base.color.gray.5}', + weight: 0.2, + }, + }, + active: { + $value: '{base.color.gray.7}', + $type: 'color', + mix: { + color: '{base.color.gray.5}', + weight: 0.4, + }, + }, + disabled: { + $value: '{fgColor.disabled}', + $type: 'color', + }, + }, + fgColor: { + rest: { + $value: '{fgColor.muted}', + $type: 'color', + }, + disabled: { + $value: '{fgColor.muted}', + $type: 'color', + }, + }, + borderColor: { + rest: { + $value: 'transparent', + $type: 'color', + }, + disabled: { + $value: '{fgColor.disabled}', + $type: 'color', + }, + }, + }, + controlKnob: { + bgColor: { + rest: { + $value: '{base.color.black}', + $type: 'color', + }, + disabled: { + $value: '{control.bgColor.disabled}', + $type: 'color', + }, + checked: { + $value: '{base.color.white}', + $type: 'color', + }, + }, + borderColor: { + rest: { + $value: '{control.borderColor.emphasis}', + $type: 'color', + }, + disabled: { + $value: '{control.bgColor.disabled}', + $type: 'color', + }, + checked: { + $value: '{control.checked.bgColor.rest}', + $type: 'color', + }, + }, + }, + counter: { + borderColor: { + $value: '{base.color.transparent}', + $type: 'color', + }, + }, + button: { + default: { + fgColor: { + rest: { + $value: '{control.fgColor.rest}', + $type: 'color', + }, + }, + bgColor: { + rest: { + $value: '{control.bgColor.rest}', + $type: 'color', + }, + hover: { + $value: '{control.bgColor.hover}', + $type: 'color', + }, + active: { + $value: '{control.bgColor.active}', + $type: 'color', + }, + selected: { + $value: '{control.bgColor.active}', + $type: 'color', + }, + }, + borderColor: { + rest: { + $value: '{borderColor.default}', + $type: 'color', + }, + hover: { + $value: '{borderColor.default}', + $type: 'color', + }, + active: { + $value: '{borderColor.default}', + $type: 'color', + }, + }, + }, + primary: { + fgColor: { + rest: { + $value: '{base.color.white}', + $type: 'color', + }, + disabled: { + $value: '{base.color.white}', + $type: 'color', + alpha: 0.5, + }, + }, + iconColor: { + rest: { + $value: '{base.color.white}', + $type: 'color', + }, + }, + bgColor: { + rest: { + $value: '{bgColor.success.emphasis}', + $type: 'color', + }, + hover: { + $value: '{bgColor.success.emphasis}', + $type: 'color', + mix: { + color: '{base.color.green.3}', + weight: 0.2, + }, + }, + active: { + $value: '{bgColor.success.emphasis}', + $type: 'color', + mix: { + color: '{base.color.green.3}', + weight: 0.4, + }, + }, + disabled: { + $value: '{base.color.green.4}', + $type: 'color', + mix: { + color: '{base.color.green.2}', + weight: 0.6, + }, + }, + }, + borderColor: { + rest: { + $value: '{borderColor.default}', + $type: 'color', + alpha: 0.8, + }, + hover: { + $value: '{borderColor.default}', + $type: 'color', + alpha: 0.8, + }, + disabled: { + $value: '{borderColor.default}', + $type: 'color', + alpha: 0.8, + }, + }, + }, + invisible: { + fgColor: { + rest: { + $value: '{fgColor.accent}', + $type: 'color', + }, + disabled: { + $value: '{control.fgColor.disabled}', + $type: 'color', + }, + }, + bgColor: { + rest: { + $value: '{control.transparent.bgColor.rest}', + $type: 'color', + }, + hover: { + $value: '{control.transparent.bgColor.hover}', + $type: 'color', + }, + active: { + $value: '{control.transparent.bgColor.active}', + $type: 'color', + }, + disabled: { + $value: '{control.transparent.bgColor.disabled}', + $type: 'color', + }, + }, + borderColor: { + rest: { + $value: '{control.transparent.borderColor.rest}', + $type: 'color', + }, + hover: { + $value: '{control.transparent.borderColor.hover}', + $type: 'color', + }, + }, + }, + outline: { + fgColor: { + rest: { + $value: '{fgColor.accent}', + $type: 'color', + }, + hover: { + $value: '{fgColor.accent}', + $type: 'color', + }, + active: { + $value: '{base.color.white}', + $type: 'color', + }, + disabled: { + $value: '{fgColor.accent}', + $type: 'color', + alpha: 0.5, + }, + }, + bgColor: { + rest: { + $value: '{base.color.gray.0}', + $type: 'color', + }, + hover: { + $value: '{base.color.gray.6}', + $type: 'color', + }, + active: { + $value: '{base.color.blue.7}', + $type: 'color', + }, + disabled: { + $value: '{base.color.gray.9}', + $type: 'color', + }, + }, + borderColor: { + hover: { + $value: '{borderColor.muted}', + $type: 'color', + }, + selected: { + $value: '{borderColor.muted}', + $type: 'color', + }, + }, + }, + danger: { + fgColor: { + rest: { + $value: '{fgColor.danger}', + $type: 'color', + }, + hover: { + $value: '{base.color.white}', + $type: 'color', + }, + active: { + $value: '{base.color.white}', + $type: 'color', + }, + disabled: { + $value: '{fgColor.danger}', + $type: 'color', + alpha: 0.5, + }, + }, + iconColor: { + rest: { + $value: '{fgColor.danger}', + $type: 'color', + }, + hover: { + $value: '{base.color.white}', + $type: 'color', + }, + }, + bgColor: { + rest: { + $value: '{control.bgColor.rest}', + $type: 'color', + }, + hover: { + $value: '{base.color.red.6}', + $type: 'color', + }, + active: { + $value: '{base.color.red.6}', + $type: 'color', + mix: { + color: '{base.color.red.4}', + weight: 0.4, + }, + }, + disabled: { + $value: '{control.bgColor.rest}', + $type: 'color', + }, + }, + borderColor: { + rest: { + $value: '{borderColor.default}', + $type: 'color', + }, + hover: { + $value: '{base.color.red.6}', + $type: 'color', + }, + active: { + $value: '{button.danger.bgColor.active}', + $type: 'color', + }, + }, + }, + }, + buttonCounter: { + default: { + bgColor: { + rest: { + $value: '{base.color.gray.6}', + $type: 'color', + }, + }, + }, + primary: { + bgColor: { + rest: { + $value: '{base.color.white}', + $type: 'color', + alpha: 0.2, + }, + }, + }, + outline: { + bgColor: { + rest: { + $value: '{bgColor.accent.emphasis}', + $type: 'color', + alpha: 0.1, + }, + hover: { + $value: '{base.color.white}', + $type: 'color', + alpha: 0.2, + }, + disabled: { + $value: '{bgColor.accent.emphasis}', + $type: 'color', + alpha: 0.05, + }, + }, + }, + danger: { + bgColor: { + hover: { + $value: '{base.color.white}', + $type: 'color', + alpha: 0.2, + }, + disabled: { + $value: '{bgColor.danger.emphasis}', + $type: 'color', + alpha: 0.05, + }, + rest: { + $value: '{bgColor.danger.emphasis}', + $type: 'color', + alpha: 0.1, + }, + }, + }, + }, + focus: { + outlineColor: { + $value: '{borderColor.accent.emphasis}', + $type: 'color', + }, + }, + header: { + bgColor: { + $value: '{base.color.gray.8}', + $type: 'color', + alpha: 0.95, + }, + fgColor: { + text: { + $value: '{base.color.white}', + $type: 'color', + alpha: 0.7, + }, + logo: { + $value: '{base.color.gray.0}', + $type: 'color', + }, + borderColor: { + $value: '{base.color.gray.3}', + $type: 'color', + }, + }, + }, + headerSearch: { + bgColor: { + $value: '{base.color.gray.9}', + $type: 'color', + }, + borderColor: { + $value: '{base.color.gray.6}', + $type: 'color', + }, + }, + menu: { + bgColor: { + active: { + $value: '{base.color.gray.8}', + $type: 'color', + }, + }, + }, + overlay: { + bgColor: { + $value: '{base.color.gray.8}', + $type: 'color', + }, + backdrop: { + bgColor: { + $value: '{base.color.gray.2}', + $type: 'color', + alpha: 0.2, + }, + }, + }, + selectMenu: { + borderColor: { + $value: '{base.color.gray.5}', + $type: 'color', + }, + bgColor: { + active: { + $value: '{base.color.blue.8}', + $type: 'color', + }, + }, + }, + sideNav: { + bgColor: { + selected: { + $value: '{base.color.gray.7}', + $type: 'color', + }, + }, + }, + timelineBadge: { + bgColor: { + $value: '{base.color.gray.7}', + $type: 'color', + }, + }, + treeViewItem: { + leadingVisual: { + bgColor: { + rest: { + $value: '{fgColor.muted}', + $type: 'color', + }, + }, + }, + }, + underlineNav: { + borderColor: { + active: { + $value: '{base.color.coral.3}', + $type: 'color', + }, + hover: { + $value: '{borderColor.neutral.muted}', + $type: 'color', + }, + }, + iconColor: { + rest: { + $value: '{fgColor.muted}', + $type: 'color', + }, + }, + }, +} diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5 index a0aa118cd..34dfb46b8 100644 --- a/src/tokens/functional/color/dark/primitives-dark.json5 +++ b/src/tokens/functional/color/dark/primitives-dark.json5 @@ -1,54 +1,39 @@ { - color: { - fg: { - default: { - $value: '{base.color.gray.1}', - $type: 'color', - }, - muted: { - $value: '{base.color.gray.3}', - $type: 'color', - }, - subtle: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - onEmphasis: { - $value: '{base.color.white}', - $type: 'color', + fgColor: { + default: { + $value: '{base.color.gray.0}', + $type: 'color', + mix: { + color: '{base.color.gray.1}', + weight: 0.25, }, }, - canvas: { - default: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - overlay: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - inset: { - $value: '{base.color.black}', - $type: 'color', - }, - subtle: { - $value: '{base.color.gray.8}', - $type: 'color', + muted: { + $value: '{base.color.gray.3}', + $type: 'color', + mix: { + color: '{base.color.gray.4}', + weight: 0.5, }, }, - border: { - default: { - $value: '{base.color.gray.6}', - $type: 'color', - }, - muted: { - $value: '{base.color.gray.7}', + onEmphasis: { + $value: '{base.color.white}', + $type: 'color', + }, + disabled: { + $value: '{base.color.gray.5}', + $type: 'color', + }, + link: { + rest: { + $value: '{fgColor.accent}', $type: 'color', }, - subtle: { - $value: '{base.color.gray.0}', - $type: 'color', - alpha: 0.1, + inverse: { + rest: { + $value: '{base.color.blue.5}', + $type: 'color', + }, }, control: { $value: '{base.color.gray.5}', @@ -59,271 +44,300 @@ }, }, }, - neutral: { - emphasisPlus: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - emphasis: { - $value: '{base.color.gray.4}', - $type: 'color', + accent: { + $value: '{base.color.blue.4}', + $type: 'color', + mix: { + color: '{base.color.blue.5}', + weight: 0.35, }, + }, + success: { + $value: '{base.color.green.3}', + $type: 'color', + }, + attention: { + $value: '{base.color.yellow.3}', + $type: 'color', + }, + severe: { + $value: '{base.color.orange.4}', + $type: 'color', + }, + danger: { + $value: '{base.color.red.4}', + $type: 'color', + }, + open: { + $value: '{fgColor.success}', + $type: 'color', + }, + closed: { + $value: '{base.color.red.4}', + $type: 'color', + }, + done: { + $value: '{base.color.purple.4}', + $type: 'color', + }, + sponsors: { + $value: '{base.color.pink.4}', + $type: 'color', + }, + }, + bgColor: { + default: { + $value: '{base.color.gray.9}', + $type: 'color', + }, + muted: { + $value: '{base.color.gray.8}', + $type: 'color', + }, + emphasis: { + $value: '{base.color.gray.4}', + $type: 'color', + }, + disabled: { + $value: '{base.color.gray.5}', + $type: 'color', + }, + neutral: { muted: { $value: '{base.color.gray.4}', $type: 'color', - alpha: 0.4, + alpha: 0.15, }, - subtle: { + emphasis: { $value: '{base.color.gray.4}', $type: 'color', - alpha: 0.1, }, }, accent: { - fg: { - $value: '{base.color.blue.3}', - $type: 'color', - }, - emphasis: { - $value: '{base.color.blue.5}', - $type: 'color', - }, muted: { - $value: '{base.color.blue.4}', - $type: 'color', - alpha: 0.4, - }, - subtle: { $value: '{base.color.blue.4}', $type: 'color', alpha: 0.15, }, - }, - success: { - fg: { - $value: '{base.color.green.3}', - $type: 'color', - }, emphasis: { - $value: '{base.color.green.5}', + $value: '{base.color.blue.5}', $type: 'color', }, + }, + success: { muted: { $value: '{base.color.green.4}', $type: 'color', - alpha: 0.4, + alpha: 0.15, }, - subtle: { - $value: '{base.color.green.4}', + emphasis: { + $value: '{base.color.green.5}', $type: 'color', - alpha: 0.15, }, }, attention: { - fg: { - $value: '{base.color.yellow.3}', + muted: { + $value: '{base.color.yellow.4}', $type: 'color', + alpha: 0.15, }, emphasis: { $value: '{base.color.yellow.5}', $type: 'color', }, - muted: { - $value: '{base.color.yellow.4}', - $type: 'color', - alpha: 0.4, - }, - subtle: { - $value: '{base.color.yellow.4}', - $type: 'color', - alpha: 0.15, - }, }, severe: { - fg: { + muted: { $value: '{base.color.orange.4}', $type: 'color', + alpha: 0.1, }, emphasis: { $value: '{base.color.orange.5}', $type: 'color', }, + }, + danger: { muted: { - $value: '{base.color.orange.4}', + $value: '{base.color.red.4}', $type: 'color', - alpha: 0.4, + alpha: 0.1, }, - subtle: { - $value: '{base.color.orange.4}', + emphasis: { + $value: '{base.color.red.5}', $type: 'color', - alpha: 0.15, }, }, - danger: { - fg: { - $value: '{base.color.red.4}', + open: { + muted: { + $value: '{bgColor.success.muted}', $type: 'color', + alpha: 0.1, }, emphasis: { - $value: '{base.color.red.5}', + $value: '{bgColor.success.emphasis}', $type: 'color', }, + }, + closed: { muted: { $value: '{base.color.red.4}', $type: 'color', - alpha: 0.4, + alpha: 0.15, }, - subtle: { - $value: '{base.color.red.4}', + emphasis: { + $value: '{base.color.red.5}', $type: 'color', - alpha: 0.15, }, }, - open: { - fg: { - $value: '{base.color.green.3}', + done: { + muted: { + $value: '{base.color.purple.4}', $type: 'color', + alpha: 0.15, }, emphasis: { - $value: '{base.color.green.5}', + $value: '{base.color.purple.5}', $type: 'color', }, + }, + sponsors: { muted: { - $value: '{base.color.green.4}', + $value: '{base.color.pink.4}', $type: 'color', - alpha: 0.4, + alpha: 0.1, }, - subtle: { - $value: '{base.color.green.4}', + emphasis: { + $value: '{base.color.pink.5}', $type: 'color', - alpha: 0.15, }, }, - closed: { - fg: { - $value: '{base.color.red.4}', + }, + borderColor: { + default: { + $value: '{base.color.gray.6}', + $type: 'color', + }, + muted: { + $value: '{borderColor.default}', + $type: 'color', + alpha: 0.4, + }, + emphasis: { + $value: '{base.color.gray.5}', + $type: 'color', + }, + disabled: { + $value: '{borderColor.default}', + $type: 'color', + }, + neutral: { + muted: { + $value: '{base.color.gray.4}', $type: 'color', + alpha: 0.4, }, emphasis: { - $value: '{base.color.red.5}', + $value: '{base.color.gray.4}', $type: 'color', }, + }, + accent: { muted: { - $value: '{base.color.red.4}', + $value: '{base.color.blue.4}', $type: 'color', alpha: 0.4, }, - subtle: { - $value: '{base.color.red.4}', + emphasis: { + $value: '{base.color.blue.5}', $type: 'color', - alpha: 0.15, }, }, - done: { - fg: { - $value: '{base.color.purple.4}', + success: { + muted: { + $value: '{base.color.green.4}', $type: 'color', + alpha: 0.4, }, emphasis: { - $value: '{base.color.purple.5}', + $value: '{base.color.green.5}', $type: 'color', }, + }, + attention: { muted: { - $value: '{base.color.purple.4}', + $value: '{base.color.yellow.4}', $type: 'color', alpha: 0.4, }, - subtle: { - $value: '{base.color.purple.4}', + emphasis: { + $value: '{base.color.yellow.5}', $type: 'color', - alpha: 0.15, }, }, - sponsors: { - fg: { - $value: '{base.color.pink.4}', + severe: { + muted: { + $value: '{base.color.orange.4}', $type: 'color', + alpha: 0.4, }, emphasis: { - $value: '{base.color.pink.5}', + $value: '{base.color.orange.5}', $type: 'color', }, + }, + danger: { muted: { - $value: '{base.color.pink.4}', + $value: '{base.color.red.4}', $type: 'color', alpha: 0.4, }, - subtle: { - $value: '{base.color.pink.4}', + emphasis: { + $value: '{base.color.red.5}', $type: 'color', - alpha: 0.15, }, }, - shadow: { - small: { - $value: '{base.color.black}', - alpha: 0.96, + open: { + muted: { + $value: '{borderColor.success.muted}', $type: 'color', }, - medium: { - $value: '{base.color.gray.4}', - alpha: 0.85, + emphasis: { + $value: '{borderColor.success.emphasis}', $type: 'color', }, - large: { - $value: '{base.color.gray.4}', - alpha: 0.8, + }, + closed: { + muted: { + $value: '{base.color.red.4}', $type: 'color', + alpha: 0.4, }, - extraLarge: { - $value: '{base.color.gray.4}', - alpha: 0.7, + emphasis: { + $value: '{base.color.red.5}', $type: 'color', }, - highlight: { - $value: '{base.color.white}', - alpha: 0.25, + }, + done: { + muted: { + $value: '{base.color.purple.4}', $type: 'color', + alpha: 0.4, }, - inset: { - $value: '{base.color.gray.2}', - alpha: 0, + emphasis: { + $value: '{base.color.purple.5}', $type: 'color', }, }, - focus: { - $value: '{base.color.blue.5}', - $type: 'color', - }, - primer: { - fg: { - disabled: { - $value: '{base.color.gray.5}', - $type: 'color', - }, - }, - canvas: { - backdrop: { - $value: '{base.color.black}', - $type: 'color', - alpha: 0.8, - }, - sticky: { - $value: '{base.color.gray.9}', - $type: 'color', - alpha: 0.95, - }, + sponsors: { + muted: { + $value: '{base.color.pink.4}', + $type: 'color', + alpha: 0.4, }, - border: { - active: { - $value: '{base.color.coral.3}', - $type: 'color', - }, - contrast: { - $value: '{base.color.white}', - $type: 'color', - alpha: 0.2, - }, + emphasis: { + $value: '{base.color.pink.5}', + $type: 'color', }, }, }, diff --git a/src/tokens/functional/color/dark/syntax-dark.json5 b/src/tokens/functional/color/dark/syntax-dark.json5 index ea526b5c5..c6e1b2635 100644 --- a/src/tokens/functional/color/dark/syntax-dark.json5 +++ b/src/tokens/functional/color/dark/syntax-dark.json5 @@ -1,207 +1,197 @@ { - color: { - prettylights: { - syntax: { - comment: { - $value: '{base.color.gray.3}', - $type: 'color', - }, - constant: { - $value: '{base.color.blue.2}', - $type: 'color', - }, - entity: { - $value: '{base.color.purple.2}', - $type: 'color', - }, - storageModifierImport: { - $value: '{base.color.gray.1}', - $type: 'color', - }, - entityTag: { - $value: '{base.color.green.1}', - $type: 'color', - }, - keyword: { - $value: '{base.color.red.3}', - $type: 'color', - }, - string: { - $value: '{base.color.blue.1}', - $type: 'color', - }, - variable: { - $value: '{base.color.orange.2}', - $type: 'color', - }, - brackethighlighterUnmatched: { - $value: '{base.color.red.4}', - $type: 'color', - }, - invalidIllegalText: { - $value: '{base.color.gray.0}', - $type: 'color', - }, - invalidIllegalBg: { - $value: '{base.color.red.7}', - $type: 'color', - }, - carriageReturnText: { - $value: '{base.color.gray.0}', - $type: 'color', - }, - carriageReturnBg: { - $value: '{base.color.red.6}', - $type: 'color', - }, - stringRegexp: { - $value: '{base.color.green.1}', - $type: 'color', - }, - markupList: { - $value: '{base.color.yellow.1}', - $type: 'color', - }, - markupHeading: { - $value: '{base.color.blue.5}', - $type: 'color', - }, - markupItalic: { - $value: '{base.color.gray.1}', - $type: 'color', - }, - markupBold: { - $value: '{base.color.gray.1}', - $type: 'color', - }, - markupDeletedText: { - $value: '{base.color.red.0}', - $type: 'color', - }, - markupDeletedBg: { - $value: '{base.color.red.8}', - $type: 'color', - }, - markupInsertedText: { - $value: '{base.color.green.0}', - $type: 'color', - }, - markupInsertedBg: { - $value: '{base.color.green.8}', - $type: 'color', - }, - markupChangedText: { - $value: '{base.color.orange.0}', - $type: 'color', - }, - markupChangedBg: { - $value: '{base.color.orange.8}', - $type: 'color', - }, - markupIgnoredText: { - $value: '{base.color.gray.1}', - $type: 'color', - }, - markupIgnoredBg: { - $value: '{base.color.blue.6}', - $type: 'color', - }, - metaDiffRange: { - $value: '{base.color.purple.2}', - $type: 'color', - }, - brackethighlighterAngle: { - $value: '{base.color.gray.3}', - $type: 'color', - }, - sublimelinterGutterMark: { - $value: '{base.color.gray.5}', - $type: 'color', - }, - constantOtherReferenceLink: { - $value: '{base.color.blue.1}', - $type: 'color', - }, + ansi: { + fgColor: { + black: { + $value: '{base.color.gray.5}', + $type: 'color', + }, + blackBright: { + $value: '{base.color.gray.4}', + $type: 'color', + }, + white: { + $value: '{base.color.gray.2}', + $type: 'color', + }, + whiteBright: { + $value: '{base.color.white}', + $type: 'color', + }, + gray: { + $value: '{base.color.gray.4}', + $type: 'color', + }, + red: { + $value: '{base.color.red.3}', + $type: 'color', + }, + redBright: { + $value: '{base.color.red.2}', + $type: 'color', + }, + green: { + $value: '{base.color.green.3}', + $type: 'color', + }, + greenBright: { + $value: '{base.color.green.2}', + $type: 'color', + }, + yellow: { + $value: '{base.color.yellow.3}', + $type: 'color', + }, + yellowBright: { + $value: '{base.color.yellow.2}', + $type: 'color', + }, + blue: { + $value: '{base.color.blue.3}', + $type: 'color', + }, + blueBright: { + $value: '{base.color.blue.2}', + $type: 'color', + }, + magenta: { + $value: '{base.color.purple.3}', + $type: 'color', + }, + magentaBright: { + $value: '{base.color.purple.2}', + $type: 'color', + }, + cyan: { + $value: '#39c5cf', + $type: 'color', + }, + cyanBright: { + $value: '#56d4dd', + $type: 'color', }, }, - codemirror: { - text: { - $value: '{color.fg.default}', + }, + prettylights: { + syntax: { + comment: { + $value: '{base.color.gray.3}', + $type: 'color', + }, + constant: { + $value: '{base.color.blue.2}', $type: 'color', }, - bg: { - $value: '{color.canvas.default}', + entity: { + $value: '{base.color.purple.2}', $type: 'color', }, - guttersBg: { - $value: '{color.canvas.default}', + storageModifierImport: { + $value: '{base.color.gray.1}', $type: 'color', }, - guttermarkerText: { - $value: '{color.canvas.default}', + entityTag: { + $value: '{base.color.green.1}', $type: 'color', }, - guttermarkerSubtleText: { - $value: '{color.fg.subtle}', + keyword: { + $value: '{base.color.red.3}', $type: 'color', }, - linenumberText: { - $value: '{color.fg.muted}', + string: { + $value: '{base.color.blue.1}', $type: 'color', }, - cursor: { - $value: '{color.fg.default}', + variable: { + $value: '{base.color.orange.2}', $type: 'color', }, - selectionBg: { - $value: '{color.accent.muted}', + brackethighlighterUnmatched: { + $value: '{base.color.red.4}', $type: 'color', }, - activelineBg: { - $value: '{color.neutral.subtle}', + invalidIllegalText: { + $value: '{base.color.gray.0}', $type: 'color', }, - matchingbracketText: { - $value: '{color.fg.default}', + invalidIllegalBg: { + $value: '{base.color.red.7}', $type: 'color', }, - linesBg: { - $value: '{color.canvas.default}', + carriageReturnText: { + $value: '{base.color.gray.0}', $type: 'color', }, - syntax: { - comment: { - $value: '{base.color.gray.3}', - $type: 'color', - }, - constant: { - $value: '{base.color.blue.2}', - $type: 'color', - }, - entity: { - $value: '{base.color.purple.2}', - $type: 'color', - }, - keyword: { - $value: '{base.color.red.3}', - $type: 'color', - }, - storage: { - $value: '{base.color.red.3}', - $type: 'color', - }, - string: { - $value: '{base.color.blue.1}', - $type: 'color', - }, - support: { - $value: '{base.color.blue.2}', - $type: 'color', - }, - variable: { - $value: '{base.color.orange.2}', - $type: 'color', - }, + carriageReturnBg: { + $value: '{base.color.red.6}', + $type: 'color', + }, + stringRegexp: { + $value: '{base.color.green.1}', + $type: 'color', + }, + markupList: { + $value: '{base.color.yellow.1}', + $type: 'color', + }, + markupHeading: { + $value: '{base.color.blue.5}', + $type: 'color', + }, + markupItalic: { + $value: '{base.color.gray.1}', + $type: 'color', + }, + markupBold: { + $value: '{base.color.gray.1}', + $type: 'color', + }, + markupDeletedText: { + $value: '{base.color.red.0}', + $type: 'color', + }, + markupDeletedBg: { + $value: '{base.color.red.8}', + $type: 'color', + }, + markupInsertedText: { + $value: '{base.color.green.0}', + $type: 'color', + }, + markupInsertedBg: { + $value: '{base.color.green.8}', + $type: 'color', + }, + markupChangedText: { + $value: '{base.color.orange.0}', + $type: 'color', + }, + markupChangedBg: { + $value: '{base.color.orange.8}', + $type: 'color', + }, + markupIgnoredText: { + $value: '{base.color.gray.1}', + $type: 'color', + }, + markupIgnoredBg: { + $value: '{base.color.blue.6}', + $type: 'color', + }, + metaDiffRange: { + $value: '{base.color.purple.2}', + $type: 'color', + }, + brackethighlighterAngle: { + $value: '{base.color.gray.3}', + $type: 'color', + }, + sublimelinterGutterMark: { + $value: '{base.color.gray.5}', + $type: 'color', + }, + constantOtherReferenceLink: { + $value: '{base.color.blue.1}', + $type: 'color', }, }, }, diff --git a/src/tokens/functional/color/light/ansi-light.json5 b/src/tokens/functional/color/light/ansi-light.json5 deleted file mode 100644 index 1c84e210a..000000000 --- a/src/tokens/functional/color/light/ansi-light.json5 +++ /dev/null @@ -1,74 +0,0 @@ -{ - color: { - ansi: { - black: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - blackBright: { - $value: '{base.color.gray.6}', - $type: 'color', - }, - white: { - $value: '{base.color.gray.5}', - $type: 'color', - }, - whiteBright: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - gray: { - $value: '{base.color.gray.5}', - $type: 'color', - }, - red: { - $value: '{base.color.red.5}', - $type: 'color', - }, - redBright: { - $value: '{base.color.red.6}', - $type: 'color', - }, - green: { - $value: '{base.color.green.6}', - $type: 'color', - }, - greenBright: { - $value: '{base.color.green.5}', - $type: 'color', - }, - yellow: { - $value: '{base.color.yellow.8}', - $type: 'color', - }, - yellowBright: { - $value: '{base.color.yellow.7}', - $type: 'color', - }, - blue: { - $value: '{base.color.blue.5}', - $type: 'color', - }, - blueBright: { - $value: '{base.color.blue.4}', - $type: 'color', - }, - magenta: { - $value: '{base.color.purple.5}', - $type: 'color', - }, - magentaBright: { - $value: '{base.color.purple.4}', - $type: 'color', - }, - cyan: { - $value: '#1b7c83', - $type: 'color', - }, - cyanBright: { - $value: '#3192aa', - $type: 'color', - }, - }, - }, -} diff --git a/src/tokens/functional/color/light/app-light.json5 b/src/tokens/functional/color/light/app-light.json5 new file mode 100644 index 000000000..79accca5a --- /dev/null +++ b/src/tokens/functional/color/light/app-light.json5 @@ -0,0 +1,239 @@ +{ + topicTag: { + borderColor: { + $value: '{base.color.transparent}', + $type: 'color', + }, + }, + highlight: { + neutral: { + bgColor: { + $value: '{base.color.yellow.0}', + $type: 'color', + }, + }, + }, + page: { + header: { + bgColor: { + $value: '{bgColor.muted}', + $type: 'color', + }, + }, + }, + diffBlob: { + addition: { + fgColor: { + text: { + $value: '{fgColor.default}', + $type: 'color', + }, + num: { + $value: '{fgColor.default}', + $type: 'color', + }, + }, + bgColor: { + num: { + $value: '{base.color.green.1}', + $type: 'color', + mix: { + color: '{base.color.green.0}', + weight: 0.8, + }, + }, + line: { + $value: '{base.color.green.0}', + $type: 'color', + }, + word: { + $value: '{base.color.green.1}', + $type: 'color', + }, + }, + }, + deletion: { + fgColor: { + text: { + $value: '{fgColor.default}', + $type: 'color', + }, + num: { + $value: '{fgColor.default}', + $type: 'color', + }, + }, + bgColor: { + num: { + $value: '{base.color.red.1}', + $type: 'color', + }, + line: { + $value: '{base.color.red.0}', + $type: 'color', + }, + word: { + $value: '{base.color.red.3}', + $type: 'color', + alpha: 0.4, + }, + }, + }, + hunk: { + bgColor: { + num: { + $value: '{base.color.blue.3}', + $type: 'color', + alpha: 0.4, + }, + }, + }, + expander: { + iconColor: { + $value: '{fgColor.muted}', + $type: 'color', + }, + }, + }, + diffStat: { + addition: { + bgColor: { + $value: '{bgColor.success.emphasis}', + $type: 'color', + }, + }, + }, + codeMirror: { + fgColor: { + $value: '{fgColor.default}', + $type: 'color', + }, + bgColor: { + $value: '{bgColor.default}', + $type: 'color', + }, + gutters: { + bgColor: { + $value: '{bgColor.default}', + $type: 'color', + }, + }, + gutterMarker: { + fgColor: { + default: { + $value: '{bgColor.default}', + $type: 'color', + }, + muted: { + $value: '{fgColor.muted}', + $type: 'color', + }, + }, + }, + lineNumber: { + fgColor: { + $value: '{fgColor.muted}', + $type: 'color', + }, + }, + cursor: { + fgColor: { + $value: '{fgColor.default}', + $type: 'color', + }, + }, + selection: { + bgColor: { + $value: '{borderColor.accent.muted}', + $type: 'color', + }, + }, + activeline: { + bgColor: { + $value: '{bgColor.neutral.muted}', + $type: 'color', + }, + }, + matchingBracket: { + fgColor: { + $value: '{fgColor.default}', + $type: 'color', + }, + }, + lines: { + bgColor: { + $value: '{bgColor.default}', + $type: 'color', + }, + }, + syntax: { + fgColor: { + comment: { + $value: '{base.color.gray.9}', + $type: 'color', + }, + constant: { + $value: '{base.color.blue.6}', + $type: 'color', + }, + entity: { + $value: '{base.color.purple.5}', + $type: 'color', + }, + keyword: { + $value: '{base.color.red.5}', + $type: 'color', + }, + storage: { + $value: '{base.color.red.5}', + $type: 'color', + }, + string: { + $value: '{base.color.blue.8}', + $type: 'color', + }, + support: { + $value: '{base.color.blue.6}', + $type: 'color', + }, + variable: { + $value: '{base.color.orange.6}', + $type: 'color', + }, + }, + }, + }, + header: { + fgColor: { + default: { + $value: '{fgColor.onEmphasis}', + $type: 'color', + alpha: 0.7, + }, + logo: { + $value: '{fgColor.onEmphasis}', + $type: 'color', + }, + }, + bgColor: { + $value: '{base.color.gray.9}', + $type: 'color', + }, + borderColor: { + divider: { + $value: '{base.color.gray.6}', + $type: 'color', + }, + }, + }, + headerSearch: { + bgColor: { + $value: '{base.color.gray.9}', + $type: 'color', + }, + borderColor: { + $value: '{base.color.gray.6}', + $type: 'color', + }, + }, +} diff --git a/src/tokens/functional/color/light/checks-light.json5 b/src/tokens/functional/color/light/checks-light.json5 deleted file mode 100644 index ab0c18f82..000000000 --- a/src/tokens/functional/color/light/checks-light.json5 +++ /dev/null @@ -1,296 +0,0 @@ -{ - color: { - checks: { - bg: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - textPrimary: { - $value: '{base.color.gray.0}', - $type: 'color', - }, - textSecondary: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - textLink: { - $value: '{base.color.blue.3}', - $type: 'color', - }, - btnIcon: { - $value: '{base.color.gray.3}', - $type: 'color', - }, - btnHoverIcon: { - $value: '{base.color.gray.0}', - $type: 'color', - }, - btnHoverBg: { - $value: '{base.color.white}', - alpha: 0.125, - $type: 'color', - }, - inputText: { - $value: '{base.color.gray.1}', - $type: 'color', - }, - inputPlaceholderText: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - inputFocusText: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - inputBg: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - donutError: { - $value: '{base.color.red.4}', - $type: 'color', - }, - donutPending: { - $value: '{base.color.yellow.4}', - $type: 'color', - }, - donutSuccess: { - $value: '{base.color.green.4}', - $type: 'color', - }, - donutNeutral: { - $value: '{base.color.gray.3}', - $type: 'color', - }, - dropdownText: { - $value: '{base.color.gray.3}', - $type: 'color', - }, - dropdownBg: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - dropdownBorder: { - $value: '{base.color.gray.7}', - $type: 'color', - }, - dropdownShadow: { - $value: '{base.color.black}', - alpha: 0.3, - $type: 'color', - }, - dropdownHoverText: { - $value: '{base.color.gray.0}', - $type: 'color', - }, - dropdownHoverBg: { - $value: '{base.color.gray.7}', - $type: 'color', - }, - dropdownBtnHoverText: { - $value: '{base.color.gray.0}', - $type: 'color', - }, - dropdownBtnHoverBg: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - scrollbarThumbBg: { - $value: '{base.color.gray.6}', - $type: 'color', - }, - headerLabelText: { - $value: '{base.color.gray.2}', - $type: 'color', - }, - headerLabelOpenText: { - $value: '{base.color.gray.0}', - $type: 'color', - }, - headerBorder: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - headerIcon: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - lineText: { - $value: '{base.color.gray.2}', - $type: 'color', - }, - lineNumText: { - $value: '{base.color.gray.4}', - alpha: 0.75, - $type: 'color', - }, - lineTimestampText: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - lineHoverBg: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - lineSelectedBg: { - $value: '{base.color.blue.4}', - alpha: 0.15, - $type: 'color', - }, - lineSelectedNumText: { - $value: '{base.color.blue.3}', - $type: 'color', - }, - lineDtFmText: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - lineDtFmBg: { - $value: '{base.color.yellow.5}', - $type: 'color', - }, - gateBg: { - $value: '{base.color.yellow.6}', - alpha: 0.15, - $type: 'color', - }, - gateText: { - $value: '{base.color.gray.2}', - $type: 'color', - }, - gateWaitingText: { - $value: '{base.color.yellow.3}', - $type: 'color', - }, - stepHeaderOpenBg: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - stepErrorText: { - $value: '{base.color.red.3}', - $type: 'color', - }, - stepWarningText: { - $value: '{base.color.yellow.3}', - $type: 'color', - }, - loglineText: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - loglineNumText: { - $value: '{base.color.gray.4}', - alpha: 0.75, - $type: 'color', - }, - loglineDebugText: { - $value: '{base.color.purple.3}', - $type: 'color', - }, - loglineErrorText: { - $value: '{base.color.gray.2}', - $type: 'color', - }, - loglineErrorNumText: { - $value: '{base.color.red.3}', - $type: 'color', - }, - loglineErrorBg: { - $value: '{base.color.red.6}', - alpha: 0.15, - $type: 'color', - }, - loglineWarningText: { - $value: '{base.color.gray.2}', - $type: 'color', - }, - loglineWarningNumText: { - $value: '{base.color.yellow.3}', - $type: 'color', - }, - loglineWarningBg: { - $value: '{base.color.yellow.6}', - alpha: 0.15, - $type: 'color', - }, - loglineCommandText: { - $value: '{base.color.blue.3}', - $type: 'color', - }, - loglineSectionText: { - $value: '{base.color.green.3}', - $type: 'color', - }, - ansi: { - black: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - blackBright: { - $value: '{base.color.gray.8}', - $type: 'color', - }, - white: { - $value: '{base.color.gray.2}', - $type: 'color', - }, - whiteBright: { - $value: '{base.color.gray.2}', - $type: 'color', - }, - gray: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - red: { - $value: '{base.color.red.3}', - $type: 'color', - }, - redBright: { - $value: '{base.color.red.2}', - $type: 'color', - }, - green: { - $value: '{base.color.green.3}', - $type: 'color', - }, - greenBright: { - $value: '{base.color.green.2}', - $type: 'color', - }, - yellow: { - $value: '{base.color.yellow.3}', - $type: 'color', - }, - yellowBright: { - $value: '{base.color.yellow.2}', - $type: 'color', - }, - blue: { - $value: '{base.color.blue.3}', - $type: 'color', - }, - blueBright: { - $value: '{base.color.blue.2}', - $type: 'color', - }, - magenta: { - $value: '{base.color.purple.3}', - $type: 'color', - }, - magentaBright: { - $value: '{base.color.purple.2}', - $type: 'color', - }, - cyan: { - $value: '#76e3ea', - $type: 'color', - }, - cyanBright: { - $value: '#b3f0ff', - $type: 'color', - }, - }, - }, - }, -} diff --git a/src/tokens/functional/color/light/components-light.json5 b/src/tokens/functional/color/light/components-light.json5 deleted file mode 100644 index 2ea5d6910..000000000 --- a/src/tokens/functional/color/light/components-light.json5 +++ /dev/null @@ -1,469 +0,0 @@ -{ - color: { - avatar: { - bg: { - $value: '{base.color.white}', - $type: 'color', - }, - border: { - $value: '{color.border.subtle}', - $type: 'color', - }, - stackFade: { - $value: '{base.color.gray.3}', - $type: 'color', - }, - stackFadeMore: { - $value: '{base.color.gray.2}', - $type: 'color', - }, - }, - topicTag: { - border: { - $value: '{base.color.transparent}', - $type: 'color', - }, - }, - counter: { - border: { - $value: '{base.color.transparent}', - $type: 'color', - }, - }, - selectMenu: { - backdropBorder: { - $value: '{base.color.transparent}', - $type: 'color', - }, - tapHighlight: { - $value: '{base.color.gray.3}', - $type: 'color', - alpha: 0.5, - }, - tapFocusBg: { - $value: '{base.color.blue.1}', - $type: 'color', - }, - }, - header: { - text: { - $value: '{base.color.white}', - $type: 'color', - alpha: 0.7, - }, - bg: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - divider: { - $value: '{base.color.gray.6}', - $type: 'color', - }, - logo: { - $value: '{base.color.white}', - $type: 'color', - }, - }, - headerSearch: { - bg: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - border: { - $value: '{base.color.gray.6}', - $type: 'color', - }, - }, - sidenav: { - selectedBg: { - $value: '{base.color.white}', - $type: 'color', - }, - }, - menu: { - bgActive: { - $value: '{base.color.transparent}', - $type: 'color', - }, - }, - input: { - disabledBg: { - $value: '{color.neutral.muted}', - $type: 'color', - }, - }, - timeline: { - badgeBg: { - $value: '{base.color.gray.1}', - $type: 'color', - }, - }, - btn: { - text: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - bg: { - $value: '{base.color.gray.0}', - $type: 'color', - }, - border: { - $value: '{color.border.subtle}', - $type: 'color', - }, - hover: { - bg: { - $value: '#f3f4f6', - $type: 'color', - }, - }, - hoverBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - activeBg: { - $value: '#ebecf0', - $type: 'color', - }, - activeBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - selectedBg: { - $value: '#eeeff2', - $type: 'color', - }, - focusBg: { - $value: '{base.color.gray.0}', - $type: 'color', - }, - focusBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - counterBg: { - $value: '{base.color.black}', - $type: 'color', - alpha: 0.08, - }, - - primary: { - text: { - $value: '{base.color.white}', - $type: 'color', - }, - bg: { - $value: '{base.color.green.4}', - $type: 'color', - }, - border: { - $value: '{color.border.subtle}', - $type: 'color', - }, - hoverBg: { - $value: '#2c974b', - $type: 'color', - }, - hoverBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - selectedBg: { - $value: '#298e46', - $type: 'color', - }, - disabledText: { - $value: '{base.color.white}', - $type: 'color', - alpha: 0.8, - }, - disabledBg: { - $value: '#94d3a2', - $type: 'color', - }, - disabledBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - focusBg: { - $value: '{base.color.green.4}', - $type: 'color', - }, - focusBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - icon: { - $value: '{base.color.white}', - $type: 'color', - alpha: 0.8, - }, - counterBg: { - $value: '{base.color.white}', - $type: 'color', - alpha: 0.2, - }, - }, - - outline: { - text: { - $value: '{base.color.blue.5}', - $type: 'color', - }, - hoverText: { - $value: '{base.color.white}', - $type: 'color', - }, - hoverBg: { - $value: '{base.color.blue.5}', - $type: 'color', - }, - hoverBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - hoverCounterBg: { - $value: '{base.color.white}', - $type: 'color', - alpha: 0.2, - }, - selectedText: { - $value: '{base.color.white}', - $type: 'color', - }, - selectedBg: { - $value: '#0965ce', - $type: 'color', - }, - selectedBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - disabledText: { - $value: '{base.color.blue.5}', - $type: 'color', - alpha: 0.5, - }, - disabledBg: { - $value: '{base.color.gray.0}', - $type: 'color', - }, - disabledCounterBg: { - $value: '{base.color.blue.5}', - $type: 'color', - alpha: 0.05, - }, - focusBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - counterBg: { - $value: '{base.color.blue.5}', - $type: 'color', - alpha: 0.1, - }, - }, - - danger: { - text: { - $value: '{base.color.red.5}', - $type: 'color', - }, - hoverText: { - $value: '{base.color.white}', - $type: 'color', - }, - hoverBg: { - $value: '{base.color.red.6}', - $type: 'color', - }, - hoverBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - hoverCounterBg: { - $value: '{base.color.white}', - $type: 'color', - alpha: 0.2, - }, - selectedText: { - $value: '{base.color.white}', - $type: 'color', - }, - selectedBg: { - $value: '#c11f2a', - $type: 'color', - }, - selectedBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - disabledText: { - $value: '{base.color.red.5}', - $type: 'color', - alpha: 0.5, - }, - disabledBg: { - $value: '{base.color.gray.0}', - $type: 'color', - }, - disabledCounterBg: { - $value: '{base.color.red.5}', - $type: 'color', - alpha: 0.05, - }, - focusBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - counterBg: { - $value: '{base.color.red.5}', - $type: 'color', - alpha: 0.1, - }, - icon: { - $value: '{base.color.red.5}', - $type: 'color', - }, - hoverIcon: { - $value: '{base.color.white}', - $type: 'color', - }, - }, - }, - underlinenav: { - icon: { - $value: '{color.fg.subtle}', - $type: 'color', - }, - borderHover: { - $value: '{color.neutral.muted}', - $type: 'color', - }, - }, - - actionListItem: { - inlineDivider: { - $value: '{color.border.default}', - $type: 'color', - alpha: 0.48, - }, - - default: { - hoverBg: { - $value: '{base.color.gray.2}', - $type: 'color', - alpha: 0.32, - }, - hoverBorder: { - $value: '{base.color.transparent}', - $type: 'color', - }, - activeBg: { - $value: '{base.color.gray.2}', - $type: 'color', - alpha: 0.48, - }, - activeBorder: { - $value: '{base.color.transparent}', - $type: 'color', - }, - selectedBg: { - $value: '{base.color.gray.2}', - $type: 'color', - alpha: 0.24, - }, - }, - danger: { - hoverBg: { - $value: '{color.danger.subtle}', - $type: 'color', - alpha: 0.64, - }, - activeBg: { - $value: '{color.danger.subtle}', - $type: 'color', - }, - hoverText: { - $value: '{color.danger.fg}', - $type: 'color', - }, - }, - }, - - switchTrack: { - bg: { - $value: '{base.color.gray.1}', - $type: 'color', - }, - border: { - $value: '{base.color.gray.3}', - $type: 'color', - }, - - checked: { - bg: { - $value: '{base.color.blue.0}', - $type: 'color', - }, - hoverBg: { - $value: '{base.color.blue.1}', - $type: 'color', - }, - activeBg: { - $value: '{base.color.blue.2}', - $type: 'color', - }, - border: { - $value: '{base.color.blue.3}', - $type: 'color', - }, - }, - }, - - switchKnob: { - checked: { - bg: { - $value: '{base.color.blue.5}', - $type: 'color', - }, - disabledBg: { - $value: '{base.color.gray.5}', - $type: 'color', - }, - }, - }, - - segmentedControl: { - bg: { - $value: '{base.color.gray.1}', - $type: 'color', - }, - - button: { - hover: { - bg: { - $value: '{base.color.gray.3}', - $type: 'color', - alpha: 0.2, - }, - }, - - active: { - bg: { - $value: '{base.color.gray.3}', - $type: 'color', - alpha: 0.4, - }, - }, - - selected: { - border: { - $value: '{base.color.gray.5}', - $type: 'color', - }, - }, - }, - }, - }, -} diff --git a/src/tokens/functional/color/light/diff-light.json5 b/src/tokens/functional/color/light/diff-light.json5 deleted file mode 100644 index 12eb408a1..000000000 --- a/src/tokens/functional/color/light/diff-light.json5 +++ /dev/null @@ -1,76 +0,0 @@ -{ - color: { - diffBlob: { - addition: { - numText: { - $value: '{color.fg.default}', - $type: 'color', - }, - fg: { - $value: '{color.fg.default}', - $type: 'color', - }, - numBg: { - $value: '#ccffd8', - $type: 'color', - }, - lineBg: { - $value: '#e6ffec', - $type: 'color', - }, - wordBg: { - $value: '#abf2bc', - $type: 'color', - }, - }, - deletion: { - numText: { - $value: '{color.fg.default}', - $type: 'color', - }, - fg: { - $value: '{color.fg.default}', - $type: 'color', - }, - numBg: { - $value: '#ffd7d5', - $type: 'color', - }, - lineBg: { - $value: '{color.danger.subtle}', - $type: 'color', - }, - wordBg: { - $value: '{color.danger.muted}', - $type: 'color', - }, - }, - hunk: { - numBg: { - $value: '{color.accent.muted}', - $type: 'color', - }, - }, - expander: { - icon: { - $value: '{color.fg.muted}', - $type: 'color', - }, - }, - }, - diffstat: { - deletionBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - additionBorder: { - $value: '{color.border.subtle}', - $type: 'color', - }, - additionBg: { - $value: '{base.color.green.4}', - $type: 'color', - }, - }, - }, -} diff --git a/src/tokens/functional/color/light/misc-light.json5 b/src/tokens/functional/color/light/misc-light.json5 deleted file mode 100644 index 00ae20155..000000000 --- a/src/tokens/functional/color/light/misc-light.json5 +++ /dev/null @@ -1,37 +0,0 @@ -{ - color: { - page: { - header: { - bg: { - $value: '{color.canvas.subtle}', - $type: 'color', - }, - }, - }, - searchKeyword: { - hl: { - $value: '{base.color.yellow.0}', - $type: 'color', - }, - }, - project: { - headerBg: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - sidebarBg: { - $value: '{base.color.white}', - $type: 'color', - }, - gradientIn: { - $value: '{base.color.white}', - $type: 'color', - }, - gradientOut: { - $value: '{base.color.white}', - $type: 'color', - alpha: 0, - }, - }, - }, -} 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 b4a82d5f2..6b3ea71b3 100644 --- a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +++ b/src/tokens/functional/color/light/overrides/light.high-contrast.json5 @@ -4,329 +4,353 @@ * @description All overwrites for functional color tokens for light high contrast color mode are in this file */ { - color: { - fg: { - muted: { - $value: '{base.color.gray.9}', - $type: 'color', - }, + fgColor: { + muted: { + $value: '{base.color.gray.9}', + $type: 'color', + mix: null, }, - canvas: { - inset: { - $value: '{base.color.white}', - $type: 'color', - }, - subtle: { - $value: '{base.color.gray.1}', - $type: 'color', - }, + danger: { + $value: '{base.color.red.6}', + $type: 'color', }, - border: { - default: { - $value: '{base.color.gray.8}', - $type: 'color', - }, + accent: { + $value: '{base.color.blue.6}', + $type: 'color', + }, + }, + bgColor: { + muted: { + $value: '{base.color.gray.1}', + $type: 'color', + }, + neutral: { muted: { - $value: '{base.color.gray.4}', + $value: '{base.color.gray.1}', $type: 'color', + alpha: 1, }, - subtle: { - $value: '{base.color.black}', + }, + disabled: { + $value: '{base.color.gray.1}', + $type: 'color', + }, + success: { + emphasis: { + $value: '{base.color.green.5}', $type: 'color', - alpha: 0.8, + mix: null, }, }, - neutral: { - subtle: { - $value: '{base.color.gray.1}', + attention: { + emphasis: { + $value: '{base.color.yellow.5}', $type: 'color', }, }, + }, + borderColor: { + default: { + $value: '{base.color.gray.8}', + $type: 'color', + }, + muted: { + $value: '{base.color.gray.4}', + $type: 'color', + alpha: 1, + }, accent: { muted: { $value: '{base.color.blue.3}', $type: 'color', + alpha: 1, }, }, success: { - emphasis: { - $value: '{base.color.green.5}', - $type: 'color', - }, muted: { $value: '{base.color.green.3}', $type: 'color', + alpha: 1, }, - }, - attention: { emphasis: { - $value: '{base.color.yellow.5}', + $value: '{base.color.green.5}', $type: 'color', }, + }, + attention: { muted: { $value: '{base.color.yellow.3}', $type: 'color', + alpha: 1, + }, + emphasis: { + $value: '{base.color.yellow.5}', + $type: 'color', }, }, severe: { muted: { $value: '{base.color.orange.3}', $type: 'color', + alpha: 1, }, }, danger: { muted: { $value: '{base.color.red.3}', $type: 'color', + alpha: 1, }, }, done: { muted: { $value: '{base.color.purple.3}', $type: 'color', + alpha: 1, }, }, sponsors: { muted: { $value: '{base.color.pink.3}', $type: 'color', + alpha: 1, }, }, - topicTag: { - border: { - $value: '{color.accent.emphasis}', - $type: 'color', - }, + }, + // patterns + topicTag: { + borderColor: { + $value: '{borderColor.accent.emphasis}', + $type: 'color', }, - counter: { - border: { - $value: '{color.border.default}', - $type: 'color', - }, + }, + counter: { + borderColor: { + $value: '{borderColor.default}', + $type: 'color', }, - btn: { - bg: { + }, + control: { + bgColor: { + rest: { $value: '{base.color.gray.1}', $type: 'color', }, - border: { - $value: '{color.border.subtle}', - $type: 'color', - }, hover: { - bg: { - $value: '{base.color.gray.2}', - $type: 'color', + $value: '{base.color.gray.1}', + $type: 'color', + mix: { + color: '{base.color.gray.3}', + weight: 0.2, }, }, - activeBg: { - $value: '{base.color.gray.3}', + active: { + $value: '{base.color.gray.1}', $type: 'color', + mix: { + color: '{base.color.gray.3}', + weight: 0.4, + }, }, - selectedBg: { + selected: { $value: '{base.color.gray.3}', $type: 'color', }, - focusBg: { - $value: '{base.color.gray.2}', + }, + borderColor: { + emphasis: { + $value: '{borderColor.default}', $type: 'color', + mix: null, }, - primary: { - bg: { - $value: '{color.success.emphasis}', - $type: 'color', - }, - border: { - $value: '{base.color.green.7}', - $type: 'color', - }, - hoverBg: { - $value: '{base.color.green.6}', - $type: 'color', - }, - hoverBorder: { - $value: '{base.color.green.7}', + }, + transparent: { + bgColor: { + hover: { + $value: '{base.color.gray.1}', $type: 'color', + alpha: null, + mix: null, }, - focusBg: { - $value: '{base.color.green.7}', + active: { + $value: '{base.color.gray.2}', $type: 'color', + alpha: null, + mix: null, }, - focusBorder: { - $value: '{base.color.green.7}', + selected: { + $value: '{base.color.gray.2}', $type: 'color', }, }, - outline: { - text: { - $value: '{base.color.blue.6}', - $type: 'color', - }, - hoverBg: { - $value: '{color.accent.emphasis}', - $type: 'color', - }, - hoverBorder: { - $value: '{base.color.blue.7}', - $type: 'color', - }, - selectedBg: { - $value: '{base.color.blue.7}', + borderColor: { + hover: { + $value: '{borderColor.default}', $type: 'color', }, - selectedBorder: { - $value: '{base.color.blue.7}', - $type: 'color', - }, - focusBorder: { - $value: '{base.color.blue.7}', + }, + }, + danger: { + fgColor: { + hover: { + $value: '{fgColor.onEmphasis}', $type: 'color', }, - disabledText: { - $value: '{base.color.blue.5}', + }, + bgColor: { + hover: { + $value: '{bgColor.danger.emphasis}', $type: 'color', - alpha: 0.5, + alpha: null, + mix: null, }, - disabledBg: { - $value: '{base.color.gray.1}', + active: { + $value: '{bgColor.danger.emphasis}', $type: 'color', + alpha: null, + mix: { + color: '{base.color.red.7}', + weight: 0.4, + }, }, }, - danger: { - text: { - $value: '{base.color.red.6}', - $type: 'color', + }, + }, + controlTrack: { + bgColor: { + rest: { + $value: '{base.color.gray.3}', + $type: 'color', + }, + hover: { + $value: '{base.color.gray.3}', + $type: 'color', + mix: { + color: '{base.color.gray.5}', + weight: 0.2, }, - hoverBg: { - $value: '{color.danger.emphasis}', - $type: 'color', + }, + active: { + $value: '{base.color.gray.3}', + $type: 'color', + mix: { + color: '{base.color.gray.5}', + weight: 0.4, }, - hoverBorder: { - $value: '{base.color.red.7}', + }, + disabled: { + $value: '{fgColor.disabled}', + $type: 'color', + }, + }, + fgColor: { + rest: { + $value: '{fgColor.default}', + $type: 'color', + }, + }, + }, + button: { + default: { + borderColor: { + rest: { + $value: '{borderColor.default}', $type: 'color', }, - selectedBg: { - $value: '{base.color.red.7}', + hover: { + $value: '{borderColor.default}', $type: 'color', }, - selectedBorder: { - $value: '{base.color.red.7}', + active: { + $value: '{borderColor.default}', $type: 'color', }, - focusBorder: { - $value: '{base.color.red.7}', + }, + }, + primary: { + bgColor: { + rest: { + $value: '{base.color.green.5}', $type: 'color', }, - disabledBg: { - $value: '{base.color.gray.1}', + hover: { + $value: '{base.color.green.5}', $type: 'color', + mix: { + color: '{base.color.green.7}', + weight: 0.2, + }, }, - icon: { - $value: '{base.color.red.6}', + active: { + $value: '{base.color.green.5}', $type: 'color', + mix: { + color: '{base.color.green.7}', + weight: 0.4, + }, }, }, - }, - diffBlob: { - addition: { - fg: { - $value: '{color.fg.onEmphasis}', + borderColor: { + rest: { + $value: '{base.color.green.7}', $type: 'color', + alpha: 1, }, - wordBg: { - $value: '{color.success.emphasis}', + hover: { + $value: '{base.color.green.7}', $type: 'color', + alpha: 1, }, }, - deletion: { - fg: { - $value: '{color.fg.onEmphasis}', - $type: 'color', - }, - wordBg: { - $value: '{color.danger.emphasis}', + }, + }, + diffBlob: { + addition: { + fgColor: { + text: { + $value: '{fgColor.onEmphasis}', $type: 'color', }, }, - hunk: { - numBg: { - $value: '{base.color.blue.1}', + bgColor: { + word: { + $value: '{base.color.green.4}', $type: 'color', }, }, }, - header: { - divider: { - $value: '{base.color.gray.3}', - $type: 'color', - }, - }, - actionListItem: { - inlineDivider: { - $value: '{color.border.muted}', - $type: 'color', - }, - default: { - hoverBg: { - $value: '{base.color.gray.1}', - $type: 'color', - }, - hoverBorder: { - $value: '{color.border.muted}', - $type: 'color', - }, - activeBg: { - $value: '{base.color.gray.2}', - $type: 'color', - }, - activeBorder: { - $value: '{color.border.default}', - $type: 'color', - }, - selectedBg: { - $value: '{base.color.gray.2}', + deletion: { + fgColor: { + text: { + $value: '{fgColor.onEmphasis}', $type: 'color', }, }, - danger: { - hoverBg: { - $value: '{color.danger.emphasis}', - $type: 'color', - }, - activeBg: { - $value: '{base.color.red.7}', - $type: 'color', - }, - hoverText: { - $value: '{color.fg.onEmphasis}', + bgColor: { + word: { + $value: '{base.color.red.5}', $type: 'color', + mix: null, + alpha: 1, }, }, }, - page: { - header: { - bg: { - $value: '{color.canvas.default}', + hunk: { + bgColor: { + num: { + $value: '{base.color.blue.1}', $type: 'color', + alpha: 1, }, }, }, - switchTrack: { - bg: { - $value: '{base.color.white}', - $type: 'color', - }, - border: { - $value: '{color.border.default}', + }, + header: { + borderColor: { + divider: { + $value: '{base.color.gray.3}', $type: 'color', }, - - checked: { - border: { - $value: '{base.color.blue.5}', - $type: 'color', - }, - }, }, }, } 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 6fb258610..4b2cc1f95 100644 --- a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 @@ -4,89 +4,103 @@ * @description All overwrites for functional color tokens for light protanopia and deuteranopia color mode are in this file */ { - color: { + fgColor: { open: { - fg: { - $value: '{base.color.orange.5}', + $value: '{base.color.orange.5}', + $type: 'color', + }, + closed: { + $value: '{base.color.gray.5}', + $type: 'color', + }, + }, + bgColor: { + open: { + muted: { + $value: '{base.color.orange.3}', $type: 'color', + alpha: 0.4, }, emphasis: { $value: '{base.color.orange.4}', $type: 'color', }, + }, + closed: { muted: { - $value: '{base.color.orange.3}', + $value: '{base.color.gray.3}', $type: 'color', alpha: 0.4, }, - subtle: { - $value: '{base.color.orange.0}', + emphasis: { + $value: '{base.color.gray.5}', $type: 'color', }, }, - closed: { - fg: { - $value: '{base.color.gray.5}', + }, + borderColor: { + open: { + muted: { + $value: '{base.color.orange.3}', $type: 'color', + alpha: 0.4, }, emphasis: { - $value: '{base.color.gray.5}', + $value: '{base.color.orange.4}', $type: 'color', }, + }, + closed: { muted: { $value: '{base.color.gray.3}', $type: 'color', alpha: 0.4, }, - subtle: { - $value: '{base.color.gray.0}', + emphasis: { + $value: '{base.color.gray.5}', $type: 'color', }, }, - diffBlob: { - addition: { - numBg: { - $value: '{color.success.muted}', + }, + diffBlob: { + addition: { + bgColor: { + num: { + $value: '{base.color.green.3}', $type: 'color', + mix: null, + alpha: 0.4, }, - lineBg: { + line: { $value: '{base.color.green.0}', $type: 'color', alpha: 0.5, }, - wordBg: { - $value: '{color.success.muted}', + word: { + $value: '{base.color.green.3}', $type: 'color', + alpha: 0.4, }, }, - deletion: { - numBg: { - $value: '{color.danger.muted}', + }, + deletion: { + bgColor: { + num: { + $value: '{base.color.red.3}', $type: 'color', + alpha: 0.4, }, - lineBg: { + line: { $value: '{base.color.red.0}', $type: 'color', alpha: 0.5, }, - wordBg: { + word: { $value: '{base.color.red.2}', $type: 'color', alpha: 0.5, }, }, }, - btn: { - primary: { - hoverBg: { - $value: '{base.color.green.5}', - $type: 'color', - }, - disabledBg: { - $value: '{base.color.green.2}', - $type: 'color', - }, - }, - }, }, } diff --git a/src/tokens/functional/color/light/overrides/light.tritanopia.json5 b/src/tokens/functional/color/light/overrides/light.tritanopia.json5 deleted file mode 100644 index 7e270ea7b..000000000 --- a/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +++ /dev/null @@ -1,92 +0,0 @@ -/** - * Dark tritanopia - * @extends all functional tokens - * @description All overwrites for functional color tokens for light tritanopia color mode are in this file - */ -{ - color: { - open: { - fg: { - $value: '{base.color.orange.5}', - $type: 'color', - }, - emphasis: { - $value: '{base.color.orange.4}', - $type: 'color', - }, - muted: { - $value: '{base.color.orange.3}', - $type: 'color', - alpha: 0.4, - }, - subtle: { - $value: '{base.color.orange.0}', - $type: 'color', - }, - }, - closed: { - fg: { - $value: '{base.color.gray.5}', - $type: 'color', - }, - emphasis: { - $value: '{base.color.gray.5}', - $type: 'color', - }, - muted: { - $value: '{base.color.gray.3}', - $type: 'color', - alpha: 0.4, - }, - subtle: { - $value: '{base.color.gray.0}', - $type: 'color', - }, - }, - diffBlob: { - addition: { - numBg: { - $value: '{color.success.muted}', - $type: 'color', - }, - lineBg: { - $value: '{base.color.green.0}', - $type: 'color', - alpha: 0.5, - }, - wordBg: { - $value: '{color.success.muted}', - $type: 'color', - }, - }, - deletion: { - numBg: { - $value: '{color.danger.muted}', - $type: 'color', - }, - lineBg: { - $value: '{base.color.red.0}', - $type: 'color', - alpha: 0.5, - }, - wordBg: { - $value: '{base.color.red.2}', - $type: 'color', - alpha: 0.5, - }, - }, - }, - btn: { - primary: { - hoverBg: { - $value: '{base.color.green.5}', - $type: 'color', - }, - disabledBg: { - $value: '{base.color.green.2}', - $type: 'color', - }, - }, - }, - }, -} diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5 new file mode 100644 index 000000000..099ef565e --- /dev/null +++ b/src/tokens/functional/color/light/patterns-light.json5 @@ -0,0 +1,753 @@ +{ + avatar: { + bgColor: { + $value: '{base.color.white}', + $type: 'color', + }, + borderColor: { + $value: '{borderColor.default}', + $type: 'color', + }, + }, + avatarStack: { + fade: { + bgColor: { + default: { + $value: '{base.color.gray.3}', + $type: 'color', + }, + muted: { + $value: '{base.color.gray.2}', + $type: 'color', + }, + }, + }, + }, + control: { + bgColor: { + rest: { + $value: '{base.color.gray.0}', + $type: 'color', + }, + hover: { + $value: '{base.color.gray.0}', + $type: 'color', + mix: { + color: '{base.color.gray.2}', + weight: 0.2, + }, + }, + active: { + $value: '{base.color.gray.0}', + $type: 'color', + mix: { + color: '{base.color.gray.2}', + weight: 0.4, + }, + }, + disabled: { + $value: '{bgColor.disabled}', + $type: 'color', + }, + selected: { + $value: '{base.color.gray.0}', + $type: 'color', + }, + }, + fgColor: { + rest: { + $value: '{base.color.gray.9}', + $type: 'color', + }, + placeholder: { + $value: '{base.color.gray.5}', + $type: 'color', + }, + disabled: { + $value: '{fgColor.disabled}', + $type: 'color', + }, + }, + borderColor: { + rest: { + $value: '{borderColor.default}', + $type: 'color', + }, + emphasis: { + $value: '{base.color.gray.4}', + $type: 'color', + mix: { + color: '{base.color.gray.5}', + weight: 0.2, + }, + }, + disabled: { + $value: '{borderColor.disabled}', + $type: 'color', + }, + selected: { + $value: '{base.color.gray.0}', + $type: 'color', + }, + success: { + $value: '{borderColor.success.emphasis}', + $type: 'color', + }, + danger: { + $value: '{borderColor.danger.emphasis}', + $type: 'color', + }, + warning: { + $value: '{borderColor.attention.emphasis}', + $type: 'color', + }, + }, + iconColor: { + rest: { + $value: '{fgColor.muted}', + $type: 'color', + }, + }, + transparent: { + bgColor: { + rest: { + $value: 'transparent', + $type: 'color', + }, + hover: { + $value: '{base.color.gray.2}', + $type: 'color', + alpha: 0.2, + }, + active: { + $value: '{base.color.gray.2}', + $type: 'color', + alpha: 0.4, + }, + disabled: { + $value: '{control.bgColor.disabled}', + $type: 'color', + }, + selected: { + $value: '{base.color.gray.0}', + $type: 'color', + }, + }, + borderColor: { + rest: { + $value: 'transparent', + $type: 'color', + }, + hover: { + $value: 'transparent', + $type: 'color', + }, + active: { + $value: 'transparent', + $type: 'color', + }, + }, + }, + danger: { + fgColor: { + rest: { + $value: '{fgColor.danger}', + $type: 'color', + }, + hover: { + $value: '{fgColor.danger}', + $type: 'color', + }, + }, + bgColor: { + hover: { + $value: '{bgColor.danger.muted}', + $type: 'color', + }, + active: { + $value: '{bgColor.danger.muted}', + $type: 'color', + alpha: 0.4, + }, + }, + }, + checked: { + bgColor: { + rest: { + $value: '{bgColor.accent.emphasis}', + $type: 'color', + }, + hover: { + $value: '{bgColor.accent.emphasis}', + $type: 'color', + mix: { + color: '{base.color.blue.7}', + weight: 0.2, + }, + }, + active: { + $value: '{bgColor.accent.emphasis}', + $type: 'color', + mix: { + color: '{base.color.blue.7}', + weight: 0.4, + }, + }, + disabled: { + $value: '{fgColor.disabled}', + $type: 'color', + }, + }, + fgColor: { + rest: { + $value: '{fgColor.onEmphasis}', + $type: 'color', + }, + disabled: { + $value: '{fgColor.onEmphasis}', + $type: 'color', + }, + }, + borderColor: { + rest: { + $value: '{bgColor.accent.emphasis}', + $type: 'color', + }, + hover: { + $value: 'transparent', + $type: 'color', + }, + active: { + $value: 'transparent', + $type: 'color', + }, + disabled: { + $value: '{fgColor.disabled}', + $type: 'color', + }, + }, + }, + }, + controlTrack: { + bgColor: { + rest: { + $value: '{base.color.gray.1}', + $type: 'color', + }, + hover: { + $value: '{base.color.gray.1}', + $type: 'color', + mix: { + color: '{base.color.gray.3}', + weight: 0.2, + }, + }, + active: { + $value: '{base.color.gray.1}', + $type: 'color', + mix: { + color: '{base.color.gray.3}', + weight: 0.4, + }, + }, + disabled: { + $value: '{fgColor.disabled}', + $type: 'color', + }, + }, + fgColor: { + rest: { + $value: '{fgColor.muted}', + $type: 'color', + }, + disabled: { + $value: '{fgColor.onEmphasis}', + $type: 'color', + }, + }, + borderColor: { + rest: { + $value: 'transparent', + $type: 'color', + }, + disabled: { + $value: '{fgColor.disabled}', + $type: 'color', + }, + }, + }, + controlKnob: { + bgColor: { + rest: { + $value: '{base.color.white}', + $type: 'color', + }, + disabled: { + $value: '{control.bgColor.disabled}', + $type: 'color', + }, + checked: { + $value: '{base.color.white}', + $type: 'color', + }, + }, + borderColor: { + rest: { + $value: '{control.borderColor.emphasis}', + $type: 'color', + }, + disabled: { + $value: '{control.bgColor.disabled}', + $type: 'color', + }, + checked: { + $value: '{control.checked.bgColor.rest}', + $type: 'color', + }, + }, + }, + counter: { + borderColor: { + $value: '{base.color.transparent}', + $type: 'color', + }, + }, + button: { + default: { + fgColor: { + rest: { + $value: '{control.fgColor.rest}', + $type: 'color', + }, + }, + bgColor: { + rest: { + $value: '{control.bgColor.rest}', + $type: 'color', + }, + hover: { + $value: '{control.bgColor.hover}', + $type: 'color', + }, + active: { + $value: '{control.bgColor.active}', + $type: 'color', + }, + selected: { + $value: '{control.bgColor.active}', + $type: 'color', + }, + }, + borderColor: { + rest: { + $value: '{borderColor.default}', + $type: 'color', + }, + hover: { + $value: '{borderColor.default}', + $type: 'color', + }, + active: { + $value: '{borderColor.default}', + $type: 'color', + }, + }, + }, + primary: { + fgColor: { + rest: { + $value: '{base.color.white}', + $type: 'color', + }, + disabled: { + $value: '{base.color.white}', + $type: 'color', + alpha: 0.8, + }, + }, + iconColor: { + rest: { + $value: '{base.color.white}', + $type: 'color', + alpha: 0.8, + }, + }, + bgColor: { + rest: { + $value: '{bgColor.success.emphasis}', + $type: 'color', + }, + hover: { + $value: '{bgColor.success.emphasis}', + $type: 'color', + mix: { + color: '{base.color.green.6}', + weight: 0.2, + }, + }, + active: { + $value: '{bgColor.success.emphasis}', + $type: 'color', + mix: { + color: '{base.color.green.6}', + weight: 0.4, + }, + }, + disabled: { + $value: '{base.color.green.4}', + $type: 'color', + mix: { + color: '{base.color.green.0}', + weight: 0.6, + }, + }, + }, + borderColor: { + rest: { + $value: '{borderColor.muted}', + $type: 'color', + alpha: 0.8, + }, + hover: { + $value: '{borderColor.muted}', + $type: 'color', + alpha: 0.8, + }, + disabled: { + $value: '{borderColor.muted}', + $type: 'color', + alpha: 0.8, + }, + }, + }, + invisible: { + fgColor: { + rest: { + $value: '{fgColor.accent}', + $type: 'color', + }, + disabled: { + $value: '{control.fgColor.disabled}', + $type: 'color', + }, + }, + bgColor: { + rest: { + $value: '{control.transparent.bgColor.rest}', + $type: 'color', + }, + hover: { + $value: '{control.transparent.bgColor.hover}', + $type: 'color', + }, + active: { + $value: '{control.transparent.bgColor.active}', + $type: 'color', + }, + disabled: { + $value: '{control.transparent.bgColor.disabled}', + $type: 'color', + }, + }, + borderColor: { + rest: { + $value: '{control.transparent.borderColor.rest}', + $type: 'color', + }, + hover: { + $value: '{control.transparent.borderColor.hover}', + $type: 'color', + }, + }, + }, + outline: { + fgColor: { + rest: { + $value: '{fgColor.accent}', + $type: 'color', + }, + hover: { + $value: '{base.color.white}', + $type: 'color', + }, + active: { + $value: '{base.color.white}', + $type: 'color', + }, + disabled: { + $value: '{fgColor.accent}', + $type: 'color', + alpha: 0.5, + }, + }, + bgColor: { + rest: { + $value: '{control.bgColor.rest}', + $type: 'color', + }, + hover: { + $value: '{bgColor.accent.emphasis}', + $type: 'color', + }, + active: { + $value: '{bgColor.accent.emphasis}', + $type: 'color', + mix: { + color: '{base.color.blue.7}', + weight: 0.4, + }, + }, + disabled: { + $value: '{base.color.gray.0}', + $type: 'color', + }, + }, + borderColor: { + hover: { + $value: '{borderColor.default}', + $type: 'color', + }, + active: { + $value: '{borderColor.default}', + $type: 'color', + }, + }, + }, + danger: { + fgColor: { + rest: { + $value: '{fgColor.danger}', + $type: 'color', + }, + hover: { + $value: '{base.color.white}', + $type: 'color', + }, + active: { + $value: '{base.color.white}', + $type: 'color', + }, + disabled: { + $value: '{fgColor.danger}', + $type: 'color', + alpha: 0.5, + }, + }, + iconColor: { + rest: { + $value: '{fgColor.danger}', + $type: 'color', + }, + hover: { + $value: '{base.color.white}', + $type: 'color', + }, + }, + bgColor: { + rest: { + $value: '{control.bgColor.rest}', + $type: 'color', + }, + hover: { + $value: '{base.color.red.6}', + $type: 'color', + }, + active: { + $value: '{base.color.red.6}', + $type: 'color', + mix: { + color: '{base.color.red.8}', + weight: 0.4, + }, + }, + disabled: { + $value: '{control.bgColor.disabled}', + $type: 'color', + }, + }, + borderColor: { + rest: { + $value: '{borderColor.default}', + $type: 'color', + }, + hover: { + $value: '{borderColor.default}', + $type: 'color', + }, + active: { + $value: '{borderColor.default}', + $type: 'color', + }, + }, + }, + }, + buttonCounter: { + default: { + bgColor: { + rest: { + $value: '{bgColor.neutral.muted}', + $type: 'color', + }, + }, + }, + primary: { + bgColor: { + rest: { + $value: '{base.color.white}', + $type: 'color', + alpha: 0.2, + }, + }, + }, + outline: { + bgColor: { + rest: { + $value: '{bgColor.accent.emphasis}', + $type: 'color', + alpha: 0.1, + }, + hover: { + $value: '{base.color.white}', + $type: 'color', + alpha: 0.2, + }, + disabled: { + $value: '{bgColor.accent.emphasis}', + $type: 'color', + alpha: 0.05, + }, + }, + }, + danger: { + bgColor: { + hover: { + $value: '{base.color.white}', + $type: 'color', + alpha: 0.2, + }, + disabled: { + $value: '{bgColor.danger.emphasis}', + $type: 'color', + alpha: 0.05, + }, + rest: { + $value: '{bgColor.danger.emphasis}', + $type: 'color', + alpha: 0.1, + }, + }, + }, + }, + focus: { + outlineColor: { + $value: '{borderColor.accent.emphasis}', + $type: 'color', + }, + }, + header: { + bgColor: { + $value: '{base.color.gray.9}', + $type: 'color', + }, + fgColor: { + text: { + $value: '{base.color.white}', + $type: 'color', + alpha: 0.7, + }, + logo: { + $value: '{base.color.white}', + $type: 'color', + }, + borderColor: { + $value: '{base.color.gray.6}', + $type: 'color', + }, + }, + }, + headerSearch: { + bgColor: { + $value: '{base.color.gray.9}', + $type: 'color', + }, + borderColor: { + $value: '{base.color.gray.6}', + $type: 'color', + }, + }, + menu: { + bgColor: { + active: { + $value: '{base.color.transparent}', + $type: 'color', + }, + }, + }, + overlay: { + bgColor: { + $value: '{base.color.white}', + $type: 'color', + }, + backdrop: { + bgColor: { + $value: '{base.color.gray.4}', + $type: 'color', + alpha: 0.2, + }, + }, + }, + selectMenu: { + borderColor: { + $value: '{base.color.transparent}', + $type: 'color', + }, + bgColor: { + active: { + $value: '{base.color.blue.1}', + $type: 'color', + }, + }, + }, + sideNav: { + bgColor: { + selected: { + $value: '{base.color.white}', + $type: 'color', + }, + }, + }, + timelineBadge: { + bgColor: { + $value: '{base.color.gray.1}', + $type: 'color', + }, + }, + treeViewItem: { + leadingVisual: { + bgColor: { + rest: { + $value: '{base.color.blue.3}', + $type: 'color', + }, + }, + }, + }, + underlineNav: { + borderColor: { + active: { + $value: '{base.color.coral.3}', + $type: 'color', + }, + hover: { + $value: '{borderColor.neutral.muted}', + $type: 'color', + }, + }, + iconColor: { + rest: { + $value: '{fgColor.muted}', + $type: 'color', + }, + }, + }, +} diff --git a/src/tokens/functional/color/light/primitives-light.json5 b/src/tokens/functional/color/light/primitives-light.json5 index 3ca907311..e598c0bf4 100644 --- a/src/tokens/functional/color/light/primitives-light.json5 +++ b/src/tokens/functional/color/light/primitives-light.json5 @@ -1,54 +1,35 @@ { - color: { - fg: { - default: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - muted: { - $value: '{base.color.gray.6}', - $type: 'color', - }, - subtle: { - $value: '{base.color.gray.5}', - $type: 'color', - }, - onEmphasis: { - $value: '{base.color.white}', - $type: 'color', - }, + fgColor: { + default: { + $value: '{base.color.black}', + $type: 'color', }, - canvas: { - default: { - $value: '{base.color.white}', - $type: 'color', - }, - overlay: { - $value: '{base.color.white}', - $type: 'color', - }, - inset: { - $value: '{base.color.gray.0}', - $type: 'color', - }, - subtle: { - $value: '{base.color.gray.0}', - $type: 'color', + muted: { + $value: '{base.color.gray.6}', + $type: 'color', + mix: { + color: '{base.color.gray.5}', + weight: 0.5, }, }, - border: { - default: { - $value: '{base.color.gray.2}', - $type: 'color', - }, - muted: { - $value: '#d8dee4', + onEmphasis: { + $value: '{base.color.white}', + $type: 'color', + }, + disabled: { + $value: '{base.color.gray.4}', + $type: 'color', + }, + link: { + rest: { + $value: '{fgColor.accent}', $type: 'color', }, - subtle: { - $value: '{base.color.black}', - $type: 'color', - alpha: 0.15, + inverse: { + rest: { + $value: '{base.color.blue.3}', + $type: 'color', + }, }, control: { $value: '{base.color.gray.4}', @@ -59,263 +40,292 @@ }, }, }, + accent: { + $value: '{base.color.blue.5}', + $type: 'color', + }, + success: { + $value: '{base.color.green.5}', + $type: 'color', + }, + attention: { + $value: '{base.color.yellow.5}', + $type: 'color', + }, + severe: { + $value: '{base.color.orange.5}', + $type: 'color', + }, + danger: { + $value: '{base.color.red.5}', + $type: 'color', + }, + open: { + $value: '{fgColor.success}', + $type: 'color', + }, + closed: { + $value: '{base.color.red.5}', + $type: 'color', + }, + done: { + $value: '{base.color.purple.5}', + $type: 'color', + }, + sponsors: { + $value: '{base.color.pink.5}', + $type: 'color', + }, + }, + bgColor: { + default: { + $value: '{base.color.white}', + $type: 'color', + }, + muted: { + $value: '{base.color.gray.0}', + $type: 'color', + }, + emphasis: { + $value: '{base.color.gray.9}', + $type: 'color', + }, + disabled: { + $value: '{base.color.gray.0}', + $type: 'color', + }, neutral: { - emphasisPlus: { - $value: '{base.color.gray.9}', + muted: { + $value: '{base.color.gray.1}', $type: 'color', + alpha: 0.5, }, emphasis: { $value: '{base.color.gray.5}', $type: 'color', }, - muted: { - $value: '{base.color.gray.3}', - alpha: 0.2, - $type: 'color', - }, - subtle: { - $value: '{base.color.gray.1}', - alpha: 0.5, - $type: 'color', - }, }, accent: { - fg: { - $value: '{base.color.blue.5}', + muted: { + $value: '{base.color.blue.0}', $type: 'color', }, emphasis: { $value: '{base.color.blue.5}', $type: 'color', }, - muted: { - $value: '{base.color.blue.3}', - alpha: 0.4, - $type: 'color', - }, - subtle: { - $value: '{base.color.blue.0}', - $type: 'color', - }, }, success: { - fg: { - $value: '{base.color.green.5}', + muted: { + $value: '{base.color.green.0}', $type: 'color', }, emphasis: { $value: '{base.color.green.4}', $type: 'color', - }, - muted: { - $value: '{base.color.green.3}', - alpha: 0.4, - $type: 'color', - }, - subtle: { - $value: '{base.color.green.0}', - $type: 'color', + mix: { + color: '{base.color.green.5}', + weight: 0.75, + }, }, }, attention: { - fg: { - $value: '{base.color.yellow.5}', + muted: { + $value: '{base.color.yellow.0}', $type: 'color', }, emphasis: { $value: '{base.color.yellow.4}', $type: 'color', }, + }, + severe: { muted: { - $value: '{base.color.yellow.3}', - alpha: 0.4, + $value: '{base.color.orange.0}', $type: 'color', }, - subtle: { - $value: '{base.color.yellow.0}', + emphasis: { + $value: '{base.color.orange.5}', $type: 'color', }, }, - severe: { - fg: { - $value: '{base.color.orange.5}', + danger: { + muted: { + $value: '{base.color.red.0}', $type: 'color', }, emphasis: { - $value: '{base.color.orange.5}', + $value: '{base.color.red.5}', $type: 'color', }, + }, + open: { muted: { - $value: '{base.color.orange.3}', - alpha: 0.4, + $value: '{bgColor.success.muted}', $type: 'color', }, - subtle: { - $value: '{base.color.orange.0}', + emphasis: { + $value: '{bgColor.success.emphasis}', $type: 'color', }, }, - danger: { - fg: { - $value: '{base.color.red.5}', + closed: { + muted: { + $value: '{base.color.red.0}', $type: 'color', }, emphasis: { $value: '{base.color.red.5}', $type: 'color', }, + }, + done: { muted: { - $value: '{base.color.red.3}', - alpha: 0.4, + $value: '{base.color.purple.0}', $type: 'color', }, - subtle: { - $value: '{base.color.red.0}', + emphasis: { + $value: '{base.color.purple.5}', $type: 'color', }, }, - open: { - fg: { - $value: '{base.color.green.5}', + sponsors: { + muted: { + $value: '{base.color.pink.0}', $type: 'color', }, emphasis: { - $value: '{base.color.green.4}', + $value: '{base.color.pink.5}', $type: 'color', }, + }, + }, + borderColor: { + default: { + $value: '{base.color.gray.2}', + $type: 'color', + }, + muted: { + $value: '{borderColor.default}', + $type: 'color', + alpha: 0.4, + }, + emphasis: { + $value: '{base.color.gray.5}', + $type: 'color', + }, + disabled: { + $value: '{borderColor.default}', + $type: 'color', + }, + neutral: { muted: { - $value: '{base.color.green.3}', - alpha: 0.4, + $value: '{base.color.gray.3}', $type: 'color', + alpha: 0.2, }, - subtle: { - $value: '{base.color.green.0}', + emphasis: { + $value: '{base.color.gray.5}', $type: 'color', }, }, - closed: { - fg: { - $value: '{base.color.red.5}', + accent: { + muted: { + $value: '{base.color.blue.3}', $type: 'color', + alpha: 0.4, }, emphasis: { - $value: '{base.color.red.5}', + $value: '{base.color.blue.5}', $type: 'color', }, + }, + success: { muted: { - $value: '{base.color.red.3}', - alpha: 0.4, + $value: '{base.color.green.3}', $type: 'color', + alpha: 0.4, }, - subtle: { - $value: '{base.color.red.0}', + emphasis: { + $value: '{base.color.green.4}', $type: 'color', }, }, - done: { - fg: { - $value: '{base.color.purple.5}', + attention: { + muted: { + $value: '{base.color.yellow.3}', $type: 'color', + alpha: 0.4, }, emphasis: { - $value: '{base.color.purple.5}', + $value: '{base.color.yellow.4}', $type: 'color', }, + }, + severe: { muted: { - $value: '{base.color.purple.3}', - alpha: 0.4, + $value: '{base.color.orange.3}', $type: 'color', + alpha: 0.4, }, - subtle: { - $value: '{base.color.purple.0}', + emphasis: { + $value: '{base.color.orange.5}', $type: 'color', }, }, - sponsors: { - fg: { - $value: '{base.color.pink.5}', + danger: { + muted: { + $value: '{base.color.red.3}', $type: 'color', + alpha: 0.4, }, emphasis: { - $value: '{base.color.pink.5}', + $value: '{base.color.red.5}', $type: 'color', }, + }, + open: { muted: { - $value: '{base.color.pink.3}', - alpha: 0.4, + $value: '{borderColor.success.muted}', $type: 'color', }, - subtle: { - $value: '{base.color.pink.0}', + emphasis: { + $value: '{borderColor.success.emphasis}', $type: 'color', }, }, - shadow: { - small: { - $value: '{base.color.black}', - alpha: 0.96, + closed: { + muted: { + $value: '{base.color.red.3}', $type: 'color', + alpha: 0.4, }, - medium: { - $value: '{base.color.gray.4}', - alpha: 0.85, + emphasis: { + $value: '{base.color.red.5}', $type: 'color', }, - large: { - $value: '{base.color.gray.4}', - alpha: 0.8, + }, + done: { + muted: { + $value: '{base.color.purple.3}', $type: 'color', + alpha: 0.4, }, - extraLarge: { - $value: '{base.color.gray.4}', - alpha: 0.7, + emphasis: { + $value: '{base.color.purple.5}', $type: 'color', }, - highlight: { - $value: '{base.color.white}', - alpha: 0.75, + }, + sponsors: { + muted: { + $value: '{base.color.pink.3}', $type: 'color', + alpha: 0.4, }, - inset: { - $value: '{base.color.gray.2}', - alpha: 0.8, + emphasis: { + $value: '{base.color.pink.5}', $type: 'color', }, }, - focus: { - $value: '{base.color.blue.5}', - $type: 'color', - }, - primer: { - fg: { - disabled: { - $value: '{base.color.gray.4}', - $type: 'color', - }, - }, - canvas: { - backdrop: { - $value: '{base.color.black}', - alpha: 0.5, - $type: 'color', - }, - sticky: { - $value: '{base.color.white}', - alpha: 0.95, - $type: 'color', - }, - }, - border: { - active: { - $value: '{base.color.coral.3}', - $type: 'color', - }, - contrast: { - $value: '{base.color.black}', - $type: 'color', - alpha: 0.1, - }, - }, - }, }, } diff --git a/src/tokens/functional/color/light/syntax-light.json5 b/src/tokens/functional/color/light/syntax-light.json5 index da864c612..95fbf09e8 100644 --- a/src/tokens/functional/color/light/syntax-light.json5 +++ b/src/tokens/functional/color/light/syntax-light.json5 @@ -1,177 +1,95 @@ { color: { - prettylights: { - syntax: { - comment: { - $value: '{base.color.gray.5}', - $type: 'color', - }, - constant: { - $value: '{base.color.blue.6}', - $type: 'color', - }, - entity: { - $value: '{base.color.purple.5}', - $type: 'color', - }, - storageModifierImport: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - entityTag: { - $value: '{base.color.green.6}', - $type: 'color', - }, - keyword: { - $value: '{base.color.red.5}', - $type: 'color', - }, - string: { - $value: '{base.color.blue.8}', - $type: 'color', - }, - variable: { - $value: '{base.color.orange.6}', - $type: 'color', - }, - brackethighlighterUnmatched: { - $value: '{base.color.red.7}', - $type: 'color', - }, - invalidIllegalText: { - $value: '{base.color.gray.0}', - $type: 'color', - }, - invalidIllegalBg: { - $value: '{base.color.red.7}', - $type: 'color', - }, - carriageReturnText: { - $value: '{base.color.gray.0}', - $type: 'color', - }, - carriageReturnBg: { - $value: '{base.color.red.5}', - $type: 'color', - }, - stringRegexp: { - $value: '{base.color.green.6}', - $type: 'color', - }, - markupList: { - $value: '{base.color.yellow.9}', - $type: 'color', - }, - markupHeading: { - $value: '{base.color.blue.6}', - $type: 'color', - }, - markupItalic: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - markupBold: { - $value: '{base.color.gray.9}', - $type: 'color', - }, - markupDeletedText: { - $value: '{base.color.red.7}', - $type: 'color', - }, - markupDeletedBg: { - $value: '{base.color.red.0}', - $type: 'color', - }, - markupInsertedText: { - $value: '{base.color.green.6}', - $type: 'color', - }, - markupInsertedBg: { - $value: '{base.color.green.0}', - $type: 'color', - }, - markupChangedText: { - $value: '{base.color.orange.6}', - $type: 'color', - }, - markupChangedBg: { - $value: '{base.color.orange.1}', - $type: 'color', - }, - markupIgnoredText: { - $value: '{base.color.gray.1}', - $type: 'color', - }, - markupIgnoredBg: { - $value: '{base.color.blue.6}', - $type: 'color', - }, - metaDiffRange: { - $value: '{base.color.purple.5}', - $type: 'color', - }, - brackethighlighterAngle: { + ansi: { + black: { + $value: '{base.color.gray.9}', + $type: 'color', + }, + black: { + bright: { $value: '{base.color.gray.6}', $type: 'color', }, - sublimelinterGutterMark: { + }, + white: { + $value: '{base.color.gray.5}', + $type: 'color', + }, + white: { + bright: { $value: '{base.color.gray.4}', $type: 'color', }, - constantOtherReferenceLink: { - $value: '{base.color.blue.8}', - $type: 'color', - }, }, - }, - codemirror: { - text: { - $value: '{color.fg.default}', + gray: { + $value: '{base.color.gray.5}', $type: 'color', }, - bg: { - $value: '{color.canvas.default}', + red: { + $value: '{base.color.red.5}', $type: 'color', }, - guttersBg: { - $value: '{color.canvas.default}', - $type: 'color', + red: { + bright: { + $value: '{base.color.red.6}', + $type: 'color', + }, }, - guttermarkerText: { - $value: '{color.canvas.default}', + green: { + $value: '{base.color.green.6}', $type: 'color', }, - guttermarkerSubtleText: { - $value: '{color.fg.subtle}', - $type: 'color', + green: { + bright: { + $value: '{base.color.green.5}', + $type: 'color', + }, }, - linenumberText: { - $value: '{color.fg.muted}', + yellow: { + $value: '{base.color.yellow.8}', $type: 'color', }, - cursor: { - $value: '{color.fg.default}', - $type: 'color', + yellow: { + bright: { + $value: '{base.color.yellow.7}', + $type: 'color', + }, }, - selectionBg: { - $value: '{color.accent.muted}', + blue: { + $value: '{base.color.blue.5}', $type: 'color', }, - activelineBg: { - $value: '{color.neutral.subtle}', - $type: 'color', + blue: { + bright: { + $value: '{base.color.blue.4}', + $type: 'color', + }, }, - matchingbracketText: { - $value: '{color.fg.default}', + magenta: { + $value: '{base.color.purple.5}', $type: 'color', }, - linesBg: { - $value: '{color.canvas.default}', + magenta: { + bright: { + $value: '{base.color.purple.4}', + $type: 'color', + }, + }, + cyan: { + $value: '#1b7c83', $type: 'color', }, + cyan: { + bright: { + $value: '#3192aa', + $type: 'color', + }, + }, + }, + prettylights: { syntax: { comment: { - $value: '{base.color.gray.9}', + $value: '{base.color.gray.5}', $type: 'color', }, constant: { @@ -182,11 +100,21 @@ $value: '{base.color.purple.5}', $type: 'color', }, - keyword: { - $value: '{base.color.red.5}', - $type: 'color', - }, storage: { + modifier: { + import: { + $value: '{base.color.gray.9}', + $type: 'color', + }, + }, + }, + entity: { + tag: { + $value: '{base.color.blue.6}', + $type: 'color', + }, + }, + keyword: { $value: '{base.color.red.5}', $type: 'color', }, @@ -194,14 +122,174 @@ $value: '{base.color.blue.8}', $type: 'color', }, - support: { - $value: '{base.color.blue.6}', - $type: 'color', - }, variable: { $value: '{base.color.orange.6}', $type: 'color', }, + brackethighlighter: { + unmatched: { + $value: '{base.color.red.7}', + $type: 'color', + }, + }, + invalid: { + illegal: { + text: { + $value: '{base.color.gray.0}', + $type: 'color', + }, + }, + }, + invalid: { + illegal: { + bg: { + $value: '{base.color.red.7}', + $type: 'color', + }, + }, + }, + carriage: { + return: { + text: { + $value: '{base.color.gray.0}', + $type: 'color', + }, + }, + }, + carriage: { + return: { + bg: { + $value: '{base.color.red.5}', + $type: 'color', + }, + }, + }, + string: { + regexp: { + $value: '{base.color.green.6}', + $type: 'color', + }, + }, + markup: { + list: { + $value: '{base.color.yellow.9}', + $type: 'color', + }, + }, + markup: { + heading: { + $value: '{base.color.blue.6}', + $type: 'color', + }, + }, + markup: { + italic: { + $value: '{base.color.gray.9}', + $type: 'color', + }, + }, + markup: { + bold: { + $value: '{base.color.gray.9}', + $type: 'color', + }, + }, + markup: { + deleted: { + text: { + $value: '{base.color.red.7}', + $type: 'color', + }, + }, + }, + markup: { + deleted: { + bg: { + $value: '{base.color.red.0}', + $type: 'color', + }, + }, + }, + markup: { + inserted: { + text: { + $value: '{base.color.green.6}', + $type: 'color', + }, + }, + }, + markup: { + inserted: { + bg: { + $value: '{base.color.green.0}', + $type: 'color', + }, + }, + }, + markup: { + changed: { + text: { + $value: '{base.color.orange.6}', + $type: 'color', + }, + }, + }, + markup: { + changed: { + bg: { + $value: '{base.color.orange.1}', + $type: 'color', + }, + }, + }, + markup: { + ignored: { + text: { + $value: '{base.color.gray.1}', + $type: 'color', + }, + }, + }, + markup: { + ignored: { + bg: { + $value: '{base.color.blue.6}', + $type: 'color', + }, + }, + }, + meta: { + diff: { + range: { + $value: '{base.color.purple.5}', + $type: 'color', + }, + }, + }, + brackethighlighter: { + angle: { + $value: '{base.color.gray.6}', + $type: 'color', + }, + }, + sublimelinter: { + gutter: { + mark: { + $value: '{base.color.gray.4}', + $type: 'color', + }, + }, + }, + constant: { + other: { + reference: { + link: { + $value: '{base.color.blue.8}', + $type: 'color', + }, + }, + }, + }, }, }, }, diff --git a/src/tokens/functional/shadow/dark.json5 b/src/tokens/functional/shadow/dark.json5 index 8fcd3ea6f..0726f5652 100644 --- a/src/tokens/functional/shadow/dark.json5 +++ b/src/tokens/functional/shadow/dark.json5 @@ -1,96 +1,261 @@ { - shadow: { - color: { - small: { - $value: '{base.color.black}', - alpha: 0.96, - $type: 'color', - }, - medium: { - $value: '{base.color.gray.4}', - alpha: 0.85, - $type: 'color', - }, - large: { - $value: '{base.color.gray.4}', - alpha: 0.8, - $type: 'color', - }, - extraLarge: { - $value: '{base.color.gray.4}', - alpha: 0.7, - $type: 'color', - }, - highlight: { - $value: '{base.color.white}', - alpha: 0.25, - $type: 'color', - }, - inset: { - $value: '{base.color.gray.2}', - alpha: 0, - $type: 'color', - }, + avatar: { + shadow: { + $value: [ + { + color: '{base.color.gray.9}', + alpha: 1, + offsetX: '-2px', + offsetY: '-2px', + blur: '0px', + spread: '0px', + }, + ], + $type: 'shadow', }, - small: { - $value: { - color: '{shadow.color.small}', - offsetX: '0px', - offsetY: '1px', - blur: '0px', - spread: '0px', + }, + button: { + default: { + shadow: { + resting: { + $value: [ + { + color: 'transparent', + alpha: 0, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '0px', + inset: false, + }, + ], + $type: 'shadow', + }, + inset: { + $value: { + color: 'transparent', + alpha: 0, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '0px', + inset: false, + }, + $type: 'shadow', + }, }, - $type: 'shadow', }, - medium: { - $value: { - color: '{shadow.color.medium}', - offsetX: '0px', - offsetY: '3px', - blur: '6px', - spread: '0px', + primary: { + shadow: { + selected: { + $value: [ + { + color: 'transparent', + alpha: 0, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '0px', + inset: false, + }, + ], + $type: 'shadow', + }, }, - $type: 'shadow', }, - large: { - $value: { - color: '{shadow.color.large}', - offsetX: '0px', - offsetY: '8px', - blur: '24px', - spread: '0px', + outline: { + shadow: { + selected: { + $value: [ + { + color: 'transparent', + alpha: 0, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '0px', + inset: false, + }, + ], + $type: 'shadow', + }, }, - $type: 'shadow', }, - extraLarge: { - $value: { - color: '{shadow.color.extraLarge}', - offsetX: '0px', - offsetY: '12px', - blur: '28px', - spread: '0px', + danger: { + shadow: { + selected: { + $value: [ + { + color: 'transparent', + alpha: 0, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '0px', + inset: false, + }, + ], + $type: 'shadow', + }, }, - $type: 'shadow', }, - // components - overlay: { + }, + shadow: { + inset: { $value: [ { - color: '{base.color.gray.6}', + color: 'transparent', + alpha: 0, offsetX: '0px', offsetY: '0px', blur: '0px', - spread: '1px', - }, - { - color: '{shadow.color.medium}', - offsetX: '0px', - offsetY: '16px', - blur: '32px', spread: '0px', + inset: false, }, ], $type: 'shadow', }, + highlight: { + $value: { + color: 'transparent', + alpha: 0, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '0px', + inset: false, + }, + $type: 'shadow', + }, + resting: { + xsmall: { + $value: [ + { + color: '{base.color.black}', + alpha: 0.64, + offsetX: '0px', + offsetY: '1px', + blur: '0px', + spread: '0px', + inset: false, + }, + ], + $type: 'shadow', + }, + small: { + $value: [ + { + color: 'transparent', + alpha: 0, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '0px', + inset: false, + }, + ], + $type: 'shadow', + }, + medium: { + $value: [ + { + color: '{base.color.black}', + alpha: 1, + offsetX: '0px', + offsetY: '3px', + blur: '6px', + spread: '0px', + inset: false, + }, + ], + $type: 'shadow', + }, + }, + floating: { + small: { + $value: [ + { + color: '{base.color.gray.6}', + alpha: 1, + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: '1px', + }, + { + color: '{base.color.black}', + alpha: 0.85, + offsetX: '0px', + offsetY: '16px', + blur: '32px', + spread: '0px', + }, + ], + $type: 'shadow', + }, + medium: { + $value: [ + { + color: '{base.color.gray.4}', + alpha: 0.09, + offsetX: '0px', + offsetY: '4px', + blur: '32px', + spread: '-4px', + }, + { + color: '{base.color.gray.4}', + alpha: 0.09, + offsetX: '0px', + offsetY: '8px', + blur: '16px', + spread: '-4px', + }, + { + color: '{base.color.gray.4}', + alpha: 0.16, + offsetX: '0px', + offsetY: '24px', + blur: '48px', + spread: '-12px', + }, + { + color: '{base.color.gray.4}', + alpha: 0.24, + offsetX: '0px', + offsetY: '48px', + blur: '96px', + spread: '-24px', + }, + ], + $type: 'shadow', + }, + large: { + $value: [ + { + color: '{base.color.black}', + alpha: 1, + offsetX: '0px', + offsetY: '8px', + blur: '24px', + spread: '0px', + }, + ], + $type: 'shadow', + }, + xlarge: { + $value: [ + { + color: '{base.color.black}', + alpha: 1, + offsetX: '0px', + offsetY: '12px', + blur: '48px', + spread: '0px', + }, + ], + $type: 'shadow', + }, + }, }, } diff --git a/src/tokens/functional/shadow/light.json5 b/src/tokens/functional/shadow/light.json5 index cb0e70435..d70fa5662 100644 --- a/src/tokens/functional/shadow/light.json5 +++ b/src/tokens/functional/shadow/light.json5 @@ -1,103 +1,256 @@ { - shadow: { - color: { - small: { - $value: '{base.color.black}', - alpha: 0.96, - $type: 'color', - }, - medium: { - $value: '{base.color.gray.4}', - alpha: 0.85, - $type: 'color', - }, - large: { - $value: '{base.color.gray.4}', - alpha: 0.8, - $type: 'color', - }, - extraLarge: { - $value: '{base.color.gray.4}', - alpha: 0.7, - $type: 'color', - }, - highlight: { - $value: '{base.color.white}', - alpha: 0.25, - $type: 'color', - }, - inset: { - $value: '{base.color.gray.2}', - alpha: 0, - $type: 'color', + avatar: { + shadow: { + $value: [ + { + color: '{base.color.white}', + alpha: 0.8, + offsetX: '-2px', + offsetY: '-2px', + blur: '0px', + spread: '0px', + }, + ], + $type: 'shadow', + }, + }, + button: { + default: { + shadow: { + resting: { + $value: [ + { + color: '{base.color.black}', + alpha: 0.04, + offsetX: '0px', + offsetY: '1px', + blur: '0px', + spread: '0px', + inset: false, + }, + ], + $type: 'shadow', + }, + inset: { + $value: { + color: '{base.color.white}', + alpha: 0.25, + offsetX: '0px', + offsetY: '1px', + blur: '0px', + spread: '0px', + inset: true, + }, + $type: 'shadow', + }, }, - semiBlack: { - '12': { - $value: '{base.color.black}', - alpha: 0.12, - $type: 'color', + }, + primary: { + shadow: { + selected: { + $value: [ + { + color: '{base.color.green.9}', + alpha: 0.3, + offsetX: '0px', + offsetY: '1px', + blur: '0px', + spread: '0px', + inset: true, + }, + ], + $type: 'shadow', }, }, }, - small: { - $value: { - color: '{shadow.color.small}', - offsetX: '0px', - offsetY: '1px', - blur: '0px', - spread: '0px', + outline: { + shadow: { + selected: { + $value: [ + { + color: '{base.color.blue.9}', + alpha: 0.2, + offsetX: '0px', + offsetY: '1px', + blur: '0px', + spread: '0px', + inset: true, + }, + ], + $type: 'shadow', + }, }, - $type: 'shadow', }, - medium: { - $value: { - color: '{shadow.color.medium}', - offsetX: '0px', - offsetY: '3px', - blur: '6px', - spread: '0px', + danger: { + shadow: { + selected: { + $value: [ + { + color: '{base.color.red.9}', + alpha: 0.2, + offsetX: '0px', + offsetY: '1px', + blur: '0px', + spread: '0px', + inset: true, + }, + ], + $type: 'shadow', + }, }, - $type: 'shadow', }, - large: { + }, + shadow: { + inset: { $value: { - color: '{shadow.color.large}', + color: '{base.color.black}', + alpha: 0.05, offsetX: '0px', - offsetY: '8px', - blur: '24px', + offsetY: '1px', + blur: '0px', spread: '0px', + inset: true, }, $type: 'shadow', }, - extraLarge: { + highlight: { $value: { - color: '{shadow.color.extraLarge}', + color: '{base.color.white}', + alpha: 0.25, offsetX: '0px', - offsetY: '12px', - blur: '28px', + offsetY: '1px', + blur: '0px', spread: '0px', + inset: true, }, $type: 'shadow', }, - // components - overlay: { - $value: [ - { - color: '{shadow.color.semiBlack.12}', + resting: { + xsmall: { + $value: { + color: '{base.color.black}', + alpha: 0.06, offsetX: '0px', offsetY: '1px', - blur: '3px', - spread: '0px', - }, - { - color: '{shadow.color.semiBlack.12}', - offsetX: '0px', - offsetY: '8px', - blur: '24px', + blur: '0px', spread: '0px', + inset: false, }, - ], - $type: 'shadow', + $type: 'shadow', + }, + small: { + $value: [ + { + color: '{base.color.black}', + alpha: 0.04, + offsetX: '0px', + offsetY: '1px', + blur: '0px', + spread: '0px', + inset: false, + }, + ], + $type: 'shadow', + }, + medium: { + $value: [ + { + color: '{base.color.gray.4}', + alpha: 0.15, + offsetX: '0px', + offsetY: '3px', + blur: '6px', + spread: '0px', + }, + ], + $type: 'shadow', + }, + }, + floating: { + small: { + $value: [ + { + color: '{base.color.black}', + alpha: 0.12, + offsetX: '0px', + offsetY: '1px', + blur: '3px', + spread: '0px', + }, + { + color: '{base.color.gray.7}', + alpha: 0.12, + offsetX: '0px', + offsetY: '8px', + blur: '24px', + spread: '0px', + }, + ], + $type: 'shadow', + }, + medium: { + $value: [ + { + color: '{base.color.gray.4}', + alpha: 0.09, + offsetX: '0px', + offsetY: '4px', + blur: '32px', + spread: '-4px', + }, + { + color: '{base.color.gray.4}', + alpha: 0.09, + offsetX: '0px', + offsetY: '8px', + blur: '16px', + spread: '-4px', + }, + { + color: '{base.color.gray.4}', + alpha: 0.16, + offsetX: '0px', + offsetY: '24px', + blur: '48px', + spread: '-12px', + }, + { + color: '{base.color.gray.4}', + alpha: 0.24, + offsetX: '0px', + offsetY: '48px', + blur: '96px', + spread: '-24px', + }, + ], + $type: 'shadow', + }, + large: { + $value: [ + { + color: '{base.color.gray.4}', + alpha: 0.2, + offsetX: '0px', + offsetY: '8px', + blur: '24px', + spread: '0px', + }, + ], + $type: 'shadow', + }, + xlarge: { + $value: [ + { + color: '{base.color.gray.4}', + alpha: 0.3, + offsetX: '0px', + offsetY: '12px', + blur: '28px', + spread: '0px', + }, + ], + $type: 'shadow', + }, }, }, } diff --git a/tsconfig.json b/tsconfig.json index c596f8e97..1d7643f42 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,7 @@ "jsx": "react", "target": "ES2016", "module": "commonjs", - "lib": ["ESNext"], + "lib": ["ESNext", "dom"], "moduleResolution": "node", "esModuleInterop": true, "strict": true,