From 502e3a3a1fd17f73ae4afdce6f82eb2b54f62b88 Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Fri, 21 Jun 2024 10:28:03 +0200
Subject: [PATCH 1/3] rm @ where it does not effect output

---
 .changeset/gold-owls-enjoy.md                 |   5 +
 .../dark.protanopia-deuteranopia.json5        |  24 +-
 .../dark/overrides/dark.tritanopia.json5      |  26 +-
 .../functional/color/dark/patterns-dark.json5 |  20 +-
 .../color/dark/primitives-dark.json5          | 264 ++++++++---------
 .../light/overrides/light.high-contrast.json5 |  12 +-
 .../light.protanopia-deuteranopia.json5       |  30 +-
 .../light/overrides/light.tritanopia.json5    |  24 +-
 .../color/light/patterns-light.json5          |  24 +-
 .../color/light/primitives-light.json5        | 268 ++++++++----------
 10 files changed, 311 insertions(+), 386 deletions(-)
 create mode 100644 .changeset/gold-owls-enjoy.md

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..c36d8e5dc 100644
--- a/src/tokens/functional/color/dark/primitives-dark.json5
+++ b/src/tokens/functional/color/dark/primitives-dark.json5
@@ -90,49 +90,43 @@
       },
     },
     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: {
@@ -142,154 +136,140 @@
       },
     },
     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 */',
           },
         },
       },
+      mix: {
+        color: '{base.color.red.4}',
+        weight: 0.05,
+      },
     },
     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 */',
           },
         },
       },

From 6a79551b1be539ce38dbb598bda7b6926a8fdf8f Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Fri, 21 Jun 2024 12:49:53 +0200
Subject: [PATCH 2/3] reset

---
 src/tokens/functional/color/dark/primitives-dark.json5 | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5
index c36d8e5dc..39b4f637c 100644
--- a/src/tokens/functional/color/dark/primitives-dark.json5
+++ b/src/tokens/functional/color/dark/primitives-dark.json5
@@ -194,10 +194,6 @@
           },
         },
       },
-      mix: {
-        color: '{base.color.red.4}',
-        weight: 0.05,
-      },
     },
     open: {
       $value: '{fgColor.success}',

From b4b825f16d914dacc455a65bf0d3fb0fa1b9d886 Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Fri, 21 Jun 2024 13:20:22 +0200
Subject: [PATCH 3/3] fix fgColor-accent

---
 src/tokens/functional/color/dark/primitives-dark.json5 | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5
index 39b4f637c..9b57a9483 100644
--- a/src/tokens/functional/color/dark/primitives-dark.json5
+++ b/src/tokens/functional/color/dark/primitives-dark.json5
@@ -129,10 +129,10 @@
             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: {