primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-29 14:14:26 +03:00
Code Issues Projects Releases Wiki Activity

Decrease contrast for disabled text (#1677)

Browse Source 
* 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
This commit is contained in:
simurai 2021-10-20 19:34:51 +09:00 committed by GitHub
parent f013be66db
commit cdb0faa606
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/tall-tips-thank.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
Lower contrast for disabled text

2
package.json
View File

@ -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",

10
src/buttons/button.scss
View File

@ -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

7
src/buttons/misc.scss
View File

@ -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); }
}
}

6
src/forms/form-control.scss
View File

@ -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

2
src/pagination/pagination.scss
View File

@ -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;
}

2
src/select-menu/select-menu.scss
View File

@ -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;
}

8
yarn.lock
View File

@ -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"