/** * Border and outline design tokens for BeatUI. * * Defines scales for border widths and outline widths used consistently * across all interactive components. * * @module */ /** * Border width scale mapping size names to CSS values. * * | Name | Value | Usage | * |---------|--------|--------------------------------------| * | none | 0 | No border | * | thin | 1px | Subtle separators, dividers | * | default | 1.5px | Buttons, inputs, badges | * | medium | 2px | Focus rings, emphasis, tabs | * | thick | 3px | Modals, heavy emphasis | */ export declare const borderWidth: { readonly none: "0"; readonly thin: "1px"; readonly default: "1.5px"; readonly medium: "2px"; readonly thick: "3px"; }; /** * Union type of all available border width names. */ export type BorderWidthName = keyof typeof borderWidth; /** * Returns the CSS custom property name for a border width. * * @param size - The border width name * @returns The CSS variable name (e.g., `'--border-width-default'`) * * @example * ```ts * getBorderWidthVarName('default') // '--border-width-default' * ``` */ export declare function getBorderWidthVarName(size: BorderWidthName): string; /** * Returns a CSS `var()` expression referencing the border width custom property. * * @param size - The border width name * @returns A CSS `var()` string (e.g., `'var(--border-width-default)'`) * * @example * ```ts * getBorderWidthVar('default') // 'var(--border-width-default)' * ``` */ export declare function getBorderWidthVar(size: BorderWidthName): string; /** * Generates CSS custom property declarations for all border width tokens. * * @returns A record mapping CSS variable names to their border width values * * @example * ```ts * const vars = generateBorderWidthVariables() * // vars['--border-width-default'] === '1.5px' * ``` */ export declare function generateBorderWidthVariables(): Record; /** * Outline width scale mapping size names to CSS values. * * | Name | Value | Usage | * |---------|-------|----------------------------------| * | none | 0 | No outline | * | default | 1px | Default input outline | * | focus | 2px | Focus state, error state | */ export declare const outlineWidth: { readonly none: "0"; readonly default: "1px"; readonly focus: "2px"; }; /** * Union type of all available outline width names. */ export type OutlineWidthName = keyof typeof outlineWidth; /** * Returns the CSS custom property name for an outline width. * * @param size - The outline width name * @returns The CSS variable name (e.g., `'--outline-width-focus'`) */ export declare function getOutlineWidthVarName(size: OutlineWidthName): string; /** * Returns a CSS `var()` expression referencing the outline width custom property. * * @param size - The outline width name * @returns A CSS `var()` string (e.g., `'var(--outline-width-focus)'`) */ export declare function getOutlineWidthVar(size: OutlineWidthName): string; /** * Generates CSS custom property declarations for all outline width tokens. * * @returns A record mapping CSS variable names to their outline width values */ export declare function generateOutlineWidthVariables(): Record;