From d373f654f3d030cd877d62bf958ca09a6a167f3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Morten=20N=2EO=2E=20N=C3=B8rgaard=20Henriksen?= <1136718+raix@users.noreply.github.com> Date: Sun, 14 Jul 2024 23:37:19 +0200 Subject: [PATCH] Add viridis generated chart themes --- generate-colors.ts | 56 +++++ package-lock.json | 27 +++ package.json | 1 + styles/index.css | 1 + ui/charts/util.ts | 2 +- ui/theme/ThemeContext.tsx | 19 +- ui/theme/ThemeSelector.tsx | 54 ++++- ui/theme/chartThemes.css | 460 +++++++++++++++++++++++++++++++++++++ ui/theme/chartThemes.ts | 46 ++++ ui/theme/themes.css | 10 - 10 files changed, 657 insertions(+), 19 deletions(-) create mode 100644 generate-colors.ts create mode 100644 ui/theme/chartThemes.css create mode 100644 ui/theme/chartThemes.ts diff --git a/generate-colors.ts b/generate-colors.ts new file mode 100644 index 0000000..ea4e9ac --- /dev/null +++ b/generate-colors.ts @@ -0,0 +1,56 @@ +import fs from "node:fs"; +import path from "node:path"; +import { type Color, Palette, type PaletteName } from "viridis"; + +const outputCssFile = path.join(__dirname, "ui", "theme", "chartThemes.css"); +const outputTsFile = path.join(__dirname, "ui", "theme", "chartThemes.ts"); + +const scale = 9; +const totalScale = 12; + +let outputCss = ""; + +for (const paletteName of Object.keys(Palette) as PaletteName[]) { + let light = ""; + let dark = ""; + + light += `.chart-${paletteName.toLowerCase()} {\n`; + dark += `.dark.chart-${paletteName.toLowerCase()} {\n`; + + for (let darkIndex = 0; darkIndex < totalScale; darkIndex++) { + const lightIndex = darkIndex - (totalScale - scale); + const color = Palette[paletteName].getColor(darkIndex + 1, 1, totalScale); + if (darkIndex > 0 && darkIndex < scale) { + dark += ` --chart-${darkIndex + 1}: ${color.toString()}; /* ${isLight(color.getContrastingColor()) ? "light" : "dark"} */\n`; + } + if (lightIndex >= 0 && lightIndex < scale) { + light += ` --chart-${lightIndex + 1}: ${color.toString()}; /* ${isLight(color.getContrastingColor()) ? "light" : "dark"} */\n`; + } + } + light += "}\n\n"; + dark += "}\n\n"; + + outputCss += light; + outputCss += dark; +} + +const outputTs = `import "./chartThemes.css"; + +export type ChartTheme = +${Object.keys(Palette) + .map((paletteName) => ` | "chart-${paletteName.toLowerCase()}"`) + .join("\n")}; + +export const chartThemes: ChartTheme[] = [ +${Object.keys(Palette) + .map((paletteName) => ` "chart-${paletteName.toLowerCase()}"`) + .join(",\n")} +]; +`; + +fs.writeFileSync(outputCssFile, outputCss, "utf-8"); +fs.writeFileSync(outputTsFile, outputTs, "utf-8"); + +function isLight(color: Color) { + return color.red + color.green + color.blue > 382; +} diff --git a/package-lock.json b/package-lock.json index 09f58dc..381a407 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,6 +37,7 @@ "tailwindcss-animate": "^1.0.7", "tailwindcss-react-aria-components": "^1.1.3", "typescript": "^5.5.3", + "viridis": "^1.1.4", "zod": "^3.23.8" } }, @@ -10018,6 +10019,19 @@ "node": ">=8" } }, + "node_modules/smath": { + "version": "1.8.4", + "resolved": "https://registry.npmjs.org/smath/-/smath-1.8.4.tgz", + "integrity": "sha512-VVYlijTVmpEoq1ghmT7quahgt0pGvkFynJ0yjxPmNgEMz2eQhlUpLwLajLz2UBCTeHpJfFAImS87BiWEN9av8A==", + "dev": true, + "bin": { + "smath": "dist/bin.js" + }, + "funding": { + "type": "paypal", + "url": "https://paypal.me/nicfv" + } + }, "node_modules/solid-js": { "version": "1.8.17", "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.8.17.tgz", @@ -11014,6 +11028,19 @@ "d3-timer": "^3.0.1" } }, + "node_modules/viridis": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/viridis/-/viridis-1.1.4.tgz", + "integrity": "sha512-DLyAWwHmBkbdQam8eoCtZIkR2fXTfGuOG7mXwuzeKbxAOx/lKf5cg6L23X7oy8X3fcXrocIy4LnXPYhnBpO8ew==", + "dev": true, + "dependencies": { + "smath": "1.8.4" + }, + "funding": { + "type": "paypal", + "url": "https://paypal.me/nicfv" + } + }, "node_modules/vue-template-compiler": { "version": "2.7.16", "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz", diff --git a/package.json b/package.json index 5d16f69..3a6d799 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "tailwindcss-animate": "^1.0.7", "tailwindcss-react-aria-components": "^1.1.3", "typescript": "^5.5.3", + "viridis": "^1.1.4", "zod": "^3.23.8" } } diff --git a/styles/index.css b/styles/index.css index 689ae14..18de8a8 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,2 +1,3 @@ @import "../ui/theme/themes.css"; +@import "../ui/theme/chartThemes.css"; @import "./rspress.css"; diff --git a/ui/charts/util.ts b/ui/charts/util.ts index e56f466..7d75b71 100644 --- a/ui/charts/util.ts +++ b/ui/charts/util.ts @@ -9,7 +9,7 @@ function getColorIndex(index: number, length: number) { return (length === 1 ? 1 : Math.ceil((index * 8) / (length - 1)) + 1) as ColorIndex; } -const getChartColorHSL = (colorIndex: ColorIndex) => `hsl(var(--chart-${colorIndex}))`; +const getChartColorHSL = (colorIndex: ColorIndex) => `var(--chart-${colorIndex})`; export function getChartColor(index: number, length: number) { return getChartColorHSL(getColorIndex(index, length)); diff --git a/ui/theme/ThemeContext.tsx b/ui/theme/ThemeContext.tsx index d2f6ed0..694395b 100644 --- a/ui/theme/ThemeContext.tsx +++ b/ui/theme/ThemeContext.tsx @@ -1,5 +1,6 @@ import { type ReactNode, createContext, useContext, useEffect, useMemo, useState } from "react"; import { type Color, parseColor } from "react-aria-components"; +import type { ChartTheme } from "./chartThemes"; import type { Theme, ThemePanelOpacity, ThemeRadius } from "./theme"; export type ThemeContextType = { @@ -11,6 +12,8 @@ export type ThemeContextType = { setPanelOpacity: (opacity: ThemePanelOpacity) => void; hue: Color; setHue: (hue: Color) => void; + chartTheme: ChartTheme; + setChartTheme: (theme: ChartTheme) => void; }; export const ThemeContext = createContext(null); @@ -19,8 +22,9 @@ const Provider = ThemeContext.Provider; const defaultTheme = "theme-neutral"; const defaultThemeRadius = "radius-050"; const defaultPanelOpacity = "panel-solid"; +const defaultChartTheme: ChartTheme = "chart-viridis"; -document.documentElement.classList.add(defaultTheme, defaultThemeRadius); +document.documentElement.classList.add(defaultTheme, defaultThemeRadius, defaultChartTheme); type ThemeProviderProps = { children: ReactNode; @@ -31,14 +35,15 @@ export function ThemeProvider({ children }: Readonly) { const [themeRadius, setThemeRadius] = useState(defaultThemeRadius); const [panelOpacity, setPanelOpacity] = useState(defaultPanelOpacity); const [hue, setHue] = useState(parseColor("hsl(0, 100%, 50%)")); + const [chartTheme, setChartTheme] = useState(defaultChartTheme); useEffect(() => { const oldClasses = Array.from(document.documentElement.classList).filter( - (c) => c.startsWith("theme-") || c.startsWith("radius-") || c.startsWith("panel-") + (c) => c.startsWith("theme-") || c.startsWith("radius-") || c.startsWith("panel-") || c.startsWith("chart-") ); document.documentElement.classList.remove(...oldClasses); - document.documentElement.classList.add(theme, themeRadius, panelOpacity); - }, [theme, themeRadius, panelOpacity]); + document.documentElement.classList.add(theme, themeRadius, panelOpacity, chartTheme); + }, [theme, themeRadius, panelOpacity, chartTheme]); const context: ThemeContextType = useMemo( () => ({ @@ -49,9 +54,11 @@ export function ThemeProvider({ children }: Readonly) { panelOpacity, setPanelOpacity, hue, - setHue + setHue, + chartTheme, + setChartTheme }), - [theme, themeRadius, panelOpacity, hue] + [theme, themeRadius, panelOpacity, hue, chartTheme] ); return {children}; diff --git a/ui/theme/ThemeSelector.tsx b/ui/theme/ThemeSelector.tsx index bdae32c..2fe0086 100644 --- a/ui/theme/ThemeSelector.tsx +++ b/ui/theme/ThemeSelector.tsx @@ -13,11 +13,22 @@ import { SliderOutput, SliderTrack } from "react-aria-components"; +import { type ChartTheme, chartThemes } from "./chartThemes"; import { type Theme, type ThemePanelOpacity, type ThemeRadius, themes } from "./theme"; export function ThemeModeSelector() { - const { theme, setTheme, themeRadius, setThemeRadius, panelOpacity, setPanelOpacity, hue, setHue } = - useThemeContext(); + const { + theme, + setTheme, + themeRadius, + setThemeRadius, + panelOpacity, + setPanelOpacity, + hue, + setHue, + chartTheme, + setChartTheme + } = useThemeContext(); return (
@@ -26,6 +37,8 @@ export function ThemeModeSelector() { {/* */} + + @@ -212,3 +225,40 @@ function ThemeHueSelector({ label, ...props }: Readonly) ); } + +type ChartThemePickerProps = { + chartTheme: ChartTheme; + onChange: (theme: ChartTheme) => void; +}; + +function ChartThemePicker({ chartTheme, onChange }: Readonly) { + return ( + <> + Chart +
+ {chartThemes.map((t) => ( + + ))} +
+ + ); +} diff --git a/ui/theme/chartThemes.css b/ui/theme/chartThemes.css new file mode 100644 index 0000000..cd6c58f --- /dev/null +++ b/ui/theme/chartThemes.css @@ -0,0 +1,460 @@ +.chart-viridis { + --chart-1: rgba(90,194,99,100%); /* dark */ + --chart-2: rgba(50,175,122,100%); /* light */ + --chart-3: rgba(36,154,134,100%); /* light */ + --chart-4: rgba(39,133,139,100%); /* light */ + --chart-5: rgba(46,110,140,100%); /* light */ + --chart-6: rgba(56,86,137,100%); /* light */ + --chart-7: rgba(65,61,130,100%); /* light */ + --chart-8: rgba(66,31,107,100%); /* light */ + --chart-9: rgba(68,1,84,100%); /* light */ +} + +.dark.chart-viridis { + --chart-2: rgba(193,221,57,100%); /* dark */ + --chart-3: rgba(133,211,77,100%); /* dark */ + --chart-4: rgba(90,194,99,100%); /* dark */ + --chart-5: rgba(50,175,122,100%); /* light */ + --chart-6: rgba(36,154,134,100%); /* light */ + --chart-7: rgba(39,133,139,100%); /* light */ + --chart-8: rgba(46,110,140,100%); /* light */ + --chart-9: rgba(56,86,137,100%); /* light */ +} + +.chart-inferno { + --chart-1: rgba(240,134,27,100%); /* dark */ + --chart-2: rgba(226,96,49,100%); /* dark */ + --chart-3: rgba(200,69,70,100%); /* light */ + --chart-4: rgba(167,49,90,100%); /* light */ + --chart-5: rgba(132,32,103,100%); /* light */ + --chart-6: rgba(95,20,103,100%); /* light */ + --chart-7: rgba(60,9,94,100%); /* light */ + --chart-8: rgba(30,4,49,100%); /* light */ + --chart-9: rgba(0,0,4,100%); /* light */ +} + +.dark.chart-inferno { + --chart-2: rgba(252,214,94,100%); /* dark */ + --chart-3: rgba(252,173,24,100%); /* dark */ + --chart-4: rgba(240,134,27,100%); /* dark */ + --chart-5: rgba(226,96,49,100%); /* dark */ + --chart-6: rgba(200,69,70,100%); /* light */ + --chart-7: rgba(167,49,90,100%); /* light */ + --chart-8: rgba(132,32,103,100%); /* light */ + --chart-9: rgba(95,20,103,100%); /* light */ +} + +.chart-magma { + --chart-1: rgba(242,127,107,100%); /* dark */ + --chart-2: rgba(227,88,104,100%); /* dark */ + --chart-3: rgba(199,64,110,100%); /* light */ + --chart-4: rgba(162,49,122,100%); /* light */ + --chart-5: rgba(125,36,125,100%); /* light */ + --chart-6: rgba(88,24,118,100%); /* light */ + --chart-7: rgba(53,13,102,100%); /* light */ + --chart-8: rgba(26,6,53,100%); /* light */ + --chart-9: rgba(0,0,4,100%); /* light */ +} + +.dark.chart-magma { + --chart-2: rgba(252,210,153,100%); /* dark */ + --chart-3: rgba(253,167,116,100%); /* dark */ + --chart-4: rgba(242,127,107,100%); /* dark */ + --chart-5: rgba(227,88,104,100%); /* dark */ + --chart-6: rgba(199,64,110,100%); /* light */ + --chart-7: rgba(162,49,122,100%); /* light */ + --chart-8: rgba(125,36,125,100%); /* light */ + --chart-9: rgba(88,24,118,100%); /* light */ +} + +.chart-plasma { + --chart-1: rgba(242,142,70,100%); /* dark */ + --chart-2: rgba(229,112,90,100%); /* dark */ + --chart-3: rgba(211,84,110,100%); /* dark */ + --chart-4: rgba(190,57,131,100%); /* light */ + --chart-5: rgba(164,34,148,100%); /* light */ + --chart-6: rgba(131,15,159,100%); /* light */ + --chart-7: rgba(97,0,165,100%); /* light */ + --chart-8: rgba(55,4,150,100%); /* light */ + --chart-9: rgba(13,8,135,100%); /* light */ +} + +.dark.chart-plasma { + --chart-2: rgba(245,211,42,100%); /* dark */ + --chart-3: rgba(250,173,52,100%); /* dark */ + --chart-4: rgba(242,142,70,100%); /* dark */ + --chart-5: rgba(229,112,90,100%); /* dark */ + --chart-6: rgba(211,84,110,100%); /* dark */ + --chart-7: rgba(190,57,131,100%); /* light */ + --chart-8: rgba(164,34,148,100%); /* light */ + --chart-9: rgba(131,15,159,100%); /* light */ +} + +.chart-grayscale { + --chart-1: rgba(189,189,189,100%); /* dark */ + --chart-2: rgba(170,170,170,100%); /* dark */ + --chart-3: rgba(151,151,151,100%); /* dark */ + --chart-4: rgba(132,132,132,100%); /* dark */ + --chart-5: rgba(113,113,113,100%); /* light */ + --chart-6: rgba(94,94,94,100%); /* light */ + --chart-7: rgba(75,75,75,100%); /* light */ + --chart-8: rgba(56,56,56,100%); /* light */ + --chart-9: rgba(37,37,37,100%); /* light */ +} + +.dark.chart-grayscale { + --chart-2: rgba(227,227,227,100%); /* dark */ + --chart-3: rgba(208,208,208,100%); /* dark */ + --chart-4: rgba(189,189,189,100%); /* dark */ + --chart-5: rgba(170,170,170,100%); /* dark */ + --chart-6: rgba(151,151,151,100%); /* dark */ + --chart-7: rgba(132,132,132,100%); /* dark */ + --chart-8: rgba(113,113,113,100%); /* light */ + --chart-9: rgba(94,94,94,100%); /* light */ +} + +.chart-parula { + --chart-1: rgba(145,212,163,100%); /* dark */ + --chart-2: rgba(114,197,161,100%); /* dark */ + --chart-3: rgba(84,181,160,100%); /* dark */ + --chart-4: rgba(53,165,158,100%); /* light */ + --chart-5: rgba(19,149,154,100%); /* light */ + --chart-6: rgba(5,132,147,100%); /* light */ + --chart-7: rgba(0,115,140,100%); /* light */ + --chart-8: rgba(1,98,129,100%); /* light */ + --chart-9: rgba(4,82,117,100%); /* light */ +} + +.dark.chart-parula { + --chart-2: rgba(212,240,169,100%); /* dark */ + --chart-3: rgba(177,227,164,100%); /* dark */ + --chart-4: rgba(145,212,163,100%); /* dark */ + --chart-5: rgba(114,197,161,100%); /* dark */ + --chart-6: rgba(84,181,160,100%); /* dark */ + --chart-7: rgba(53,165,158,100%); /* light */ + --chart-8: rgba(19,149,154,100%); /* light */ + --chart-9: rgba(5,132,147,100%); /* light */ +} + +.chart-emerald { + --chart-1: rgba(123,204,143,100%); /* dark */ + --chart-2: rgba(102,185,137,100%); /* dark */ + --chart-3: rgba(84,165,132,100%); /* dark */ + --chart-4: rgba(64,146,127,100%); /* light */ + --chart-5: rgba(40,128,122,100%); /* light */ + --chart-6: rgba(26,109,113,100%); /* light */ + --chart-7: rgba(17,91,102,100%); /* light */ + --chart-8: rgba(11,77,91,100%); /* light */ + --chart-9: rgba(7,64,80,100%); /* light */ +} + +.dark.chart-emerald { + --chart-2: rgba(178,232,155,100%); /* dark */ + --chart-3: rgba(147,222,149,100%); /* dark */ + --chart-4: rgba(123,204,143,100%); /* dark */ + --chart-5: rgba(102,185,137,100%); /* dark */ + --chart-6: rgba(84,165,132,100%); /* dark */ + --chart-7: rgba(64,146,127,100%); /* light */ + --chart-8: rgba(40,128,122,100%); /* light */ + --chart-9: rgba(26,109,113,100%); /* light */ +} + +.chart-mint { + --chart-1: rgba(152,201,190,100%); /* dark */ + --chart-2: rgba(130,187,178,100%); /* dark */ + --chart-3: rgba(109,173,166,100%); /* dark */ + --chart-4: rgba(90,158,154,100%); /* dark */ + --chart-5: rgba(73,144,142,100%); /* light */ + --chart-6: rgba(57,130,130,100%); /* light */ + --chart-7: rgba(42,116,117,100%); /* light */ + --chart-8: rgba(27,102,106,100%); /* light */ + --chart-9: rgba(13,88,95,100%); /* light */ +} + +.dark.chart-mint { + --chart-2: rgba(201,227,213,100%); /* dark */ + --chart-3: rgba(176,214,202,100%); /* dark */ + --chart-4: rgba(152,201,190,100%); /* dark */ + --chart-5: rgba(130,187,178,100%); /* dark */ + --chart-6: rgba(109,173,166,100%); /* dark */ + --chart-7: rgba(90,158,154,100%); /* dark */ + --chart-8: rgba(73,144,142,100%); /* light */ + --chart-9: rgba(57,130,130,100%); /* light */ +} + +.chart-sunset { + --chart-1: rgba(248,173,128,100%); /* dark */ + --chart-2: rgba(245,154,127,100%); /* dark */ + --chart-3: rgba(238,136,131,100%); /* dark */ + --chart-4: rgba(227,120,137,100%); /* dark */ + --chart-5: rgba(211,106,144,100%); /* dark */ + --chart-6: rgba(189,97,151,100%); /* dark */ + --chart-7: rgba(164,90,158,100%); /* light */ + --chart-8: rgba(129,86,162,100%); /* light */ + --chart-9: rgba(92,83,165,100%); /* light */ +} + +.dark.chart-sunset { + --chart-2: rgba(246,211,142,100%); /* dark */ + --chart-3: rgba(249,192,131,100%); /* dark */ + --chart-4: rgba(248,173,128,100%); /* dark */ + --chart-5: rgba(245,154,127,100%); /* dark */ + --chart-6: rgba(238,136,131,100%); /* dark */ + --chart-7: rgba(227,120,137,100%); /* dark */ + --chart-8: rgba(211,106,144,100%); /* dark */ + --chart-9: rgba(189,97,151,100%); /* dark */ +} + +.chart-dusk { + --chart-1: rgba(243,133,112,100%); /* dark */ + --chart-2: rgba(237,109,110,100%); /* dark */ + --chart-3: rgba(230,89,110,100%); /* dark */ + --chart-4: rgba(225,73,113,100%); /* dark */ + --chart-5: rgba(221,61,117,100%); /* light */ + --chart-6: rgba(207,49,120,100%); /* light */ + --chart-7: rgba(188,38,121,100%); /* light */ + --chart-8: rgba(157,33,117,100%); /* light */ + --chart-9: rgba(124,29,111,100%); /* light */ +} + +.dark.chart-dusk { + --chart-2: rgba(250,190,135,100%); /* dark */ + --chart-3: rgba(249,159,117,100%); /* dark */ + --chart-4: rgba(243,133,112,100%); /* dark */ + --chart-5: rgba(237,109,110,100%); /* dark */ + --chart-6: rgba(230,89,110,100%); /* dark */ + --chart-7: rgba(225,73,113,100%); /* dark */ + --chart-8: rgba(221,61,117,100%); /* light */ + --chart-9: rgba(207,49,120,100%); /* light */ +} + +.chart-chroma { + --chart-1: rgba(91,201,159,100%); /* dark */ + --chart-2: rgba(66,180,170,100%); /* dark */ + --chart-3: rgba(67,157,169,100%); /* dark */ + --chart-4: rgba(85,134,159,100%); /* light */ + --chart-5: rgba(99,111,142,100%); /* light */ + --chart-6: rgba(104,88,116,100%); /* light */ + --chart-7: rgba(105,67,90,100%); /* light */ + --chart-8: rgba(91,52,64,100%); /* light */ + --chart-9: rgba(77,37,39,100%); /* light */ +} + +.dark.chart-chroma { + --chart-2: rgba(175,234,130,100%); /* dark */ + --chart-3: rgba(121,220,147,100%); /* dark */ + --chart-4: rgba(91,201,159,100%); /* dark */ + --chart-5: rgba(66,180,170,100%); /* dark */ + --chart-6: rgba(67,157,169,100%); /* dark */ + --chart-7: rgba(85,134,159,100%); /* light */ + --chart-8: rgba(99,111,142,100%); /* light */ + --chart-9: rgba(104,88,116,100%); /* light */ +} + +.chart-spectral { + --chart-1: rgba(252,171,107,100%); /* dark */ + --chart-2: rgba(253,208,129,100%); /* dark */ + --chart-3: rgba(247,229,142,100%); /* dark */ + --chart-4: rgba(236,239,148,100%); /* dark */ + --chart-5: rgba(216,239,151,100%); /* dark */ + --chart-6: rgba(181,224,149,100%); /* dark */ + --chart-7: rgba(143,206,151,100%); /* dark */ + --chart-8: rgba(96,171,170,100%); /* dark */ + --chart-9: rgba(50,136,189,100%); /* light */ +} + +.dark.chart-spectral { + --chart-2: rgba(230,97,83,100%); /* dark */ + --chart-3: rgba(248,133,88,100%); /* dark */ + --chart-4: rgba(252,171,107,100%); /* dark */ + --chart-5: rgba(253,208,129,100%); /* dark */ + --chart-6: rgba(247,229,142,100%); /* dark */ + --chart-7: rgba(236,239,148,100%); /* dark */ + --chart-8: rgba(216,239,151,100%); /* dark */ + --chart-9: rgba(181,224,149,100%); /* dark */ +} + +.chart-cool { + --chart-1: rgba(50,231,141,100%); /* dark */ + --chart-2: rgba(33,221,159,100%); /* dark */ + --chart-3: rgba(36,202,178,100%); /* dark */ + --chart-4: rgba(38,184,196,100%); /* dark */ + --chart-5: rgba(41,165,215,100%); /* dark */ + --chart-6: rgba(52,145,217,100%); /* light */ + --chart-7: rgba(67,123,210,100%); /* light */ + --chart-8: rgba(82,103,203,100%); /* light */ + --chart-9: rgba(98,82,197,100%); /* light */ +} + +.dark.chart-cool { + --chart-2: rgba(101,241,105,100%); /* dark */ + --chart-3: rgba(75,236,123,100%); /* dark */ + --chart-4: rgba(50,231,141,100%); /* dark */ + --chart-5: rgba(33,221,159,100%); /* dark */ + --chart-6: rgba(36,202,178,100%); /* dark */ + --chart-7: rgba(38,184,196,100%); /* dark */ + --chart-8: rgba(41,165,215,100%); /* dark */ + --chart-9: rgba(52,145,217,100%); /* light */ +} + +.chart-warm { + --chart-1: rgba(244,143,62,100%); /* dark */ + --chart-2: rgba(254,122,70,100%); /* dark */ + --chart-3: rgba(251,106,91,100%); /* dark */ + --chart-4: rgba(248,91,113,100%); /* dark */ + --chart-5: rgba(245,75,134,100%); /* dark */ + --chart-6: rgba(227,68,148,100%); /* dark */ + --chart-7: rgba(199,65,158,100%); /* light */ + --chart-8: rgba(173,63,168,100%); /* light */ + --chart-9: rgba(146,61,179,100%); /* light */ +} + +.dark.chart-warm { + --chart-2: rgba(213,190,60,100%); /* dark */ + --chart-3: rgba(229,167,61,100%); /* dark */ + --chart-4: rgba(244,143,62,100%); /* dark */ + --chart-5: rgba(254,122,70,100%); /* dark */ + --chart-6: rgba(251,106,91,100%); /* dark */ + --chart-7: rgba(248,91,113,100%); /* dark */ + --chart-8: rgba(245,75,134,100%); /* dark */ + --chart-9: rgba(227,68,148,100%); /* dark */ +} + +.chart-turquoise { + --chart-1: rgba(171,196,160,100%); /* dark */ + --chart-2: rgba(151,186,154,100%); /* dark */ + --chart-3: rgba(131,176,148,100%); /* dark */ + --chart-4: rgba(112,163,141,100%); /* dark */ + --chart-5: rgba(92,147,132,100%); /* light */ + --chart-6: rgba(72,131,123,100%); /* light */ + --chart-7: rgba(56,114,116,100%); /* light */ + --chart-8: rgba(42,97,109,100%); /* light */ + --chart-9: rgba(29,81,103,100%); /* light */ +} + +.dark.chart-turquoise { + --chart-2: rgba(211,226,191,100%); /* dark */ + --chart-3: rgba(191,210,174,100%); /* dark */ + --chart-4: rgba(171,196,160,100%); /* dark */ + --chart-5: rgba(151,186,154,100%); /* dark */ + --chart-6: rgba(131,176,148,100%); /* dark */ + --chart-7: rgba(112,163,141,100%); /* dark */ + --chart-8: rgba(92,147,132,100%); /* light */ + --chart-9: rgba(72,131,123,100%); /* light */ +} + +.chart-purplish { + --chart-1: rgba(170,207,246,100%); /* dark */ + --chart-2: rgba(146,179,235,100%); /* dark */ + --chart-3: rgba(123,151,225,100%); /* dark */ + --chart-4: rgba(108,124,210,100%); /* dark */ + --chart-5: rgba(100,97,192,100%); /* light */ + --chart-6: rgba(92,69,174,100%); /* light */ + --chart-7: rgba(83,46,147,100%); /* light */ + --chart-8: rgba(74,25,117,100%); /* light */ + --chart-9: rgba(66,4,87,100%); /* light */ +} + +.dark.chart-purplish { + --chart-2: rgba(211,236,252,100%); /* dark */ + --chart-3: rgba(191,223,250,100%); /* dark */ + --chart-4: rgba(170,207,246,100%); /* dark */ + --chart-5: rgba(146,179,235,100%); /* dark */ + --chart-6: rgba(123,151,225,100%); /* dark */ + --chart-7: rgba(108,124,210,100%); /* dark */ + --chart-8: rgba(100,97,192,100%); /* light */ + --chart-9: rgba(92,69,174,100%); /* light */ +} + +.chart-dirt { + --chart-1: rgba(193,153,67,100%); /* dark */ + --chart-2: rgba(175,133,59,100%); /* dark */ + --chart-3: rgba(158,115,52,100%); /* light */ + --chart-4: rgba(139,97,46,100%); /* light */ + --chart-5: rgba(121,80,39,100%); /* light */ + --chart-6: rgba(101,64,32,100%); /* light */ + --chart-7: rgba(82,49,25,100%); /* light */ + --chart-8: rgba(63,35,17,100%); /* light */ + --chart-9: rgba(44,22,10,100%); /* light */ +} + +.dark.chart-dirt { + --chart-2: rgba(225,194,83,100%); /* dark */ + --chart-3: rgba(210,173,74,100%); /* dark */ + --chart-4: rgba(193,153,67,100%); /* dark */ + --chart-5: rgba(175,133,59,100%); /* dark */ + --chart-6: rgba(158,115,52,100%); /* light */ + --chart-7: rgba(139,97,46,100%); /* light */ + --chart-8: rgba(121,80,39,100%); /* light */ + --chart-9: rgba(101,64,32,100%); /* light */ +} + +.chart-lime { + --chart-1: rgba(146,192,99,100%); /* dark */ + --chart-2: rgba(119,172,95,100%); /* dark */ + --chart-3: rgba(95,153,90,100%); /* light */ + --chart-4: rgba(73,133,85,100%); /* light */ + --chart-5: rgba(54,114,78,100%); /* light */ + --chart-6: rgba(39,94,69,100%); /* light */ + --chart-7: rgba(25,75,59,100%); /* light */ + --chart-8: rgba(16,57,47,100%); /* light */ + --chart-9: rgba(7,40,36,100%); /* light */ +} + +.dark.chart-lime { + --chart-2: rgba(209,229,106,100%); /* dark */ + --chart-3: rgba(175,211,102,100%); /* dark */ + --chart-4: rgba(146,192,99,100%); /* dark */ + --chart-5: rgba(119,172,95,100%); /* dark */ + --chart-6: rgba(95,153,90,100%); /* light */ + --chart-7: rgba(73,133,85,100%); /* light */ + --chart-8: rgba(54,114,78,100%); /* light */ + --chart-9: rgba(39,94,69,100%); /* light */ +} + +.chart-teal { + --chart-1: rgba(71,184,151,100%); /* dark */ + --chart-2: rgba(54,164,144,100%); /* light */ + --chart-3: rgba(44,144,134,100%); /* light */ + --chart-4: rgba(39,124,123,100%); /* light */ + --chart-5: rgba(35,104,109,100%); /* light */ + --chart-6: rgba(33,85,93,100%); /* light */ + --chart-7: rgba(31,66,77,100%); /* light */ + --chart-8: rgba(26,49,60,100%); /* light */ + --chart-9: rgba(21,33,43,100%); /* light */ +} + +.dark.chart-teal { + --chart-2: rgba(115,226,159,100%); /* dark */ + --chart-3: rgba(90,204,157,100%); /* dark */ + --chart-4: rgba(71,184,151,100%); /* dark */ + --chart-5: rgba(54,164,144,100%); /* light */ + --chart-6: rgba(44,144,134,100%); /* light */ + --chart-7: rgba(39,124,123,100%); /* light */ + --chart-8: rgba(35,104,109,100%); /* light */ + --chart-9: rgba(33,85,93,100%); /* light */ +} + +.chart-bee { + --chart-1: rgba(243,227,127,100%); /* dark */ + --chart-2: rgba(230,199,95,100%); /* dark */ + --chart-3: rgba(216,171,63,100%); /* dark */ + --chart-4: rgba(196,142,41,100%); /* dark */ + --chart-5: rgba(168,113,28,100%); /* light */ + --chart-6: rgba(140,84,16,100%); /* light */ + --chart-7: rgba(112,64,12,100%); /* light */ + --chart-8: rgba(85,48,12,100%); /* light */ + --chart-9: rgba(58,32,12,100%); /* light */ +} + +.dark.chart-bee { + --chart-2: rgba(247,242,190,100%); /* dark */ + --chart-3: rgba(247,237,158,100%); /* dark */ + --chart-4: rgba(243,227,127,100%); /* dark */ + --chart-5: rgba(230,199,95,100%); /* dark */ + --chart-6: rgba(216,171,63,100%); /* dark */ + --chart-7: rgba(196,142,41,100%); /* dark */ + --chart-8: rgba(168,113,28,100%); /* light */ + --chart-9: rgba(140,84,16,100%); /* light */ +} + diff --git a/ui/theme/chartThemes.ts b/ui/theme/chartThemes.ts new file mode 100644 index 0000000..7225089 --- /dev/null +++ b/ui/theme/chartThemes.ts @@ -0,0 +1,46 @@ +import "./chartThemes.css"; + +export type ChartTheme = + | "chart-viridis" + | "chart-inferno" + | "chart-magma" + | "chart-plasma" + | "chart-grayscale" + | "chart-parula" + | "chart-emerald" + | "chart-mint" + | "chart-sunset" + | "chart-dusk" + | "chart-chroma" + | "chart-spectral" + | "chart-cool" + | "chart-warm" + | "chart-turquoise" + | "chart-purplish" + | "chart-dirt" + | "chart-lime" + | "chart-teal" + | "chart-bee"; + +export const chartThemes: ChartTheme[] = [ + "chart-viridis", + "chart-inferno", + "chart-magma", + "chart-plasma", + "chart-grayscale", + "chart-parula", + "chart-emerald", + "chart-mint", + "chart-sunset", + "chart-dusk", + "chart-chroma", + "chart-spectral", + "chart-cool", + "chart-warm", + "chart-turquoise", + "chart-purplish", + "chart-dirt", + "chart-lime", + "chart-teal", + "chart-bee" +]; diff --git a/ui/theme/themes.css b/ui/theme/themes.css index 674d9e1..b25c921 100644 --- a/ui/theme/themes.css +++ b/ui/theme/themes.css @@ -40,16 +40,6 @@ --info: 226 71% 40%; --info-foreground: 210 40% 98%; - --chart-1: 60 100% 50%; - --chart-2: 71 100% 48%; - --chart-3: 84 100% 45%; - --chart-4: 102 100% 42%; - --chart-5: 124 100% 37%; - --chart-6: 155 100% 30%; - --chart-7: 181 100% 25%; - --chart-8: 195 100% 22%; - --chart-9: 211 100% 19%; - --ring: 215 20.2% 65.1%; --panel-opacity: 0.5; --radius: 0.5rem;