diff --git a/.changeset/khaki-kiwis-explain.md b/.changeset/khaki-kiwis-explain.md
new file mode 100644
index 000000000..2341a481d
--- /dev/null
+++ b/.changeset/khaki-kiwis-explain.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': minor
+---
+
+Changing the way we use references in css output, to keep all references to tokens that are present in the final output
diff --git a/package-lock.json b/package-lock.json
index 6bfedc260..ccea3b699 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@primer/primitives",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@primer/primitives",
-      "version": "10.1.0",
+      "version": "10.2.0",
       "license": "MIT",
       "devDependencies": {
         "@actions/core": "^1.11.1",
@@ -32,7 +32,7 @@
         "json5": "^2.2.1",
         "markdown-table-ts": "^1.0.3",
         "prettier": "^3.3.3",
-        "style-dictionary": "^4.1.3",
+        "style-dictionary": "^4.3.0",
         "tsx": "^4.19.0",
         "typescript": "5.6",
         "typescript-eslint": "^8.16.0",
@@ -5891,9 +5891,9 @@
       }
     },
     "node_modules/path-unified": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/path-unified/-/path-unified-0.1.0.tgz",
-      "integrity": "sha512-/Oaz9ZJforrkmFrwkR/AcvjVsCAwGSJHO0X6O6ISj8YeFbATjIEBXLDcZfnK3MO4uvCBrJTdVIxdOc79PMqSdg==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/path-unified/-/path-unified-0.2.0.tgz",
+      "integrity": "sha512-MNKqvrKbbbb5p7XHXV6ZAsf/1f/yJQa13S/fcX0uua8ew58Tgc6jXV+16JyAbnR/clgCH+euKDxrF2STxMHdrg==",
       "dev": true
     },
     "node_modules/path/node_modules/inherits": {
@@ -6703,9 +6703,9 @@
       }
     },
     "node_modules/style-dictionary": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-4.2.0.tgz",
-      "integrity": "sha512-bjynavc9g80Zl9GpR3cw+ibqtbMbak9YXpuZteTsRTzoacUTjh7GLu1nlT1ukf264Nw5Vhu/ICQpY5xxOquvtA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-4.3.0.tgz",
+      "integrity": "sha512-bwasoBSGzIUzeZKR9HKD+qaTFzcVc3SAx+ziD41DAbDZ8OGFnfXfU3Nb3xdZb8VhxNKT21MowR5jOFvdJE9ayQ==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -6719,7 +6719,8 @@
         "is-plain-obj": "^4.1.0",
         "json5": "^2.2.2",
         "patch-package": "^8.0.0",
-        "path-unified": "^0.1.0",
+        "path-unified": "^0.2.0",
+        "prettier": "^3.3.3",
         "tinycolor2": "^1.6.0"
       },
       "bin": {
@@ -6727,9 +6728,6 @@
       },
       "engines": {
         "node": ">=18.0.0"
-      },
-      "peerDependencies": {
-        "prettier": "3.x"
       }
     },
     "node_modules/style-dictionary/node_modules/chalk": {
diff --git a/package.json b/package.json
index ddb5469f5..8b579846a 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "json5": "^2.2.1",
     "markdown-table-ts": "^1.0.3",
     "prettier": "^3.3.3",
-    "style-dictionary": "^4.1.3",
+    "style-dictionary": "^4.3.0",
     "tsx": "^4.19.0",
     "typescript": "5.6",
     "typescript-eslint": "^8.16.0",
diff --git a/src/platforms/css.ts b/src/platforms/css.ts
index f757415c7..71af32d2a 100644
--- a/src/platforms/css.ts
+++ b/src/platforms/css.ts
@@ -1,6 +1,7 @@
 import {isFromFile, isSource} from '../filters/index.js'
 import type {PlatformInitializer} from '../types/platformInitializer.js'
 import type {PlatformConfig, TransformedToken} from 'style-dictionary/types'
+import {outputReferencesTransformed, outputReferencesFilter} from 'style-dictionary/utils'
 
 const getCssSelectors = (outputFile: string) => {
   // check for dark in the beginning of the output filename
@@ -57,7 +58,8 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
           ]),
         options: {
           showFileHeader: false,
-          outputReferences: false,
+          outputReferences: (token, platformOptions) =>
+            outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions),
           descriptions: false,
           queries: getCssSelectors(outputFile),
           ...options?.options,
@@ -76,6 +78,8 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
           ]),
         options: {
           showFileHeader: false,
+          outputReferences: (token, platformOptions) =>
+            outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions),
           descriptions: false,
           ...options?.options,
         },
@@ -86,6 +90,8 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
         filter: token => isSource(token) && options?.themed !== true && token.$type === 'custom-viewportRange',
         options: {
           showFileHeader: false,
+          outputReferences: (token, platformOptions) =>
+            outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions),
         },
       },
       {
@@ -99,6 +105,8 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
           ]),
         options: {
           descriptions: false,
+          outputReferences: (token, platformOptions) =>
+            outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions),
           showFileHeader: false,
           queries: [
             {