@gympass/yoga 7.105.0 → 7.106.0

package/esm/Text/textStyle.android.js

@@ -1,5 +1,8 @@
 import { css } from "styled-components";
 import defaultStyle from "./sharedTextStyle";
+const formatFontFamily = (fontFamily, fontWeight) => {
+  return fontWeight === 400 ? fontFamily : `${fontFamily}-${fontWeight}`;
+};
 const textStyle = (type) => () => css`
     ${defaultStyle(type)};
     ${({
@@ -8,26 +11,20 @@ const textStyle = (type) => () => css`
   theme: {
     yoga: {
       baseFont,
-      fontWeights,
-      components: {
-        text: {
-          [type]: { fontFamily, fontWeight }
-        }
-      }
+      components: { text }
     }
   }
 }) => {
-  let finalFontFamily;
-  if (fontFamily) {
-    finalFontFamily = `${fontFamily}-${fontWeight}`;
-  } else {
-    finalFontFamily = fontWeight === 400 ? baseFont.family : `${baseFont.family}-${fontWeight}`;
+  const fontFamily = text[type].fontFamily || baseFont.family;
+  let finalFontWeight = text[type].fontWeight;
+  if (light && text[`${type}-light`]) {
+    finalFontWeight = text[`${type}-light`].fontWeight;
+  }
+  if (bold && text[`${type}-bold`]) {
+    finalFontWeight = text[`${type}-bold`].fontWeight;
   }
   return css`
-        font-family: '${finalFontFamily}';
-
-        ${light ? `font-family: ${baseFont.family}-${fontWeights.light};` : ""}
-        ${bold ? `font-family: ${baseFont.family}-${fontWeights.bold};` : ""}
+        font-family: '${formatFontFamily(fontFamily, finalFontWeight)}';
       `;
 }}
   `;

package/esm/Text/textStyle.ios.js

@@ -8,21 +8,21 @@ const textStyle = (type) => () => css`
   theme: {
     yoga: {
       baseFont,
-      fontWeights,
-      components: {
-        text: {
-          [type]: { fontFamily, fontWeight }
-        }
-      }
+      components: { text }
     }
   }
 }) => {
-  const finalFontFamily = fontFamily || baseFont.family;
+  const fontFamily = text[type].fontFamily || baseFont.family;
+  let finalFontWeight = text[type].fontWeight;
+  if (light && text[`${type}-light`]) {
+    finalFontWeight = text[`${type}-light`].fontWeight;
+  }
+  if (bold && text[`${type}-bold`]) {
+    finalFontWeight = text[`${type}-bold`].fontWeight;
+  }
   return css`
-        font-family: ${finalFontFamily};
-        ${fontWeight ? `font-weight: ${fontWeight};` : ""}
-        ${light ? `font-weight: ${fontWeights.light};` : ""}
-        ${bold ? `font-weight: ${fontWeights.bold};` : ""}
+        font-family: ${fontFamily};
+        ${finalFontWeight ? `font-weight: ${finalFontWeight};` : ""}
       `;
 }}
   `;

package/esm/Text/textStyle.web.js

@@ -10,15 +10,18 @@ const textStyle = (type) => () => css`
   theme: {
     yoga: {
       baseFont,
-      fontWeights,
-      components: {
-        text: {
-          [type]: { fontFamily, fontWeight }
-        }
-      }
+      components: { text }
     }
   }
 }) => {
+  const themeFontFamily = text[type].fontFamily ? `${text[type].fontFamily}, ` : "";
+  let finalFontWeight = text[type].fontWeight;
+  if (light && text[`${type}-light`]) {
+    finalFontWeight = text[`${type}-light`].fontWeight;
+  }
+  if (bold && text[`${type}-bold`]) {
+    finalFontWeight = text[`${type}-bold`].fontWeight;
+  }
   return css`
         ${numberOfLines ? `
             display: -webkit-box;
@@ -27,10 +30,8 @@ const textStyle = (type) => () => css`
             overflow: hidden;
           ` : ""}
 
-        font-family: ${fontFamily ? `${fontFamily}, ` : ""}${baseFont.family};
-        ${fontWeight ? `font-weight: ${fontWeight};` : ""}
-        ${light ? `font-weight: ${fontWeights.light};` : ""}
-        ${bold ? `font-weight: ${fontWeights.bold};` : ""}
+        font-family: ${`${themeFontFamily}${baseFont.family}`};
+        ${finalFontWeight ? `font-weight: ${finalFontWeight};` : ""}
       `;
 }}
   `;

package/esm/Text/web/Text.test.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { render } from "@testing-library/react";
-import { ThemeProvider } from "../..";
 import { Text } from ".";
+import { ThemeProvider, v3theme } from "../..";
 describe("<Text />", () => {
   describe("Snapshots", () => {
     it("should match snapshot with Text", () => {
@@ -35,6 +35,36 @@ describe("<Text />", () => {
       );
       expect(container).toMatchSnapshot();
     });
+    it("should match snapshot with Text when v3theme is settled", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsxs(ThemeProvider, { theme: v3theme, children: [
+          /* @__PURE__ */ jsx(Text.Display1, { children: "Text Display1" }),
+          /* @__PURE__ */ jsx(Text.Display2, { children: "Text Display2" }),
+          /* @__PURE__ */ jsx(Text.Display3, { children: "Text Display3" }),
+          /* @__PURE__ */ jsx(Text.Display4, { children: "Text Display4" }),
+          /* @__PURE__ */ jsx(Text.DisplayNumber, { children: "Text DisplayNumber" }),
+          /* @__PURE__ */ jsx(Text.H1, { children: "Text H1" }),
+          /* @__PURE__ */ jsx(Text.H2, { children: "Text H2" }),
+          /* @__PURE__ */ jsx(Text.H3, { children: "Text H3" }),
+          /* @__PURE__ */ jsx(Text.H4, { children: "Text H4" }),
+          /* @__PURE__ */ jsx(Text.H5, { children: "Text H5" }),
+          /* @__PURE__ */ jsx(Text.Body1, { children: "Text Body1" }),
+          /* @__PURE__ */ jsx(Text.Body2, { children: "Text Body2" }),
+          /* @__PURE__ */ jsx(Text.Caption, { children: "Text Caption" }),
+          /* @__PURE__ */ jsx(Text.Overline, { children: "Text Overline" }),
+          /* @__PURE__ */ jsx(Text.SectionTitle, { children: "Text SectionTitle" }),
+          /* @__PURE__ */ jsx(Text.SmallestException, { children: "Text SmallestException" }),
+          /* @__PURE__ */ jsx(Text, { children: "Text" }),
+          /* @__PURE__ */ jsx(Text.Small, { children: "Text Small" }),
+          /* @__PURE__ */ jsx(Text.Tiny, { children: "Text Tiny" }),
+          /* @__PURE__ */ jsx(Text.Regular, { children: "Text Regular" }),
+          /* @__PURE__ */ jsx(Text.Medium, { children: "Text Medium" }),
+          /* @__PURE__ */ jsx(Text.Bold, { children: "Text Bold" }),
+          /* @__PURE__ */ jsx(Text.Black, { children: "Text Black" })
+        ] })
+      );
+      expect(container).toMatchSnapshot();
+    });
     it("should match snapshot with Text variant", () => {
       const { container } = render(
         /* @__PURE__ */ jsxs(ThemeProvider, { children: [

package/esm/Theme/theme/v3theme.js

@@ -49,7 +49,164 @@ const v3theme = createTheme((tokens) => ({
       backgroundAndDisabled: tokens.colors.clearNew
     }
   },
-  baseFont: tokens.fonts.inter
+  baseFont: tokens.fonts.inter,
+  components: {
+    text: {
+      display1: {
+        fontFamily: "NaN Holo Condensed",
+        fontsize: tokens.fontSizes.xhuge,
+        fontWeight: tokens.fontWeights.bold,
+        lineHeight: tokens.lineHeights.xhuge
+      },
+      display2: {
+        fontFamily: "NaN Holo Condensed",
+        fontsize: tokens.fontSizes.xxxlarge,
+        fontWeight: tokens.fontWeights.bold,
+        lineHeight: tokens.lineHeights.xxlarge
+      },
+      display3: {
+        fontFamily: "NaN Holo Condensed",
+        fontsize: tokens.fontSizes.xxlarge,
+        fontWeight: tokens.fontWeights.bold,
+        lineHeight: tokens.lineHeights.xlarge
+      },
+      display4: {
+        fontFamily: "NaN Holo Condensed",
+        fontsize: tokens.fontSizes.xlarge,
+        fontWeight: tokens.fontWeights.bold,
+        lineHeight: tokens.lineHeights.medium
+      },
+      displayNumber: {
+        fontFamily: "NaN Holo Condensed",
+        fontsize: tokens.fontSizes.xxxlarge,
+        fontWeight: tokens.fontWeights.bold,
+        lineHeight: tokens.lineHeights.xxlarge
+      },
+      h1: {
+        fontsize: tokens.fontSizes.huge,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.huge
+      },
+      "h1-light": null,
+      "h1-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      h2: {
+        fontsize: tokens.fontSizes.xxxlarge,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.xxxlarge
+      },
+      "h2-light": null,
+      "h2-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      h3: {
+        fontsize: tokens.fontSizes.xxlarge,
+        lineHeight: tokens.lineHeights.xxlarge,
+        fontWeight: tokens.fontWeights.medium
+      },
+      "h3-light": null,
+      "h3-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      h4: {
+        fontsize: tokens.fontSizes.xlarge,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.xlarge
+      },
+      "h4-light": null,
+      "h4-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      h5: {
+        fontsize: tokens.fontSizes.large,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.large
+      },
+      "h5-light": null,
+      "h5-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      body1: {
+        fontsize: tokens.fontSizes.medium,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.medium
+      },
+      "body1-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      body2: {
+        fontsize: tokens.fontSizes.small,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.small
+      },
+      "body2-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      caption: {
+        fontsize: tokens.fontSizes.xsmall,
+        fontWeight: tokens.fontWeights.regular,
+        lineHeight: tokens.lineHeights.xsmall
+      },
+      overline: {
+        fontsize: tokens.fontSizes.xsmall,
+        fontWeight: tokens.fontWeights.bold,
+        lineHeight: tokens.lineHeights.xsmall
+      },
+      sectionTitle: {
+        fontsize: tokens.fontSizes.xsmall,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.xsmall,
+        letterSpacing: 1,
+        textTransform: "uppercase"
+      },
+      smallestException: {
+        fontsize: tokens.fontSizes.xxsmall,
+        fontWeight: tokens.fontWeights.regular,
+        lineHeight: tokens.lineHeights.xxsmall
+      },
+      // deprecated, please don't use
+      p: {
+        fontsize: tokens.fontSizes.medium,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.medium
+      },
+      "p-light": null,
+      "p-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      small: {
+        fontsize: tokens.fontSizes.small,
+        fontWeight: tokens.fontWeights.medium,
+        lineHeight: tokens.lineHeights.small
+      },
+      "small-light": null,
+      "small-bold": {
+        fontWeight: tokens.fontWeights.bold
+      },
+      tiny: {
+        fontsize: tokens.fontSizes.xsmall,
+        fontWeight: tokens.fontWeights.regular,
+        lineHeight: tokens.lineHeights.xsmall
+      },
+      "tiny-light": null,
+      light: {
+        fontWeight: tokens.fontWeights.light
+      },
+      regular: {
+        fontWeight: tokens.fontWeights.regular
+      },
+      medium: {
+        fontWeight: tokens.fontWeights.medium
+      },
+      bold: {
+        fontWeight: tokens.fontWeights.bold
+      },
+      black: {
+        fontWeight: tokens.fontWeights.black
+      }
+    }
+  }
 }));
 export {
   v3theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.105.0",
+  "version": "7.106.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": "6190e4f67b4d9ac5a78d43e3fecd6c6d09ddc649",
+  "gitHead": "22aaf247b6ebdfa5b26898a21afbfddb3e604445",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"