npm - @primer/primitives - Versions diffs - 10.4.0-rc.1cf1d876 → 10.4.0-rc.2e7935f4 - Mend

@primer/primitives 10.4.0-rc.1cf1d876 → 10.4.0-rc.2e7935f4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/dist/docs/functional/themes/dark-colorblind.json +468 -8
package/dist/docs/functional/themes/dark-dimmed.json +1044 -48
package/dist/docs/functional/themes/dark-high-contrast.json +468 -8
package/dist/docs/functional/themes/dark-tritanopia.json +468 -8
package/dist/docs/functional/themes/dark.json +468 -8
package/dist/docs/functional/themes/light-colorblind.json +468 -8
package/dist/docs/functional/themes/light-high-contrast.json +1348 -188
package/dist/docs/functional/themes/light-tritanopia.json +468 -8
package/dist/docs/functional/themes/light.json +468 -8
package/dist/figma/themes/dark-dimmed.json +267 -12
package/dist/figma/themes/light-high-contrast.json +329 -10
package/dist/styleLint/functional/themes/dark-colorblind.json +468 -8
package/dist/styleLint/functional/themes/dark-dimmed.json +1044 -48
package/dist/styleLint/functional/themes/dark-high-contrast.json +468 -8
package/dist/styleLint/functional/themes/dark-tritanopia.json +468 -8
package/dist/styleLint/functional/themes/dark.json +468 -8
package/dist/styleLint/functional/themes/light-colorblind.json +468 -8
package/dist/styleLint/functional/themes/light-high-contrast.json +1347 -187
package/dist/styleLint/functional/themes/light-tritanopia.json +468 -8
package/dist/styleLint/functional/themes/light.json +468 -8
package/package.json +1 -1
package/src/tokens/functional/color/control.json5 +119 -0
package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -106
package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +0 -114

package/dist/docs/functional/themes/dark-dimmed.json CHANGED Viewed

@@ -9037,11 +9037,67 @@
     "type": "color"
   },
   "control-bgColor-active": {
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#2a313c",
+        "dark-high-contrast": {
+          "$value": "#2f3742",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-dimmed": {
+          "$value": "#3d444d",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#2f3742",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.7}",
-      "$type": "color"
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.color.neutral.5}",
+          "dark-high-contrast": {
+            "$value": "{base.color.neutral.6}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-dimmed": {
+            "$value": "{base.color.neutral.7}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "{base.color.neutral.6}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      }
     },
     "name": "control-bgColor-active",
     "attributes": {},
@@ -9085,11 +9141,67 @@
     "type": "color"
   },
   "control-bgColor-hover": {
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#262c36",
+        "dark-high-contrast": {
+          "$value": "#2a313c",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-dimmed": {
+          "$value": "#2f3742",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#2a313c",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.6}",
-      "$type": "color"
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.color.neutral.4}",
+          "dark-high-contrast": {
+            "$value": "{base.color.neutral.5}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-dimmed": {
+            "$value": "{base.color.neutral.6}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "{base.color.neutral.5}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      }
     },
     "name": "control-bgColor-hover",
     "attributes": {},
@@ -9099,11 +9211,67 @@
     "type": "color"
   },
   "control-bgColor-rest": {
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#212830",
+        "dark-high-contrast": {
+          "$value": "#262c36",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-dimmed": {
+          "$value": "#2a313c",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#262c36",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.5}",
-      "$type": "color"
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.color.neutral.3}",
+          "dark-high-contrast": {
+            "$value": "{base.color.neutral.4}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-dimmed": {
+            "$value": "{base.color.neutral.5}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "{base.color.neutral.4}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      }
     },
     "name": "control-bgColor-rest",
     "attributes": {},
@@ -9181,12 +9349,46 @@
     "type": "color"
   },
   "control-borderColor-disabled": {
-    "alpha": 0.1,
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["borderColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#656c761a",
+        "dark-dimmed": {
+          "$value": "#656c76",
+          "alpha": 0.1,
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
+    "alpha": 0.1,
     "original": {
       "$value": "{base.color.neutral.8}",
       "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["borderColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{borderColor.disabled}",
+          "dark-dimmed": {
+            "$value": "{base.color.neutral.8}",
+            "alpha": 0.1,
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      },
       "alpha": 0.1
     },
     "name": "control-borderColor-disabled",
@@ -9243,11 +9445,43 @@
     "type": "color"
   },
   "control-borderColor-rest": {
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["borderColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#3d444d",
+        "dark-dimmed": {
+          "$value": "#3d444d",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
     "original": {
       "$value": "#3d444d",
-      "$type": "color"
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["borderColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{borderColor.default}",
+          "dark-dimmed": {
+            "$value": "#3d444d",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      }
     },
     "name": "control-borderColor-rest",
     "attributes": {},
@@ -9359,19 +9593,75 @@
     "type": "color"
   },
   "control-checked-bgColor-active": {
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
-    "isSource": true,
-    "original": {
-      "$value": "#3f7fdb",
-      "$type": "color"
-    },
-    "name": "control-checked-bgColor-active",
-    "attributes": {},
-    "path": ["control", "checked", "bgColor", "active"],
-    "key": "{control.checked.bgColor.active}",
-    "value": "#3f7fdb",
-    "type": "color"
-  },
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#3685F3",
+        "dark-high-contrast": {
+          "$value": "#3c79d0",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-dimmed": {
+          "$value": "#3f7fdb",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#033f9d",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/control.json5",
+    "isSource": true,
+    "original": {
+      "$value": "#3f7fdb",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "#3685F3",
+          "dark-high-contrast": {
+            "$value": "#3c79d0",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-dimmed": {
+            "$value": "#3f7fdb",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "#033f9d",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      }
+    },
+    "name": "control-checked-bgColor-active",
+    "attributes": {},
+    "path": ["control", "checked", "bgColor", "active"],
+    "key": "{control.checked.bgColor.active}",
+    "value": "#3f7fdb",
+    "type": "color"
+  },
   "control-checked-bgColor-disabled": {
     "$extensions": {
       "org.primer.figma": {
@@ -9407,11 +9697,67 @@
     "type": "color"
   },
   "control-checked-bgColor-hover": {
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#2A7AEF",
+        "dark-high-contrast": {
+          "$value": "#2b64c1",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-dimmed": {
+          "$value": "#3876d3",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#0344a8",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
     "original": {
       "$value": "#3876d3",
-      "$type": "color"
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "#2A7AEF",
+          "dark-high-contrast": {
+            "$value": "#2b64c1",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-dimmed": {
+            "$value": "#3876d3",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "#0344a8",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      }
     },
     "name": "control-checked-bgColor-hover",
     "attributes": {},
@@ -9455,11 +9801,67 @@
     "type": "color"
   },
   "control-checked-borderColor-active": {
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["borderColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#3f7fdb",
+        "dark-high-contrast": {
+          "$value": "#6cb6ff",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-dimmed": {
+          "$value": "#3f7fdb",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#033f9d",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
     "original": {
       "$value": "#3f7fdb",
-      "$type": "color"
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["borderColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{control.checked.bgColor.active}",
+          "dark-high-contrast": {
+            "$value": "{base.color.blue.2}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-dimmed": {
+            "$value": "#3f7fdb",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "#033f9d",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      }
     },
     "name": "control-checked-borderColor-active",
     "attributes": {},
@@ -9503,11 +9905,67 @@
     "type": "color"
   },
   "control-checked-borderColor-hover": {
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["borderColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#3876d3",
+        "dark-high-contrast": {
+          "$value": "#6cb6ff",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-dimmed": {
+          "$value": "#3876d3",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#0344a8",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
     "original": {
       "$value": "#3876d3",
-      "$type": "color"
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["borderColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{control.checked.bgColor.hover}",
+          "dark-high-contrast": {
+            "$value": "{base.color.blue.2}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-dimmed": {
+            "$value": "#3876d3",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "#0344a8",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      }
     },
     "name": "control-checked-borderColor-hover",
     "attributes": {},
@@ -9658,6 +10116,12 @@
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#8c0b1d",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
         }
       }
     },
@@ -9694,6 +10158,12 @@
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "#8c0b1d",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
           }
         }
       },
@@ -9720,6 +10190,13 @@
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#c93c37",
+          "alpha": null,
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
         }
       }
     },
@@ -9741,6 +10218,13 @@
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "{bgColor.danger.emphasis}",
+            "alpha": null,
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
           }
         }
       }
@@ -9761,7 +10245,13 @@
       },
       "org.primer.overrides": {
         "dark": "#f47067",
-        "dark-protanopia-deuteranopia": "#e0823d"
+        "dark-protanopia-deuteranopia": "#e0823d",
+        "light-high-contrast": {
+          "$value": "#f0f6fc",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
       }
     },
     "filePath": "src/tokens/functional/color/control.json5",
@@ -9777,12 +10267,18 @@
         },
         "org.primer.overrides": {
           "dark": "{base.color.red.3}",
-          "dark-protanopia-deuteranopia": "{base.color.orange.3}"
-        }
-      }
-    },
-    "name": "control-danger-fgColor-hover",
-    "attributes": {},
+          "dark-protanopia-deuteranopia": "{base.color.orange.3}",
+          "light-high-contrast": {
+            "$value": "{fgColor.onEmphasis}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      }
+    },
+    "name": "control-danger-fgColor-hover",
+    "attributes": {},
     "path": ["control", "danger", "fgColor", "hover"],
     "key": "{control.danger.fgColor.hover}",
     "value": "#f47067",
@@ -9870,6 +10366,12 @@
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#b7bdc8",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
         }
       }
     },
@@ -9891,6 +10393,12 @@
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "{base.color.neutral.10}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
           }
         }
       }
@@ -9971,12 +10479,86 @@
     "type": "color"
   },
   "control-transparent-bgColor-active": {
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": {
+          "$value": "#656c76",
+          "alpha": 0.25,
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-high-contrast": {
+          "$value": "#3d444d",
+          "alpha": 1,
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-dimmed": {
+          "$value": "#656c76",
+          "alpha": 0.2,
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#2f3742",
+          "alpha": 1,
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
     "alpha": 0.2,
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
+    "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.8}",
       "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": {
+            "$value": "{base.color.neutral.8}",
+            "alpha": 0.25,
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-high-contrast": {
+            "$value": "{base.color.neutral.7}",
+            "alpha": 1,
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-dimmed": {
+            "$value": "{base.color.neutral.8}",
+            "alpha": 0.2,
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "{base.color.neutral.6}",
+            "alpha": 1,
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      },
       "alpha": 0.2
     },
     "name": "control-transparent-bgColor-active",
@@ -10021,12 +10603,86 @@
     "type": "color"
   },
   "control-transparent-bgColor-hover": {
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": {
+          "$value": "#656c76",
+          "alpha": 0.2,
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-high-contrast": {
+          "$value": "#2f3742",
+          "alpha": 1,
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-dimmed": {
+          "$value": "#656c76",
+          "alpha": 0.15,
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#2a313c",
+          "alpha": 1,
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
     "alpha": 0.15,
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
+    "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.8}",
       "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": {
+            "$value": "{base.color.neutral.8}",
+            "alpha": 0.2,
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-high-contrast": {
+            "$value": "{base.color.neutral.6}",
+            "alpha": 1,
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-dimmed": {
+            "$value": "{base.color.neutral.8}",
+            "alpha": 0.15,
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "{base.color.neutral.5}",
+            "alpha": 1,
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      },
       "alpha": 0.15
     },
     "name": "control-transparent-bgColor-hover",
@@ -10071,12 +10727,86 @@
     "type": "color"
   },
   "control-transparent-bgColor-selected": {
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": {
+          "$value": "#656c76",
+          "alpha": 0.1,
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-high-contrast": {
+          "$value": "#2f3742",
+          "alpha": 1,
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-dimmed": {
+          "$value": "#656c76",
+          "alpha": 0.1,
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#2a313c",
+          "alpha": 1,
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
     "alpha": 0.1,
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
+    "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.8}",
       "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": {
+            "$value": "{base.color.neutral.8}",
+            "alpha": 0.1,
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-high-contrast": {
+            "$value": "{base.color.neutral.6}",
+            "alpha": 1,
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-dimmed": {
+            "$value": "{base.color.neutral.8}",
+            "alpha": 0.1,
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "{base.color.neutral.5}",
+            "alpha": 1,
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      },
       "alpha": 0.1
     },
     "name": "control-transparent-bgColor-selected",
@@ -10100,6 +10830,12 @@
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#3d444d",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
         }
       }
     },
@@ -10121,6 +10857,12 @@
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "{borderColor.default}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
           }
         }
       }
@@ -10146,6 +10888,12 @@
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#3d444d",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
         }
       }
     },
@@ -10167,6 +10915,12 @@
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "{borderColor.default}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
           }
         }
       }
@@ -10286,9 +11040,18 @@
         "collection": "mode",
         "group": "component (internal)",
         "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#151b23",
+        "dark-dimmed": {
+          "$value": "#151b23",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
       }
     },
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
+    "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
     "original": {
       "$value": "{bgColor.inset}",
@@ -10298,6 +11061,15 @@
           "collection": "mode",
           "group": "component (internal)",
           "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{bgColor.inset}",
+          "dark-dimmed": {
+            "$value": "{bgColor.inset}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
         }
       }
     },
@@ -10411,11 +11183,67 @@
     "type": "color"
   },
   "controlTrack-bgColor-active": {
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#2f3742",
+        "dark-high-contrast": {
+          "$value": "#3d444d",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-dimmed": {
+          "$value": "#3d444d",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#3d444d",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.7}",
-      "$type": "color"
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.color.neutral.6}",
+          "dark-high-contrast": {
+            "$value": "{base.color.neutral.7}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-dimmed": {
+            "$value": "{base.color.neutral.7}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "{base.color.neutral.7}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      }
     },
     "name": "controlTrack-bgColor-active",
     "attributes": {},
@@ -10459,11 +11287,67 @@
     "type": "color"
   },
   "controlTrack-bgColor-hover": {
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#2a313c",
+        "dark-high-contrast": {
+          "$value": "#2f3742",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-dimmed": {
+          "$value": "#2f3742",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#2f3742",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.6}",
-      "$type": "color"
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.color.neutral.5}",
+          "dark-high-contrast": {
+            "$value": "{base.color.neutral.6}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-dimmed": {
+            "$value": "{base.color.neutral.6}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "{base.color.neutral.6}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      }
     },
     "name": "controlTrack-bgColor-hover",
     "attributes": {},
@@ -10473,11 +11357,67 @@
     "type": "color"
   },
   "controlTrack-bgColor-rest": {
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#262c36",
+        "dark-high-contrast": {
+          "$value": "#2a313c",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-dimmed": {
+          "$value": "#2a313c",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#2a313c",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.5}",
-      "$type": "color"
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.color.neutral.4}",
+          "dark-high-contrast": {
+            "$value": "{base.color.neutral.5}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-dimmed": {
+            "$value": "{base.color.neutral.5}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "{base.color.neutral.5}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      }
     },
     "name": "controlTrack-bgColor-rest",
     "attributes": {},
@@ -10521,11 +11461,67 @@
     "type": "color"
   },
   "controlTrack-borderColor-rest": {
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#3d444d",
+        "dark-high-contrast": {
+          "$value": "#656c76",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-dimmed": {
+          "$value": "#3d444d",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-high-contrast": {
+          "$value": "#656c76",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/control.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.7}",
-      "$type": "color"
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{borderColor.default}",
+          "dark-high-contrast": {
+            "$value": "{borderColor.emphasis}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-dimmed": {
+            "$value": "{base.color.neutral.7}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-high-contrast": {
+            "$value": "{borderColor.emphasis}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      }
     },
     "name": "controlTrack-borderColor-rest",
     "attributes": {},