@area8975/ui 0.2.1-dev.28 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@area8975/ui",
-  "version": "0.2.1-dev.28",
+  "version": "0.2.1",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
@@ -33,4 +33,4 @@
   "module": "fesm2022/area8975-ui.mjs",
   "typings": "types/area8975-ui.d.ts",
   "type": "module"
-}
+}

package/types/area8975-ui.d.ts

@@ -32,6 +32,135 @@ export type ChartLegendPosition = 'auto' | 'none';
 export declare const CHART_PALETTE: readonly ["#2a78d6", "#eb6834", "#1baf7a", "#eda100", "#e87ba4", "#008300", "#4a3aa7", "#e34948"];
 /** Violet and green are lightened to keep 3:1 contrast on a dark card. */
 export declare const CHART_PALETTE_DARK: readonly ["#2a78d6", "#eb6834", "#1baf7a", "#eda100", "#e87ba4", "#2e9e2e", "#8a7cf0", "#e34948"];
+/** A colour someone picks for a thing, e.g. a category, that every chart then draws it in. */
+export interface ChartColour {
+  /** Stable, safe to store. Never rename or reuse one. */
+  readonly key: string;
+  /** What to call it in a picker, and for screen readers. */
+  readonly label: string;
+  /** On a light card (`CHART_INK.surface`), at least 3:1. */
+  readonly light: string;
+  /** On a dark card (`CHART_INK_DARK.surface`), at least 3:1. */
+  readonly dark: string;
+}
+/**
+ * Every colour that can be picked, the automatic palette first. Too many to tell
+ * apart by colour alone for everyone, so always show a label alongside.
+ */
+export declare const CHART_COLOURS: readonly [{
+  readonly key: "blue";
+  readonly label: "Blue";
+  readonly light: "#2a78d6";
+  readonly dark: "#2a78d6";
+}, {
+  readonly key: "orange";
+  readonly label: "Orange";
+  readonly light: "#eb6834";
+  readonly dark: "#eb6834";
+}, {
+  readonly key: "teal";
+  readonly label: "Teal";
+  readonly light: "#1baf7a";
+  readonly dark: "#1baf7a";
+}, {
+  readonly key: "amber";
+  readonly label: "Amber";
+  readonly light: "#eda100";
+  readonly dark: "#eda100";
+}, {
+  readonly key: "pink";
+  readonly label: "Pink";
+  readonly light: "#e87ba4";
+  readonly dark: "#e87ba4";
+}, {
+  readonly key: "green";
+  readonly label: "Green";
+  readonly light: "#008300";
+  readonly dark: "#2e9e2e";
+}, {
+  readonly key: "violet";
+  readonly label: "Violet";
+  readonly light: "#4a3aa7";
+  readonly dark: "#8a7cf0";
+}, {
+  readonly key: "red";
+  readonly label: "Red";
+  readonly light: "#e34948";
+  readonly dark: "#e34948";
+}, {
+  readonly key: "magenta";
+  readonly label: "Magenta";
+  readonly light: "#7e147e";
+  readonly dark: "#ab46aa";
+}, {
+  readonly key: "dark-yellow";
+  readonly label: "Dark yellow";
+  readonly light: "#a16d03";
+  readonly dark: "#a16d03";
+}, {
+  readonly key: "dark-cyan";
+  readonly label: "Dark cyan";
+  readonly light: "#046971";
+  readonly dark: "#247b83";
+}, {
+  readonly key: "mauve";
+  readonly label: "Mauve";
+  readonly light: "#693c5f";
+  readonly dark: "#916185";
+}, {
+  readonly key: "cyan";
+  readonly label: "Cyan";
+  readonly light: "#309fb3";
+  readonly dark: "#309fb3";
+}, {
+  readonly key: "light-purple";
+  readonly label: "Light purple";
+  readonly light: "#cb65e1";
+  readonly dark: "#cb65e1";
+}, {
+  readonly key: "lilac";
+  readonly label: "Lilac";
+  readonly light: "#ad87b6";
+  readonly dark: "#ad87b6";
+}, {
+  readonly key: "olive";
+  readonly label: "Olive";
+  readonly light: "#989401";
+  readonly dark: "#989401";
+}, {
+  readonly key: "dark-red";
+  readonly label: "Dark red";
+  readonly light: "#842e26";
+  readonly dark: "#ae544a";
+}, {
+  readonly key: "dark-green";
+  readonly label: "Dark green";
+  readonly light: "#406020";
+  readonly dark: "#597b3a";
+}, {
+  readonly key: "tan";
+  readonly label: "Tan";
+  readonly light: "#bd8a66";
+  readonly dark: "#bd8a66";
+}, {
+  readonly key: "purple";
+  readonly label: "Purple";
+  readonly light: "#7845ce";
+  readonly dark: "#8452db";
+}, {
+  readonly key: "deep-pink";
+  readonly label: "Deep pink";
+  readonly light: "#db4594";
+  readonly dark: "#db4594";
+}, {
+  readonly key: "grey-blue";
+  readonly label: "Grey blue";
+  readonly light: "#6f7db0";
+  readonly dark: "#6f7db0";
+}];
+export type ChartColourKey = typeof CHART_COLOURS[number]['key'];
+/** The shade of a picked colour for the current theme. */
+export declare function pickedChartColour(key: ChartColourKey, dark?: boolean): string;
 /** Past eight series, fold the rest into "Other" instead of reusing a colour. */
 export declare const CHART_MAX_SERIES: 8;
 /** Lines can go to sixteen, the second eight reuse the colours dashed. */