@sit-onyx/chartjs-plugin 1.0.0-alpha.63 → 1.0.0-alpha.64

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/chartjs-plugin",
   "description": "A Chart.js plugin for the onyx design system created by Schwarz IT",
-  "version": "1.0.0-alpha.63",
+  "version": "1.0.0-alpha.64",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

package/src/plugin.ts

@@ -10,7 +10,7 @@ import {
   type ScaleOptionsByType,
   type ScaleTypeRegistry,
 } from "chart.js";
-import { getCSSVariableValue, hexToRgb } from "./utils";
+import { QUANTITATIVE_COLOR_STEPS, getCSSVariableValue, hexToRgb } from "./utils";
 
 /**
  * Registers the onyx Chart.js plugin and updates the default styles (colors, fonts etc.) to match
@@ -207,17 +207,9 @@ const colorizeDataset = (dataset: ChartDataset, offset = 0, allData = false) =>
 /**
  * Available colors to choose from for default dataset styles.
  */
-const COLORS = [
-  "--onyx-color-base-quantitatives-100",
-  "--onyx-color-base-quantitatives-200",
-  "--onyx-color-base-quantitatives-300",
-  "--onyx-color-base-quantitatives-400",
-  "--onyx-color-base-quantitatives-500",
-  "--onyx-color-base-quantitatives-600",
-  "--onyx-color-base-quantitatives-700",
-  "--onyx-color-base-quantitatives-800",
-  "--onyx-color-base-quantitatives-900",
-] as const;
+const COLORS = QUANTITATIVE_COLOR_STEPS.map(
+  (step) => `--onyx-color-base-quantitatives-${step}` as const,
+);
 
 /**
  * Gets a border color.

package/src/utils.ts

@@ -1,5 +1,10 @@
 import type { OnyxColor } from "sit-onyx/types";
 
+export const QUANTITATIVE_COLOR_STEPS = [
+  100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200,
+] as const;
+export type QuantitativeColorStep = (typeof QUANTITATIVE_COLOR_STEPS)[number];
+
 /**
  * Utility for easily styling a Chart.js dataset with a specific onyx color.
  * Will be updated automatically when switching between light/dark mode.
@@ -18,9 +23,7 @@ import type { OnyxColor } from "sit-onyx/types";
  * };
  * ```
  */
-export const getDatasetColors = (
-  color: OnyxColor | `quantitatives-${100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}`,
-) => {
+export const getDatasetColors = (color: OnyxColor | `quantitatives-${QuantitativeColorStep}`) => {
   const cssVariable = `--onyx-color-base-${color.startsWith("quantitatives-") ? color : `${color}-500`}`;
   // we use arrow functions here so the value is updated / re-evaluated when
   // switched between light and dark mode