@poupe/tailwindcss/dist/theme.d.mts

TailwindCSS v4 plugin for Poupe UI framework with theme customization support

import { T as ThemeOptions, a as Theme } from './shared/tailwindcss.BCSfevZZ.mjs';
export { S as Shades, f as ThemeColorConfig, h as ThemeColorOptions, g as ThemeColors, i as defaultPrimaryColor, d as defaultShades, q as defaultShapePrefix, p as defaultSurfacePrefix, n as defaultThemeContrastLevel, k as defaultThemeDarkSuffix, l as defaultThemeLightSuffix, j as defaultThemePrefix, o as defaultThemeScheme, c as makeHexShades, e as makeShades, m as makeThemeFromPartialOptions, t as themePlugin, b as themePluginFunction, v as validShade } from './shared/tailwindcss.BCSfevZZ.mjs';
import { CSSRuleObject, CSSRules } from '@poupe/css';
import { Hct } from '@poupe/theme-builder';
export { Color, ColorMap, Hct, StandardDynamicSchemeKey, StandardPaletteKey } from '@poupe/theme-builder';
import { Config } from 'tailwindcss/plugin';
export { Config } from 'tailwindcss/plugin';
export { KebabCase } from 'type-fest';
export { ColorFormat, colorFormatter } from '@poupe/theme-builder/core';
import './utils.mjs';

/**
 * Modern Tailwind CSS color palette for web design.
 *
 * This collection provides the essential colors from Tailwind CSS v3+,
 * optimized for modern web interfaces and design systems.
 *
 * @remarks
 * - All values are in hexadecimal format (#rrggbb)
 * - Colors are organized by hue family for consistent theming
 * - Includes neutral grays (slate, gray, zinc, neutral, stone) for versatile UI elements
 * - Vibrant colors (red through rose) for accent and semantic use cases
 * - Takes precedence over CSS named colors via {@link withKnownColor}
 * - Falls back to complete CSS named color collection from `@poupe/theme-builder`
 *
 * @example
 * ```typescript
 * const primaryColor = defaultColors.blue; // '#3b82f6'
 * const neutralColor = defaultColors.slate; // '#64748b'
 * ```
 */
declare const defaultColors: {
    slate: string;
    gray: string;
    grey: string;
    zinc: string;
    neutral: string;
    stone: string;
    red: string;
    orange: string;
    amber: string;
    yellow: string;
    lime: string;
    green: string;
    emerald: string;
    teal: string;
    cyan: string;
    sky: string;
    blue: string;
    indigo: string;
    violet: string;
    purple: string;
    fuchsia: string;
    pink: string;
    rose: string;
    black: string;
    white: string;
};

declare function withDefaultThemeOptions<K extends string = string>(options?: Partial<ThemeOptions<K>>): ThemeOptions<K>;

type DarkModeStrategy = Exclude<Config['darkMode'], undefined>;

declare function makeThemeComponents(theme: Readonly<Theme>, tailwindPrefix?: string): Record<string, CSSRuleObject>[];

/**
 * Creates a theme configuration based on the provided theme options.
 *
 * @param options - Theme configuration options
 * @returns A fully configured theme object with color palettes for dark and light modes
 *
 * @remarks
 * This function supports two theme generation modes:
 * - When `omitTheme` is true, it generates a theme with minimal configuration
 * - When `omitTheme` is false (default), it generates a full theme with dark and light color palettes
 */
declare function makeTheme<K extends string>(options: ThemeOptions<K>): Theme;
/**
 * Generates CSS base styles for a theme with dark and light modes.
 * Includes CSS custom properties for all theme colors and the shadow RGB variable.
 *
 * @param theme - The theme configuration containing dark and light color modes
 * @param darkMode - Strategy for applying dark mode (defaults to 'class')
 * @param stringify - Optional function to convert HCT colors to string representation (defaults to HSL string)
 * @returns An array of CSS rule objects for theme base styles
 * @remarks
 * Automatically generates `--{prefix}shadow-rgb` and `--{prefix}scrim-rgb` variables:
 * - When dark/light themes exist: direct RGB values extracted from Hct colors
 * - When dark/light themes don't exist: CSS Level 4 fallback syntax for both variables
 */
declare function makeThemeBases(theme: Readonly<Theme>, darkMode?: DarkModeStrategy, stringify?: (hct: Hct) => string): CSSRuleObject[];

/**
 * Generates a Tailwind CSS colors configuration based on a theme definition.
 *
 * @param theme - The theme configuration containing color definitions and options
 * @returns A partial Tailwind CSS configuration with processed colors
 *
 * @remarks
 * This function transforms creates Tailwind CSS colors using
 * the theme's CSS variables.
 * It includes definitions for inherit, current, transparent, white and black
 * in addition to the dynamically generated color variations.
 */
declare function makeConfig(theme: Theme, persistentColors?: Record<string, string>): Partial<Config>;

/**
 * Generates a set of shadow styles based on the provided theme configuration.
 *
 * @param theme - The theme configuration object containing theme prefix and options
 * @returns A tuple with two CSS rule objects: regular shadows and inset shadows
 * @remarks
 * This function creates the base shadow values that will be used for:
 * 1. Drop shadows (--drop-shadow-*): For use with the drop-shadow filter property
 * 2. Regular shadows (--shadow-*): For use with the box-shadow property
 * 3. Inset shadows (--inset-shadow-*): For inset box shadows
 *
 * Regular and drop shadows include z1 (lowest) through z5 (highest) elevation levels,
 * each with carefully calibrated opacity and offset values. Inset shadows provide a
 * pressed/inset effect with a single default style.
 *
 * All shadows use the `--{prefix}shadow-rgb` variable with appropriate opacity levels.
 * The RGB variable is automatically generated by `makeThemeBases()`:
 * - When dark/light themes exist: direct RGB values from Hct colors
 * - When dark/light themes don't exist: CSS Level 4 fallback syntax
 */
declare const makeShadows: (theme: Theme, reset?: boolean) => [CSSRules, CSSRules];
/**
 * Generates prefixed CSS variables for all shadow types.
 *
 * @param theme - The theme configuration object
 * @returns An array of CSS rule objects with prefixed variables:
 *   1. Box shadow variables (--shadow-*)
 *   2. Drop shadow variables (--drop-shadow-*)
 *   3. Inset shadow variables (--inset-shadow-*)
 */
declare const makeShadowRules: (theme: Theme, reset?: boolean) => CSSRules[];

/**
 * Formats a theme configuration into a series of CSS rules and utilities.
 *
 * @param theme - The theme configuration object to be processed
 * @param darkMode - Strategy for handling dark mode, defaults to 'class'
 * @param indent - Indentation string for formatting, defaults to two spaces
 * @param stringify - Optional function to convert Hct color values to string format. defaults to `rgb()`
 * @returns An array of formatted CSS rule strings
 */
declare function formatTheme(theme: Theme, darkMode?: DarkModeStrategy, indent?: string, stringify?: (value: Hct) => string): string[];

export { Theme, ThemeOptions, defaultColors, formatTheme, makeConfig, makeShadowRules, makeShadows, makeTheme, makeThemeBases, makeThemeComponents, makeConfig as themeConfigFunction, withDefaultThemeOptions };