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

package/dist/theme/fonts.d.ts

@@ -0,0 +1,32 @@
+/** A font face of a theme, written as an `@font-face` rule. */
+export type ThemeFontFace = {
+    /** The family name that font tokens use: `'Geist'`. */
+    family: string;
+    /** The `src` descriptor: `url(/fonts/geist.woff2) format('woff2')`. */
+    src: string;
+    /** A weight or a range of a variable font: `400`, `400 700`. */
+    weight?: string;
+    /** `normal` or `italic`. */
+    style?: string;
+    /** Defaults to `swap`. */
+    display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+    unicodeRange?: string;
+};
+/** A hosted stylesheet that declares font faces: Google Fonts, Adobe Fonts, a site's own. */
+export type ThemeFontStylesheet = {
+    stylesheet: string;
+};
+/**
+ * A font of a theme: a face, or a stylesheet that declares faces. `PanneauRoot` adds them to the
+ * page once, however many roots use the theme. Font faces are global by nature, unlike tokens.
+ */
+export type ThemeFont = ThemeFontFace | ThemeFontStylesheet;
+/**
+ * The `@font-face` rules of the fonts of a theme. Faces with a value that could break out of the
+ * rule are ignored: `{`, `}` or `<` anywhere, `;` outside of `src` (which can hold data URLs), and
+ * quotes or backslashes in the family.
+ */
+export declare function getFontFaceCss(fonts?: readonly ThemeFont[]): string;
+/** The URLs of the font stylesheets of a theme, without duplicates. */
+export declare function getFontStylesheets(fonts?: readonly ThemeFont[]): string[];
+//# sourceMappingURL=fonts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/theme/fonts.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,MAAM,aAAa,GAAG;IACxB,uDAAuD;IACvD,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,6FAA6F;AAC7F,MAAM,MAAM,mBAAmB,GAAG;IAC9B,UAAU,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,mBAAmB,CAAC;AAW5D;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,GAAE,SAAS,SAAS,EAAO,GAAG,MAAM,CAsBvE;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,CAAC,KAAK,GAAE,SAAS,SAAS,EAAO,GAAG,MAAM,EAAE,CAU7E"}

package/dist/theme/fonts.js

@@ -0,0 +1,36 @@
+//#region src/theme/fonts.ts
+/** Values that could break out of an `@font-face` rule, or out of the family name. */
+var UNSAFE = /[{}<]/;
+var UNSAFE_FAMILY = /[{}<;"\\]/;
+var UNSAFE_DESCRIPTOR = /[{}<;]/;
+function isFace(font) {
+	return "family" in font && "src" in font;
+}
+/**
+* The `@font-face` rules of the fonts of a theme. Faces with a value that could break out of the
+* rule are ignored: `{`, `}` or `<` anywhere, `;` outside of `src` (which can hold data URLs), and
+* quotes or backslashes in the family.
+*/
+function getFontFaceCss(fonts = []) {
+	return fonts.filter(isFace).filter((face) => !UNSAFE_FAMILY.test(face.family) && !UNSAFE.test(face.src) && [
+		face.weight,
+		face.style,
+		face.display,
+		face.unicodeRange
+	].every((value) => value === void 0 || !UNSAFE_DESCRIPTOR.test(value))).map((face) => [
+		`@font-face{font-family:"${face.family}";src:${face.src};`,
+		face.weight !== void 0 ? `font-weight:${face.weight};` : "",
+		face.style !== void 0 ? `font-style:${face.style};` : "",
+		`font-display:${face.display ?? "swap"};`,
+		face.unicodeRange !== void 0 ? `unicode-range:${face.unicodeRange};` : "",
+		"}"
+	].join("")).join("");
+}
+/** The URLs of the font stylesheets of a theme, without duplicates. */
+function getFontStylesheets(fonts = []) {
+	return [...new Set(fonts.flatMap((font) => "stylesheet" in font && typeof font.stylesheet === "string" ? [font.stylesheet] : []))];
+}
+//#endregion
+export { getFontFaceCss, getFontStylesheets };
+
+//# sourceMappingURL=fonts.js.map

package/dist/theme/fonts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.js","names":[],"sources":["../../src/theme/fonts.ts"],"sourcesContent":["/** A font face of a theme, written as an `@font-face` rule. */\nexport type ThemeFontFace = {\n    /** The family name that font tokens use: `'Geist'`. */\n    family: string;\n    /** The `src` descriptor: `url(/fonts/geist.woff2) format('woff2')`. */\n    src: string;\n    /** A weight or a range of a variable font: `400`, `400 700`. */\n    weight?: string;\n    /** `normal` or `italic`. */\n    style?: string;\n    /** Defaults to `swap`. */\n    display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';\n    unicodeRange?: string;\n};\n\n/** A hosted stylesheet that declares font faces: Google Fonts, Adobe Fonts, a site's own. */\nexport type ThemeFontStylesheet = {\n    stylesheet: string;\n};\n\n/**\n * A font of a theme: a face, or a stylesheet that declares faces. `PanneauRoot` adds them to the\n * page once, however many roots use the theme. Font faces are global by nature, unlike tokens.\n */\nexport type ThemeFont = ThemeFontFace | ThemeFontStylesheet;\n\n/** Values that could break out of an `@font-face` rule, or out of the family name. */\nconst UNSAFE = /[{}<]/;\nconst UNSAFE_FAMILY = /[{}<;\"\\\\]/;\nconst UNSAFE_DESCRIPTOR = /[{}<;]/;\n\nfunction isFace(font: ThemeFont): font is ThemeFontFace {\n    return 'family' in font && 'src' in font;\n}\n\n/**\n * The `@font-face` rules of the fonts of a theme. Faces with a value that could break out of the\n * rule are ignored: `{`, `}` or `<` anywhere, `;` outside of `src` (which can hold data URLs), and\n * quotes or backslashes in the family.\n */\nexport function getFontFaceCss(fonts: readonly ThemeFont[] = []): string {\n    return fonts\n        .filter(isFace)\n        .filter(\n            (face) =>\n                !UNSAFE_FAMILY.test(face.family) &&\n                !UNSAFE.test(face.src) &&\n                [face.weight, face.style, face.display, face.unicodeRange].every(\n                    (value) => value === undefined || !UNSAFE_DESCRIPTOR.test(value),\n                ),\n        )\n        .map((face) =>\n            [\n                `@font-face{font-family:\"${face.family}\";src:${face.src};`,\n                face.weight !== undefined ? `font-weight:${face.weight};` : '',\n                face.style !== undefined ? `font-style:${face.style};` : '',\n                `font-display:${face.display ?? 'swap'};`,\n                face.unicodeRange !== undefined ? `unicode-range:${face.unicodeRange};` : '',\n                '}',\n            ].join(''),\n        )\n        .join('');\n}\n\n/** The URLs of the font stylesheets of a theme, without duplicates. */\nexport function getFontStylesheets(fonts: readonly ThemeFont[] = []): string[] {\n    return [\n        ...new Set(\n            fonts.flatMap((font) =>\n                'stylesheet' in font && typeof font.stylesheet === 'string'\n                    ? [font.stylesheet]\n                    : [],\n            ),\n        ),\n    ];\n}\n"],"mappings":";;AA2BA,IAAM,SAAS;AACf,IAAM,gBAAgB;AACtB,IAAM,oBAAoB;AAE1B,SAAS,OAAO,MAAwC;CACpD,OAAO,YAAY,QAAQ,SAAS;AACxC;;;;;;AAOA,SAAgB,eAAe,QAA8B,CAAA,GAAY;CACrE,OAAO,MACF,OAAO,MAAM,CAAC,CACd,QACI,SACG,CAAC,cAAc,KAAK,KAAK,MAAM,KAC/B,CAAC,OAAO,KAAK,KAAK,GAAG,KACrB;EAAC,KAAK;EAAQ,KAAK;EAAO,KAAK;EAAS,KAAK;CAAY,CAAC,CAAC,OACtD,UAAU,UAAU,KAAA,KAAa,CAAC,kBAAkB,KAAK,KAAK,CACnE,CACR,CAAC,CACA,KAAK,SACF;EACI,2BAA2B,KAAK,OAAM,QAAS,KAAK,IAAG;EACvD,KAAK,WAAW,KAAA,IAAY,eAAe,KAAK,OAAM,KAAM;EAC5D,KAAK,UAAU,KAAA,IAAY,cAAc,KAAK,MAAK,KAAM;EACzD,gBAAgB,KAAK,WAAW,OAAM;EACtC,KAAK,iBAAiB,KAAA,IAAY,iBAAiB,KAAK,aAAY,KAAM;EAC1E;CAAG,CACN,CAAC,KAAK,EAAE,CACb,CAAC,CACA,KAAK,EAAE;AAChB;;AAGA,SAAgB,mBAAmB,QAA8B,CAAA,GAAc;CAC3E,OAAO,CACH,GAAG,IAAI,IACH,MAAM,SAAS,SACX,gBAAgB,QAAQ,OAAO,KAAK,eAAe,WAC7C,CAAC,KAAK,UAAU,IAChB,CAAA,CACV,CACJ,CAAC;AAET"}

package/dist/theme/index.d.ts

@@ -0,0 +1,13 @@
+export { bootstrapTheme, bootstrapTone } from './bootstrap';
+export { CHART_CATEGORICAL_COUNT, CHART_SEQUENTIAL_COUNT, chartColors } from './chartColors';
+export { type ThemeContrastCheck, type ThemeReport, checkTheme } from './checkTheme';
+export { type ColorDifferenceCheck, type ColorVisionDeficiency, checkColorDifferences, } from './colorVision';
+export { type Rgb } from './color';
+export { type ComponentTokens, defineComponentTokens } from './componentTokens';
+export { type ComponentTokenName, componentTokens } from './components';
+export { type PaletteTokenName, type PanneauTokens, type ThemeDefinition, type ThemeTokens, type TokenName, defineTheme, findUnknownTokens, mergeThemes, } from './defineTheme';
+export { type ThemeFont, type ThemeFontFace, type ThemeFontStylesheet } from './fonts';
+export { SEMANTIC_TOKENS, type SemanticTokenName } from './semanticTokens';
+export { type ColorScheme, type Density, type Theme } from './theme';
+export { BUILT_IN_TONES, type PanneauTones, type Tone, type ToneInput, type ToneSurfaces, type ToneValues, deriveTone, toneClassName, } from './tones';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC7F,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,WAAW,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,EACH,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,qBAAqB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,KAAK,eAAe,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAAE,KAAK,kBAAkB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EACH,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,WAAW,EACX,iBAAiB,EACjB,WAAW,GACd,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,SAAS,CAAC;AACrE,OAAO,EACH,cAAc,EACd,KAAK,YAAY,EACjB,KAAK,IAAI,EACT,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,UAAU,EACV,aAAa,GAChB,MAAM,SAAS,CAAC"}

package/dist/theme/index.js

@@ -0,0 +1,10 @@
+import { BUILT_IN_TONES, deriveTone, toneClassName } from "./tones.js";
+import { bootstrapTheme, bootstrapTone } from "./bootstrap.js";
+import { CHART_CATEGORICAL_COUNT, CHART_SEQUENTIAL_COUNT, chartColors } from "./chartColors.js";
+import { checkColorDifferences } from "./colorVision.js";
+import { checkTheme } from "./checkTheme.js";
+import { defineComponentTokens } from "./componentTokens.js";
+import { componentTokens } from "./components.js";
+import { SEMANTIC_TOKENS } from "./semanticTokens.js";
+import { defineTheme, findUnknownTokens, mergeThemes } from "./defineTheme.js";
+export { BUILT_IN_TONES, CHART_CATEGORICAL_COUNT, CHART_SEQUENTIAL_COUNT, SEMANTIC_TOKENS, bootstrapTheme, bootstrapTone, chartColors, checkColorDifferences, checkTheme, componentTokens, defineComponentTokens, defineTheme, deriveTone, findUnknownTokens, mergeThemes, toneClassName };

package/dist/theme/semanticTokens.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The semantic tokens of Panneau, without the leading `--`: what the default theme defines on the
+ * root (`PanneauRoot.module.css`), and what a theme sets to restyle every component at once
+ * (decision 0024). A test keeps this list in sync with the stylesheet.
+ */
+export declare const SEMANTIC_TOKENS: readonly ["panneau-color-bg", "panneau-color-surface", "panneau-color-surface-sunken", "panneau-color-surface-raised", "panneau-color-hover", "panneau-color-pressed", "panneau-color-backdrop", "panneau-color-text", "panneau-color-text-muted", "panneau-color-link", "panneau-color-border", "panneau-color-border-control", "panneau-color-accent", "panneau-color-accent-hover", "panneau-color-accent-text", "panneau-color-accent-subtle", "panneau-color-focus", "panneau-color-danger", "panneau-color-danger-subtle", "panneau-color-danger-border", "panneau-color-danger-solid", "panneau-color-danger-solid-hover", "panneau-color-danger-solid-text", "panneau-color-success", "panneau-color-success-subtle", "panneau-color-success-border", "panneau-color-success-solid", "panneau-color-success-solid-hover", "panneau-color-success-solid-text", "panneau-color-warning", "panneau-color-warning-subtle", "panneau-color-warning-border", "panneau-color-warning-solid", "panneau-color-warning-solid-hover", "panneau-color-warning-solid-text", "panneau-color-info", "panneau-color-info-subtle", "panneau-color-info-border", "panneau-color-info-solid", "panneau-color-info-solid-hover", "panneau-color-info-solid-text", "panneau-chart-categorical-1", "panneau-chart-categorical-2", "panneau-chart-categorical-3", "panneau-chart-categorical-4", "panneau-chart-categorical-5", "panneau-chart-categorical-6", "panneau-chart-categorical-7", "panneau-chart-categorical-8", "panneau-chart-sequential-1", "panneau-chart-sequential-2", "panneau-chart-sequential-3", "panneau-chart-sequential-4", "panneau-chart-sequential-5", "panneau-chart-diverging-negative", "panneau-chart-diverging-neutral", "panneau-chart-diverging-positive", "panneau-font-family-body", "panneau-font-family-heading", "panneau-font-family-display", "panneau-font-family-mono", "panneau-font-family", "panneau-font-numeric", "panneau-font-size-xs", "panneau-font-size-sm", "panneau-font-size-md", "panneau-font-size-lg", "panneau-font-size-xl", "panneau-font-size-control", "panneau-line-height", "panneau-line-height-tight", "panneau-font-weight-normal", "panneau-font-weight-medium", "panneau-font-weight-bold", "panneau-space-1", "panneau-space-2", "panneau-space-3", "panneau-space-4", "panneau-space-5", "panneau-space-6", "panneau-space-8", "panneau-space-10", "panneau-radius-sm", "panneau-radius-md", "panneau-radius-lg", "panneau-radius-full", "panneau-border-width", "panneau-shadow-sm", "panneau-shadow-md", "panneau-shadow-lg", "panneau-control-height", "panneau-control-height-sm", "panneau-control-padding-x", "panneau-row-padding-y", "panneau-focus-width", "panneau-duration", "panneau-z-overlay", "panneau-z-toast"];
+/** The name of a semantic token, without the leading `--`. */
+export type SemanticTokenName = (typeof SEMANTIC_TOKENS)[number];
+//# sourceMappingURL=semanticTokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"semanticTokens.d.ts","sourceRoot":"","sources":["../../src/theme/semanticTokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,eAAe,4nFAmGlB,CAAC;AAEX,8DAA8D;AAC9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/theme/semanticTokens.js

@@ -0,0 +1,110 @@
+//#region src/theme/semanticTokens.ts
+/**
+* The semantic tokens of Panneau, without the leading `--`: what the default theme defines on the
+* root (`PanneauRoot.module.css`), and what a theme sets to restyle every component at once
+* (decision 0024). A test keeps this list in sync with the stylesheet.
+*/
+var SEMANTIC_TOKENS = [
+	"panneau-color-bg",
+	"panneau-color-surface",
+	"panneau-color-surface-sunken",
+	"panneau-color-surface-raised",
+	"panneau-color-hover",
+	"panneau-color-pressed",
+	"panneau-color-backdrop",
+	"panneau-color-text",
+	"panneau-color-text-muted",
+	"panneau-color-link",
+	"panneau-color-border",
+	"panneau-color-border-control",
+	"panneau-color-accent",
+	"panneau-color-accent-hover",
+	"panneau-color-accent-text",
+	"panneau-color-accent-subtle",
+	"panneau-color-focus",
+	"panneau-color-danger",
+	"panneau-color-danger-subtle",
+	"panneau-color-danger-border",
+	"panneau-color-danger-solid",
+	"panneau-color-danger-solid-hover",
+	"panneau-color-danger-solid-text",
+	"panneau-color-success",
+	"panneau-color-success-subtle",
+	"panneau-color-success-border",
+	"panneau-color-success-solid",
+	"panneau-color-success-solid-hover",
+	"panneau-color-success-solid-text",
+	"panneau-color-warning",
+	"panneau-color-warning-subtle",
+	"panneau-color-warning-border",
+	"panneau-color-warning-solid",
+	"panneau-color-warning-solid-hover",
+	"panneau-color-warning-solid-text",
+	"panneau-color-info",
+	"panneau-color-info-subtle",
+	"panneau-color-info-border",
+	"panneau-color-info-solid",
+	"panneau-color-info-solid-hover",
+	"panneau-color-info-solid-text",
+	"panneau-chart-categorical-1",
+	"panneau-chart-categorical-2",
+	"panneau-chart-categorical-3",
+	"panneau-chart-categorical-4",
+	"panneau-chart-categorical-5",
+	"panneau-chart-categorical-6",
+	"panneau-chart-categorical-7",
+	"panneau-chart-categorical-8",
+	"panneau-chart-sequential-1",
+	"panneau-chart-sequential-2",
+	"panneau-chart-sequential-3",
+	"panneau-chart-sequential-4",
+	"panneau-chart-sequential-5",
+	"panneau-chart-diverging-negative",
+	"panneau-chart-diverging-neutral",
+	"panneau-chart-diverging-positive",
+	"panneau-font-family-body",
+	"panneau-font-family-heading",
+	"panneau-font-family-display",
+	"panneau-font-family-mono",
+	"panneau-font-family",
+	"panneau-font-numeric",
+	"panneau-font-size-xs",
+	"panneau-font-size-sm",
+	"panneau-font-size-md",
+	"panneau-font-size-lg",
+	"panneau-font-size-xl",
+	"panneau-font-size-control",
+	"panneau-line-height",
+	"panneau-line-height-tight",
+	"panneau-font-weight-normal",
+	"panneau-font-weight-medium",
+	"panneau-font-weight-bold",
+	"panneau-space-1",
+	"panneau-space-2",
+	"panneau-space-3",
+	"panneau-space-4",
+	"panneau-space-5",
+	"panneau-space-6",
+	"panneau-space-8",
+	"panneau-space-10",
+	"panneau-radius-sm",
+	"panneau-radius-md",
+	"panneau-radius-lg",
+	"panneau-radius-full",
+	"panneau-border-width",
+	"panneau-shadow-sm",
+	"panneau-shadow-md",
+	"panneau-shadow-lg",
+	"panneau-control-height",
+	"panneau-control-height-sm",
+	"panneau-control-padding-x",
+	"panneau-row-padding-y",
+	"panneau-focus-width",
+	"panneau-duration",
+	"panneau-z-overlay",
+	"panneau-z-toast"
+];
+//#endregion
+export { SEMANTIC_TOKENS };
+
+//# sourceMappingURL=semanticTokens.js.map

package/dist/theme/semanticTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"semanticTokens.js","names":[],"sources":["../../src/theme/semanticTokens.ts"],"sourcesContent":["/**\n * The semantic tokens of Panneau, without the leading `--`: what the default theme defines on the\n * root (`PanneauRoot.module.css`), and what a theme sets to restyle every component at once\n * (decision 0024). A test keeps this list in sync with the stylesheet.\n */\nexport const SEMANTIC_TOKENS = [\n    'panneau-color-bg',\n    'panneau-color-surface',\n    'panneau-color-surface-sunken',\n    'panneau-color-surface-raised',\n    'panneau-color-hover',\n    'panneau-color-pressed',\n    'panneau-color-backdrop',\n    'panneau-color-text',\n    'panneau-color-text-muted',\n    'panneau-color-link',\n    'panneau-color-border',\n    'panneau-color-border-control',\n    'panneau-color-accent',\n    'panneau-color-accent-hover',\n    'panneau-color-accent-text',\n    'panneau-color-accent-subtle',\n    'panneau-color-focus',\n    'panneau-color-danger',\n    'panneau-color-danger-subtle',\n    'panneau-color-danger-border',\n    'panneau-color-danger-solid',\n    'panneau-color-danger-solid-hover',\n    'panneau-color-danger-solid-text',\n    'panneau-color-success',\n    'panneau-color-success-subtle',\n    'panneau-color-success-border',\n    'panneau-color-success-solid',\n    'panneau-color-success-solid-hover',\n    'panneau-color-success-solid-text',\n    'panneau-color-warning',\n    'panneau-color-warning-subtle',\n    'panneau-color-warning-border',\n    'panneau-color-warning-solid',\n    'panneau-color-warning-solid-hover',\n    'panneau-color-warning-solid-text',\n    'panneau-color-info',\n    'panneau-color-info-subtle',\n    'panneau-color-info-border',\n    'panneau-color-info-solid',\n    'panneau-color-info-solid-hover',\n    'panneau-color-info-solid-text',\n    'panneau-chart-categorical-1',\n    'panneau-chart-categorical-2',\n    'panneau-chart-categorical-3',\n    'panneau-chart-categorical-4',\n    'panneau-chart-categorical-5',\n    'panneau-chart-categorical-6',\n    'panneau-chart-categorical-7',\n    'panneau-chart-categorical-8',\n    'panneau-chart-sequential-1',\n    'panneau-chart-sequential-2',\n    'panneau-chart-sequential-3',\n    'panneau-chart-sequential-4',\n    'panneau-chart-sequential-5',\n    'panneau-chart-diverging-negative',\n    'panneau-chart-diverging-neutral',\n    'panneau-chart-diverging-positive',\n    'panneau-font-family-body',\n    'panneau-font-family-heading',\n    'panneau-font-family-display',\n    'panneau-font-family-mono',\n    'panneau-font-family',\n    'panneau-font-numeric',\n    'panneau-font-size-xs',\n    'panneau-font-size-sm',\n    'panneau-font-size-md',\n    'panneau-font-size-lg',\n    'panneau-font-size-xl',\n    'panneau-font-size-control',\n    'panneau-line-height',\n    'panneau-line-height-tight',\n    'panneau-font-weight-normal',\n    'panneau-font-weight-medium',\n    'panneau-font-weight-bold',\n    'panneau-space-1',\n    'panneau-space-2',\n    'panneau-space-3',\n    'panneau-space-4',\n    'panneau-space-5',\n    'panneau-space-6',\n    'panneau-space-8',\n    'panneau-space-10',\n    'panneau-radius-sm',\n    'panneau-radius-md',\n    'panneau-radius-lg',\n    'panneau-radius-full',\n    'panneau-border-width',\n    'panneau-shadow-sm',\n    'panneau-shadow-md',\n    'panneau-shadow-lg',\n    'panneau-control-height',\n    'panneau-control-height-sm',\n    'panneau-control-padding-x',\n    'panneau-row-padding-y',\n    'panneau-focus-width',\n    'panneau-duration',\n    'panneau-z-overlay',\n    'panneau-z-toast',\n] as const;\n\n/** The name of a semantic token, without the leading `--`. */\nexport type SemanticTokenName = (typeof SEMANTIC_TOKENS)[number];\n"],"mappings":";;;;;;AAKA,IAAa,kBAAkB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AAAiB"}

package/dist/theme/theme.d.ts

@@ -1,23 +1,77 @@
+import type { ThemeFont } from './fonts';
+import { type ToneInput, type ToneSurfaces } from './tones';
 /**
  * A theme: design tokens, as CSS variables without the leading `--`, with optional overrides for
- * the dark scheme. It has the same shape as the `Theme` of `@panneau/core` plugins.
+ * the dark scheme, raw palette colors, its own tones, and named variants of components (decision
+ * 0024). A theme is plain data: the `Theme` schema of `@panneau/protocol` validates it, and plugins
+ * of `@panneau/core` register it. Write one with `defineTheme()` to check token names.
+ *
+ * It is a type rather than an interface so that it is assignable to the `Theme` of
+ * `@panneau/protocol`, which accepts properties of later versions.
  */
-export interface Theme {
+export type Theme = {
+    /** A name for theme pickers. */
     label?: string;
     /** Tokens of the light scheme, or of both schemes without `dark`: `{ 'panneau-color-accent': '#05f' }`. */
     tokens: Record<string, string>;
     /** Tokens that change in the dark scheme. */
     dark?: Record<string, string>;
-}
+    /**
+     * Raw colors, written as `--panneau-palette-<name>`: tokens and tones use them with
+     * `var(--panneau-palette-<name>)`, so that a theme names its brand colors once.
+     */
+    palette?: Record<string, string>;
+    /**
+     * Tones added or redefined by the theme: one color, from which Panneau derives the others,
+     * or every value. Declare added tones in `PanneauTones` so that `tone="signal"` type-checks.
+     */
+    tones?: Record<string, ToneInput>;
+    /**
+     * Named variants of components: token overrides that `<Badge variant="tag">` applies through
+     * its `panneau-badge-variant-tag` class. Declare them in `BadgeVariants` (and the like).
+     */
+    components?: Record<string, {
+        variants?: Record<string, Record<string, string>>;
+    }>;
+    /**
+     * Tokens of each density, such as `panneau-control-height`: tokens set here change with the
+     * density of the root, while the same tokens in `tokens` would apply to every density.
+     */
+    densities?: Partial<Record<Exclude<Density, 'auto'>, Record<string, string>>>;
+    /**
+     * Font faces and font stylesheets, which `PanneauRoot` adds to the page once. Font tokens
+     * (`panneau-font-family-heading`) then use their families.
+     */
+    fonts?: ThemeFont[];
+};
 /** `auto` follows the system setting (`prefers-color-scheme`). */
 export type ColorScheme = 'light' | 'dark' | 'auto';
+/**
+ * How much room controls and rows take: `compact`, `comfortable`, or `touch`, with larger targets.
+ * `auto` is `touch` on coarse pointers (touch screens) and `comfortable` otherwise.
+ */
+export type Density = 'compact' | 'comfortable' | 'touch' | 'auto';
 /** A short, stable hash of a string, to scope the CSS of a theme. */
 export declare function hashString(value: string): string;
+/** The palette of a theme, as variables: `{ 'panneau-palette-orange': '#f25c05' }`. */
+export declare function paletteVariables(palette?: Readonly<Record<string, string>>): Record<string, string>;
+/**
+ * Follows `var(--name)` references through the given variables (tokens, palette colors), until a
+ * value that is not one: `var(--panneau-palette-orange)` becomes `#f25c05`. A reference to a
+ * variable that isn't given is returned as is.
+ */
+export declare function resolveReference(value: string, variables: Readonly<Record<string, string>>): string;
+/**
+ * The surfaces of a theme in each scheme, when it sets ones Panneau can read: tones derived from
+ * one color are made readable on them.
+ */
+export declare function themeSurfaces(theme: Theme): ToneSurfaces;
 /**
- * The CSS of a theme, scoped to the roots that carry `data-panneau-theme="<scope>"`. Its rules are
- * more specific than the default tokens, and dark overrides more specific than light ones. Token
- * names must be plain identifiers, and values can't contain `{`, `}`, `;` or `<`: other entries are
- * ignored.
+ * The CSS of a theme, scoped to the roots that carry `data-panneau-theme="<scope>"`: its palette and
+ * tokens, its densities, its tones and the variants of components. Its rules are more specific than the default
+ * tokens and the built-in tones, and dark overrides more specific than light ones. Token, tone,
+ * component and variant names must be plain identifiers, and values can't contain `{`, `}`, `;` or
+ * `<`: other entries are ignored.
  */
 export declare function getThemeCss(theme: Theme, scope: string): string;
 //# sourceMappingURL=theme.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,KAAK;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2GAA2G;IAC3G,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACjC;AAED,kEAAkE;AAClE,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AASpD,qEAAqE;AACrE,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMhD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAW/D"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAEH,KAAK,SAAS,EACd,KAAK,YAAY,EAIpB,MAAM,SAAS,CAAC;AAEjB;;;;;;;;GAQG;AACH,MAAM,MAAM,KAAK,GAAG;IAChB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2GAA2G;IAC3G,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;KAAE,CAAC,CAAC;IACnF;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAC9E;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACvB,CAAC;AAEF,kEAAkE;AAClE,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpD;;;GAGG;AACH,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC;AASnE,qEAAqE;AACrE,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMhD;AAMD,uFAAuF;AACvF,wBAAgB,gBAAgB,CAC5B,OAAO,GAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM,GAC/C,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAMxB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC5B,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAC5C,MAAM,CAUR;AAaD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,YAAY,CAgBxD;AAoBD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CA+C/D"}

package/dist/theme/theme.js

@@ -1,3 +1,5 @@
+import { parseColor } from "./color.js";
+import { TONE_VARIABLES, resolveTone, toneClassName } from "./tones.js";
 //#region src/theme/theme.ts
 function declarations(tokens) {
 	return Object.entries(tokens).filter(([name, value]) => /^[a-zA-Z0-9-_]+$/.test(name) && !/[{};<]/.test(value)).map(([name, value]) => `--${name}:${value};`).join("");
@@ -8,23 +10,111 @@ function hashString(value) {
 	for (let index = 0; index < value.length; index += 1) hash = hash * 33 ^ value.charCodeAt(index);
 	return (hash >>> 0).toString(36);
 }
+var NAME = /^[a-z0-9-]+$/;
+var VARIABLE = /^var\(--([a-zA-Z0-9_-]+)\)$/;
+/** The palette of a theme, as variables: `{ 'panneau-palette-orange': '#f25c05' }`. */
+function paletteVariables(palette = {}) {
+	return Object.fromEntries(Object.entries(palette).filter(([name]) => NAME.test(name)).map(([name, value]) => [`panneau-palette-${name}`, value]));
+}
+/**
+* Follows `var(--name)` references through the given variables (tokens, palette colors), until a
+* value that is not one: `var(--panneau-palette-orange)` becomes `#f25c05`. A reference to a
+* variable that isn't given is returned as is.
+*/
+function resolveReference(value, variables) {
+	let current = value;
+	for (let depth = 0; depth < 10; depth += 1) {
+		const name = VARIABLE.exec(current.trim())?.[1];
+		if (name === void 0 || !Object.hasOwn(variables, name)) return current;
+		current = variables[name] ?? current;
+	}
+	return current;
+}
+function toneDeclarations(values) {
+	return declarations(Object.fromEntries(Object.keys(TONE_VARIABLES).map((key) => [TONE_VARIABLES[key], values[key]])));
+}
+/**
+* The surfaces of a theme in each scheme, when it sets ones Panneau can read: tones derived from
+* one color are made readable on them.
+*/
+function themeSurfaces(theme) {
+	const palette = paletteVariables(theme.palette);
+	const surface = (tokens) => {
+		const variables = {
+			...palette,
+			...tokens
+		};
+		const value = variables["panneau-color-surface"];
+		return value !== void 0 ? parseColor(resolveReference(value, variables)) : null;
+	};
+	const light = surface(theme.tokens);
+	const dark = theme.dark?.["panneau-color-surface"] !== void 0 ? surface({
+		...theme.tokens,
+		...theme.dark
+	}) : null;
+	return {
+		...light !== null && { light },
+		...dark !== null && { dark }
+	};
+}
+/**
+* The rules of the densities of a theme. `auto` takes the comfortable values on fine pointers and
+* the touch ones on coarse pointers, like the default theme.
+*/
+function densityCss(root, densities = {}) {
+	const body = (density) => declarations(densities[density] ?? {});
+	const rule = (selector, css) => css !== "" ? `${selector}{${css}}` : "";
+	const media = (query, css) => css !== "" ? `@media ${query}{${css}}` : "";
+	const selector = (density) => `${root}[data-density="${density}"]`;
+	return [
+		rule(selector("compact"), body("compact")),
+		rule(selector("comfortable"), body("comfortable")),
+		media("not (pointer: coarse)", rule(selector("auto"), body("comfortable"))),
+		rule(selector("touch"), body("touch")),
+		media("(pointer: coarse)", rule(selector("auto"), body("touch")))
+	].join("");
+}
 /**
-* The CSS of a theme, scoped to the roots that carry `data-panneau-theme="<scope>"`. Its rules are
-* more specific than the default tokens, and dark overrides more specific than light ones. Token
-* names must be plain identifiers, and values can't contain `{`, `}`, `;` or `<`: other entries are
-* ignored.
+* The CSS of a theme, scoped to the roots that carry `data-panneau-theme="<scope>"`: its palette and
+* tokens, its densities, its tones and the variants of components. Its rules are more specific than the default
+* tokens and the built-in tones, and dark overrides more specific than light ones. Token, tone,
+* component and variant names must be plain identifiers, and values can't contain `{`, `}`, `;` or
+* `<`: other entries are ignored.
 */
 function getThemeCss(theme, scope) {
 	const root = `[data-panneau-theme="${scope}"]`;
-	const light = declarations(theme.tokens);
-	const dark = theme.dark !== void 0 ? declarations(theme.dark) : "";
+	const dark = `${root}[data-color-scheme="dark"]`;
+	const auto = `${root}[data-color-scheme="auto"]`;
+	const light = [];
+	const darkRules = [];
+	const rule = (selector, body) => body !== "" ? `${selector}{${body}}` : "";
+	const palette = paletteVariables(theme.palette);
+	const surfaces = themeSurfaces(theme);
+	light.push(rule(root, declarations({
+		...palette,
+		...theme.tokens
+	})));
+	light.push(densityCss(root, theme.densities));
+	if (theme.dark !== void 0) darkRules.push(rule("§", declarations(theme.dark)));
+	Object.entries(theme.tones ?? {}).filter(([name]) => NAME.test(name)).forEach(([name, input]) => {
+		const values = resolveTone(typeof input === "string" ? resolveReference(input, palette) : input, surfaces);
+		const selector = `.${toneClassName(name)}`;
+		light.push(rule(`${root} ${selector}`, toneDeclarations(values.light)));
+		darkRules.push(rule(`§ ${selector}`, toneDeclarations(values.dark)));
+	});
+	Object.entries(theme.components ?? {}).filter(([component]) => NAME.test(component)).forEach(([component, { variants = {} }]) => {
+		Object.entries(variants).filter(([name]) => NAME.test(name)).forEach(([name, tokens]) => {
+			light.push(rule(`${root} .panneau-${component}-variant-${name}`, declarations(tokens)));
+		});
+	});
+	const darkCss = darkRules.filter(Boolean);
 	return [
-		light !== "" ? `${root}{${light}}` : "",
-		dark !== "" ? `${root}[data-color-scheme="dark"]{${dark}}` : "",
-		dark !== "" ? `@media (prefers-color-scheme: dark){${root}[data-color-scheme="auto"]{${dark}}}` : ""
+		...light,
+		...darkCss.map((css) => css.replaceAll("§", dark)),
+		darkCss.length > 0 ? `@media (prefers-color-scheme: dark){${darkCss.map((css) => css.replaceAll("§", auto)).join("")}}` : ""
 	].join("");
 }
 //#endregion
-export { getThemeCss, hashString };
+export { getThemeCss, hashString, paletteVariables, resolveReference, themeSurfaces };
 
 //# sourceMappingURL=theme.js.map

package/dist/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/theme/theme.ts"],"sourcesContent":["/**\n * A theme: design tokens, as CSS variables without the leading `--`, with optional overrides for\n * the dark scheme. It has the same shape as the `Theme` of `@panneau/core` plugins.\n */\nexport interface Theme {\n    label?: string;\n    /** Tokens of the light scheme, or of both schemes without `dark`: `{ 'panneau-color-accent': '#05f' }`. */\n    tokens: Record<string, string>;\n    /** Tokens that change in the dark scheme. */\n    dark?: Record<string, string>;\n}\n\n/** `auto` follows the system setting (`prefers-color-scheme`). */\nexport type ColorScheme = 'light' | 'dark' | 'auto';\n\nfunction declarations(tokens: Record<string, string>): string {\n    return Object.entries(tokens)\n        .filter(([name, value]) => /^[a-zA-Z0-9-_]+$/.test(name) && !/[{};<]/.test(value))\n        .map(([name, value]) => `--${name}:${value};`)\n        .join('');\n}\n\n/** A short, stable hash of a string, to scope the CSS of a theme. */\nexport function hashString(value: string): string {\n    let hash = 5381;\n    for (let index = 0; index < value.length; index += 1) {\n        hash = (hash * 33) ^ value.charCodeAt(index);\n    }\n    return (hash >>> 0).toString(36);\n}\n\n/**\n * The CSS of a theme, scoped to the roots that carry `data-panneau-theme=\"<scope>\"`. Its rules are\n * more specific than the default tokens, and dark overrides more specific than light ones. Token\n * names must be plain identifiers, and values can't contain `{`, `}`, `;` or `<`: other entries are\n * ignored.\n */\nexport function getThemeCss(theme: Theme, scope: string): string {\n    const root = `[data-panneau-theme=\"${scope}\"]`;\n    const light = declarations(theme.tokens);\n    const dark = theme.dark !== undefined ? declarations(theme.dark) : '';\n    return [\n        light !== '' ? `${root}{${light}}` : '',\n        dark !== '' ? `${root}[data-color-scheme=\"dark\"]{${dark}}` : '',\n        dark !== ''\n            ? `@media (prefers-color-scheme: dark){${root}[data-color-scheme=\"auto\"]{${dark}}}`\n            : '',\n    ].join('');\n}\n"],"mappings":";AAeA,SAAS,aAAa,QAAwC;CAC1D,OAAO,OAAO,QAAQ,MAAM,CAAC,CACxB,QAAQ,CAAC,MAAM,WAAW,mBAAmB,KAAK,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CACjF,KAAK,CAAC,MAAM,WAAW,KAAK,KAAI,GAAI,MAAK,EAAG,CAAC,CAC7C,KAAK,EAAE;AAChB;;AAGA,SAAgB,WAAW,OAAuB;CAC9C,IAAI,OAAO;CACX,KAAK,IAAI,QAAQ,GAAG,QAAQ,MAAM,QAAQ,SAAS,GAC/C,OAAQ,OAAO,KAAM,MAAM,WAAW,KAAK;CAE/C,QAAQ,SAAS,EAAA,CAAG,SAAS,EAAE;AACnC;;;;;;;AAQA,SAAgB,YAAY,OAAc,OAAuB;CAC7D,MAAM,OAAO,wBAAwB,MAAK;CAC1C,MAAM,QAAQ,aAAa,MAAM,MAAM;CACvC,MAAM,OAAO,MAAM,SAAS,KAAA,IAAY,aAAa,MAAM,IAAI,IAAI;CACnE,OAAO;EACH,UAAU,KAAK,GAAG,KAAI,GAAI,MAAK,KAAM;EACrC,SAAS,KAAK,GAAG,KAAI,6BAA8B,KAAI,KAAM;EAC7D,SAAS,KACH,uCAAuC,KAAI,6BAA8B,KAAI,MAC7E;CAAE,CACX,CAAC,KAAK,EAAE;AACb"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/theme/theme.ts"],"sourcesContent":["import { parseColor } from './color';\nimport type { ThemeFont } from './fonts';\nimport {\n    TONE_VARIABLES,\n    type ToneInput,\n    type ToneSurfaces,\n    type ToneValues,\n    resolveTone,\n    toneClassName,\n} from './tones';\n\n/**\n * A theme: design tokens, as CSS variables without the leading `--`, with optional overrides for\n * the dark scheme, raw palette colors, its own tones, and named variants of components (decision\n * 0024). A theme is plain data: the `Theme` schema of `@panneau/protocol` validates it, and plugins\n * of `@panneau/core` register it. Write one with `defineTheme()` to check token names.\n *\n * It is a type rather than an interface so that it is assignable to the `Theme` of\n * `@panneau/protocol`, which accepts properties of later versions.\n */\nexport type Theme = {\n    /** A name for theme pickers. */\n    label?: string;\n    /** Tokens of the light scheme, or of both schemes without `dark`: `{ 'panneau-color-accent': '#05f' }`. */\n    tokens: Record<string, string>;\n    /** Tokens that change in the dark scheme. */\n    dark?: Record<string, string>;\n    /**\n     * Raw colors, written as `--panneau-palette-<name>`: tokens and tones use them with\n     * `var(--panneau-palette-<name>)`, so that a theme names its brand colors once.\n     */\n    palette?: Record<string, string>;\n    /**\n     * Tones added or redefined by the theme: one color, from which Panneau derives the others,\n     * or every value. Declare added tones in `PanneauTones` so that `tone=\"signal\"` type-checks.\n     */\n    tones?: Record<string, ToneInput>;\n    /**\n     * Named variants of components: token overrides that `<Badge variant=\"tag\">` applies through\n     * its `panneau-badge-variant-tag` class. Declare them in `BadgeVariants` (and the like).\n     */\n    components?: Record<string, { variants?: Record<string, Record<string, string>> }>;\n    /**\n     * Tokens of each density, such as `panneau-control-height`: tokens set here change with the\n     * density of the root, while the same tokens in `tokens` would apply to every density.\n     */\n    densities?: Partial<Record<Exclude<Density, 'auto'>, Record<string, string>>>;\n    /**\n     * Font faces and font stylesheets, which `PanneauRoot` adds to the page once. Font tokens\n     * (`panneau-font-family-heading`) then use their families.\n     */\n    fonts?: ThemeFont[];\n};\n\n/** `auto` follows the system setting (`prefers-color-scheme`). */\nexport type ColorScheme = 'light' | 'dark' | 'auto';\n\n/**\n * How much room controls and rows take: `compact`, `comfortable`, or `touch`, with larger targets.\n * `auto` is `touch` on coarse pointers (touch screens) and `comfortable` otherwise.\n */\nexport type Density = 'compact' | 'comfortable' | 'touch' | 'auto';\n\nfunction declarations(tokens: Record<string, string>): string {\n    return Object.entries(tokens)\n        .filter(([name, value]) => /^[a-zA-Z0-9-_]+$/.test(name) && !/[{};<]/.test(value))\n        .map(([name, value]) => `--${name}:${value};`)\n        .join('');\n}\n\n/** A short, stable hash of a string, to scope the CSS of a theme. */\nexport function hashString(value: string): string {\n    let hash = 5381;\n    for (let index = 0; index < value.length; index += 1) {\n        hash = (hash * 33) ^ value.charCodeAt(index);\n    }\n    return (hash >>> 0).toString(36);\n}\n\nconst NAME = /^[a-z0-9-]+$/;\n\nconst VARIABLE = /^var\\(--([a-zA-Z0-9_-]+)\\)$/;\n\n/** The palette of a theme, as variables: `{ 'panneau-palette-orange': '#f25c05' }`. */\nexport function paletteVariables(\n    palette: Readonly<Record<string, string>> = {},\n): Record<string, string> {\n    return Object.fromEntries(\n        Object.entries(palette)\n            .filter(([name]) => NAME.test(name))\n            .map(([name, value]) => [`panneau-palette-${name}`, value]),\n    );\n}\n\n/**\n * Follows `var(--name)` references through the given variables (tokens, palette colors), until a\n * value that is not one: `var(--panneau-palette-orange)` becomes `#f25c05`. A reference to a\n * variable that isn't given is returned as is.\n */\nexport function resolveReference(\n    value: string,\n    variables: Readonly<Record<string, string>>,\n): string {\n    let current = value;\n    for (let depth = 0; depth < 10; depth += 1) {\n        const name = VARIABLE.exec(current.trim())?.[1];\n        if (name === undefined || !Object.hasOwn(variables, name)) {\n            return current;\n        }\n        current = variables[name] ?? current;\n    }\n    return current;\n}\n\nfunction toneDeclarations(values: ToneValues): string {\n    return declarations(\n        Object.fromEntries(\n            (Object.keys(TONE_VARIABLES) as (keyof ToneValues)[]).map((key) => [\n                TONE_VARIABLES[key],\n                values[key],\n            ]),\n        ),\n    );\n}\n\n/**\n * The surfaces of a theme in each scheme, when it sets ones Panneau can read: tones derived from\n * one color are made readable on them.\n */\nexport function themeSurfaces(theme: Theme): ToneSurfaces {\n    const palette = paletteVariables(theme.palette);\n    const surface = (tokens: Record<string, string>) => {\n        const variables = { ...palette, ...tokens };\n        const value = variables['panneau-color-surface'];\n        return value !== undefined ? parseColor(resolveReference(value, variables)) : null;\n    };\n    const light = surface(theme.tokens);\n    const dark =\n        theme.dark?.['panneau-color-surface'] !== undefined\n            ? surface({ ...theme.tokens, ...theme.dark })\n            : null;\n    return {\n        ...(light !== null && { light }),\n        ...(dark !== null && { dark }),\n    };\n}\n\n/**\n * The rules of the densities of a theme. `auto` takes the comfortable values on fine pointers and\n * the touch ones on coarse pointers, like the default theme.\n */\nfunction densityCss(root: string, densities: Theme['densities'] = {}): string {\n    const body = (density: Exclude<Density, 'auto'>) => declarations(densities[density] ?? {});\n    const rule = (selector: string, css: string) => (css !== '' ? `${selector}{${css}}` : '');\n    const media = (query: string, css: string) => (css !== '' ? `@media ${query}{${css}}` : '');\n    const selector = (density: Density) => `${root}[data-density=\"${density}\"]`;\n    return [\n        rule(selector('compact'), body('compact')),\n        rule(selector('comfortable'), body('comfortable')),\n        media('not (pointer: coarse)', rule(selector('auto'), body('comfortable'))),\n        rule(selector('touch'), body('touch')),\n        media('(pointer: coarse)', rule(selector('auto'), body('touch'))),\n    ].join('');\n}\n\n/**\n * The CSS of a theme, scoped to the roots that carry `data-panneau-theme=\"<scope>\"`: its palette and\n * tokens, its densities, its tones and the variants of components. Its rules are more specific than the default\n * tokens and the built-in tones, and dark overrides more specific than light ones. Token, tone,\n * component and variant names must be plain identifiers, and values can't contain `{`, `}`, `;` or\n * `<`: other entries are ignored.\n */\nexport function getThemeCss(theme: Theme, scope: string): string {\n    const root = `[data-panneau-theme=\"${scope}\"]`;\n    const dark = `${root}[data-color-scheme=\"dark\"]`;\n    const auto = `${root}[data-color-scheme=\"auto\"]`;\n    const light: string[] = [];\n    const darkRules: string[] = [];\n    const rule = (selector: string, body: string) => (body !== '' ? `${selector}{${body}}` : '');\n\n    const palette = paletteVariables(theme.palette);\n    const surfaces = themeSurfaces(theme);\n    light.push(rule(root, declarations({ ...palette, ...theme.tokens })));\n    light.push(densityCss(root, theme.densities));\n    if (theme.dark !== undefined) {\n        darkRules.push(rule('§', declarations(theme.dark)));\n    }\n    Object.entries(theme.tones ?? {})\n        .filter(([name]) => NAME.test(name))\n        .forEach(([name, input]) => {\n            // A tone from a palette color derives from the color itself.\n            const values = resolveTone(\n                typeof input === 'string' ? resolveReference(input, palette) : input,\n                surfaces,\n            );\n            const selector = `.${toneClassName(name)}`;\n            light.push(rule(`${root} ${selector}`, toneDeclarations(values.light)));\n            darkRules.push(rule(`§ ${selector}`, toneDeclarations(values.dark)));\n        });\n    Object.entries(theme.components ?? {})\n        .filter(([component]) => NAME.test(component))\n        .forEach(([component, { variants = {} }]) => {\n            Object.entries(variants)\n                .filter(([name]) => NAME.test(name))\n                .forEach(([name, tokens]) => {\n                    light.push(\n                        rule(`${root} .panneau-${component}-variant-${name}`, declarations(tokens)),\n                    );\n                });\n        });\n\n    const darkCss = darkRules.filter(Boolean);\n    return [\n        ...light,\n        ...darkCss.map((css) => css.replaceAll('§', dark)),\n        darkCss.length > 0\n            ? `@media (prefers-color-scheme: dark){${darkCss.map((css) => css.replaceAll('§', auto)).join('')}}`\n            : '',\n    ].join('');\n}\n"],"mappings":"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"}

package/dist/theme/toneClass.d.ts

@@ -0,0 +1,8 @@
+import { type Tone } from './tones';
+/**
+ * The class of a tone, `panneau-tone-<tone>`. The built-in tones come from `Tone.module.css`, whose
+ * classes get the same stable names, so using it includes their CSS; a theme's own tones get their
+ * rules from the theme.
+ */
+export declare function toneClass(tone: Tone): string;
+//# sourceMappingURL=toneClass.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toneClass.d.ts","sourceRoot":"","sources":["../../src/theme/toneClass.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,IAAI,EAAiB,MAAM,SAAS,CAAC;AAEnD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAE5C"}

package/dist/theme/toneClass.js

@@ -0,0 +1,15 @@
+import Tone_module_default from "./Tone.module.js";
+import { toneClassName } from "./tones.js";
+//#region src/theme/toneClass.ts
+/**
+* The class of a tone, `panneau-tone-<tone>`. The built-in tones come from `Tone.module.css`, whose
+* classes get the same stable names, so using it includes their CSS; a theme's own tones get their
+* rules from the theme.
+*/
+function toneClass(tone) {
+	return (Object.hasOwn(Tone_module_default, tone) ? Tone_module_default[tone] : void 0) ?? toneClassName(tone);
+}
+//#endregion
+export { toneClass };
+
+//# sourceMappingURL=toneClass.js.map

package/dist/theme/toneClass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toneClass.js","names":["styles"],"sources":["../../src/theme/toneClass.ts"],"sourcesContent":["import styles from './Tone.module.css';\nimport { type Tone, toneClassName } from './tones';\n\n/**\n * The class of a tone, `panneau-tone-<tone>`. The built-in tones come from `Tone.module.css`, whose\n * classes get the same stable names, so using it includes their CSS; a theme's own tones get their\n * rules from the theme.\n */\nexport function toneClass(tone: Tone): string {\n    return (Object.hasOwn(styles, tone) ? styles[tone] : undefined) ?? toneClassName(tone);\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,UAAU,MAAoB;CAC1C,QAAQ,OAAO,OAAOA,qBAAQ,IAAI,IAAIA,oBAAO,QAAQ,KAAA,MAAc,cAAc,IAAI;AACzF"}