primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-11 16:36:07 +03:00
Code Issues Projects Releases Wiki Activity

Increase Checkbox/Radio border contrast (#2316)

Browse Source 
* increase border contrast

* Create quiet-otters-care.md

* Stylelint auto-fixes

* Update quiet-otters-care.md

Co-authored-by: Actions Auto Build <actions@github.com>
This commit is contained in:
Katie Langerman 2022-11-18 15:50:44 -08:00 committed by GitHub
parent 551492ebf4
commit f3acb2b116
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/quiet-otters-care.md Normal file
View File

@ -0,0 +1,6 @@
---
"@primer/css": patch
---
Increase Checkbox/Radio border contrast

5
src/forms/FormControl.scss
View File

@ -50,7 +50,7 @@
@mixin Field {
color: var(--color-fg-default);
background-color: var(--color-canvas-default);
border: solid var(--primer-borderWidth-thin, 1px) var(--color-border-default);
border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
&[disabled] {
color: var(--color-primer-fg-disabled);
@ -530,7 +530,7 @@ input[type='checkbox'].FormControl-checkbox {
margin: 0;
margin-top: 0.125rem; // 2px to center align with label (20px line-height)
cursor: pointer;
border: solid var(--primer-borderWidth-thin, 1px) var(--color-border-default);
border-color: var(--color-neutral-emphasis);
border-radius: var(--primer-borderRadius-small, 3px);
transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); // checked -> unchecked - add 120ms delay to fully see animation-out
appearance: none;
@ -624,6 +624,7 @@ input[type='radio'].FormControl-radio {
margin: 0;
margin-top: 0.125rem; // 2px to center align with label (20px line-height)
cursor: pointer;
border-color: var(--color-neutral-emphasis);
border-radius: var(--primer-borderRadius-full, 100vh);
transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); // checked -> unchecked - add 120ms delay to fully see animation-out
appearance: none;