@undp/design-system-react/dist/ConfigProvider.d.ts

React based design system for UNDP

import { JSX } from 'react/jsx-runtime';
import { ReactNode } from 'react';

declare type AccentScale = {
    200?: string;
    400?: string;
    600?: string;
};

declare type BlueScale = {
    100?: string;
    200?: string;
    300?: string;
    400?: string;
    500?: string;
    600?: string;
    700?: string;
};

declare interface ConfigDataType {
    blue?: BlueScale;
    gray?: GrayScale;
    yellow?: AccentScale;
    red?: AccentScale;
    green?: AccentScale;
    azure?: AccentScale;
    foreground?: string;
    foregroundSoft?: string;
    background?: string;
    backgroundSoft?: string;
    ring?: string;
    cardHoverColor?: string;
    footerBackground?: string;
    error?: SemanticGroup;
    warning?: SemanticGroup;
    success?: SemanticGroup;
    info?: SemanticGroup;
    primary?: SemanticGroup;
    secondary?: SemanticGroup;
    tertiary?: SemanticGroup;
    quaternary?: SemanticGroup;
    content?: ContentScale;
    surface?: SurfaceScale;
    stroke?: StrokeScale;
    opacityDisabled?: string;
    fonts?: {
        body?: string;
        heading?: string;
        sans?: string;
        mono?: string;
        serif?: string;
    };
    typography?: TypographyScale;
    leading?: LeadingScale;
    rounded?: RoundedScale;
    blurFrosted?: string;
}

export declare const ConfigProvider: ({ children, config, rtl }: ConfigProviderProps) => JSX.Element;

declare interface ConfigProviderProps {
    children: ReactNode;
    config?: ConfigDataType;
    theme?: 'dark' | 'light';
    rtl?: boolean;
}

declare type ContentScale = {
    primary?: string;
    secondary?: string;
    tertiary?: string;
    quaternary?: string;
    placeholder?: string;
    disabled?: string;
    reverse?: string;
};

declare type GrayScale = {
    100?: string;
    200?: string;
    300?: string;
    400?: string;
    500?: string;
    530?: string;
    560?: string;
    600?: string;
    700?: string;
};

declare type HeadingSizeScale = {
    base?: string;
    sm?: string;
    xs?: string;
};

declare type LeadingScale = {
    h1?: string;
    h2?: string;
    h3?: string;
    h4?: string;
    h5?: string;
    h6?: string;
    p?: string;
    '2xl'?: string;
    xl?: string;
    lg?: string;
    base?: string;
    sm?: string;
    xs?: string;
};

declare type RoundedScale = {
    base?: string;
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
    '2xl'?: string;
};

declare type SemanticGroup = {
    base?: string;
    hover?: string;
    light?: string;
};

declare type StrokeScale = {
    base?: string;
    hover?: string;
    '2xs'?: string;
    xs?: string;
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
    '2xl'?: string;
    '3xl'?: string;
    '4xl'?: string;
};

declare type SurfaceScale = {
    base?: string;
    hover?: string;
    hard?: string;
    hardHover?: string;
    '2xs'?: string;
    xs?: string;
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
    '2xl'?: string;
    '3xl'?: string;
    '4xl'?: string;
};

declare type TypographyScale = {
    h1?: HeadingSizeScale;
    h2?: HeadingSizeScale;
    h3?: HeadingSizeScale;
    h4?: HeadingSizeScale;
    h5?: HeadingSizeScale;
    h6?: HeadingSizeScale;
    p?: HeadingSizeScale;
    '2xl'?: string;
    xl?: string;
    lg?: string;
    base?: string;
    sm?: string;
    xs?: string;
    '2xs'?: string;
};

export { }


declare namespace BreadcrumbSeparator {
    var displayName: string;
}


declare namespace BreadcrumbEllipsis {
    var displayName: string;
}


declare namespace DialogHeader {
    var displayName: string;
}


declare namespace DialogFooter {
    var displayName: string;
}


declare namespace PaginationUnit {
    var displayName: string;
}


declare namespace PaginationLink {
    var displayName: string;
}


declare namespace PaginationPrevious {
    var displayName: string;
}


declare namespace PaginationNext {
    var displayName: string;
}


declare namespace PaginationEllipsis {
    var displayName: string;
}