Use control tokens for legacy form CSS (#2510)

* use control tokens

* Create early-seas-peel.md

.changeset/early-seas-peel.md

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

src/forms/form-control.scss

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