import * as styled_components from 'styled-components';
import { DefaultTheme } from 'styled-components';

/**
 * Semiont Design Tokens
 *
 * Core design tokens for the Semiont design system.
 * These tokens provide the foundation for all component styling
 * and can be consumed via JavaScript or CSS variables.
 */
declare const tokens: {
    colors: {
        primary: {
            50: string;
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        secondary: {
            50: string;
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        semantic: {
            error: string;
            errorLight: string;
            errorDark: string;
            warning: string;
            warningLight: string;
            warningDark: string;
            success: string;
            successLight: string;
            successDark: string;
            info: string;
            infoLight: string;
            infoDark: string;
        };
        neutral: {
            0: string;
            50: string;
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
            950: string;
            1000: string;
        };
        background: {
            primary: string;
            secondary: string;
            tertiary: string;
            inverse: string;
        };
        text: {
            primary: string;
            secondary: string;
            tertiary: string;
            disabled: string;
            inverse: string;
        };
    };
    spacing: {
        0: string;
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        '2xl': string;
        '3xl': string;
        '4xl': string;
        '5xl': string;
    };
    typography: {
        fontFamily: {
            sans: string;
            mono: string;
        };
        fontSize: {
            xs: string;
            sm: string;
            base: string;
            lg: string;
            xl: string;
            '2xl': string;
            '3xl': string;
            '4xl': string;
            '5xl': string;
        };
        fontWeight: {
            thin: number;
            light: number;
            normal: number;
            medium: number;
            semibold: number;
            bold: number;
            black: number;
        };
        lineHeight: {
            none: number;
            tight: number;
            snug: number;
            normal: number;
            relaxed: number;
            loose: number;
        };
    };
    borderRadius: {
        none: string;
        sm: string;
        base: string;
        md: string;
        lg: string;
        xl: string;
        '2xl': string;
        '3xl': string;
        full: string;
    };
    shadows: {
        none: string;
        xs: string;
        sm: string;
        base: string;
        md: string;
        lg: string;
        xl: string;
        inner: string;
    };
    transitions: {
        duration: {
            fast: string;
            base: string;
            slow: string;
            slower: string;
        };
        timing: {
            linear: string;
            ease: string;
            easeIn: string;
            easeOut: string;
            easeInOut: string;
        };
    };
    breakpoints: {
        sm: string;
        md: string;
        lg: string;
        xl: string;
        '2xl': string;
    };
};

/**
 * Semiont theme object for styled-components
 */
declare const semiontTheme: DefaultTheme;
/**
 * Type augmentation for styled-components DefaultTheme
 */
declare module 'styled-components' {
    interface DefaultTheme {
        colors: typeof tokens.colors & {
            error: string;
            errorLight: string;
            errorDark: string;
            warning: string;
            warningLight: string;
            warningDark: string;
            success: string;
            successLight: string;
            successDark: string;
            info: string;
            infoLight: string;
            infoDark: string;
        };
        spacing: typeof tokens.spacing;
        typography: typeof tokens.typography;
        borderRadius: typeof tokens.borderRadius;
        shadows: typeof tokens.shadows;
        transitions: typeof tokens.transitions;
        breakpoints: typeof tokens.breakpoints;
    }
}
/**
 * CSS mixins for common component patterns
 */
declare const semiontMixins: {
    /**
     * Button base styles
     */
    buttonBase: styled_components.RuleSet<object>;
    /**
     * Button variant styles
     */
    buttonVariant: (variant: string) => styled_components.RuleSet<object>;
    /**
     * Button size styles
     */
    buttonSize: (size: string) => styled_components.RuleSet<object>;
    /**
     * Focus ring styles
     */
    focusRing: (color?: string) => styled_components.RuleSet<object>;
    /**
     * Truncate text with ellipsis
     */
    truncate: styled_components.RuleSet<object>;
    /**
     * Screen reader only
     */
    srOnly: styled_components.RuleSet<object>;
    /**
     * Responsive media query helpers
     */
    media: {
        sm: (styles: any) => styled_components.RuleSet<object>;
        md: (styles: any) => styled_components.RuleSet<object>;
        lg: (styles: any) => styled_components.RuleSet<object>;
        xl: (styles: any) => styled_components.RuleSet<object>;
        '2xl': (styles: any) => styled_components.RuleSet<object>;
    };
};
/**
 * Global styles for Semiont components
 */
declare const SemiontGlobalStyles: styled_components.RuleSet<object>;
/**
 * Helper function to create styled Semiont components
 *
 * Usage:
 * ```tsx
 * import styled from 'styled-components';
 * import { createStyledSemiontButton } from '@semiont/react-ui/integrations';
 *
 * const StyledButton = createStyledSemiontButton(styled);
 * ```
 */
declare function createStyledSemiontButton(styled: any): any;

export { SemiontGlobalStyles, createStyledSemiontButton, semiontMixins, semiontTheme };
