diff --git a/.changeset/smooth-tools-carry.md b/.changeset/smooth-tools-carry.md new file mode 100644 index 000000000..be2bc2250 --- /dev/null +++ b/.changeset/smooth-tools-carry.md @@ -0,0 +1,5 @@ +--- +'@primer/primitives': patch +--- + +Fix borderColors in colorblind modes diff --git a/scripts/buildFigma.ts b/scripts/buildFigma.ts index 014508c2f..33c0bd4cb 100644 --- a/scripts/buildFigma.ts +++ b/scripts/buildFigma.ts @@ -121,6 +121,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise = `src/tokens/base/color/light/display-light.json5`, `src/tokens/functional/color/light/primitives-light.json5`, `src/tokens/functional/color/light/patterns-light.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/component/*.json5`, ], theme: 'light', @@ -134,6 +135,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise = `src/tokens/base/color/light/display-light.json5`, `src/tokens/functional/color/light/primitives-light.json5`, `src/tokens/functional/color/light/patterns-light.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/component/*.json5`, ], theme: 'light-high-contrast', @@ -147,6 +149,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise = `src/tokens/base/color/light/display-light.json5`, `src/tokens/functional/color/light/primitives-light.json5`, `src/tokens/functional/color/light/patterns-light.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/component/*.json5`, ], theme: 'light-protanopia-deuteranopia', @@ -160,6 +163,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise = `src/tokens/base/color/light/display-light.json5`, `src/tokens/functional/color/light/primitives-light.json5`, `src/tokens/functional/color/light/patterns-light.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/component/*.json5`, ], theme: 'light-tritanopia', @@ -172,6 +176,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise = `src/tokens/base/color/dark/display-dark.json5`, `src/tokens/functional/color/dark/primitives-dark.json5`, `src/tokens/functional/color/dark/patterns-dark.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/component/*.json5`, ], theme: 'dark', @@ -185,6 +190,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise = `src/tokens/base/color/dark/display-dark.json5`, `src/tokens/functional/color/dark/primitives-dark.json5`, `src/tokens/functional/color/dark/patterns-dark.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/component/*.json5`, ], theme: 'dark-high-contrast', @@ -198,6 +204,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise = `src/tokens/base/color/dark/display-dark.json5`, `src/tokens/functional/color/dark/primitives-dark.json5`, `src/tokens/functional/color/dark/patterns-dark.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/component/*.json5`, ], theme: 'dark-dimmed', @@ -211,6 +218,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise = `src/tokens/base/color/dark/display-dark.json5`, `src/tokens/functional/color/dark/primitives-dark.json5`, `src/tokens/functional/color/dark/patterns-dark.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/component/*.json5`, ], theme: 'dark-protanopia-deuteranopia', @@ -224,6 +232,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise = `src/tokens/base/color/dark/display-dark.json5`, `src/tokens/functional/color/dark/primitives-dark.json5`, `src/tokens/functional/color/dark/patterns-dark.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/component/*.json5`, ], theme: 'dark-tritanopia', diff --git a/scripts/buildTokens.ts b/scripts/buildTokens.ts index c274fc1ef..f5cf2c0af 100644 --- a/scripts/buildTokens.ts +++ b/scripts/buildTokens.ts @@ -201,15 +201,8 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P // color, shadow & borders { filename: 'theme', - source: [ - `src/tokens/base/color/light/light.json5`, - `src/tokens/base/color/light/display-light.json5`, - `src/tokens/functional/color/light/*.json5`, - `src/tokens/functional/shadow/light.json5`, - `src/tokens/functional/border/*.json5`, - `src/tokens/component/*.json5`, - ], - include: [`src/tokens/base/color/light/light.json5`, 'src/tokens/functional/size/border.json5'], + source: themes.find(theme => theme.filename === 'light')?.source || [], + include: themes.find(theme => theme.filename === 'light')?.include || [], }, // typography { diff --git a/scripts/themes.config.ts b/scripts/themes.config.ts index b8997f95e..a798d2f21 100644 --- a/scripts/themes.config.ts +++ b/scripts/themes.config.ts @@ -5,10 +5,11 @@ export const themes: TokenBuildInput[] = [ filename: 'light', theme: 'light', source: [ - `src/tokens/functional/color/light/*.json5`, `src/tokens/functional/shadow/light.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, + `src/tokens/functional/color/*.json5`, + `src/tokens/functional/color/light/*.json5`, ], include: [ `src/tokens/functional/size/border.json5`, @@ -23,6 +24,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/shadow/light.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/functional/color/light/*.json5`, `src/tokens/functional/color/light/overrides/light.tritanopia.json5`, ], @@ -39,6 +41,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/shadow/light.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/functional/color/light/*.json5`, `src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`, ], @@ -55,6 +58,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/shadow/light.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/functional/color/light/*.json5`, `src/tokens/functional/color/light/overrides/light.high-contrast.json5`, ], @@ -72,6 +76,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/shadow/dark.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/functional/color/dark/*.json5`, ], include: [ @@ -87,6 +92,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/shadow/dark.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/functional/color/dark/*.json5`, `src/tokens/functional/color/dark/overrides/dark.dimmed.json5`, ], @@ -104,6 +110,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/shadow/dark.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/functional/color/dark/*.json5`, `src/tokens/functional/color/dark/overrides/dark.tritanopia.json5`, ], @@ -120,6 +127,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/shadow/dark.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/functional/color/dark/*.json5`, `src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`, ], @@ -136,6 +144,7 @@ export const themes: TokenBuildInput[] = [ `src/tokens/functional/shadow/dark.json5`, `src/tokens/functional/border/*.json5`, `src/tokens/component/*.json5`, + `src/tokens/functional/color/*.json5`, `src/tokens/functional/color/dark/*.json5`, `src/tokens/functional/color/dark/overrides/dark.high-contrast.json5`, ], diff --git a/src/schemas/colorToken.ts b/src/schemas/colorToken.ts index b41390070..14b6027e5 100644 --- a/src/schemas/colorToken.ts +++ b/src/schemas/colorToken.ts @@ -62,7 +62,7 @@ export const colorToken = baseColorToken errorMap: e => { if (e.code === 'unrecognized_keys') { return { - message: `Unrecognized key: "${e.keys.join(', ')}", must be one of: light, light-tritanopia, light-protanopia-deutranopia, light-high-contrast, dark, dark-tritanopia, dark-protanopia-deutranopia, dark-high-contrast, dark-dimmed`, + message: `Unrecognized key: "${e.keys.join(', ')}", must be one of: light, light-tritanopia, light-protanopia-deuteranopia, light-high-contrast, dark, dark-tritanopia, dark-protanopia-deuteranopia, dark-high-contrast, dark-dimmed`, } } return {message: `Error: ${e.code}`} diff --git a/src/tokens/functional/color/borderColor.json5 b/src/tokens/functional/color/borderColor.json5 new file mode 100644 index 000000000..e193d0649 --- /dev/null +++ b/src/tokens/functional/color/borderColor.json5 @@ -0,0 +1,616 @@ +{ + borderColor: { + default: { + $value: '{base.color.neutral.6}', + $type: 'color', + $extensions: { + 'org.primer.overrides': { + dark: '{base.color.neutral.7}', + 'dark-dimmed': '{base.color.neutral.7}', + 'light-high-contrast': '{base.color.neutral.10}', + 'dark-high-contrast': '{base.color.neutral.10}', + }, + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-default) /* utility class: .color-border-default */', + }, + }, + }, + }, + muted: { + $value: '{borderColor.default}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-muted) /* utility class: .color-border-muted */', + }, + }, + 'org.primer.overrides': { + 'dark-dimmed': { + $value: '{base.color.neutral.7}', + alpha: 0.7, + }, + 'light-high-contrast': { + $value: '{borderColor.default}', + alpha: 1, + }, + 'dark-high-contrast': { + $value: '{borderColor.default}', + alpha: 1, + }, + }, + }, + alpha: 0.7, + }, + emphasis: { + $value: '{base.color.neutral.8}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + }, + 'org.primer.overrides': { + 'light-high-contrast': '{borderColor.default}', + 'dark-high-contrast': '{borderColor.default}', + }, + }, + }, + disabled: { + $value: '{base.color.neutral.8}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + }, + 'org.primer.overrides': { + 'dark-dimmed': { + $value: '{base.color.neutral.8}', + alpha: 0.1, + }, + 'light-high-contrast': { + $value: '{base.color.neutral.9}', + alpha: 0.12, + }, + }, + }, + alpha: 0.1, + }, + transparent: { + $value: '{base.color.transparent}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + }, + }, + }, + translucent: { + $value: '{base.color.neutral.13}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + }, + 'org.primer.overrides': { + 'light-high-contrast': { + $value: '{base.color.neutral.9}', + alpha: 1, + }, + 'dark-high-contrast': { + $value: '{base.color.neutral.6}', + alpha: 1, + }, + }, + }, + alpha: 0.15, + }, + neutral: { + muted: { + $value: '{borderColor.muted}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + }, + 'org.primer.overrides': { + 'dark-dimmed': { + $value: '{base.color.neutral.7}', + alpha: 0.7, + }, + }, + }, + }, + emphasis: { + $value: '{base.color.neutral.9}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + }, + 'org.primer.overrides': { + dark: '{borderColor.emphasis}', + }, + }, + }, + }, + accent: { + muted: { + $value: '{base.color.blue.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-accent-muted) /* utility class: .color-border-accent */', + }, + }, + 'org.primer.overrides': { + dark: '{base.color.blue.4}', + 'light-high-contrast': { + $value: '{base.color.blue.3}', + alpha: 1, + }, + 'dark-high-contrast': { + $value: '{base.color.blue.4}', + alpha: 1, + }, + }, + }, + alpha: 0.4, + }, + emphasis: { + $value: '{base.color.blue.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */', + }, + }, + }, + }, + }, + success: { + muted: { + $value: '{base.color.green.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-success-muted) /* utility class: .color-border-success */', + }, + }, + 'org.primer.overrides': { + dark: '{base.color.green.4}', + 'light-high-contrast': { + $value: '{base.color.green.3}', + alpha: 1, + }, + 'dark-high-contrast': { + $value: '{base.color.green.4}', + alpha: 1, + }, + 'dark-tritanopia': { + $value: '{base.color.blue.4}', + alpha: 0.4, + }, + 'light-tritanopia': { + $value: '{base.color.blue.3}', + alpha: 0.4, + }, + 'dark-protanopia-deuteranopia': { + $value: '{base.color.blue.4}', + }, + 'light-protanopia-deuteranopia': { + $value: '{base.color.blue.0}', + alpha: 1, + }, + }, + }, + alpha: 0.4, + }, + emphasis: { + $value: '{base.color.green.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-success-emphasis) /* utility class: .color-border-success-emphasis */', + }, + }, + 'org.primer.overrides': { + 'dark-tritanopia': '{base.color.blue.5}', + 'light-tritanopia': '{base.color.blue.5}', + 'dark-protanopia-deuteranopia': '{base.color.blue.5}', + 'light-protanopia-deuteranopia': '{base.color.blue.5}', + }, + }, + }, + }, + open: { + muted: { + $value: '{borderColor.success.muted}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-open-muted) /* utility class: .color-border-open */', + }, + }, + 'org.primer.overrides': { + 'dark-tritanopia': { + $value: '{base.color.red.4}', + alpha: 0.4, + }, + 'light-tritanopia': { + $value: '{base.color.red.3}', + alpha: 0.4, + }, + }, + }, + }, + emphasis: { + $value: '{borderColor.success.emphasis}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-open-emphasis) /* utility class: .color-border-open-emphasis */', + }, + }, + 'org.primer.overrides': { + 'dark-tritanopia': '{base.color.red.5}', + 'light-tritanopia': '{base.color.red.5}', + }, + }, + }, + }, + attention: { + muted: { + $value: '{base.color.yellow.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-attention-muted) /* utility class: .color-border-attention */', + }, + }, + 'org.primer.overrides': { + dark: '{base.color.yellow.4}', + 'light-high-contrast': { + $value: '{base.color.yellow.3}', + alpha: 1, + }, + 'dark-high-contrast': { + $value: '{base.color.yellow.4}', + alpha: 1, + }, + }, + }, + alpha: 0.4, + }, + emphasis: { + $value: '{base.color.yellow.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-attention-emphasis) /* utility class: .color-border-attention-emphasis */', + }, + }, + }, + }, + }, + severe: { + muted: { + $value: '{base.color.orange.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-severe-muted) /* utility class: .color-border-severe */', + }, + }, + 'org.primer.overrides': { + dark: '{base.color.orange.4}', + 'light-high-contrast': { + $value: '{base.color.orange.3}', + alpha: 1, + }, + 'dark-high-contrast': { + $value: '{base.color.orange.4}', + alpha: 1, + }, + 'dark-tritanopia': '{base.color.red.4}', + 'light-tritanopia': '{base.color.red.3}', + }, + }, + alpha: 0.4, + }, + emphasis: { + $value: '{base.color.orange.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-severe-emphasis) /* utility class: .color-border-severe-emphasis */', + }, + }, + 'org.primer.overrides': { + 'dark-tritanopia': '{base.color.red.5}', + 'light-tritanopia': '{base.color.red.5}', + }, + }, + }, + }, + danger: { + muted: { + $value: '{base.color.red.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-danger-muted) /* utility class: .color-border-danger */', + }, + }, + 'org.primer.overrides': { + dark: '{base.color.red.4}', + 'light-high-contrast': { + $value: '{base.color.red.3}', + alpha: 1, + }, + 'dark-high-contrast': { + $value: '{base.color.red.4}', + alpha: 1, + }, + 'dark-protanopia-deuteranopia': { + $value: '{base.color.orange.4}', + }, + 'light-protanopia-deuteranopia': { + $value: '{base.color.orange.0}', + alpha: 1, + }, + }, + }, + alpha: 0.4, + }, + emphasis: { + $value: '{base.color.red.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-danger-emphasis) /* utility class: .color-border-danger-emphasis */', + }, + }, + 'org.primer.overrides': { + 'dark-protanopia-deuteranopia': { + $value: '{base.color.orange.5}', + }, + 'light-protanopia-deuteranopia': { + $value: '{base.color.orange.5}', + }, + }, + }, + }, + }, + closed: { + muted: { + $value: '{borderColor.danger.muted}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-closed-muted) /* utility class: .color-border-closed */', + }, + }, + 'org.primer.overrides': { + 'dark-tritanopia': { + $value: '{borderColor.default}', + alpha: 0.4, + }, + 'light-tritanopia': { + $value: '{borderColor.default}', + alpha: 0.4, + }, + 'light-protanopia-deuteranopia': { + $value: '{borderColor.default}', + alpha: 0.4, + }, + }, + }, + }, + emphasis: { + $value: '{borderColor.danger.emphasis}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-closed-emphasis) /* utility class: .color-border-closed-emphasis */', + }, + }, + 'org.primer.overrides': { + 'light-protanopia-deuteranopia': '{borderColor.emphasis}', + 'dark-protanopia-deuteranopia': '{borderColor.emphasis}', + 'dark-tritanopia': '{borderColor.emphasis}', + 'light-tritanopia': '{borderColor.emphasis}', + }, + }, + }, + }, + done: { + muted: { + $value: '{base.color.purple.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-done-muted) /* utility class: .color-border-done */', + }, + }, + 'org.primer.overrides': { + dark: '{base.color.purple.4}', + 'light-high-contrast': { + $value: '{base.color.purple.3}', + alpha: 1, + }, + 'dark-high-contrast': { + $value: '{base.color.purple.4}', + alpha: 1, + }, + }, + }, + alpha: 0.4, + }, + emphasis: { + $value: '{base.color.purple.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-done-emphasis)', + }, + }, + }, + }, + }, + upsell: { + muted: { + $value: '{borderColor.done.muted}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-upsell-muted)', + }, + }, + }, + }, + emphasis: { + $value: '{borderColor.done.emphasis}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-upsell-emphasis)', + }, + }, + }, + }, + }, + sponsors: { + muted: { + $value: '{base.color.pink.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-sponsors-muted) /* utility class: .color-border-sponsors */', + }, + }, + 'org.primer.overrides': { + dark: '{base.color.pink.4}', + 'light-high-contrast': { + $value: '{base.color.pink.3}', + alpha: 1, + }, + 'dark-high-contrast': { + $value: '{base.color.pink.4}', + alpha: 1, + }, + }, + }, + alpha: 0.4, + }, + emphasis: { + $value: '{base.color.pink.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['borderColor'], + codeSyntax: { + web: 'var(--borderColor-sponsors-emphasis) /* utility class: .color-border-sponsors-emphasis */', + }, + }, + }, + }, + }, + }, +} diff --git a/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 b/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 index 406ba2c21..b467fa263 100644 --- a/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 @@ -47,29 +47,6 @@ $type: 'color', }, }, - borderColor: { - default: { - $value: '{base.color.neutral.7}', - $type: 'color', - }, - muted: { - $value: '{base.color.neutral.7}', - $type: 'color', - alpha: 0.7, - }, - disabled: { - $value: '{base.color.neutral.8}', - $type: 'color', - alpha: 0.1, - }, - neutral: { - muted: { - $value: '{base.color.neutral.7}', - $type: 'color', - alpha: 0.7, - }, - }, - }, control: { bgColor: { rest: { 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 37b68db97..e69c7ab09 100644 --- a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 @@ -117,101 +117,6 @@ }, }, }, - borderColor: { - default: { - $value: '{base.color.neutral.10}', - $type: 'color', - }, - muted: { - $value: '{borderColor.default}', - $type: 'color', - alpha: 1, - }, - emphasis: { - $value: '{borderColor.default}', - $type: 'color', - }, - disabled: { - $value: '{base.color.neutral.9}', - $type: 'color', - alpha: 0.12, - }, - translucent: { - $value: '{base.color.neutral.6}', - $type: 'color', - alpha: 1, - }, - accent: { - muted: { - $value: '{base.color.blue.4}', - $type: 'color', - alpha: 1, - }, - }, - success: { - muted: { - $value: '{base.color.green.4}', - $type: 'color', - alpha: 1, - }, - }, - open: { - muted: { - $value: '{borderColor.success.muted}', - $type: 'color', - alpha: 1, - }, - }, - attention: { - muted: { - $value: '{base.color.yellow.4}', - $type: 'color', - alpha: 1, - }, - }, - closed: { - muted: { - $value: '{borderColor.danger.muted}', - $type: 'color', - alpha: 1, - }, - }, - upsell: { - muted: { - $value: '{borderColor.done.muted}', - $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, - }, - }, - }, // patterns counter: { borderColor: { 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 f1fa69215..ad0c3089e 100644 --- a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 @@ -27,32 +27,31 @@ muted: { $value: '{base.color.blue.4}', $type: 'color', - alpha: 0.15, + alpha: 0.2, }, emphasis: { $value: '{base.color.blue.5}', $type: 'color', }, }, - danger: { + open: { muted: { - $value: '{base.color.orange.4}', + $value: '{bgColor.success.muted}', $type: 'color', - alpha: 0.1, }, emphasis: { - $value: '{base.color.orange.5}', + $value: '{bgColor.success.emphasis}', $type: 'color', }, }, - open: { + danger: { muted: { - $value: '{base.color.blue.4}', + $value: '{base.color.orange.4}', $type: 'color', - alpha: 0.2, + alpha: 0.1, }, emphasis: { - $value: '{base.color.blue.5}', + $value: '{base.color.orange.5}', $type: 'color', }, }, @@ -68,52 +67,6 @@ }, }, }, - borderColor: { - open: { - muted: { - $value: '{base.color.blue.4}', - $type: 'color', - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.blue.4}', - $type: 'color', - }, - }, - closed: { - muted: { - $value: '{borderColor.muted}', - $type: 'color', - alpha: 0.4, - }, - emphasis: { - $value: '{borderColor.emphasis}', - $type: 'color', - }, - }, - success: { - muted: { - $value: '{base.color.blue.4}', - $type: 'color', - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.blue.5}', - $type: 'color', - }, - }, - danger: { - muted: { - $value: '{base.color.orange.4}', - $type: 'color', - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.orange.5}', - $type: 'color', - }, - }, - }, control: { danger: { fgColor: { diff --git a/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 b/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 index 2feaed7d1..57b38a1de 100644 --- a/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 @@ -75,52 +75,6 @@ }, }, }, - borderColor: { - success: { - muted: { - $value: '{base.color.blue.4}', - $type: 'color', - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.blue.5}', - $type: 'color', - }, - }, - severe: { - muted: { - $value: '{base.color.red.4}', - $type: 'color', - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.red.5}', - $type: 'color', - }, - }, - open: { - muted: { - $value: '{base.color.red.4}', - $type: 'color', - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.red.5}', - $type: 'color', - }, - }, - closed: { - muted: { - $value: '{borderColor.default}', - $type: 'color', - alpha: 0.4, - }, - emphasis: { - $value: '{borderColor.emphasis}', - $type: 'color', - }, - }, - }, codeMirror: { syntax: { fgColor: { diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5 index 7d4c9790d..f379c595f 100644 --- a/src/tokens/functional/color/dark/primitives-dark.json5 +++ b/src/tokens/functional/color/dark/primitives-dark.json5 @@ -754,442 +754,4 @@ }, }, }, - borderColor: { - default: { - $value: '{base.color.neutral.7}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-default) /* utility class: .color-border-default */', - }, - }, - }, - }, - muted: { - $value: '{borderColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-muted) /* utility class: .color-border-muted */', - }, - }, - }, - alpha: 0.7, - }, - emphasis: { - $value: '{base.color.neutral.8}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - }, - }, - }, - disabled: { - $value: '{base.color.neutral.8}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - }, - }, - alpha: 0.1, - }, - transparent: { - $value: '{base.color.transparent}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - }, - }, - }, - translucent: { - $value: '{base.color.neutral.13}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component (internal)', - scopes: ['borderColor'], - }, - }, - alpha: 0.15, - }, - neutral: { - muted: { - $value: '{borderColor.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - }, - }, - }, - emphasis: { - $value: '{borderColor.emphasis}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - }, - }, - }, - }, - accent: { - muted: { - $value: '{base.color.blue.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-accent-muted) /* utility class: .color-border-accent */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.blue.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */', - }, - }, - }, - }, - }, - success: { - muted: { - $value: '{base.color.green.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-success-muted) /* utility class: .color-border-success */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.green.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-success-emphasis) /* utility class: .color-border-success-emphasis */', - }, - }, - }, - }, - }, - open: { - muted: { - $value: '{borderColor.success.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-open-muted) /* utility class: .color-border-open */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{borderColor.success.emphasis}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-open-emphasis) /* utility class: .color-border-open-emphasis */', - }, - }, - }, - }, - }, - attention: { - muted: { - $value: '{base.color.yellow.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-attention-muted) /* utility class: .color-border-attention */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.yellow.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-attention-emphasis) /* utility class: .color-border-attention-emphasis */', - }, - }, - }, - }, - }, - severe: { - muted: { - $value: '{base.color.orange.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-severe-muted) /* utility class: .color-border-severe */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.orange.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-severe-emphasis) /* utility class: .color-border-severe-emphasis */', - }, - }, - }, - }, - }, - danger: { - muted: { - $value: '{base.color.red.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-danger-muted) /* utility class: .color-border-danger */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.red.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-danger-emphasis) /* utility class: .color-border-danger-emphasis */', - }, - }, - }, - }, - }, - closed: { - muted: { - $value: '{borderColor.danger.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-closed-muted) /* utility class: .color-border-closed */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{borderColor.danger.emphasis}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-closed-emphasis) /* utility class: .color-border-closed-emphasis */', - }, - }, - }, - }, - }, - done: { - muted: { - $value: '{base.color.purple.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-done-muted) /* utility class: .color-border-done */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.purple.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-done-emphasis) /* utility class: .color-border-done-emphasis */', - }, - }, - }, - }, - }, - upsell: { - muted: { - $value: '{borderColor.done.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-upsell-muted)', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{borderColor.done.emphasis}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-upsell-emphasis', - }, - }, - }, - }, - }, - sponsors: { - muted: { - $value: '{base.color.pink.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-sponsors-muted) /* utility class: .color-border-sponsors */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.pink.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-sponsors-emphasis) /* utility class: .color-border-sponsors-emphasis */', - }, - }, - }, - }, - }, - }, } 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 ed65e0f2d..035b852c2 100644 --- a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +++ b/src/tokens/functional/color/light/overrides/light.high-contrast.json5 @@ -87,109 +87,6 @@ }, }, }, - borderColor: { - default: { - $value: '{base.color.neutral.10}', - $type: 'color', - }, - muted: { - $value: '{borderColor.default}', - $type: 'color', - alpha: 1, - }, - emphasis: { - $value: '{borderColor.default}', - $type: 'color', - }, - disabled: { - $value: '{base.color.neutral.9}', - $type: 'color', - alpha: 0.12, - }, - translucent: { - $value: '{base.color.neutral.9}', - $type: 'color', - alpha: 1, - }, - accent: { - muted: { - $value: '{base.color.blue.3}', - $type: 'color', - alpha: 1, - }, - }, - success: { - muted: { - $value: '{base.color.green.3}', - $type: 'color', - alpha: 1, - }, - emphasis: { - $value: '{base.color.green.5}', - $type: 'color', - }, - }, - open: { - muted: { - $value: '{borderColor.success.muted}', - $type: 'color', - alpha: 1, - }, - }, - 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, - }, - }, - upsell: { - muted: { - $value: '{borderColor.done.muted}', - $type: 'color', - alpha: 1, - }, - }, - closed: { - muted: { - $value: '{borderColor.danger.muted}', - $type: 'color', - alpha: 1, - }, - }, - }, // patterns counter: { borderColor: { 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 f15cfc505..66964e805 100644 --- a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 @@ -45,11 +45,11 @@ }, open: { muted: { - $value: '{base.color.blue.0}', + $value: '{bgColor.success.muted}', $type: 'color', }, emphasis: { - $value: '{base.color.blue.5}', + $value: '{bgColor.success.emphasis}', $type: 'color', }, }, @@ -74,52 +74,6 @@ }, }, }, - borderColor: { - open: { - muted: { - $value: '{base.color.blue.3}', - $type: 'color', - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.blue.4}', - $type: 'color', - }, - }, - closed: { - muted: { - $value: '{borderColor.default}', - $type: 'color', - alpha: 0.4, - }, - emphasis: { - $value: '{borderColor.emphasis}', - $type: 'color', - }, - }, - success: { - muted: { - $value: '{base.color.blue.3}', - $type: 'color', - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.blue.5}', - $type: 'color', - }, - }, - danger: { - muted: { - $value: '{base.color.orange.3}', - $type: 'color', - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.orange.5}', - $type: 'color', - }, - }, - }, codeMirror: { syntax: { fgColor: { diff --git a/src/tokens/functional/color/light/overrides/light.tritanopia.json5 b/src/tokens/functional/color/light/overrides/light.tritanopia.json5 index 0740fa55c..970e0c80d 100644 --- a/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +++ b/src/tokens/functional/color/light/overrides/light.tritanopia.json5 @@ -64,52 +64,6 @@ }, }, }, - borderColor: { - success: { - muted: { - $value: '{base.color.blue.3}', - $type: 'color', - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.blue.5}', - $type: 'color', - }, - }, - severe: { - muted: { - $value: '{base.color.red.3}', - $type: 'color', - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.red.5}', - $type: 'color', - }, - }, - open: { - muted: { - $value: '{base.color.red.3}', - $type: 'color', - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.red.5}', - $type: 'color', - }, - }, - closed: { - muted: { - $value: '{borderColor.default}', - $type: 'color', - alpha: 0.4, - }, - emphasis: { - $value: '{borderColor.emphasis}', - $type: 'color', - }, - }, - }, codeMirror: { syntax: { fgColor: { diff --git a/src/tokens/functional/color/light/primitives-light.json5 b/src/tokens/functional/color/light/primitives-light.json5 index 83952a126..c8ddd10a6 100644 --- a/src/tokens/functional/color/light/primitives-light.json5 +++ b/src/tokens/functional/color/light/primitives-light.json5 @@ -693,415 +693,4 @@ }, }, }, - borderColor: { - default: { - $value: '{base.color.neutral.6}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-default) /* utility class: .color-border-default */', - }, - }, - }, - }, - muted: { - $value: '{borderColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-muted) /* utility class: .color-border-muted */', - }, - }, - }, - alpha: 0.7, - }, - emphasis: { - $value: '{base.color.neutral.8}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - }, - }, - }, - disabled: { - $value: '{base.color.neutral.8}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - }, - }, - alpha: 0.1, - }, - transparent: { - $value: '{base.color.transparent}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - }, - }, - }, - translucent: { - $value: '{base.color.neutral.13}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - }, - }, - alpha: 0.15, - }, - neutral: { - muted: { - $value: '{borderColor.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - }, - }, - }, - emphasis: { - $value: '{base.color.neutral.9}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - }, - }, - }, - }, - accent: { - muted: { - $value: '{base.color.blue.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-accent-muted) /* utility class: .color-border-accent */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.blue.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */', - }, - }, - }, - }, - }, - success: { - muted: { - $value: '{base.color.green.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-success-muted) /* utility class: .color-border-success */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.green.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-success-emphasis) /* utility class: .color-border-success-emphasis */', - }, - }, - }, - }, - }, - open: { - muted: { - $value: '{borderColor.success.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-open-muted) /* utility class: .color-border-open */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{borderColor.success.emphasis}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-open-emphasis) /* utility class: .color-border-open-emphasis */', - }, - }, - }, - }, - }, - attention: { - muted: { - $value: '{base.color.yellow.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-attention-muted) /* utility class: .color-border-attention */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.yellow.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-attention-emphasis) /* utility class: .color-border-attention-emphasis */', - }, - }, - }, - }, - }, - severe: { - muted: { - $value: '{base.color.orange.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-severe-muted) /* utility class: .color-border-severe */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.orange.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-severe-emphasis) /* utility class: .color-border-severe-emphasis */', - }, - }, - }, - }, - }, - danger: { - muted: { - $value: '{base.color.red.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-danger-muted) /* utility class: .color-border-danger */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.red.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-danger-emphasis) /* utility class: .color-border-danger-emphasis */', - }, - }, - }, - }, - }, - closed: { - muted: { - $value: '{base.color.red.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-closed-muted) /* utility class: .color-border-closed */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.red.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-closed-emphasis) /* utility class: .color-border-closed-emphasis */', - }, - }, - }, - }, - }, - done: { - muted: { - $value: '{base.color.purple.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-done-muted) /* utility class: .color-border-done */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.purple.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-done-emphasis)', - }, - }, - }, - }, - }, - upsell: { - muted: { - $value: '{borderColor.done.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-upsell-muted)', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{borderColor.done.emphasis}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-upsell-emphasis)', - }, - }, - }, - }, - }, - sponsors: { - muted: { - $value: '{base.color.pink.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-sponsors-muted) /* utility class: .color-border-sponsors */', - }, - }, - }, - alpha: 0.4, - }, - emphasis: { - $value: '{base.color.pink.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['borderColor'], - codeSyntax: { - web: 'var(--borderColor-sponsors-emphasis) /* utility class: .color-border-sponsors-emphasis */', - }, - }, - }, - }, - }, - }, }