diff --git a/src/tokens/base/color/dark/dark.high-contrast.json5 b/src/tokens/base/color/dark/dark.high-contrast.json5 index c11f0036b..d51baa4cd 100644 --- a/src/tokens/base/color/dark/dark.high-contrast.json5 +++ b/src/tokens/base/color/dark/dark.high-contrast.json5 @@ -14,15 +14,6 @@ }, }, }, - white: { - $value: '#ffffff', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'base/color/dark-high-contrast', - }, - }, - }, blue: { '0': { $value: '#caeaff', diff --git a/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 b/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 index b467fa263..2dadbf94a 100644 --- a/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 @@ -28,25 +28,6 @@ }, }, }, - fgColor: { - default: { - $value: '{base.color.neutral.11}', - $type: 'color', - }, - onEmphasis: { - $value: '{base.color.neutral.12}', - $type: 'color', - }, - disabled: { - $value: '{base.color.neutral.8}', - $type: 'color', - alpha: 1, - }, - accent: { - $value: '#478be6', - $type: 'color', - }, - }, 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 e69c7ab09..ab49d3365 100644 --- a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 @@ -4,48 +4,6 @@ * @description All overwrites for functional color tokens for dark high contrast color mode are in this file */ { - fgColor: { - default: { - $value: '{base.color.neutral.13}', - $type: 'color', - }, - muted: { - $value: '{base.color.neutral.10}', - $type: 'color', - }, - disabled: { - $value: '{base.color.neutral.8}', - $type: 'color', - }, - neutral: { - $value: '{base.color.neutral.11}', - $type: 'color', - }, - accent: { - $value: '#74B9FF', - $type: 'color', - }, - success: { - $value: '#2BD853', - $type: 'color', - }, - danger: { - $value: '{base.color.red.3}', - $type: 'color', - }, - severe: { - $value: '{base.color.orange.3}', - $type: 'color', - }, - done: { - $value: '#D3ABFF', - $type: 'color', - }, - sponsors: { - $value: '#FF90C8', - $type: 'color', - }, - }, bgColor: { default: { $value: '{base.color.neutral.0}', 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 ad0c3089e..a0fb00519 100644 --- a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 @@ -4,24 +4,6 @@ * @description All overwrites for functional color tokens for dark protanopia and deuteranopia color mode are in this file */ { - fgColor: { - success: { - $value: '{base.color.blue.3}', - $type: 'color', - }, - danger: { - $value: '{base.color.orange.3}', - $type: 'color', - }, - open: { - $value: '{base.color.blue.3}', - $type: 'color', - }, - closed: { - $value: '{fgColor.muted}', - $type: 'color', - }, - }, bgColor: { success: { muted: { diff --git a/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 b/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 index 57b38a1de..e81c5d0cb 100644 --- a/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 @@ -4,24 +4,6 @@ * @description All overwrites for functional color tokens for this theme are in this file */ { - fgColor: { - success: { - $value: '{base.color.blue.3}', - $type: 'color', - }, - severe: { - $value: '{base.color.red.4}', - $type: 'color', - }, - open: { - $value: '{base.color.red.4}', - $type: 'color', - }, - closed: { - $value: '{fgColor.muted}', - $type: 'color', - }, - }, bgColor: { success: { muted: { diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5 index f379c595f..812bc76fc 100644 --- a/src/tokens/functional/color/dark/primitives-dark.json5 +++ b/src/tokens/functional/color/dark/primitives-dark.json5 @@ -1,277 +1,4 @@ { - fgColor: { - default: { - $value: '{base.color.neutral.12}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-default) /* utility class: .color-fg-default */', - }, - }, - }, - }, - muted: { - $value: '{base.color.neutral.9}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-muted) /* utility class: .color-fg-muted */', - }, - }, - }, - }, - onEmphasis: { - $value: '{base.color.neutral.13}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-onEmphasis) /* utility class: .color-fg-on-emphasis */', - }, - }, - }, - }, - onInverse: { - $value: '{base.color.neutral.0}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - }, - }, - }, - white: { - $value: '{base.color.neutral.13}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - }, - }, - }, - black: { - $value: '{base.color.neutral.0}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - }, - }, - }, - disabled: { - $value: '{base.color.neutral.8}', - $type: 'color', - alpha: 0.6, - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - }, - }, - }, - link: { - $value: '{fgColor.accent}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-link) /* utility class: .color-fg-accent */', - }, - }, - }, - }, - neutral: { - $value: '{base.color.neutral.9}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - }, - }, - }, - accent: { - $value: '#4493F8', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-accent) /* utility class: .color-fg-accent */', - }, - }, - }, - }, - success: { - $value: '{base.color.green.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-success) /* utility class: .color-fg-success */', - }, - }, - }, - }, - open: { - $value: '{fgColor.success}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-open) /* utility class: .color-fg-open */', - }, - }, - }, - }, - attention: { - $value: '{base.color.yellow.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-attention) /* utility class: .color-fg-attention */', - }, - }, - }, - }, - severe: { - $value: '{base.color.orange.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */', - }, - }, - }, - }, - danger: { - $value: '{base.color.red.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */', - }, - }, - }, - }, - closed: { - $value: '{fgColor.danger}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-closed) /* utility class: .color-fg-closed */', - }, - }, - }, - }, - done: { - $value: '{base.color.purple.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-done) /* utility class: .color-fg-done */', - }, - }, - }, - }, - upsell: { - $value: '{fgColor.done}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-upsell)', - }, - }, - }, - }, - sponsors: { - $value: '{base.color.pink.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-sponsors) /* utility class: .color-fg-sponsors */', - }, - }, - }, - }, - }, bgColor: { default: { $value: '{base.color.neutral.1}', diff --git a/src/tokens/functional/color/fgColor.json5 b/src/tokens/functional/color/fgColor.json5 new file mode 100644 index 000000000..0965ee500 --- /dev/null +++ b/src/tokens/functional/color/fgColor.json5 @@ -0,0 +1,342 @@ +{ + fgColor: { + default: { + $value: '{base.color.neutral.13}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-default) /* utility class: .color-fg-default */', + }, + }, + 'org.primer.overrides': { + dark: '{base.color.neutral.12}', + "dark-high-contrast": '{base.color.neutral.13}', + "dark-dimmed": '{base.color.neutral.11}', + }, + }, + }, + muted: { + $value: '{base.color.neutral.9}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-muted) /* utility class: .color-fg-muted */', + }, + }, + 'org.primer.overrides': { + 'light-high-contrast': '{base.color.neutral.10}', + 'dark-high-contrast': '{base.color.neutral.10}', + }, + }, + }, + onEmphasis: { + $value: '{base.color.neutral.0}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-onEmphasis) /* utility class: .color-fg-on-emphasis */', + }, + }, + 'org.primer.overrides': { + dark: '{base.color.neutral.13}', + "dark-dimmed": '{base.color.neutral.12}', + }, + }, + }, + onInverse: { + $value: '{base.color.neutral.0}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + }, + }, + }, + white: { + $value: '{base.color.neutral.0}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + }, + 'org.primer.overrides': { + dark: '{base.color.neutral.13}', + }, + }, + }, + black: { + $value: '{base.color.neutral.13}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + }, + 'org.primer.overrides': { + dark: '{base.color.neutral.0}', + }, + }, + }, + disabled: { + $value: '{base.color.neutral.8}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + }, + 'org.primer.overrides': { + dark: { + $value: '{base.color.neutral.8}', + alpha: 0.6, + }, + "dark-dimmed": '{base.color.neutral.8}', + 'light-high-contrast': '{base.color.neutral.9}', + 'dark-high-contrast': '{base.color.neutral.8}', + }, + }, + }, + link: { + $value: '{fgColor.accent}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-link) /* utility class: .color-fg-accent */', + }, + }, + }, + }, + neutral: { + $value: '{base.color.neutral.9}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + }, + 'org.primer.overrides': { + 'light-high-contrast': '{base.color.neutral.11}', + 'dark-high-contrast': '{base.color.neutral.11}', + }, + }, + }, + accent: { + $value: '{base.color.blue.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-accent) /* utility class: .color-fg-accent */', + }, + }, + 'org.primer.overrides': { + dark: '#4493F8', + "dark-dimmed": '#478be6', + 'dark-high-contrast': '#74B9FF', + 'light-high-contrast': '{base.color.blue.6}', + }, + }, + }, + success: { + $value: '{base.color.green.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-success) /* utility class: .color-fg-success */', + }, + }, + 'org.primer.overrides': { + dark: '{base.color.green.3}', + 'dark-high-contrast': '#2BD853', + 'light-high-contrast': '{base.color.green.6}', + "dark-protanopia-deuteranopia": '{base.color.blue.3}', + 'light-protanopia-deuteranopia': '{base.color.blue.5}', + "dark-tritanopia": '{base.color.blue.3}', + "light-tritanopia": '{base.color.blue.5}', + }, + }, + }, + open: { + $value: '{fgColor.success}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-open) /* utility class: .color-fg-open */', + }, + }, + 'org.primer.overrides': { + "dark-protanopia-deuteranopia": '{base.color.blue.3}', + 'light-protanopia-deuteranopia': '{base.color.blue.5}', + "dark-tritanopia": '{base.color.red.4}', + "light-tritanopia": '{base.color.red.5}', + }, + }, + }, + attention: { + $value: '{base.color.yellow.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-attention) /* utility class: .color-fg-attention */', + }, + }, + 'org.primer.overrides': { + dark: '{base.color.yellow.3}', + 'light-high-contrast': '{base.color.yellow.6}', + }, + }, + }, + severe: { + $value: '{base.color.orange.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */', + }, + }, + 'org.primer.overrides': { + dark: '{base.color.orange.4}', + 'dark-high-contrast': '{base.color.orange.3}', + 'light-high-contrast': '{base.color.orange.6}', + "dark-tritanopia": '{base.color.red.4}', + "light-tritanopia": '{base.color.red.5}', + }, + }, + }, + danger: { + $value: '#d1242f', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */', + }, + }, + 'org.primer.overrides': { + dark: '{base.color.red.4}', + "dark-protanopia-deuteranopia": '{base.color.orange.3}', + 'light-protanopia-deuteranopia': '{base.color.orange.5}', + 'dark-high-contrast': '{base.color.red.3}', + 'light-high-contrast': '{base.color.red.6}', + }, + }, + }, + closed: { + $value: '{fgColor.danger}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-closed) /* utility class: .color-fg-closed */', + }, + }, + 'org.primer.overrides': { + "dark-protanopia-deuteranopia": '{fgColor.muted}', + 'light-protanopia-deuteranopia': '{fgColor.muted}', + "dark-tritanopia": '{fgColor.muted}', + "light-tritanopia": '{fgColor.muted}', + }, + }, + }, + done: { + $value: '{base.color.purple.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-done) /* utility class: .color-fg-done */', + }, + }, + 'org.primer.overrides': { + dark: '{base.color.purple.4}', + 'dark-high-contrast': '#D3ABFF', + 'light-high-contrast': '{base.color.purple.6}', + }, + }, + }, + upsell: { + $value: '{fgColor.done}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-upsell)', + }, + }, + }, + }, + sponsors: { + $value: '{base.color.pink.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-sponsors) /* utility class: .color-fg-sponsors */', + }, + }, + 'org.primer.overrides': { + dark: '{base.color.pink.4}', + 'dark-high-contrast': '#FF90C8', + 'light-high-contrast': '{base.color.pink.6}', + }, + }, + }, + }, +} 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 035b852c2..da7f21dbe 100644 --- a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +++ b/src/tokens/functional/color/light/overrides/light.high-contrast.json5 @@ -4,52 +4,6 @@ * @description All overwrites for functional color tokens for light high contrast color mode are in this file */ { - fgColor: { - muted: { - $value: '{base.color.neutral.10}', - $type: 'color', - }, - disabled: { - $value: '{base.color.neutral.9}', - $type: 'color', - }, - neutral: { - $value: '{base.color.neutral.11}', - $type: 'color', - }, - success: { - $value: '{base.color.green.6}', - $type: 'color', - }, - danger: { - $value: '{base.color.red.6}', - $type: 'color', - }, - attention: { - $value: '{base.color.yellow.6}', - $type: 'color', - }, - severe: { - $value: '{base.color.orange.6}', - $type: 'color', - }, - done: { - $value: '{base.color.purple.6}', - $type: 'color', - }, - accent: { - $value: '{base.color.blue.6}', - $type: 'color', - }, - accent: { - $value: '{base.color.blue.6}', - $type: 'color', - }, - sponsors: { - $value: '{base.color.pink.6}', - $type: 'color', - }, - }, bgColor: { muted: { $value: '{base.color.neutral.3}', 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 66964e805..ba941fab3 100644 --- a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 @@ -4,24 +4,6 @@ * @description All overwrites for functional color tokens for light protanopia and deuteranopia color mode are in this file */ { - fgColor: { - success: { - $value: '{base.color.blue.5}', - $type: 'color', - }, - open: { - $value: '{base.color.blue.5}', - $type: 'color', - }, - closed: { - $value: '{fgColor.muted}', - $type: 'color', - }, - danger: { - $value: '{base.color.orange.5}', - $type: 'color', - }, - }, bgColor: { success: { muted: { diff --git a/src/tokens/functional/color/light/overrides/light.tritanopia.json5 b/src/tokens/functional/color/light/overrides/light.tritanopia.json5 index 970e0c80d..08d3e2e13 100644 --- a/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +++ b/src/tokens/functional/color/light/overrides/light.tritanopia.json5 @@ -4,24 +4,6 @@ * @description All overwrites for functional color tokens for this theme are in this file */ { - fgColor: { - success: { - $value: '{base.color.blue.5}', - $type: 'color', - }, - severe: { - $value: '{base.color.red.5}', - $type: 'color', - }, - open: { - $value: '{base.color.red.5}', - $type: 'color', - }, - closed: { - $value: '{fgColor.muted}', - $type: 'color', - }, - }, bgColor: { success: { muted: { diff --git a/src/tokens/functional/color/light/primitives-light.json5 b/src/tokens/functional/color/light/primitives-light.json5 index c8ddd10a6..9ed8b3b1d 100644 --- a/src/tokens/functional/color/light/primitives-light.json5 +++ b/src/tokens/functional/color/light/primitives-light.json5 @@ -1,257 +1,4 @@ { - fgColor: { - default: { - $value: '{base.color.neutral.13}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-default) /* utility class: .color-fg-default */', - }, - }, - }, - }, - muted: { - $value: '{base.color.neutral.9}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-muted) /* utility class: .color-fg-muted */', - }, - }, - }, - }, - onEmphasis: { - $value: '{base.color.neutral.0}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-onEmphasis) /* utility class: .color-fg-on-emphasis */', - }, - }, - }, - }, - onInverse: { - $value: '{base.color.neutral.0}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - }, - }, - }, - white: { - $value: '{base.color.neutral.0}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - }, - }, - }, - black: { - $value: '{base.color.neutral.13}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - }, - }, - }, - disabled: { - $value: '{base.color.neutral.8}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - }, - }, - }, - link: { - $value: '{fgColor.accent}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-link) /* utility class: .color-fg-accent */', - }, - }, - }, - }, - neutral: { - $value: '{base.color.neutral.9}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - }, - }, - }, - accent: { - $value: '{base.color.blue.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-accent) /* utility class: .color-fg-accent */', - }, - }, - }, - }, - success: { - $value: '{base.color.green.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-success) /* utility class: .color-fg-success */', - }, - }, - }, - }, - open: { - $value: '{fgColor.success}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-open) /* utility class: .color-fg-open */', - }, - }, - }, - }, - attention: { - $value: '{base.color.yellow.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-attention) /* utility class: .color-fg-attention */', - }, - }, - }, - }, - severe: { - $value: '{base.color.orange.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */', - }, - }, - }, - }, - danger: { - $value: '#d1242f', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */', - }, - }, - }, - }, - closed: { - $value: '{fgColor.danger}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-closed) /* utility class: .color-fg-closed */', - }, - }, - }, - }, - done: { - $value: '{base.color.purple.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-done) /* utility class: .color-fg-done */', - }, - }, - }, - }, - upsell: { - $value: '{fgColor.done}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-upsell)', - }, - }, - }, - }, - sponsors: { - $value: '{base.color.pink.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-sponsors) /* utility class: .color-fg-sponsors */', - }, - }, - }, - }, - }, bgColor: { default: { $value: '{base.color.neutral.0}',