@poupe/theme-builder

export { formatCSSRules, formatCSSRulesArray, generateCSSRules, generateCSSRulesArray } from '@poupe/css'; import { C as Color, W as CustomColor } from './shared/theme-builder.BBfchCYS.mjs'; export { M as ColorFormat, X as ColorGroup, c as ColorMap, b as CorePaletteKey, a as CorePalettes, T as HctColor, R as HexColor, U as ObjectColor, S as RgbaColor, l as argb, j as argbFromColord, f as argbFromHct, h as argbFromHctColor, g as argbFromRgbaColor, k as argbFromString, N as colorFormatter, t as colord, m as colordFromArgb, o as colordFromHct, p as colordFromHctColor, q as colordFromString, V as corePaletteKeys, A as hct, u as hctFromArgb, x as hctFromColord, v as hctFromRgbaColor, y as hctFromString, J as hexFromArgb, I as hexFromColord, K as hexFromHct, L as hexFromHctColor, O as hexString, H as hsl, D as hslFromArgb, B as hslFromColord, E as hslFromHct, F as hslFromHctColor, G as hslFromString, P as hslString, i as isObjectColor, n as normalizeAlpha, r as rgbFromRgbaColor, e as rgba, d as rgbaFromHctColor, Q as rgbaString, s as splitArgb, z as splitHct, w as withNormalizedAlpha } from './shared/theme-builder.BBfchCYS.mjs'; import { Hct, TonalPalette } from '@poupe/material-color-utilities'; export { DynamicScheme, Hct, TonalPalette, Variant } from '@poupe/material-color-utilities'; export { AnyColor, Colord, HslColor, HslaColor, RgbColor } from 'colord'; /** * Complete collection of CSS named colors as defined in the CSS Color Module specifications. * * This object contains all standard CSS named colors organized by color family, * providing a comprehensive palette for color operations and conversions. * * @remarks * - All values are in hexadecimal format (#rrggbb or #rrggbbaa for transparent) * - Colors are grouped by visual similarity for easier navigation * - Includes all 147 CSS named colors from the CSS Color Module Level 4 specification * - Includes the transparent keyword for complete color support * - Some colors appear multiple times (e.g., cyan/aqua, fuchsia/magenta) as they represent the same color * * @example * ```typescript * const redColor = defaultColors.red; // '#ff0000' * const blueColor = defaultColors.blue; // '#0000ff' * ``` */ declare const defaultColors: { indianred: string; lightcoral: string; salmon: string; darksalmon: string; crimson: string; red: string; firebrick: string; darkred: string; pink: string; lightpink: string; hotpink: string; deeppink: string; mediumvioletred: string; palevioletred: string; lightsalmon: string; coral: string; tomato: string; orangered: string; darkorange: string; orange: string; gold: string; yellow: string; lightyellow: string; lemonchiffon: string; lightgoldenrodyellow: string; papayawhip: string; moccasin: string; peachpuff: string; palegoldenrod: string; khaki: string; darkkhaki: string; lavender: string; thistle: string; plum: string; violet: string; orchid: string; fuchsia: string; magenta: string; mediumorchid: string; mediumpurple: string; rebeccapurple: string; blueviolet: string; darkviolet: string; darkorchid: string; darkmagenta: string; purple: string; indigo: string; slateblue: string; darkslateblue: string; mediumslateblue: string; greenyellow: string; chartreuse: string; lawngreen: string; lime: string; limegreen: string; palegreen: string; lightgreen: string; mediumspringgreen: string; springgreen: string; mediumseagreen: string; seagreen: string; forestgreen: string; green: string; darkgreen: string; yellowgreen: string; olivedrab: string; olive: string; darkolivegreen: string; mediumaquamarine: string; darkseagreen: string; lightseagreen: string; darkcyan: string; teal: string; aqua: string; cyan: string; lightcyan: string; paleturquoise: string; aquamarine: string; turquoise: string; mediumturquoise: string; darkturquoise: string; cadetblue: string; steelblue: string; lightsteelblue: string; powderblue: string; lightblue: string; skyblue: string; lightskyblue: string; deepskyblue: string; dodgerblue: string; cornflowerblue: string; royalblue: string; blue: string; mediumblue: string; darkblue: string; navy: string; midnightblue: string; cornsilk: string; blanchedalmond: string; bisque: string; navajowhite: string; wheat: string; burlywood: string; tan: string; rosybrown: string; sandybrown: string; goldenrod: string; darkgoldenrod: string; peru: string; chocolate: string; saddlebrown: string; sienna: string; brown: string; maroon: string; white: string; snow: string; honeydew: string; mintcream: string; azure: string; aliceblue: string; ghostwhite: string; whitesmoke: string; seashell: string; beige: string; oldlace: string; floralwhite: string; ivory: string; antiquewhite: string; linen: string; lavenderblush: string; mistyrose: string; gainsboro: string; lightgray: string; lightgrey: string; silver: string; darkgray: string; darkgrey: string; gray: string; grey: string; dimgray: string; dimgrey: string; lightslategray: string; lightslategrey: string; slategray: string; slategrey: string; darkslategray: string; darkslategrey: string; black: string; transparent: string; }; /** * Converts CSS named color strings to their hexadecimal equivalents. * * @param c - The color value to process. Can be any valid Color type. * @returns The hexadecimal color value if the input is a known CSS named color, * otherwise returns the original input unchanged. * * @example * ```typescript * withKnownColor('red'); // '#ff0000' * withKnownColor('blue'); // '#0000ff' * withKnownColor('#abc123'); // '#abc123' (unchanged) * withKnownColor('unknown'); // 'unknown' (unchanged) * ``` * * @remarks * Only processes strings that contain only letters (both uppercase and lowercase). * Case-insensitive matching is performed by converting input to lowercase. */ declare function withKnownColor(c: string): string; declare function withKnownColor(c: number): number; declare function withKnownColor(c: Color): Color; /** @returns the result of mixing two colors in given ratios */ declare function makeColorMix(base: Color, other: Color, ratios: number): Hct; declare function makeColorMix(base: Color, other: Color, ratios: Array<number>): Hct[]; declare function makeColorMix<K extends string>(base: Color, other: Color, ratios: Record<K, number>): Record<K, Hct>; /** * Creates a tonal palette from a color with optional harmonization * * @param color - The base color to create the palette from * @param harmonizeTo - Optional target color to harmonize towards. * Harmonization shifts the hue of the base color * towards the target color while preserving tone. * @param isKeyColor - Whether to preserve the exact tone from the input * color (true) as key color or derive a tone * algorithmically (false). * @defaultValue `true` * @returns A TonalPalette instance handling tones from 0-100 */ declare function makeTonalPalette(color: Color, harmonizeTo?: Hct, isKeyColor?: boolean): TonalPalette; /** * Generates a custom color optionally harmonized to a target color * * @param color - The base color to transform into a custom color * @param harmonizeTo - Optional target color to harmonize towards. * Harmonization blends the hue of the base color * with the target while maintaining lightness. * @param name - Optional name identifier for the custom color * @param isKeyColor - Whether to preserve exact tone from input color * as key color. @defaultValue `true`. * @returns A CustomColor object with light and dark theme variations, * including primary color, on-color, container, and * on-container variants for each theme */ declare function makeCustomColor(color: Color, harmonizeTo?: Hct, name?: string, isKeyColor?: boolean): CustomColor; /** * Generates a custom color from a given tonal palette with predefined * light and dark color variations. * * Light theme uses tones: 40 (color), 100 (onColor), 90 (container), * 10 (onContainer). Dark theme uses tones: 80 (color), 20 (onColor), * 30 (container), 90 (onContainer). These follow Material Design 3 * color system guidelines for optimal contrast and accessibility. * * @param tones - The tonal palette (0-100 tone range) used to derive * color variations * @param name - Optional name identifier for the custom color * @returns A CustomColor object with light and dark color configurations * containing color, onColor, colorContainer, and onColorContainer * properties for each theme mode */ declare function makeCustomColorFromPalette(tones: TonalPalette, name?: string): CustomColor; /** * Material Design 3 state layer opacity values * @see https://m3.material.io/foundations/interaction/states/state-layers */ declare const stateLayerOpacities: { readonly hover: 0.08; readonly focus: 0.12; readonly pressed: 0.12; readonly dragged: 0.16; readonly disabled: 0.12; readonly onDisabled: 0.38; }; type StateLayerOpacity = typeof stateLayerOpacities; type InteractionState = keyof Omit<StateLayerOpacity, 'disabled' | 'onDisabled'>; type StateVariants<T extends string> = { [K in T as `${K}-hover` | `${K}-focus` | `${K}-pressed` | `${K}-dragged` | `${K}-disabled`]: Hct; } & { [K in T as `on-${K}-disabled`]: Hct; }; /** * State color mix parameters for CSS color-mix() function */ interface StateColorMixParams { /** The state type */ state: keyof typeof stateLayerOpacities; /** The base color CSS variable name */ baseColor: string; /** The on-color CSS variable name */ onColor: string; /** The opacity percentage for mixing (0-100) */ opacityPercent: number; } /** * Get CSS color-mix parameters for creating state colors * @param colorName - The base color name (e.g., 'primary', 'secondary') * @param state - The state type * @param prefix - Optional CSS variable prefix (defaults to empty string) * @returns Parameters for creating CSS color-mix */ declare function getStateColorMixParams(colorName: string, state: keyof Omit<StateLayerOpacity, 'onDisabled'>, prefix?: string): StateColorMixParams; /** * Creates state layer colors by mixing the on-color with the base color at specified opacities * Following Material Design 3 state layer principles * * @param baseColor - The base/background color * @param onColor - The on-color (content color that goes on top of the base) * @returns Object with state layer colors for each interaction state */ declare function makeStateLayerColors(baseColor: Color, onColor: Color): Record<"disabled" | "onDisabled" | "hover" | "focus" | "pressed" | "dragged", Hct>; /** * Generates state variants for a set of color pairs * Each color should have a corresponding on-color * * @param colors - Object with base colors and their on-colors * @returns Object with state variants for each color */ declare function makeStateVariants<K extends string>(colors: Record<K, Color>, onColors: Record<`on-${K}`, Color>): StateVariants<K>; declare const hexColorPattern: RegExp; declare const isHexColor: (s?: string) => boolean; export { Color, CustomColor, type InteractionState, type StateColorMixParams, type StateLayerOpacity, type StateVariants, defaultColors, getStateColorMixParams, hexColorPattern, isHexColor, makeColorMix, makeCustomColor, makeCustomColorFromPalette, makeStateLayerColors, makeStateVariants, makeTonalPalette, stateLayerOpacities, withKnownColor };