@jobber/components-native 0.75.3-POC-fixing-b57471f.136 → 0.75.3-POC-fixing-ffcd368.137

package/src/Typography/Typography.tsx

@@ -10,9 +10,9 @@ import {
   ViewStyle,
 } 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";
 
 export interface TypographyProps<T extends FontFamily>
   extends Pick<TextProps, "selectable"> {
@@ -118,6 +118,8 @@ export interface TypographyProps<T extends FontFamily>
    * Have text styled with strike through
    */
   readonly strikeThrough?: boolean;
+
+  readonly UNSAFE_style?: TypographyUnsafeStyle;
 }
 
 const maxNumberOfLines = {
@@ -129,6 +131,10 @@ const maxNumberOfLines = {
   unlimited: undefined,
 };
 
+export interface TypographyUnsafeStyle {
+  textStyle?: StyleProp<TextStyle>;
+}
+
 export const Typography = React.memo(InternalTypography);
 
 // eslint-disable-next-line max-statements
@@ -146,21 +152,23 @@ function InternalTypography<T extends FontFamily = "base">({
   maxFontScaleSize,
   adjustsFontSizeToFit = false,
   lineHeight,
-  letterSpacing,
+  letterSpacing = "base",
   reverseTheme = false,
   hideFromScreenReader = false,
   accessibilityRole = "text",
   strikeThrough = false,
   underline,
+  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) {
@@ -176,6 +184,10 @@ function InternalTypography<T extends FontFamily = "base">({
     style.push(underlineTextStyle, styles.underline);
   }
 
+  if (UNSAFE_style?.textStyle) {
+    style.push(UNSAFE_style.textStyle);
+  }
+
   const numberOfLinesForNativeText = maxNumberOfLines[maxLines];
 
   const text = getTransformedText(children, transform);
@@ -187,6 +199,8 @@ function InternalTypography<T extends FontFamily = "base">({
       }
     : { accessibilityRole };
 
+  const { tokens } = useAtlantisTheme();
+
   return (
     <TypographyGestureDetector>
       <Text
@@ -220,6 +234,7 @@ function getFontStyle(
   fontFamily: FontFamily = "base",
   fontStyle: FontStyle = "regular",
   fontWeight: FontWeight = "regular",
+  styles: ReturnType<typeof useTypographyStyles>,
 ) {
   const defaultBaseFontStyling = styles.baseRegularRegular;
   const defaultDisplayFontStyling = styles.displayRegularBold;
@@ -250,7 +265,11 @@ function getTransformedText(text?: string, transform?: TextTransform) {
   }
 }
 
-function getColorStyle(color?: TextColor, reverseTheme?: boolean) {
+function getColorStyle(
+  styles: ReturnType<typeof useTypographyStyles>,
+  color?: TextColor,
+  reverseTheme?: boolean,
+) {
   if (color === "default" || !color) {
     return styles.greyBlue;
   }
@@ -260,6 +279,7 @@ function getColorStyle(color?: TextColor, reverseTheme?: boolean) {
 }
 
 function getAlignStyle(
+  styles: ReturnType<typeof useTypographyStyles>,
   alignStyle: TextAlign = I18nManager.isRTL ? "end" : "start",
 ) {
   return styles[`${alignStyle}Align`];
@@ -267,6 +287,7 @@ function getAlignStyle(
 
 function getSizeAndHeightStyle(
   textSize: TextSize,
+  styles: ReturnType<typeof useTypographyStyles>,
   lineHeightOverwrite?: LineHeight,
 ) {
   const fontSize = styles[`${textSize}Size`];
@@ -280,7 +301,10 @@ function getSizeAndHeightStyle(
   return fontSize;
 }
 
-function getLetterSpacingStyle(letterSpacing: LetterSpacing = "base") {
+function getLetterSpacingStyle(
+  letterSpacing: LetterSpacing,
+  styles: ReturnType<typeof useTypographyStyles>,
+) {
   return styles[`${letterSpacing}LetterSpacing`];
 }
 

package/src/Typography/__snapshots__/Typography.test.tsx.snap

@@ -14,7 +14,7 @@ exports[`renders text respecting the text direction 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "right",
@@ -48,7 +48,7 @@ exports[`renders text using the maxLines is also passed 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -82,7 +82,7 @@ exports[`renders text with adjustsFontSizeToFit set to true 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -115,7 +115,7 @@ exports[`renders text with black style and display as fontFamily 1`] = `
         "fontFamily": "jobberpro-blk",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -148,7 +148,7 @@ exports[`renders text with bold style 1`] = `
         "fontFamily": "inter-bold",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -181,7 +181,7 @@ exports[`renders text with bold style and display as fontFamily 1`] = `
         "fontFamily": "jobberpro-bd",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -214,7 +214,7 @@ exports[`renders text with bold weight and italic style 1`] = `
         "fontFamily": "inter-italic-bold",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -250,7 +250,7 @@ exports[`renders text with center align 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "center",
@@ -283,7 +283,7 @@ exports[`renders text with default color 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -316,7 +316,7 @@ exports[`renders text with default size 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -349,7 +349,7 @@ exports[`renders text with extraBold weight and display as fontFamily 1`] = `
         "fontFamily": "jobberpro-xbd",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -415,7 +415,7 @@ exports[`renders text with italic style 1`] = `
         "fontFamily": "inter-italic",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -451,7 +451,7 @@ exports[`renders text with large size 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -484,7 +484,7 @@ exports[`renders text with letter spacing 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -517,7 +517,7 @@ exports[`renders text with line height override 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -550,7 +550,7 @@ exports[`renders text with lowercase transform 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -616,7 +616,7 @@ exports[`renders text with no additional props 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -649,7 +649,7 @@ exports[`renders text with regular style 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -781,7 +781,7 @@ exports[`renders text with small size 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -814,7 +814,7 @@ exports[`renders text with strikethough styling 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -850,7 +850,7 @@ exports[`renders text with uppercase transform 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -916,7 +916,7 @@ exports[`underline renders text with dashed underline 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -932,7 +932,7 @@ exports[`underline renders text with dashed underline 1`] = `
         "textDecorationStyle": "dashed",
       },
       {
-        "textDecorationColor": "hsl(197, 15%, 45%)",
+        "textDecorationColor": "hsl(197, 15%, 43%)",
         "textDecorationLine": "underline",
       },
     ]
@@ -956,7 +956,7 @@ exports[`underline renders text with dotted underline 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -972,7 +972,7 @@ exports[`underline renders text with dotted underline 1`] = `
         "textDecorationStyle": "dotted",
       },
       {
-        "textDecorationColor": "hsl(197, 15%, 45%)",
+        "textDecorationColor": "hsl(197, 15%, 43%)",
         "textDecorationLine": "underline",
       },
     ]
@@ -996,7 +996,7 @@ exports[`underline renders text with double underline 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -1012,7 +1012,7 @@ exports[`underline renders text with double underline 1`] = `
         "textDecorationStyle": "double",
       },
       {
-        "textDecorationColor": "hsl(197, 15%, 45%)",
+        "textDecorationColor": "hsl(197, 15%, 43%)",
         "textDecorationLine": "underline",
       },
     ]
@@ -1036,7 +1036,7 @@ exports[`underline renders text with solid underline 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -1052,7 +1052,7 @@ exports[`underline renders text with solid underline 1`] = `
         "textDecorationStyle": "solid",
       },
       {
-        "textDecorationColor": "hsl(197, 15%, 45%)",
+        "textDecorationColor": "hsl(197, 15%, 43%)",
         "textDecorationLine": "underline",
       },
     ]

package/src/Typography/index.ts

@@ -18,5 +18,6 @@ export type {
   TypographyProps,
   TruncateLength,
 } from "./Typography";
+export { getTypographyStyles, useTypographyStyles } from "./Typography.style";
 export { typographyStyles } from "./Typography.style";
 export { TypographyGestureDetector } from "./TypographyGestureDetector";

package/src/index.ts

@@ -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/src/utils/design/index.ts

@@ -1,6 +1,11 @@
 import { Platform } from "react-native";
 import { androidTokens, iosTokens } from "@jobber/design";
 
+/**
+ * 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/InputText/context/InputAccessory.style.js

@@ -1,16 +0,0 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../utils/design";
-export const styles = StyleSheet.create({
-    container: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingHorizontal: tokens["space-small"],
-        backgroundColor: tokens["color-surface--background"],
-        borderTopWidth: tokens["space-minuscule"],
-        borderTopColor: tokens["color-border"],
-    },
-    buttonContainer: {
-        flexDirection: "row",
-    },
-});

package/dist/types/src/InputText/context/InputAccessory.style.d.ts

@@ -1,14 +0,0 @@
-export declare const styles: {
-    container: {
-        flexDirection: "row";
-        justifyContent: "space-between";
-        alignItems: "center";
-        paddingHorizontal: number;
-        backgroundColor: string;
-        borderTopWidth: number;
-        borderTopColor: string;
-    };
-    buttonContainer: {
-        flexDirection: "row";
-    };
-};