@jobber/components-native 0.77.0 → 0.78.0

package/dist/src/Typography/Typography.js

@@ -1,9 +1,9 @@
 import React from "react";
 import { I18nManager, StyleSheet, Text, } from "react-native";
 import { TypographyGestureDetector } from "./TypographyGestureDetector";
-import { typographyStyles as styles } from "./Typography.style";
-import { tokens } from "../utils/design";
+import { useTypographyStyles } from "./Typography.style";
 import { capitalize } from "../utils/intl";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 const maxNumberOfLines = {
     single: 1,
     small: 2,
@@ -14,14 +14,15 @@ const maxNumberOfLines = {
 };
 export const Typography = React.memo(InternalTypography);
 // eslint-disable-next-line max-statements
-function InternalTypography({ fontFamily, fontStyle, fontWeight, transform, color, align, size = "default", children, maxLines = "unlimited", allowFontScaling = true, maxFontScaleSize, adjustsFontSizeToFit = false, lineHeight, letterSpacing, reverseTheme = false, hideFromScreenReader = false, accessibilityRole = "text", strikeThrough = false, underline, UNSAFE_style, selectable = true, }) {
-    const sizeAndHeight = getSizeAndHeightStyle(size, lineHeight);
+function InternalTypography({ fontFamily, fontStyle, fontWeight, transform, color, align, size = "default", children, maxLines = "unlimited", allowFontScaling = true, maxFontScaleSize, adjustsFontSizeToFit = false, lineHeight, letterSpacing = "base", reverseTheme = false, hideFromScreenReader = false, accessibilityRole = "text", strikeThrough = false, underline, UNSAFE_style, selectable = true, }) {
+    const styles = useTypographyStyles();
+    const sizeAndHeight = getSizeAndHeightStyle(size, styles, lineHeight);
     const style = [
-        getFontStyle(fontFamily, fontStyle, fontWeight),
-        getColorStyle(color, reverseTheme),
-        getAlignStyle(align),
+        getFontStyle(fontFamily, fontStyle, fontWeight, styles),
+        getColorStyle(styles, color, reverseTheme),
+        getAlignStyle(styles, align),
         sizeAndHeight,
-        getLetterSpacingStyle(letterSpacing),
+        getLetterSpacingStyle(letterSpacing, styles),
     ];
     if (strikeThrough) {
         style.push(styles.strikeThrough);
@@ -45,6 +46,7 @@ function InternalTypography({ fontFamily, fontStyle, fontWeight, transform, colo
             importantForAccessibility: "no-hide-descendants",
         }
         : { accessibilityRole };
+    const { tokens } = useAtlantisTheme();
     return (React.createElement(TypographyGestureDetector, null,
         React.createElement(Text, Object.assign({ allowFontScaling,
             adjustsFontSizeToFit,
@@ -56,7 +58,7 @@ function getScaleMultiplier(maxFontScaleSize = 0, size = 1) {
         return undefined;
     return maxFontScaleSize / size;
 }
-function getFontStyle(fontFamily = "base", fontStyle = "regular", fontWeight = "regular") {
+function getFontStyle(fontFamily = "base", fontStyle = "regular", fontWeight = "regular", styles) {
     const defaultBaseFontStyling = styles.baseRegularRegular;
     const defaultDisplayFontStyling = styles.displayRegularBold;
     const styleKey = `${fontFamily}${capitalize(fontStyle)}${capitalize(fontWeight)}`;
@@ -82,17 +84,17 @@ function getTransformedText(text, transform) {
             return text;
     }
 }
-function getColorStyle(color, reverseTheme) {
+function getColorStyle(styles, color, reverseTheme) {
     if (color === "default" || !color) {
         return styles.greyBlue;
     }
     const colorStyleKey = `${color}${reverseTheme ? "Reverse" : ""}`;
     return styles[`${colorStyleKey}`];
 }
-function getAlignStyle(alignStyle = I18nManager.isRTL ? "end" : "start") {
+function getAlignStyle(styles, alignStyle = I18nManager.isRTL ? "end" : "start") {
     return styles[`${alignStyle}Align`];
 }
-function getSizeAndHeightStyle(textSize, lineHeightOverwrite) {
+function getSizeAndHeightStyle(textSize, styles, lineHeightOverwrite) {
     const fontSize = styles[`${textSize}Size`];
     if (lineHeightOverwrite) {
         const lineHeight = styles[`${lineHeightOverwrite}LineHeight`];
@@ -100,6 +102,6 @@ function getSizeAndHeightStyle(textSize, lineHeightOverwrite) {
     }
     return fontSize;
 }
-function getLetterSpacingStyle(letterSpacing = "base") {
+function getLetterSpacingStyle(letterSpacing, styles) {
     return styles[`${letterSpacing}LetterSpacing`];
 }

package/dist/src/Typography/Typography.style.js

@@ -1,14 +1,15 @@
 import { Platform, StyleSheet } from "react-native";
 import { webFonts } from "./webFonts";
-import { tokens } from "../utils/design";
-const extravagantLineHeight = tokens["typography--lineHeight-extravagant"];
-const jumboLineHeight = tokens["typography--lineHeight-jumbo"];
-const largestLineHeight = tokens["typography--lineHeight-largest"];
-const largerLineHeight = tokens["typography--lineHeight-larger"];
-const largeLineHeight = tokens["typography--lineHeight-large"];
-const baseLineHeight = tokens["typography--lineHeight-base"];
-const tightLineHeight = tokens["typography--lineHeight-tight"];
-const minusculeLineHeight = tokens["typography--lineHeight-minuscule"];
+import { tokens as staticTokens } from "../utils/design";
+import { buildThemedStyles, } from "../AtlantisThemeContext";
+const extravagantLineHeight = staticTokens["typography--lineHeight-extravagant"];
+const jumboLineHeight = staticTokens["typography--lineHeight-jumbo"];
+const largestLineHeight = staticTokens["typography--lineHeight-largest"];
+const largerLineHeight = staticTokens["typography--lineHeight-larger"];
+const largeLineHeight = staticTokens["typography--lineHeight-large"];
+const baseLineHeight = staticTokens["typography--lineHeight-base"];
+const tightLineHeight = staticTokens["typography--lineHeight-tight"];
+const minusculeLineHeight = staticTokens["typography--lineHeight-minuscule"];
 const deviceFonts = {
     baseRegularRegular: {
         fontFamily: "inter-regular",
@@ -61,9 +62,9 @@ const fonts = Platform.select({
     default: deviceFonts,
 });
 /**
- * Reusable typography tokens to ensure consistency for any client facing texts.
+ * Reusable typography styles to ensure consistency for any client facing texts.
  */
-export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic: {
+export const getTypographyStyles = (tokens) => (Object.assign(Object.assign({}, fonts), { italic: {
         fontStyle: "italic",
     }, underline: {
         textDecorationColor: tokens["color-text--secondary"],
@@ -351,15 +352,9 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic
         letterSpacing: tokens["typography--letterSpacing-loose"],
     }, strikeThrough: {
         textDecorationLine: "line-through",
-    } });
+    } }));
 /**
- * `StyleSheet` for Typography.tsx.
- *
- * If you find yourself needing to use what's inside this object on files other
- * than `<Typography />`, please import from `@jobber/components-native` instead.
- *
- * ```
- * import { typographyStyles } from "@jobber/components-native"
- * ```
+ * @deprecated Use useTypographyStyles instead
  */
-export const typographyStyles = StyleSheet.create(typographyTokens);
+export const typographyStyles = StyleSheet.create(getTypographyStyles(staticTokens));
+export const useTypographyStyles = buildThemedStyles(getTypographyStyles);

package/dist/src/Typography/index.js

@@ -1,3 +1,4 @@
 export { Typography } from "./Typography";
+export { getTypographyStyles, useTypographyStyles } from "./Typography.style";
 export { typographyStyles } from "./Typography.style";
 export { TypographyGestureDetector } from "./TypographyGestureDetector";