diff --git a/.changeset/gold-owls-enjoy.md b/.changeset/gold-owls-enjoy.md new file mode 100644 index 000000000..6c7641177 --- /dev/null +++ b/.changeset/gold-owls-enjoy.md @@ -0,0 +1,5 @@ +--- +'@primer/primitives': patch +--- + +rm @ where it does not effect output 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 2e1c05003..114d94b4a 100644 --- a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 @@ -6,28 +6,20 @@ { fgColor: { success: { - '@': { - $value: '{base.color.blue.3}', - $type: 'color', - }, + $value: '{base.color.blue.3}', + $type: 'color', }, danger: { - '@': { - $value: '{base.color.orange.4}', - $type: 'color', - }, + $value: '{base.color.orange.4}', + $type: 'color', }, open: { - '@': { - $value: '{base.color.orange.3}', - $type: 'color', - }, + $value: '{base.color.orange.3}', + $type: 'color', }, closed: { - '@': { - $value: '{base.color.neutral.3}', - $type: 'color', - }, + $value: '{base.color.neutral.3}', + $type: 'color', }, }, bgColor: { diff --git a/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 b/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 index f9e542cc9..22747b40c 100644 --- a/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 @@ -6,28 +6,20 @@ { fgColor: { success: { - '@': { - $value: '{base.color.blue.3}', - $type: 'color', - }, + $value: '{base.color.blue.3}', + $type: 'color', }, severe: { - '@': { - $value: '{base.color.red.4}', - $type: 'color', - }, + $value: '{base.color.red.4}', + $type: 'color', }, open: { - '@': { - $value: '{base.color.red.4}', - $type: 'color', - }, + $value: '{base.color.red.4}', + $type: 'color', }, closed: { - '@': { - $value: '{base.color.neutral.4}', - $type: 'color', - }, + $value: '{base.color.neutral.4}', + $type: 'color', }, }, bgColor: { @@ -224,6 +216,6 @@ }, }, }, - } + }, }, } diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5 index 9fdaefca4..f3041d173 100644 --- a/src/tokens/functional/color/dark/patterns-dark.json5 +++ b/src/tokens/functional/color/dark/patterns-dark.json5 @@ -381,7 +381,7 @@ danger: { fgColor: { rest: { - $value: '{fgColor.danger.@}', + $value: '{fgColor.danger}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1070,7 +1070,7 @@ invisible: { fgColor: { rest: { - $value: '{fgColor.accent.@}', + $value: '{fgColor.accent}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1272,7 +1272,7 @@ }, }, disabled: { - $value: '{fgColor.accent.@}', + $value: '{fgColor.accent}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1366,7 +1366,7 @@ danger: { fgColor: { rest: { - $value: '{fgColor.danger.@}', + $value: '{fgColor.danger}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1402,7 +1402,7 @@ }, }, disabled: { - $value: '{fgColor.danger.@}', + $value: '{fgColor.danger}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1417,7 +1417,7 @@ }, iconColor: { rest: { - $value: '{fgColor.danger.@}', + $value: '{fgColor.danger}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1695,7 +1695,7 @@ }, }, disabled: { - $value: '{fgColor.accent.@}', + $value: '{fgColor.accent}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1753,7 +1753,7 @@ }, fgColor: { rest: { - $value: '{fgColor.danger.@}', + $value: '{fgColor.danger}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1777,7 +1777,7 @@ }, }, disabled: { - $value: '{fgColor.danger.@}', + $value: '{fgColor.danger}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1828,7 +1828,7 @@ }, fgColor: { rest: { - $value: '{fgColor.link.@}', + $value: '{fgColor.link}', $type: 'color', $extensions: { 'org.primer.figma': { diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5 index edb490b19..9b57a9483 100644 --- a/src/tokens/functional/color/dark/primitives-dark.json5 +++ b/src/tokens/functional/color/dark/primitives-dark.json5 @@ -90,206 +90,182 @@ }, }, link: { - '@': { - $value: '{fgColor.accent.@}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-link) /* utility class: .color-fg-accent */', - }, + $value: '{fgColor.accent}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-link) /* utility class: .color-fg-accent */', }, }, }, }, neutral: { - '@': { - $value: '{base.color.neutral.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - group: 'semantic', - scopes: ['fgColor'], - }, + $value: '{base.color.neutral.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + group: 'semantic', + scopes: ['fgColor'], }, }, }, accent: { - '@': { - $value: '{base.color.blue.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-accent) /* utility class: .color-fg-accent */', - }, + $value: '{base.color.blue.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-accent) /* utility class: .color-fg-accent */', }, }, - mix: { - color: '{base.color.blue.5}', - weight: 0.35, - }, + }, + mix: { + color: '{base.color.blue.5}', + weight: 0.35, }, }, success: { - '@': { - $value: '{base.color.green.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-success) /* utility class: .color-fg-success */', - }, + $value: '{base.color.green.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-success) /* utility class: .color-fg-success */', }, }, }, }, attention: { - '@': { - $value: '{base.color.yellow.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-attention) /* utility class: .color-fg-attention */', - }, + $value: '{base.color.yellow.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + 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', - mode: 'dark', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */', - }, + $value: '{base.color.orange.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + 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', - mode: 'dark', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */', - }, + $value: '{base.color.red.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */', }, }, }, }, open: { - '@': { - $value: '{fgColor.success.@}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-open) /* utility class: .color-fg-open */', - }, + $value: '{fgColor.success}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-open) /* utility class: .color-fg-open */', }, }, }, }, closed: { - '@': { - $value: '{base.color.red.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-closed) /* utility class: .color-fg-closed */', - }, + $value: '{base.color.red.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + 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', - mode: 'dark', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-done) /* utility class: .color-fg-done */', - }, + $value: '{base.color.purple.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-done) /* utility class: .color-fg-done */', }, }, }, }, upsell: { - '@': { - $value: '{base.color.purple.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-upsell)', - }, + $value: '{base.color.purple.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-upsell)', }, }, }, }, sponsors: { - '@': { - $value: '{base.color.pink.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-sponsors) /* utility class: .color-fg-sponsors */', - }, + $value: '{base.color.pink.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-sponsors) /* utility class: .color-fg-sponsors */', }, }, }, 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 532d2e310..28fbd2ac2 100644 --- a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +++ b/src/tokens/functional/color/light/overrides/light.high-contrast.json5 @@ -15,16 +15,12 @@ $type: 'color', }, danger: { - '@': { - $value: '{base.color.red.6}', - $type: 'color', - }, + $value: '{base.color.red.6}', + $type: 'color', }, accent: { - '@': { - $value: '{base.color.blue.6}', - $type: 'color', - }, + $value: '{base.color.blue.6}', + $type: 'color', }, }, bgColor: { 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 79b104d96..9d4fde25c 100644 --- a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 @@ -6,31 +6,23 @@ { fgColor: { success: { - '@': { - $value: '{base.color.blue.5}', - $type: 'color', - }, + $value: '{base.color.blue.5}', + $type: 'color', }, open: { - '@': { - $value: '{base.color.orange.5}', - $type: 'color', - }, + $value: '{base.color.orange.5}', + $type: 'color', }, closed: { - '@': { - $value: '{base.color.neutral.5}', - $type: 'color', - }, + $value: '{base.color.neutral.5}', + $type: 'color', }, danger: { - '@': { - $value: '{base.color.orange.5}', - $type: 'color', - mix: { - color: '{base.color.orange.4}', - weight: 0.05, - }, + $value: '{base.color.orange.5}', + $type: 'color', + mix: { + color: '{base.color.orange.4}', + weight: 0.05, }, }, }, diff --git a/src/tokens/functional/color/light/overrides/light.tritanopia.json5 b/src/tokens/functional/color/light/overrides/light.tritanopia.json5 index 9228e114b..c7965ef69 100644 --- a/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +++ b/src/tokens/functional/color/light/overrides/light.tritanopia.json5 @@ -6,28 +6,20 @@ { fgColor: { success: { - '@': { - $value: '{base.color.blue.5}', - $type: 'color', - }, + $value: '{base.color.blue.5}', + $type: 'color', }, severe: { - '@': { - $value: '{base.color.red.5}', - $type: 'color', - }, + $value: '{base.color.red.5}', + $type: 'color', }, open: { - '@': { - $value: '{base.color.red.5}', - $type: 'color', - }, + $value: '{base.color.red.5}', + $type: 'color', }, closed: { - '@': { - $value: '{base.color.neutral.5}', - $type: 'color', - }, + $value: '{base.color.neutral.5}', + $type: 'color', }, }, bgColor: { diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5 index 019ef27b5..22f0b6b57 100644 --- a/src/tokens/functional/color/light/patterns-light.json5 +++ b/src/tokens/functional/color/light/patterns-light.json5 @@ -380,7 +380,7 @@ danger: { fgColor: { rest: { - $value: '{fgColor.danger.@}', + $value: '{fgColor.danger}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -392,7 +392,7 @@ }, }, hover: { - $value: '{fgColor.danger.@}', + $value: '{fgColor.danger}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1062,7 +1062,7 @@ invisible: { fgColor: { rest: { - $value: '{fgColor.accent.@}', + $value: '{fgColor.accent}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1074,7 +1074,7 @@ }, }, hover: { - $value: '{fgColor.accent.@}', + $value: '{fgColor.accent}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1228,7 +1228,7 @@ outline: { fgColor: { rest: { - $value: '{fgColor.accent.@}', + $value: '{fgColor.accent}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1264,7 +1264,7 @@ }, }, disabled: { - $value: '{fgColor.accent.@}', + $value: '{fgColor.accent}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1362,7 +1362,7 @@ danger: { fgColor: { rest: { - $value: '{fgColor.danger.@}', + $value: '{fgColor.danger}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1398,7 +1398,7 @@ }, }, disabled: { - $value: '{fgColor.danger.@}', + $value: '{fgColor.danger}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1413,7 +1413,7 @@ }, iconColor: { rest: { - $value: '{fgColor.danger.@}', + $value: '{fgColor.danger}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1690,7 +1690,7 @@ }, }, disabled: { - $value: '{fgColor.accent.@}', + $value: '{fgColor.accent}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1776,7 +1776,7 @@ }, }, disabled: { - $value: '{fgColor.danger.@}', + $value: '{fgColor.danger}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1825,7 +1825,7 @@ }, fgColor: { rest: { - $value: '{fgColor.link.@}', + $value: '{fgColor.link}', $type: 'color', $extensions: { 'org.primer.figma': { diff --git a/src/tokens/functional/color/light/primitives-light.json5 b/src/tokens/functional/color/light/primitives-light.json5 index 20b6c2b98..14f5d5996 100644 --- a/src/tokens/functional/color/light/primitives-light.json5 +++ b/src/tokens/functional/color/light/primitives-light.json5 @@ -86,206 +86,182 @@ }, }, link: { - '@': { - $value: '{fgColor.accent.@}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-link) /* utility class: .color-fg-accent */', - }, + $value: '{fgColor.accent}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-link) /* utility class: .color-fg-accent */', }, }, }, }, neutral: { - '@': { - $value: '{base.color.neutral.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - group: 'semantic', - scopes: ['fgColor'], - }, + $value: '{base.color.neutral.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + group: 'semantic', + scopes: ['fgColor'], }, }, }, accent: { - '@': { - $value: '{base.color.blue.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-accent) /* utility class: .color-fg-accent */', - }, + $value: '{base.color.blue.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + 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', - mode: 'light', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-success) /* utility class: .color-fg-success */', - }, + $value: '{base.color.green.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-success) /* utility class: .color-fg-success */', }, }, }, }, attention: { - '@': { - $value: '{base.color.yellow.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-attention) /* utility class: .color-fg-attention */', - }, + $value: '{base.color.yellow.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + 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', - mode: 'light', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */', - }, + $value: '{base.color.orange.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */', }, }, }, }, danger: { - '@': { - $value: '{base.color.red.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */', - }, + $value: '{base.color.red.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */', }, }, - mix: { - color: '{base.color.red.4}', - weight: 0.05, - }, + }, + mix: { + color: '{base.color.red.4}', + weight: 0.05, }, }, open: { - '@': { - $value: '{fgColor.success.@}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-open) /* utility class: .color-fg-open */', - }, + $value: '{fgColor.success}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-open) /* utility class: .color-fg-open */', }, }, }, }, closed: { - '@': { - $value: '{fgColor.danger.@}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-closed) /* utility class: .color-fg-closed */', - }, + $value: '{fgColor.danger}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + 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', - mode: 'light', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-done) /* utility class: .color-fg-done */', - }, + $value: '{base.color.purple.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-done) /* utility class: .color-fg-done */', }, }, }, }, upsell: { - '@': { - $value: '{base.color.purple.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-upsell)', - }, + $value: '{base.color.purple.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-upsell)', }, }, }, }, sponsors: { - '@': { - $value: '{base.color.pink.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - group: 'semantic', - scopes: ['fgColor'], - codeSyntax: { - web: 'var(--fgColor-sponsors) /* utility class: .color-fg-sponsors */', - }, + $value: '{base.color.pink.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + group: 'semantic', + scopes: ['fgColor'], + codeSyntax: { + web: 'var(--fgColor-sponsors) /* utility class: .color-fg-sponsors */', }, }, },