@primer/primitives 10.4.0-rc.d3e62472 → 10.4.0-rc.e41ed5ed

package/src/tokens/functional/color/dark/patterns-dark.json5

@@ -0,0 +1,2589 @@
+{
+  control: {
+    bgColor: {
+      rest: {
+        $value: '{base.color.neutral.3}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+      hover: {
+        $value: '{base.color.neutral.4}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+      active: {
+        $value: '{base.color.neutral.5}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+      disabled: {
+        $value: '{bgColor.disabled}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+      selected: {
+        $value: '{control.bgColor.rest}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+    },
+    fgColor: {
+      rest: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      placeholder: {
+        $value: '{fgColor.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      disabled: {
+        $value: '{fgColor.disabled}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+    },
+    borderColor: {
+      rest: {
+        $value: '{borderColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['borderColor'],
+          },
+        },
+      },
+      emphasis: {
+        $value: '{borderColor.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['borderColor'],
+          },
+        },
+      },
+      disabled: {
+        $value: '{borderColor.disabled}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['borderColor'],
+          },
+        },
+      },
+      selected: {
+        $value: '{base.color.neutral.12}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['borderColor'],
+          },
+        },
+      },
+      success: {
+        $value: '{borderColor.success.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['borderColor'],
+          },
+        },
+      },
+      danger: {
+        $value: '{borderColor.danger.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['borderColor'],
+          },
+        },
+      },
+      warning: {
+        $value: '{borderColor.attention.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['borderColor'],
+          },
+        },
+      },
+    },
+    iconColor: {
+      rest: {
+        $value: '{fgColor.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+    },
+    transparent: {
+      bgColor: {
+        rest: {
+          $value: '{base.color.transparent}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+        hover: {
+          $value: '{base.color.neutral.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['bgColor'],
+            },
+          },
+          alpha: 0.2,
+        },
+        active: {
+          $value: '{base.color.neutral.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['bgColor'],
+            },
+          },
+          alpha: 0.25,
+        },
+        disabled: {
+          $value: '{bgColor.disabled}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+        selected: {
+          $value: '{base.color.neutral.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['bgColor'],
+            },
+          },
+          alpha: 0.1,
+        },
+      },
+      borderColor: {
+        rest: {
+          $value: '{base.color.transparent}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['borderColor'],
+            },
+          },
+        },
+        hover: {
+          $value: '{base.color.transparent}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['borderColor'],
+            },
+          },
+        },
+        active: {
+          $value: '{base.color.transparent}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['borderColor'],
+            },
+          },
+        },
+      },
+    },
+    danger: {
+      fgColor: {
+        rest: {
+          $value: '{fgColor.danger}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['fgColor'],
+            },
+          },
+        },
+        hover: {
+          $value: '{base.color.red.3}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['fgColor'],
+            },
+          },
+        },
+      },
+      bgColor: {
+        hover: {
+          $value: '{bgColor.danger.muted}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+        active: {
+          $value: '{bgColor.danger.muted}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['bgColor'],
+            },
+          },
+          alpha: 0.4,
+        },
+      },
+    },
+    checked: {
+      bgColor: {
+        rest: {
+          $value: '{bgColor.accent.emphasis}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+        hover: {
+          $value: '#2A7AEF',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+        active: {
+          $value: '#3685F3',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+        disabled: {
+          $value: '{fgColor.disabled}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{fgColor.onEmphasis}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['fgColor'],
+            },
+          },
+        },
+        disabled: {
+          $value: '{base.color.inset}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['fgColor'],
+            },
+          },
+        },
+      },
+      borderColor: {
+        rest: {
+          $value: '{control.checked.bgColor.rest}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['borderColor'],
+            },
+          },
+        },
+        hover: {
+          $value: '{control.checked.bgColor.hover}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['borderColor'],
+            },
+          },
+        },
+        active: {
+          $value: '{control.checked.bgColor.active}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['borderColor'],
+            },
+          },
+        },
+        disabled: {
+          $value: '{control.checked.bgColor.disabled}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['borderColor'],
+            },
+          },
+        },
+      },
+    },
+  },
+  controlTrack: {
+    bgColor: {
+      rest: {
+        $value: '{base.color.neutral.4}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+      hover: {
+        $value: '{base.color.neutral.5}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+      active: {
+        $value: '{base.color.neutral.6}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+      disabled: {
+        $value: '{fgColor.disabled}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+    },
+    fgColor: {
+      rest: {
+        $value: '{fgColor.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      disabled: {
+        $value: '{fgColor.onEmphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+    },
+    borderColor: {
+      rest: {
+        $value: '{borderColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['borderColor'],
+          },
+        },
+      },
+      disabled: {
+        $value: '{fgColor.disabled}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['borderColor'],
+          },
+        },
+      },
+    },
+  },
+  controlKnob: {
+    bgColor: {
+      rest: {
+        $value: '{bgColor.inset}',
+        $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'],
+          },
+        },
+      },
+      checked: {
+        $value: '{base.color.neutral.13}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+    },
+    borderColor: {
+      rest: {
+        $value: '{control.borderColor.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['borderColor'],
+          },
+        },
+      },
+      disabled: {
+        $value: '{control.bgColor.disabled}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['borderColor'],
+          },
+        },
+      },
+      checked: {
+        $value: '{control.checked.bgColor.rest}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['borderColor'],
+          },
+        },
+      },
+    },
+  },
+  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: {
+        $value: '{base.color.neutral.2}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+    },
+  },
+  selectMenu: {
+    borderColor: {
+      $value: '{borderColor.default}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'component (internal)',
+          scopes: ['borderColor'],
+        },
+      },
+    },
+    bgColor: {
+      active: {
+        $value: '{base.color.blue.8}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+    },
+  },
+  sideNav: {
+    bgColor: {
+      selected: {
+        $value: '{base.color.neutral.3}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+    },
+  },
+  treeViewItem: {
+    leadingVisual: {
+      iconColor: {
+        rest: {
+          $value: '{fgColor.muted}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+      },
+    },
+  },
+  underlineNav: {
+    borderColor: {
+      active: {
+        $value: '{base.color.coral.3}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['borderColor'],
+          },
+        },
+      },
+      hover: {
+        $value: '{borderColor.neutral.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['borderColor'],
+          },
+        },
+      },
+    },
+    iconColor: {
+      rest: {
+        $value: '{fgColor.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+    },
+  },
+  selection: {
+    bgColor: {
+      $value: '{bgColor.accent.emphasis}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'component',
+          scopes: ['bgColor'],
+        },
+      },
+      alpha: 0.7,
+    },
+  },
+  label: {
+    green: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.green.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.green.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.green.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.green.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.green.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.green.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    orange: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.orange.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.orange.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.orange.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.orange.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.orange.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.orange.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    purple: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.purple.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.purple.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.purple.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.purple.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.purple.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.purple.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    red: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.red.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.red.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.red.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.red.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.red.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.red.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    yellow: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.yellow.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.yellow.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.yellow.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.yellow.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.yellow.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.yellow.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    gray: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.gray.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.gray.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.gray.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.gray.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.gray.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.gray.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    auburn: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.auburn.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.auburn.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.auburn.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.auburn.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.auburn.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.auburn.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    brown: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.brown.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.brown.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.brown.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.brown.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.brown.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.brown.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    lemon: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.lemon.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.lemon.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.lemon.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.lemon.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.lemon.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.lemon.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    olive: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.olive.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.olive.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.olive.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.olive.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.olive.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.olive.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    lime: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.lime.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.lime.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.lime.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.lime.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.lime.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.lime.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    pine: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.pine.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.pine.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.pine.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.pine.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.pine.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.pine.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    teal: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.teal.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.teal.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.teal.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.teal.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.teal.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.teal.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    cyan: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.cyan.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.cyan.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.cyan.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.cyan.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.cyan.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.cyan.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    indigo: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.indigo.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.indigo.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.indigo.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.indigo.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.indigo.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.indigo.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    blue: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.blue.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.blue.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.blue.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.blue.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.blue.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.blue.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    plum: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.plum.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.plum.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.plum.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.plum.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.plum.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.plum.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    pink: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.pink.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.pink.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.pink.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.pink.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.pink.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.pink.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+    coral: {
+      bgColor: {
+        rest: {
+          $value: '{base.display.color.coral.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.coral.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.coral.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['bgColor']},
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{base.display.color.coral.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        hover: {
+          $value: '{base.display.color.coral.7}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+        active: {
+          $value: '{base.display.color.coral.8}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {collection: 'mode', group: 'component', scopes: ['fgColor']},
+          },
+        },
+      },
+    },
+  },
+}