Replaced color library.

components/common/WorldMap.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
 import classNames from 'classnames';
-import tinycolor from 'tinycolor2';
+import { colord } from 'colord';
 import useTheme from 'hooks/useTheme';
 import { ISO_COUNTRIES, THEME_COLORS, MAP_FILE } from 'lib/constants';
 import styles from './WorldMap.module.css';
@@ -35,9 +35,9 @@ function WorldMap({ data, className }) {
       return colors.fillColor;
     }
 
-    return tinycolor(colors.baseColor)[theme === 'light' ? 'lighten' : 'darken'](
-      40 * (1.0 - country.z / 100),
-    );
+    return colord(colors.baseColor)
+      [theme === 'light' ? 'lighten' : 'darken'](0.4 * (1.0 - country.z / 100))
+      .toHex();
   }
 
   function getOpacity(code) {

components/metrics/EventsChart.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import tinycolor from 'tinycolor2';
+import { colord } from 'colord';
 import BarChart from './BarChart';
 import { getDateArray, getDateLength } from 'lib/date';
 import useFetch from 'hooks/useFetch';
@@ -51,13 +51,13 @@ export default function EventsChart({ websiteId, className, token }) {
     });
 
     return Object.keys(map).map((key, index) => {
-      const color = tinycolor(EVENT_COLORS[index % EVENT_COLORS.length]);
+      const color = colord(EVENT_COLORS[index % EVENT_COLORS.length]);
       return {
         label: key,
         data: map[key],
         lineTension: 0,
-        backgroundColor: color.setAlpha(0.6).toRgbString(),
-        borderColor: color.setAlpha(0.7).toRgbString(),
+        backgroundColor: color.alpha(0.6).toRgbString(),
+        borderColor: color.alpha(0.7).toRgbString(),
         borderWidth: 1,
       };
     });

components/metrics/Legend.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import tinycolor from 'tinycolor2';
+import { colord } from 'colord';
 import classNames from 'classnames';
 import Dot from 'components/common/Dot';
 import useLocale from 'hooks/useLocale';
@@ -27,7 +27,7 @@ export default function Legend({ chart }) {
   return (
     <div className={styles.legend}>
       {chart.legend.legendItems.map(({ text, fillStyle, datasetIndex, hidden }) => {
-        const color = tinycolor(fillStyle);
+        const color = colord(fillStyle);
 
         return (
           <div
@@ -35,7 +35,7 @@ export default function Legend({ chart }) {
             className={classNames(styles.label, { [styles.hidden]: hidden })}
             onClick={() => handleClick(datasetIndex)}
           >
-            <Dot color={color.setAlpha(color.getAlpha() + 0.2).toHexString()} />
+            <Dot color={color.alpha(color.alpha() + 0.2).toHex()} />
             <span className={locale}>{text}</span>
           </div>
         );

components/metrics/PageviewsChart.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import tinycolor from 'tinycolor2';
+import { colord } from 'colord';
 import CheckVisible from 'components/helpers/CheckVisible';
 import BarChart from './BarChart';
 import useTheme from 'hooks/useTheme';
@@ -18,15 +18,15 @@ export default function PageviewsChart({
 }) {
   const intl = useIntl();
   const [theme] = useTheme();
-  const primaryColor = tinycolor(THEME_COLORS[theme].primary);
+  const primaryColor = colord(THEME_COLORS[theme].primary);
   const colors = {
     views: {
-      background: primaryColor.setAlpha(0.4).toRgbString(),
-      border: primaryColor.setAlpha(0.5).toRgbString(),
+      background: primaryColor.alpha(0.4).toRgbString(),
+      border: primaryColor.alpha(0.5).toRgbString(),
     },
     visitors: {
-      background: primaryColor.setAlpha(0.6).toRgbString(),
-      border: primaryColor.setAlpha(0.7).toRgbString(),
+      background: primaryColor.alpha(0.6).toRgbString(),
+      border: primaryColor.alpha(0.7).toRgbString(),
     },
   };
 

package.json

@@ -62,6 +62,7 @@
     "chalk": "^4.1.1",
     "chart.js": "^2.9.4",
     "classnames": "^2.3.1",
+    "colord": "^2.9.2",
     "cookie": "^0.4.1",
     "cors": "^2.8.5",
     "date-fns": "^2.23.0",
@@ -94,7 +95,6 @@
     "semver": "^7.3.5",
     "thenby": "^1.3.4",
     "timezone-support": "^2.0.2",
-    "tinycolor2": "^1.4.2",
     "uuid": "^8.3.2"
   },
   "devDependencies": {

yarn.lock

@@ -2868,6 +2868,11 @@ color-name@^1.0.0, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+colord@^2.9.2:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.2.tgz#25e2bacbbaa65991422c07ea209e2089428effb1"
+  integrity sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==
+
 colorette@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
@@ -7809,11 +7814,6 @@ tiny-warning@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
-tinycolor2@^1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
-  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
-
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"