@panneau/ui 5.0.0-alpha.1 → 5.0.0-alpha.2

package/dist/theme/bootstrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../../src/theme/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,KAkD5B,CAAC"}
+{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../../src/theme/bootstrap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;GAKG;AACH,wBAAgB,aAAa,CACzB,KAAK,EAAE,MAAM,EACb,EAAE,SAA6B,EAAE,GAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAO,GAC/D,UAAU,CAUZ;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,KAoFF,CAAC"}

package/dist/theme/bootstrap.js

@@ -1,5 +1,22 @@
 //#region src/theme/bootstrap.ts
 /**
+* A tone from one of Bootstrap's theme colors, read from its CSS variables (`--bs-<color>`,
+* `-text-emphasis`, `-bg-subtle`, `-border-subtle`), so that a site's custom colors carry over:
+* `tones: { brand: bootstrapTone('brand') }`. Text on the subtle background uses the emphasis
+* color, as Bootstrap's alerts do. Light colors need dark solid text: `{ solidText: 'var(--bs-dark)' }`.
+*/
+function bootstrapTone(color, { solidText = "var(--bs-white)" } = {}) {
+	return {
+		text: `var(--bs-${color}-text-emphasis)`,
+		subtle: `var(--bs-${color}-bg-subtle)`,
+		border: `var(--bs-${color}-border-subtle)`,
+		outline: `var(--bs-${color})`,
+		solid: `var(--bs-${color})`,
+		solidHover: `color-mix(in srgb, var(--bs-${color}), #000 15%)`,
+		solidText
+	};
+}
+/**
 * Maps Panneau's tokens to the CSS variables of Bootstrap 5.3, for sites that use Bootstrap: Panneau
 * then follows the site's colors, fonts and radii, and its color mode (`data-bs-theme`), without
 * using any Bootstrap class. Bootstrap's CSS must be loaded by the site.
@@ -32,16 +49,24 @@ var bootstrapTheme = {
 		"panneau-color-success": "var(--bs-success-text-emphasis)",
 		"panneau-color-success-subtle": "var(--bs-success-bg-subtle)",
 		"panneau-color-success-border": "var(--bs-success-border-subtle)",
+		"panneau-color-success-solid": "var(--bs-success)",
+		"panneau-color-success-solid-hover": "color-mix(in srgb, var(--bs-success), #000 15%)",
+		"panneau-color-success-solid-text": "var(--bs-white)",
 		"panneau-color-warning": "var(--bs-warning-text-emphasis)",
 		"panneau-color-warning-subtle": "var(--bs-warning-bg-subtle)",
 		"panneau-color-warning-border": "var(--bs-warning-border-subtle)",
+		"panneau-color-warning-solid": "var(--bs-warning)",
+		"panneau-color-warning-solid-hover": "color-mix(in srgb, var(--bs-warning), #000 10%)",
+		"panneau-color-warning-solid-text": "var(--bs-dark)",
 		"panneau-color-info": "var(--bs-info-text-emphasis)",
 		"panneau-color-info-subtle": "var(--bs-info-bg-subtle)",
 		"panneau-color-info-border": "var(--bs-info-border-subtle)",
-		"panneau-font-family": "var(--bs-body-font-family)",
+		"panneau-color-info-solid": "var(--bs-info)",
+		"panneau-color-info-solid-hover": "color-mix(in srgb, var(--bs-info), #000 10%)",
+		"panneau-color-info-solid-text": "var(--bs-dark)",
+		"panneau-font-family-body": "var(--bs-body-font-family)",
 		"panneau-font-family-mono": "var(--bs-font-monospace)",
 		"panneau-font-size-md": "var(--bs-body-font-size)",
-		"panneau-font-size-control": "var(--bs-body-font-size)",
 		"panneau-line-height": "var(--bs-body-line-height)",
 		"panneau-radius-sm": "var(--bs-border-radius-sm)",
 		"panneau-radius-md": "var(--bs-border-radius)",
@@ -51,11 +76,29 @@ var bootstrapTheme = {
 		"panneau-shadow-sm": "var(--bs-box-shadow-sm)",
 		"panneau-shadow-md": "var(--bs-box-shadow)",
 		"panneau-shadow-lg": "var(--bs-box-shadow-lg)",
+		"panneau-heading-color": "var(--bs-heading-color)",
+		"panneau-badge-radius": "var(--bs-border-radius)",
+		"panneau-card-radius": "var(--bs-border-radius)",
+		"panneau-card-border-color": "var(--bs-border-color-translucent)",
+		"panneau-popover-radius": "var(--bs-border-radius)",
+		"panneau-popover-border-color": "var(--bs-border-color-translucent)",
+		"panneau-tooltip-bg": "var(--bs-emphasis-color)",
+		"panneau-tooltip-color": "var(--bs-body-bg)",
+		"panneau-tooltip-radius": "var(--bs-border-radius)"
+	},
+	tones: {
+		accent: bootstrapTone("primary"),
+		primary: bootstrapTone("primary"),
+		secondary: bootstrapTone("secondary")
+	},
+	densities: { comfortable: {
+		"panneau-font-size-control": "var(--bs-body-font-size)",
 		"panneau-control-height": "calc(1.5em + 0.75rem + 2 * var(--bs-border-width))",
-		"panneau-control-height-sm": "calc(1.5em + 0.5rem + 2 * var(--bs-border-width))"
-	}
+		"panneau-control-height-sm": "calc(1.5em + 0.5rem + 2 * var(--bs-border-width))",
+		"panneau-control-padding-x": "0.75rem"
+	} }
 };
 //#endregion
-export { bootstrapTheme };
+export { bootstrapTheme, bootstrapTone };
 
 //# sourceMappingURL=bootstrap.js.map

package/dist/theme/bootstrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrap.js","names":[],"sources":["../../src/theme/bootstrap.ts"],"sourcesContent":["import type { Theme } from './theme';\n\n/**\n * Maps Panneau's tokens to the CSS variables of Bootstrap 5.3, for sites that use Bootstrap: Panneau\n * then follows the site's colors, fonts and radii, and its color mode (`data-bs-theme`), without\n * using any Bootstrap class. Bootstrap's CSS must be loaded by the site.\n */\nexport const bootstrapTheme: Theme = {\n    label: 'Bootstrap',\n    tokens: {\n        'panneau-color-bg': 'var(--bs-body-bg)',\n        'panneau-color-surface': 'var(--bs-body-bg)',\n        'panneau-color-surface-sunken': 'var(--bs-tertiary-bg)',\n        'panneau-color-surface-raised': 'var(--bs-body-bg)',\n        'panneau-color-hover': 'rgba(var(--bs-emphasis-color-rgb), 0.06)',\n        'panneau-color-pressed': 'rgba(var(--bs-emphasis-color-rgb), 0.1)',\n        'panneau-color-text': 'var(--bs-body-color)',\n        'panneau-color-text-muted': 'var(--bs-secondary-color)',\n        'panneau-color-link': 'var(--bs-link-color)',\n        'panneau-color-border': 'var(--bs-border-color)',\n        'panneau-color-border-control': 'var(--bs-border-color)',\n        'panneau-color-accent': 'var(--bs-primary)',\n        'panneau-color-accent-hover': 'color-mix(in srgb, var(--bs-primary), #000 15%)',\n        'panneau-color-accent-text': 'var(--bs-white)',\n        'panneau-color-accent-subtle': 'var(--bs-primary-bg-subtle)',\n        'panneau-color-focus': 'rgba(var(--bs-primary-rgb), 0.5)',\n        'panneau-color-danger': 'var(--bs-danger-text-emphasis)',\n        'panneau-color-danger-subtle': 'var(--bs-danger-bg-subtle)',\n        'panneau-color-danger-border': 'var(--bs-danger-border-subtle)',\n        'panneau-color-danger-solid': 'var(--bs-danger)',\n        'panneau-color-danger-solid-hover': 'color-mix(in srgb, var(--bs-danger), #000 15%)',\n        'panneau-color-danger-solid-text': 'var(--bs-white)',\n        'panneau-color-success': 'var(--bs-success-text-emphasis)',\n        'panneau-color-success-subtle': 'var(--bs-success-bg-subtle)',\n        'panneau-color-success-border': 'var(--bs-success-border-subtle)',\n        'panneau-color-warning': 'var(--bs-warning-text-emphasis)',\n        'panneau-color-warning-subtle': 'var(--bs-warning-bg-subtle)',\n        'panneau-color-warning-border': 'var(--bs-warning-border-subtle)',\n        'panneau-color-info': 'var(--bs-info-text-emphasis)',\n        'panneau-color-info-subtle': 'var(--bs-info-bg-subtle)',\n        'panneau-color-info-border': 'var(--bs-info-border-subtle)',\n        'panneau-font-family': 'var(--bs-body-font-family)',\n        'panneau-font-family-mono': 'var(--bs-font-monospace)',\n        'panneau-font-size-md': 'var(--bs-body-font-size)',\n        'panneau-font-size-control': 'var(--bs-body-font-size)',\n        'panneau-line-height': 'var(--bs-body-line-height)',\n        'panneau-radius-sm': 'var(--bs-border-radius-sm)',\n        'panneau-radius-md': 'var(--bs-border-radius)',\n        'panneau-radius-lg': 'var(--bs-border-radius-lg)',\n        'panneau-radius-full': 'var(--bs-border-radius-pill)',\n        'panneau-border-width': 'var(--bs-border-width)',\n        'panneau-shadow-sm': 'var(--bs-box-shadow-sm)',\n        'panneau-shadow-md': 'var(--bs-box-shadow)',\n        'panneau-shadow-lg': 'var(--bs-box-shadow-lg)',\n        'panneau-control-height': 'calc(1.5em + 0.75rem + 2 * var(--bs-border-width))',\n        'panneau-control-height-sm': 'calc(1.5em + 0.5rem + 2 * var(--bs-border-width))',\n    },\n};\n"],"mappings":";;;;;;AAOA,IAAa,iBAAwB;CACjC,OAAO;CACP,QAAQ;EACJ,oBAAoB;EACpB,yBAAyB;EACzB,gCAAgC;EAChC,gCAAgC;EAChC,uBAAuB;EACvB,yBAAyB;EACzB,sBAAsB;EACtB,4BAA4B;EAC5B,sBAAsB;EACtB,wBAAwB;EACxB,gCAAgC;EAChC,wBAAwB;EACxB,8BAA8B;EAC9B,6BAA6B;EAC7B,+BAA+B;EAC/B,uBAAuB;EACvB,wBAAwB;EACxB,+BAA+B;EAC/B,+BAA+B;EAC/B,8BAA8B;EAC9B,oCAAoC;EACpC,mCAAmC;EACnC,yBAAyB;EACzB,gCAAgC;EAChC,gCAAgC;EAChC,yBAAyB;EACzB,gCAAgC;EAChC,gCAAgC;EAChC,sBAAsB;EACtB,6BAA6B;EAC7B,6BAA6B;EAC7B,uBAAuB;EACvB,4BAA4B;EAC5B,wBAAwB;EACxB,6BAA6B;EAC7B,uBAAuB;EACvB,qBAAqB;EACrB,qBAAqB;EACrB,qBAAqB;EACrB,uBAAuB;EACvB,wBAAwB;EACxB,qBAAqB;EACrB,qBAAqB;EACrB,qBAAqB;EACrB,0BAA0B;EAC1B,6BAA6B;CACjC;AACJ"}
+{"version":3,"file":"bootstrap.js","names":[],"sources":["../../src/theme/bootstrap.ts"],"sourcesContent":["import type { ThemeDefinition } from './defineTheme';\nimport type { Theme } from './theme';\nimport type { ToneValues } from './tones';\n\n/**\n * A tone from one of Bootstrap's theme colors, read from its CSS variables (`--bs-<color>`,\n * `-text-emphasis`, `-bg-subtle`, `-border-subtle`), so that a site's custom colors carry over:\n * `tones: { brand: bootstrapTone('brand') }`. Text on the subtle background uses the emphasis\n * color, as Bootstrap's alerts do. Light colors need dark solid text: `{ solidText: 'var(--bs-dark)' }`.\n */\nexport function bootstrapTone(\n    color: string,\n    { solidText = 'var(--bs-white)' }: { solidText?: string } = {},\n): ToneValues {\n    return {\n        text: `var(--bs-${color}-text-emphasis)`,\n        subtle: `var(--bs-${color}-bg-subtle)`,\n        border: `var(--bs-${color}-border-subtle)`,\n        outline: `var(--bs-${color})`,\n        solid: `var(--bs-${color})`,\n        solidHover: `color-mix(in srgb, var(--bs-${color}), #000 15%)`,\n        solidText,\n    };\n}\n\n/**\n * Maps Panneau's tokens to the CSS variables of Bootstrap 5.3, for sites that use Bootstrap: Panneau\n * then follows the site's colors, fonts and radii, and its color mode (`data-bs-theme`), without\n * using any Bootstrap class. Bootstrap's CSS must be loaded by the site.\n */\nexport const bootstrapTheme: Theme = {\n    label: 'Bootstrap',\n    tokens: {\n        'panneau-color-bg': 'var(--bs-body-bg)',\n        'panneau-color-surface': 'var(--bs-body-bg)',\n        'panneau-color-surface-sunken': 'var(--bs-tertiary-bg)',\n        'panneau-color-surface-raised': 'var(--bs-body-bg)',\n        'panneau-color-hover': 'rgba(var(--bs-emphasis-color-rgb), 0.06)',\n        'panneau-color-pressed': 'rgba(var(--bs-emphasis-color-rgb), 0.1)',\n        'panneau-color-text': 'var(--bs-body-color)',\n        'panneau-color-text-muted': 'var(--bs-secondary-color)',\n        'panneau-color-link': 'var(--bs-link-color)',\n        'panneau-color-border': 'var(--bs-border-color)',\n        'panneau-color-border-control': 'var(--bs-border-color)',\n        'panneau-color-accent': 'var(--bs-primary)',\n        'panneau-color-accent-hover': 'color-mix(in srgb, var(--bs-primary), #000 15%)',\n        'panneau-color-accent-text': 'var(--bs-white)',\n        'panneau-color-accent-subtle': 'var(--bs-primary-bg-subtle)',\n        'panneau-color-focus': 'rgba(var(--bs-primary-rgb), 0.5)',\n        'panneau-color-danger': 'var(--bs-danger-text-emphasis)',\n        'panneau-color-danger-subtle': 'var(--bs-danger-bg-subtle)',\n        'panneau-color-danger-border': 'var(--bs-danger-border-subtle)',\n        'panneau-color-danger-solid': 'var(--bs-danger)',\n        'panneau-color-danger-solid-hover': 'color-mix(in srgb, var(--bs-danger), #000 15%)',\n        'panneau-color-danger-solid-text': 'var(--bs-white)',\n        'panneau-color-success': 'var(--bs-success-text-emphasis)',\n        'panneau-color-success-subtle': 'var(--bs-success-bg-subtle)',\n        'panneau-color-success-border': 'var(--bs-success-border-subtle)',\n        'panneau-color-success-solid': 'var(--bs-success)',\n        'panneau-color-success-solid-hover': 'color-mix(in srgb, var(--bs-success), #000 15%)',\n        'panneau-color-success-solid-text': 'var(--bs-white)',\n        'panneau-color-warning': 'var(--bs-warning-text-emphasis)',\n        'panneau-color-warning-subtle': 'var(--bs-warning-bg-subtle)',\n        'panneau-color-warning-border': 'var(--bs-warning-border-subtle)',\n        'panneau-color-warning-solid': 'var(--bs-warning)',\n        'panneau-color-warning-solid-hover': 'color-mix(in srgb, var(--bs-warning), #000 10%)',\n        // Like Bootstrap's .btn-warning and .text-bg-warning: dark text on yellow.\n        'panneau-color-warning-solid-text': 'var(--bs-dark)',\n        'panneau-color-info': 'var(--bs-info-text-emphasis)',\n        'panneau-color-info-subtle': 'var(--bs-info-bg-subtle)',\n        'panneau-color-info-border': 'var(--bs-info-border-subtle)',\n        'panneau-color-info-solid': 'var(--bs-info)',\n        'panneau-color-info-solid-hover': 'color-mix(in srgb, var(--bs-info), #000 10%)',\n        'panneau-color-info-solid-text': 'var(--bs-dark)',\n        'panneau-font-family-body': 'var(--bs-body-font-family)',\n        'panneau-font-family-mono': 'var(--bs-font-monospace)',\n        'panneau-font-size-md': 'var(--bs-body-font-size)',\n        'panneau-line-height': 'var(--bs-body-line-height)',\n        'panneau-radius-sm': 'var(--bs-border-radius-sm)',\n        'panneau-radius-md': 'var(--bs-border-radius)',\n        'panneau-radius-lg': 'var(--bs-border-radius-lg)',\n        'panneau-radius-full': 'var(--bs-border-radius-pill)',\n        'panneau-border-width': 'var(--bs-border-width)',\n        'panneau-shadow-sm': 'var(--bs-box-shadow-sm)',\n        'panneau-shadow-md': 'var(--bs-box-shadow)',\n        'panneau-shadow-lg': 'var(--bs-box-shadow-lg)',\n        // Bootstrap 5.3 declares its component variables (--bs-btn-*, --bs-card-*) on the classes\n        // of its components, out of reach: components map to the root variables those default to.\n        'panneau-heading-color': 'var(--bs-heading-color)',\n        'panneau-badge-radius': 'var(--bs-border-radius)',\n        'panneau-card-radius': 'var(--bs-border-radius)',\n        'panneau-card-border-color': 'var(--bs-border-color-translucent)',\n        'panneau-popover-radius': 'var(--bs-border-radius)',\n        'panneau-popover-border-color': 'var(--bs-border-color-translucent)',\n        'panneau-tooltip-bg': 'var(--bs-emphasis-color)',\n        'panneau-tooltip-color': 'var(--bs-body-bg)',\n        'panneau-tooltip-radius': 'var(--bs-border-radius)',\n    },\n    // Bootstrap's theme colors as tones: accent is primary, and primary and secondary are there by\n    // their Bootstrap names (declare them in PanneauTones to use them).\n    tones: {\n        accent: bootstrapTone('primary'),\n        primary: bootstrapTone('primary'),\n        secondary: bootstrapTone('secondary'),\n    },\n    // Bootstrap's sizes of controls are those of the comfortable density: the others keep Panneau's.\n    densities: {\n        comfortable: {\n            'panneau-font-size-control': 'var(--bs-body-font-size)',\n            'panneau-control-height': 'calc(1.5em + 0.75rem + 2 * var(--bs-border-width))',\n            'panneau-control-height-sm': 'calc(1.5em + 0.5rem + 2 * var(--bs-border-width))',\n            'panneau-control-padding-x': '0.75rem',\n        },\n    },\n} satisfies ThemeDefinition;\n"],"mappings":";;;;;;;AAUA,SAAgB,cACZ,OACA,EAAE,YAAY,sBAA8C,CAAC,GACnD;CACV,OAAO;EACH,MAAM,YAAY,MAAK;EACvB,QAAQ,YAAY,MAAK;EACzB,QAAQ,YAAY,MAAK;EACzB,SAAS,YAAY,MAAK;EAC1B,OAAO,YAAY,MAAK;EACxB,YAAY,+BAA+B,MAAK;EAChD;CACJ;AACJ;;;;;;AAOA,IAAa,iBAAwB;CACjC,OAAO;CACP,QAAQ;EACJ,oBAAoB;EACpB,yBAAyB;EACzB,gCAAgC;EAChC,gCAAgC;EAChC,uBAAuB;EACvB,yBAAyB;EACzB,sBAAsB;EACtB,4BAA4B;EAC5B,sBAAsB;EACtB,wBAAwB;EACxB,gCAAgC;EAChC,wBAAwB;EACxB,8BAA8B;EAC9B,6BAA6B;EAC7B,+BAA+B;EAC/B,uBAAuB;EACvB,wBAAwB;EACxB,+BAA+B;EAC/B,+BAA+B;EAC/B,8BAA8B;EAC9B,oCAAoC;EACpC,mCAAmC;EACnC,yBAAyB;EACzB,gCAAgC;EAChC,gCAAgC;EAChC,+BAA+B;EAC/B,qCAAqC;EACrC,oCAAoC;EACpC,yBAAyB;EACzB,gCAAgC;EAChC,gCAAgC;EAChC,+BAA+B;EAC/B,qCAAqC;EAErC,oCAAoC;EACpC,sBAAsB;EACtB,6BAA6B;EAC7B,6BAA6B;EAC7B,4BAA4B;EAC5B,kCAAkC;EAClC,iCAAiC;EACjC,4BAA4B;EAC5B,4BAA4B;EAC5B,wBAAwB;EACxB,uBAAuB;EACvB,qBAAqB;EACrB,qBAAqB;EACrB,qBAAqB;EACrB,uBAAuB;EACvB,wBAAwB;EACxB,qBAAqB;EACrB,qBAAqB;EACrB,qBAAqB;EAGrB,yBAAyB;EACzB,wBAAwB;EACxB,uBAAuB;EACvB,6BAA6B;EAC7B,0BAA0B;EAC1B,gCAAgC;EAChC,sBAAsB;EACtB,yBAAyB;EACzB,0BAA0B;CAC9B;CAGA,OAAO;EACH,QAAQ,cAAc,SAAS;EAC/B,SAAS,cAAc,SAAS;EAChC,WAAW,cAAc,WAAW;CACxC;CAEA,WAAW,EACP,aAAa;EACT,6BAA6B;EAC7B,0BAA0B;EAC1B,6BAA6B;EAC7B,6BAA6B;CACjC,EACJ;AACJ"}

package/dist/theme/chartColors.d.ts

@@ -0,0 +1,23 @@
+/** The number of categorical chart colors: series beyond it reuse them in order. */
+export declare const CHART_CATEGORICAL_COUNT = 8;
+/** The number of steps of the sequential chart ramp. */
+export declare const CHART_SEQUENTIAL_COUNT = 5;
+/**
+ * The colors of charts, as CSS variables for `fill` and `stroke`: they follow the theme, the color
+ * scheme and the scope of the chart. Dashboard charts use only these.
+ *
+ * - `categorical(index)`: the color of a series, in a fixed order (`index` from 0), repeating after
+ *   8. Each one reaches 3:1 against the surface and stays distinct with color vision deficiencies.
+ * - `sequential(step)`: a step from 1 (low) to 5 (high) of a ramp, for quantities.
+ * - `diverging`: two colors around a neutral midpoint, for values above and below a reference.
+ */
+export declare const chartColors: Readonly<{
+    categorical: (index: number) => string;
+    sequential: (step: 1 | 2 | 3 | 4 | 5) => string;
+    diverging: Readonly<{
+        negative: "var(--panneau-chart-diverging-negative)";
+        neutral: "var(--panneau-chart-diverging-neutral)";
+        positive: "var(--panneau-chart-diverging-positive)";
+    }>;
+}>;
+//# sourceMappingURL=chartColors.d.ts.map

package/dist/theme/chartColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartColors.d.ts","sourceRoot":"","sources":["../../src/theme/chartColors.ts"],"names":[],"mappings":"AAAA,oFAAoF;AACpF,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAEzC,wDAAwD;AACxD,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW;yBACC,MAAM,KAAG,MAAM;uBAEjB,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,KAAG,MAAM;;;;;;EAM/C,CAAC"}

package/dist/theme/chartColors.js

@@ -0,0 +1,27 @@
+//#region src/theme/chartColors.ts
+/** The number of categorical chart colors: series beyond it reuse them in order. */
+var CHART_CATEGORICAL_COUNT = 8;
+/** The number of steps of the sequential chart ramp. */
+var CHART_SEQUENTIAL_COUNT = 5;
+/**
+* The colors of charts, as CSS variables for `fill` and `stroke`: they follow the theme, the color
+* scheme and the scope of the chart. Dashboard charts use only these.
+*
+* - `categorical(index)`: the color of a series, in a fixed order (`index` from 0), repeating after
+*   8. Each one reaches 3:1 against the surface and stays distinct with color vision deficiencies.
+* - `sequential(step)`: a step from 1 (low) to 5 (high) of a ramp, for quantities.
+* - `diverging`: two colors around a neutral midpoint, for values above and below a reference.
+*/
+var chartColors = Object.freeze({
+	categorical: (index) => `var(--panneau-chart-categorical-${(Math.floor(index) % 8 + 8) % 8 + 1})`,
+	sequential: (step) => `var(--panneau-chart-sequential-${step})`,
+	diverging: Object.freeze({
+		negative: "var(--panneau-chart-diverging-negative)",
+		neutral: "var(--panneau-chart-diverging-neutral)",
+		positive: "var(--panneau-chart-diverging-positive)"
+	})
+});
+//#endregion
+export { CHART_CATEGORICAL_COUNT, CHART_SEQUENTIAL_COUNT, chartColors };
+
+//# sourceMappingURL=chartColors.js.map

package/dist/theme/chartColors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartColors.js","names":[],"sources":["../../src/theme/chartColors.ts"],"sourcesContent":["/** The number of categorical chart colors: series beyond it reuse them in order. */\nexport const CHART_CATEGORICAL_COUNT = 8;\n\n/** The number of steps of the sequential chart ramp. */\nexport const CHART_SEQUENTIAL_COUNT = 5;\n\n/**\n * The colors of charts, as CSS variables for `fill` and `stroke`: they follow the theme, the color\n * scheme and the scope of the chart. Dashboard charts use only these.\n *\n * - `categorical(index)`: the color of a series, in a fixed order (`index` from 0), repeating after\n *   8. Each one reaches 3:1 against the surface and stays distinct with color vision deficiencies.\n * - `sequential(step)`: a step from 1 (low) to 5 (high) of a ramp, for quantities.\n * - `diverging`: two colors around a neutral midpoint, for values above and below a reference.\n */\nexport const chartColors = Object.freeze({\n    categorical: (index: number): string =>\n        `var(--panneau-chart-categorical-${(((Math.floor(index) % CHART_CATEGORICAL_COUNT) + CHART_CATEGORICAL_COUNT) % CHART_CATEGORICAL_COUNT) + 1})`,\n    sequential: (step: 1 | 2 | 3 | 4 | 5): string => `var(--panneau-chart-sequential-${step})`,\n    diverging: Object.freeze({\n        negative: 'var(--panneau-chart-diverging-negative)',\n        neutral: 'var(--panneau-chart-diverging-neutral)',\n        positive: 'var(--panneau-chart-diverging-positive)',\n    }),\n});\n"],"mappings":";;AACA,IAAa,0BAA0B;;AAGvC,IAAa,yBAAyB;;;;;;;;;;AAWtC,IAAa,cAAc,OAAO,OAAO;CACrC,cAAc,UACV,oCAAsC,KAAK,MAAM,KAAK,IAAA,IAAA,KAAA,IAAqF,EAAC;CAChJ,aAAa,SAAoC,kCAAkC,KAAI;CACvF,WAAW,OAAO,OAAO;EACrB,UAAU;EACV,SAAS;EACT,UAAU;CACd,CAAC;AACL,CAAC"}

package/dist/theme/checkTheme.d.ts

@@ -0,0 +1,39 @@
+import { type ColorDifferenceCheck } from './colorVision';
+import { type Theme } from './theme';
+/** A pair of colors that a theme must keep readable. */
+export interface ThemeContrastCheck {
+    scheme: 'light' | 'dark';
+    /** What is checked: `tone signal: text on surface`, `tokens: text on bg`. */
+    name: string;
+    foreground: string;
+    background: string;
+    /** The contrast ratio, or `null` when a color can't be read (a CSS variable, `color-mix()`). */
+    ratio: number | null;
+    minimum: number;
+}
+export interface ThemeReport {
+    /** Every pair checked. */
+    checks: ThemeContrastCheck[];
+    /** Pairs below their minimum ratio. */
+    failures: ThemeContrastCheck[];
+    /** Pairs with a color Panneau can't read: check them in a browser. */
+    unchecked: ThemeContrastCheck[];
+    /**
+     * Categorical chart colors of the theme that look too alike, for typical vision or with a
+     * color vision deficiency.
+     */
+    colorDifferences: (ColorDifferenceCheck & {
+        scheme: 'light' | 'dark';
+    })[];
+}
+/**
+ * Checks the contrast of a theme, like Bootstrap's `$min-contrast-ratio`, but as a report: text
+ * tokens against backgrounds (4.5:1), control borders (3:1), and every tone of the theme (its text
+ * on the surface, its solid text on the solid background and its hover), and chart colors (3:1
+ * against the surface, and categorical colors distinct with color vision deficiencies). Pairs where a color comes
+ * from the default theme and is not set by the theme are skipped, except the surface, which falls
+ * back to the default one. Values that refer to the theme's palette or tokens with `var()` are
+ * checked as what they refer to; colors Panneau can't read are listed as unchecked.
+ */
+export declare function checkTheme(theme: Theme): ThemeReport;
+//# sourceMappingURL=checkTheme.d.ts.map

package/dist/theme/checkTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkTheme.d.ts","sourceRoot":"","sources":["../../src/theme/checkTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,oBAAoB,EAAyB,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,KAAK,KAAK,EAAqD,MAAM,SAAS,CAAC;AAGxF,wDAAwD;AACxD,MAAM,WAAW,kBAAkB;IAC/B,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,6EAA6E;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,gGAAgG;IAChG,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IACxB,0BAA0B;IAC1B,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,uCAAuC;IACvC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,sEAAsE;IACtE,SAAS,EAAE,kBAAkB,EAAE,CAAC;IAChC;;;OAGG;IACH,gBAAgB,EAAE,CAAC,oBAAoB,GAAG;QAAE,MAAM,EAAE,OAAO,GAAG,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;CAC7E;AA2CD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,WAAW,CAgHpD"}

package/dist/theme/checkTheme.js

@@ -0,0 +1,132 @@
+import { WHITE, contrastRatio, mixColors, parseColor } from "./color.js";
+import { MIN_CONTRAST_RATIO, SUBTLE_AMOUNTS, resolveTone } from "./tones.js";
+import { paletteVariables, resolveReference, themeSurfaces } from "./theme.js";
+import { checkColorDifferences } from "./colorVision.js";
+//#region src/theme/checkTheme.ts
+/** Surfaces of the default theme, used when a theme doesn't set its own. */
+var DEFAULT_SURFACES = {
+	light: WHITE,
+	dark: {
+		r: 24,
+		g: 24,
+		b: 27
+	}
+};
+/** Chart colors that must stand out from the surface: series, the high step and diverging ends. */
+var CHART_TOKENS = [
+	...Array.from({ length: 8 }, (_, index) => `panneau-chart-categorical-${index + 1}`),
+	"panneau-chart-sequential-5",
+	"panneau-chart-diverging-negative",
+	"panneau-chart-diverging-positive"
+];
+/** Non-text elements (borders of controls, outlines) need 3:1 (WCAG 2 non-text contrast). */
+var MIN_NON_TEXT_RATIO = 3;
+var TOKEN_PAIRS = [
+	[
+		"text on bg",
+		"panneau-color-text",
+		"panneau-color-bg",
+		MIN_CONTRAST_RATIO
+	],
+	[
+		"text on surface",
+		"panneau-color-text",
+		"panneau-color-surface",
+		MIN_CONTRAST_RATIO
+	],
+	[
+		"muted text on surface",
+		"panneau-color-text-muted",
+		"panneau-color-surface",
+		MIN_CONTRAST_RATIO
+	],
+	[
+		"link on surface",
+		"panneau-color-link",
+		"panneau-color-surface",
+		MIN_CONTRAST_RATIO
+	],
+	[
+		"accent text on accent",
+		"panneau-color-accent-text",
+		"panneau-color-accent",
+		MIN_CONTRAST_RATIO
+	],
+	[
+		"control border on surface",
+		"panneau-color-border-control",
+		"panneau-color-surface",
+		MIN_NON_TEXT_RATIO
+	]
+];
+/**
+* Checks the contrast of a theme, like Bootstrap's `$min-contrast-ratio`, but as a report: text
+* tokens against backgrounds (4.5:1), control borders (3:1), and every tone of the theme (its text
+* on the surface, its solid text on the solid background and its hover), and chart colors (3:1
+* against the surface, and categorical colors distinct with color vision deficiencies). Pairs where a color comes
+* from the default theme and is not set by the theme are skipped, except the surface, which falls
+* back to the default one. Values that refer to the theme's palette or tokens with `var()` are
+* checked as what they refer to; colors Panneau can't read are listed as unchecked.
+*/
+function checkTheme(theme) {
+	const checks = [];
+	const colorDifferences = [];
+	const palette = paletteVariables(theme.palette);
+	const surfaces = themeSurfaces(theme);
+	["light", "dark"].forEach((scheme) => {
+		const variables = {
+			...palette,
+			...theme.tokens,
+			...scheme === "dark" ? theme.dark : void 0
+		};
+		const tokens = Object.fromEntries(Object.entries(variables).map(([name, value]) => [name, resolveReference(value, variables)]));
+		const surface = tokens["panneau-color-surface"];
+		const surfaceColor = surface !== void 0 ? parseColor(surface) : DEFAULT_SURFACES[scheme];
+		const add = (name, foreground, background, minimum, backgroundColor = parseColor(background)) => {
+			const foregroundColor = parseColor(foreground);
+			checks.push({
+				scheme,
+				name,
+				foreground,
+				background,
+				ratio: foregroundColor !== null && backgroundColor !== null ? Math.round(contrastRatio(foregroundColor, backgroundColor) * 100) / 100 : null,
+				minimum
+			});
+		};
+		TOKEN_PAIRS.forEach(([name, foreground, background, minimum]) => {
+			const foregroundValue = tokens[foreground];
+			const backgroundValue = tokens[background];
+			if (foregroundValue !== void 0 && backgroundValue !== void 0) add(`tokens: ${name}`, foregroundValue, backgroundValue, minimum);
+		});
+		const surfaceValue = surface ?? (scheme === "light" ? "#ffffff" : "#18181b");
+		CHART_TOKENS.forEach((token) => {
+			const value = tokens[token];
+			if (value !== void 0) add(`chart: ${token.replace("panneau-chart-", "")} on surface`, value, surfaceValue, MIN_NON_TEXT_RATIO, surfaceColor);
+		});
+		const categorical = CHART_TOKENS.filter((token) => token.includes("categorical")).flatMap((token) => tokens[token] !== void 0 ? [tokens[token]] : []);
+		colorDifferences.push(...checkColorDifferences(categorical).map((check) => ({
+			...check,
+			scheme
+		})));
+		Object.entries(theme.tones ?? {}).forEach(([tone, toneInput]) => {
+			const input = typeof toneInput === "string" ? resolveReference(toneInput, palette) : toneInput;
+			const values = resolveTone(input, surfaces)[scheme];
+			add(`tone ${tone}: text on surface`, values.text, surface ?? (scheme === "light" ? "#ffffff" : "#18181b"), MIN_CONTRAST_RATIO, surfaceColor);
+			const color = typeof input === "string" ? parseColor(input) : null;
+			const subtleColor = parseColor(values.subtle) ?? (color !== null && surfaceColor !== null ? mixColors(surfaceColor, color, SUBTLE_AMOUNTS[scheme]) : null);
+			add(`tone ${tone}: text on subtle`, values.text, values.subtle, MIN_CONTRAST_RATIO, subtleColor);
+			add(`tone ${tone}: solid text on solid`, values.solidText, values.solid, MIN_CONTRAST_RATIO);
+			add(`tone ${tone}: solid text on hover`, values.solidText, values.solidHover, MIN_CONTRAST_RATIO);
+		});
+	});
+	return {
+		checks,
+		failures: checks.filter((check) => check.ratio !== null && check.ratio < check.minimum),
+		unchecked: checks.filter((check) => check.ratio === null),
+		colorDifferences
+	};
+}
+//#endregion
+export { checkTheme };
+
+//# sourceMappingURL=checkTheme.js.map

package/dist/theme/checkTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkTheme.js","names":[],"sources":["../../src/theme/checkTheme.ts"],"sourcesContent":["import { type Rgb, WHITE, contrastRatio, mixColors, parseColor } from './color';\nimport { type ColorDifferenceCheck, checkColorDifferences } from './colorVision';\nimport { type Theme, paletteVariables, resolveReference, themeSurfaces } from './theme';\nimport { MIN_CONTRAST_RATIO, SUBTLE_AMOUNTS, resolveTone } from './tones';\n\n/** A pair of colors that a theme must keep readable. */\nexport interface ThemeContrastCheck {\n    scheme: 'light' | 'dark';\n    /** What is checked: `tone signal: text on surface`, `tokens: text on bg`. */\n    name: string;\n    foreground: string;\n    background: string;\n    /** The contrast ratio, or `null` when a color can't be read (a CSS variable, `color-mix()`). */\n    ratio: number | null;\n    minimum: number;\n}\n\nexport interface ThemeReport {\n    /** Every pair checked. */\n    checks: ThemeContrastCheck[];\n    /** Pairs below their minimum ratio. */\n    failures: ThemeContrastCheck[];\n    /** Pairs with a color Panneau can't read: check them in a browser. */\n    unchecked: ThemeContrastCheck[];\n    /**\n     * Categorical chart colors of the theme that look too alike, for typical vision or with a\n     * color vision deficiency.\n     */\n    colorDifferences: (ColorDifferenceCheck & { scheme: 'light' | 'dark' })[];\n}\n\n/** Surfaces of the default theme, used when a theme doesn't set its own. */\nconst DEFAULT_SURFACES: Record<'light' | 'dark', Rgb> = {\n    light: WHITE,\n    dark: { r: 24, g: 24, b: 27 },\n};\n\n/** Chart colors that must stand out from the surface: series, the high step and diverging ends. */\nconst CHART_TOKENS = [\n    ...Array.from({ length: 8 }, (_, index) => `panneau-chart-categorical-${index + 1}`),\n    'panneau-chart-sequential-5',\n    'panneau-chart-diverging-negative',\n    'panneau-chart-diverging-positive',\n];\n\n/** Non-text elements (borders of controls, outlines) need 3:1 (WCAG 2 non-text contrast). */\nconst MIN_NON_TEXT_RATIO = 3;\n\nconst TOKEN_PAIRS: [name: string, foreground: string, background: string, minimum: number][] = [\n    ['text on bg', 'panneau-color-text', 'panneau-color-bg', MIN_CONTRAST_RATIO],\n    ['text on surface', 'panneau-color-text', 'panneau-color-surface', MIN_CONTRAST_RATIO],\n    [\n        'muted text on surface',\n        'panneau-color-text-muted',\n        'panneau-color-surface',\n        MIN_CONTRAST_RATIO,\n    ],\n    ['link on surface', 'panneau-color-link', 'panneau-color-surface', MIN_CONTRAST_RATIO],\n    [\n        'accent text on accent',\n        'panneau-color-accent-text',\n        'panneau-color-accent',\n        MIN_CONTRAST_RATIO,\n    ],\n    [\n        'control border on surface',\n        'panneau-color-border-control',\n        'panneau-color-surface',\n        MIN_NON_TEXT_RATIO,\n    ],\n];\n\n/**\n * Checks the contrast of a theme, like Bootstrap's `$min-contrast-ratio`, but as a report: text\n * tokens against backgrounds (4.5:1), control borders (3:1), and every tone of the theme (its text\n * on the surface, its solid text on the solid background and its hover), and chart colors (3:1\n * against the surface, and categorical colors distinct with color vision deficiencies). Pairs where a color comes\n * from the default theme and is not set by the theme are skipped, except the surface, which falls\n * back to the default one. Values that refer to the theme's palette or tokens with `var()` are\n * checked as what they refer to; colors Panneau can't read are listed as unchecked.\n */\nexport function checkTheme(theme: Theme): ThemeReport {\n    const checks: ThemeContrastCheck[] = [];\n    const colorDifferences: ThemeReport['colorDifferences'] = [];\n    const palette = paletteVariables(theme.palette);\n    const surfaces = themeSurfaces(theme);\n    (['light', 'dark'] as const).forEach((scheme) => {\n        const variables = {\n            ...palette,\n            ...theme.tokens,\n            ...(scheme === 'dark' ? theme.dark : undefined),\n        };\n        const tokens = Object.fromEntries(\n            Object.entries(variables).map(([name, value]) => [\n                name,\n                resolveReference(value, variables),\n            ]),\n        );\n        const surface = tokens['panneau-color-surface'];\n        const surfaceColor = surface !== undefined ? parseColor(surface) : DEFAULT_SURFACES[scheme];\n        const add = (\n            name: string,\n            foreground: string,\n            background: string,\n            minimum: number,\n            backgroundColor: Rgb | null = parseColor(background),\n        ) => {\n            const foregroundColor = parseColor(foreground);\n            checks.push({\n                scheme,\n                name,\n                foreground,\n                background,\n                ratio:\n                    foregroundColor !== null && backgroundColor !== null\n                        ? Math.round(contrastRatio(foregroundColor, backgroundColor) * 100) / 100\n                        : null,\n                minimum,\n            });\n        };\n        TOKEN_PAIRS.forEach(([name, foreground, background, minimum]) => {\n            const foregroundValue = tokens[foreground];\n            const backgroundValue = tokens[background];\n            if (foregroundValue !== undefined && backgroundValue !== undefined) {\n                add(`tokens: ${name}`, foregroundValue, backgroundValue, minimum);\n            }\n        });\n        // Chart colors are graphics: 3:1 against the surface, and distinct from each other.\n        const surfaceValue = surface ?? (scheme === 'light' ? '#ffffff' : '#18181b');\n        CHART_TOKENS.forEach((token) => {\n            const value = tokens[token];\n            if (value !== undefined) {\n                add(\n                    `chart: ${token.replace('panneau-chart-', '')} on surface`,\n                    value,\n                    surfaceValue,\n                    MIN_NON_TEXT_RATIO,\n                    surfaceColor,\n                );\n            }\n        });\n        const categorical = CHART_TOKENS.filter((token) => token.includes('categorical')).flatMap(\n            (token) => (tokens[token] !== undefined ? [tokens[token]] : []),\n        );\n        colorDifferences.push(\n            ...checkColorDifferences(categorical).map((check) => ({ ...check, scheme })),\n        );\n        Object.entries(theme.tones ?? {}).forEach(([tone, toneInput]) => {\n            const input =\n                typeof toneInput === 'string' ? resolveReference(toneInput, palette) : toneInput;\n            const values = resolveTone(input, surfaces)[scheme];\n            add(\n                `tone ${tone}: text on surface`,\n                values.text,\n                surface ?? (scheme === 'light' ? '#ffffff' : '#18181b'),\n                MIN_CONTRAST_RATIO,\n                surfaceColor,\n            );\n            // The subtle background of a tone is often mixed with the surface in CSS: compute it\n            // against the surface of the scheme when it can't be read directly.\n            const color = typeof input === 'string' ? parseColor(input) : null;\n            const subtleColor =\n                parseColor(values.subtle) ??\n                (color !== null && surfaceColor !== null\n                    ? mixColors(surfaceColor, color, SUBTLE_AMOUNTS[scheme])\n                    : null);\n            add(\n                `tone ${tone}: text on subtle`,\n                values.text,\n                values.subtle,\n                MIN_CONTRAST_RATIO,\n                subtleColor,\n            );\n            add(\n                `tone ${tone}: solid text on solid`,\n                values.solidText,\n                values.solid,\n                MIN_CONTRAST_RATIO,\n            );\n            add(\n                `tone ${tone}: solid text on hover`,\n                values.solidText,\n                values.solidHover,\n                MIN_CONTRAST_RATIO,\n            );\n        });\n    });\n    return {\n        checks,\n        failures: checks.filter((check) => check.ratio !== null && check.ratio < check.minimum),\n        unchecked: checks.filter((check) => check.ratio === null),\n        colorDifferences,\n    };\n}\n"],"mappings":";;;;;;AAgCA,IAAM,mBAAkD;CACpD,OAAO;CACP,MAAM;EAAE,GAAG;EAAI,GAAG;EAAI,GAAG;CAAG;AAChC;;AAGA,IAAM,eAAe;CACjB,GAAG,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,UAAU,6BAA6B,QAAQ,GAAG;CACnF;CACA;CACA;AAAkC;;AAItC,IAAM,qBAAqB;AAE3B,IAAM,cAAyF;CAC3F;EAAC;EAAc;EAAsB;EAAoB;CAAkB;CAC3E;EAAC;EAAmB;EAAsB;EAAyB;CAAkB;CACrF;EACI;EACA;EACA;EACA;CAAkB;CAEtB;EAAC;EAAmB;EAAsB;EAAyB;CAAkB;CACrF;EACI;EACA;EACA;EACA;CAAkB;CAEtB;EACI;EACA;EACA;EACA;CAAkB;AACrB;;;;;;;;;;AAYL,SAAgB,WAAW,OAA2B;CAClD,MAAM,SAA+B,CAAA;CACrC,MAAM,mBAAoD,CAAA;CAC1D,MAAM,UAAU,iBAAiB,MAAM,OAAO;CAC9C,MAAM,WAAW,cAAc,KAAK;CACpC,CAAE,SAAS,MAAM,CAAC,CAAW,SAAS,WAAW;EAC7C,MAAM,YAAY;GACd,GAAG;GACH,GAAG,MAAM;GACT,GAAI,WAAW,SAAS,MAAM,OAAO,KAAA;EACzC;EACA,MAAM,SAAS,OAAO,YAClB,OAAO,QAAQ,SAAS,CAAC,CAAC,KAAK,CAAC,MAAM,WAAW,CAC7C,MACA,iBAAiB,OAAO,SAAS,CAAC,CACrC,CACL;EACA,MAAM,UAAU,OAAO;EACvB,MAAM,eAAe,YAAY,KAAA,IAAY,WAAW,OAAO,IAAI,iBAAiB;EACpF,MAAM,OACF,MACA,YACA,YACA,SACA,kBAA8B,WAAW,UAAU,MAClD;GACD,MAAM,kBAAkB,WAAW,UAAU;GAC7C,OAAO,KAAK;IACR;IACA;IACA;IACA;IACA,OACI,oBAAoB,QAAQ,oBAAoB,OAC1C,KAAK,MAAM,cAAc,iBAAiB,eAAe,IAAI,GAAG,IAAI,MACpE;IACV;GACJ,CAAC;EACL;EACA,YAAY,SAAS,CAAC,MAAM,YAAY,YAAY,aAAa;GAC7D,MAAM,kBAAkB,OAAO;GAC/B,MAAM,kBAAkB,OAAO;GAC/B,IAAI,oBAAoB,KAAA,KAAa,oBAAoB,KAAA,GACrD,IAAI,WAAW,QAAQ,iBAAiB,iBAAiB,OAAO;EAExE,CAAC;EAED,MAAM,eAAe,YAAY,WAAW,UAAU,YAAY;EAClE,aAAa,SAAS,UAAU;GAC5B,MAAM,QAAQ,OAAO;GACrB,IAAI,UAAU,KAAA,GACV,IACI,UAAU,MAAM,QAAQ,kBAAkB,EAAE,EAAC,cAC7C,OACA,cACA,oBACA,YACJ;EAER,CAAC;EACD,MAAM,cAAc,aAAa,QAAQ,UAAU,MAAM,SAAS,aAAa,CAAC,CAAC,CAAC,SAC7E,UAAW,OAAO,WAAW,KAAA,IAAY,CAAC,OAAO,MAAM,IAAI,CAAA,CAChE;EACA,iBAAiB,KACb,GAAG,sBAAsB,WAAW,CAAC,CAAC,KAAK,WAAW;GAAE,GAAG;GAAO;EAAO,EAAE,CAC/E;EACA,OAAO,QAAQ,MAAM,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,eAAe;GAC7D,MAAM,QACF,OAAO,cAAc,WAAW,iBAAiB,WAAW,OAAO,IAAI;GAC3E,MAAM,SAAS,YAAY,OAAO,QAAQ,CAAC,CAAC;GAC5C,IACI,QAAQ,KAAI,oBACZ,OAAO,MACP,YAAY,WAAW,UAAU,YAAY,YAC7C,oBACA,YACJ;GAGA,MAAM,QAAQ,OAAO,UAAU,WAAW,WAAW,KAAK,IAAI;GAC9D,MAAM,cACF,WAAW,OAAO,MAAM,MACvB,UAAU,QAAQ,iBAAiB,OAC9B,UAAU,cAAc,OAAO,eAAe,OAAO,IACrD;GACV,IACI,QAAQ,KAAI,mBACZ,OAAO,MACP,OAAO,QACP,oBACA,WACJ;GACA,IACI,QAAQ,KAAI,wBACZ,OAAO,WACP,OAAO,OACP,kBACJ;GACA,IACI,QAAQ,KAAI,wBACZ,OAAO,WACP,OAAO,YACP,kBACJ;EACJ,CAAC;CACL,CAAC;CACD,OAAO;EACH;EACA,UAAU,OAAO,QAAQ,UAAU,MAAM,UAAU,QAAQ,MAAM,QAAQ,MAAM,OAAO;EACtF,WAAW,OAAO,QAAQ,UAAU,MAAM,UAAU,IAAI;EACxD;CACJ;AACJ"}

package/dist/theme/cli.d.ts

@@ -0,0 +1,14 @@
+import { type ThemeReport } from './checkTheme';
+import type { Theme } from './theme';
+/** Loads a module from its URL: `import()`, replaced in tests. */
+export type ModuleImporter = (url: string) => Promise<Record<string, unknown>>;
+/** Reads a theme from a JSON file or from an export of a module. */
+export declare function loadTheme(path: string, exportName?: string, load?: ModuleImporter): Promise<Theme>;
+/** A report as text, one line per check that failed or that Panneau couldn't read. */
+export declare function formatThemeReport(report: ThemeReport, label?: string): string;
+/** Runs `panneau-check-theme` with its arguments, and returns the exit code. */
+export declare function runCheckTheme(args: readonly string[], output?: {
+    log: (text: string) => void;
+    error: (text: string) => void;
+}, load?: ModuleImporter): Promise<number>;
+//# sourceMappingURL=cli.d.ts.map

package/dist/theme/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../../src/theme/cli.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAc,MAAM,cAAc,CAAC;AAC5D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAkBrC,kEAAkE;AAClE,MAAM,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;AAI/E,oEAAoE;AACpE,wBAAsB,SAAS,CAC3B,IAAI,EAAE,MAAM,EACZ,UAAU,SAAY,EACtB,IAAI,GAAE,cAA6B,GACpC,OAAO,CAAC,KAAK,CAAC,CAchB;AAED,sFAAsF;AACtF,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,SAAU,GAAG,MAAM,CAwB9E;AAED,gFAAgF;AAChF,wBAAsB,aAAa,CAC/B,IAAI,EAAE,SAAS,MAAM,EAAE,EACvB,MAAM,GAAE;IAAE,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAAY,EAChF,IAAI,GAAE,cAA6B,GACpC,OAAO,CAAC,MAAM,CAAC,CAsBjB"}

package/dist/theme/cli.js

@@ -0,0 +1,61 @@
+import { checkTheme } from "./checkTheme.js";
+import { readFile } from "node:fs/promises";
+import { extname, resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+//#region src/theme/cli.ts
+var USAGE = `Usage: panneau-check-theme <file> [--export <name>] [--json]
+
+Checks the contrast of a theme, and the differences between its chart colors with color vision
+deficiencies. <file> is a JSON file (the Theme schema of @panneau/protocol), or a module whose
+default export, or the export named by --export, is a theme. Exits with 1 when a check fails.`;
+function isTheme(value) {
+	return typeof value === "object" && value !== null && "tokens" in value && typeof value.tokens === "object" && value.tokens !== null;
+}
+var importModule = (url) => import(url);
+/** Reads a theme from a JSON file or from an export of a module. */
+async function loadTheme(path, exportName = "default", load = importModule) {
+	const file = resolve(path);
+	const value = extname(file) === ".json" ? JSON.parse(await readFile(file, "utf8")) : (await load(pathToFileURL(file).href))[exportName];
+	if (!isTheme(value)) throw new Error(extname(file) === ".json" ? `${path} is not a theme: it has no tokens.` : `The export "${exportName}" of ${path} is not a theme.`);
+	return value;
+}
+/** A report as text, one line per check that failed or that Panneau couldn't read. */
+function formatThemeReport(report, label = "Theme") {
+	const lines = [`${label}: ${report.checks.length} contrast checks, ${report.failures.length} failed, ${report.unchecked.length} unchecked, ${report.colorDifferences.length} similar chart colors.`];
+	report.failures.forEach((check) => {
+		lines.push(`  fail       ${check.scheme.padEnd(5)}  ${check.name}: ${check.foreground} on ${check.background}, ${String(check.ratio)}:1 < ${String(check.minimum)}:1`);
+	});
+	report.colorDifferences.forEach((check) => {
+		lines.push(`  similar    ${check.scheme.padEnd(5)}  chart colors ${check.first} and ${check.second} with ${check.vision}: ${String(check.difference)} < ${String(check.minimum)}`);
+	});
+	report.unchecked.forEach((check) => {
+		lines.push(`  unchecked  ${check.scheme.padEnd(5)}  ${check.name}: ${check.foreground} on ${check.background} (check it in a browser)`);
+	});
+	return lines.join("\n");
+}
+/** Runs `panneau-check-theme` with its arguments, and returns the exit code. */
+async function runCheckTheme(args, output = console, load = importModule) {
+	const json = args.includes("--json");
+	const exportIndex = args.indexOf("--export");
+	const exportName = exportIndex >= 0 ? args[exportIndex + 1] : void 0;
+	const files = args.filter((arg, index) => !arg.startsWith("--") && (exportIndex < 0 || index !== exportIndex + 1));
+	const [file] = files;
+	if (file === void 0 || files.length > 1 || args.includes("--help")) {
+		output.error(USAGE);
+		return args.includes("--help") ? 0 : 2;
+	}
+	let theme;
+	try {
+		theme = await loadTheme(file, exportName, load);
+	} catch (error) {
+		output.error(error instanceof Error ? error.message : String(error));
+		return 2;
+	}
+	const report = checkTheme(theme);
+	output.log(json ? JSON.stringify(report, null, 2) : formatThemeReport(report, theme.label));
+	return report.failures.length > 0 || report.colorDifferences.length > 0 ? 1 : 0;
+}
+//#endregion
+export { formatThemeReport, loadTheme, runCheckTheme };
+
+//# sourceMappingURL=cli.js.map

package/dist/theme/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","names":[],"sources":["../../src/theme/cli.ts"],"sourcesContent":["// The `panneau-check-theme` command, for Node only: it is not part of the exports.\n/// <reference types=\"node\" />\nimport { readFile } from 'node:fs/promises';\nimport { extname, resolve } from 'node:path';\nimport { pathToFileURL } from 'node:url';\n\nimport { type ThemeReport, checkTheme } from './checkTheme';\nimport type { Theme } from './theme';\n\nconst USAGE = `Usage: panneau-check-theme <file> [--export <name>] [--json]\n\nChecks the contrast of a theme, and the differences between its chart colors with color vision\ndeficiencies. <file> is a JSON file (the Theme schema of @panneau/protocol), or a module whose\ndefault export, or the export named by --export, is a theme. Exits with 1 when a check fails.`;\n\nfunction isTheme(value: unknown): value is Theme {\n    return (\n        typeof value === 'object' &&\n        value !== null &&\n        'tokens' in value &&\n        typeof value.tokens === 'object' &&\n        value.tokens !== null\n    );\n}\n\n/** Loads a module from its URL: `import()`, replaced in tests. */\nexport type ModuleImporter = (url: string) => Promise<Record<string, unknown>>;\n\nconst importModule: ModuleImporter = (url) => import(url) as Promise<Record<string, unknown>>;\n\n/** Reads a theme from a JSON file or from an export of a module. */\nexport async function loadTheme(\n    path: string,\n    exportName = 'default',\n    load: ModuleImporter = importModule,\n): Promise<Theme> {\n    const file = resolve(path);\n    const value: unknown =\n        extname(file) === '.json'\n            ? JSON.parse(await readFile(file, 'utf8'))\n            : (await load(pathToFileURL(file).href))[exportName];\n    if (!isTheme(value)) {\n        throw new Error(\n            extname(file) === '.json'\n                ? `${path} is not a theme: it has no tokens.`\n                : `The export \"${exportName}\" of ${path} is not a theme.`,\n        );\n    }\n    return value;\n}\n\n/** A report as text, one line per check that failed or that Panneau couldn't read. */\nexport function formatThemeReport(report: ThemeReport, label = 'Theme'): string {\n    const lines = [\n        `${label}: ${report.checks.length} contrast checks, ${report.failures.length} failed, ` +\n            `${report.unchecked.length} unchecked, ${report.colorDifferences.length} similar chart colors.`,\n    ];\n    report.failures.forEach((check) => {\n        lines.push(\n            `  fail       ${check.scheme.padEnd(5)}  ${check.name}: ${check.foreground} on ` +\n                `${check.background}, ${String(check.ratio)}:1 < ${String(check.minimum)}:1`,\n        );\n    });\n    report.colorDifferences.forEach((check) => {\n        lines.push(\n            `  similar    ${check.scheme.padEnd(5)}  chart colors ${check.first} and ` +\n                `${check.second} with ${check.vision}: ${String(check.difference)} < ${String(check.minimum)}`,\n        );\n    });\n    report.unchecked.forEach((check) => {\n        lines.push(\n            `  unchecked  ${check.scheme.padEnd(5)}  ${check.name}: ${check.foreground} on ` +\n                `${check.background} (check it in a browser)`,\n        );\n    });\n    return lines.join('\\n');\n}\n\n/** Runs `panneau-check-theme` with its arguments, and returns the exit code. */\nexport async function runCheckTheme(\n    args: readonly string[],\n    output: { log: (text: string) => void; error: (text: string) => void } = console,\n    load: ModuleImporter = importModule,\n): Promise<number> {\n    const json = args.includes('--json');\n    const exportIndex = args.indexOf('--export');\n    const exportName = exportIndex >= 0 ? args[exportIndex + 1] : undefined;\n    const files = args.filter(\n        (arg, index) => !arg.startsWith('--') && (exportIndex < 0 || index !== exportIndex + 1),\n    );\n    const [file] = files;\n    if (file === undefined || files.length > 1 || args.includes('--help')) {\n        output.error(USAGE);\n        return args.includes('--help') ? 0 : 2;\n    }\n    let theme: Theme;\n    try {\n        theme = await loadTheme(file, exportName, load);\n    } catch (error) {\n        output.error(error instanceof Error ? error.message : String(error));\n        return 2;\n    }\n    const report = checkTheme(theme);\n    output.log(json ? JSON.stringify(report, null, 2) : formatThemeReport(report, theme.label));\n    return report.failures.length > 0 || report.colorDifferences.length > 0 ? 1 : 0;\n}\n"],"mappings":";;;;;AASA,IAAM,QAAQ;;;;;AAMd,SAAS,QAAQ,OAAgC;CAC7C,OACI,OAAO,UAAU,YACjB,UAAU,QACV,YAAY,SACZ,OAAO,MAAM,WAAW,YACxB,MAAM,WAAW;AAEzB;AAKA,IAAM,gBAAgC,QAAQ,OAAO;;AAGrD,eAAsB,UAClB,MACA,aAAa,WACb,OAAuB,cACT;CACd,MAAM,OAAO,QAAQ,IAAI;CACzB,MAAM,QACF,QAAQ,IAAI,MAAM,UACZ,KAAK,MAAM,MAAM,SAAS,MAAM,MAAM,CAAC,KACtC,MAAM,KAAK,cAAc,IAAI,CAAC,CAAC,IAAI,EAAA,CAAG;CACjD,IAAI,CAAC,QAAQ,KAAK,GACd,MAAM,IAAI,MACN,QAAQ,IAAI,MAAM,UACZ,GAAG,KAAI,sCACP,eAAe,WAAU,OAAQ,KAAI,iBAC/C;CAEJ,OAAO;AACX;;AAGA,SAAgB,kBAAkB,QAAqB,QAAQ,SAAiB;CAC5E,MAAM,QAAQ,CACV,GAAG,MAAK,IAAK,OAAO,OAAO,OAAM,oBAAqB,OAAO,SAAS,OAAM,WACrE,OAAO,UAAU,OAAM,cAAe,OAAO,iBAAiB,OAAM,uBAAwB;CAEvG,OAAO,SAAS,SAAS,UAAU;EAC/B,MAAM,KACF,gBAAgB,MAAM,OAAO,OAAO,CAAC,EAAC,IAAK,MAAM,KAAI,IAAK,MAAM,WAAU,MACnE,MAAM,WAAU,IAAK,OAAO,MAAM,KAAK,EAAC,OAAQ,OAAO,MAAM,OAAO,EAAC,GAChF;CACJ,CAAC;CACD,OAAO,iBAAiB,SAAS,UAAU;EACvC,MAAM,KACF,gBAAgB,MAAM,OAAO,OAAO,CAAC,EAAC,iBAAkB,MAAM,MAAK,OAC5D,MAAM,OAAM,QAAS,MAAM,OAAM,IAAK,OAAO,MAAM,UAAU,EAAC,KAAM,OAAO,MAAM,OAAO,GACnG;CACJ,CAAC;CACD,OAAO,UAAU,SAAS,UAAU;EAChC,MAAM,KACF,gBAAgB,MAAM,OAAO,OAAO,CAAC,EAAC,IAAK,MAAM,KAAI,IAAK,MAAM,WAAU,MACnE,MAAM,WAAU,yBAC3B;CACJ,CAAC;CACD,OAAO,MAAM,KAAK,IAAI;AAC1B;;AAGA,eAAsB,cAClB,MACA,SAAyE,SACzE,OAAuB,cACR;CACf,MAAM,OAAO,KAAK,SAAS,QAAQ;CACnC,MAAM,cAAc,KAAK,QAAQ,UAAU;CAC3C,MAAM,aAAa,eAAe,IAAI,KAAK,cAAc,KAAK,KAAA;CAC9D,MAAM,QAAQ,KAAK,QACd,KAAK,UAAU,CAAC,IAAI,WAAW,IAAI,MAAM,cAAc,KAAK,UAAU,cAAc,EACzF;CACA,MAAM,CAAC,QAAQ;CACf,IAAI,SAAS,KAAA,KAAa,MAAM,SAAS,KAAK,KAAK,SAAS,QAAQ,GAAG;EACnE,OAAO,MAAM,KAAK;EAClB,OAAO,KAAK,SAAS,QAAQ,IAAI,IAAI;CACzC;CACA,IAAI;CACJ,IAAI;EACA,QAAQ,MAAM,UAAU,MAAM,YAAY,IAAI;CAClD,SAAS,OAAO;EACZ,OAAO,MAAM,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK,CAAC;EACnE,OAAO;CACX;CACA,MAAM,SAAS,WAAW,KAAK;CAC/B,OAAO,IAAI,OAAO,KAAK,UAAU,QAAQ,MAAM,CAAC,IAAI,kBAAkB,QAAQ,MAAM,KAAK,CAAC;CAC1F,OAAO,OAAO,SAAS,SAAS,KAAK,OAAO,iBAAiB,SAAS,IAAI,IAAI;AAClF"}

package/dist/theme/color.d.ts

@@ -0,0 +1,30 @@
+/** An sRGB color, with channels from 0 to 255. */
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/**
+ * Reads a hex (`#05f`, `#0055ff`) or `rgb()` color. Returns `null` for anything else (a CSS
+ * variable, a named color, `color-mix()`), which Panneau can't compute with.
+ */
+export declare function parseColor(value: string): Rgb | null;
+/** A color as `#rrggbb`. */
+export declare function toHex({ r, g, b }: Rgb): string;
+/** Mixes two colors in sRGB, like `color-mix(in srgb, a, b <amount>)`: 0 gives `a`, 1 gives `b`. */
+export declare function mixColors(a: Rgb, b: Rgb, amount: number): Rgb;
+/** Relative luminance, as defined by WCAG 2. */
+export declare function luminance({ r, g, b }: Rgb): number;
+/** Contrast ratio between two colors, from 1 to 21 (WCAG 2). */
+export declare function contrastRatio(a: Rgb, b: Rgb): number;
+export declare const WHITE: Rgb;
+export declare const BLACK: Rgb;
+/**
+ * The closest color to `color` that reaches `ratio` against `background`, by mixing it with black
+ * or white (whichever moves away from the background), like Bootstrap's shade and tint. Returns
+ * the color itself when it already passes.
+ */
+export declare function ensureContrast(color: Rgb, background: Rgb, ratio: number): Rgb;
+/** White or black, whichever reads better on `background`, like Bootstrap's `color-contrast()`. */
+export declare function readableTextColor(background: Rgb): Rgb;
+//# sourceMappingURL=color.d.ts.map

package/dist/theme/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/theme/color.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,MAAM,WAAW,GAAG;IAChB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACb;AAMD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,GAAG,IAAI,CAoBpD;AAED,4BAA4B;AAC5B,wBAAgB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,MAAM,CAI9C;AAED,oGAAoG;AACpG,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAG,GAAG,CAM7D;AAOD,gDAAgD;AAChD,wBAAgB,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,MAAM,CAElD;AAED,gEAAgE;AAChE,wBAAgB,aAAa,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,CAGpD;AAED,eAAO,MAAM,KAAK,EAAE,GAAgC,CAAC;AACrD,eAAO,MAAM,KAAK,EAAE,GAA0B,CAAC;AAE/C;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,GAAG,CAY9E;AAED,mGAAmG;AACnG,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,GAAG,GAAG,GAAG,CAEtD"}

package/dist/theme/color.js

@@ -0,0 +1,94 @@
+//#region src/theme/color.ts
+var HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+var RGB = /^rgba?\(\s*(\d+(?:\.\d+)?)[\s,]+(\d+(?:\.\d+)?)[\s,]+(\d+(?:\.\d+)?)\s*(?:[,/]\s*[\d.]+%?\s*)?\)$/i;
+/**
+* Reads a hex (`#05f`, `#0055ff`) or `rgb()` color. Returns `null` for anything else (a CSS
+* variable, a named color, `color-mix()`), which Panneau can't compute with.
+*/
+function parseColor(value) {
+	const color = value.trim();
+	const hex = HEX.exec(color);
+	if (hex?.[1] !== void 0) {
+		const digits = hex[1].length === 3 ? [...hex[1]].map((digit) => digit + digit).join("") : hex[1];
+		return {
+			r: Number.parseInt(digits.slice(0, 2), 16),
+			g: Number.parseInt(digits.slice(2, 4), 16),
+			b: Number.parseInt(digits.slice(4, 6), 16)
+		};
+	}
+	const rgb = RGB.exec(color);
+	if (rgb !== null) {
+		const [r, g, b] = [
+			rgb[1],
+			rgb[2],
+			rgb[3]
+		].map((channel) => Math.min(255, Math.max(0, Number(channel))));
+		return {
+			r: r ?? 0,
+			g: g ?? 0,
+			b: b ?? 0
+		};
+	}
+	return null;
+}
+/** A color as `#rrggbb`. */
+function toHex({ r, g, b }) {
+	return `#${[
+		r,
+		g,
+		b
+	].map((channel) => Math.round(channel).toString(16).padStart(2, "0")).join("")}`;
+}
+/** Mixes two colors in sRGB, like `color-mix(in srgb, a, b <amount>)`: 0 gives `a`, 1 gives `b`. */
+function mixColors(a, b, amount) {
+	return {
+		r: a.r + (b.r - a.r) * amount,
+		g: a.g + (b.g - a.g) * amount,
+		b: a.b + (b.b - a.b) * amount
+	};
+}
+function linear(channel) {
+	const value = channel / 255;
+	return value <= .04045 ? value / 12.92 : ((value + .055) / 1.055) ** 2.4;
+}
+/** Relative luminance, as defined by WCAG 2. */
+function luminance({ r, g, b }) {
+	return .2126 * linear(r) + .7152 * linear(g) + .0722 * linear(b);
+}
+/** Contrast ratio between two colors, from 1 to 21 (WCAG 2). */
+function contrastRatio(a, b) {
+	const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+	return (light + .05) / (dark + .05);
+}
+var WHITE = {
+	r: 255,
+	g: 255,
+	b: 255
+};
+var BLACK = {
+	r: 0,
+	g: 0,
+	b: 0
+};
+/**
+* The closest color to `color` that reaches `ratio` against `background`, by mixing it with black
+* or white (whichever moves away from the background), like Bootstrap's shade and tint. Returns
+* the color itself when it already passes.
+*/
+function ensureContrast(color, background, ratio) {
+	if (contrastRatio(color, background) >= ratio) return color;
+	const target = luminance(background) > .18 ? BLACK : WHITE;
+	for (let step = 1; step <= 20; step += 1) {
+		const mixed = mixColors(color, target, step / 20);
+		if (contrastRatio(mixed, background) >= ratio) return mixed;
+	}
+	return target;
+}
+/** White or black, whichever reads better on `background`, like Bootstrap's `color-contrast()`. */
+function readableTextColor(background) {
+	return contrastRatio(WHITE, background) >= contrastRatio(BLACK, background) ? WHITE : BLACK;
+}
+//#endregion
+export { BLACK, WHITE, contrastRatio, ensureContrast, luminance, mixColors, parseColor, readableTextColor, toHex };
+
+//# sourceMappingURL=color.js.map

package/dist/theme/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":[],"sources":["../../src/theme/color.ts"],"sourcesContent":["/** An sRGB color, with channels from 0 to 255. */\nexport interface Rgb {\n    r: number;\n    g: number;\n    b: number;\n}\n\nconst HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;\nconst RGB =\n    /^rgba?\\(\\s*(\\d+(?:\\.\\d+)?)[\\s,]+(\\d+(?:\\.\\d+)?)[\\s,]+(\\d+(?:\\.\\d+)?)\\s*(?:[,/]\\s*[\\d.]+%?\\s*)?\\)$/i;\n\n/**\n * Reads a hex (`#05f`, `#0055ff`) or `rgb()` color. Returns `null` for anything else (a CSS\n * variable, a named color, `color-mix()`), which Panneau can't compute with.\n */\nexport function parseColor(value: string): Rgb | null {\n    const color = value.trim();\n    const hex = HEX.exec(color);\n    if (hex?.[1] !== undefined) {\n        const digits =\n            hex[1].length === 3 ? [...hex[1]].map((digit) => digit + digit).join('') : hex[1];\n        return {\n            r: Number.parseInt(digits.slice(0, 2), 16),\n            g: Number.parseInt(digits.slice(2, 4), 16),\n            b: Number.parseInt(digits.slice(4, 6), 16),\n        };\n    }\n    const rgb = RGB.exec(color);\n    if (rgb !== null) {\n        const [r, g, b] = [rgb[1], rgb[2], rgb[3]].map((channel) =>\n            Math.min(255, Math.max(0, Number(channel))),\n        );\n        return { r: r ?? 0, g: g ?? 0, b: b ?? 0 };\n    }\n    return null;\n}\n\n/** A color as `#rrggbb`. */\nexport function toHex({ r, g, b }: Rgb): string {\n    return `#${[r, g, b]\n        .map((channel) => Math.round(channel).toString(16).padStart(2, '0'))\n        .join('')}`;\n}\n\n/** Mixes two colors in sRGB, like `color-mix(in srgb, a, b <amount>)`: 0 gives `a`, 1 gives `b`. */\nexport function mixColors(a: Rgb, b: Rgb, amount: number): Rgb {\n    return {\n        r: a.r + (b.r - a.r) * amount,\n        g: a.g + (b.g - a.g) * amount,\n        b: a.b + (b.b - a.b) * amount,\n    };\n}\n\nfunction linear(channel: number): number {\n    const value = channel / 255;\n    return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;\n}\n\n/** Relative luminance, as defined by WCAG 2. */\nexport function luminance({ r, g, b }: Rgb): number {\n    return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);\n}\n\n/** Contrast ratio between two colors, from 1 to 21 (WCAG 2). */\nexport function contrastRatio(a: Rgb, b: Rgb): number {\n    const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x) as [number, number];\n    return (light + 0.05) / (dark + 0.05);\n}\n\nexport const WHITE: Rgb = { r: 255, g: 255, b: 255 };\nexport const BLACK: Rgb = { r: 0, g: 0, b: 0 };\n\n/**\n * The closest color to `color` that reaches `ratio` against `background`, by mixing it with black\n * or white (whichever moves away from the background), like Bootstrap's shade and tint. Returns\n * the color itself when it already passes.\n */\nexport function ensureContrast(color: Rgb, background: Rgb, ratio: number): Rgb {\n    if (contrastRatio(color, background) >= ratio) {\n        return color;\n    }\n    const target = luminance(background) > 0.18 ? BLACK : WHITE;\n    for (let step = 1; step <= 20; step += 1) {\n        const mixed = mixColors(color, target, step / 20);\n        if (contrastRatio(mixed, background) >= ratio) {\n            return mixed;\n        }\n    }\n    return target;\n}\n\n/** White or black, whichever reads better on `background`, like Bootstrap's `color-contrast()`. */\nexport function readableTextColor(background: Rgb): Rgb {\n    return contrastRatio(WHITE, background) >= contrastRatio(BLACK, background) ? WHITE : BLACK;\n}\n"],"mappings":";AAOA,IAAM,MAAM;AACZ,IAAM,MACF;;;;;AAMJ,SAAgB,WAAW,OAA2B;CAClD,MAAM,QAAQ,MAAM,KAAK;CACzB,MAAM,MAAM,IAAI,KAAK,KAAK;CAC1B,IAAI,MAAM,OAAO,KAAA,GAAW;EACxB,MAAM,SACF,IAAI,EAAE,CAAC,WAAW,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,KAAK,UAAU,QAAQ,KAAK,CAAC,CAAC,KAAK,EAAE,IAAI,IAAI;EACnF,OAAO;GACH,GAAG,OAAO,SAAS,OAAO,MAAM,GAAG,CAAC,GAAG,EAAE;GACzC,GAAG,OAAO,SAAS,OAAO,MAAM,GAAG,CAAC,GAAG,EAAE;GACzC,GAAG,OAAO,SAAS,OAAO,MAAM,GAAG,CAAC,GAAG,EAAE;EAC7C;CACJ;CACA,MAAM,MAAM,IAAI,KAAK,KAAK;CAC1B,IAAI,QAAQ,MAAM;EACd,MAAM,CAAC,GAAG,GAAG,KAAK;GAAC,IAAI;GAAI,IAAI;GAAI,IAAI;EAAE,CAAC,CAAC,KAAK,YAC5C,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,OAAO,CAAC,CAAC,CAC9C;EACA,OAAO;GAAE,GAAG,KAAK;GAAG,GAAG,KAAK;GAAG,GAAG,KAAK;EAAE;CAC7C;CACA,OAAO;AACX;;AAGA,SAAgB,MAAM,EAAE,GAAG,GAAG,KAAkB;CAC5C,OAAO,IAAI;EAAC;EAAG;EAAG;CAAC,CAAC,CACf,KAAK,YAAY,KAAK,MAAM,OAAO,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,CACnE,KAAK,EAAE;AAChB;;AAGA,SAAgB,UAAU,GAAQ,GAAQ,QAAqB;CAC3D,OAAO;EACH,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK;EACvB,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK;EACvB,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK;CAC3B;AACJ;AAEA,SAAS,OAAO,SAAyB;CACrC,MAAM,QAAQ,UAAU;CACxB,OAAO,SAAS,SAAU,QAAQ,UAAU,QAAQ,QAAS,UAAU;AAC3E;;AAGA,SAAgB,UAAU,EAAE,GAAG,GAAG,KAAkB;CAChD,OAAO,QAAS,OAAO,CAAC,IAAI,QAAS,OAAO,CAAC,IAAI,QAAS,OAAO,CAAC;AACtE;;AAGA,SAAgB,cAAc,GAAQ,GAAgB;CAClD,MAAM,CAAC,OAAO,QAAQ,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;CACvE,QAAQ,QAAQ,QAAS,OAAO;AACpC;AAEA,IAAa,QAAa;CAAE,GAAG;CAAK,GAAG;CAAK,GAAG;AAAI;AACnD,IAAa,QAAa;CAAE,GAAG;CAAG,GAAG;CAAG,GAAG;AAAE;;;;;;AAO7C,SAAgB,eAAe,OAAY,YAAiB,OAAoB;CAC5E,IAAI,cAAc,OAAO,UAAU,KAAK,OACpC,OAAO;CAEX,MAAM,SAAS,UAAU,UAAU,IAAI,MAAO,QAAQ;CACtD,KAAK,IAAI,OAAO,GAAG,QAAQ,IAAI,QAAQ,GAAG;EACtC,MAAM,QAAQ,UAAU,OAAO,QAAQ,OAAO,EAAE;EAChD,IAAI,cAAc,OAAO,UAAU,KAAK,OACpC,OAAO;CAEf;CACA,OAAO;AACX;;AAGA,SAAgB,kBAAkB,YAAsB;CACpD,OAAO,cAAc,OAAO,UAAU,KAAK,cAAc,OAAO,UAAU,IAAI,QAAQ;AAC1F"}