TextField: TextField VR adjusments (#3829)

pinterest · Oct 25, 2024 · c7f9a8a · c7f9a8a
1 parent 4d05dbf
commit c7f9a8a
Showing 1 changed file with 12 additions and 7 deletions.
diff --git a/packages/gestalt/src/TextField/VRInternalTextField.css b/packages/gestalt/src/TextField/VRInternalTextField.css
@@ -1,5 +1,4 @@
 .input {
-  border-radius: var(--sema-rounding-300);
   box-sizing: border-box;
   display: block;
   position: relative;
@@ -67,13 +66,15 @@
 
 .sm_input {
   composes: sm smDefault from "../Text.css";
+  border-radius: var(--sema-rounding-200);
   min-height: 28px;
   padding-bottom: var(--sema-space-100);
 }
 
 .sm_visibleLabel {
   padding-top: calc(
-    var(--sema-space-100) + (var(--sema-font-size-ui-sm) * 1.1)
+    var(--sema-space-100) + var(--sema-space-50) +
+      var(--sema-space-negative-100) + var(--sema-font-lineheight-ui-xs)
   );
 }
 
@@ -102,7 +103,7 @@ html:not([dir="rtl"]) .sm_label {
 }
 
 .sm_labelPos {
-  top: var(--sema-space-100);
+  top: calc(var(--sema-space-100) + var(--sema-space-50));
 }
 
 html:not([dir="rtl"]) .sm_actionButton {
@@ -121,13 +122,15 @@ html[dir="rtl"] .sm_actionButton {
 
 .md_input {
   composes: md mdDefault from "../Text.css";
+  border-radius: var(--sema-rounding-300);
   min-height: 36px;
   padding-bottom: var(--sema-space-200);
 }
 
 .md_visibleLabel {
   padding-top: calc(
-    var(--sema-space-300) + (var(--sema-font-size-ui-md) * 1.1)
+    var(--sema-space-200) + var(--sema-space-50) +
+      var(--sema-font-lineheight-ui-xs)
   );
 }
 
@@ -156,7 +159,7 @@ html:not([dir="rtl"]) .md_label {
 }
 
 .md_labelPos {
-  top: var(--sema-space-200);
+  top: calc(var(--sema-space-200) + var(--sema-space-50));
 }
 
 html:not([dir="rtl"]) .md_actionButton {
@@ -171,13 +174,15 @@ html[dir="rtl"] .md_actionButton {
 
 .lg_input {
   composes: md mdDefault from "../Text.css";
+  border-radius: var(--sema-rounding-400);
   min-height: 48px;
   padding-bottom: var(--sema-space-300);
 }
 
 .lg_visibleLabel {
   padding-top: calc(
-    var(--sema-space-400) + (var(--sema-font-size-ui-md) * 1.1)
+    var(--sema-space-300) + var(--sema-space-100) + var(--sema-space-100) +
+      var(--sema-font-lineheight-ui-xs)
   );
 }
 
@@ -206,7 +211,7 @@ html:not([dir="rtl"]) .lg_label {
 }
 
 .lg_labelPos {
-  top: var(--sema-space-300);
+  top: calc(var(--sema-space-300) + var(--sema-space-100));
 }
 
 html:not([dir="rtl"]) .lg_actionButton {