@slashid/react-primitives
Version:
Primitive components for the /id React SDK
207 lines • 11.1 kB
TypeScript
export declare const colors: {
white: string;
black: string;
grey50: string;
grey100: string;
grey700: string;
grey800: string;
grey900: string;
blue500: string;
blue600: string;
blue900: string;
red500: string;
};
export declare const publicVariables: {
color: {
background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
mute: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
panel: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
contrast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
tertiary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
placeholder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
smooth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
subtle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
soft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
offset: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
primaryHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
transparent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
auxiliary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
foregroundSuccess: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
backgroundSuccess: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
failure: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
foregroundFailure: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
backgroundFailure: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
font: {
fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
border: {
radius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
width: {
panel: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
};
input: {
border: {
radius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
label: {
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
};
button: {
border: {
radius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
};
form: {
border: {
radius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
logo: {
width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
};
};
export declare const darkThemeColors: {
background: string;
mute: string;
panel: string;
foreground: string;
contrast: string;
secondary: string;
tertiary: string;
placeholder: string;
smooth: string;
subtle: string;
soft: string;
offset: string;
primary: string;
primaryHover: string;
transparent: string;
error: string;
auxiliary: string;
success: string;
foregroundSuccess: string;
backgroundSuccess: string;
failure: string;
foregroundFailure: string;
backgroundFailure: string;
};
export declare const defaultVars: {
font: {
fontFamily: string;
};
border: {
radius: string;
width: {
panel: string;
};
};
input: {
border: {
radius: string;
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
label: {
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
};
button: {
border: {
radius: string;
};
};
form: {
border: {
radius: string;
};
logo: {
width: string;
};
};
};
export declare const darkThemeVars: string;
export declare const lightThemeVars: string;
export declare const autoThemeVars: string;
export declare const themeClass: string, theme: {
font: {
weight: {
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
semibold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
size: {
xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
sm: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
"1xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
"2xl-title": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
};
space: {
0: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
px: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
0.25: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
0.5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
0.75: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1.5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2.5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3.5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
11: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
12: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
13: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
14: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
15: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
20: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
24: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
28: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
32: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
36: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
40: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
44: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
48: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
52: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
56: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
64: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
68: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
72: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
76: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
80: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
96: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
input: {
height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
paddingHorizontal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
paddingVertical: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
minWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
color: {
md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
boxShadow: {
lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
dim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
};
export type Theme = "light" | "dark" | "auto";
export declare const THEME_ROOT_CLASS_NAME = "sid-theme-root";
//# sourceMappingURL=theme.css.d.ts.map