@useloops/design-system/dist/theme/types.d.ts

The official React based Loops design system

import { ColorRange, ColorRangeAlpha } from '../systems/BrandCore/types.js';

type ScreenSize = 'sm' | 'lg';
interface CustomTheme {
    palette: {
        black: string;
        white: string;
        neutral: ColorRange;
        neutralAlpha: ColorRangeAlpha;
        purple: ColorRange;
        red: ColorRange;
        peach: ColorRange;
        yellow: ColorRange;
        blue: ColorRange;
        green: ColorRange;
        icon: {
            primary: string;
            secondary: string;
            disabled: string;
            primaryInverted: string;
            secondaryInverted: string;
            disabledInverted: string;
            lockedWhite: string;
            link: string;
            linkHover: string;
        };
        interaction: {
            none: string;
            hover: string;
            press: string;
            hoverOnDark: string;
            pressOnDark: string;
            disabled: string;
            disabledMuted: string;
        };
        stroke: {
            default: string;
            light: string;
            focus: string;
            disabled: string;
        };
        surface: {
            default: string;
            sunken: string;
            raised: string;
            float: string;
            overlay: string;
            scrim: string;
            transparent: string;
        };
        text: {
            primary: string;
            secondary: string;
            placeholder: string;
            disabled: string;
            link: string;
            linkHover: string;
            primaryInverted: string;
            secondaryInverted: string;
            placeholderInverted: string;
            disabledInverted: string;
            positive: string;
            negative: string;
            lockedWhite: string;
        };
        input: {
            default: string;
            disabled: string;
        };
        skeleton: {
            default: string;
        };
        data: {
            sentimentVeryPositive: string;
            sentimentPositive: string;
            sentimentNeutral: string;
            sentimentNegative: string;
            sentimentVeryNegative: string;
        };
        body: string;
    };
    margin: {
        none: number;
        xs: number;
        sm: number;
        md: number;
        lg: number;
        xl: number;
        xxl: number;
        xxxl: number;
    };
    padding: {
        none: number;
        xs: number;
        sm: number;
        md: number;
        lg: number;
        xl: number;
    };
    radius: {
        none: number;
        xs: number;
        sm: number;
        md: number;
        lg: number;
        xl: number;
        round: number;
    };
    elevation: {
        raised: string;
        float: string;
        overlay: string;
        aiSummary: string;
    };
    elevationFilter: {
        raised: string;
        float: string;
        overlay: string;
    };
    easing: {
        default: string;
        input: string;
    };
    boxShadow: {
        input: {
            focus: string;
            handle: string;
        };
    };
    shape: {
        borderRadius: number;
        hotspot: {
            active: number;
            default: number;
        };
    };
    typography: {
        headline: {
            xxs: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            xxl: string;
            xxxl: string;
        };
        body: {
            xxs: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            xxl: string;
            xxxl: string;
        };
    };
}

export type { CustomTheme, ScreenSize };