@lucasmiqueias/blip-tokens/dist/tokens.d.ts

Design token system inspired by BLiP's design language

/**
 * Design tokens as JavaScript objects
 * Useful for JavaScript consumption and programmatic access
 */
export interface ColorPalette {
    brand: string;
    light: {
        primary: string;
        secondary: string;
        surface: Record<string, string>;
        content: Record<string, string>;
        border: Record<string, string>;
        semantic: Record<string, string>;
        extended: Record<string, string>;
        actions: Record<string, string>;
    };
    dark: {
        primary: string;
        secondary: string;
        surface: Record<string, string>;
        content: Record<string, string>;
        border: Record<string, string>;
        semantic: Record<string, string>;
        extended: Record<string, string>;
        actions: Record<string, string>;
    };
}
export interface SpacingTokens {
    spacing: Record<string, string>;
    radius: Record<string, string>;
    components: Record<string, Record<string, string>>;
    icons: Record<string, string>;
    containers: Record<string, string>;
    zIndex: Record<string, string | number>;
}
export interface TypographyTokens {
    fontSizes: Record<string, string>;
    fontFamilies: Record<string, string[]>;
    fontWeights: Record<string, number>;
    lineHeights: Record<string, number>;
}
export interface ShadowTokens {
    shadows: Record<string, string>;
}
export declare const colors: any;
export declare const spacing: SpacingTokens;
export declare const typography: TypographyTokens;
export declare const shadows: ShadowTokens;
export declare const tokens: {
    readonly colors: any;
    readonly spacing: SpacingTokens;
    readonly typography: TypographyTokens;
    readonly shadows: ShadowTokens;
};
export declare const cssVars: {
    readonly brand: "var(--color-brand)";
    readonly surface: {
        readonly 0: "var(--surface-0)";
        readonly 1: "var(--surface-1)";
        readonly 2: "var(--surface-2)";
        readonly 3: "var(--surface-3)";
        readonly 4: "var(--surface-4)";
        readonly positive: "var(--surface-positive)";
        readonly negative: "var(--surface-negative)";
        readonly primary: "var(--surface-primary)";
    };
    readonly content: {
        readonly default: "var(--content-default)";
        readonly disable: "var(--content-disable)";
        readonly ghost: "var(--content-ghost)";
        readonly bright: "var(--content-bright)";
        readonly din: "var(--content-din)";
        readonly muted: "var(--content-muted)";
    };
    readonly border: {
        readonly 1: "var(--border-1)";
        readonly 2: "var(--border-2)";
        readonly 3: "var(--border-3)";
    };
    readonly status: {
        readonly positive: "var(--color-positive)";
        readonly negative: "var(--color-negative)";
        readonly info: "var(--color-info)";
        readonly system: "var(--color-system)";
        readonly focus: "var(--color-focus)";
        readonly success: "var(--color-success)";
        readonly warning: "var(--color-warning)";
        readonly error: "var(--color-error)";
        readonly delete: "var(--color-delete)";
    };
    readonly spacing: {
        readonly 0: "var(--spacing-0)";
        readonly 1: "var(--spacing-1)";
        readonly 2: "var(--spacing-2)";
        readonly 3: "var(--spacing-3)";
        readonly 4: "var(--spacing-4)";
        readonly 5: "var(--spacing-5)";
        readonly 6: "var(--spacing-6)";
        readonly 8: "var(--spacing-8)";
        readonly 10: "var(--spacing-10)";
        readonly 12: "var(--spacing-12)";
    };
    readonly radius: {
        readonly none: "var(--radius-none)";
        readonly sm: "var(--radius-sm)";
        readonly base: "var(--radius-base)";
        readonly md: "var(--radius-md)";
        readonly lg: "var(--radius-lg)";
        readonly xl: "var(--radius-xl)";
        readonly "2xl": "var(--radius-2xl)";
        readonly "3xl": "var(--radius-3xl)";
        readonly full: "var(--radius-full)";
    };
    readonly fontSize: {
        readonly xs: "var(--font-size-xs)";
        readonly sm: "var(--font-size-sm)";
        readonly base: "var(--font-size-base)";
        readonly lg: "var(--font-size-lg)";
        readonly xl: "var(--font-size-xl)";
        readonly "2xl": "var(--font-size-2xl)";
        readonly "3xl": "var(--font-size-3xl)";
        readonly "4xl": "var(--font-size-4xl)";
        readonly "5xl": "var(--font-size-5xl)";
    };
    readonly fontWeight: {
        readonly thin: "var(--font-weight-thin)";
        readonly light: "var(--font-weight-light)";
        readonly normal: "var(--font-weight-normal)";
        readonly medium: "var(--font-weight-medium)";
        readonly semibold: "var(--font-weight-semibold)";
        readonly bold: "var(--font-weight-bold)";
        readonly extrabold: "var(--font-weight-extrabold)";
    };
    readonly fontFamily: {
        readonly sans: "var(--font-family-sans)";
        readonly serif: "var(--font-family-serif)";
        readonly mono: "var(--font-family-mono)";
    };
    readonly shadow: {
        readonly sm: "var(--shadow-sm)";
        readonly md: "var(--shadow-md)";
        readonly lg: "var(--shadow-lg)";
        readonly xl: "var(--shadow-xl)";
        readonly "2xl": "var(--shadow-2xl)";
        readonly inner: "var(--shadow-inner)";
        readonly none: "var(--shadow-none)";
    };
    readonly action: {
        readonly hover: "var(--action-hover)";
        readonly pressed: "var(--action-pressed)";
    };
};
export default tokens;
//# sourceMappingURL=tokens.d.ts.map