surf-design-system/build/styles/palette.d.ts

Surf Design System

export declare const paletteSDS: {
    black: string;
    white: string;
    gray: {
        50: string;
        75: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
    };
    blue: {
        50: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
    };
    green: {
        50: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
    };
    yellow: {
        50: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
    };
    red: {
        50: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
    };
    brandColor: {
        primary: string;
        empathsis: string;
        secondary: string;
        tertiary: string;
    };
    systemColor: {
        success: string;
        warning: string;
        error: string;
        overlay: string;
        disabledDark: string;
        disabled: string;
        white: string;
        black: string;
        positive: string;
    };
    categoryColor: {
        redOrange: string;
        orange: string;
        yellow: string;
        lime: string;
        mentis: string;
        green: string;
        mint: string;
        aquaBlue: string;
        skyBlue: string;
        blue: string;
        oceanBlue: string;
        blueViolet: string;
        violet: string;
        purple: string;
        pink: string;
        hotPink: string;
    };
};
export declare const colorPalette: {
    black: import("@emotion/react").SerializedStyles;
    white: import("@emotion/react").SerializedStyles;
    gray: {
        50: import("@emotion/react").SerializedStyles;
        100: import("@emotion/react").SerializedStyles;
        200: import("@emotion/react").SerializedStyles;
        300: import("@emotion/react").SerializedStyles;
        400: import("@emotion/react").SerializedStyles;
        500: import("@emotion/react").SerializedStyles;
        600: import("@emotion/react").SerializedStyles;
        700: import("@emotion/react").SerializedStyles;
        800: import("@emotion/react").SerializedStyles;
        900: import("@emotion/react").SerializedStyles;
    };
    blue: {
        50: import("@emotion/react").SerializedStyles;
        100: import("@emotion/react").SerializedStyles;
        200: import("@emotion/react").SerializedStyles;
        300: import("@emotion/react").SerializedStyles;
        400: import("@emotion/react").SerializedStyles;
        500: import("@emotion/react").SerializedStyles;
        600: import("@emotion/react").SerializedStyles;
        700: import("@emotion/react").SerializedStyles;
        800: import("@emotion/react").SerializedStyles;
        900: import("@emotion/react").SerializedStyles;
    };
    green: {
        50: import("@emotion/react").SerializedStyles;
        100: import("@emotion/react").SerializedStyles;
        200: import("@emotion/react").SerializedStyles;
        300: import("@emotion/react").SerializedStyles;
        400: import("@emotion/react").SerializedStyles;
        500: import("@emotion/react").SerializedStyles;
        600: import("@emotion/react").SerializedStyles;
        700: import("@emotion/react").SerializedStyles;
        800: import("@emotion/react").SerializedStyles;
        900: import("@emotion/react").SerializedStyles;
    };
    yellow: {
        50: import("@emotion/react").SerializedStyles;
        100: import("@emotion/react").SerializedStyles;
        200: import("@emotion/react").SerializedStyles;
        300: import("@emotion/react").SerializedStyles;
        400: import("@emotion/react").SerializedStyles;
        500: import("@emotion/react").SerializedStyles;
        600: import("@emotion/react").SerializedStyles;
        700: import("@emotion/react").SerializedStyles;
        800: import("@emotion/react").SerializedStyles;
        900: import("@emotion/react").SerializedStyles;
    };
    red: {
        50: import("@emotion/react").SerializedStyles;
        100: import("@emotion/react").SerializedStyles;
        200: import("@emotion/react").SerializedStyles;
        300: import("@emotion/react").SerializedStyles;
        400: import("@emotion/react").SerializedStyles;
        500: import("@emotion/react").SerializedStyles;
        600: import("@emotion/react").SerializedStyles;
        700: import("@emotion/react").SerializedStyles;
        800: import("@emotion/react").SerializedStyles;
        900: import("@emotion/react").SerializedStyles;
    };
    brandColor: {
        primary: import("@emotion/react").SerializedStyles;
        empathsis: import("@emotion/react").SerializedStyles;
        secondary: import("@emotion/react").SerializedStyles;
        tertiary: import("@emotion/react").SerializedStyles;
    };
    systemColor: {
        success: import("@emotion/react").SerializedStyles;
        warning: import("@emotion/react").SerializedStyles;
        error: import("@emotion/react").SerializedStyles;
        overlay: import("@emotion/react").SerializedStyles;
        disabledDark: import("@emotion/react").SerializedStyles;
        disabled: import("@emotion/react").SerializedStyles;
        white: import("@emotion/react").SerializedStyles;
        black: import("@emotion/react").SerializedStyles;
        positive: import("@emotion/react").SerializedStyles;
    };
    categoryColor: {
        redOrange: import("@emotion/react").SerializedStyles;
        orange: import("@emotion/react").SerializedStyles;
        yellow: import("@emotion/react").SerializedStyles;
        lime: import("@emotion/react").SerializedStyles;
        mentis: import("@emotion/react").SerializedStyles;
        green: import("@emotion/react").SerializedStyles;
        mint: import("@emotion/react").SerializedStyles;
        aquaBlue: import("@emotion/react").SerializedStyles;
        skyBlue: import("@emotion/react").SerializedStyles;
        blue: import("@emotion/react").SerializedStyles;
        oceanBlue: import("@emotion/react").SerializedStyles;
        blueViolet: import("@emotion/react").SerializedStyles;
        violet: import("@emotion/react").SerializedStyles;
        purple: import("@emotion/react").SerializedStyles;
        pink: import("@emotion/react").SerializedStyles;
        hotPink: import("@emotion/react").SerializedStyles;
    };
};
export declare const backgroundPalette: {
    black: import("@emotion/react").SerializedStyles;
    white: import("@emotion/react").SerializedStyles;
    gray: {
        50: import("@emotion/react").SerializedStyles;
        100: import("@emotion/react").SerializedStyles;
        200: import("@emotion/react").SerializedStyles;
        300: import("@emotion/react").SerializedStyles;
        400: import("@emotion/react").SerializedStyles;
        500: import("@emotion/react").SerializedStyles;
        600: import("@emotion/react").SerializedStyles;
        700: import("@emotion/react").SerializedStyles;
        800: import("@emotion/react").SerializedStyles;
        900: import("@emotion/react").SerializedStyles;
    };
    blue: {
        50: import("@emotion/react").SerializedStyles;
        100: import("@emotion/react").SerializedStyles;
        200: import("@emotion/react").SerializedStyles;
        300: import("@emotion/react").SerializedStyles;
        400: import("@emotion/react").SerializedStyles;
        500: import("@emotion/react").SerializedStyles;
        600: import("@emotion/react").SerializedStyles;
        700: import("@emotion/react").SerializedStyles;
        800: import("@emotion/react").SerializedStyles;
        900: import("@emotion/react").SerializedStyles;
    };
    green: {
        50: import("@emotion/react").SerializedStyles;
        100: import("@emotion/react").SerializedStyles;
        200: import("@emotion/react").SerializedStyles;
        300: import("@emotion/react").SerializedStyles;
        400: import("@emotion/react").SerializedStyles;
        500: import("@emotion/react").SerializedStyles;
        600: import("@emotion/react").SerializedStyles;
        700: import("@emotion/react").SerializedStyles;
        800: import("@emotion/react").SerializedStyles;
        900: import("@emotion/react").SerializedStyles;
    };
    yellow: {
        50: import("@emotion/react").SerializedStyles;
        100: import("@emotion/react").SerializedStyles;
        200: import("@emotion/react").SerializedStyles;
        300: import("@emotion/react").SerializedStyles;
        400: import("@emotion/react").SerializedStyles;
        500: import("@emotion/react").SerializedStyles;
        600: import("@emotion/react").SerializedStyles;
        700: import("@emotion/react").SerializedStyles;
        800: import("@emotion/react").SerializedStyles;
        900: import("@emotion/react").SerializedStyles;
    };
    red: {
        50: import("@emotion/react").SerializedStyles;
        100: import("@emotion/react").SerializedStyles;
        200: import("@emotion/react").SerializedStyles;
        300: import("@emotion/react").SerializedStyles;
        400: import("@emotion/react").SerializedStyles;
        500: import("@emotion/react").SerializedStyles;
        600: import("@emotion/react").SerializedStyles;
        700: import("@emotion/react").SerializedStyles;
        800: import("@emotion/react").SerializedStyles;
        900: import("@emotion/react").SerializedStyles;
    };
    brandColor: {
        primary: import("@emotion/react").SerializedStyles;
        empathsis: import("@emotion/react").SerializedStyles;
        secondary: import("@emotion/react").SerializedStyles;
        tertiary: import("@emotion/react").SerializedStyles;
    };
    systemColor: {
        success: import("@emotion/react").SerializedStyles;
        warning: import("@emotion/react").SerializedStyles;
        error: import("@emotion/react").SerializedStyles;
        overlay: import("@emotion/react").SerializedStyles;
        disabledDark: import("@emotion/react").SerializedStyles;
        disabled: import("@emotion/react").SerializedStyles;
        white: import("@emotion/react").SerializedStyles;
        black: import("@emotion/react").SerializedStyles;
        positive: import("@emotion/react").SerializedStyles;
    };
    categoryColor: {
        redOrange: import("@emotion/react").SerializedStyles;
        orange: import("@emotion/react").SerializedStyles;
        yellow: import("@emotion/react").SerializedStyles;
        lime: import("@emotion/react").SerializedStyles;
        mentis: import("@emotion/react").SerializedStyles;
        green: import("@emotion/react").SerializedStyles;
        mint: import("@emotion/react").SerializedStyles;
        aquaBlue: import("@emotion/react").SerializedStyles;
        skyBlue: import("@emotion/react").SerializedStyles;
        blue: import("@emotion/react").SerializedStyles;
        oceanBlue: import("@emotion/react").SerializedStyles;
        blueViolet: import("@emotion/react").SerializedStyles;
        violet: import("@emotion/react").SerializedStyles;
        purple: import("@emotion/react").SerializedStyles;
        pink: import("@emotion/react").SerializedStyles;
        hotPink: import("@emotion/react").SerializedStyles;
    };
};
export declare const fillPalette: {
    black: import("@emotion/react").SerializedStyles;
    white: import("@emotion/react").SerializedStyles;
    gray: {
        50: import("@emotion/react").SerializedStyles;
        100: import("@emotion/react").SerializedStyles;
        200: import("@emotion/react").SerializedStyles;
        300: import("@emotion/react").SerializedStyles;
        400: import("@emotion/react").SerializedStyles;
        500: import("@emotion/react").SerializedStyles;
        600: import("@emotion/react").SerializedStyles;
        700: import("@emotion/react").SerializedStyles;
        800: import("@emotion/react").SerializedStyles;
        900: import("@emotion/react").SerializedStyles;
    };
    blue: {
        50: import("@emotion/react").SerializedStyles;
        100: import("@emotion/react").SerializedStyles;
        200: import("@emotion/react").SerializedStyles;
        300: import("@emotion/react").SerializedStyles;
        400: import("@emotion/react").SerializedStyles;
        500: import("@emotion/react").SerializedStyles;
        600: import("@emotion/react").SerializedStyles;
        700: import("@emotion/react").SerializedStyles;
        800: import("@emotion/react").SerializedStyles;
        900: import("@emotion/react").SerializedStyles;
    };
    green: {
        50: import("@emotion/react").SerializedStyles;
        100: import("@emotion/react").SerializedStyles;
        200: import("@emotion/react").SerializedStyles;
        300: import("@emotion/react").SerializedStyles;
        400: import("@emotion/react").SerializedStyles;
        500: import("@emotion/react").SerializedStyles;
        600: import("@emotion/react").SerializedStyles;
        700: import("@emotion/react").SerializedStyles;
        800: import("@emotion/react").SerializedStyles;
        900: import("@emotion/react").SerializedStyles;
    };
    yellow: {
        50: import("@emotion/react").SerializedStyles;
        100: import("@emotion/react").SerializedStyles;
        200: import("@emotion/react").SerializedStyles;
        300: import("@emotion/react").SerializedStyles;
        400: import("@emotion/react").SerializedStyles;
        500: import("@emotion/react").SerializedStyles;
        600: import("@emotion/react").SerializedStyles;
        700: import("@emotion/react").SerializedStyles;
        800: import("@emotion/react").SerializedStyles;
        900: import("@emotion/react").SerializedStyles;
    };
    red: {
        50: import("@emotion/react").SerializedStyles;
        100: import("@emotion/react").SerializedStyles;
        200: import("@emotion/react").SerializedStyles;
        300: import("@emotion/react").SerializedStyles;
        400: import("@emotion/react").SerializedStyles;
        500: import("@emotion/react").SerializedStyles;
        600: import("@emotion/react").SerializedStyles;
        700: import("@emotion/react").SerializedStyles;
        800: import("@emotion/react").SerializedStyles;
        900: import("@emotion/react").SerializedStyles;
    };
    brandColor: {
        primary: import("@emotion/react").SerializedStyles;
        empathsis: import("@emotion/react").SerializedStyles;
        secondary: import("@emotion/react").SerializedStyles;
        tertiary: import("@emotion/react").SerializedStyles;
    };
    systemColor: {
        success: import("@emotion/react").SerializedStyles;
        warning: import("@emotion/react").SerializedStyles;
        error: import("@emotion/react").SerializedStyles;
        overlay: import("@emotion/react").SerializedStyles;
        disabledDark: import("@emotion/react").SerializedStyles;
        disabled: import("@emotion/react").SerializedStyles;
        white: import("@emotion/react").SerializedStyles;
        black: import("@emotion/react").SerializedStyles;
        positive: import("@emotion/react").SerializedStyles;
    };
    categoryColor: {
        redOrange: import("@emotion/react").SerializedStyles;
        orange: import("@emotion/react").SerializedStyles;
        yellow: import("@emotion/react").SerializedStyles;
        lime: import("@emotion/react").SerializedStyles;
        mentis: import("@emotion/react").SerializedStyles;
        green: import("@emotion/react").SerializedStyles;
        mint: import("@emotion/react").SerializedStyles;
        aquaBlue: import("@emotion/react").SerializedStyles;
        skyBlue: import("@emotion/react").SerializedStyles;
        blue: import("@emotion/react").SerializedStyles;
        oceanBlue: import("@emotion/react").SerializedStyles;
        blueViolet: import("@emotion/react").SerializedStyles;
        violet: import("@emotion/react").SerializedStyles;
        purple: import("@emotion/react").SerializedStyles;
        pink: import("@emotion/react").SerializedStyles;
        hotPink: import("@emotion/react").SerializedStyles;
    };
};