@furystack/shades-common-components/esm/services/css-variable-theme.d.ts

Common UI components for FuryStack Shades

import type { DeepPartial } from '@furystack/utils';
import type { Theme } from './theme-provider-service.js';
export declare const cssVariableTheme: {
    name: string;
    text: {
        primary: string;
        secondary: string;
        disabled: string;
    };
    button: {
        active: string;
        hover: string;
        selected: string;
        disabled: string;
        disabledBackground: string;
    };
    background: {
        default: string;
        paper: string;
        paperImage: string;
    };
    palette: {
        primary: {
            light: string;
            lightContrast: string;
            main: string;
            mainContrast: string;
            dark: string;
            darkContrast: string;
        };
        secondary: {
            light: string;
            lightContrast: string;
            main: string;
            mainContrast: string;
            dark: string;
            darkContrast: string;
        };
        error: {
            light: string;
            lightContrast: string;
            main: string;
            mainContrast: string;
            dark: string;
            darkContrast: string;
        };
        warning: {
            light: string;
            lightContrast: string;
            main: string;
            mainContrast: string;
            dark: string;
            darkContrast: string;
        };
        info: {
            light: string;
            lightContrast: string;
            main: string;
            mainContrast: string;
            dark: string;
            darkContrast: string;
        };
        success: {
            light: string;
            lightContrast: string;
            main: string;
            mainContrast: string;
            dark: string;
            darkContrast: string;
        };
    };
    divider: string;
    action: {
        hoverBackground: string;
        selectedBackground: string;
        activeBackground: string;
        focusRing: string;
        focusOutline: string;
        disabledOpacity: string;
        backdrop: string;
        subtleBorder: string;
    };
    shape: {
        borderRadius: {
            xs: string;
            sm: string;
            md: string;
            lg: string;
            full: string;
        };
        borderWidth: string;
    };
    shadows: {
        none: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
    typography: {
        fontFamily: string;
        fontSize: {
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            xxl: string;
            xxxl: string;
            xxxxl: string;
        };
        fontWeight: {
            normal: string;
            medium: string;
            semibold: string;
            bold: string;
        };
        lineHeight: {
            tight: string;
            normal: string;
            relaxed: string;
        };
        letterSpacing: {
            tight: string;
            dense: string;
            normal: string;
            wide: string;
            wider: string;
            widest: string;
        };
        textShadow: string;
    };
    transitions: {
        duration: {
            fast: string;
            normal: string;
            slow: string;
        };
        easing: {
            default: string;
            easeOut: string;
            easeInOut: string;
        };
    };
    spacing: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
    zIndex: {
        drawer: string;
        appBar: string;
        modal: string;
        tooltip: string;
        dropdown: string;
    };
    effects: {
        blurSm: string;
        blurMd: string;
        blurLg: string;
        blurXl: string;
    };
};
/**
 * Builds a CSS transition string from property-duration-easing triplets.
 * @param specs - Array of [property, duration, easing] tuples
 * @returns A CSS transition string
 * @example
 * buildTransition(
 *   ['background', cssVariableTheme.transitions.duration.normal, cssVariableTheme.transitions.easing.default],
 *   ['opacity', cssVariableTheme.transitions.duration.fast, 'ease-out'],
 * )
 */
export declare const buildTransition: (...specs: Array<[property: string, duration: string, easing: string]>) => string;
/**
 * Injects global `:focus-visible` styles using the theme's `focusOutline` CSS variable.
 * Ensures keyboard/spatial navigation focus is visible while mouse clicks produce no outline.
 * Safe to call multiple times — the style element is only created once.
 */
export declare const injectFocusVisibleStyles: () => void;
export declare const setCssVariable: (key: string, value: string, root: HTMLElement) => void;
export declare const removeCssVariable: (key: string, root: HTMLElement) => void;
export declare const getCssVariable: (key: string, root?: HTMLElement) => string;
export declare const useThemeCssVariables: (theme: DeepPartial<Theme>, root?: HTMLElement) => void;
//# sourceMappingURL=css-variable-theme.d.ts.map