Update `invisible` disabled state colors #1121

langermank · 2024-12-12T16:59:53Z

Update invisible button disabled state to be... invisible! This change is due to several bits of feedback that the current disabled state is too prominent.

changeset-bot · 2024-12-12T16:59:56Z

🦋 Changeset detected

Latest commit: 8615fb2

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	Patch

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 · 2024-12-12T17:01:34Z

Design Token Diff (CSS)

/css/functional/themes/dark-colorblind.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind.css	2024-12-12 17:01:20.743903677 +0000
@@ -259,10 +259,10 @@
 --button-invisible-bgColor-rest: #00000000;
 --button-invisible-bgColor-hover: #656c7633;
 --button-invisible-bgColor-active: #656c7640;
-  --button-invisible-bgColor-disabled: #212830;
+  --button-invisible-bgColor-disabled: #00000000;
 --button-invisible-borderColor-rest: #00000000;
 --button-invisible-borderColor-hover: #00000000;
-  --button-invisible-borderColor-disabled: #656c761a;
+  --button-invisible-borderColor-disabled: #00000000;
 --button-outline-fgColor-rest: #388bfd;
 --button-outline-fgColor-hover: #58a6ff;
 --button-outline-fgColor-active: #ffffff;
@@ -865,10 +865,10 @@
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #656c7633;
   --button-invisible-bgColor-active: #656c7640;
-    --button-invisible-bgColor-disabled: #212830;
+    --button-invisible-bgColor-disabled: #00000000;
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #00000000;
-    --button-invisible-borderColor-disabled: #656c761a;
+    --button-invisible-borderColor-disabled: #00000000;
   --button-outline-fgColor-rest: #388bfd;
   --button-outline-fgColor-hover: #58a6ff;
   --button-outline-fgColor-active: #ffffff;

/css/functional/themes/dark-dimmed.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed.css	2024-12-12 17:01:18.875902978 +0000
@@ -259,10 +259,10 @@
 --button-invisible-bgColor-rest: #00000000;
 --button-invisible-bgColor-hover: #656c7626;
 --button-invisible-bgColor-active: #656c7633;
-  --button-invisible-bgColor-disabled: #2a313c;
+  --button-invisible-bgColor-disabled: #00000000;
 --button-invisible-borderColor-rest: #00000000;
 --button-invisible-borderColor-hover: #00000000;
-  --button-invisible-borderColor-disabled: #656c761a;
+  --button-invisible-borderColor-disabled: #00000000;
 --button-outline-fgColor-rest: #4184e4;
 --button-outline-fgColor-hover: #539bf5;
 --button-outline-fgColor-active: #cdd9e5;
@@ -865,10 +865,10 @@
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #656c7626;
   --button-invisible-bgColor-active: #656c7633;
-    --button-invisible-bgColor-disabled: #2a313c;
+    --button-invisible-bgColor-disabled: #00000000;
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #00000000;
-    --button-invisible-borderColor-disabled: #656c761a;
+    --button-invisible-borderColor-disabled: #00000000;
   --button-outline-fgColor-rest: #4184e4;
   --button-outline-fgColor-hover: #539bf5;
   --button-outline-fgColor-active: #cdd9e5;

/css/functional/themes/dark-high-contrast.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-high-contrast.css	2024-12-12 17:01:21.610904001 +0000
@@ -259,10 +259,10 @@
 --button-invisible-bgColor-rest: #00000000;
 --button-invisible-bgColor-hover: #151b23;
 --button-invisible-bgColor-active: #212830;
-  --button-invisible-bgColor-disabled: #262c36;
+  --button-invisible-bgColor-disabled: #00000000;
 --button-invisible-borderColor-rest: #00000000;
 --button-invisible-borderColor-hover: #b7bdc8;
-  --button-invisible-borderColor-disabled: #9198a11f;
+  --button-invisible-borderColor-disabled: #00000000;
 --button-outline-fgColor-rest: #5cacff;
 --button-outline-fgColor-hover: #71b7ff;
 --button-outline-fgColor-active: #ffffff;
@@ -865,10 +865,10 @@
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #151b23;
   --button-invisible-bgColor-active: #212830;
-    --button-invisible-bgColor-disabled: #262c36;
+    --button-invisible-bgColor-disabled: #00000000;
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #b7bdc8;
-    --button-invisible-borderColor-disabled: #9198a11f;
+    --button-invisible-borderColor-disabled: #00000000;
   --button-outline-fgColor-rest: #5cacff;
   --button-outline-fgColor-hover: #71b7ff;
   --button-outline-fgColor-active: #ffffff;

/css/functional/themes/dark-tritanopia.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia.css	2024-12-12 17:01:19.803903325 +0000
@@ -259,10 +259,10 @@
 --button-invisible-bgColor-rest: #00000000;
 --button-invisible-bgColor-hover: #656c7633;
 --button-invisible-bgColor-active: #656c7640;
-  --button-invisible-bgColor-disabled: #212830;
+  --button-invisible-bgColor-disabled: #00000000;
 --button-invisible-borderColor-rest: #00000000;
 --button-invisible-borderColor-hover: #00000000;
-  --button-invisible-borderColor-disabled: #656c761a;
+  --button-invisible-borderColor-disabled: #00000000;
 --button-outline-fgColor-rest: #388bfd;
 --button-outline-fgColor-hover: #58a6ff;
 --button-outline-fgColor-active: #ffffff;
@@ -865,10 +865,10 @@
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #656c7633;
   --button-invisible-bgColor-active: #656c7640;
-    --button-invisible-bgColor-disabled: #212830;
+    --button-invisible-bgColor-disabled: #00000000;
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #00000000;
-    --button-invisible-borderColor-disabled: #656c761a;
+    --button-invisible-borderColor-disabled: #00000000;
   --button-outline-fgColor-rest: #388bfd;
   --button-outline-fgColor-hover: #58a6ff;
   --button-outline-fgColor-active: #ffffff;

/css/functional/themes/dark.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark.css	2024-12-12 17:01:17.958902636 +0000
@@ -259,10 +259,10 @@
 --button-invisible-bgColor-rest: #00000000;
 --button-invisible-bgColor-hover: #656c7633;
 --button-invisible-bgColor-active: #656c7640;
-  --button-invisible-bgColor-disabled: #212830;
+  --button-invisible-bgColor-disabled: #00000000;
 --button-invisible-borderColor-rest: #00000000;
 --button-invisible-borderColor-hover: #00000000;
-  --button-invisible-borderColor-disabled: #656c761a;
+  --button-invisible-borderColor-disabled: #00000000;
 --button-outline-fgColor-rest: #388bfd;
 --button-outline-fgColor-hover: #58a6ff;
 --button-outline-fgColor-active: #ffffff;
@@ -865,10 +865,10 @@
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #656c7633;
   --button-invisible-bgColor-active: #656c7640;
-    --button-invisible-bgColor-disabled: #212830;
+    --button-invisible-bgColor-disabled: #00000000;
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #00000000;
-    --button-invisible-borderColor-disabled: #656c761a;
+    --button-invisible-borderColor-disabled: #00000000;
   --button-outline-fgColor-rest: #388bfd;
   --button-outline-fgColor-hover: #58a6ff;
   --button-outline-fgColor-active: #ffffff;

/css/functional/themes/light-colorblind.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind.css	2024-12-12 17:01:16.138905271 +0000
@@ -259,10 +259,10 @@
 --button-invisible-bgColor-rest: #ffffff00;
 --button-invisible-bgColor-hover: #818b981a;
 --button-invisible-bgColor-active: #818b9826;
-  --button-invisible-bgColor-disabled: #eff2f5;
+  --button-invisible-bgColor-disabled: #ffffff00;
 --button-invisible-borderColor-rest: #ffffff00;
 --button-invisible-borderColor-hover: #ffffff00;
-  --button-invisible-borderColor-disabled: #818b981a;
+  --button-invisible-borderColor-disabled: #ffffff00;
 --button-outline-fgColor-rest: #0969da;
 --button-outline-fgColor-hover: #ffffff;
 --button-outline-fgColor-active: #ffffff;
@@ -865,10 +865,10 @@
   --button-invisible-bgColor-rest: #ffffff00;
   --button-invisible-bgColor-hover: #818b981a;
   --button-invisible-bgColor-active: #818b9826;
-    --button-invisible-bgColor-disabled: #eff2f5;
+    --button-invisible-bgColor-disabled: #ffffff00;
   --button-invisible-borderColor-rest: #ffffff00;
   --button-invisible-borderColor-hover: #ffffff00;
-    --button-invisible-borderColor-disabled: #818b981a;
+    --button-invisible-borderColor-disabled: #ffffff00;
   --button-outline-fgColor-rest: #0969da;
   --button-outline-fgColor-hover: #ffffff;
   --button-outline-fgColor-active: #ffffff;

/css/functional/themes/light-high-contrast.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-high-contrast.css	2024-12-12 17:01:16.991904025 +0000
@@ -259,10 +259,10 @@
 --button-invisible-bgColor-rest: #ffffff00;
 --button-invisible-bgColor-hover: #dae0e7;
 --button-invisible-bgColor-active: #d1d9e0;
-  --button-invisible-bgColor-disabled: #e0e6eb;
+  --button-invisible-bgColor-disabled: #ffffff00;
 --button-invisible-borderColor-rest: #ffffff00;
 --button-invisible-borderColor-hover: #454c54;
-  --button-invisible-borderColor-disabled: #59636e1f;
+  --button-invisible-borderColor-disabled: #ffffff00;
 --button-outline-fgColor-rest: #023b95;
 --button-outline-fgColor-hover: #ffffff;
 --button-outline-fgColor-active: #ffffff;
@@ -865,10 +865,10 @@
   --button-invisible-bgColor-rest: #ffffff00;
   --button-invisible-bgColor-hover: #dae0e7;
   --button-invisible-bgColor-active: #d1d9e0;
-    --button-invisible-bgColor-disabled: #e0e6eb;
+    --button-invisible-bgColor-disabled: #ffffff00;
   --button-invisible-borderColor-rest: #ffffff00;
   --button-invisible-borderColor-hover: #454c54;
-    --button-invisible-borderColor-disabled: #59636e1f;
+    --button-invisible-borderColor-disabled: #ffffff00;
   --button-outline-fgColor-rest: #023b95;
   --button-outline-fgColor-hover: #ffffff;
   --button-outline-fgColor-active: #ffffff;

/css/functional/themes/light-tritanopia.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-tritanopia.css	2024-12-12 17:01:15.227906602 +0000
@@ -259,10 +259,10 @@
 --button-invisible-bgColor-rest: #ffffff00;
 --button-invisible-bgColor-hover: #818b981a;
 --button-invisible-bgColor-active: #818b9826;
-  --button-invisible-bgColor-disabled: #eff2f5;
+  --button-invisible-bgColor-disabled: #ffffff00;
 --button-invisible-borderColor-rest: #ffffff00;
 --button-invisible-borderColor-hover: #ffffff00;
-  --button-invisible-borderColor-disabled: #818b981a;
+  --button-invisible-borderColor-disabled: #ffffff00;
 --button-outline-fgColor-rest: #0969da;
 --button-outline-fgColor-hover: #ffffff;
 --button-outline-fgColor-active: #ffffff;
@@ -865,10 +865,10 @@
   --button-invisible-bgColor-rest: #ffffff00;
   --button-invisible-bgColor-hover: #818b981a;
   --button-invisible-bgColor-active: #818b9826;
-    --button-invisible-bgColor-disabled: #eff2f5;
+    --button-invisible-bgColor-disabled: #ffffff00;
   --button-invisible-borderColor-rest: #ffffff00;
   --button-invisible-borderColor-hover: #ffffff00;
-    --button-invisible-borderColor-disabled: #818b981a;
+    --button-invisible-borderColor-disabled: #ffffff00;
   --button-outline-fgColor-rest: #0969da;
   --button-outline-fgColor-hover: #ffffff;
   --button-outline-fgColor-active: #ffffff;

/css/functional/themes/light.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light.css	2024-12-12 17:01:14.281906793 +0000
@@ -259,10 +259,10 @@
 --button-invisible-bgColor-rest: #ffffff00;
 --button-invisible-bgColor-hover: #818b981a;
 --button-invisible-bgColor-active: #818b9826;
-  --button-invisible-bgColor-disabled: #eff2f5;
+  --button-invisible-bgColor-disabled: #ffffff00;
 --button-invisible-borderColor-rest: #ffffff00;
 --button-invisible-borderColor-hover: #ffffff00;
-  --button-invisible-borderColor-disabled: #818b981a;
+  --button-invisible-borderColor-disabled: #ffffff00;
 --button-outline-fgColor-rest: #0969da;
 --button-outline-fgColor-hover: #ffffff;
 --button-outline-fgColor-active: #ffffff;
@@ -865,10 +865,10 @@
   --button-invisible-bgColor-rest: #ffffff00;
   --button-invisible-bgColor-hover: #818b981a;
   --button-invisible-bgColor-active: #818b9826;
-    --button-invisible-bgColor-disabled: #eff2f5;
+    --button-invisible-bgColor-disabled: #ffffff00;
   --button-invisible-borderColor-rest: #ffffff00;
   --button-invisible-borderColor-hover: #ffffff00;
-    --button-invisible-borderColor-disabled: #818b981a;
+    --button-invisible-borderColor-disabled: #ffffff00;
   --button-outline-fgColor-rest: #0969da;
   --button-outline-fgColor-hover: #ffffff;
   --button-outline-fgColor-active: #ffffff;

github-actions · 2024-12-12T17:01:34Z

Design Token Diff (StyleLint)

/styleLint/functional/themes/dark-colorblind.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-colorblind.json	2024-12-12 17:01:20.743903677 +0000
@@ -6802,7 +6802,7 @@
   "path": ["button", "invisible", "bgColor", "active"]
 },
 "button-invisible-bgColor-disabled": {
-    "$value": "#212830",
+    "$value": "#00000000",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -6814,7 +6814,7 @@
   "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.transparent.bgColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -6883,7 +6883,7 @@
   "path": ["button", "invisible", "borderColor", "hover"]
 },
 "button-invisible-borderColor-disabled": {
-    "$value": "#656c761a",
+    "$value": "#00000000",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -6895,7 +6895,7 @@
   "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.borderColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {

/styleLint/functional/themes/dark-dimmed.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-dimmed.json	2024-12-12 17:01:18.875902978 +0000
@@ -6658,7 +6658,7 @@
   "path": ["button", "invisible", "bgColor", "active"]
 },
 "button-invisible-bgColor-disabled": {
-    "$value": "#2a313c",
+    "$value": "#00000000",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -6670,7 +6670,7 @@
   "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.transparent.bgColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -6739,7 +6739,7 @@
   "path": ["button", "invisible", "borderColor", "hover"]
 },
 "button-invisible-borderColor-disabled": {
-    "$value": "#656c761a",
+    "$value": "#00000000",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -6751,7 +6751,7 @@
   "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.borderColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {

/styleLint/functional/themes/dark-high-contrast.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-high-contrast.json	2024-12-12 17:01:21.610904001 +0000
@@ -5572,7 +5572,7 @@
   "path": ["button", "invisible", "bgColor", "active"]
 },
 "button-invisible-bgColor-disabled": {
-    "$value": "#262c36",
+    "$value": "#00000000",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -5584,7 +5584,7 @@
   "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.transparent.bgColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5653,7 +5653,7 @@
   "path": ["button", "invisible", "borderColor", "hover"]
 },
 "button-invisible-borderColor-disabled": {
-    "$value": "#9198a11f",
+    "$value": "#00000000",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -5665,7 +5665,7 @@
   "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.borderColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {

/styleLint/functional/themes/dark-tritanopia.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-tritanopia.json	2024-12-12 17:01:19.803903325 +0000
@@ -6878,7 +6878,7 @@
   "path": ["button", "invisible", "bgColor", "active"]
 },
 "button-invisible-bgColor-disabled": {
-    "$value": "#212830",
+    "$value": "#00000000",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -6890,7 +6890,7 @@
   "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.transparent.bgColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -6959,7 +6959,7 @@
   "path": ["button", "invisible", "borderColor", "hover"]
 },
 "button-invisible-borderColor-disabled": {
-    "$value": "#656c761a",
+    "$value": "#00000000",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -6971,7 +6971,7 @@
   "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.borderColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {

/styleLint/functional/themes/dark.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark.json	2024-12-12 17:01:17.958902636 +0000
@@ -6992,7 +6992,7 @@
   "path": ["button", "invisible", "bgColor", "active"]
 },
 "button-invisible-bgColor-disabled": {
-    "$value": "#212830",
+    "$value": "#00000000",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -7004,7 +7004,7 @@
   "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.transparent.bgColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7073,7 +7073,7 @@
   "path": ["button", "invisible", "borderColor", "hover"]
 },
 "button-invisible-borderColor-disabled": {
-    "$value": "#656c761a",
+    "$value": "#00000000",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -7085,7 +7085,7 @@
   "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.borderColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {

/styleLint/functional/themes/light-colorblind.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-colorblind.json	2024-12-12 17:01:16.138905271 +0000
@@ -6824,7 +6824,7 @@
   "path": ["button", "invisible", "bgColor", "active"]
 },
 "button-invisible-bgColor-disabled": {
-    "$value": "#eff2f5",
+    "$value": "#ffffff00",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -6836,7 +6836,7 @@
   "filePath": "src/tokens/functional/color/light/patterns-light.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.transparent.bgColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -6905,7 +6905,7 @@
   "path": ["button", "invisible", "borderColor", "hover"]
 },
 "button-invisible-borderColor-disabled": {
-    "$value": "#818b981a",
+    "$value": "#ffffff00",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -6917,7 +6917,7 @@
   "filePath": "src/tokens/functional/color/light/patterns-light.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.borderColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {

/styleLint/functional/themes/light-high-contrast.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-high-contrast.json	2024-12-12 17:01:16.991904025 +0000
@@ -5620,7 +5620,7 @@
   "path": ["button", "invisible", "bgColor", "active"]
 },
 "button-invisible-bgColor-disabled": {
-    "$value": "#e0e6eb",
+    "$value": "#ffffff00",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -5632,7 +5632,7 @@
   "filePath": "src/tokens/functional/color/light/patterns-light.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.transparent.bgColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5701,7 +5701,7 @@
   "path": ["button", "invisible", "borderColor", "hover"]
 },
 "button-invisible-borderColor-disabled": {
-    "$value": "#59636e1f",
+    "$value": "#ffffff00",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -5713,7 +5713,7 @@
   "filePath": "src/tokens/functional/color/light/patterns-light.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.borderColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {

/styleLint/functional/themes/light-tritanopia.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-tritanopia.json	2024-12-12 17:01:15.227906602 +0000
@@ -6838,7 +6838,7 @@
   "path": ["button", "invisible", "bgColor", "active"]
 },
 "button-invisible-bgColor-disabled": {
-    "$value": "#eff2f5",
+    "$value": "#ffffff00",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -6850,7 +6850,7 @@
   "filePath": "src/tokens/functional/color/light/patterns-light.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.transparent.bgColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -6919,7 +6919,7 @@
   "path": ["button", "invisible", "borderColor", "hover"]
 },
 "button-invisible-borderColor-disabled": {
-    "$value": "#818b981a",
+    "$value": "#ffffff00",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -6931,7 +6931,7 @@
   "filePath": "src/tokens/functional/color/light/patterns-light.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.borderColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {

/styleLint/functional/themes/light.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light.json	2024-12-12 17:01:14.283906797 +0000
@@ -6964,7 +6964,7 @@
   "path": ["button", "invisible", "bgColor", "active"]
 },
 "button-invisible-bgColor-disabled": {
-    "$value": "#eff2f5",
+    "$value": "#ffffff00",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -6976,7 +6976,7 @@
   "filePath": "src/tokens/functional/color/light/patterns-light.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.transparent.bgColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7045,7 +7045,7 @@
   "path": ["button", "invisible", "borderColor", "hover"]
 },
 "button-invisible-borderColor-disabled": {
-    "$value": "#818b981a",
+    "$value": "#ffffff00",
   "$type": "color",
   "$extensions": {
     "org.primer.figma": {
@@ -7057,7 +7057,7 @@
   "filePath": "src/tokens/functional/color/light/patterns-light.json5",
   "isSource": true,
   "original": {
-      "$value": "{control.borderColor.disabled}",
+      "$value": "{base.color.transparent}",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {

github-actions · 2024-12-12T17:01:35Z

Design Token Diff (Figma)

/figma/themes/dark-colorblind.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-colorblind.json	2024-12-12 17:01:27.986904293 +0000
@@ -3985,14 +3985,14 @@
 {
   "name": "button/invisible/bgColor/disabled",
   "value": {
-      "r": 0.12941176470588237,
-      "g": 0.1568627450980392,
-      "b": 0.18823529411764706,
-      "a": 1
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/bgColor/disabled",
-    "reference": "mode/control/transparent/bgColor/disabled",
+    "reference": "base/color/dark/base/color/transparent",
   "collection": "mode",
   "mode": "dark colorblind",
   "group": "component (internal)",
@@ -4033,14 +4033,14 @@
 {
   "name": "button/invisible/borderColor/disabled",
   "value": {
-      "r": 0.396078431372549,
-      "g": 0.4235294117647059,
-      "b": 0.4627450980392157,
-      "a": 0.1
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/borderColor/disabled",
-    "reference": "mode/control/borderColor/disabled",
+    "reference": "base/color/dark/base/color/transparent",
   "collection": "mode",
   "mode": "dark colorblind",
   "group": "component (internal)",

/figma/themes/dark-dimmed.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-dimmed.json	2024-12-12 17:01:27.241904358 +0000
@@ -3844,14 +3844,14 @@
 {
   "name": "button/invisible/bgColor/disabled",
   "value": {
-      "r": 0.16470588235294117,
-      "g": 0.19215686274509805,
-      "b": 0.23529411764705882,
-      "a": 1
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/bgColor/disabled",
-    "reference": "mode/control/transparent/bgColor/disabled",
+    "reference": "base/color/dark/base/color/transparent",
   "collection": "mode",
   "mode": "dark dimmed",
   "group": "component (internal)",
@@ -3892,14 +3892,14 @@
 {
   "name": "button/invisible/borderColor/disabled",
   "value": {
-      "r": 0.396078431372549,
-      "g": 0.4235294117647059,
-      "b": 0.4627450980392157,
-      "a": 0.1
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/borderColor/disabled",
-    "reference": "control/borderColor/disabled",
+    "reference": "base/color/dark/base/color/transparent",
   "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	2024-12-12 17:01:28.325904264 +0000
@@ -2576,14 +2576,14 @@
 {
   "name": "button/invisible/bgColor/disabled",
   "value": {
-      "r": 0.14901960784313725,
-      "g": 0.17254901960784313,
-      "b": 0.21176470588235294,
-      "a": 1
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/bgColor/disabled",
-    "reference": "mode/control/transparent/bgColor/disabled",
+    "reference": "base/color/dark/base/color/transparent",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "component (internal)",
@@ -2624,14 +2624,14 @@
 {
   "name": "button/invisible/borderColor/disabled",
   "value": {
-      "r": 0.5686274509803921,
-      "g": 0.596078431372549,
-      "b": 0.6313725490196078,
-      "a": 0.12
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/borderColor/disabled",
-    "reference": "mode/control/borderColor/disabled",
+    "reference": "base/color/dark/base/color/transparent",
   "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	2024-12-12 17:01:27.613904326 +0000
@@ -4067,14 +4067,14 @@
 {
   "name": "button/invisible/bgColor/disabled",
   "value": {
-      "r": 0.12941176470588237,
-      "g": 0.1568627450980392,
-      "b": 0.18823529411764706,
-      "a": 1
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/bgColor/disabled",
-    "reference": "mode/control/transparent/bgColor/disabled",
+    "reference": "base/color/dark/base/color/transparent",
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "component (internal)",
@@ -4115,14 +4115,14 @@
 {
   "name": "button/invisible/borderColor/disabled",
   "value": {
-      "r": 0.396078431372549,
-      "g": 0.4235294117647059,
-      "b": 0.4627450980392157,
-      "a": 0.1
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/borderColor/disabled",
-    "reference": "mode/control/borderColor/disabled",
+    "reference": "base/color/dark/base/color/transparent",
   "collection": "mode",
   "mode": "dark tritanopia",
   "group": "component (internal)",

/figma/themes/dark.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark.json	2024-12-12 17:01:26.878904390 +0000
@@ -4225,14 +4225,14 @@
 {
   "name": "button/invisible/bgColor/disabled",
   "value": {
-      "r": 0.12941176470588237,
-      "g": 0.1568627450980392,
-      "b": 0.18823529411764706,
-      "a": 1
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/bgColor/disabled",
-    "reference": "mode/control/transparent/bgColor/disabled",
+    "reference": "base/color/dark/base/color/transparent",
   "collection": "mode",
   "mode": "dark",
   "group": "component (internal)",
@@ -4273,14 +4273,14 @@
 {
   "name": "button/invisible/borderColor/disabled",
   "value": {
-      "r": 0.396078431372549,
-      "g": 0.4235294117647059,
-      "b": 0.4627450980392157,
-      "a": 0.1
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/borderColor/disabled",
-    "reference": "mode/control/borderColor/disabled",
+    "reference": "base/color/dark/base/color/transparent",
   "collection": "mode",
   "mode": "dark",
   "group": "component (internal)",

/figma/themes/light-colorblind.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-colorblind.json	2024-12-12 17:01:26.119904456 +0000
@@ -4046,14 +4046,14 @@
 {
   "name": "button/invisible/bgColor/disabled",
   "value": {
-      "r": 0.9372549019607843,
-      "g": 0.9490196078431372,
-      "b": 0.9607843137254902,
-      "a": 1
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/bgColor/disabled",
-    "reference": "mode/control/transparent/bgColor/disabled",
+    "reference": "base/color/light/base/color/transparent",
   "collection": "mode",
   "mode": "light colorblind",
   "group": "component (internal)",
@@ -4094,14 +4094,14 @@
 {
   "name": "button/invisible/borderColor/disabled",
   "value": {
-      "r": 0.5058823529411764,
-      "g": 0.5450980392156862,
-      "b": 0.596078431372549,
-      "a": 0.1
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/borderColor/disabled",
-    "reference": "mode/control/borderColor/disabled",
+    "reference": "base/color/light/base/color/transparent",
   "collection": "mode",
   "mode": "light colorblind",
   "group": "component (internal)",

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

+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-high-contrast.json	2024-12-12 17:01:26.471904426 +0000
@@ -2652,14 +2652,14 @@
 {
   "name": "button/invisible/bgColor/disabled",
   "value": {
-      "r": 0.8784313725490196,
-      "g": 0.9019607843137255,
-      "b": 0.9215686274509803,
-      "a": 1
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/bgColor/disabled",
-    "reference": "mode/control/transparent/bgColor/disabled",
+    "reference": "base/color/light/base/color/transparent",
   "collection": "mode",
   "mode": "light high contrast",
   "group": "component (internal)",
@@ -2700,14 +2700,14 @@
 {
   "name": "button/invisible/borderColor/disabled",
   "value": {
-      "r": 0.34901960784313724,
-      "g": 0.38823529411764707,
-      "b": 0.43137254901960786,
-      "a": 0.12
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/borderColor/disabled",
-    "reference": "mode/control/borderColor/disabled",
+    "reference": "base/color/light/base/color/transparent",
   "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	2024-12-12 17:01:25.744904728 +0000
@@ -4062,14 +4062,14 @@
 {
   "name": "button/invisible/bgColor/disabled",
   "value": {
-      "r": 0.9372549019607843,
-      "g": 0.9490196078431372,
-      "b": 0.9607843137254902,
-      "a": 1
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/bgColor/disabled",
-    "reference": "mode/control/transparent/bgColor/disabled",
+    "reference": "base/color/light/base/color/transparent",
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "component (internal)",
@@ -4110,14 +4110,14 @@
 {
   "name": "button/invisible/borderColor/disabled",
   "value": {
-      "r": 0.5058823529411764,
-      "g": 0.5450980392156862,
-      "b": 0.596078431372549,
-      "a": 0.1
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/borderColor/disabled",
-    "reference": "mode/control/borderColor/disabled",
+    "reference": "base/color/light/base/color/transparent",
   "collection": "mode",
   "mode": "light tritanopia",
   "group": "component (internal)",

/figma/themes/light.json

+++ /home/runner/work/primitives/primitives/dist/figma/themes/light.json	2024-12-12 17:01:25.352905205 +0000
@@ -4203,14 +4203,14 @@
 {
   "name": "button/invisible/bgColor/disabled",
   "value": {
-      "r": 0.9372549019607843,
-      "g": 0.9490196078431372,
-      "b": 0.9607843137254902,
-      "a": 1
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/bgColor/disabled",
-    "reference": "mode/control/transparent/bgColor/disabled",
+    "reference": "base/color/light/base/color/transparent",
   "collection": "mode",
   "mode": "light",
   "group": "component (internal)",
@@ -4251,14 +4251,14 @@
 {
   "name": "button/invisible/borderColor/disabled",
   "value": {
-      "r": 0.5058823529411764,
-      "g": 0.5450980392156862,
-      "b": 0.596078431372549,
-      "a": 0.1
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
   },
   "type": "COLOR",
   "refId": "mode/button/invisible/borderColor/disabled",
-    "reference": "mode/control/borderColor/disabled",
+    "reference": "base/color/light/base/color/transparent",
   "collection": "mode",
   "mode": "light",
   "group": "component (internal)",

update disabled colors

cba3367

langermank changed the title ~~update disabled colors~~ Update invisible disabled state colors Dec 12, 2024

Create young-geckos-bathe.md

8615fb2

langermank mentioned this pull request Dec 12, 2024

Remove border & background from invisible disabled buttons primer/react#5423

Closed

13 tasks

langermank added the update snapshots Update visual regression test snapshots label Dec 12, 2024

github-actions bot temporarily deployed to Preview (Storybook) December 12, 2024 17:03 Inactive

langermank deployed to github-pages December 12, 2024 17:03 — with GitHub Actions View deployment

github-actions bot temporarily deployed to Preview (Storybook) December 12, 2024 17:04 Inactive

github-actions bot removed the update snapshots Update visual regression test snapshots label Dec 12, 2024

langermank marked this pull request as ready for review December 12, 2024 20:47

langermank requested review from a team as code owners December 12, 2024 20:47

langermank requested a review from jonrohan December 12, 2024 20:47

langermank merged commit 033336d into main Dec 12, 2024
29 checks passed

langermank deleted the update-invisible-disabled-colors branch December 12, 2024 20:50

primer bot mentioned this pull request Dec 12, 2024

Release Tracking #1103

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update `invisible` disabled state colors #1121

Update `invisible` disabled state colors #1121

langermank commented Dec 12, 2024

changeset-bot bot commented Dec 12, 2024 •

edited

Loading

github-actions bot commented Dec 12, 2024 •

edited

Loading

/css/functional/themes/dark-colorblind.css

/css/functional/themes/dark-dimmed.css

/css/functional/themes/dark-high-contrast.css

/css/functional/themes/dark-tritanopia.css

/css/functional/themes/dark.css

/css/functional/themes/light-colorblind.css

/css/functional/themes/light-high-contrast.css

/css/functional/themes/light-tritanopia.css

/css/functional/themes/light.css

github-actions bot commented Dec 12, 2024 •

edited

Loading

/styleLint/functional/themes/dark-colorblind.json

/styleLint/functional/themes/dark-dimmed.json

/styleLint/functional/themes/dark-high-contrast.json

/styleLint/functional/themes/dark-tritanopia.json

/styleLint/functional/themes/dark.json

/styleLint/functional/themes/light-colorblind.json

/styleLint/functional/themes/light-high-contrast.json

/styleLint/functional/themes/light-tritanopia.json

/styleLint/functional/themes/light.json

github-actions bot commented Dec 12, 2024 •

edited

Loading

/figma/themes/dark-colorblind.json

/figma/themes/dark-dimmed.json

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

/figma/themes/dark-tritanopia.json

/figma/themes/dark.json

/figma/themes/light-colorblind.json

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

/figma/themes/light-tritanopia.json

/figma/themes/light.json

Update invisible disabled state colors #1121

Update invisible disabled state colors #1121

Conversation

langermank commented Dec 12, 2024

changeset-bot bot commented Dec 12, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Dec 12, 2024 • edited Loading

Design Token Diff (CSS)

/css/functional/themes/dark-colorblind.css

/css/functional/themes/dark-dimmed.css

/css/functional/themes/dark-high-contrast.css

/css/functional/themes/dark-tritanopia.css

/css/functional/themes/dark.css

/css/functional/themes/light-colorblind.css

/css/functional/themes/light-high-contrast.css

/css/functional/themes/light-tritanopia.css

/css/functional/themes/light.css

github-actions bot commented Dec 12, 2024 • edited Loading

Design Token Diff (StyleLint)

/styleLint/functional/themes/dark-colorblind.json

/styleLint/functional/themes/dark-dimmed.json

/styleLint/functional/themes/dark-high-contrast.json

/styleLint/functional/themes/dark-tritanopia.json

/styleLint/functional/themes/dark.json

/styleLint/functional/themes/light-colorblind.json

/styleLint/functional/themes/light-high-contrast.json

/styleLint/functional/themes/light-tritanopia.json

/styleLint/functional/themes/light.json

github-actions bot commented Dec 12, 2024 • edited Loading

Design Token Diff (Figma)

/figma/themes/dark-colorblind.json

/figma/themes/dark-dimmed.json

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

/figma/themes/dark-tritanopia.json

/figma/themes/dark.json

/figma/themes/light-colorblind.json

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

/figma/themes/light-tritanopia.json

/figma/themes/light.json

Update `invisible` disabled state colors #1121

Update `invisible` disabled state colors #1121

changeset-bot bot commented Dec 12, 2024 •

edited

Loading

github-actions bot commented Dec 12, 2024 •

edited

Loading

github-actions bot commented Dec 12, 2024 •

edited

Loading

github-actions bot commented Dec 12, 2024 •

edited

Loading