@jobber/components-native 0.76.0 → 0.76.1-JOB-116234-d279b0f.20

package/dist/src/Toast/Toast.styles.js

@@ -1,30 +1,31 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    container: {
-        flexDirection: "row",
-        paddingHorizontal: tokens["space-base"],
-        paddingBottom: tokens["space-base"],
-    },
-    toast: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        width: "100%",
-        maxWidth: 540,
-        paddingVertical: tokens["space-small"],
-        backgroundColor: tokens["color-blue"],
-        borderRadius: 6,
-        shadowOffset: { width: 0, height: 0 },
-        shadowOpacity: 0.1,
-        shadowRadius: 6,
-    },
-    toastMessage: {
-        justifyContent: "center",
-        paddingLeft: tokens["space-base"],
-        paddingVertical: tokens["space-small"],
-        flexShrink: 1,
-    },
-    toastIcon: {
-        justifyContent: "center",
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            flexDirection: "row",
+            paddingHorizontal: tokens["space-base"],
+            paddingBottom: tokens["space-base"],
+        },
+        toast: {
+            flexDirection: "row",
+            justifyContent: "space-between",
+            width: "100%",
+            maxWidth: 540,
+            paddingVertical: tokens["space-small"],
+            backgroundColor: tokens["color-blue"],
+            borderRadius: 6,
+            shadowOffset: { width: 0, height: 0 },
+            shadowOpacity: 0.1,
+            shadowRadius: 6,
+        },
+        toastMessage: {
+            justifyContent: "center",
+            paddingLeft: tokens["space-base"],
+            paddingVertical: tokens["space-small"],
+            flexShrink: 1,
+        },
+        toastIcon: {
+            justifyContent: "center",
+        },
+    };
 });

package/dist/src/Typography/Typography.js

@@ -2,8 +2,8 @@ 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 { capitalize } from "../utils/intl";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 const maxNumberOfLines = {
     single: 1,
     small: 2,
@@ -45,6 +45,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,

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",
@@ -63,7 +64,7 @@ const fonts = Platform.select({
 /**
  * Reusable typography tokens to ensure consistency for any client facing texts.
  */
-export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic: {
+export const createTypographyTokens = (tokens) => (Object.assign(Object.assign({}, fonts), { italic: {
         fontStyle: "italic",
     }, underline: {
         textDecorationColor: tokens["color-text--secondary"],
@@ -351,7 +352,7 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic
         letterSpacing: tokens["typography--letterSpacing-loose"],
     }, strikeThrough: {
         textDecorationLine: "line-through",
-    } });
+    } }));
 /**
  * `StyleSheet` for Typography.tsx.
  *
@@ -362,4 +363,5 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic
  * import { typographyStyles } from "@jobber/components-native"
  * ```
  */
-export const typographyStyles = StyleSheet.create(typographyTokens);
+export const typographyStyles = StyleSheet.create(createTypographyTokens(staticTokens));
+export const useTypographyStyles = buildThemedStyles(createTypographyTokens);

package/dist/src/Typography/index.js

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

package/dist/src/index.js

@@ -2,6 +2,7 @@ export * from "./ActionItem";
 export * from "./ActionLabel";
 export * from "./ActivityIndicator";
 export * from "./AtlantisContext";
+export * from "./AtlantisThemeContext";
 export * from "./AutoLink";
 export * from "./Banner";
 export * from "./BottomSheet";

package/dist/src/utils/design/index.js

@@ -1,5 +1,7 @@
 import { Platform } from "react-native";
 import { androidTokens, iosTokens } from "@jobber/design";
+// TODO: remove all references to const in JM and Atlantis. Replace with useAtlantisTheme.
+// Rename to `nonThemedTokens` in the meantime?
 export const tokens = Platform.select({
     ios: () => iosTokens,
     android: () => androidTokens,