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

Use control tokens for legacy form CSS (#2510)

Browse Source 
* use control tokens

* Create early-seas-peel.md
This commit is contained in:
Katie Langerman 2023-08-22 07:27:21 -07:00 committed by GitHub
parent 4c3826fac6
commit 49e81506a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/early-seas-peel.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
Use `control` tokens for legacy form CSS border-color

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

@ -17,7 +17,7 @@
background-color: var(--bgColor-default, var(--color-canvas-default));
background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
border: $border-width $border-style var(--control-borderColor-rest, var(--color-border-default));
border-radius: $border-radius;
box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
@ -49,14 +49,14 @@
&[disabled],
fieldset[disabled] & {
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled));
background-color: var(--control-bgColor-disabled, var(--color-input-disabled-bg));
border-color: var(--borderColor-default, var(--color-border-default));
-webkit-text-fill-color: var(--fgColor-disabled, var(--color-primer-fg-disabled)); // Fix for Safari
border-color: var(--control-borderColor-disabled, var(--color-border-default));
-webkit-text-fill-color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled)); // Fix for Safari
opacity: 1; // Fix for Safari iOS
&::placeholder {
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled));
}
}