diff --git a/components/common/WorldMap.js b/components/common/WorldMap.js index 6dc8a359..0f9a1d6a 100644 --- a/components/common/WorldMap.js +++ b/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) { diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js index 68556c96..89318a5a 100644 --- a/components/metrics/EventsChart.js +++ b/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, }; }); diff --git a/components/metrics/Legend.js b/components/metrics/Legend.js index 52ab8b15..56b0ff65 100644 --- a/components/metrics/Legend.js +++ b/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 (
{chart.legend.legendItems.map(({ text, fillStyle, datasetIndex, hidden }) => { - const color = tinycolor(fillStyle); + const color = colord(fillStyle); return ( ); diff --git a/components/metrics/PageviewsChart.js b/components/metrics/PageviewsChart.js index e9d30449..6d5afd19 100644 --- a/components/metrics/PageviewsChart.js +++ b/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(), }, }; diff --git a/package.json b/package.json index d6a1f75c..5a0ab8a5 100644 --- a/package.json +++ b/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": { diff --git a/yarn.lock b/yarn.lock index 44f4703d..8b16aed1 100644 --- a/yarn.lock +++ b/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"