@spicy-ui/core
Version:
A themable and extensible React UI library, ready to use out of the box
609 lines (608 loc) • 17.9 kB
TypeScript
export declare const theme: {
components: {
Tooltip: import("./types").ComponentThemeConfig<import("..").TooltipProps>;
ToastContainer: import("./types").ComponentThemeConfig<import("..").ToastProviderProps>;
TextArea: import("./types").ComponentThemeConfig<import("..").TextAreaProps>;
Text: import("./types").ComponentThemeConfig<import("..").TextProps>;
Tag: import("./types").ComponentThemeConfig<import("..").TagProps>;
TagAction: import("./types").ComponentThemeConfig<import("..").TagActionProps>;
TagIconBefore: import("./types").ComponentThemeConfig<import("..").TagLabelProps>;
TagIconAfter: import("./types").ComponentThemeConfig<import("..").TagLabelProps>;
TagLabel: import("./types").ComponentThemeConfig<import("..").TagLabelProps>;
Tabs: import("./types").ComponentThemeConfig<import("..").TabsProps>;
Tab: import("./types").ComponentThemeConfig<import("..").TabProps>;
SwitchOuter: import("./types").ComponentThemeConfig<import("..").SwitchProps>;
SwitchInput: import("./types").ComponentThemeConfig<import("..").SwitchProps>;
SwitchToggle: import("./types").ComponentThemeConfig<import("..").SwitchProps>;
Spinner: import("./types").ComponentThemeConfig<import("..").SpinnerProps>;
Skeleton: import("./types").ComponentThemeConfig<import("..").SkeletonProps>;
RadioOuter: import("./types").ComponentThemeConfig<import("..").RadioProps>;
RadioInput: import("./types").ComponentThemeConfig<import("..").RadioProps>;
RadioLabel: import("./types").ComponentThemeConfig<import("..").RadioProps>;
ProgressCircular: import("./types").ComponentThemeConfig<import("../components/Progress/Circular").CircularProgressProps>;
ProgressCircularSvg: import("./types").ComponentThemeConfig<import("../components/Progress/Circular").CircularProgressProps>;
ProgressCircularShape: import("./types").ComponentThemeConfig<import("../components/Progress/Circular").CircularProgressProps>;
ProgressCircularInner: import("./types").ComponentThemeConfig<import("../components/Progress/Circular").CircularProgressProps>;
ProgressHorizontal: import("./types").ComponentThemeConfig<import("../components/Progress/Horizontal").HorizontalProgressProps>;
ProgressHorizontalIndeterminateInner: import("./types").ComponentThemeConfig<import("../components/Progress/Horizontal").HorizontalProgressProps>;
ProgressHorizontalInner: import("./types").ComponentThemeConfig<import("../components/Progress/Horizontal").HorizontalProgressProps>;
Overlay: import("./types").ComponentThemeConfig<import("..").OverlayProps>;
Modal: import("./types").ComponentThemeConfig<import("..").ModalProps>;
ModalCloseButton: import("./types").ComponentThemeConfig<import("..").ModalCloseButtonProps>;
ModalHeader: import("./types").ComponentThemeConfig<import("..").ModalHeaderProps>;
ModalBody: import("./types").ComponentThemeConfig<import("..").ModalBodyProps>;
ModalFooter: import("./types").ComponentThemeConfig<import("..").ModalFooterProps>;
Menu: import("./types").ComponentThemeConfig<import("..").MenuProps>;
MenuDivider: import("./types").ComponentThemeConfig<Record<string, any>>;
MenuHeader: import("./types").ComponentThemeConfig<Record<string, any>>;
MenuItem: import("./types").ComponentThemeConfig<Record<string, any>>;
Link: import("./types").ComponentThemeConfig<import("..").LinkProps>;
Kbd: import("./types").ComponentThemeConfig<import("..").KbdProps>;
Input: import("./types").ComponentThemeConfig<import("..").InputProps>;
Image: import("./types").ComponentThemeConfig<import("..").ImageProps>;
Heading: import("./types").ComponentThemeConfig<import("..").HeadingProps>;
Drawer: import("./types").ComponentThemeConfig<import("..").DrawerProps>;
Divider: import("./types").ComponentThemeConfig<import("..").DividerProps>;
Container: import("./types").ComponentThemeConfig<import("..").ContainerProps>;
Code: import("./types").ComponentThemeConfig<import("..").CodeProps>;
CloseButton: import("./types").ComponentThemeConfig<import("..").CloseButtonProps>;
CheckboxOuter: import("./types").ComponentThemeConfig<import("..").CheckboxProps>;
CheckboxInput: import("./types").ComponentThemeConfig<import("..").CheckboxProps>;
CheckboxLabel: import("./types").ComponentThemeConfig<import("..").CheckboxProps>;
Button: import("./types").ComponentThemeConfig<import("..").ButtonProps>;
ButtonSpinner: import("./types").ComponentThemeConfig<Record<string, any>>;
IconButton: import("./types").ComponentThemeConfig<import("..").IconButtonProps>;
Badge: import("./types").ComponentThemeConfig<import("..").BadgeProps>;
Avatar: import("./types").ComponentThemeConfig<import("..").AvatarProps>;
Alert: import("./types").ComponentThemeConfig<import("..").AlertProps>;
};
zIndices: {
hide: number;
auto: string;
base: number;
docked: number;
dropdown: number;
sticky: number;
banner: number;
overlay: number;
modal: number;
popover: number;
skipLink: number;
toast: number;
tooltip: number;
};
fontSizes: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
'8xl': string;
'9xl': string;
};
fonts: {
heading: string;
body: string;
mono: string;
};
fontWeights: {
thin: number;
extralight: number;
light: number;
normal: number;
medium: number;
semibold: number;
bold: number;
extrabold: number;
black: number;
};
lineHeights: {
none: string;
tight: string;
snug: string;
normal: string;
relaxed: string;
loose: string;
3: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
10: string;
};
letterSpacings: {
tighter: string;
tight: string;
normal: string;
wide: string;
wider: string;
widest: string;
};
breakpoints: string[];
colors: {
transparent: string;
current: string;
black: string;
white: string;
whiteAlpha: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
blackAlpha: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
blueGray: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
coolGray: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
gray: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
trueGray: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
warmGray: {
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;
};
orange: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
amber: {
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;
};
lime: {
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;
};
emerald: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
teal: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
cyan: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
lightBlue: {
50: 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;
};
indigo: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
violet: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
purple: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
fuchsia: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
pink: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
rose: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
};
shadows: {
none: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
inner: string;
outline: string;
warning: string;
error: string;
};
sizes: {
container: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
};
full: string;
'3xs': string;
'2xs': string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
0: string;
px: string;
0.5: string;
1: string;
1.5: string;
2: string;
2.5: string;
3: string;
3.5: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
10: string;
11: string;
12: string;
14: string;
16: string;
20: string;
24: string;
28: string;
32: string;
36: string;
40: string;
44: string;
48: string;
52: string;
56: string;
60: string;
64: string;
72: string;
80: string;
96: string;
};
space: {
0: string;
px: string;
0.5: string;
1: string;
1.5: string;
2: string;
2.5: string;
3: string;
3.5: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
10: string;
11: string;
12: string;
14: string;
16: string;
20: string;
24: string;
28: string;
32: string;
36: string;
40: string;
44: string;
48: string;
52: string;
56: string;
60: string;
64: string;
72: string;
80: string;
96: string;
};
transition: {
transition: {};
property: {
all: string;
none: string;
common: string;
colors: string;
opacity: string;
shadow: string;
transform: string;
};
duration: {
75: string;
100: string;
150: string;
200: string;
300: string;
500: string;
700: string;
1000: string;
};
timingFn: {
linear: string;
in: string;
out: string;
inOut: string;
};
delay: {
75: string;
100: string;
150: string;
200: string;
300: string;
500: string;
700: string;
1000: string;
};
};
borders: {
none: string;
'1px': string;
'2px': string;
'4px': string;
'8px': string;
};
radii: {
none: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
full: string;
};
animation: {
animation: {
bounce: string;
ping: string;
pulse: string;
spin: string;
};
name: {
bounce: string;
ping: string;
pulse: string;
spin: string;
};
duration: {};
timingFn: {};
delay: {};
};
};
export { AllColorScales, ColorScales, ComponentThemeConfig, ComponentThemeScale } from './types';