@jobber/components-native 0.76.1-JOB-116234-d279b0f.20 → 0.76.1-JOB-116234-63c4467.27

package/src/Typography/Typography.tsx

@@ -10,7 +10,7 @@ import {
   ViewStyle,
 } from "react-native";
 import { TypographyGestureDetector } from "./TypographyGestureDetector";
-import { typographyStyles as styles } from "./Typography.style";
+import { useTypographyStyles } from "./Typography.style";
 import { capitalize } from "../utils/intl";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 
@@ -161,13 +161,14 @@ function InternalTypography<T extends FontFamily = "base">({
   UNSAFE_style,
   selectable = true,
 }: TypographyProps<T>): JSX.Element {
-  const sizeAndHeight = getSizeAndHeightStyle(size, lineHeight);
+  const styles = useTypographyStyles();
+  const sizeAndHeight = getSizeAndHeightStyle(size, styles, lineHeight);
   const style: StyleProp<ViewStyle>[] = [
-    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) {
@@ -233,6 +234,7 @@ function getFontStyle(
   fontFamily: FontFamily = "base",
   fontStyle: FontStyle = "regular",
   fontWeight: FontWeight = "regular",
+  styles: Record<string, TextStyle>,
 ) {
   const defaultBaseFontStyling = styles.baseRegularRegular;
   const defaultDisplayFontStyling = styles.displayRegularBold;
@@ -263,7 +265,11 @@ function getTransformedText(text?: string, transform?: TextTransform) {
   }
 }
 
-function getColorStyle(color?: TextColor, reverseTheme?: boolean) {
+function getColorStyle(
+  styles: Record<string, TextStyle>,
+  color?: TextColor,
+  reverseTheme?: boolean,
+) {
   if (color === "default" || !color) {
     return styles.greyBlue;
   }
@@ -273,6 +279,7 @@ function getColorStyle(color?: TextColor, reverseTheme?: boolean) {
 }
 
 function getAlignStyle(
+  styles: Record<string, TextStyle>,
   alignStyle: TextAlign = I18nManager.isRTL ? "end" : "start",
 ) {
   return styles[`${alignStyle}Align`];
@@ -280,6 +287,7 @@ function getAlignStyle(
 
 function getSizeAndHeightStyle(
   textSize: TextSize,
+  styles: Record<string, TextStyle>,
   lineHeightOverwrite?: LineHeight,
 ) {
   const fontSize = styles[`${textSize}Size`];
@@ -293,7 +301,10 @@ function getSizeAndHeightStyle(
   return fontSize;
 }
 
-function getLetterSpacingStyle(letterSpacing: LetterSpacing = "base") {
+function getLetterSpacingStyle(
+  letterSpacing: LetterSpacing = "base",
+  styles: Record<string, TextStyle>,
+) {
   return styles[`${letterSpacing}LetterSpacing`];
 }
 

package/src/utils/design/index.ts

@@ -1,8 +1,11 @@
 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?
+/**
+ * These design tokens don't react to theme changes. Only use these if you need to access
+ * tokens that are not affected by the current theme, otherwise you should be using our
+ * useAtlantisTheme() hook to access the current theme's tokens.
+ */
 export const tokens: typeof iosTokens = Platform.select({
   ios: () => iosTokens,
   android: () => androidTokens,

package/src/utils/meta/meta.json

@@ -8,6 +8,7 @@
     "AtlantisContext.Provider",
     "AtlantisFormContext.Consumer",
     "AtlantisFormContext.Provider",
+    "AtlantisThemeContextProvider",
     "AutoLink",
     "Banner",
     "BottomSheet",

package/dist/src/Flex/Flex.gap.styles.js

@@ -1,9 +0,0 @@
-import { spacing } from "./types";
-import { buildThemedStyles } from "../AtlantisThemeContext";
-export const useGapStyles = buildThemedStyles(tokens => spacing.reduce((gapObj, space) => {
-    let paddingLeft = 0;
-    if (space !== "none")
-        paddingLeft = tokens[`space-${space}`];
-    gapObj[space] = { paddingLeft };
-    return gapObj;
-}, {}));

package/dist/types/src/Flex/Flex.gap.styles.d.ts

@@ -1,2 +0,0 @@
-import { ViewStyle } from "react-native";
-export declare const useGapStyles: () => Record<"small" | "base" | "none" | "smallest" | "smaller" | "large", ViewStyle>;

package/src/Flex/Flex.gap.styles.tsx

@@ -1,14 +0,0 @@
-import { ViewStyle } from "react-native";
-import { Spacing, spacing } from "./types";
-import { buildThemedStyles } from "../AtlantisThemeContext";
-
-export const useGapStyles = buildThemedStyles(tokens =>
-  spacing.reduce((gapObj, space) => {
-    let paddingLeft = 0;
-    if (space !== "none") paddingLeft = tokens[`space-${space}`];
-
-    gapObj[space] = { paddingLeft };
-
-    return gapObj;
-  }, {} as Record<Spacing, ViewStyle>),
-);