diff --git a/package-lock.json b/package-lock.json
index 30830be8..acad681f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@babel/node": "^7.23.9",
         "@babel/preset-env": "^7.24.4",
         "@primer/octicons": "^19.9.0",
-        "@primer/primitives": "^9.0.0",
+        "@primer/primitives": "^10.0.0",
         "@rollup/plugin-html": "^1.0.3",
         "@rollup/plugin-json": "^6.1.0",
         "@rollup/plugin-node-resolve": "^15.2.3",
@@ -2157,21 +2157,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/@prettier/sync": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@prettier/sync/-/sync-0.5.2.tgz",
-      "integrity": "sha512-Yb569su456XNx5BsH/Vyem7xD6g/y9iLmLUzRKM1a/dhU/D7HqqvkAG72znulXlMXztbV0iiu9O5AL8K98TzZQ==",
-      "dev": true,
-      "dependencies": {
-        "make-synchronized": "^0.2.8"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier-synchronized?sponsor=1"
-      },
-      "peerDependencies": {
-        "prettier": "*"
-      }
-    },
     "node_modules/@primer/octicons": {
       "version": "19.13.0",
       "resolved": "https://registry.npmjs.org/@primer/octicons/-/octicons-19.13.0.tgz",
@@ -2182,13 +2167,12 @@
       }
     },
     "node_modules/@primer/primitives": {
-      "version": "9.1.2",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-9.1.2.tgz",
-      "integrity": "sha512-KecRJpUdIf14J3gVpoyMMJeQD6Sh5kcHk93N5bYch4XGB0GOZP3ypxz+NByMjr/2HHPsRfCCO5EEgNjmeWYUGQ==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-10.0.0.tgz",
+      "integrity": "sha512-UPoYfG3BwPHRVX+J99tshUjXWcq8L66feofCGQa5g0SNYC7HO2d9TLE/FXsVV3UUXEi24CwhGRyCGCmubdekjw==",
       "dev": true,
-      "dependencies": {
-        "@prettier/sync": "^0.5.2",
-        "prettier": "3.3"
+      "optionalDependencies": {
+        "@rollup/rollup-linux-x64-gnu": "^4.22.0"
       }
     },
     "node_modules/@rollup/plugin-html": {
@@ -6197,15 +6181,6 @@
         "semver": "bin/semver"
       }
     },
-    "node_modules/make-synchronized": {
-      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/make-synchronized/-/make-synchronized-0.2.9.tgz",
-      "integrity": "sha512-4wczOs8SLuEdpEvp3vGo83wh8rjJ78UsIk7DIX5fxdfmfMJGog4bQzxfvOwq7Q3yCHLC4jp1urPHIxRS/A93gA==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/fisker/make-synchronized?sponsor=1"
-      }
-    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -7017,21 +6992,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/prettier": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
-      "dev": true,
-      "bin": {
-        "prettier": "bin/prettier.cjs"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
-      }
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/package.json b/package.json
index 9136d343..aead3a5c 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "@babel/node": "^7.23.9",
     "@babel/preset-env": "^7.24.4",
     "@primer/octicons": "^19.9.0",
-    "@primer/primitives": "^9.0.0",
+    "@primer/primitives": "^10.0.0",
     "@rollup/plugin-html": "^1.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
diff --git a/src/scss/_color-scheme.scss b/src/scss/_color-scheme.scss
index e7450f44..217d1c92 100644
--- a/src/scss/_color-scheme.scss
+++ b/src/scss/_color-scheme.scss
@@ -7,21 +7,21 @@ $scheme: '@primer/primitives/dist/styleLint/functional/themes/light.json' !defau
 
 $enable-background-image-linear-gradient: string.index($scheme, '-high-contrast') == null !default;
 
-$btn-color: json($scheme, button-default-fgColor-rest, value) !default;
-$btn-background-color-start: json($scheme, button-default-bgColor-rest, value) !default;
+$btn-color: json($scheme, button-default-fgColor-rest, '$value') !default;
+$btn-background-color-start: json($scheme, button-default-bgColor-rest, '$value') !default;
 $btn-background-color-stop: if($enable-background-image-linear-gradient, rounded-rgb(color.adjust($btn-background-color-start, $lightness: -3.3333333333%, $space: hsl)), $btn-background-color-start) !default;
-$btn-border-color: json($scheme, button-default-borderColor-rest, value) !default;
-$btn-hover-background-color-start: json($scheme, button-default-bgColor-hover, value) !default;
+$btn-border-color: json($scheme, button-default-borderColor-rest, '$value') !default;
+$btn-hover-background-color-start: json($scheme, button-default-bgColor-hover, '$value') !default;
 $btn-hover-background-color-stop: rounded-rgb(color.adjust($btn-hover-background-color-start, $lightness: -3.3333333333%, $space: hsl)) !default;
-$btn-hover-border-color: json($scheme, button-default-borderColor-hover, value) !default;
-$btn-focus-visible-outline-color: json($scheme, focus-outlineColor, value) !default;
-$btn-active-background-color: json($scheme, button-default-bgColor-active, value) !default;
-$btn-active-border-color: json($scheme, button-default-borderColor-active, value) !default;
-$social-count-color:  json($scheme, button-default-fgColor-rest, value) !default;
-$social-count-background-color: json($scheme, bgColor-default, value) !default;
+$btn-hover-border-color: json($scheme, button-default-borderColor-hover, '$value') !default;
+$btn-focus-visible-outline-color: json($scheme, focus-outlineColor, '$value') !default;
+$btn-active-background-color: json($scheme, button-default-bgColor-active, '$value') !default;
+$btn-active-border-color: json($scheme, button-default-borderColor-active, '$value') !default;
+$social-count-color:  json($scheme, button-default-fgColor-rest, '$value') !default;
+$social-count-background-color: json($scheme, bgColor-default, '$value') !default;
 $social-count-border-color: $btn-border-color !default;
-$social-count-hover-color: json($scheme, button-outline-fgColor-rest, value) !default;
-$octicon-heart-color: json($scheme, fgColor-sponsors, value) !default;
+$social-count-hover-color: json($scheme, button-outline-fgColor-rest, '$value') !default;
+$octicon-heart-color: json($scheme, fgColor-sponsors, '$value') !default;
 
 .btn,
 .social-count {