Decrease contrast for disabled text (#1677)

* yarn add primer/primitives@^5.1.0 * Use --color-primer-fg-disabled * Create tall-tips-thank.md * Use --color-primer-fg-disabled for form inputs
primer · Oct 20, 2021 · cdb0faa · cdb0faa
1 parent f013be6
commit cdb0faa
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 16 deletions.
diff --git a/.changeset/tall-tips-thank.md b/.changeset/tall-tips-thank.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Lower contrast for disabled text
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^5.0.0"
+    "@primer/primitives": "^5.1.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.1",

diff --git a/src/buttons/button.scss b/src/buttons/button.scss
@@ -26,10 +26,6 @@
   &.disabled,
   &[aria-disabled=true] {
     cursor: default;
-
-    .octicon {
-      color: var(--color-fg-muted);
-    }
   }
 
   i {
@@ -96,9 +92,13 @@
   &:disabled,
   &.disabled,
   &[aria-disabled=true] {
-    color: var(--color-fg-muted);
+    color: var(--color-primer-fg-disabled);
     background-color: var(--color-btn-bg);
     border-color: var(--color-btn-border);
+
+    .octicon {
+      color: var(--color-primer-fg-disabled);
+    }
   }
 
   // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons

diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
@@ -24,7 +24,7 @@
   &[aria-disabled=true] {
     &,
     &:hover {
-      color: var(--color-fg-muted);
+      color: var(--color-primer-fg-disabled);
       cursor: default;
     }
   }
@@ -63,6 +63,7 @@
   &:disabled,
   &.disabled,
   &[aria-disabled=true] {
+    color: var(--color-primer-fg-disabled);
     background-color: transparent;
   }
 }
@@ -89,10 +90,10 @@
 
   &.disabled,
   &[aria-disabled=true] {
-    color: var(--color-fg-muted);
+    color: var(--color-primer-fg-disabled);
     cursor: default;
 
-    &:hover { color: var(--color-fg-muted); }
+    &:hover { color: var(--color-primer-fg-disabled); }
   }
 }
 

diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
@@ -40,9 +40,13 @@ label {
   }
 
   &[disabled] {
-    color: var(--color-fg-muted);
+    color: var(--color-primer-fg-disabled);
     background-color: var(--color-input-disabled-bg);
     border-color: var(--color-border-default);
+
+    &::placeholder {
+      color: var(--color-primer-fg-disabled);
+    }
   }
 
   // Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad

diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss
@@ -54,7 +54,7 @@
   .gap:hover,
   .disabled:hover,
   [aria-disabled=true]:hover {
-    color: var(--color-fg-muted);
+    color: var(--color-primer-fg-disabled);
     cursor: default;
     border-color: transparent;
   }

diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss
@@ -403,7 +403,7 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu-item:disabled,
 .SelectMenu-item[aria-disabled=true] {
-  color: var(--color-fg-muted);
+  color: var(--color-primer-fg-disabled);
   pointer-events: none;
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -968,10 +968,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@primer/primitives@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-5.0.0.tgz#20e5e7aae0464093f4742f5947c332cbcbc68edd"
-  integrity sha512-g2omeDBgfE5Q6+BQxPaflz5/shCFNjPvfpzphQMpeqIeSrV9boFyicLq7/Rd3WdsDvIMIsMCC1lWZE9JyEhR3w==
+"@primer/primitives@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-5.1.0.tgz#698ad3a173f3a1d7090651cce0a7088e4b93da39"
+  integrity sha512-pW8DIh6rZV0/R7lxHnVRJ/tdN4kDVSpAtdcCecxKsvtgK5d9haekt3ERpM6i93xKwB5CJYy9ouuC9C0UqWPI0A==
 
 "@primer/stylelint-config@12.0.1":
   version "12.0.1"