npm - @primer/primitives - Versions diffs - 11.4.1-rc.edbe0e39 → 11.5.0-rc.14eaeb12 - Mend

@primer/primitives 11.4.1-rc.edbe0e39 → 11.5.0-rc.14eaeb12

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 (138) hide show

package/DESIGN_TOKENS_SPEC.md +14 -5
package/dist/build/schemas/borderToken.d.ts +45 -3
package/dist/build/schemas/borderToken.js +2 -1
package/dist/build/schemas/colorToken.d.ts +639 -30
package/dist/build/schemas/colorToken.js +3 -2
package/dist/build/schemas/colorW3cValue.d.ts +28 -0
package/dist/build/schemas/colorW3cValue.js +42 -0
package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
package/dist/build/schemas/dimensionToken.d.ts +1 -1
package/dist/build/schemas/durationToken.d.ts +1 -1
package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
package/dist/build/schemas/fontWeightToken.d.ts +1 -1
package/dist/build/schemas/gradientToken.d.ts +23 -2
package/dist/build/schemas/gradientToken.js +2 -1
package/dist/build/schemas/numberToken.d.ts +1 -1
package/dist/build/schemas/shadowToken.d.ts +1079 -43
package/dist/build/schemas/shadowToken.js +8 -2
package/dist/build/schemas/stringToken.d.ts +1 -1
package/dist/build/schemas/tokenType.d.ts +1 -1
package/dist/build/schemas/transitionToken.d.ts +1 -1
package/dist/build/schemas/typographyToken.d.ts +1 -1
package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
package/dist/build/transformers/borderToCss.js +3 -1
package/dist/build/transformers/colorAlphaToCss.js +6 -3
package/dist/build/transformers/colorToHex.js +5 -2
package/dist/build/transformers/colorToRgbAlpha.js +5 -2
package/dist/build/transformers/colorToRgbaFloat.js +5 -0
package/dist/build/transformers/durationToCss.js +4 -4
package/dist/build/transformers/gradientToCss.js +2 -1
package/dist/build/transformers/shadowToCss.js +4 -1
package/dist/build/transformers/utilities/normalizeColorValue.d.ts +23 -0
package/dist/build/transformers/utilities/normalizeColorValue.js +74 -0
package/dist/build/types/borderTokenValue.d.ts +2 -1
package/dist/build/types/shadowTokenValue.d.ts +2 -1
package/dist/css/base/motion/motion.css +1 -1
package/dist/css/functional/size/radius.css +1 -1
package/dist/css/functional/size/size-coarse.css +1 -0
package/dist/css/functional/size/size-fine.css +1 -0
package/dist/css/functional/size/size.css +5 -0
package/dist/css/functional/themes/dark-colorblind-high-contrast.css +22 -10
package/dist/css/functional/themes/dark-colorblind.css +22 -10
package/dist/css/functional/themes/dark-dimmed-high-contrast.css +22 -10
package/dist/css/functional/themes/dark-dimmed.css +22 -10
package/dist/css/functional/themes/dark-high-contrast.css +22 -10
package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +22 -10
package/dist/css/functional/themes/dark-tritanopia.css +22 -10
package/dist/css/functional/themes/dark.css +22 -10
package/dist/css/functional/themes/light-colorblind-high-contrast.css +14 -2
package/dist/css/functional/themes/light-colorblind.css +20 -8
package/dist/css/functional/themes/light-high-contrast.css +14 -2
package/dist/css/functional/themes/light-tritanopia-high-contrast.css +14 -2
package/dist/css/functional/themes/light-tritanopia.css +20 -8
package/dist/css/functional/themes/light.css +20 -8
package/dist/docs/functional/size/radius.json +2 -2
package/dist/docs/functional/size/size-coarse.json +55 -2
package/dist/docs/functional/size/size-fine.json +55 -2
package/dist/docs/functional/size/size.json +135 -0
package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +2502 -372
package/dist/docs/functional/themes/dark-colorblind.json +2492 -370
package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +2355 -205
package/dist/docs/functional/themes/dark-dimmed.json +2382 -212
package/dist/docs/functional/themes/dark-high-contrast.json +2507 -373
package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +2517 -375
package/dist/docs/functional/themes/dark-tritanopia.json +2499 -353
package/dist/docs/functional/themes/dark.json +2501 -371
package/dist/docs/functional/themes/light-colorblind-high-contrast.json +2354 -204
package/dist/docs/functional/themes/light-colorblind.json +2344 -202
package/dist/docs/functional/themes/light-high-contrast.json +2359 -205
package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +2359 -205
package/dist/docs/functional/themes/light-tritanopia.json +2354 -204
package/dist/docs/functional/themes/light.json +2359 -205
package/dist/fallbacks/functional/size/size-coarse.json +2 -1
package/dist/fallbacks/functional/size/size-fine.json +2 -1
package/dist/fallbacks/functional/size/size.json +5 -0
package/dist/figma/dimension/dimension.json +56 -1
package/dist/figma/themes/dark-colorblind.json +49 -1
package/dist/figma/themes/dark-dimmed.json +51 -3
package/dist/figma/themes/dark-high-contrast.json +49 -1
package/dist/figma/themes/dark-tritanopia.json +49 -1
package/dist/figma/themes/dark.json +49 -1
package/dist/figma/themes/light-colorblind.json +49 -1
package/dist/figma/themes/light-high-contrast.json +49 -1
package/dist/figma/themes/light-tritanopia.json +49 -1
package/dist/figma/themes/light.json +49 -1
package/dist/internalCss/dark-colorblind-high-contrast.css +22 -10
package/dist/internalCss/dark-colorblind.css +22 -10
package/dist/internalCss/dark-dimmed-high-contrast.css +22 -10
package/dist/internalCss/dark-dimmed.css +22 -10
package/dist/internalCss/dark-high-contrast.css +22 -10
package/dist/internalCss/dark-tritanopia-high-contrast.css +22 -10
package/dist/internalCss/dark-tritanopia.css +22 -10
package/dist/internalCss/dark.css +22 -10
package/dist/internalCss/light-colorblind-high-contrast.css +14 -2
package/dist/internalCss/light-colorblind.css +20 -8
package/dist/internalCss/light-high-contrast.css +14 -2
package/dist/internalCss/light-tritanopia-high-contrast.css +14 -2
package/dist/internalCss/light-tritanopia.css +20 -8
package/dist/internalCss/light.css +20 -8
package/dist/styleLint/functional/size/radius.json +2 -2
package/dist/styleLint/functional/size/size-coarse.json +57 -4
package/dist/styleLint/functional/size/size-fine.json +57 -4
package/dist/styleLint/functional/size/size.json +135 -0
package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +2491 -349
package/dist/styleLint/functional/themes/dark-colorblind.json +2481 -347
package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +2516 -354
package/dist/styleLint/functional/themes/dark-dimmed.json +2543 -361
package/dist/styleLint/functional/themes/dark-high-contrast.json +2496 -350
package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +2506 -352
package/dist/styleLint/functional/themes/dark-tritanopia.json +2511 -353
package/dist/styleLint/functional/themes/dark.json +2491 -349
package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +2514 -352
package/dist/styleLint/functional/themes/light-colorblind.json +2505 -351
package/dist/styleLint/functional/themes/light-high-contrast.json +2371 -205
package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +2519 -353
package/dist/styleLint/functional/themes/light-tritanopia.json +2515 -353
package/dist/styleLint/functional/themes/light.json +2520 -354
package/package.json +4 -3
package/src/tokens/base/color/dark/dark.dimmed.json5 +405 -81
package/src/tokens/base/color/dark/dark.high-contrast.json5 +405 -81
package/src/tokens/base/color/dark/dark.json5 +475 -95
package/src/tokens/base/color/dark/display-dark.json5 +960 -192
package/src/tokens/base/color/light/display-light.json5 +960 -192
package/src/tokens/base/color/light/light.high-contrast.json5 +405 -81
package/src/tokens/base/color/light/light.json5 +475 -95
package/src/tokens/base/size/size.json5 +194 -194
package/src/tokens/component/button.json5 +368 -65
package/src/tokens/component/reactionButton.json5 +20 -4
package/src/tokens/functional/border/border.json5 +29 -1
package/src/tokens/functional/color/bgColor.json5 +10 -2
package/src/tokens/functional/color/borderColor.json5 +8 -1
package/src/tokens/functional/color/control.json5 +160 -32
package/src/tokens/functional/color/fgColor.json5 +5 -1
package/src/tokens/functional/color/syntax.json5 +10 -2
package/src/tokens/functional/shadow/shadow.json5 +576 -0
package/src/tokens/functional/size/radius.json5 +1 -1
package/src/tokens/functional/size/size-coarse.json5 +15 -0
package/src/tokens/functional/size/size-fine.json5 +15 -0
package/src/tokens/functional/size/size.json5 +50 -0

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

@@ -2095,7 +2095,11 @@
           "$type": "color"
         },
         "dark-tritanopia": {
-          "$value": "#db61a2",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [328, 62.9, 62],
+            "hex": "#db61a2"
+          },
           "alpha": 0.1,
           "filePath": "src/tokens/functional/color/bgColor.json5",
           "isSource": true,
@@ -2111,7 +2115,11 @@
     "isSource": true,
     "alpha": 0.1,
     "original": {
-      "$value": "#db61a2",
+      "$value": {
+        "colorSpace": "hsl",
+        "components": [328, 62.9, 62],
+        "hex": "#db61a2"
+      },
       "$type": "color",
       "$description": "Subtle background for GitHub Sponsors content",
       "$extensions": {
@@ -2132,7 +2140,11 @@
             "$type": "color"
           },
           "dark-tritanopia": {
-            "$value": "#db61a2",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [328, 62.9, 62],
+              "hex": "#db61a2"
+            },
             "alpha": 0.1,
             "filePath": "src/tokens/functional/color/bgColor.json5",
             "isSource": true,
@@ -2756,6 +2768,44 @@
     "value": "0.0625rem solid #ab7df866",
     "type": "border"
   },
+  "border-draft-emphasis": {
+    "key": "{border.draft.emphasis}",
+    "filePath": "src/tokens/functional/border/border.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "color": "{borderColor.draft.emphasis}",
+        "style": "solid",
+        "width": "{borderWidth.default}"
+      },
+      "$type": "border",
+      "key": "{border.draft.emphasis}"
+    },
+    "name": "border-draft-emphasis",
+    "attributes": {},
+    "path": ["border", "draft", "emphasis"],
+    "value": "0.0625rem solid #656c76",
+    "type": "border"
+  },
+  "border-draft-muted": {
+    "key": "{border.draft.muted}",
+    "filePath": "src/tokens/functional/border/border.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "color": "{borderColor.draft.muted}",
+        "style": "solid",
+        "width": "{borderWidth.default}"
+      },
+      "$type": "border",
+      "key": "{border.draft.muted}"
+    },
+    "name": "border-draft-muted",
+    "attributes": {},
+    "path": ["border", "draft", "muted"],
+    "value": "0.0625rem solid #3d444d66",
+    "type": "border"
+  },
   "border-emphasis": {
     "key": "{border.emphasis}",
     "filePath": "src/tokens/functional/border/border.json5",
@@ -2976,6 +3026,27 @@
     "value": "0.0625rem solid #388bfd66",
     "type": "border"
   },
+  "border-translucent": {
+    "key": "{border.translucent}",
+    "filePath": "src/tokens/functional/border/border.json5",
+    "isSource": true,
+    "original": {
+      "$description": "Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design.",
+      "$value": {
+        "color": "{borderColor.translucent}",
+        "style": "solid",
+        "width": "{borderWidth.default}"
+      },
+      "$type": "border",
+      "key": "{border.translucent}"
+    },
+    "name": "border-translucent",
+    "attributes": {},
+    "path": ["border", "translucent"],
+    "value": "0.0625rem solid #ffffff26",
+    "type": "border",
+    "description": "Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design."
+  },
   "border-transparent": {
     "key": "{border.transparent}",
     "filePath": "src/tokens/functional/border/border.json5",
@@ -5839,7 +5910,7 @@
     "original": {
       "$value": "{base.color.neutral.13}",
       "$type": "color",
-      "$description": "Semi-transparent border for overlays and layered elements",
+      "$description": "Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design.",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -5910,7 +5981,7 @@
     "path": ["borderColor", "translucent"],
     "value": "#ffffff26",
     "type": "color",
-    "description": "Semi-transparent border for overlays and layered elements"
+    "description": "Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design."
   },
   "borderColor-transparent": {
     "key": "{borderColor.transparent}",
@@ -6632,13 +6703,21 @@
           "$type": "color"
         },
         "dark-dimmed-high-contrast": {
-          "$value": "#ffffff",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [0, 0, 100],
+            "hex": "#ffffff"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed": {
-          "$value": "#ffffff",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [0, 0, 100],
+            "hex": "#ffffff"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -6664,13 +6743,21 @@
             "$type": "color"
           },
           "dark-dimmed-high-contrast": {
-            "$value": "#ffffff",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [0, 0, 100],
+              "hex": "#ffffff"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed": {
-            "$value": "#ffffff",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [0, 0, 100],
+              "hex": "#ffffff"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -6750,13 +6837,21 @@
           "$type": "color"
         },
         "dark-dimmed-high-contrast": {
-          "$value": "#ffffff",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [0, 0, 100],
+            "hex": "#ffffff"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed": {
-          "$value": "#ffffff",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [0, 0, 100],
+            "hex": "#ffffff"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -6782,13 +6877,21 @@
             "$type": "color"
           },
           "dark-dimmed-high-contrast": {
-            "$value": "#ffffff",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [0, 0, 100],
+              "hex": "#ffffff"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed": {
-            "$value": "#ffffff",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [0, 0, 100],
+              "hex": "#ffffff"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -6813,13 +6916,21 @@
       },
       "org.primer.overrides": {
         "dark": {
-          "$value": "#FA5E55",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [3.3, 94.3, 65.7],
+            "hex": "#FA5E55"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed": {
-          "$value": "#ea5c53",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [3.6, 78.2, 62.2],
+            "hex": "#ea5c53"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -6859,7 +6970,11 @@
     "filePath": "src/tokens/component/button.json5",
     "isSource": true,
     "original": {
-      "$value": "#FA5E55",
+      "$value": {
+        "colorSpace": "hsl",
+        "components": [3.3, 94.3, 65.7],
+        "hex": "#FA5E55"
+      },
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -6869,13 +6984,21 @@
         },
         "org.primer.overrides": {
           "dark": {
-            "$value": "#FA5E55",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [3.3, 94.3, 65.7],
+              "hex": "#FA5E55"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed": {
-            "$value": "#ea5c53",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [3.6, 78.2, 62.2],
+              "hex": "#ea5c53"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -6920,6 +7043,35 @@
     "value": "#fa5e55",
     "type": "color"
   },
+  "button-danger-iconColor-disabled": {
+    "key": "{button.danger.iconColor.disabled}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/component/button.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{button.danger.fgColor.disabled}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      },
+      "key": "{button.danger.iconColor.disabled}"
+    },
+    "name": "button-danger-iconColor-disabled",
+    "attributes": {},
+    "path": ["button", "danger", "iconColor", "disabled"],
+    "value": "#f8514980",
+    "type": "color"
+  },
   "button-danger-iconColor-hover": {
     "key": "{button.danger.iconColor.hover}",
     "$extensions": {
@@ -6936,7 +7088,11 @@
           "$type": "color"
         },
         "dark-dimmed-high-contrast": {
-          "$value": "#ffffff",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [0, 0, 100],
+            "hex": "#ffffff"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -6962,7 +7118,11 @@
             "$type": "color"
           },
           "dark-dimmed-high-contrast": {
-            "$value": "#ffffff",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [0, 0, 100],
+              "hex": "#ffffff"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -7168,7 +7328,7 @@
     "name": "button-danger-shadow-selected",
     "attributes": {},
     "path": ["button", "danger", "shadow", "selected"],
-    "value": "0 0 0 0 #000000",
+    "value": "0 0 0 0 #00000000",
     "type": "shadow"
   },
   "button-default-bgColor-active": {
@@ -7484,6 +7644,35 @@
     "value": "#3d444d",
     "type": "color"
   },
+  "button-default-fgColor-disabled": {
+    "key": "{button.default.fgColor.disabled}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/component/button.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{control.fgColor.disabled}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      },
+      "key": "{button.default.fgColor.disabled}"
+    },
+    "name": "button-default-fgColor-disabled",
+    "attributes": {},
+    "path": ["button", "default", "fgColor", "disabled"],
+    "value": "#656c76",
+    "type": "color"
+  },
   "button-default-fgColor-rest": {
     "key": "{button.default.fgColor.rest}",
     "$extensions": {
@@ -7635,7 +7824,7 @@
     "name": "button-default-shadow-resting",
     "attributes": {},
     "path": ["button", "default", "shadow", "resting"],
-    "value": "0 0 0 0 #000000",
+    "value": "0 0 0 0 #00000000",
     "type": "shadow"
   },
   "button-inactive-bgColor": {
@@ -8770,31 +8959,51 @@
           "$type": "color"
         },
         "dark-tritanopia": {
-          "$value": "#0d419d",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [218.3, 84.7, 33.3],
+            "hex": "#0d419d"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-tritanopia-high-contrast": {
-          "$value": "#0d419d",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [218.3, 84.7, 33.3],
+            "hex": "#0d419d"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-high-contrast": {
-          "$value": "#033f9d",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.6, 96.3, 31.4],
+            "hex": "#033f9d"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-tritanopia-high-contrast": {
-          "$value": "#033f9d",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.6, 96.3, 31.4],
+            "hex": "#033f9d"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-protanopia-deuteranopia-high-contrast": {
-          "$value": "#033f9d",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.6, 96.3, 31.4],
+            "hex": "#033f9d"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -8804,7 +9013,11 @@
     "filePath": "src/tokens/component/button.json5",
     "isSource": true,
     "original": {
-      "$value": "#0d419d",
+      "$value": {
+        "colorSpace": "hsl",
+        "components": [218.3, 84.7, 33.3],
+        "hex": "#0d419d"
+      },
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -8820,31 +9033,51 @@
             "$type": "color"
           },
           "dark-tritanopia": {
-            "$value": "#0d419d",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [218.3, 84.7, 33.3],
+              "hex": "#0d419d"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-tritanopia-high-contrast": {
-            "$value": "#0d419d",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [218.3, 84.7, 33.3],
+              "hex": "#0d419d"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-high-contrast": {
-            "$value": "#033f9d",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.6, 96.3, 31.4],
+              "hex": "#033f9d"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-tritanopia-high-contrast": {
-            "$value": "#033f9d",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.6, 96.3, 31.4],
+              "hex": "#033f9d"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-protanopia-deuteranopia-high-contrast": {
-            "$value": "#033f9d",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.6, 96.3, 31.4],
+              "hex": "#033f9d"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -8875,7 +9108,11 @@
           "$type": "color"
         },
         "dark-tritanopia": {
-          "$value": "#212830",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [212, 18.5, 15.9],
+            "hex": "#212830"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -8885,7 +9122,11 @@
     "filePath": "src/tokens/component/button.json5",
     "isSource": true,
     "original": {
-      "$value": "#212830",
+      "$value": {
+        "colorSpace": "hsl",
+        "components": [212, 18.5, 15.9],
+        "hex": "#212830"
+      },
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -8901,7 +9142,11 @@
             "$type": "color"
           },
           "dark-tritanopia": {
-            "$value": "#212830",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [212, 18.5, 15.9],
+              "hex": "#212830"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -8932,7 +9177,11 @@
           "$type": "color"
         },
         "dark-tritanopia": {
-          "$value": "#262c36",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [217.5, 17.4, 18],
+            "hex": "#262c36"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -8942,7 +9191,11 @@
     "filePath": "src/tokens/component/button.json5",
     "isSource": true,
     "original": {
-      "$value": "#262c36",
+      "$value": {
+        "colorSpace": "hsl",
+        "components": [217.5, 17.4, 18],
+        "hex": "#262c36"
+      },
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -8958,7 +9211,11 @@
             "$type": "color"
           },
           "dark-tritanopia": {
-            "$value": "#262c36",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [217.5, 17.4, 18],
+              "hex": "#262c36"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -9190,7 +9447,12 @@
           "$type": "color"
         },
         "dark-dimmed": {
-          "$value": "#478be680",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [214.3, 76.1, 59],
+            "hex": "#478be6"
+          },
+          "alpha": 0.502,
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -9218,7 +9480,12 @@
             "$type": "color"
           },
           "dark-dimmed": {
-            "$value": "#478be680",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [214.3, 76.1, 59],
+              "hex": "#478be6"
+            },
+            "alpha": 0.502,
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -9430,7 +9697,7 @@
     "name": "button-outline-shadow-selected",
     "attributes": {},
     "path": ["button", "outline", "shadow", "selected"],
-    "value": "0 0 0 0 #000000",
+    "value": "0 0 0 0 #00000000",
     "type": "shadow"
   },
   "button-primary-bgColor-active": {
@@ -9443,13 +9710,21 @@
       },
       "org.primer.overrides": {
         "dark": {
-          "$value": "#2E9A40",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [130, 54, 39.2],
+            "hex": "#2E9A40"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed": {
-          "$value": "#428f46",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [123.1, 36.8, 41],
+            "hex": "#428f46"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -9461,61 +9736,101 @@
           "$type": "color"
         },
         "dark-tritanopia": {
-          "$value": "#3685f3",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [214.9, 88.7, 58.2],
+            "hex": "#3685f3"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-tritanopia-high-contrast": {
-          "$value": "#3685f3",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [214.9, 88.7, 58.2],
+            "hex": "#3685f3"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-protanopia-deuteranopia": {
-          "$value": "#3685f3",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [214.9, 88.7, 58.2],
+            "hex": "#3685f3"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-protanopia-deuteranopia-high-contrast": {
-          "$value": "#3685f3",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [214.9, 88.7, 58.2],
+            "hex": "#3685f3"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-high-contrast": {
-          "$value": "#109135",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [137.2, 80.1, 31.6],
+            "hex": "#109135"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-tritanopia": {
-          "$value": "#075fc8",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [212.6, 93.2, 40.6],
+            "hex": "#075fc8"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-tritanopia-high-contrast": {
-          "$value": "#075fc8",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [212.6, 93.2, 40.6],
+            "hex": "#075fc8"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-protanopia-deuteranopia": {
-          "$value": "#075fc8",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [212.6, 93.2, 40.6],
+            "hex": "#075fc8"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-protanopia-deuteranopia-high-contrast": {
-          "$value": "#075fc8",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [212.6, 93.2, 40.6],
+            "hex": "#075fc8"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-high-contrast": {
-          "$value": "#03501b",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [138.7, 92.8, 16.3],
+            "hex": "#03501b"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -9525,7 +9840,11 @@
     "filePath": "src/tokens/component/button.json5",
     "isSource": true,
     "original": {
-      "$value": "#3685f3",
+      "$value": {
+        "colorSpace": "hsl",
+        "components": [214.9, 88.7, 58.2],
+        "hex": "#3685f3"
+      },
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -9535,13 +9854,21 @@
         },
         "org.primer.overrides": {
           "dark": {
-            "$value": "#2E9A40",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [130, 54, 39.2],
+              "hex": "#2E9A40"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed": {
-            "$value": "#428f46",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [123.1, 36.8, 41],
+              "hex": "#428f46"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -9553,61 +9880,101 @@
             "$type": "color"
           },
           "dark-tritanopia": {
-            "$value": "#3685f3",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [214.9, 88.7, 58.2],
+              "hex": "#3685f3"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-tritanopia-high-contrast": {
-            "$value": "#3685f3",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [214.9, 88.7, 58.2],
+              "hex": "#3685f3"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-protanopia-deuteranopia": {
-            "$value": "#3685f3",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [214.9, 88.7, 58.2],
+              "hex": "#3685f3"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-protanopia-deuteranopia-high-contrast": {
-            "$value": "#3685f3",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [214.9, 88.7, 58.2],
+              "hex": "#3685f3"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-high-contrast": {
-            "$value": "#109135",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [137.2, 80.1, 31.6],
+              "hex": "#109135"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-tritanopia": {
-            "$value": "#075fc8",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [212.6, 93.2, 40.6],
+              "hex": "#075fc8"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-tritanopia-high-contrast": {
-            "$value": "#075fc8",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [212.6, 93.2, 40.6],
+              "hex": "#075fc8"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-protanopia-deuteranopia": {
-            "$value": "#075fc8",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [212.6, 93.2, 40.6],
+              "hex": "#075fc8"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-protanopia-deuteranopia-high-contrast": {
-            "$value": "#075fc8",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [212.6, 93.2, 40.6],
+              "hex": "#075fc8"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-high-contrast": {
-            "$value": "#03501b",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [138.7, 92.8, 16.3],
+              "hex": "#03501b"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -9632,25 +9999,41 @@
       },
       "org.primer.overrides": {
         "dark": {
-          "$value": "#105823",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [135.8, 69.2, 20.4],
+            "hex": "#105823"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed": {
-          "$value": "#105823",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [135.8, 69.2, 20.4],
+            "hex": "#105823"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-tritanopia": {
-          "$value": "#5fabfe",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [211.3, 98.8, 68.4],
+            "hex": "#5fabfe"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-tritanopia-high-contrast": {
-          "$value": "#5fabfe",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [211.3, 98.8, 68.4],
+            "hex": "#5fabfe"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -9668,37 +10051,61 @@
           "$type": "color"
         },
         "dark-high-contrast": {
-          "$value": "#048f2f",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [138.6, 94.6, 28.8],
+            "hex": "#048f2f"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-tritanopia": {
-          "$value": "#92caff",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [209.2, 100, 78.6],
+            "hex": "#92caff"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-tritanopia-high-contrast": {
-          "$value": "#92caff",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [209.2, 100, 78.6],
+            "hex": "#92caff"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-protanopia-deuteranopia": {
-          "$value": "#92caff",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [209.2, 100, 78.6],
+            "hex": "#92caff"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-protanopia-deuteranopia-high-contrast": {
-          "$value": "#92caff",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [209.2, 100, 78.6],
+            "hex": "#92caff"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-high-contrast": {
-          "$value": "#85cb97",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [135.4, 40.2, 65.9],
+            "hex": "#85cb97"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -9708,7 +10115,11 @@
     "filePath": "src/tokens/component/button.json5",
     "isSource": true,
     "original": {
-      "$value": "#5fabfe",
+      "$value": {
+        "colorSpace": "hsl",
+        "components": [211.3, 98.8, 68.4],
+        "hex": "#5fabfe"
+      },
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -9718,25 +10129,41 @@
         },
         "org.primer.overrides": {
           "dark": {
-            "$value": "#105823",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [135.8, 69.2, 20.4],
+              "hex": "#105823"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed": {
-            "$value": "#105823",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [135.8, 69.2, 20.4],
+              "hex": "#105823"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-tritanopia": {
-            "$value": "#5fabfe",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [211.3, 98.8, 68.4],
+              "hex": "#5fabfe"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-tritanopia-high-contrast": {
-            "$value": "#5fabfe",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [211.3, 98.8, 68.4],
+              "hex": "#5fabfe"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -9754,37 +10181,61 @@
             "$type": "color"
           },
           "dark-high-contrast": {
-            "$value": "#048f2f",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [138.6, 94.6, 28.8],
+              "hex": "#048f2f"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-tritanopia": {
-            "$value": "#92caff",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [209.2, 100, 78.6],
+              "hex": "#92caff"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-tritanopia-high-contrast": {
-            "$value": "#92caff",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [209.2, 100, 78.6],
+              "hex": "#92caff"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-protanopia-deuteranopia": {
-            "$value": "#92caff",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [209.2, 100, 78.6],
+              "hex": "#92caff"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-protanopia-deuteranopia-high-contrast": {
-            "$value": "#92caff",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [209.2, 100, 78.6],
+              "hex": "#92caff"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-high-contrast": {
-            "$value": "#85cb97",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [135.4, 40.2, 65.9],
+              "hex": "#85cb97"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -9809,13 +10260,21 @@
       },
       "org.primer.overrides": {
         "dark": {
-          "$value": "#29903B",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [130.5, 55.7, 36.3],
+            "hex": "#29903B"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed": {
-          "$value": "#3b8640",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [124, 38.9, 37.8],
+            "hex": "#3b8640"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -9827,61 +10286,101 @@
           "$type": "color"
         },
         "dark-tritanopia": {
-          "$value": "#2a7aef",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [215.6, 86, 55.1],
+            "hex": "#2a7aef"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-tritanopia-high-contrast": {
-          "$value": "#2a7aef",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [215.6, 86, 55.1],
+            "hex": "#2a7aef"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-protanopia-deuteranopia": {
-          "$value": "#2a7aef",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [215.6, 86, 55.1],
+            "hex": "#2a7aef"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-protanopia-deuteranopia-high-contrast": {
-          "$value": "#2a7aef",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [215.6, 86, 55.1],
+            "hex": "#2a7aef"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-high-contrast": {
-          "$value": "#08792b",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [138.6, 87.6, 25.3],
+            "hex": "#08792b"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-tritanopia": {
-          "$value": "#0864d1",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [212.5, 92.6, 42.5],
+            "hex": "#0864d1"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-tritanopia-high-contrast": {
-          "$value": "#0864d1",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [212.5, 92.6, 42.5],
+            "hex": "#0864d1"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-protanopia-deuteranopia": {
-          "$value": "#0864d1",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [212.5, 92.6, 42.5],
+            "hex": "#0864d1"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-protanopia-deuteranopia-high-contrast": {
-          "$value": "#0864d1",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [212.5, 92.6, 42.5],
+            "hex": "#0864d1"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-high-contrast": {
-          "$value": "#04571e",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [138.8, 91.2, 17.8],
+            "hex": "#04571e"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -9891,7 +10390,11 @@
     "filePath": "src/tokens/component/button.json5",
     "isSource": true,
     "original": {
-      "$value": "#2a7aef",
+      "$value": {
+        "colorSpace": "hsl",
+        "components": [215.6, 86, 55.1],
+        "hex": "#2a7aef"
+      },
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -9901,13 +10404,21 @@
         },
         "org.primer.overrides": {
           "dark": {
-            "$value": "#29903B",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [130.5, 55.7, 36.3],
+              "hex": "#29903B"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed": {
-            "$value": "#3b8640",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [124, 38.9, 37.8],
+              "hex": "#3b8640"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -9919,61 +10430,101 @@
             "$type": "color"
           },
           "dark-tritanopia": {
-            "$value": "#2a7aef",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [215.6, 86, 55.1],
+              "hex": "#2a7aef"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-tritanopia-high-contrast": {
-            "$value": "#2a7aef",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [215.6, 86, 55.1],
+              "hex": "#2a7aef"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-protanopia-deuteranopia": {
-            "$value": "#2a7aef",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [215.6, 86, 55.1],
+              "hex": "#2a7aef"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-protanopia-deuteranopia-high-contrast": {
-            "$value": "#2a7aef",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [215.6, 86, 55.1],
+              "hex": "#2a7aef"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-high-contrast": {
-            "$value": "#08792b",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [138.6, 87.6, 25.3],
+              "hex": "#08792b"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-tritanopia": {
-            "$value": "#0864d1",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [212.5, 92.6, 42.5],
+              "hex": "#0864d1"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-tritanopia-high-contrast": {
-            "$value": "#0864d1",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [212.5, 92.6, 42.5],
+              "hex": "#0864d1"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-protanopia-deuteranopia": {
-            "$value": "#0864d1",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [212.5, 92.6, 42.5],
+              "hex": "#0864d1"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-protanopia-deuteranopia-high-contrast": {
-            "$value": "#0864d1",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [212.5, 92.6, 42.5],
+              "hex": "#0864d1"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-high-contrast": {
-            "$value": "#04571e",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [138.8, 91.2, 17.8],
+              "hex": "#04571e"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -10084,37 +10635,61 @@
       },
       "org.primer.overrides": {
         "dark": {
-          "$value": "#105823",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [135.8, 69.2, 20.4],
+            "hex": "#105823"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed": {
-          "$value": "#105823",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [135.8, 69.2, 20.4],
+            "hex": "#105823"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-tritanopia": {
-          "$value": "#5fabfe",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [211.3, 98.8, 68.4],
+            "hex": "#5fabfe"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-tritanopia-high-contrast": {
-          "$value": "#5fabfe",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [211.3, 98.8, 68.4],
+            "hex": "#5fabfe"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-protanopia-deuteranopia": {
-          "$value": "#1158c7",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.6, 84.3, 42.4],
+            "hex": "#1158c7"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-protanopia-deuteranopia-high-contrast": {
-          "$value": "#1158c7",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.6, 84.3, 42.4],
+            "hex": "#1158c7"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -10127,7 +10702,11 @@
           "$type": "color"
         },
         "light-high-contrast": {
-          "$value": "#85cb97",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [135.4, 40.2, 65.9],
+            "hex": "#85cb97"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -10137,7 +10716,11 @@
     "filePath": "src/tokens/component/button.json5",
     "isSource": true,
     "original": {
-      "$value": "#5fabfe",
+      "$value": {
+        "colorSpace": "hsl",
+        "components": [211.3, 98.8, 68.4],
+        "hex": "#5fabfe"
+      },
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -10147,37 +10730,61 @@
         },
         "org.primer.overrides": {
           "dark": {
-            "$value": "#105823",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [135.8, 69.2, 20.4],
+              "hex": "#105823"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed": {
-            "$value": "#105823",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [135.8, 69.2, 20.4],
+              "hex": "#105823"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-tritanopia": {
-            "$value": "#5fabfe",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [211.3, 98.8, 68.4],
+              "hex": "#5fabfe"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-tritanopia-high-contrast": {
-            "$value": "#5fabfe",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [211.3, 98.8, 68.4],
+              "hex": "#5fabfe"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-protanopia-deuteranopia": {
-            "$value": "#1158c7",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.6, 84.3, 42.4],
+              "hex": "#1158c7"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-protanopia-deuteranopia-high-contrast": {
-            "$value": "#1158c7",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.6, 84.3, 42.4],
+              "hex": "#1158c7"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -10190,7 +10797,11 @@
             "$type": "color"
           },
           "light-high-contrast": {
-            "$value": "#85cb97",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [135.4, 40.2, 65.9],
+              "hex": "#85cb97"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -10430,13 +11041,21 @@
           "$type": "color"
         },
         "dark-dimmed": {
-          "$value": "#ffffff",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [0, 0, 100],
+            "hex": "#ffffff"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed-high-contrast": {
-          "$value": "#ffffff",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [0, 0, 100],
+            "hex": "#ffffff"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -10462,13 +11081,21 @@
             "$type": "color"
           },
           "dark-dimmed": {
-            "$value": "#ffffff",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [0, 0, 100],
+              "hex": "#ffffff"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed-high-contrast": {
-            "$value": "#ffffff",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [0, 0, 100],
+              "hex": "#ffffff"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -10483,6 +11110,35 @@
     "value": "#ffffff",
     "type": "color"
   },
+  "button-primary-iconColor-disabled": {
+    "key": "{button.primary.iconColor.disabled}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/component/button.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{button.primary.fgColor.disabled}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      },
+      "key": "{button.primary.iconColor.disabled}"
+    },
+    "name": "button-primary-iconColor-disabled",
+    "attributes": {},
+    "path": ["button", "primary", "iconColor", "disabled"],
+    "value": "#ffffff66",
+    "type": "color"
+  },
   "button-primary-iconColor-rest": {
     "key": "{button.primary.iconColor.rest}",
     "$extensions": {
@@ -10506,13 +11162,21 @@
           "$type": "color"
         },
         "dark-dimmed": {
-          "$value": "#ffffff",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [0, 0, 100],
+            "hex": "#ffffff"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed-high-contrast": {
-          "$value": "#ffffff",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [0, 0, 100],
+            "hex": "#ffffff"
+          },
           "filePath": "src/tokens/component/button.json5",
           "isSource": true,
           "$type": "color"
@@ -10545,13 +11209,21 @@
             "$type": "color"
           },
           "dark-dimmed": {
-            "$value": "#ffffff",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [0, 0, 100],
+              "hex": "#ffffff"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed-high-contrast": {
-            "$value": "#ffffff",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [0, 0, 100],
+              "hex": "#ffffff"
+            },
             "filePath": "src/tokens/component/button.json5",
             "isSource": true,
             "$type": "color"
@@ -10784,7 +11456,7 @@
     "name": "button-primary-shadow-selected",
     "attributes": {},
     "path": ["button", "primary", "shadow", "selected"],
-    "value": "0 0 0 0 #000000",
+    "value": "0 0 0 0 #00000000",
     "type": "shadow"
   },
   "button-star-iconColor": {
@@ -16924,7 +17596,11 @@
       "org.primer.overrides": {
         "dark": "#3d444d",
         "dark-dimmed": {
-          "$value": "#3d444d",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [213.8, 11.6, 27.1],
+            "hex": "#3d444d"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
@@ -16945,7 +17621,11 @@
         "org.primer.overrides": {
           "dark": "{borderColor.default}",
           "dark-dimmed": {
-            "$value": "#3d444d",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [213.8, 11.6, 27.1],
+              "hex": "#3d444d"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
@@ -17076,49 +17756,81 @@
       "org.primer.overrides": {
         "dark": "#3685F3",
         "dark-high-contrast": {
-          "$value": "#3c79d0",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [215.3, 61.2, 52.5],
+            "hex": "#3c79d0"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-protanopia-deuteranopia-high-contrast": {
-          "$value": "#3c79d0",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [215.3, 61.2, 52.5],
+            "hex": "#3c79d0"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-tritanopia-high-contrast": {
-          "$value": "#3c79d0",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [215.3, 61.2, 52.5],
+            "hex": "#3c79d0"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed": {
-          "$value": "#3f7fdb",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [215.4, 68.4, 55.3],
+            "hex": "#3f7fdb"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed-high-contrast": {
-          "$value": "#3c79d0",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [215.3, 61.2, 52.5],
+            "hex": "#3c79d0"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-high-contrast": {
-          "$value": "#033f9d",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.6, 96.3, 31.4],
+            "hex": "#033f9d"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-tritanopia-high-contrast": {
-          "$value": "#033f9d",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.6, 96.3, 31.4],
+            "hex": "#033f9d"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-protanopia-deuteranopia-high-contrast": {
-          "$value": "#033f9d",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.6, 96.3, 31.4],
+            "hex": "#033f9d"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
@@ -17139,49 +17851,81 @@
         "org.primer.overrides": {
           "dark": "#3685F3",
           "dark-high-contrast": {
-            "$value": "#3c79d0",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [215.3, 61.2, 52.5],
+              "hex": "#3c79d0"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-protanopia-deuteranopia-high-contrast": {
-            "$value": "#3c79d0",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [215.3, 61.2, 52.5],
+              "hex": "#3c79d0"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-tritanopia-high-contrast": {
-            "$value": "#3c79d0",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [215.3, 61.2, 52.5],
+              "hex": "#3c79d0"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed": {
-            "$value": "#3f7fdb",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [215.4, 68.4, 55.3],
+              "hex": "#3f7fdb"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed-high-contrast": {
-            "$value": "#3c79d0",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [215.3, 61.2, 52.5],
+              "hex": "#3c79d0"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-high-contrast": {
-            "$value": "#033f9d",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.6, 96.3, 31.4],
+              "hex": "#033f9d"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-tritanopia-high-contrast": {
-            "$value": "#033f9d",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.6, 96.3, 31.4],
+              "hex": "#033f9d"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-protanopia-deuteranopia-high-contrast": {
-            "$value": "#033f9d",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.6, 96.3, 31.4],
+              "hex": "#033f9d"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
@@ -17242,49 +17986,81 @@
       "org.primer.overrides": {
         "dark": "#2A7AEF",
         "dark-high-contrast": {
-          "$value": "#2b64c1",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [217.2, 63.6, 46.3],
+            "hex": "#2b64c1"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-tritanopia-high-contrast": {
-          "$value": "#2b64c1",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [217.2, 63.6, 46.3],
+            "hex": "#2b64c1"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-protanopia-deuteranopia-high-contrast": {
-          "$value": "#2b64c1",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [217.2, 63.6, 46.3],
+            "hex": "#2b64c1"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed": {
-          "$value": "#3876d3",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216, 63.8, 52.4],
+            "hex": "#3876d3"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed-high-contrast": {
-          "$value": "#2b64c1",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [217.2, 63.6, 46.3],
+            "hex": "#2b64c1"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-high-contrast": {
-          "$value": "#0344a8",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.4, 96.5, 33.5],
+            "hex": "#0344a8"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-tritanopia-high-contrast": {
-          "$value": "#0344a8",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.4, 96.5, 33.5],
+            "hex": "#0344a8"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-protanopia-deuteranopia-high-contrast": {
-          "$value": "#0344a8",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.4, 96.5, 33.5],
+            "hex": "#0344a8"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
@@ -17305,49 +18081,81 @@
         "org.primer.overrides": {
           "dark": "#2A7AEF",
           "dark-high-contrast": {
-            "$value": "#2b64c1",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [217.2, 63.6, 46.3],
+              "hex": "#2b64c1"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-tritanopia-high-contrast": {
-            "$value": "#2b64c1",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [217.2, 63.6, 46.3],
+              "hex": "#2b64c1"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-protanopia-deuteranopia-high-contrast": {
-            "$value": "#2b64c1",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [217.2, 63.6, 46.3],
+              "hex": "#2b64c1"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed": {
-            "$value": "#3876d3",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216, 63.8, 52.4],
+              "hex": "#3876d3"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed-high-contrast": {
-            "$value": "#2b64c1",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [217.2, 63.6, 46.3],
+              "hex": "#2b64c1"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-high-contrast": {
-            "$value": "#0344a8",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.4, 96.5, 33.5],
+              "hex": "#0344a8"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-tritanopia-high-contrast": {
-            "$value": "#0344a8",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.4, 96.5, 33.5],
+              "hex": "#0344a8"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-protanopia-deuteranopia-high-contrast": {
-            "$value": "#0344a8",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.4, 96.5, 33.5],
+              "hex": "#0344a8"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
@@ -17426,7 +18234,11 @@
           "$type": "color"
         },
         "dark-dimmed": {
-          "$value": "#3f7fdb",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [215.4, 68.4, 55.3],
+            "hex": "#3f7fdb"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
@@ -17438,19 +18250,31 @@
           "$type": "color"
         },
         "light-high-contrast": {
-          "$value": "#033f9d",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.6, 96.3, 31.4],
+            "hex": "#033f9d"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-protanopia-deuteranopia-high-contrast": {
-          "$value": "#033f9d",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.6, 96.3, 31.4],
+            "hex": "#033f9d"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-tritanopia-high-contrast": {
-          "$value": "#033f9d",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.6, 96.3, 31.4],
+            "hex": "#033f9d"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
@@ -17489,7 +18313,11 @@
             "$type": "color"
           },
           "dark-dimmed": {
-            "$value": "#3f7fdb",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [215.4, 68.4, 55.3],
+              "hex": "#3f7fdb"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
@@ -17501,19 +18329,31 @@
             "$type": "color"
           },
           "light-high-contrast": {
-            "$value": "#033f9d",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.6, 96.3, 31.4],
+              "hex": "#033f9d"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-protanopia-deuteranopia-high-contrast": {
-            "$value": "#033f9d",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.6, 96.3, 31.4],
+              "hex": "#033f9d"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-tritanopia-high-contrast": {
-            "$value": "#033f9d",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.6, 96.3, 31.4],
+              "hex": "#033f9d"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
@@ -17592,7 +18432,11 @@
           "$type": "color"
         },
         "dark-dimmed": {
-          "$value": "#3876d3",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216, 63.8, 52.4],
+            "hex": "#3876d3"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
@@ -17604,19 +18448,31 @@
           "$type": "color"
         },
         "light-high-contrast": {
-          "$value": "#0344a8",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.4, 96.5, 33.5],
+            "hex": "#0344a8"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-tritanopia-high-contrast": {
-          "$value": "#0344a8",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.4, 96.5, 33.5],
+            "hex": "#0344a8"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-protanopia-deuteranopia-high-contrast": {
-          "$value": "#0344a8",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [216.4, 96.5, 33.5],
+            "hex": "#0344a8"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
@@ -17655,7 +18511,11 @@
             "$type": "color"
           },
           "dark-dimmed": {
-            "$value": "#3876d3",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216, 63.8, 52.4],
+              "hex": "#3876d3"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
@@ -17667,19 +18527,31 @@
             "$type": "color"
           },
           "light-high-contrast": {
-            "$value": "#0344a8",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.4, 96.5, 33.5],
+              "hex": "#0344a8"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-tritanopia-high-contrast": {
-            "$value": "#0344a8",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.4, 96.5, 33.5],
+              "hex": "#0344a8"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-protanopia-deuteranopia-high-contrast": {
-            "$value": "#0344a8",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [216.4, 96.5, 33.5],
+              "hex": "#0344a8"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
@@ -17871,21 +18743,33 @@
           "$type": "color"
         },
         "dark-high-contrast": {
-          "$value": "#c51120",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [355, 84.1, 42],
+            "hex": "#c51120"
+          },
           "alpha": 1,
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed-high-contrast": {
-          "$value": "#c51120",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [355, 84.1, 42],
+            "hex": "#c51120"
+          },
           "alpha": 1,
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-tritanopia-high-contrast": {
-          "$value": "#c51120",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [355, 84.1, 42],
+            "hex": "#c51120"
+          },
           "alpha": 1,
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
@@ -17898,13 +18782,21 @@
           "$type": "color"
         },
         "light-high-contrast": {
-          "$value": "#8c0b1d",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [351.6, 85.4, 29.6],
+            "hex": "#8c0b1d"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "light-tritanopia-high-contrast": {
-          "$value": "#8c0b1d",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [351.6, 85.4, 29.6],
+            "hex": "#8c0b1d"
+          },
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
@@ -17945,21 +18837,33 @@
             "$type": "color"
           },
           "dark-high-contrast": {
-            "$value": "#c51120",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [355, 84.1, 42],
+              "hex": "#c51120"
+            },
             "alpha": 1,
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed-high-contrast": {
-            "$value": "#c51120",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [355, 84.1, 42],
+              "hex": "#c51120"
+            },
             "alpha": 1,
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-tritanopia-high-contrast": {
-            "$value": "#c51120",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [355, 84.1, 42],
+              "hex": "#c51120"
+            },
             "alpha": 1,
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
@@ -17972,13 +18876,21 @@
             "$type": "color"
           },
           "light-high-contrast": {
-            "$value": "#8c0b1d",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [351.6, 85.4, 29.6],
+              "hex": "#8c0b1d"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "light-tritanopia-high-contrast": {
-            "$value": "#8c0b1d",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [351.6, 85.4, 29.6],
+              "hex": "#8c0b1d"
+            },
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
@@ -47397,14 +48309,22 @@
       },
       "org.primer.overrides": {
         "dark": {
-          "$value": "#3a8cfd",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [214.8, 98, 61],
+            "hex": "#3a8cfd"
+          },
           "alpha": 0.36,
           "filePath": "src/tokens/component/reactionButton.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed": {
-          "$value": "#4285e5",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [215.3, 75.8, 57.8],
+            "hex": "#4285e5"
+          },
           "alpha": 0.36,
           "filePath": "src/tokens/component/reactionButton.json5",
           "isSource": true,
@@ -47412,7 +48332,11 @@
         },
         "light-high-contrast": "#c7e9ff",
         "dark-high-contrast": {
-          "$value": "#5dadff",
+          "$value": {
+            "colorSpace": "hsl",
+            "components": [210.4, 100, 68.2],
+            "hex": "#5dadff"
+          },
           "alpha": 0.36,
           "filePath": "src/tokens/component/reactionButton.json5",
           "isSource": true,
@@ -47424,7 +48348,11 @@
     "isSource": true,
     "alpha": 0.36,
     "original": {
-      "$value": "#3a8cfd",
+      "$value": {
+        "colorSpace": "hsl",
+        "components": [214.8, 98, 61],
+        "hex": "#3a8cfd"
+      },
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -47434,14 +48362,22 @@
         },
         "org.primer.overrides": {
           "dark": {
-            "$value": "#3a8cfd",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [214.8, 98, 61],
+              "hex": "#3a8cfd"
+            },
             "alpha": 0.36,
             "filePath": "src/tokens/component/reactionButton.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed": {
-            "$value": "#4285e5",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [215.3, 75.8, 57.8],
+              "hex": "#4285e5"
+            },
             "alpha": 0.36,
             "filePath": "src/tokens/component/reactionButton.json5",
             "isSource": true,
@@ -47449,7 +48385,11 @@
           },
           "light-high-contrast": "#c7e9ff",
           "dark-high-contrast": {
-            "$value": "#5dadff",
+            "$value": {
+              "colorSpace": "hsl",
+              "components": [210.4, 100, 68.2],
+              "hex": "#5dadff"
+            },
             "alpha": 0.36,
             "filePath": "src/tokens/component/reactionButton.json5",
             "isSource": true,
@@ -47782,6 +48722,147 @@
           "filePath": "src/tokens/functional/shadow/shadow.json5",
           "isSource": true,
           "$type": "shadow"
+        },
+        "light-high-contrast": {
+          "$value": [
+            {
+              "color": "#3d444db3",
+              "alpha": 1,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.24,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 40,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 80,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              }
+            }
+          ],
+          "filePath": "src/tokens/functional/shadow/shadow.json5",
+          "isSource": true,
+          "$type": "shadow"
+        },
+        "light-protanopia-deuteranopia-high-contrast": {
+          "$value": [
+            {
+              "color": "#3d444db3",
+              "alpha": 1,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.24,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 40,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 80,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              }
+            }
+          ],
+          "filePath": "src/tokens/functional/shadow/shadow.json5",
+          "isSource": true,
+          "$type": "shadow"
+        },
+        "light-tritanopia-high-contrast": {
+          "$value": [
+            {
+              "color": "#3d444db3",
+              "alpha": 1,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.24,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 40,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 80,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              }
+            }
+          ],
+          "filePath": "src/tokens/functional/shadow/shadow.json5",
+          "isSource": true,
+          "$type": "shadow"
         }
       },
       "org.primer.llm": {
@@ -47888,6 +48969,147 @@
             "filePath": "src/tokens/functional/shadow/shadow.json5",
             "isSource": true,
             "$type": "shadow"
+          },
+          "light-high-contrast": {
+            "$value": [
+              {
+                "color": "{overlay.borderColor}",
+                "alpha": 1,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 1,
+                  "unit": "px"
+                }
+              },
+              {
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.24,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 40,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 80,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                }
+              }
+            ],
+            "filePath": "src/tokens/functional/shadow/shadow.json5",
+            "isSource": true,
+            "$type": "shadow"
+          },
+          "light-protanopia-deuteranopia-high-contrast": {
+            "$value": [
+              {
+                "color": "{overlay.borderColor}",
+                "alpha": 1,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 1,
+                  "unit": "px"
+                }
+              },
+              {
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.24,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 40,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 80,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                }
+              }
+            ],
+            "filePath": "src/tokens/functional/shadow/shadow.json5",
+            "isSource": true,
+            "$type": "shadow"
+          },
+          "light-tritanopia-high-contrast": {
+            "$value": [
+              {
+                "color": "{overlay.borderColor}",
+                "alpha": 1,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 1,
+                  "unit": "px"
+                }
+              },
+              {
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.24,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 40,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 80,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                }
+              }
+            ],
+            "filePath": "src/tokens/functional/shadow/shadow.json5",
+            "isSource": true,
+            "$type": "shadow"
           }
         },
         "org.primer.llm": {
@@ -48163,152 +49385,794 @@
                 "value": -12,
                 "unit": "px"
               }
-            },
-            {
-              "color": "#010409",
-              "alpha": 0.4,
-              "offsetX": {
-                "value": 0,
-                "unit": "px"
+            },
+            {
+              "color": "#010409",
+              "alpha": 0.4,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 48,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 96,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -24,
+                "unit": "px"
+              }
+            }
+          ],
+          "filePath": "src/tokens/functional/shadow/shadow.json5",
+          "isSource": true,
+          "$type": "shadow"
+        },
+        "light-high-contrast": {
+          "$value": [
+            {
+              "color": "#3d444db3",
+              "alpha": 1,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.08,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 8,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 16,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -4,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.08,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 4,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 32,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -4,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.08,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 24,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 48,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -12,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.08,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 48,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 96,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -24,
+                "unit": "px"
+              }
+            }
+          ],
+          "filePath": "src/tokens/functional/shadow/shadow.json5",
+          "isSource": true,
+          "$type": "shadow"
+        },
+        "light-protanopia-deuteranopia-high-contrast": {
+          "$value": [
+            {
+              "color": "#3d444db3",
+              "alpha": 1,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.08,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 8,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 16,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -4,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.08,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 4,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 32,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -4,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.08,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 24,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 48,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -12,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.08,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 48,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 96,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -24,
+                "unit": "px"
+              }
+            }
+          ],
+          "filePath": "src/tokens/functional/shadow/shadow.json5",
+          "isSource": true,
+          "$type": "shadow"
+        },
+        "light-tritanopia-high-contrast": {
+          "$value": [
+            {
+              "color": "#3d444db3",
+              "alpha": 1,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.08,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 8,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 16,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -4,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.08,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 4,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 32,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -4,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.08,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 24,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 48,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -12,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.08,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 48,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 96,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -24,
+                "unit": "px"
+              }
+            }
+          ],
+          "filePath": "src/tokens/functional/shadow/shadow.json5",
+          "isSource": true,
+          "$type": "shadow"
+        }
+      },
+      "org.primer.llm": {
+        "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
+        "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
+      }
+    },
+    "filePath": "src/tokens/functional/shadow/shadow.json5",
+    "isSource": true,
+    "original": {
+      "$value": [
+        {
+          "color": "{overlay.borderColor}",
+          "alpha": 1,
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 1,
+            "unit": "px"
+          }
+        },
+        {
+          "color": "{base.color.neutral.0}",
+          "alpha": 0.4,
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 8,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 16,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -4,
+            "unit": "px"
+          }
+        },
+        {
+          "color": "{base.color.neutral.0}",
+          "alpha": 0.4,
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 4,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 32,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -4,
+            "unit": "px"
+          }
+        },
+        {
+          "color": "{base.color.neutral.0}",
+          "alpha": 0.4,
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 24,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 48,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -12,
+            "unit": "px"
+          }
+        },
+        {
+          "color": "{base.color.neutral.0}",
+          "alpha": 0.4,
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 48,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 96,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -24,
+            "unit": "px"
+          }
+        }
+      ],
+      "$type": "shadow",
+      "$description": "Medium floating shadow for popovers and action menus",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "shadow"
+        },
+        "org.primer.overrides": {
+          "dark": {
+            "$value": [
+              {
+                "color": "{overlay.borderColor}",
+                "alpha": 1,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 1,
+                  "unit": "px"
+                }
+              },
+              {
+                "color": "{base.color.neutral.0}",
+                "alpha": 0.4,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 8,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 16,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -4,
+                  "unit": "px"
+                }
+              },
+              {
+                "color": "{base.color.neutral.0}",
+                "alpha": 0.4,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 4,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 32,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -4,
+                  "unit": "px"
+                }
+              },
+              {
+                "color": "{base.color.neutral.0}",
+                "alpha": 0.4,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 24,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 48,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -12,
+                  "unit": "px"
+                }
+              },
+              {
+                "color": "{base.color.neutral.0}",
+                "alpha": 0.4,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 48,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 96,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -24,
+                  "unit": "px"
+                }
+              }
+            ],
+            "filePath": "src/tokens/functional/shadow/shadow.json5",
+            "isSource": true,
+            "$type": "shadow"
+          },
+          "light-high-contrast": {
+            "$value": [
+              {
+                "color": "{overlay.borderColor}",
+                "alpha": 1,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 1,
+                  "unit": "px"
+                }
+              },
+              {
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.08,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 8,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 16,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -4,
+                  "unit": "px"
+                }
+              },
+              {
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.08,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 4,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 32,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -4,
+                  "unit": "px"
+                }
+              },
+              {
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.08,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 24,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 48,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -12,
+                  "unit": "px"
+                }
+              },
+              {
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.08,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 48,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 96,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -24,
+                  "unit": "px"
+                }
+              }
+            ],
+            "filePath": "src/tokens/functional/shadow/shadow.json5",
+            "isSource": true,
+            "$type": "shadow"
+          },
+          "light-protanopia-deuteranopia-high-contrast": {
+            "$value": [
+              {
+                "color": "{overlay.borderColor}",
+                "alpha": 1,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 1,
+                  "unit": "px"
+                }
               },
-              "offsetY": {
-                "value": 48,
-                "unit": "px"
+              {
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.08,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 8,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 16,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -4,
+                  "unit": "px"
+                }
               },
-              "blur": {
-                "value": 96,
-                "unit": "px"
+              {
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.08,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 4,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 32,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -4,
+                  "unit": "px"
+                }
               },
-              "spread": {
-                "value": -24,
-                "unit": "px"
+              {
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.08,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 24,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 48,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -12,
+                  "unit": "px"
+                }
+              },
+              {
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.08,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 48,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 96,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -24,
+                  "unit": "px"
+                }
               }
-            }
-          ],
-          "filePath": "src/tokens/functional/shadow/shadow.json5",
-          "isSource": true,
-          "$type": "shadow"
-        }
-      },
-      "org.primer.llm": {
-        "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
-        "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
-      }
-    },
-    "filePath": "src/tokens/functional/shadow/shadow.json5",
-    "isSource": true,
-    "original": {
-      "$value": [
-        {
-          "color": "{overlay.borderColor}",
-          "alpha": 1,
-          "offsetX": {
-            "value": 0,
-            "unit": "px"
-          },
-          "offsetY": {
-            "value": 0,
-            "unit": "px"
-          },
-          "blur": {
-            "value": 0,
-            "unit": "px"
-          },
-          "spread": {
-            "value": 1,
-            "unit": "px"
-          }
-        },
-        {
-          "color": "{base.color.neutral.0}",
-          "alpha": 0.4,
-          "offsetX": {
-            "value": 0,
-            "unit": "px"
-          },
-          "offsetY": {
-            "value": 8,
-            "unit": "px"
-          },
-          "blur": {
-            "value": 16,
-            "unit": "px"
-          },
-          "spread": {
-            "value": -4,
-            "unit": "px"
-          }
-        },
-        {
-          "color": "{base.color.neutral.0}",
-          "alpha": 0.4,
-          "offsetX": {
-            "value": 0,
-            "unit": "px"
-          },
-          "offsetY": {
-            "value": 4,
-            "unit": "px"
-          },
-          "blur": {
-            "value": 32,
-            "unit": "px"
-          },
-          "spread": {
-            "value": -4,
-            "unit": "px"
-          }
-        },
-        {
-          "color": "{base.color.neutral.0}",
-          "alpha": 0.4,
-          "offsetX": {
-            "value": 0,
-            "unit": "px"
-          },
-          "offsetY": {
-            "value": 24,
-            "unit": "px"
-          },
-          "blur": {
-            "value": 48,
-            "unit": "px"
-          },
-          "spread": {
-            "value": -12,
-            "unit": "px"
-          }
-        },
-        {
-          "color": "{base.color.neutral.0}",
-          "alpha": 0.4,
-          "offsetX": {
-            "value": 0,
-            "unit": "px"
-          },
-          "offsetY": {
-            "value": 48,
-            "unit": "px"
-          },
-          "blur": {
-            "value": 96,
-            "unit": "px"
+            ],
+            "filePath": "src/tokens/functional/shadow/shadow.json5",
+            "isSource": true,
+            "$type": "shadow"
           },
-          "spread": {
-            "value": -24,
-            "unit": "px"
-          }
-        }
-      ],
-      "$type": "shadow",
-      "$description": "Medium floating shadow for popovers and action menus",
-      "$extensions": {
-        "org.primer.figma": {
-          "collection": "mode",
-          "group": "shadow"
-        },
-        "org.primer.overrides": {
-          "dark": {
+          "light-tritanopia-high-contrast": {
             "$value": [
               {
                 "color": "{overlay.borderColor}",
@@ -48331,8 +50195,8 @@
                 }
               },
               {
-                "color": "{base.color.neutral.0}",
-                "alpha": 0.4,
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.08,
                 "offsetX": {
                   "value": 0,
                   "unit": "px"
@@ -48351,8 +50215,8 @@
                 }
               },
               {
-                "color": "{base.color.neutral.0}",
-                "alpha": 0.4,
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.08,
                 "offsetX": {
                   "value": 0,
                   "unit": "px"
@@ -48371,8 +50235,8 @@
                 }
               },
               {
-                "color": "{base.color.neutral.0}",
-                "alpha": 0.4,
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.08,
                 "offsetX": {
                   "value": 0,
                   "unit": "px"
@@ -48391,8 +50255,8 @@
                 }
               },
               {
-                "color": "{base.color.neutral.0}",
-                "alpha": 0.4,
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.08,
                 "offsetX": {
                   "value": 0,
                   "unit": "px"
@@ -48720,6 +50584,147 @@
           "filePath": "src/tokens/functional/shadow/shadow.json5",
           "isSource": true,
           "$type": "shadow"
+        },
+        "light-high-contrast": {
+          "$value": [
+            {
+              "color": "#3d444db3",
+              "alpha": 1,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.32,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 56,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 112,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              }
+            }
+          ],
+          "filePath": "src/tokens/functional/shadow/shadow.json5",
+          "isSource": true,
+          "$type": "shadow"
+        },
+        "light-protanopia-deuteranopia-high-contrast": {
+          "$value": [
+            {
+              "color": "#3d444db3",
+              "alpha": 1,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.32,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 56,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 112,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              }
+            }
+          ],
+          "filePath": "src/tokens/functional/shadow/shadow.json5",
+          "isSource": true,
+          "$type": "shadow"
+        },
+        "light-tritanopia-high-contrast": {
+          "$value": [
+            {
+              "color": "#3d444db3",
+              "alpha": 1,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              }
+            },
+            {
+              "color": "#f0f6fc",
+              "alpha": 0.32,
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 56,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 112,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              }
+            }
+          ],
+          "filePath": "src/tokens/functional/shadow/shadow.json5",
+          "isSource": true,
+          "$type": "shadow"
         }
       },
       "org.primer.llm": {
@@ -48826,6 +50831,147 @@
             "filePath": "src/tokens/functional/shadow/shadow.json5",
             "isSource": true,
             "$type": "shadow"
+          },
+          "light-high-contrast": {
+            "$value": [
+              {
+                "color": "{overlay.borderColor}",
+                "alpha": 1,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 1,
+                  "unit": "px"
+                }
+              },
+              {
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.32,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 56,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 112,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                }
+              }
+            ],
+            "filePath": "src/tokens/functional/shadow/shadow.json5",
+            "isSource": true,
+            "$type": "shadow"
+          },
+          "light-protanopia-deuteranopia-high-contrast": {
+            "$value": [
+              {
+                "color": "{overlay.borderColor}",
+                "alpha": 1,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 1,
+                  "unit": "px"
+                }
+              },
+              {
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.32,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 56,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 112,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                }
+              }
+            ],
+            "filePath": "src/tokens/functional/shadow/shadow.json5",
+            "isSource": true,
+            "$type": "shadow"
+          },
+          "light-tritanopia-high-contrast": {
+            "$value": [
+              {
+                "color": "{overlay.borderColor}",
+                "alpha": 1,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 1,
+                  "unit": "px"
+                }
+              },
+              {
+                "color": "{base.color.neutral.12}",
+                "alpha": 0.32,
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 56,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 112,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                }
+              }
+            ],
+            "filePath": "src/tokens/functional/shadow/shadow.json5",
+            "isSource": true,
+            "$type": "shadow"
           }
         },
         "org.primer.llm": {