Skip to content

High contrast themes PoC: DO NOT MERGE #1190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 36 commits into
base: main
Choose a base branch
from
Open

High contrast themes PoC: DO NOT MERGE #1190

wants to merge 36 commits into from

Conversation

langermank
Copy link
Contributor

WIP

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Feb 27, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 4647cb2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/primitives Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Feb 27, 2025 •
edited
Loading

Design Token Diff (StyleLint)

The message is too long to be displayed here. For more details, please check the job summary.

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Feb 27, 2025 •
edited
Loading

Design Token Diff (Figma)

/figma/figma.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/figma.json	2025-05-28 13:38:05.390836162 +0000
@@ -25,20 +25,20 @@
       "component"
     ]
   },
-    "base/color/dark-dimmed": {
+    "base/color/dark": {
     "modes": [
       "default"
     ],
     "groups": [
-        "base/color/dark-dimmed"
+        "base/color/dark"
     ]
   },
-    "base/color/dark": {
+    "base/color/dark-dimmed": {
     "modes": [
       "default"
     ],
     "groups": [
-        "base/color/dark"
+        "base/color/dark-dimmed"
     ]
   },
   "base/color/dark-high-contrast": {
@@ -75,15 +75,20 @@
       "light protanopia deuteranopia",
       "dark protanopia deuteranopia",
       "light tritanopia",
-        "dark tritanopia"
+        "dark tritanopia",
+        "dark protanopia deuteranopia high contrast",
+        "dark dimmed high contrast",
+        "dark tritanopia high contrast",
+        "light protanopia deuteranopia high contrast",
+        "light tritanopia high contrast"
     ],
     "groups": [
       "shadow",
       "component (internal)",
-        "semantic",
+        "component shadow",
       "component",
-        "syntax",
-        "component shadow"
+        "semantic",
+        "syntax"
     ]
   },
   "base/typography": {
@@ -110,13 +115,18 @@
   "dist/figma/scales/dark.json",
   "dist/figma/scales/light-high-constrast.json",
   "dist/figma/scales/light.json",
+    "dist/figma/themes/dark-colorblind-high-contrast.json",
   "dist/figma/themes/dark-colorblind.json",
+    "dist/figma/themes/dark-dimmed-high-contrast.json",
   "dist/figma/themes/dark-dimmed.json",
   "dist/figma/themes/dark-high-contrast.json",
+    "dist/figma/themes/dark-tritanopia-high-contrast.json",
   "dist/figma/themes/dark-tritanopia.json",
   "dist/figma/themes/dark.json",
+    "dist/figma/themes/light-colorblind-high-contrast.json",
   "dist/figma/themes/light-colorblind.json",
   "dist/figma/themes/light-high-contrast.json",
+    "dist/figma/themes/light-tritanopia-high-contrast.json",
   "dist/figma/themes/light-tritanopia.json",
   "dist/figma/themes/light.json",
   "dist/figma/typography/typography.json"

/figma/scales/dark-dimmed.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/scales/dark-dimmed.json	2025-05-28 13:37:54.086869894 +0000
@@ -2,29 +2,29 @@
 {
   "name": "base/color/black",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
-    "refId": "base/color/dark-dimmed/base/color/black",
-    "collection": "base/color/dark-dimmed",
+    "refId": "base/color/dark/base/color/black",
+    "collection": "base/color/dark",
   "mode": "default",
-    "group": "base/color/dark-dimmed",
+    "group": "base/color/dark",
   "scopes": ["ALL_SCOPES"]
 },
 {
   "name": "base/color/inset",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
   "refId": "base/color/dark/base/color/inset",
-    "reference": "base/color/dark-dimmed/base/color/black",
+    "reference": "base/color/dark/base/color/black",
   "collection": "base/color/dark",
   "mode": "default",
   "group": "base/color/dark",
@@ -64,14 +64,14 @@
 {
   "name": "base/color/neutral/0",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
   "refId": "base/color/dark/base/color/neutral/0",
-    "reference": "base/color/dark-dimmed/base/color/black",
+    "reference": "base/color/dark/base/color/black",
   "collection": "base/color/dark",
   "mode": "default",
   "group": "base/color/dark",

/figma/themes/dark-colorblind.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-colorblind.json	2025-05-28 13:38:01.056849128 +0000
@@ -9499,12 +9499,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.1,
   "refId": "mode/button/primary/borderColor/rest",
-    "reference": "base/color/dark/base/color/neutral/13",
+    "reference": "mode/borderColor/translucent",
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "component (internal)",
@@ -9516,7 +9515,7 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
   "refId": "mode/button/primary/borderColor/hover",
@@ -9532,7 +9531,7 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
   "refId": "mode/button/primary/borderColor/active",
@@ -10117,6 +10116,7 @@
   },
   "type": "COLOR",
   "refId": "mode/button/danger/iconColor/rest",
+    "reference": "mode/button/danger/fgColor/rest",
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "component (internal)",
@@ -10173,13 +10173,14 @@
 {
   "name": "button/danger/bgColor/active",
   "value": {
-      "r": 0.7098039215686275,
-      "g": 0.3254901960784314,
+      "r": 0.7411764705882353,
+      "g": 0.33725490196078434,
     "b": 0.11372549019607843,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/button/danger/bgColor/active",
+    "reference": "mode/bgColor/danger-emphasis",
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "component (internal)",
@@ -10223,7 +10224,7 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
   "refId": "mode/button/danger/borderColor/hover",
@@ -10239,7 +10240,7 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
   "refId": "mode/button/danger/borderColor/active",
@@ -11002,12 +11003,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/0",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/borderColor/translucent",
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "component (internal)",
@@ -11019,12 +11019,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/1",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "component (internal)",
@@ -11036,12 +11035,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/2",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "component (internal)",
@@ -11053,12 +11051,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/3",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "component (internal)",
@@ -11070,12 +11067,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/4",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "component (internal)",
@@ -13557,14 +13553,14 @@
 {
   "name": "overlay/bgColor",
   "value": {
-      "r": 0.08235294117647059,
-      "g": 0.10588235294117647,
-      "b": 0.13725490196078433,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/overlay/bgColor",
-    "reference": "mode/bgColor/muted",
+    "reference": "base/color/dark/base/color/neutral/0",
   "collection": "mode",
   "mode": "dark protanopia deuteranopia",
   "group": "component (internal)",

/figma/themes/dark-dimmed.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-dimmed.json	2025-05-28 13:37:58.753855975 +0000
@@ -38,9 +38,9 @@
 {
   "name": "shadow/inset/color",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 0.24
   },
   "type": "COLOR",
@@ -88,9 +88,9 @@
 {
   "name": "shadow/resting/xsmall/color",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 0.8
   },
   "type": "COLOR",
@@ -138,9 +138,9 @@
 {
   "name": "shadow/resting/small/1/color",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 0.6
   },
   "type": "COLOR",
@@ -188,9 +188,9 @@
 {
   "name": "shadow/resting/small/2/color",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 0.6
   },
   "type": "COLOR",
@@ -238,9 +238,9 @@
 {
   "name": "shadow/resting/medium/1/color",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 0.4
   },
   "type": "COLOR",
@@ -288,9 +288,9 @@
 {
   "name": "shadow/resting/medium/2/color",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 0.8
   },
   "type": "COLOR",
@@ -388,9 +388,9 @@
 {
   "name": "shadow/floating/small/2/color",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 0.4
   },
   "type": "COLOR",
@@ -438,9 +438,9 @@
 {
   "name": "shadow/floating/small/3/color",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 0.4
   },
   "type": "COLOR",
@@ -538,9 +538,9 @@
 {
   "name": "shadow/floating/medium/2/color",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 0.4
   },
   "type": "COLOR",
@@ -588,9 +588,9 @@
 {
   "name": "shadow/floating/medium/3/color",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 0.4
   },
   "type": "COLOR",
@@ -638,9 +638,9 @@
 {
   "name": "shadow/floating/medium/4/color",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 0.4
   },
   "type": "COLOR",
@@ -688,9 +688,9 @@
 {
   "name": "shadow/floating/medium/5/color",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 0.4
   },
   "type": "COLOR",
@@ -788,9 +788,9 @@
 {
   "name": "shadow/floating/large/2/color",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
@@ -888,9 +888,9 @@
 {
   "name": "shadow/floating/xlarge/2/color",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
@@ -1026,9 +1026,9 @@
 {
   "name": "bgColor/black",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
@@ -2552,9 +2552,9 @@
 {
   "name": "control/checked/fgColor/disabled",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
@@ -8015,9 +8015,9 @@
 {
   "name": "fgColor/onInverse",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
@@ -8047,9 +8047,9 @@
 {
   "name": "fgColor/black",
   "value": {
-      "r": 0.10980392156862745,
-      "g": 0.12941176470588237,
-      "b": 0.1568627450980392,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
@@ -9472,9 +9472,9 @@
 {
   "name": "button/primary/bgColor/disabled",
   "value": {
-      "r": 0.3137254901960784,
-      "g": 0.6352941176470588,
-      "b": 0.32941176470588235,
+      "r": 0.06274509803921569,
+      "g": 0.34509803921568627,
+      "b": 0.13725490196078433,
     "a": 1
   },
   "type": "COLOR",
@@ -9490,12 +9490,11 @@
     "r": 0.803921568627451,
     "g": 0.8509803921568627,
     "b": 0.8980392156862745,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.1,
   "refId": "mode/button/primary/borderColor/rest",
-    "reference": "base/color/dark/base/color/neutral/13",
+    "reference": "mode/borderColor/translucent",
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "component (internal)",
@@ -9507,7 +9506,7 @@
     "r": 0.803921568627451,
     "g": 0.8509803921568627,
     "b": 0.8980392156862745,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
   "refId": "mode/button/primary/borderColor/hover",
@@ -9523,7 +9522,7 @@
     "r": 0.803921568627451,
     "g": 0.8509803921568627,
     "b": 0.8980392156862745,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
   "refId": "mode/button/primary/borderColor/active",
@@ -9536,9 +9535,9 @@
 {
   "name": "button/primary/borderColor/disabled",
   "value": {
-      "r": 0.3137254901960784,
-      "g": 0.6352941176470588,
-      "b": 0.32941176470588235,
+      "r": 0.06274509803921569,
+      "g": 0.34509803921568627,
+      "b": 0.13725490196078433,
     "a": 1
   },
   "type": "COLOR",
@@ -10050,14 +10049,13 @@
 {
   "name": "button/danger/fgColor/hover",
   "value": {
-      "r": 0.803921568627451,
-      "g": 0.8509803921568627,
-      "b": 0.8980392156862745,
+      "r": 1,
+      "g": 1,
+      "b": 1,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/button/danger/fgColor/hover",
-    "reference": "base/color/dark/base/color/neutral/13",
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "component (internal)",
@@ -10066,14 +10064,13 @@
 {
   "name": "button/danger/fgColor/active",
   "value": {
-      "r": 0.803921568627451,
-      "g": 0.8509803921568627,
-      "b": 0.8980392156862745,
+      "r": 1,
+      "g": 1,
+      "b": 1,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/button/danger/fgColor/active",
-    "reference": "base/color/dark/base/color/neutral/13",
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "component (internal)",
@@ -10106,6 +10103,7 @@
   },
   "type": "COLOR",
   "refId": "mode/button/danger/iconColor/rest",
+    "reference": "mode/button/danger/fgColor/rest",
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "component (internal)",
@@ -10162,13 +10160,14 @@
 {
   "name": "button/danger/bgColor/active",
   "value": {
-      "r": 0.7647058823529411,
-      "g": 0.23921568627450981,
-      "b": 0.2196078431372549,
+      "r": 0.788235294117647,
+      "g": 0.23529411764705882,
+      "b": 0.21568627450980393,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/button/danger/bgColor/active",
+    "reference": "mode/bgColor/danger-emphasis",
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "component (internal)",
@@ -10212,7 +10211,7 @@
     "r": 0.803921568627451,
     "g": 0.8509803921568627,
     "b": 0.8980392156862745,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
   "refId": "mode/button/danger/borderColor/hover",
@@ -10228,7 +10227,7 @@
     "r": 0.803921568627451,
     "g": 0.8509803921568627,
     "b": 0.8980392156862745,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
   "refId": "mode/button/danger/borderColor/active",
@@ -10991,12 +10990,11 @@
     "r": 0.803921568627451,
     "g": 0.8509803921568627,
     "b": 0.8980392156862745,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/0",
-    "reference": "base/color/dark-dimmed/base/color/white",
+    "reference": "mode/borderColor/translucent",
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "component (internal)",
@@ -11008,12 +11006,11 @@
     "r": 0.803921568627451,
     "g": 0.8509803921568627,
     "b": 0.8980392156862745,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/1",
-    "reference": "base/color/dark-dimmed/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "component (internal)",
@@ -11025,12 +11022,11 @@
     "r": 0.803921568627451,
     "g": 0.8509803921568627,
     "b": 0.8980392156862745,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/2",
-    "reference": "base/color/dark-dimmed/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "component (internal)",
@@ -11042,12 +11038,11 @@
     "r": 0.803921568627451,
     "g": 0.8509803921568627,
     "b": 0.8980392156862745,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/3",
-    "reference": "base/color/dark-dimmed/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "component (internal)",
@@ -11059,12 +11054,11 @@
     "r": 0.803921568627451,
     "g": 0.8509803921568627,
     "b": 0.8980392156862745,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/4",
-    "reference": "base/color/dark-dimmed/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "component (internal)",

/figma/themes/dark-high-contrast.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-high-contrast.json	2025-05-28 13:38:02.233845628 +0000
@@ -9083,15 +9083,14 @@
 {
   "name": "avatar/borderColor",
   "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
-      "a": 0.9
+      "r": 0.7176470588235294,
+      "g": 0.7411764705882353,
+      "b": 0.7843137254901961,
+      "a": 1
   },
   "type": "COLOR",
-    "alpha": 0.9,
   "refId": "mode/avatar/borderColor",
-    "reference": "base/color/dark/base/color/neutral/13",
+    "reference": "mode/borderColor/emphasis",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "component (internal)",
@@ -9509,9 +9508,8 @@
     "a": 1
   },
   "type": "COLOR",
-    "alpha": 1,
   "refId": "mode/button/primary/borderColor/hover",
-    "reference": "base/color/dark-high-contrast/base/color/green/2",
+    "reference": "mode/button/primary/borderColor/rest",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "component (internal)",
@@ -9526,9 +9524,8 @@
     "a": 1
   },
   "type": "COLOR",
-    "alpha": 1,
   "refId": "mode/button/primary/borderColor/active",
-    "reference": "base/color/dark-high-contrast/base/color/green/2",
+    "reference": "mode/button/primary/borderColor/rest",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "component (internal)",
@@ -10113,6 +10110,7 @@
   },
   "type": "COLOR",
   "refId": "mode/button/danger/iconColor/rest",
+    "reference": "mode/button/danger/fgColor/rest",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "component (internal)",
@@ -10160,7 +10158,7 @@
   },
   "type": "COLOR",
   "refId": "mode/button/danger/bgColor/hover",
-    "reference": "mode/bgColor/danger-emphasis",
+    "reference": "base/color/dark-high-contrast/base/color/red/9",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "component (internal)",
@@ -10919,14 +10917,14 @@
 {
   "name": "contribution/default/bgColor/0",
   "value": {
-      "r": 0.08235294117647059,
-      "g": 0.10588235294117647,
-      "b": 0.13725490196078433,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/contribution/default/bgColor/0",
-    "reference": "base/color/dark/base/color/neutral/2",
+    "reference": "base/color/dark/base/color/neutral/0",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "component (internal)",
@@ -11002,10 +11000,10 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 1
   },
   "type": "COLOR",
-    "alpha": 0.05,
+    "alpha": 1,
   "refId": "mode/contribution/default/borderColor/0",
   "reference": "base/color/dark/base/color/white",
   "collection": "mode",
@@ -11019,12 +11017,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 1
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/1",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "component (internal)",
@@ -11036,12 +11033,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 1
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/2",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "component (internal)",
@@ -11053,12 +11049,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 1
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/3",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "component (internal)",
@@ -11070,12 +11065,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 1
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/4",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "component (internal)",
@@ -13557,14 +13551,14 @@
 {
   "name": "overlay/bgColor",
   "value": {
-      "r": 0.08235294117647059,
-      "g": 0.10588235294117647,
-      "b": 0.13725490196078433,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/overlay/bgColor",
-    "reference": "mode/bgColor/muted",
+    "reference": "base/color/dark/base/color/neutral/0",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "component (internal)",

/figma/themes/dark-tritanopia.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-tritanopia.json	2025-05-28 13:37:59.895852580 +0000
@@ -9497,12 +9497,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.1,
   "refId": "mode/button/primary/borderColor/rest",
-    "reference": "base/color/dark/base/color/neutral/13",
+    "reference": "mode/borderColor/translucent",
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "component (internal)",
@@ -9514,7 +9513,7 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
   "refId": "mode/button/primary/borderColor/hover",
@@ -9530,7 +9529,7 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
   "refId": "mode/button/primary/borderColor/active",
@@ -10111,6 +10110,7 @@
   },
   "type": "COLOR",
   "refId": "mode/button/danger/iconColor/rest",
+    "reference": "mode/button/danger/fgColor/rest",
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "component (internal)",
@@ -10167,13 +10167,14 @@
 {
   "name": "button/danger/bgColor/active",
   "value": {
-      "r": 0.8156862745098039,
-      "g": 0.20784313725490197,
+      "r": 0.8549019607843137,
+      "g": 0.21176470588235294,
     "b": 0.2,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/button/danger/bgColor/active",
+    "reference": "mode/bgColor/danger-emphasis",
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "component (internal)",
@@ -10217,7 +10218,7 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
   "refId": "mode/button/danger/borderColor/hover",
@@ -10233,7 +10234,7 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
   "refId": "mode/button/danger/borderColor/active",
@@ -10996,12 +10997,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/0",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/borderColor/translucent",
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "component (internal)",
@@ -11013,12 +11013,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/1",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "component (internal)",
@@ -11030,12 +11029,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/2",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "component (internal)",
@@ -11047,12 +11045,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/3",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "component (internal)",
@@ -11064,12 +11061,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/4",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "component (internal)",
@@ -13550,14 +13546,14 @@
 {
   "name": "overlay/bgColor",
   "value": {
-      "r": 0.08235294117647059,
-      "g": 0.10588235294117647,
-      "b": 0.13725490196078433,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/overlay/bgColor",
-    "reference": "mode/bgColor/muted",
+    "reference": "base/color/dark/base/color/neutral/0",
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "component (internal)",

/figma/themes/dark.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark.json	2025-05-28 13:37:58.176857690 +0000
@@ -9494,12 +9494,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.1,
   "refId": "mode/button/primary/borderColor/rest",
-    "reference": "base/color/dark/base/color/neutral/13",
+    "reference": "mode/borderColor/translucent",
   "collection": "mode",
   "mode": "dark",
   "group": "component (internal)",
@@ -9511,7 +9510,7 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
   "refId": "mode/button/primary/borderColor/hover",
@@ -9527,7 +9526,7 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
   "refId": "mode/button/primary/borderColor/active",
@@ -10111,6 +10110,7 @@
   },
   "type": "COLOR",
   "refId": "mode/button/danger/iconColor/rest",
+    "reference": "mode/button/danger/fgColor/rest",
   "collection": "mode",
   "mode": "dark",
   "group": "component (internal)",
@@ -10167,13 +10167,14 @@
 {
   "name": "button/danger/bgColor/active",
   "value": {
-      "r": 0.8156862745098039,
-      "g": 0.20784313725490197,
+      "r": 0.8549019607843137,
+      "g": 0.21176470588235294,
     "b": 0.2,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/button/danger/bgColor/active",
+    "reference": "mode/bgColor/danger-emphasis",
   "collection": "mode",
   "mode": "dark",
   "group": "component (internal)",
@@ -10217,7 +10218,7 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
   "refId": "mode/button/danger/borderColor/hover",
@@ -10233,7 +10234,7 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.1
+      "a": 0.15
   },
   "type": "COLOR",
   "refId": "mode/button/danger/borderColor/active",
@@ -10996,12 +10997,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/0",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/borderColor/translucent",
   "collection": "mode",
   "mode": "dark",
   "group": "component (internal)",
@@ -11013,12 +11013,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/1",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark",
   "group": "component (internal)",
@@ -11030,12 +11029,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/2",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark",
   "group": "component (internal)",
@@ -11047,12 +11045,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/3",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark",
   "group": "component (internal)",
@@ -11064,12 +11061,11 @@
     "r": 1,
     "g": 1,
     "b": 1,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/4",
-    "reference": "base/color/dark/base/color/white",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "dark",
   "group": "component (internal)",
@@ -13550,14 +13546,14 @@
 {
   "name": "overlay/bgColor",
   "value": {
-      "r": 0.08235294117647059,
-      "g": 0.10588235294117647,
-      "b": 0.13725490196078433,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/overlay/bgColor",
-    "reference": "mode/bgColor/muted",
+    "reference": "base/color/dark/base/color/neutral/0",
   "collection": "mode",
   "mode": "dark",
   "group": "component (internal)",

/figma/themes/light-colorblind.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-colorblind.json	2025-05-28 13:37:56.548862530 +0000
@@ -9492,9 +9492,8 @@
     "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.15,
   "refId": "mode/button/primary/borderColor/rest",
-    "reference": "base/color/light/base/color/neutral/13",
+    "reference": "mode/borderColor/translucent",
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "component (internal)",
@@ -10107,7 +10106,7 @@
   },
   "type": "COLOR",
   "refId": "mode/button/danger/iconColor/rest",
-    "reference": "mode/fgColor/danger",
+    "reference": "mode/button/danger/fgColor/rest",
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "component (internal)",
@@ -10148,14 +10147,14 @@
 {
   "name": "button/danger/bgColor/hover",
   "value": {
-      "r": 0.5843137254901961,
-      "g": 0.2196078431372549,
+      "r": 0.7372549019607844,
+      "g": 0.2980392156862745,
     "b": 0,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/button/danger/bgColor/hover",
-    "reference": "base/color/light/base/color/orange/6",
+    "reference": "mode/bgColor/danger-emphasis",
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "component (internal)",
@@ -10164,13 +10163,14 @@
 {
   "name": "button/danger/bgColor/active",
   "value": {
-      "r": 0.49411764705882355,
-      "g": 0.1843137254901961,
+      "r": 0.5843137254901961,
+      "g": 0.2196078431372549,
     "b": 0,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/button/danger/bgColor/active",
+    "reference": "base/color/light/base/color/orange/6",
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "component (internal)",
@@ -10541,13 +10541,14 @@
 {
   "name": "buttonCounter/danger/fgColor/rest",
   "value": {
-      "r": 0.7607843137254902,
-      "g": 0.10980392156862745,
-      "b": 0.17254901960784313,
+      "r": 0.5843137254901961,
+      "g": 0.2196078431372549,
+      "b": 0,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/buttonCounter/danger/fgColor/rest",
+    "reference": "base/color/light/base/color/orange/6",
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "component (internal)",
@@ -10992,12 +10993,11 @@
     "r": 0.12156862745098039,
     "g": 0.13725490196078433,
     "b": 0.1568627450980392,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/0",
-    "reference": "base/color/light/base/color/black",
+    "reference": "mode/borderColor/translucent",
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "component (internal)",
@@ -11009,12 +11009,11 @@
     "r": 0.12156862745098039,
     "g": 0.13725490196078433,
     "b": 0.1568627450980392,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/1",
-    "reference": "base/color/light/base/color/black",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "component (internal)",
@@ -11026,12 +11025,11 @@
     "r": 0.12156862745098039,
     "g": 0.13725490196078433,
     "b": 0.1568627450980392,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/2",
-    "reference": "base/color/light/base/color/black",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "component (internal)",
@@ -11043,12 +11041,11 @@
     "r": 0.12156862745098039,
     "g": 0.13725490196078433,
     "b": 0.1568627450980392,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/3",
-    "reference": "base/color/light/base/color/black",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "component (internal)",
@@ -11060,12 +11057,11 @@
     "r": 0.12156862745098039,
     "g": 0.13725490196078433,
     "b": 0.1568627450980392,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/4",
-    "reference": "base/color/light/base/color/black",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "light protanopia deuteranopia",
   "group": "component (internal)",

/figma/themes/light-high-contrast.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-high-contrast.json	2025-05-28 13:37:57.613859364 +0000
@@ -9077,15 +9077,14 @@
 {
   "name": "avatar/borderColor",
   "value": {
-      "r": 0.00392156862745098,
-      "g": 0.01568627450980392,
-      "b": 0.03529411764705882,
-      "a": 0.9
+      "r": 0.27058823529411763,
+      "g": 0.2980392156862745,
+      "b": 0.32941176470588235,
+      "a": 1
   },
   "type": "COLOR",
-    "alpha": 0.9,
   "refId": "mode/avatar/borderColor",
-    "reference": "base/color/light/base/color/neutral/13",
+    "reference": "mode/borderColor/emphasis",
   "collection": "mode",
   "mode": "light high contrast",
   "group": "component (internal)",
@@ -9504,9 +9503,8 @@
     "a": 1
   },
   "type": "COLOR",
-    "alpha": 1,
   "refId": "mode/button/primary/borderColor/hover",
-    "reference": "base/color/light-high-contrast/base/color/green/7",
+    "reference": "mode/button/primary/borderColor/rest",
   "collection": "mode",
   "mode": "light high contrast",
   "group": "component (internal)",
@@ -9521,9 +9519,8 @@
     "a": 1
   },
   "type": "COLOR",
-    "alpha": 1,
   "refId": "mode/button/primary/borderColor/active",
-    "reference": "base/color/light-high-contrast/base/color/green/7",
+    "reference": "mode/button/primary/borderColor/rest",
   "collection": "mode",
   "mode": "light high contrast",
   "group": "component (internal)",
@@ -9949,14 +9946,14 @@
 {
   "name": "button/outline/borderColor/hover",
   "value": {
-      "r": 0.00392156862745098,
-      "g": 0.23921568627450981,
-      "b": 0.0784313725490196,
+      "r": 0.00784313725490196,
+      "g": 0.1843137254901961,
+      "b": 0.47843137254901963,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/button/outline/borderColor/hover",
-    "reference": "mode/button/primary/borderColor/hover",
+    "reference": "base/color/light-high-contrast/base/color/blue/7",
   "collection": "mode",
   "mode": "light high contrast",
   "group": "component (internal)",
@@ -9965,9 +9962,9 @@
 {
   "name": "button/outline/borderColor/active",
   "value": {
-      "r": 0.00392156862745098,
-      "g": 0.23921568627450981,
-      "b": 0.0784313725490196,
+      "r": 0.00784313725490196,
+      "g": 0.1843137254901961,
+      "b": 0.47843137254901963,
     "a": 1
   },
   "type": "COLOR",
@@ -10103,7 +10100,7 @@
   },
   "type": "COLOR",
   "refId": "mode/button/danger/iconColor/rest",
-    "reference": "mode/fgColor/danger",
+    "reference": "mode/button/danger/fgColor/rest",
   "collection": "mode",
   "mode": "light high contrast",
   "group": "component (internal)",
@@ -10144,14 +10141,14 @@
 {
   "name": "button/danger/bgColor/hover",
   "value": {
-      "r": 0.5254901960784314,
-      "g": 0.023529411764705882,
-      "b": 0.11372549019607843,
+      "r": 0.6274509803921569,
+      "g": 0.06666666666666667,
+      "b": 0.12156862745098039,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/button/danger/bgColor/hover",
-    "reference": "base/color/light-high-contrast/base/color/red/6",
+    "reference": "mode/bgColor/danger-emphasis",
   "collection": "mode",
   "mode": "light high contrast",
   "group": "component (internal)",
@@ -10160,13 +10157,14 @@
 {
   "name": "button/danger/bgColor/active",
   "value": {
-      "r": 0.4549019607843137,
-      "g": 0.01568627450980392,
-      "b": 0.10196078431372549,
+      "r": 0.5254901960784314,
+      "g": 0.023529411764705882,
+      "b": 0.11372549019607843,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/button/danger/bgColor/active",
+    "reference": "base/color/light-high-contrast/base/color/red/6",
   "collection": "mode",
   "mode": "light high contrast",
   "group": "component (internal)",
@@ -10538,13 +10536,14 @@
 {
   "name": "buttonCounter/danger/fgColor/rest",
   "value": {
-      "r": 0.596078431372549,
-      "g": 0.054901960784313725,
-      "b": 0.11764705882352941,
+      "r": 0.5254901960784314,
+      "g": 0.023529411764705882,
+      "b": 0.11372549019607843,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/buttonCounter/danger/fgColor/rest",
+    "reference": "mode/fgColor/danger",
   "collection": "mode",
   "mode": "light high contrast",
   "group": "component (internal)",
@@ -10906,14 +10905,14 @@
 {
   "name": "contribution/default/bgColor/0",
   "value": {
-      "r": 0.9372549019607843,
-      "g": 0.9490196078431372,
-      "b": 0.9607843137254902,
+      "r": 1,
+      "g": 1,
+      "b": 1,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/contribution/default/bgColor/0",
-    "reference": "base/color/light/base/color/neutral/2",
+    "reference": "base/color/light/base/color/neutral/0",
   "collection": "mode",
   "mode": "light high contrast",
   "group": "component (internal)",
@@ -10989,10 +10988,10 @@
     "r": 0.00392156862745098,
     "g": 0.01568627450980392,
     "b": 0.03529411764705882,
-      "a": 0.05
+      "a": 1
   },
   "type": "COLOR",
-    "alpha": 0.05,
+    "alpha": 1,
   "refId": "mode/contribution/default/borderColor/0",
   "reference": "base/color/light-high-contrast/base/color/black",
   "collection": "mode",
@@ -11006,12 +11005,11 @@
     "r": 0.00392156862745098,
     "g": 0.01568627450980392,
     "b": 0.03529411764705882,
-      "a": 0.05
+      "a": 1
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/1",
-    "reference": "base/color/light-high-contrast/base/color/black",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "light high contrast",
   "group": "component (internal)",
@@ -11023,12 +11021,11 @@
     "r": 0.00392156862745098,
     "g": 0.01568627450980392,
     "b": 0.03529411764705882,
-      "a": 0.05
+      "a": 1
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/2",
-    "reference": "base/color/light-high-contrast/base/color/black",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "light high contrast",
   "group": "component (internal)",
@@ -11040,12 +11037,11 @@
     "r": 0.00392156862745098,
     "g": 0.01568627450980392,
     "b": 0.03529411764705882,
-      "a": 0.05
+      "a": 1
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/3",
-    "reference": "base/color/light-high-contrast/base/color/black",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "light high contrast",
   "group": "component (internal)",
@@ -11057,12 +11053,11 @@
     "r": 0.00392156862745098,
     "g": 0.01568627450980392,
     "b": 0.03529411764705882,
-      "a": 0.05
+      "a": 1
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/4",
-    "reference": "base/color/light-high-contrast/base/color/black",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "light high contrast",
   "group": "component (internal)",

/figma/themes/light-tritanopia.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-tritanopia.json	2025-05-28 13:37:55.405865963 +0000
@@ -9491,9 +9491,8 @@
     "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.15,
   "refId": "mode/button/primary/borderColor/rest",
-    "reference": "base/color/light/base/color/neutral/13",
+    "reference": "mode/borderColor/translucent",
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "component (internal)",
@@ -10106,7 +10105,7 @@
   },
   "type": "COLOR",
   "refId": "mode/button/danger/iconColor/rest",
-    "reference": "mode/fgColor/danger",
+    "reference": "mode/button/danger/fgColor/rest",
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "component (internal)",
@@ -10147,14 +10146,14 @@
 {
   "name": "button/danger/bgColor/hover",
   "value": {
-      "r": 0.6431372549019608,
-      "g": 0.054901960784313725,
-      "b": 0.14901960784313725,
+      "r": 0.8117647058823529,
+      "g": 0.13333333333333333,
+      "b": 0.1803921568627451,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/button/danger/bgColor/hover",
-    "reference": "base/color/light/base/color/red/6",
+    "reference": "mode/bgColor/danger-emphasis",
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "component (internal)",
@@ -10163,13 +10162,14 @@
 {
   "name": "button/danger/bgColor/active",
   "value": {
-      "r": 0.5450980392156862,
-      "g": 0.03137254901960784,
-      "b": 0.12549019607843137,
+      "r": 0.6431372549019608,
+      "g": 0.054901960784313725,
+      "b": 0.14901960784313725,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/button/danger/bgColor/active",
+    "reference": "base/color/light/base/color/red/6",
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "component (internal)",
@@ -10991,12 +10991,11 @@
     "r": 0.12156862745098039,
     "g": 0.13725490196078433,
     "b": 0.1568627450980392,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/0",
-    "reference": "base/color/light/base/color/black",
+    "reference": "mode/borderColor/translucent",
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "component (internal)",
@@ -11008,12 +11007,11 @@
     "r": 0.12156862745098039,
     "g": 0.13725490196078433,
     "b": 0.1568627450980392,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/1",
-    "reference": "base/color/light/base/color/black",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "component (internal)",
@@ -11025,12 +11023,11 @@
     "r": 0.12156862745098039,
     "g": 0.13725490196078433,
     "b": 0.1568627450980392,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/2",
-    "reference": "base/color/light/base/color/black",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "component (internal)",
@@ -11042,12 +11039,11 @@
     "r": 0.12156862745098039,
     "g": 0.13725490196078433,
     "b": 0.1568627450980392,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/3",
-    "reference": "base/color/light/base/color/black",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "component (internal)",
@@ -11059,12 +11055,11 @@
     "r": 0.12156862745098039,
     "g": 0.13725490196078433,
     "b": 0.1568627450980392,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/4",
-    "reference": "base/color/light/base/color/black",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "component (internal)",

/figma/themes/light.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/light.json	2025-05-28 13:37:54.818867752 +0000
@@ -9488,9 +9488,8 @@
     "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.15,
   "refId": "mode/button/primary/borderColor/rest",
-    "reference": "base/color/light/base/color/neutral/13",
+    "reference": "mode/borderColor/translucent",
   "collection": "mode",
   "mode": "light",
   "group": "component (internal)",
@@ -10103,7 +10102,7 @@
   },
   "type": "COLOR",
   "refId": "mode/button/danger/iconColor/rest",
-    "reference": "mode/fgColor/danger",
+    "reference": "mode/button/danger/fgColor/rest",
   "collection": "mode",
   "mode": "light",
   "group": "component (internal)",
@@ -10144,14 +10143,14 @@
 {
   "name": "button/danger/bgColor/hover",
   "value": {
-      "r": 0.6431372549019608,
-      "g": 0.054901960784313725,
-      "b": 0.14901960784313725,
+      "r": 0.8117647058823529,
+      "g": 0.13333333333333333,
+      "b": 0.1803921568627451,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/button/danger/bgColor/hover",
-    "reference": "base/color/light/base/color/red/6",
+    "reference": "mode/bgColor/danger-emphasis",
   "collection": "mode",
   "mode": "light",
   "group": "component (internal)",
@@ -10160,13 +10159,14 @@
 {
   "name": "button/danger/bgColor/active",
   "value": {
-      "r": 0.5450980392156862,
-      "g": 0.03137254901960784,
-      "b": 0.12549019607843137,
+      "r": 0.6431372549019608,
+      "g": 0.054901960784313725,
+      "b": 0.14901960784313725,
     "a": 1
   },
   "type": "COLOR",
   "refId": "mode/button/danger/bgColor/active",
+    "reference": "base/color/light/base/color/red/6",
   "collection": "mode",
   "mode": "light",
   "group": "component (internal)",
@@ -10988,12 +10988,11 @@
     "r": 0.12156862745098039,
     "g": 0.13725490196078433,
     "b": 0.1568627450980392,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/0",
-    "reference": "base/color/light/base/color/black",
+    "reference": "mode/borderColor/translucent",
   "collection": "mode",
   "mode": "light",
   "group": "component (internal)",
@@ -11005,12 +11004,11 @@
     "r": 0.12156862745098039,
     "g": 0.13725490196078433,
     "b": 0.1568627450980392,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/1",
-    "reference": "base/color/light/base/color/black",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "light",
   "group": "component (internal)",
@@ -11022,12 +11020,11 @@
     "r": 0.12156862745098039,
     "g": 0.13725490196078433,
     "b": 0.1568627450980392,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/2",
-    "reference": "base/color/light/base/color/black",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "light",
   "group": "component (internal)",
@@ -11039,12 +11036,11 @@
     "r": 0.12156862745098039,
     "g": 0.13725490196078433,
     "b": 0.1568627450980392,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/3",
-    "reference": "base/color/light/base/color/black",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "light",
   "group": "component (internal)",
@@ -11056,12 +11052,11 @@
     "r": 0.12156862745098039,
     "g": 0.13725490196078433,
     "b": 0.1568627450980392,
-      "a": 0.05
+      "a": 0.15
   },
   "type": "COLOR",
-    "alpha": 0.05,
   "refId": "mode/contribution/default/borderColor/4",
-    "reference": "base/color/light/base/color/black",
+    "reference": "mode/contribution/default/borderColor/0",
   "collection": "mode",
   "mode": "light",
   "group": "component (internal)",

@github-actions github-actions bot temporarily deployed to Preview (Storybook) February 27, 2025 01:59 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) March 13, 2025 01:07 Inactive
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Mar 14, 2025 •
edited
Loading

Design Token Diff (CSS)

The message is too long to be displayed here. For more details, please check the job summary.

@github-actions github-actions bot temporarily deployed to Preview (Storybook) March 14, 2025 23:05 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) March 25, 2025 18:45 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) March 25, 2025 20:29 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) March 25, 2025 22:14 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) March 25, 2025 22:33 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) March 25, 2025 22:34 Inactive
@langermank langermank added the update snapshots Update visual regression test snapshots label Mar 25, 2025
@github-actions github-actions bot temporarily deployed to Preview (Storybook) April 26, 2025 15:13 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) April 26, 2025 15:25 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) April 26, 2025 15:26 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) April 26, 2025 15:35 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) April 26, 2025 15:37 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) April 26, 2025 15:41 Inactive
@langermank langermank marked this pull request as ready for review May 5, 2025 18:57
@langermank langermank requested review from a team as code owners May 5, 2025 18:57
@github-actions github-actions bot temporarily deployed to Preview (Storybook) May 5, 2025 18:59 Inactive
lukasoppermann
lukasoppermann approved these changes May 5, 2025
View reviewed changes
Copy link
Contributor

@lukasoppermann lukasoppermann left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@github-actions github-actions bot temporarily deployed to Preview (Storybook) May 5, 2025 18:59 Inactive
@joshblack joshblack removed their request for review May 9, 2025 20:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jonrohan jonrohan jonrohan approved these changes

@lukasoppermann lukasoppermann lukasoppermann approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@langermank @jonrohan @lukasoppermann