chore: upgrade color to 3.0 (callstack#1204)

docs/pages/src/Showcase.js

@@ -56,7 +56,9 @@ export default class Showcase extends React.Component<{}> {
  </p>
  <Gallery>
  {data.map(item => {
- const tintColor = color(item.color).light() ? '#000000' : '#FFFFFF';
+ const tintColor = color(item.color).isLight()
+ ? '#000000'
+ : '#FFFFFF';
  return (
  <div key={item.image}>
  <ImageContainer>

example/package.json

@@ -44,7 +44,7 @@
  "webpack-dev-server": "^3.1.14"
  },
  "resolutions": {
- "**/color": "2.0.1",
+ "**/color": "3.1.2",
  "**/hoist-non-react-statics": "3.3.0",
  "**/react-lifecycles-compat": "3.0.4",
  "**/react": "16.8.3"

example/yarn.lock

@@ -3196,10 +3196,10 @@ color-support@^1.1.3:
  resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
  integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
-color@2.0.1, color@^3.0.0, color@^3.1.0:
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/color/-/color-2.0.1.tgz#e4ed78a3c4603d0891eba5430b04b86314f4c839"
- integrity sha512-ubUCVVKfT7r2w2D3qtHakj8mbmKms+tThR8gI8zEYCbUBl8/voqFGt3kgBqGwXAopgXybnkuOq+qMYCRrp4cXw==
+color@3.1.2, color@^3.0.0, color@^3.1.0:
+ version "3.1.2"
+ resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
+ integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
  dependencies:
  color-convert "^1.9.1"
  color-string "^1.5.2"

package.json

@@ -44,7 +44,7 @@
  },
  "dependencies": {
  "@callstack/react-theme-provider": "^3.0.2",
- "color": "^2.0.1",
+ "color": "^3.1.2",
  "react-native-safe-area-view": "^0.12.0"
  },
  "devDependencies": {
@@ -53,7 +53,7 @@
  "@callstack/eslint-config": "^6.1.0",
  "@commitlint/config-conventional": "^7.5.0",
  "@react-native-community/bob": "^0.4.1",
- "@types/color": "^2.0.1",
+ "@types/color": "^3.0.0",
  "@types/jest": "^24.0.13",
  "@types/node": "^12.0.4",
  "@types/reach__router": "^1.2.4",

src/components/Appbar/Appbar.tsx

@@ -106,7 +106,7 @@ class Appbar extends React.Component<Props> {
  isDark =
  backgroundColor === 'transparent'
  ? false
- : !color(backgroundColor).light();
+ : !color(backgroundColor).isLight();
  }
 
  let shouldCenterContent = false;

src/components/Avatar/AvatarIcon.tsx

@@ -62,7 +62,7 @@ class Avatar extends React.Component<Props> {
  StyleSheet.flatten(style) || {};
  const textColor =
  this.props.color ||
- (color(backgroundColor).light() ? 'rgba(0, 0, 0, .54)' : white);
+ (color(backgroundColor).isLight() ? 'rgba(0, 0, 0, .54)' : white);
 
  return (
  <View

src/components/Avatar/AvatarText.tsx

@@ -61,7 +61,7 @@ class AvatarText extends React.Component<Props> {
  StyleSheet.flatten(style) || {};
  const textColor =
  this.props.color ||
- (color(backgroundColor).light() ? 'rgba(0, 0, 0, .54)' : white);
+ (color(backgroundColor).isLight() ? 'rgba(0, 0, 0, .54)' : white);
 
  return (
  <View

src/components/Badge.tsx

@@ -81,7 +81,7 @@ class Badge extends React.Component<Props, State> {
 
  const { backgroundColor = theme.colors.notification, ...restStyle } =
  StyleSheet.flatten(style) || {};
- const textColor = color(backgroundColor).light() ? black : white;
+ const textColor = color(backgroundColor).isLight() ? black : white;
 
  const borderRadius = size / 2;
 

src/components/BottomNavigation.tsx

@@ -598,7 +598,7 @@ class BottomNavigation extends React.Component<Props, State> {
  })
  : approxBackgroundColor;
 
- const isDark = !color(approxBackgroundColor).light();
+ const isDark = !color(approxBackgroundColor).isLight();
 
  const textColor = isDark ? white : black;
  const activeTintColor =

src/components/Button.tsx

@@ -199,7 +199,7 @@ class Button extends React.Component<Props, State> {
  isDark =
  backgroundColor === 'transparent'
  ? false
- : !color(backgroundColor).light();
+ : !color(backgroundColor).isLight();
  }
 
  textColor = isDark ? white : black;

src/components/FAB/FAB.tsx

@@ -164,7 +164,7 @@ class FAB extends React.Component<Props, State> {
  .rgb()
  .string();
  } else {
- foregroundColor = !color(backgroundColor).light()
+ foregroundColor = !color(backgroundColor).isLight()
  ? white
  : 'rgba(0, 0, 0, .54)';
  }

yarn.lock

@@ -1102,10 +1102,10 @@
  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
-"@types/color@^2.0.1":
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/@types/color/-/color-2.0.1.tgz#73a7eefe83e42dcc888b13ae74dc0ec9de6bf815"
- integrity sha512-dVqiefojpzW1O1uOJ9Mn0iKfRaaD5B944loklphiG8uRok9/YYAUQQlOGebo5RSMfayyGTa0dGIZNAtPQdhceQ==
+"@types/color@^3.0.0":
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.0.tgz#40f8a6bf2fd86e969876b339a837d8ff1b0a6e30"
+ integrity sha512-5qqtNia+m2I0/85+pd2YzAXaTyKO8j+svirO5aN+XaQJ5+eZ8nx0jPtEWZLxCi50xwYsX10xUHetFzfb1WEs4Q==
  dependencies:
  "@types/color-convert" "*"
 
@@ -3216,10 +3216,10 @@ color-support@^1.1.3:
  resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
  integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
-color@^2.0.1:
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/color/-/color-2.0.1.tgz#e4ed78a3c4603d0891eba5430b04b86314f4c839"
- integrity sha512-ubUCVVKfT7r2w2D3qtHakj8mbmKms+tThR8gI8zEYCbUBl8/voqFGt3kgBqGwXAopgXybnkuOq+qMYCRrp4cXw==
+color@^3.1.2:
+ version "3.1.2"
+ resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
+ integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
  dependencies:
  color-convert "^1.9.1"
  color-string "^1.5.2"