feat(styles): synced TextField component with designs

packages/styles/button.css

@@ -8,6 +8,7 @@
   --button-background-color-secondary-disabled: var(--gray-30);
   --button-outline-color-secondary: var(--gray-90);
   --button-background-color-secondary-active: var(--gray-30);
+  --button-border-color-secondary: var(--gray-40);
 
   --button-background-color-error: var(--error);
   --button-background-color-error-disabled: #db6379;
@@ -126,7 +127,7 @@ button.Link {
 .Button--tertiary {
   background-color: var(--button-background-color-secondary);
   color: var(--button-text-color-dark);
-  border: 1px solid var(--field-border-color);
+  border: 1px solid var(--button-border-color-secondary);
 }
 
 .Button--tertiary:is(:not(:hover, :focus), [disabled], [aria-disabled='true']) {

packages/styles/combobox.css

@@ -35,7 +35,7 @@
   );
   --text-field-wrapper-border-hover-color: var(
     --combobox-input-border-hover-color,
-    var(--field-border-color-focus-hover)
+    var(--field-border-color-hover)
   );
   --text-field-wrapper-border-focus-glow-color: var(
     --combobox-input-border-focus-glow-color,
@@ -78,7 +78,7 @@
   );
   --text-field-wrapper-border-hover-color: var(
     --combobox-input-border-hover-color,
-    var(--field-border-color-focus-hover)
+    var(--field-border-color-hover)
   );
   --text-field-wrapper-border-focus-glow-color: var(
     --combobox-input-border-focus-glow-color,

packages/styles/forms.css

@@ -11,6 +11,7 @@
   --field-border-color-error-hover: #c42f41;
   --field-border-color-error-focus-glow: rgba(217, 50, 81, 0.7);
   --field-border-color-disabled: rgba(204, 204, 204, 0.25);
+  --field-border-radius: 4px;
   --field-background-color-disabled: var(--light-workspace-color);
   --field-placeholder-color: var(--gray-50);
   --field-required-text-color: var(--gray-60);
@@ -38,7 +39,7 @@
   --field-background-color: var(--accent-medium);
   --field-content-color: var(--white);
   --field-border-color: #74818b;
-  --field-border-color-hover: var(--accent-info-light);
+  --field-border-color-hover: var(--accent-light);
   --field-border-color-focus: var(--accent-info);
   --field-border-color-focus-hover: var(--accent-info-light);
   --field-border-color-focus-glow: var(--accent-info);
@@ -73,7 +74,6 @@ textarea,
 [role='spinbutton'] {
   width: 100%;
   border: 1px solid var(--field-border-color);
-  border-bottom: 1px solid var(--field-border-color-underline);
   margin-bottom: var(--space-half);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
   background-color: var(--field-background-color);
@@ -342,6 +342,7 @@ textarea.Field--has-error:focus:hover,
   font-size: var(--field-font-size);
   color: var(--field-content-color);
   min-width: min(var(--input-min-width), 100%);
+  border-radius: var(--field-border-radius);
 }
 
 .Field__text-input[disabled],
@@ -358,6 +359,7 @@ textarea.Field--has-error:focus:hover,
   padding: var(--space-half);
   max-width: 500px;
   color: var(--field-content-color);
+  border-radius: var(--field-border-radius);
 }
 
 .Field__textarea[disabled],

packages/styles/search-field.css

@@ -13,7 +13,7 @@
   );
   --text-field-wrapper-border-hover-color: var(
     --search-field-border-hover-color,
-    var(--field-border-color-focus-hover)
+    var(--field-border-color-hover)
   );
   --text-field-wrapper-border-focus-glow-color: var(
     --search-field-border-focus-glow-color,
@@ -56,7 +56,7 @@
   );
   --text-field-wrapper-border-hover-color: var(
     --search-field-border-hover-color,
-    var(--field-border-color-focus-hover)
+    var(--field-border-color-hover)
   );
   --text-field-wrapper-border-focus-glow-color: var(
     --search-field-border-focus-glow-color,
@@ -92,3 +92,8 @@
 .SearchField input::-webkit-search-cancel-button {
   margin-left: var(--space-smallest);
 }
+
+.SearchField input {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

packages/styles/select.css

@@ -38,6 +38,7 @@
   padding: var(--space-three-quarters) var(--space-smallest);
   padding-right: var(--space-large);
   border: 1px solid var(--field-border-color);
+  border-radius: var(--field-border-radius);
   font-family: Roboto;
   font-weight: normal;
   font-style: normal;

packages/styles/text-field-wrapper.css

@@ -2,9 +2,7 @@
   --text-field-wrapper-border-color: var(--field-border-color);
   --text-field-wrapper-background-color: var(--field-background-color);
   --text-field-wrapper-border-focus-color: var(--field-border-color-focus);
-  --text-field-wrapper-border-hover-color: var(
-    --field-border-color-focus-hover
-  );
+  --text-field-wrapper-border-hover-color: var(--field-border-color-hover);
   --text-field-wrapper-border-focus-glow-color: var(
     --field-border-color-focus-glow
   );
@@ -23,9 +21,7 @@
   --text-field-wrapper-border-color: var(--field-border-color);
   --text-field-wrapper-background-color: var(--field-background-color);
   --text-field-wrapper-border-focus-color: var(--field-border-color-focus);
-  --text-field-wrapper-border-hover-color: var(
-    --field-border-color-focus-hover
-  );
+  --text-field-wrapper-border-hover-color: var(--field-border-color-hover);
   --text-field-wrapper-border-focus-glow-color: var(
     --field-border-color-focus-glow
   );
@@ -51,7 +47,7 @@
   display: flex;
   align-items: center;
   border: 1px solid var(--text-field-wrapper-border-color);
-  border-bottom: 1px solid var(--field-border-color-underline);
+  border-radius: var(--field-border-radius);
   margin-bottom: var(--space-half);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
   background-color: var(--text-field-wrapper-background-color);
@@ -71,6 +67,7 @@
 }
 
 .TextFieldWrapper input {
+  border-radius: var(--field-border-radius);
   font-size: var(--text-field-wrapper-font-size);
   color: var(--text-field-wrapper-font-color);
 }