@gympass/yoga 7.110.3 → 7.111.0

package/cjs/Input/Input.theme.js

@@ -25,6 +25,7 @@ const Input = ({
   colors,
   fontSizes,
   fontWeights,
+  lineHeights,
   borders,
   radii,
   spacing
@@ -37,7 +38,8 @@ const Input = ({
       focus: colors.text.primary
     },
     size: fontSizes.small,
-    weight: fontWeights.regular
+    weight: fontWeights.regular,
+    lineHeight: lineHeights.small
   },
   border: {
     width: borders.small,
@@ -67,7 +69,11 @@ const Input = ({
         default: fontSizes.small,
         typed: fontSizes.xsmall
       },
-      weight: fontWeights.regular
+      weight: fontWeights.regular,
+      lineHeight: {
+        default: lineHeights.small,
+        typed: lineHeights.xsmall
+      }
     }
   },
   helper: {
@@ -79,7 +85,9 @@ const Input = ({
       top: spacing.xxxsmall
     },
     font: {
-      size: fontSizes.xsmall
+      size: fontSizes.xsmall,
+      weight: fontWeights.regular,
+      lineHeight: lineHeights.xsmall
     }
   }
 });

package/cjs/Input/native/Helper.js

@@ -53,13 +53,14 @@ const HelperWrapper = import_styled_components.default.View(
     margin-top: ${input.helper.margin.top}px;
   `
 );
-const Info = (0, import_styled_components.default)(import_Text.default.Regular)(
+const Info = (0, import_styled_components.default)(import_Text.default.Caption)(
   ({
     disabled,
     focused,
     error,
     theme: {
       yoga: {
+        baseFont,
         colors,
         components: { input }
       }
@@ -67,8 +68,8 @@ const Info = (0, import_styled_components.default)(import_Text.default.Regular)(
   }) => `
     flex-wrap: wrap;
 
+    font-family: ${baseFont.family};
     color: ${input.helper.color.default};
-    font-size: ${input.helper.font.size}px;
 
     ${disabled ? `color: ${colors.text.disabled};` : ""}
     ${focused ? `color: ${input.helper.color.focus};` : ""}

package/cjs/Input/native/Input.js

@@ -111,6 +111,8 @@ const Field = import_styled_components.default.TextInput(
     color: ${input.font.color.default};
     font-family: ${baseFont.family};
     font-size: ${input.font.size}px;
+    font-weight: ${input.font.weight};
+    line-height: ${input.font.lineHeight}px;
 
     ${focus ? `border-color: ${input.border.color.typed};` : ""}
     ${focus || typed ? `color: ${input.font.color.focus};` : ""}
@@ -157,6 +159,9 @@ const Label = (0, import_styled_components.default)(import_react_native.Animated
     background-color: ${colors.white};
 
     font-family: ${baseFont.family};
+    font-size: ${input.font.size}px;
+    font-weight: ${input.font.weight};
+    line-height: ${input.font.lineHeight}px;
     color: ${input.label.color.default};
 
     ${focus ? `

package/cjs/Input/web/Field.js

@@ -48,6 +48,7 @@ const labelTransition = import_styled_components.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;
   `}
 `;
 const Field = import_styled_components.default.input`
@@ -89,6 +90,7 @@ const Field = import_styled_components.default.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};
@@ -102,7 +104,6 @@ const Field = import_styled_components.default.input`
       & ~ label {
         ${labelTransition}
 
-        font-weight: ${input.label.font.weight};
         color: ${error ? `${colors.feedback.attention[1]}` : `${colors.text.primary}`};
       }
 

package/cjs/Input/web/Fieldset.js

@@ -65,13 +65,13 @@ const Fieldset = import_styled_components.default.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};
-      } 
+      }
     }
 
-    
+
   `}
 `;
 var Fieldset_default = Fieldset;

package/cjs/Input/web/Helper.js

@@ -73,17 +73,15 @@ const Wrapper = import_styled_components.default.div`
     ${disabled ? `color: ${colors.text.disabled};` : ""}
   `}
 `;
-const Info = (0, import_styled_components.default)(import_Text.default.Small)`
+const Info = (0, import_styled_components.default)(import_Text.default.Caption)`
   color: currentColor;
   ${({
   hideMaxLength,
   theme: {
-    yoga: {
-      components: { input }
-    }
+    yoga: { baseFont }
   }
 }) => `
-    font-size: ${input.helper.font.size}px;
+    font-family: ${baseFont.family};
 
     ${hideMaxLength ? "display: none;" : ""}
     `}

package/cjs/Input/web/Label.js

@@ -44,6 +44,7 @@ const Label = import_styled_components.default.label`
     yoga: {
       transition,
       colors,
+      baseFont,
       components: { input }
     }
   }
@@ -51,8 +52,10 @@ const Label = import_styled_components.default.label`
     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;

package/cjs/Input/web/Legend.js

@@ -70,18 +70,21 @@ const StyledLegend = import_styled_components.default.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;

package/cjs/Theme/theme/v3theme.js

@@ -251,6 +251,16 @@ const v3theme = (0, import_themeGenerator.default)((tokens) => ({
           small: tokens.lineHeights.xsmall
         }
       }
+    },
+    input: {
+      font: {
+        weight: tokens.fontWeights.medium
+      },
+      label: {
+        font: {
+          weight: tokens.fontWeights.medium
+        }
+      }
     }
   }
 }));

package/esm/Input/Input.theme.js

@@ -2,6 +2,7 @@ const Input = ({
   colors,
   fontSizes,
   fontWeights,
+  lineHeights,
   borders,
   radii,
   spacing
@@ -14,7 +15,8 @@ const Input = ({
       focus: colors.text.primary
     },
     size: fontSizes.small,
-    weight: fontWeights.regular
+    weight: fontWeights.regular,
+    lineHeight: lineHeights.small
   },
   border: {
     width: borders.small,
@@ -44,7 +46,11 @@ const Input = ({
         default: fontSizes.small,
         typed: fontSizes.xsmall
       },
-      weight: fontWeights.regular
+      weight: fontWeights.regular,
+      lineHeight: {
+        default: lineHeights.small,
+        typed: lineHeights.xsmall
+      }
     }
   },
   helper: {
@@ -56,7 +62,9 @@ const Input = ({
       top: spacing.xxxsmall
     },
     font: {
-      size: fontSizes.xsmall
+      size: fontSizes.xsmall,
+      weight: fontWeights.regular,
+      lineHeight: lineHeights.xsmall
     }
   }
 });

package/esm/Input/native/Helper.js

@@ -20,13 +20,14 @@ const HelperWrapper = styled.View(
     margin-top: ${input.helper.margin.top}px;
   `
 );
-const Info = styled(Text.Regular)(
+const Info = styled(Text.Caption)(
   ({
     disabled,
     focused,
     error,
     theme: {
       yoga: {
+        baseFont,
         colors,
         components: { input }
       }
@@ -34,8 +35,8 @@ const Info = styled(Text.Regular)(
   }) => `
     flex-wrap: wrap;
 
+    font-family: ${baseFont.family};
     color: ${input.helper.color.default};
-    font-size: ${input.helper.font.size}px;
 
     ${disabled ? `color: ${colors.text.disabled};` : ""}
     ${focused ? `color: ${input.helper.color.focus};` : ""}

package/esm/Input/native/Input.js

@@ -88,6 +88,8 @@ const Field = styled.TextInput(
     color: ${input.font.color.default};
     font-family: ${baseFont.family};
     font-size: ${input.font.size}px;
+    font-weight: ${input.font.weight};
+    line-height: ${input.font.lineHeight}px;
 
     ${focus ? `border-color: ${input.border.color.typed};` : ""}
     ${focus || typed ? `color: ${input.font.color.focus};` : ""}
@@ -134,6 +136,9 @@ const Label = styled(Animated.Text)(
     background-color: ${colors.white};
 
     font-family: ${baseFont.family};
+    font-size: ${input.font.size}px;
+    font-weight: ${input.font.weight};
+    line-height: ${input.font.lineHeight}px;
     color: ${input.label.color.default};
 
     ${focus ? `

package/esm/Input/web/Field.js

@@ -15,6 +15,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;
   `}
 `;
 const Field = styled.input`
@@ -56,6 +57,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};
@@ -69,7 +71,6 @@ const Field = styled.input`
       & ~ label {
         ${labelTransition}
 
-        font-weight: ${input.label.font.weight};
         color: ${error ? `${colors.feedback.attention[1]}` : `${colors.text.primary}`};
       }
 

package/esm/Input/web/Fieldset.js

@@ -32,13 +32,13 @@ 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};
-      } 
+      }
     }
 
-    
+
   `}
 `;
 var Fieldset_default = Fieldset;

package/esm/Input/web/Helper.js

@@ -41,17 +41,15 @@ const Wrapper = styled.div`
     ${disabled ? `color: ${colors.text.disabled};` : ""}
   `}
 `;
-const Info = styled(Text.Small)`
+const Info = styled(Text.Caption)`
   color: currentColor;
   ${({
   hideMaxLength,
   theme: {
-    yoga: {
-      components: { input }
-    }
+    yoga: { baseFont }
   }
 }) => `
-    font-size: ${input.helper.font.size}px;
+    font-family: ${baseFont.family};
 
     ${hideMaxLength ? "display: none;" : ""}
     `}

package/esm/Input/web/Label.js

@@ -11,6 +11,7 @@ const Label = styled.label`
     yoga: {
       transition,
       colors,
+      baseFont,
       components: { input }
     }
   }
@@ -18,8 +19,10 @@ const Label = styled.label`
     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;

package/esm/Input/web/Legend.js

@@ -39,18 +39,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;

package/esm/Theme/theme/v3theme.js

@@ -218,6 +218,16 @@ const v3theme = createTheme((tokens) => ({
           small: tokens.lineHeights.xsmall
         }
       }
+    },
+    input: {
+      font: {
+        weight: tokens.fontWeights.medium
+      },
+      label: {
+        font: {
+          weight: tokens.fontWeights.medium
+        }
+      }
     }
   }
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.110.3",
+  "version": "7.111.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -57,7 +57,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "ec752cff3e390d614b5d583326480b297e954dd0",
+  "gitHead": "2b021eb53a54d8efe7c309117b22d9cc42dc805f",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"