diff --git a/.changeset/tall-tips-thank.md b/.changeset/tall-tips-thank.md new file mode 100644 index 0000000000..efcedd0f31 --- /dev/null +++ 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 index 6632930b71..c051d1a2f6 100644 --- 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 index 3d36c37b81..0f239acabf 100644 --- 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 index 2e307e9530..936441f45a 100644 --- 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 index 666394d441..744122de9a 100644 --- 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 index 13f259b606..3df021230b 100644 --- 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 index 0f41b5ad7e..dbbf99aca9 100644 --- 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 index 95a972a278..f0e435e858 100644 --- 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"