feat: update input according v3theme

gympass · Mar 20, 2024 · 2c76467 · 2c76467
1 parent f2472b2
commit 2c76467
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 10 deletions.
diff --git a/packages/yoga/src/Input/Input.theme.js b/packages/yoga/src/Input/Input.theme.js
@@ -2,6 +2,7 @@ const Input = ({
   colors,
   fontSizes,
   fontWeights,
+  lineHeights,
   borders,
   radii,
   spacing,
@@ -15,6 +16,7 @@ const Input = ({
     },
     size: fontSizes.small,
     weight: fontWeights.regular,
+    lineHeight: lineHeights.small,
   },
   border: {
     width: borders.small,
@@ -45,6 +47,10 @@ const Input = ({
         typed: fontSizes.xsmall,
       },
       weight: fontWeights.regular,
+      lineHeight: {
+        default: lineHeights.small,
+        typed: lineHeights.xsmall,
+      },
     },
   },
   helper: {
@@ -57,6 +63,8 @@ const Input = ({
     },
     font: {
       size: fontSizes.xsmall,
+      weight: fontWeights.regular,
+      lineHeight: lineHeights.xsmall,
     },
   },
 });

diff --git a/packages/yoga/src/Input/web/Field.jsx b/packages/yoga/src/Input/web/Field.jsx
@@ -17,6 +17,7 @@ const labelTransition = css`
     transition-timing-function: cubic-bezier(${transition.timing[0].join()});
 
     font-size: ${input.label.font.size.typed}px;
+    line-height: ${input.label.font.lineHeight.typed}px;
   `}
 `;
 
@@ -61,6 +62,7 @@ const Field = styled.input`
     font-family: ${baseFont.family}, sans-serif;
     font-size: ${input.font.size}px;
     font-weight: ${input.font.weight};
+    line-height: ${input.font.lineHeight}px;
 
     &:focus {
       color: ${input.font.color.focus};
@@ -74,7 +76,6 @@ const Field = styled.input`
       & ~ label {
         ${labelTransition}
 
-        font-weight: ${input.label.font.weight};
         color: ${error
           ? `${colors.feedback.attention[1]}`
           : `${colors.text.primary}`};

diff --git a/packages/yoga/src/Input/web/Fieldset.jsx b/packages/yoga/src/Input/web/Fieldset.jsx
@@ -35,15 +35,15 @@ const Fieldset = styled.fieldset`
 
     ${disabled ? `border-color: ${colors.elements.lineAndBorders};` : ''}
 
-    &:hover, &:focus-within { 
+    &:hover, &:focus-within {
       &:not(:disabled) {
         border-color: ${
           error ? colors.feedback.attention[1] : input.border.color.typed
         };
-      } 
+      }
     }
 
-    
+
   `}
 `;
 

diff --git a/packages/yoga/src/Input/web/Helper.jsx b/packages/yoga/src/Input/web/Helper.jsx
@@ -24,17 +24,15 @@ export const Wrapper = styled.div`
   `}
 `;
 
-const Info = styled(Text.Small)`
+const Info = styled(Text.Body2)`
   color: currentColor;
   ${({
     hideMaxLength,
     theme: {
-      yoga: {
-        components: { input },
-      },
+      yoga: { baseFont },
     },
   }) => `
-    font-size: ${input.helper.font.size}px;
+    font-family: ${baseFont.family};
 
     ${hideMaxLength ? 'display: none;' : ''}
     `}

diff --git a/packages/yoga/src/Input/web/Label.jsx b/packages/yoga/src/Input/web/Label.jsx
@@ -12,15 +12,18 @@ const Label = styled.label`
       yoga: {
         transition,
         colors,
+        baseFont,
         components: { input },
       },
     },
   }) => css`
     top: ${input.padding.top}px;
     left: ${input.padding.left}px;
 
+    font-family: ${baseFont.family};
     font-size: ${input.label.font.size.default}px;
     font-weight: ${input.label.font.weight};
+    line-height: ${input.label.font.lineHeight.default}px;
     color: ${input.label.color.default};
 
     transition-property: transform, font-size;

diff --git a/packages/yoga/src/Input/web/Legend.jsx b/packages/yoga/src/Input/web/Legend.jsx
@@ -8,18 +8,21 @@ const StyledLegend = styled.legend`
   max-width: 0;
   width: auto;
   height: 0;
-  font-weight: normal;
   visibility: hidden;
   transition-property: max-width, padding;
 
   ${({
     theme: {
       yoga: {
+        baseFont,
         components: { input },
       },
     },
   }) => `
+    font-family: ${baseFont.family};
     font-size: ${input.label.font.size.typed}px;
+    font-weight: ${input.label.font.weight};
+    line-height: ${input.label.font.lineHeight.typed}px;
     letter-spacing: normal;
 
     transition-duration: 100ms;

diff --git a/packages/yoga/src/Theme/theme/v3theme.ts b/packages/yoga/src/Theme/theme/v3theme.ts
@@ -227,5 +227,32 @@ export const v3theme = createTheme(tokens => ({
         }
       },
     },
+    input: {
+      font: {
+        size: tokens.fontSizes.small,
+        weight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.small,
+      },
+      label: {
+        font: {
+          size: {
+            default: tokens.fontSizes.small,
+            typed: tokens.fontSizes.xsmall,
+          },
+          weight: tokens.fontWeights.medium,
+          lineHeight: {
+            default: tokens.lineHeights.small,
+            typed: tokens.lineHeights.xsmall,
+          },
+        },
+      },
+      helper: {
+        font: {
+          size: tokens.fontSizes.xsmall,
+          weight: tokens.fontWeights.regular,
+          lineHeight: tokens.lineHeights.xsmall,
+        },
+      },
+    },
   },
 }));