Improve CollectionBadge when collection color is black/dark

frontend/src/metabase/questions/components/CollectionBadge.jsx

@@ -6,22 +6,23 @@ import * as Urls from "metabase/lib/urls";
 import Color from "color";
 import cx from "classnames";
 
-const CollectionBadge = ({ className, collection }) => (
-  <Link
-    to={Urls.collection(collection)}
-    className={cx(className, "flex align-center px1 rounded mx1")}
-    style={{
-      fontSize: 14,
-      color: Color(collection.color)
-        .darken(0.1)
-        .hex(),
-      backgroundColor: Color(collection.color)
-        .lighten(0.4)
-        .hex(),
-    }}
-  >
-    {collection.name}
-  </Link>
-);
+const CollectionBadge = ({ className, collection }) => {
+  const color = Color(collection.color);
+  const darkened = color.darken(0.1);
+  const lightened = color.lighten(0.4);
+  return (
+    <Link
+      to={Urls.collection(collection)}
+      className={cx(className, "flex align-center px1 rounded mx1")}
+      style={{
+        fontSize: 14,
+        color: lightened.isDark() ? "#fff" : darkened,
+        backgroundColor: lightened,
+      }}
+    >
+      {collection.name}
+    </Link>
+  );
+};
 
 export default CollectionBadge;

package.json

@@ -15,7 +15,7 @@
     "c-3po": "^0.7.3",
     "chevrotain": "0.21.0",
     "classnames": "^2.1.3",
-    "color": "^1.0.3",
+    "color": "^3.0.0",
     "crossfilter": "^1.3.12",
     "cxs": "^5.0.0",
     "d3": "^3.5.17",