tailwind-joy
Version:
React component library that styles the components of Joy UI in the Tailwind CSS way.
811 lines (810 loc) • 26.9 kB
TypeScript
export declare const theme: {
variants: {
plain: {
primary: {
className: string[];
tokens: {
color: "joy-primary-500 dark:joy-primary-300";
backgroundColor: "";
borderColor: "";
};
};
neutral: {
className: string[];
tokens: {
color: "joy-neutral-700 dark:joy-neutral-300";
backgroundColor: "";
borderColor: "";
};
};
danger: {
className: string[];
tokens: {
color: "joy-danger-500 dark:joy-danger-300";
backgroundColor: "";
borderColor: "";
};
};
success: {
className: string[];
tokens: {
color: "joy-success-500 dark:joy-success-300";
backgroundColor: "";
borderColor: "";
};
};
warning: {
className: string[];
tokens: {
color: "joy-warning-500 dark:joy-warning-300";
backgroundColor: "";
borderColor: "";
};
};
};
plainHover: {
primary: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-primary-100 dark:joy-primary-800";
borderColor: "";
};
};
neutral: {
className: string[];
tokens: {
color: "joy-neutral-900 dark:joy-neutral-300";
backgroundColor: "joy-neutral-100 dark:joy-neutral-800";
borderColor: "";
};
};
danger: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-danger-100 dark:joy-danger-800";
borderColor: "";
};
};
success: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-success-100 dark:joy-success-800";
borderColor: "";
};
};
warning: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-warning-100 dark:joy-warning-800";
borderColor: "";
};
};
};
plainActive: {
primary: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-primary-200 dark:joy-primary-700";
borderColor: "";
};
};
neutral: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-neutral-200 dark:joy-neutral-700";
borderColor: "";
};
};
danger: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-danger-200 dark:joy-danger-700";
borderColor: "";
};
};
success: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-success-200 dark:joy-success-700";
borderColor: "";
};
};
warning: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-warning-200 dark:joy-warning-700";
borderColor: "";
};
};
};
plainDisabled: {
primary: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "";
borderColor: "";
};
};
neutral: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "";
borderColor: "";
};
};
danger: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "";
borderColor: "";
};
};
success: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "";
borderColor: "";
};
};
warning: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "";
borderColor: "";
};
};
};
outlined: {
primary: {
className: string[];
tokens: {
color: "joy-primary-500 dark:joy-primary-200";
backgroundColor: "";
borderColor: "joy-primary-300 dark:joy-primary-700";
};
};
neutral: {
className: string[];
tokens: {
color: "joy-neutral-700 dark:joy-neutral-200";
backgroundColor: "";
borderColor: "joy-neutral-300 dark:joy-neutral-700";
};
};
danger: {
className: string[];
tokens: {
color: "joy-danger-500 dark:joy-danger-200";
backgroundColor: "";
borderColor: "joy-danger-300 dark:joy-danger-700";
};
};
success: {
className: string[];
tokens: {
color: "joy-success-500 dark:joy-success-200";
backgroundColor: "";
borderColor: "joy-success-300 dark:joy-success-700";
};
};
warning: {
className: string[];
tokens: {
color: "joy-warning-500 dark:joy-warning-200";
backgroundColor: "";
borderColor: "joy-warning-300 dark:joy-warning-700";
};
};
};
outlinedHover: {
primary: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-primary-100 dark:joy-primary-800";
borderColor: "";
};
};
neutral: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-neutral-100 dark:joy-neutral-800";
borderColor: "";
};
};
danger: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-danger-100 dark:joy-danger-800";
borderColor: "";
};
};
success: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-success-100 dark:joy-success-800";
borderColor: "";
};
};
warning: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-warning-100 dark:joy-warning-800";
borderColor: "";
};
};
};
outlinedActive: {
primary: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-primary-200 dark:joy-primary-700";
borderColor: "";
};
};
neutral: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-neutral-200 dark:joy-neutral-700";
borderColor: "";
};
};
danger: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-danger-200 dark:joy-danger-700";
borderColor: "";
};
};
success: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-success-200 dark:joy-success-700";
borderColor: "";
};
};
warning: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-warning-200 dark:joy-warning-700";
borderColor: "";
};
};
};
outlinedDisabled: {
primary: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "";
borderColor: "joy-neutral-200 dark:joy-neutral-800";
};
};
neutral: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "";
borderColor: "joy-neutral-200 dark:joy-neutral-800";
};
};
danger: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "";
borderColor: "joy-neutral-200 dark:joy-neutral-800";
};
};
success: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "";
borderColor: "joy-neutral-200 dark:joy-neutral-800";
};
};
warning: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "";
borderColor: "joy-neutral-200 dark:joy-neutral-800";
};
};
};
soft: {
primary: {
className: string[];
tokens: {
color: "joy-primary-700 dark:joy-primary-200";
backgroundColor: "joy-primary-100 dark:joy-primary-800";
borderColor: "";
};
};
neutral: {
className: string[];
tokens: {
color: "joy-neutral-700 dark:joy-neutral-200";
backgroundColor: "joy-neutral-100 dark:joy-neutral-800";
borderColor: "";
};
};
danger: {
className: string[];
tokens: {
color: "joy-danger-700 dark:joy-danger-200";
backgroundColor: "joy-danger-100 dark:joy-danger-800";
borderColor: "";
};
};
success: {
className: string[];
tokens: {
color: "joy-success-700 dark:joy-success-200";
backgroundColor: "joy-success-100 dark:joy-success-800";
borderColor: "";
};
};
warning: {
className: string[];
tokens: {
color: "joy-warning-700 dark:joy-warning-200";
backgroundColor: "joy-warning-100 dark:joy-warning-800";
borderColor: "";
};
};
};
softHover: {
primary: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-primary-200 dark:joy-primary-700";
borderColor: "";
};
};
neutral: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-neutral-200 dark:joy-neutral-700";
borderColor: "";
};
};
danger: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-danger-200 dark:joy-danger-700";
borderColor: "";
};
};
success: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-success-200 dark:joy-success-700";
borderColor: "";
};
};
warning: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-warning-200 dark:joy-warning-700";
borderColor: "";
};
};
};
softActive: {
primary: {
className: string[];
tokens: {
color: "joy-primary-800 dark:joy-primary-100";
backgroundColor: "joy-primary-300 dark:joy-primary-600";
borderColor: "";
};
};
neutral: {
className: string[];
tokens: {
color: "joy-neutral-800 dark:joy-neutral-100";
backgroundColor: "joy-neutral-300 dark:joy-neutral-600";
borderColor: "";
};
};
danger: {
className: string[];
tokens: {
color: "joy-danger-800 dark:joy-danger-100";
backgroundColor: "joy-danger-300 dark:joy-danger-600";
borderColor: "";
};
};
success: {
className: string[];
tokens: {
color: "joy-success-800 dark:joy-success-100";
backgroundColor: "joy-success-300 dark:joy-success-600";
borderColor: "";
};
};
warning: {
className: string[];
tokens: {
color: "joy-warning-800 dark:joy-warning-100";
backgroundColor: "joy-warning-300 dark:joy-warning-600";
borderColor: "";
};
};
};
softDisabled: {
primary: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "joy-neutral-50 dark:joy-neutral-800";
borderColor: "";
};
};
neutral: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "joy-neutral-50 dark:joy-neutral-800";
borderColor: "";
};
};
danger: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "joy-neutral-50 dark:joy-neutral-800";
borderColor: "";
};
};
success: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "joy-neutral-50 dark:joy-neutral-800";
borderColor: "";
};
};
warning: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "joy-neutral-50 dark:joy-neutral-800";
borderColor: "";
};
};
};
solid: {
primary: {
className: string[];
tokens: {
color: "joy-common-white dark:joy-common-white";
backgroundColor: "joy-primary-500 dark:joy-primary-500";
borderColor: "";
};
};
neutral: {
className: string[];
tokens: {
color: "joy-common-white dark:joy-common-white";
backgroundColor: "joy-neutral-500 dark:joy-neutral-500";
borderColor: "";
};
};
danger: {
className: string[];
tokens: {
color: "joy-common-white dark:joy-common-white";
backgroundColor: "joy-danger-500 dark:joy-danger-500";
borderColor: "";
};
};
success: {
className: string[];
tokens: {
color: "joy-common-white dark:joy-common-white";
backgroundColor: "joy-success-500 dark:joy-success-500";
borderColor: "";
};
};
warning: {
className: string[];
tokens: {
color: "joy-common-white dark:joy-common-white";
backgroundColor: "joy-warning-500 dark:joy-warning-500";
borderColor: "";
};
};
};
solidHover: {
primary: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-primary-600 dark:joy-primary-600";
borderColor: "";
};
};
neutral: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-neutral-600 dark:joy-neutral-600";
borderColor: "";
};
};
danger: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-danger-600 dark:joy-danger-600";
borderColor: "";
};
};
success: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-success-600 dark:joy-success-600";
borderColor: "";
};
};
warning: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-warning-600 dark:joy-warning-600";
borderColor: "";
};
};
};
solidActive: {
primary: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-primary-700 dark:joy-primary-700";
borderColor: "";
};
};
neutral: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-neutral-700 dark:joy-neutral-700";
borderColor: "";
};
};
danger: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-danger-700 dark:joy-danger-700";
borderColor: "";
};
};
success: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-success-700 dark:joy-success-700";
borderColor: "";
};
};
warning: {
className: string[];
tokens: {
color: "";
backgroundColor: "joy-warning-700 dark:joy-warning-700";
borderColor: "";
};
};
};
solidDisabled: {
primary: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "joy-neutral-100 dark:joy-neutral-800";
borderColor: "";
};
};
neutral: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "joy-neutral-100 dark:joy-neutral-800";
borderColor: "";
};
};
danger: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "joy-neutral-100 dark:joy-neutral-800";
borderColor: "";
};
};
success: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "joy-neutral-100 dark:joy-neutral-800";
borderColor: "";
};
};
warning: {
className: string[];
tokens: {
color: "joy-neutral-400 dark:joy-neutral-500";
backgroundColor: "joy-neutral-100 dark:joy-neutral-800";
borderColor: "";
};
};
};
};
typography: {
h1: {
className: string[];
values: {
fontWeight: string;
fontSize: string;
lineHeight: string;
letterSpacing: string;
};
tokens: {
color: "joy-neutral-800 dark:joy-neutral-100";
};
};
h2: {
className: string[];
values: {
fontWeight: string;
fontSize: string;
lineHeight: string;
letterSpacing: string;
};
tokens: {
color: "joy-neutral-800 dark:joy-neutral-100";
};
};
h3: {
className: string[];
values: {
fontWeight: string;
fontSize: string;
lineHeight: string;
letterSpacing: string;
};
tokens: {
color: "joy-neutral-800 dark:joy-neutral-100";
};
};
h4: {
className: string[];
values: {
fontWeight: string;
fontSize: string;
lineHeight: string;
letterSpacing: string;
};
tokens: {
color: "joy-neutral-800 dark:joy-neutral-100";
};
};
'title-lg': {
className: string[];
values: {
fontWeight: string;
fontSize: string;
lineHeight: string;
letterSpacing: undefined;
};
tokens: {
color: "joy-neutral-800 dark:joy-neutral-100";
};
};
'title-md': {
className: string[];
values: {
fontWeight: string;
fontSize: string;
lineHeight: string;
letterSpacing: undefined;
};
tokens: {
color: "joy-neutral-800 dark:joy-neutral-100";
};
};
'title-sm': {
className: string[];
values: {
fontWeight: string;
fontSize: string;
lineHeight: string;
letterSpacing: undefined;
};
tokens: {
color: "joy-neutral-800 dark:joy-neutral-100";
};
};
'body-lg': {
className: string[];
values: {
fontWeight: undefined;
fontSize: string;
lineHeight: string;
letterSpacing: undefined;
};
tokens: {
color: "joy-neutral-700 dark:joy-neutral-300";
};
};
'body-md': {
className: string[];
values: {
fontWeight: undefined;
fontSize: string;
lineHeight: string;
letterSpacing: undefined;
};
tokens: {
color: "joy-neutral-700 dark:joy-neutral-300";
};
};
'body-sm': {
className: string[];
values: {
fontWeight: undefined;
fontSize: string;
lineHeight: string;
letterSpacing: undefined;
};
tokens: {
color: "joy-neutral-600 dark:joy-neutral-400";
};
};
'body-xs': {
className: string[];
values: {
fontWeight: string;
fontSize: string;
lineHeight: string;
letterSpacing: undefined;
};
tokens: {
color: "joy-neutral-600 dark:joy-neutral-400";
};
};
};
};