Skip to content

Commit 49e8150

Browse files
authored
Use control tokens for legacy form CSS (#2510)
* use control tokens * Create early-seas-peel.md
1 parent 4c3826f commit 49e8150

File tree

2 files changed

+10
-5
lines changed

2 files changed

+10
-5
lines changed

.changeset/early-seas-peel.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": patch
3+
---
4+
5+
Use `control` tokens for legacy form CSS border-color

src/forms/form-control.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
background-color: var(--bgColor-default, var(--color-canvas-default));
1818
background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
1919
background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
20-
border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
20+
border: $border-width $border-style var(--control-borderColor-rest, var(--color-border-default));
2121
border-radius: $border-radius;
2222
box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
2323
transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
@@ -49,14 +49,14 @@
4949

5050
&[disabled],
5151
fieldset[disabled] & {
52-
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
52+
color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled));
5353
background-color: var(--control-bgColor-disabled, var(--color-input-disabled-bg));
54-
border-color: var(--borderColor-default, var(--color-border-default));
55-
-webkit-text-fill-color: var(--fgColor-disabled, var(--color-primer-fg-disabled)); // Fix for Safari
54+
border-color: var(--control-borderColor-disabled, var(--color-border-default));
55+
-webkit-text-fill-color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled)); // Fix for Safari
5656
opacity: 1; // Fix for Safari iOS
5757

5858
&::placeholder {
59-
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
59+
color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled));
6060
}
6161
}
6262

0 commit comments

Comments
 (0)