@area8975/ui 0.2.2-dev.49 → 0.2.2-dev.50

package/types/area8975-ui-card-header.d.ts

@@ -0,0 +1,28 @@
+import * as i0 from "@angular/core";
+export declare class UiCardHeaderComponent {
+  readonly heading: import("@angular/core").InputSignal<string>;
+  readonly subtitle: import("@angular/core").InputSignal<string>;
+  /** Pick the level that fits the page's outline, it doesn't change the look. */
+  readonly headingLevel: import("@angular/core").InputSignal<2 | 3 | 4>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCardHeaderComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiCardHeaderComponent, "ui-card-header", never, {
+    "heading": {
+      "alias": "heading";
+      "required": true;
+      "isSignal": true;
+    };
+    "subtitle": {
+      "alias": "subtitle";
+      "required": false;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+export declare const CardHeadingLevels: readonly [2, 3, 4];
+/** @see {@link CardHeadingLevels} */
+export type CardHeadingLevel = typeof CardHeadingLevels[number];

package/types/area8975-ui-card.d.ts

@@ -0,0 +1,18 @@
+import * as i0 from "@angular/core";
+export declare class UiCardComponent {
+  readonly radius: import("@angular/core").InputSignal<"none" | "sm" | "md" | "lg" | "xl">;
+  readonly generatedClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCardComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiCardComponent, "ui-card", never, {
+    "radius": {
+      "alias": "radius";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/** The radius that a card can hold. Maps directly to tailwindcss' rounded classes. */
+export declare const CardRadii: readonly ["none", "sm", "md", "lg", "xl"];
+/** @see {@link CardRadii} */
+export type CardRadius = typeof CardRadii[number];
+export declare const radiusClasses: Record<CardRadius, string>;

package/types/area8975-ui-chart-palette.d.ts

@@ -0,0 +1,176 @@
+/**
+ * Categorical colours for chart series, in a fixed order that was checked for
+ * colour blindness (adjacent pairs stay apart for protan, deutan and tritan).
+ * Keep the order, a series takes the next slot, never a generated colour.
+ */
+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. */
+export declare const CHART_MAX_LINE_SERIES: number;
+/** Chart chrome, apex needs real colours so these can't be CSS variables. */
+export interface ChartInk {
+  text: string;
+  muted: string;
+  grid: string;
+  surface: string;
+  context: string;
+}
+export declare const CHART_INK: ChartInk;
+export declare const CHART_INK_DARK: ChartInk;
+export declare function chartInk(dark: boolean): ChartInk;
+export interface ChartSeriesStyle {
+  colour: string;
+  dashed: boolean;
+}
+/** Past the eighth slot a series goes grey, reusing a colour would make two series look the same. */
+export declare function chartColour(index: number, dark?: boolean): string;
+/**
+ * Colour plus line style for a slot. With `dashes` the ninth to sixteenth
+ * slots reuse the colours as dashed lines, colour and dash together keep
+ * them apart. Anything past that is grey.
+ */
+export declare function chartSeriesStyle(index: number, dashes: boolean, dark?: boolean): ChartSeriesStyle;
+/**
+ * Blends `colour` towards `towards`, keeping `strength` of the original: 1 leaves
+ * it as it is, 0 gives `towards`. Apex can't parse color-mix(), so it's done
+ * here. Both must be six digit hex, anything else gives null.
+ */
+export declare function mixChartColours(colour: string, towards: string, strength: number): string | null;
+/**
+ * Dark or light text, whichever reads better on a mark filled with `background`.
+ * Judged by APCA, the contrast model drafted for WCAG 3: the WCAG 2 ratio
+ * puts black text on saturated orange and red, where white reads far better.
+ */
+export declare function chartLabelInk(background: string): string;