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

package/dist/theme/defineTheme.js

@@ -0,0 +1,130 @@
+import { componentTokens } from "./components.js";
+import { SEMANTIC_TOKENS } from "./semanticTokens.js";
+//#region src/theme/defineTheme.ts
+function mergeRecords(first, second) {
+	return first === void 0 && second === void 0 ? void 0 : {
+		...first,
+		...second
+	};
+}
+function mergeComponents(first, second) {
+	const components = mergeRecords(first, second);
+	if (components === void 0) return;
+	return Object.fromEntries(Object.keys(components).map((component) => {
+		const before = first?.[component];
+		const after = second?.[component];
+		const variants = mergeRecords(before?.variants, after?.variants);
+		return [component, {
+			...before,
+			...after,
+			...variants !== void 0 && { variants: Object.fromEntries(Object.keys(variants).map((name) => [name, {
+				...before?.variants?.[name],
+				...after?.variants?.[name]
+			}])) }
+		}];
+	}));
+}
+var DENSITIES = [
+	"compact",
+	"comfortable",
+	"touch"
+];
+function mergeDensities(first, second) {
+	if (first === void 0 && second === void 0) return;
+	const densities = {
+		...first,
+		...second
+	};
+	DENSITIES.forEach((density) => {
+		if (first?.[density] !== void 0 && second?.[density] !== void 0) densities[density] = {
+			...first[density],
+			...second[density]
+		};
+	});
+	return densities;
+}
+function mergeFonts(first, second) {
+	if (first === void 0 && second === void 0) return;
+	const fonts = [...first ?? [], ...second ?? []];
+	return fonts.filter((font, index) => fonts.findIndex((other) => JSON.stringify(other) === JSON.stringify(font)) === index);
+}
+/**
+* Merges themes, in order: each one overrides the tokens, palette colors, tones and variants of
+* those before it. A token a theme sets in `tokens` but not in `dark` applies to both schemes, so it
+* also replaces the dark value of earlier themes. Variants merge token by token; tones are replaced
+* whole; densities merge token by token; fonts add up. The label is the last one set. Same as `mergeThemes()` of `@panneau/protocol`.
+*/
+function mergeThemes(...themes) {
+	return themes.reduce((merged, theme) => {
+		const tokens = theme.tokens ?? {};
+		const dark = mergeRecords(merged.dark !== void 0 ? Object.fromEntries(Object.entries(merged.dark).filter(([name]) => !Object.hasOwn(tokens, name))) : void 0, theme.dark);
+		const result = {
+			...merged,
+			...theme,
+			label: theme.label ?? merged.label,
+			tokens: {
+				...merged.tokens,
+				...tokens
+			},
+			dark: dark !== void 0 && Object.keys(dark).length > 0 ? dark : void 0,
+			palette: mergeRecords(merged.palette, theme.palette),
+			tones: mergeRecords(merged.tones, theme.tones),
+			components: mergeComponents(merged.components, theme.components),
+			densities: mergeDensities(merged.densities, theme.densities),
+			fonts: mergeFonts(merged.fonts, theme.fonts)
+		};
+		return Object.fromEntries(Object.entries(result).filter(([, value]) => value !== void 0));
+	}, { tokens: {} });
+}
+/** The first segments of the semantic tokens, and the components: names Panneau owns. */
+var NAMESPACES = [.../* @__PURE__ */ new Set([
+	...SEMANTIC_TOKENS.map((name) => name.split("-")[1]),
+	...Object.keys(componentTokens),
+	"tone"
+])];
+var KNOWN_TOKENS = /* @__PURE__ */ new Set([...SEMANTIC_TOKENS, ...Object.values(componentTokens).flatMap((tokens) => Object.keys(tokens))]);
+/**
+* Tokens of a theme (in its tokens, dark tokens, densities and variants) that Panneau doesn't know although they are in its namespaces
+* (`panneau-color-*`, `panneau-button-*`…): most likely typos. Tokens of a project's own components
+* are outside these namespaces, and palette colors are always accepted.
+*/
+function findUnknownTokens(theme) {
+	const names = [
+		...Object.keys(theme.tokens),
+		...Object.keys(theme.dark ?? {}),
+		...Object.values(theme.densities ?? {}).flatMap((tokens) => Object.keys(tokens)),
+		...Object.values(theme.components ?? {}).flatMap(({ variants = {} }) => Object.values(variants).flatMap((tokens) => Object.keys(tokens)))
+	];
+	return [...new Set(names.filter((name) => !KNOWN_TOKENS.has(name) && !name.startsWith("panneau-palette-") && NAMESPACES.some((namespace) => name.startsWith(`panneau-${namespace}-`))))];
+}
+/**
+* Declares a theme: TypeScript checks the names of its tokens, and `extends` builds it on other
+* themes (`bootstrapTheme`, a shared brand theme), whose values its own override. It returns a
+* plain `Theme`, which `PanneauRoot`, plugins and JSON files all take. Tokens that Panneau doesn't
+* know in its own namespaces, most likely typos, are reported in the console.
+*
+* ```ts
+* const brand = defineTheme({
+*     palette: { orange: '#f25c05' },
+*     tokens: { 'panneau-color-accent': 'var(--panneau-palette-orange)' },
+*     tones: { signal: 'var(--panneau-palette-orange)' },
+* });
+* const compact = defineTheme({ extends: brand, tokens: { 'panneau-control-height': '2rem' } });
+* ```
+*/
+function defineTheme(definition) {
+	const { extends: extended = [], ...own } = definition;
+	const bases = Array.isArray(extended) ? extended : [extended];
+	const ownTheme = {
+		...own,
+		tokens: own.tokens ?? {}
+	};
+	const theme = mergeThemes(...bases, ownTheme);
+	const unknown = findUnknownTokens(ownTheme);
+	if (unknown.length > 0) console.warn(`[panneau] Unknown tokens in theme${theme.label !== void 0 ? ` "${theme.label}"` : ""}: ${unknown.join(", ")}.`);
+	return theme;
+}
+//#endregion
+export { defineTheme, findUnknownTokens, mergeThemes };
+
+//# sourceMappingURL=defineTheme.js.map

package/dist/theme/defineTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defineTheme.js","names":[],"sources":["../../src/theme/defineTheme.ts"],"sourcesContent":["import { type ComponentTokenName, componentTokens } from './components';\nimport type { ThemeFont } from './fonts';\nimport { SEMANTIC_TOKENS, type SemanticTokenName } from './semanticTokens';\nimport type { Density, Theme } from './theme';\nimport type { ToneInput } from './tones';\n\n/**\n * Tokens that a project adds, such as those of its own components: declare them here so that\n * `defineTheme()` accepts them.\n *\n * ```ts\n * declare module '@panneau/ui' {\n *     interface PanneauTokens {\n *         'panneau-map-marker-color': true;\n *     }\n * }\n * ```\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- extended by projects\nexport interface PanneauTokens {}\n\n/** The variable of a palette color: `panneau-palette-orange`. */\nexport type PaletteTokenName = `panneau-palette-${string}`;\n\n/**\n * The name of a token a theme can set, without the leading `--`: a semantic token, a component\n * token, a palette color, or a token declared in `PanneauTokens`.\n */\nexport type TokenName =\n    SemanticTokenName | ComponentTokenName | PaletteTokenName | (keyof PanneauTokens & string);\n\n/** Values of tokens, keyed by their name: only known names type-check. */\nexport type ThemeTokens = {\n    [Name in SemanticTokenName | ComponentTokenName | (keyof PanneauTokens & string)]?: string;\n} & { [Name in PaletteTokenName]?: string };\n\n/** A theme as `defineTheme()` takes it: like `Theme`, with typed tokens and `extends`. */\nexport interface ThemeDefinition {\n    /** A name for theme pickers. */\n    label?: string;\n    /** Themes this one builds on, in order: its own values override theirs. */\n    extends?: Theme | readonly Theme[];\n    /** Tokens of the light scheme, or of both schemes when `dark` does not set them. */\n    tokens?: ThemeTokens;\n    /** Tokens that change in the dark scheme. */\n    dark?: ThemeTokens;\n    /** Raw colors, used with `var(--panneau-palette-<name>)`. */\n    palette?: Record<string, string>;\n    /** Tones added or redefined by the theme. Declare added tones in `PanneauTones`. */\n    tones?: Record<string, ToneInput>;\n    /** Named variants of components. Declare them in `BadgeVariants` (and the like). */\n    components?: Record<string, { variants?: Record<string, ThemeTokens> }>;\n    /** Tokens of each density, which change with the density of the root. */\n    densities?: Partial<Record<Exclude<Density, 'auto'>, ThemeTokens>>;\n    /** Font faces and font stylesheets. */\n    fonts?: ThemeFont[];\n}\n\nfunction mergeRecords<T>(\n    first: Readonly<Record<string, T>> | undefined,\n    second: Readonly<Record<string, T>> | undefined,\n): Record<string, T> | undefined {\n    return first === undefined && second === undefined ? undefined : { ...first, ...second };\n}\n\nfunction mergeComponents(\n    first: Theme['components'],\n    second: Theme['components'],\n): Theme['components'] {\n    const components = mergeRecords(first, second);\n    if (components === undefined) {\n        return undefined;\n    }\n    return Object.fromEntries(\n        Object.keys(components).map((component) => {\n            const before = first?.[component];\n            const after = second?.[component];\n            const variants = mergeRecords(before?.variants, after?.variants);\n            return [\n                component,\n                {\n                    ...before,\n                    ...after,\n                    ...(variants !== undefined && {\n                        variants: Object.fromEntries(\n                            Object.keys(variants).map((name) => [\n                                name,\n                                { ...before?.variants?.[name], ...after?.variants?.[name] },\n                            ]),\n                        ),\n                    }),\n                },\n            ];\n        }),\n    );\n}\n\nconst DENSITIES = ['compact', 'comfortable', 'touch'] as const;\n\nfunction mergeDensities(first: Theme['densities'], second: Theme['densities']): Theme['densities'] {\n    if (first === undefined && second === undefined) {\n        return undefined;\n    }\n    const densities = { ...first, ...second };\n    DENSITIES.forEach((density) => {\n        if (first?.[density] !== undefined && second?.[density] !== undefined) {\n            densities[density] = { ...first[density], ...second[density] };\n        }\n    });\n    return densities;\n}\n\nfunction mergeFonts(first: Theme['fonts'], second: Theme['fonts']): Theme['fonts'] {\n    if (first === undefined && second === undefined) {\n        return undefined;\n    }\n    const fonts = [...(first ?? []), ...(second ?? [])];\n    return fonts.filter(\n        (font, index) =>\n            fonts.findIndex((other) => JSON.stringify(other) === JSON.stringify(font)) === index,\n    );\n}\n\n/**\n * Merges themes, in order: each one overrides the tokens, palette colors, tones and variants of\n * those before it. A token a theme sets in `tokens` but not in `dark` applies to both schemes, so it\n * also replaces the dark value of earlier themes. Variants merge token by token; tones are replaced\n * whole; densities merge token by token; fonts add up. The label is the last one set. Same as `mergeThemes()` of `@panneau/protocol`.\n */\nexport function mergeThemes(...themes: readonly Partial<Theme>[]): Theme {\n    return themes.reduce<Theme>(\n        (merged, theme) => {\n            const tokens = theme.tokens ?? {};\n            const dark = mergeRecords(\n                merged.dark !== undefined\n                    ? Object.fromEntries(\n                          Object.entries(merged.dark).filter(\n                              ([name]) => !Object.hasOwn(tokens, name),\n                          ),\n                      )\n                    : undefined,\n                theme.dark,\n            );\n            const result: Theme = {\n                ...merged,\n                ...theme,\n                label: theme.label ?? merged.label,\n                tokens: { ...merged.tokens, ...tokens },\n                dark: dark !== undefined && Object.keys(dark).length > 0 ? dark : undefined,\n                palette: mergeRecords(merged.palette, theme.palette),\n                tones: mergeRecords(merged.tones, theme.tones),\n                components: mergeComponents(merged.components, theme.components),\n                densities: mergeDensities(merged.densities, theme.densities),\n                fonts: mergeFonts(merged.fonts, theme.fonts),\n            };\n            return Object.fromEntries(\n                Object.entries(result).filter(([, value]) => value !== undefined),\n            ) as unknown as Theme;\n        },\n        { tokens: {} },\n    );\n}\n\n/** The first segments of the semantic tokens, and the components: names Panneau owns. */\nconst NAMESPACES = [\n    ...new Set([\n        ...SEMANTIC_TOKENS.map((name) => name.split('-')[1]),\n        ...Object.keys(componentTokens),\n        'tone',\n    ]),\n];\n\nconst KNOWN_TOKENS = new Set<string>([\n    ...SEMANTIC_TOKENS,\n    ...Object.values(componentTokens).flatMap((tokens) => Object.keys(tokens)),\n]);\n\n/**\n * Tokens of a theme (in its tokens, dark tokens, densities and variants) that Panneau doesn't know although they are in its namespaces\n * (`panneau-color-*`, `panneau-button-*`…): most likely typos. Tokens of a project's own components\n * are outside these namespaces, and palette colors are always accepted.\n */\nexport function findUnknownTokens(theme: Theme): string[] {\n    const names = [\n        ...Object.keys(theme.tokens),\n        ...Object.keys(theme.dark ?? {}),\n        ...Object.values(theme.densities ?? {}).flatMap((tokens) => Object.keys(tokens)),\n        ...Object.values(theme.components ?? {}).flatMap(({ variants = {} }) =>\n            Object.values(variants).flatMap((tokens) => Object.keys(tokens)),\n        ),\n    ];\n    return [\n        ...new Set(\n            names.filter(\n                (name) =>\n                    !KNOWN_TOKENS.has(name) &&\n                    !name.startsWith('panneau-palette-') &&\n                    NAMESPACES.some((namespace) => name.startsWith(`panneau-${namespace}-`)),\n            ),\n        ),\n    ];\n}\n\n/**\n * Declares a theme: TypeScript checks the names of its tokens, and `extends` builds it on other\n * themes (`bootstrapTheme`, a shared brand theme), whose values its own override. It returns a\n * plain `Theme`, which `PanneauRoot`, plugins and JSON files all take. Tokens that Panneau doesn't\n * know in its own namespaces, most likely typos, are reported in the console.\n *\n * ```ts\n * const brand = defineTheme({\n *     palette: { orange: '#f25c05' },\n *     tokens: { 'panneau-color-accent': 'var(--panneau-palette-orange)' },\n *     tones: { signal: 'var(--panneau-palette-orange)' },\n * });\n * const compact = defineTheme({ extends: brand, tokens: { 'panneau-control-height': '2rem' } });\n * ```\n */\nexport function defineTheme(definition: ThemeDefinition): Theme {\n    const { extends: extended = [], ...own } = definition;\n    const bases: readonly Theme[] = Array.isArray(extended) ? extended : [extended as Theme];\n    const ownTheme = { ...own, tokens: own.tokens ?? {} } as Theme;\n    const theme = mergeThemes(...bases, ownTheme);\n    const unknown = findUnknownTokens(ownTheme);\n    if (unknown.length > 0) {\n        console.warn(\n            `[panneau] Unknown tokens in theme${theme.label !== undefined ? ` \"${theme.label}\"` : ''}: ${unknown.join(', ')}.`,\n        );\n    }\n    return theme;\n}\n"],"mappings":"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"}

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"}