From 00cee18a54c9087bcf25289434be972f90a17c4c Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Fri, 31 Jan 2025 11:48:34 +0100
Subject: [PATCH] combine dark and light default button into button.json5

---
 src/tokens/component/button.json5             | 922 +++++++++++++++++
 .../functional/color/dark/patterns-dark.json5 | 927 ------------------
 .../color/light/patterns-light.json5          | 921 -----------------
 3 files changed, 922 insertions(+), 1848 deletions(-)
 create mode 100644 src/tokens/component/button.json5

diff --git a/src/tokens/component/button.json5 b/src/tokens/component/button.json5
new file mode 100644
index 000000000..a295bb476
--- /dev/null
+++ b/src/tokens/component/button.json5
@@ -0,0 +1,922 @@
+{  button: {	
+    default: {	
+      fgColor: {	
+        rest: {	
+          $value: '{control.fgColor.rest}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+      },	
+      bgColor: {	
+        rest: {	
+          $value: '{control.bgColor.rest}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+        hover: {	
+          $value: '{control.bgColor.hover}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+        active: {	
+          $value: '{control.bgColor.active}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+        selected: {	
+          $value: '{control.bgColor.active}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+        disabled: {	
+          $value: '{control.bgColor.disabled}',	
+          $type: 'color',	
+        },	
+      },	
+      borderColor: {	
+        rest: {	
+          $value: '{control.borderColor.rest}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['borderColor'],	
+            },	
+          },	
+        },	
+        hover: {	
+          $value: '{control.borderColor.rest}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['borderColor'],	
+            },	
+          },	
+        },	
+        active: {	
+          $value: '{control.borderColor.rest}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['borderColor'],	
+            },	
+          },	
+        },	
+        disabled: {	
+          $value: '{control.borderColor.disabled}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['borderColor'],	
+            },	
+          },	
+        },	
+      },	
+    },	
+    primary: {	
+      fgColor: {	
+        rest: {	
+          $value: '{fgColor.white}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+        disabled: {	
+          $value: '{base.color.neutral.0}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+          alpha: 0.8,	
+        },	
+      },	
+      iconColor: {	
+        rest: {	
+          $value: '{fgColor.white}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+          alpha: 0.8,	
+        },	
+      },	
+      bgColor: {	
+        rest: {	
+          $value: '{bgColor.success.emphasis}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+        hover: {	
+          $value: '#1c8139',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+        active: {	
+          $value: '#197935',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+        disabled: {	
+          $value: '#95d8a6',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+      },	
+      borderColor: {	
+        rest: {	
+          $value: '{base.color.neutral.13}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['borderColor'],	
+            },	
+          },	
+          alpha: 0.15,	
+        },	
+        hover: {	
+          $value: '{button.primary.borderColor.rest}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['borderColor'],	
+            },	
+          },	
+        },	
+        active: {	
+          $value: '{button.primary.borderColor.rest}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['borderColor'],	
+            },	
+          },	
+        },	
+        disabled: {	
+          $value: '{button.primary.bgColor.disabled}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['borderColor'],	
+            },	
+          },	
+        },	
+      },	
+    },	
+    invisible: {	
+      fgColor: {	
+        rest: {	
+          $value: '{control.fgColor.rest}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+        hover: {	
+          $value: '{control.fgColor.rest}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+        active: {	
+          $value: '{control.fgColor.rest}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+        disabled: {	
+          $value: '{control.fgColor.disabled}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+      },	
+      iconColor: {	
+        rest: {	
+          $value: '{fgColor.muted}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+        hover: {	
+          $value: '{fgColor.muted}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+        disabled: {	
+          $value: '{control.fgColor.disabled}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+      },	
+      bgColor: {	
+        rest: {	
+          $value: '{control.transparent.bgColor.rest}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+        hover: {	
+          $value: '{control.transparent.bgColor.hover}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+        active: {	
+          $value: '{control.transparent.bgColor.active}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+        disabled: {	
+          $value: '{base.color.transparent}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+      },	
+      borderColor: {	
+        rest: {	
+          $value: '{control.transparent.borderColor.rest}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['borderColor'],	
+            },	
+          },	
+        },	
+        hover: {	
+          $value: '{control.transparent.borderColor.hover}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['borderColor'],	
+            },	
+          },	
+        },	
+        disabled: {	
+          $value: '{base.color.transparent}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['borderColor'],	
+            },	
+          },	
+        },	
+      },	
+    },	
+    outline: {	
+      fgColor: {	
+        rest: {	
+          $value: '{fgColor.accent}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+        hover: {	
+          $value: '{base.color.neutral.0}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+        active: {	
+          $value: '{base.color.neutral.0}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+        disabled: {	
+          $value: '{fgColor.accent}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+          alpha: 0.5,	
+        },	
+      },	
+      bgColor: {	
+        rest: {	
+          $value: '{control.bgColor.rest}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+        hover: {	
+          $value: '{bgColor.accent.emphasis}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+        active: {	
+          $value: '#0757ba',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+        disabled: {	
+          $value: '{control.bgColor.disabled}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+      },	
+      borderColor: {	
+        hover: {	
+          $value: '{button.primary.borderColor.hover}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['borderColor'],	
+            },	
+          },	
+        },	
+        active: {	
+          $value: '{button.outline.borderColor.hover}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['borderColor'],	
+            },	
+          },	
+        },	
+      },	
+    },	
+    danger: {	
+      fgColor: {	
+        rest: {	
+          $value: '{fgColor.danger}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+        hover: {	
+          $value: '{base.color.neutral.0}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+        active: {	
+          $value: '{base.color.neutral.0}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+        disabled: {	
+          $value: '{fgColor.danger}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+          alpha: 0.5,	
+        },	
+      },	
+      iconColor: {	
+        rest: {	
+          $value: '{fgColor.danger}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+        hover: {	
+          $value: '{base.color.neutral.0}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['fgColor'],	
+            },	
+          },	
+        },	
+      },	
+      bgColor: {	
+        rest: {	
+          $value: '{control.bgColor.rest}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+        hover: {	
+          $value: '{base.color.red.6}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+        active: {	
+          $value: '#8b0820',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+        disabled: {	
+          $value: '{control.bgColor.disabled}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['bgColor'],	
+            },	
+          },	
+        },	
+      },	
+      borderColor: {	
+        rest: {	
+          $value: '{control.borderColor.rest}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['borderColor'],	
+            },	
+          },	
+        },	
+        hover: {	
+          $value: '{button.primary.borderColor.rest}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['borderColor'],	
+            },	
+          },	
+        },	
+        active: {	
+          $value: '{button.danger.borderColor.hover}',	
+          $type: 'color',	
+          $extensions: {	
+            'org.primer.figma': {	
+              collection: 'mode',	
+              group: 'component (internal)',	
+              scopes: ['borderColor'],	
+            },	
+          },	
+        },	
+      },	
+    },	
+    inactive: {	
+      fgColor: {	
+        $value: '{base.color.neutral.9}',	
+        $type: 'color',	
+        $extensions: {	
+          'org.primer.figma': {	
+            collection: 'mode',	
+            group: 'component (internal)',	
+            scopes: ['fgColor'],	
+          },	
+        },	
+      },	
+      bgColor: {	
+        $value: '{base.color.neutral.3}',	
+        $type: 'color',	
+        $extensions: {	
+          'org.primer.figma': {	
+            collection: 'mode',	
+            group: 'component (internal)',	
+            scopes: ['bgColor'],	
+          },	
+        },	
+      },	
+    },	
+    star: {	
+      iconColor: {	
+        $value: '{base.color.yellow.2}',	
+        $type: 'color',	
+        $extensions: {	
+          'org.primer.figma': {	
+            collection: 'mode',	
+            group: 'component (internal)',	
+            scopes: ['bgColor'],	
+          },	
+        },
+      },	
+    },	
+  },
+  buttonCounter: {
+    default: {
+      bgColor: {
+        rest: {
+          $value: '{bgColor.neutral.muted}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+      },
+    },
+    invisible: {
+      bgColor: {
+        rest: {
+          $value: '{bgColor.neutral.muted}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+      },
+    },
+    primary: {
+      bgColor: {
+        rest: {
+          $value: '{base.color.green.9}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+          alpha: 0.2,
+        },
+      },
+    },
+    outline: {
+      bgColor: {
+        rest: {
+          $value: '{bgColor.accent.emphasis}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+          alpha: 0.1,
+        },
+        hover: {
+          $value: '{base.color.neutral.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+          alpha: 0.2,
+        },
+        disabled: {
+          $value: '{bgColor.accent.emphasis}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+          alpha: 0.05,
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.color.blue.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['fgColor'],
+            },
+          },
+        },
+        hover: {
+          $value: '{base.color.neutral.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['fgColor'],
+            },
+          },
+        },
+        disabled: {
+          $value: '{fgColor.accent}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['fgColor'],
+            },
+          },
+          alpha: 0.5,
+        },
+      },
+    },
+    danger: {
+      bgColor: {
+        hover: {
+          $value: '{base.color.neutral.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+          alpha: 0.2,
+        },
+        disabled: {
+          $value: '{bgColor.danger.emphasis}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+          alpha: 0.05,
+        },
+        rest: {
+          $value: '{bgColor.danger.emphasis}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+          alpha: 0.1,
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '#c21c2c',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['fgColor'],
+            },
+          },
+        },
+        hover: {
+          $value: '{base.color.neutral.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['fgColor'],
+            },
+          },
+        },
+        disabled: {
+          $value: '{fgColor.danger}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['fgColor'],
+            },
+          },
+          alpha: 0.5,
+        },
+      },
+    },
+  },
+  }
\ No newline at end of file
diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5
index 2aec57918..9d8b86550 100644
--- a/src/tokens/functional/color/dark/patterns-dark.json5
+++ b/src/tokens/functional/color/dark/patterns-dark.json5
@@ -1,931 +1,4 @@
 {
-  button: {	
-    default: {	
-      fgColor: {	
-        rest: {	
-          $value: '{control.fgColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-      },	
-      bgColor: {	
-        rest: {	
-          $value: '{control.bgColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{control.bgColor.hover}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{control.bgColor.active}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        selected: {	
-          $value: '{control.bgColor.active}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{control.bgColor.disabled}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-      },	
-      borderColor: {	
-        rest: {	
-          $value: '{control.borderColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{button.default.borderColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{button.default.borderColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{control.borderColor.disabled}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-      },	
-    },	
-    primary: {	
-      fgColor: {	
-        rest: {	
-          $value: '{fgColor.white}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{base.color.neutral.13}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-          alpha: 0.4,	
-        },	
-      },	
-      iconColor: {	
-        rest: {	
-          $value: '{fgColor.white}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-      },	
-      bgColor: {	
-        rest: {	
-          $value: '{bgColor.success.emphasis}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '#29903B',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '#2E9A40',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '#105823',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-      },	
-      borderColor: {	
-        rest: {	
-          $value: '{base.color.neutral.13}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-          alpha: 0.1,	
-        },	
-        hover: {	
-          $value: '{button.primary.borderColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{button.primary.borderColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '#105823',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-      },	
-    },	
-    invisible: {	
-      fgColor: {	
-        rest: {	
-          $value: '{control.fgColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{control.fgColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{control.fgColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{control.fgColor.disabled}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-      },	
-      iconColor: {	
-        rest: {	
-          $value: '{fgColor.muted}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{fgColor.muted}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{control.fgColor.disabled}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-      },	
-      bgColor: {	
-        rest: {	
-          $value: '{control.transparent.bgColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{control.transparent.bgColor.hover}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{control.transparent.bgColor.active}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{base.color.transparent}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-      },	
-      borderColor: {	
-        rest: {	
-          $value: '{control.transparent.borderColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{control.transparent.borderColor.hover}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{base.color.transparent}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-      },	
-    },	
-    outline: {	
-      fgColor: {	
-        rest: {	
-          $value: '{base.color.blue.4}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{base.color.blue.3}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{base.color.neutral.13}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{fgColor.accent}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-          alpha: 0.5,	
-        },	
-      },	
-      bgColor: {	
-        rest: {	
-          $value: '{base.color.neutral.12}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{control.bgColor.hover}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{base.color.blue.7}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{control.bgColor.disabled}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-      },	
-      borderColor: {	
-        hover: {	
-          $value: '{button.default.borderColor.hover}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        selected: {	
-          $value: '{button.outline.borderColor.hover}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-      },	
-    },	
-    danger: {	
-      fgColor: {	
-        rest: {	
-          $value: '#FA5E55',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{base.color.neutral.13}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{base.color.neutral.13}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{fgColor.danger}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-          alpha: 0.5,	
-        },	
-      },	
-      iconColor: {	
-        rest: {	
-          $value: '#FA5E55',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{base.color.neutral.13}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-      },	
-      bgColor: {	
-        rest: {	
-          $value: '{control.bgColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{base.color.red.6}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '#D03533',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{control.bgColor.disabled}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-      },	
-      borderColor: {	
-        rest: {	
-          $value: '{control.borderColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{button.primary.borderColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{button.danger.borderColor.hover}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-      },	
-    },	
-    inactive: {	
-      fgColor: {	
-        $value: '{base.color.neutral.9}',	
-        $type: 'color',	
-        $extensions: {	
-          'org.primer.figma': {	
-            collection: 'mode',	
-            group: 'component (internal)',	
-            scopes: ['fgColor'],	
-          },	
-        },	
-      },	
-      bgColor: {	
-        $value: '{base.color.neutral.4}',	
-        $type: 'color',	
-        $extensions: {	
-          'org.primer.figma': {	
-            collection: 'mode',	
-            group: 'component (internal)',	
-            scopes: ['bgColor'],	
-          },	
-        },	
-      },	
-    },	
-    star: {	
-      iconColor: {	
-        $value: '{base.color.yellow.2}',	
-        $type: 'color',	
-        $extensions: {	
-          'org.primer.figma': {	
-            collection: 'mode',	
-            group: 'component (internal)',	
-            scopes: ['bgColor'],
-          },	
-        },	
-      },	
-    },	
-  },
-  buttonCounter: {
-    default: {
-      bgColor: {
-        rest: {
-          $value: '{base.color.neutral.6}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-        },
-      },
-    },
-    invisible: {
-      bgColor: {
-        rest: {
-          $value: '{bgColor.neutral.muted}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-        },
-      },
-    },
-    primary: {
-      bgColor: {
-        rest: {
-          $value: '{base.color.green.9}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-          alpha: 0.2,
-        },
-      },
-    },
-    outline: {
-      bgColor: {
-        rest: {
-          $value: '{base.color.blue.9}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-          alpha: 0.2,
-        },
-        hover: {
-          $value: '{base.color.blue.9}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-          alpha: 0.2,
-        },
-        disabled: {
-          $value: '{bgColor.accent.emphasis}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-          alpha: 0.05,
-        },
-      },
-      fgColor: {
-        rest: {
-          $value: '{base.color.blue.4}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['fgColor'],
-            },
-          },
-        },
-        hover: {
-          $value: '{base.color.blue.3}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['fgColor'],
-            },
-          },
-        },
-        disabled: {
-          $value: '{fgColor.accent}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['fgColor'],
-            },
-          },
-          alpha: 0.5,
-        },
-      },
-    },
-    danger: {
-      bgColor: {
-        hover: {
-          $value: '{base.color.neutral.13}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-          alpha: 0.2,
-        },
-        disabled: {
-          $value: '{bgColor.danger.emphasis}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-          alpha: 0.05,
-        },
-        rest: {
-          $value: '{base.color.red.9}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-          alpha: 0.2,
-        },
-      },
-      fgColor: {
-        rest: {
-          $value: '{fgColor.danger}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['fgColor'],
-            },
-          },
-        },
-        hover: {
-          $value: '{base.color.neutral.13}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['fgColor'],
-            },
-          },
-        },
-        disabled: {
-          $value: '{fgColor.danger}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['fgColor'],
-            },
-          },
-          alpha: 0.5,
-        },
-      },
-    },
-  },
   menu: {
     bgColor: {
       active: {
diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5
index d94df05fa..13f37833f 100644
--- a/src/tokens/functional/color/light/patterns-light.json5
+++ b/src/tokens/functional/color/light/patterns-light.json5
@@ -1,925 +1,4 @@
 {
-  button: {	
-    default: {	
-      fgColor: {	
-        rest: {	
-          $value: '{control.fgColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-      },	
-      bgColor: {	
-        rest: {	
-          $value: '{control.bgColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{control.bgColor.hover}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{control.bgColor.active}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        selected: {	
-          $value: '{control.bgColor.active}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{control.bgColor.disabled}',	
-          $type: 'color',	
-        },	
-      },	
-      borderColor: {	
-        rest: {	
-          $value: '{control.borderColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{control.borderColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{control.borderColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{control.borderColor.disabled}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-      },	
-    },	
-    primary: {	
-      fgColor: {	
-        rest: {	
-          $value: '{fgColor.white}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{base.color.neutral.0}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-          alpha: 0.8,	
-        },	
-      },	
-      iconColor: {	
-        rest: {	
-          $value: '{fgColor.white}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-          alpha: 0.8,	
-        },	
-      },	
-      bgColor: {	
-        rest: {	
-          $value: '{bgColor.success.emphasis}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '#1c8139',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '#197935',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '#95d8a6',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-      },	
-      borderColor: {	
-        rest: {	
-          $value: '{base.color.neutral.13}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-          alpha: 0.15,	
-        },	
-        hover: {	
-          $value: '{button.primary.borderColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{button.primary.borderColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{button.primary.bgColor.disabled}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-      },	
-    },	
-    invisible: {	
-      fgColor: {	
-        rest: {	
-          $value: '{control.fgColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{control.fgColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{control.fgColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{control.fgColor.disabled}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-      },	
-      iconColor: {	
-        rest: {	
-          $value: '{fgColor.muted}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{fgColor.muted}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{control.fgColor.disabled}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-      },	
-      bgColor: {	
-        rest: {	
-          $value: '{control.transparent.bgColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{control.transparent.bgColor.hover}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{control.transparent.bgColor.active}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{base.color.transparent}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-      },	
-      borderColor: {	
-        rest: {	
-          $value: '{control.transparent.borderColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{control.transparent.borderColor.hover}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{base.color.transparent}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-      },	
-    },	
-    outline: {	
-      fgColor: {	
-        rest: {	
-          $value: '{fgColor.accent}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{base.color.neutral.0}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{base.color.neutral.0}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{fgColor.accent}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-          alpha: 0.5,	
-        },	
-      },	
-      bgColor: {	
-        rest: {	
-          $value: '{control.bgColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{bgColor.accent.emphasis}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '#0757ba',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{control.bgColor.disabled}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-      },	
-      borderColor: {	
-        hover: {	
-          $value: '{button.primary.borderColor.hover}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{button.outline.borderColor.hover}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-      },	
-    },	
-    danger: {	
-      fgColor: {	
-        rest: {	
-          $value: '{fgColor.danger}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{base.color.neutral.0}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{base.color.neutral.0}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{fgColor.danger}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-          alpha: 0.5,	
-        },	
-      },	
-      iconColor: {	
-        rest: {	
-          $value: '{fgColor.danger}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{base.color.neutral.0}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['fgColor'],	
-            },	
-          },	
-        },	
-      },	
-      bgColor: {	
-        rest: {	
-          $value: '{control.bgColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{base.color.red.6}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '#8b0820',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-        disabled: {	
-          $value: '{control.bgColor.disabled}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['bgColor'],	
-            },	
-          },	
-        },	
-      },	
-      borderColor: {	
-        rest: {	
-          $value: '{control.borderColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        hover: {	
-          $value: '{button.primary.borderColor.rest}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-        active: {	
-          $value: '{button.danger.borderColor.hover}',	
-          $type: 'color',	
-          $extensions: {	
-            'org.primer.figma': {	
-              collection: 'mode',	
-              group: 'component (internal)',	
-              scopes: ['borderColor'],	
-            },	
-          },	
-        },	
-      },	
-    },	
-    inactive: {	
-      fgColor: {	
-        $value: '{base.color.neutral.9}',	
-        $type: 'color',	
-        $extensions: {	
-          'org.primer.figma': {	
-            collection: 'mode',	
-            group: 'component (internal)',	
-            scopes: ['fgColor'],	
-          },	
-        },	
-      },	
-      bgColor: {	
-        $value: '{base.color.neutral.3}',	
-        $type: 'color',	
-        $extensions: {	
-          'org.primer.figma': {	
-            collection: 'mode',	
-            group: 'component (internal)',	
-            scopes: ['bgColor'],	
-          },	
-        },	
-      },	
-    },	
-    star: {	
-      iconColor: {	
-        $value: '{base.color.yellow.2}',	
-        $type: 'color',	
-        $extensions: {	
-          'org.primer.figma': {	
-            collection: 'mode',	
-            group: 'component (internal)',	
-            scopes: ['bgColor'],	
-          },	
-        },
-      },	
-    },	
-  },
-  buttonCounter: {
-    default: {
-      bgColor: {
-        rest: {
-          $value: '{bgColor.neutral.muted}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-        },
-      },
-    },
-    invisible: {
-      bgColor: {
-        rest: {
-          $value: '{bgColor.neutral.muted}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-        },
-      },
-    },
-    primary: {
-      bgColor: {
-        rest: {
-          $value: '{base.color.green.9}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-          alpha: 0.2,
-        },
-      },
-    },
-    outline: {
-      bgColor: {
-        rest: {
-          $value: '{bgColor.accent.emphasis}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-          alpha: 0.1,
-        },
-        hover: {
-          $value: '{base.color.neutral.0}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-          alpha: 0.2,
-        },
-        disabled: {
-          $value: '{bgColor.accent.emphasis}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-          alpha: 0.05,
-        },
-      },
-      fgColor: {
-        rest: {
-          $value: '{base.color.blue.6}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['fgColor'],
-            },
-          },
-        },
-        hover: {
-          $value: '{base.color.neutral.0}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['fgColor'],
-            },
-          },
-        },
-        disabled: {
-          $value: '{fgColor.accent}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['fgColor'],
-            },
-          },
-          alpha: 0.5,
-        },
-      },
-    },
-    danger: {
-      bgColor: {
-        hover: {
-          $value: '{base.color.neutral.0}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-          alpha: 0.2,
-        },
-        disabled: {
-          $value: '{bgColor.danger.emphasis}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-          alpha: 0.05,
-        },
-        rest: {
-          $value: '{bgColor.danger.emphasis}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['bgColor'],
-            },
-          },
-          alpha: 0.1,
-        },
-      },
-      fgColor: {
-        rest: {
-          $value: '#c21c2c',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['fgColor'],
-            },
-          },
-        },
-        hover: {
-          $value: '{base.color.neutral.0}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['fgColor'],
-            },
-          },
-        },
-        disabled: {
-          $value: '{fgColor.danger}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component (internal)',
-              scopes: ['fgColor'],
-            },
-          },
-          alpha: 0.5,
-        },
-      },
-    },
-  },
   menu: {
     bgColor: {
       active: {