@jobber/components-native 0.80.1 → 0.80.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.80.1",
+  "version": "0.80.2",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -80,5 +80,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "04ad3ff367621aa073dcb0bde7ce4aa13197e875"
+  "gitHead": "f9f0fd3344b7bdc1198d5fd23a6f4057ad31f9c4"
 }

package/src/Chip/Chip.test.tsx

@@ -35,7 +35,7 @@ it("renders an inactive Chip with a default backgroundColor", () => {
     backgroundColor: tokens["color-surface--reverse"],
   });
   expect(getByTestId("chipTest").props.style).toContainEqual({
-    backgroundColor: tokens["color-surface--background"],
+    backgroundColor: tokens["color-interactive--background"],
   });
 });
 

package/src/Chip/Chip.tsx

@@ -82,7 +82,7 @@ export function Chip({
         backgroundColor:
           inactiveBackgroundColor === "surface"
             ? tokens["color-surface"]
-            : tokens["color-surface--background"],
+            : tokens["color-interactive--background"],
       },
       isActive && { backgroundColor: accentColor },
     ];

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

@@ -7,7 +7,7 @@ export const useStyles = buildThemedStyles(tokens => {
       height: 8,
       borderRadius: tokens["radius-circle"],
       overflow: "hidden",
-      backgroundColor: tokens["color-surface--background"],
+      backgroundColor: tokens["color-interactive--background"],
     },
     progress: {
       height: "100%",

package/src/ProgressBar/ProgressBar.tsx

@@ -33,7 +33,9 @@ export function ProgressBar({
         <ProgressBarStepped
           total={total}
           current={current}
-          color={reverseTheme ? undefined : tokens["color-surface--background"]}
+          color={
+            reverseTheme ? undefined : tokens["color-interactive--background"]
+          }
           loading={loading}
           inProgress={inProgress}
         />
@@ -43,7 +45,7 @@ export function ProgressBar({
             width={100}
             animationDuration={0}
             color={
-              reverseTheme ? undefined : tokens["color-surface--background"]
+              reverseTheme ? undefined : tokens["color-interactive--background"]
             }
           />
           {!loading && (

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

@@ -34,7 +34,7 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "width": "100%",
           },
           {
-            "backgroundColor": "hsl(53, 21%, 93%)",
+            "backgroundColor": "hsl(51, 17%, 85%)",
             "width": "100%",
           },
         ]
@@ -116,7 +116,7 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
             "width": "100%",
           },
           {
-            "backgroundColor": "hsl(53, 21%, 93%)",
+            "backgroundColor": "hsl(51, 17%, 85%)",
             "width": "100%",
           },
         ]

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

@@ -60,7 +60,7 @@ export function BaseSwitch({
       } else if (internalValue) {
         return tokens["color-interactive"];
       } else {
-        return tokens["color-surface--background"];
+        return tokens["color-interactive--background"];
       }
     }
 
@@ -81,7 +81,7 @@ export function BaseSwitch({
       //iOS
       return {
         true: tokens["color-interactive"],
-        false: tokens["color-surface--background"],
+        false: tokens["color-interactive--background"],
       };
     }
   }
@@ -98,7 +98,7 @@ export function BaseSwitch({
       disabled={disabled}
       thumbColor={getThumbColor()}
       trackColor={getTrackColors()}
-      ios_backgroundColor={tokens["color-surface--background"]}
+      ios_backgroundColor={tokens["color-interactive--background"]}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole={"switch"}
       accessibilityState={{

package/src/Switch/components/BaseSwitch/__snapshots__/BaseSwitch.test.tsx.snap

@@ -26,12 +26,12 @@ exports[`renders a Switch with defaultValue false 1`] = `
         "width": 51,
       },
       {
-        "backgroundColor": "hsl(53, 21%, 93%)",
+        "backgroundColor": "hsl(51, 17%, 85%)",
         "borderRadius": 16,
       },
     ]
   }
-  tintColor="hsl(53, 21%, 93%)"
+  tintColor="hsl(51, 17%, 85%)"
   value={false}
 />
 `;
@@ -62,12 +62,12 @@ exports[`renders a Switch with defaultValue true 1`] = `
         "width": 51,
       },
       {
-        "backgroundColor": "hsl(53, 21%, 93%)",
+        "backgroundColor": "hsl(51, 17%, 85%)",
         "borderRadius": 16,
       },
     ]
   }
-  tintColor="hsl(53, 21%, 93%)"
+  tintColor="hsl(51, 17%, 85%)"
   value={true}
 />
 `;
@@ -98,12 +98,12 @@ exports[`renders a Switch with value false 1`] = `
         "width": 51,
       },
       {
-        "backgroundColor": "hsl(53, 21%, 93%)",
+        "backgroundColor": "hsl(51, 17%, 85%)",
         "borderRadius": 16,
       },
     ]
   }
-  tintColor="hsl(53, 21%, 93%)"
+  tintColor="hsl(51, 17%, 85%)"
   value={false}
 />
 `;
@@ -134,12 +134,12 @@ exports[`renders a Switch with value true 1`] = `
         "width": 51,
       },
       {
-        "backgroundColor": "hsl(53, 21%, 93%)",
+        "backgroundColor": "hsl(51, 17%, 85%)",
         "borderRadius": 16,
       },
     ]
   }
-  tintColor="hsl(53, 21%, 93%)"
+  tintColor="hsl(51, 17%, 85%)"
   value={true}
 />
 `;
@@ -170,12 +170,12 @@ exports[`renders a disabled Switch with value false 1`] = `
         "width": 51,
       },
       {
-        "backgroundColor": "hsl(53, 21%, 93%)",
+        "backgroundColor": "hsl(51, 17%, 85%)",
         "borderRadius": 16,
       },
     ]
   }
-  tintColor="hsl(53, 21%, 93%)"
+  tintColor="hsl(51, 17%, 85%)"
   value={false}
 />
 `;
@@ -206,12 +206,12 @@ exports[`renders a disabled Switch with value true 1`] = `
         "width": 51,
       },
       {
-        "backgroundColor": "hsl(53, 21%, 93%)",
+        "backgroundColor": "hsl(51, 17%, 85%)",
         "borderRadius": 16,
       },
     ]
   }
-  tintColor="hsl(53, 21%, 93%)"
+  tintColor="hsl(51, 17%, 85%)"
   value={true}
 />
 `;