@jobber/components-native 0.114.9 → 0.114.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.114.9",
+  "version": "0.114.11",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -73,7 +73,7 @@
   "devDependencies": {
     "@babel/runtime": "^7.29.2",
     "@gorhom/bottom-sheet": "^5.2.8",
-    "@jobber/design": "0.117.1",
+    "@jobber/design": "0.118.1",
     "@jobber/hooks": "2.21.1",
     "@react-native-community/datetimepicker": "^8.4.5",
     "@react-native/babel-preset": "^0.82.1",
@@ -123,5 +123,5 @@
     "react-native-screens": ">=4.18.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "03a318392b77ae6bb66564ec8bc82416f0cb8da7"
+  "gitHead": "1f2ce0a2e21335640daf4d7fa36cc2630e7858c7"
 }

package/src/Banner/components/BannerIcon/BannerIcon.tsx

@@ -15,7 +15,7 @@ export function BannerIcon({ icon, type }: BannerIconProps) {
 
   return (
     <View style={[styles.bannerIcon, styles[type]]} testID="ATL-Banner-Icon">
-      <Icon name={icon} color="white" size="small" />
+      <Icon name={icon} color="surface" size="small" />
     </View>
   );
 }

package/src/Button/Button.tsx

@@ -153,7 +153,7 @@ export function Button({
       accessibilityRole="button"
       accessibilityState={{ disabled, busy: loading }}
       disabled={disabled || loading}
-      underlayColor={tokens["color-greyBlue--dark"]}
+      underlayColor={tokens["color-interactive--subtle"]}
       activeOpacity={tokens["opacity-pressed"]}
       style={[
         styles.touchable,

package/src/Disclosure/Disclosure.tsx

@@ -114,7 +114,7 @@ function DisclosureHeader({
         {header}
         {!isEmpty && (
           <ReanimatedView style={[animatedStyle]}>
-            <Icon name={"arrowUp"} color="grey" />
+            <Icon name={"arrowUp"} color="iconSecondary" />
           </ReanimatedView>
         )}
       </View>

package/src/EmptyState/EmptyState.test.tsx

@@ -3,6 +3,7 @@ import { fireEvent, render, screen } from "@testing-library/react-native";
 import { Path } from "react-native-svg";
 import type { EmptyStateProps } from "./EmptyState";
 import { EmptyState } from "./EmptyState";
+import { tokens } from "../utils/design";
 
 const primaryOnPress = jest.fn();
 const secondaryOnPress = jest.fn();
@@ -47,7 +48,7 @@ describe("EmptyState", () => {
     component();
     const icon = screen.getByTestId(defaultProps.icon);
     const path = icon.findByType(Path);
-    expect(path.props.fill).toBe("hsl(197, 90%, 12%)");
+    expect(path.props.fill).toBe(tokens["color-icon"]);
     expect(icon.props.style).toEqual(
       expect.arrayContaining([
         expect.objectContaining({

package/src/EmptyState/EmptyState.tsx

@@ -64,7 +64,7 @@ export function EmptyState({
   description,
   primaryAction,
   secondaryAction,
-  iconColor = "blue",
+  iconColor = "icon",
 }: EmptyStateProps) {
   const styles = useStyles();
 

package/src/FormatFile/components/ProgressBar/ProgressBar.style.tsx

@@ -11,7 +11,7 @@ export const useStyles = buildThemedStyles(tokens => {
     },
     progress: {
       height: "100%",
-      backgroundColor: tokens["color-green"],
+      backgroundColor: tokens["color-interactive"],
     },
   };
 });

package/src/InputFieldWrapper/components/Prefix/Prefix.tsx

@@ -96,7 +96,9 @@ export function PrefixIcon({
       <View style={styles.prefixIcon}>
         <Icon
           customColor={
-            disabled ? tokens["color-disabled"] : tokens["color-greyBlue"]
+            disabled
+              ? tokens["color-disabled"]
+              : tokens["color-icon--secondary"]
           }
           name={icon}
         />

package/src/InputFieldWrapper/components/Suffix/Suffix.tsx

@@ -105,7 +105,9 @@ export function SuffixIcon({
       >
         <Icon
           customColor={
-            disabled ? tokens["color-disabled"] : tokens["color-greyBlue"]
+            disabled
+              ? tokens["color-disabled"]
+              : tokens["color-icon--secondary"]
           }
           name={icon}
         />

package/src/Switch/components/BaseSwitch/BaseSwitch.tsx

@@ -72,7 +72,7 @@ export function BaseSwitch({
       return {
         true: disabled
           ? tokens["color-disabled--secondary"]
-          : tokens["color-green--lighter"],
+          : tokens["color-surface"],
         false: disabled
           ? tokens["color-disabled--secondary"]
           : tokens["color-disabled"],

package/src/Typography/Typography.tsx

@@ -308,7 +308,7 @@ function getColorStyle(
   reverseTheme?: boolean,
 ) {
   if (color === "default" || !color) {
-    return styles.greyBlue;
+    return styles.text;
   }
   const colorStyleKey = `${color}${reverseTheme ? "Reverse" : ""}`;
 

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

@@ -14,7 +14,7 @@ exports[`allows child Typography to control its own transform 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -43,7 +43,7 @@ exports[`allows child Typography to control its own transform 1`] = `
           "fontFamily": "inter-bold",
         },
         {
-          "color": "hsl(197, 15%, 43%)",
+          "color": "hsl(198, 35%, 21%)",
         },
         {
           "textAlign": "left",
@@ -78,7 +78,7 @@ exports[`renders text respecting the text direction 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "right",
@@ -112,7 +112,7 @@ exports[`renders text using the maxLines is also passed 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -146,7 +146,7 @@ exports[`renders text with adjustsFontSizeToFit set to true 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -179,7 +179,7 @@ exports[`renders text with black style and display as fontFamily 1`] = `
         "fontFamily": "jobberpro-blk",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -212,7 +212,7 @@ exports[`renders text with bold style 1`] = `
         "fontFamily": "inter-bold",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -245,7 +245,7 @@ exports[`renders text with bold style and display as fontFamily 1`] = `
         "fontFamily": "jobberpro-bd",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -278,7 +278,7 @@ exports[`renders text with bold weight and italic style 1`] = `
         "fontFamily": "inter-italic-bold",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -314,7 +314,7 @@ exports[`renders text with center align 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "center",
@@ -347,7 +347,7 @@ exports[`renders text with default color 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -380,7 +380,7 @@ exports[`renders text with default size 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -413,7 +413,7 @@ exports[`renders text with extraBold weight and display as fontFamily 1`] = `
         "fontFamily": "jobberpro-xbd",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -479,7 +479,7 @@ exports[`renders text with italic style 1`] = `
         "fontFamily": "inter-italic",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -515,7 +515,7 @@ exports[`renders text with large size 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -548,7 +548,7 @@ exports[`renders text with letter spacing 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -581,7 +581,7 @@ exports[`renders text with line height override 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -614,7 +614,7 @@ exports[`renders text with lowercase transform 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -680,7 +680,7 @@ exports[`renders text with no additional props 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -713,7 +713,7 @@ exports[`renders text with regular style 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -845,7 +845,7 @@ exports[`renders text with small size 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -878,7 +878,7 @@ exports[`renders text with strikethough styling 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -914,7 +914,7 @@ exports[`renders text with uppercase transform 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -980,7 +980,7 @@ exports[`supports multi-level nesting across Typography and Text 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -1009,7 +1009,7 @@ exports[`supports multi-level nesting across Typography and Text 1`] = `
           "fontFamily": "inter-regular",
         },
         {
-          "color": "hsl(197, 15%, 43%)",
+          "color": "hsl(198, 35%, 21%)",
         },
         {
           "textAlign": "left",
@@ -1038,7 +1038,7 @@ exports[`supports multi-level nesting across Typography and Text 1`] = `
             "fontFamily": "inter-regular",
           },
           {
-            "color": "hsl(197, 15%, 43%)",
+            "color": "hsl(198, 35%, 21%)",
           },
           {
             "textAlign": "left",
@@ -1074,7 +1074,7 @@ exports[`supports nested children and applies transform only to string children
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -1103,7 +1103,7 @@ exports[`supports nested children and applies transform only to string children
           "fontFamily": "inter-bold",
         },
         {
-          "color": "hsl(197, 15%, 43%)",
+          "color": "hsl(198, 35%, 21%)",
         },
         {
           "textAlign": "left",
@@ -1138,7 +1138,7 @@ exports[`underline renders text with dashed underline 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -1178,7 +1178,7 @@ exports[`underline renders text with dotted underline 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -1218,7 +1218,7 @@ exports[`underline renders text with double underline 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",
@@ -1258,7 +1258,7 @@ exports[`underline renders text with solid underline 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 43%)",
+        "color": "hsl(198, 35%, 21%)",
       },
       {
         "textAlign": "left",