tailwind-joy
Version:
React component library that styles the components of Joy UI in the Tailwind CSS way.
544 lines (543 loc) • 23 kB
TypeScript
export declare const baseTokens: {
readonly primary: {
readonly plainColor: "joy-primary-500 dark:joy-primary-300";
readonly plainBg: "";
readonly plainBorder: "";
readonly plainHoverColor: "";
readonly plainHoverBg: "joy-primary-100 dark:joy-primary-800";
readonly plainHoverBorder: "";
readonly plainActiveColor: "";
readonly plainActiveBg: "joy-primary-200 dark:joy-primary-700";
readonly plainActiveBorder: "";
readonly plainDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly plainDisabledBg: "";
readonly plainDisabledBorder: "";
readonly outlinedColor: "joy-primary-500 dark:joy-primary-200";
readonly outlinedBg: "";
readonly outlinedBorder: "joy-primary-300 dark:joy-primary-700";
readonly outlinedHoverColor: "";
readonly outlinedHoverBg: "joy-primary-100 dark:joy-primary-800";
readonly outlinedHoverBorder: "";
readonly outlinedActiveColor: "";
readonly outlinedActiveBg: "joy-primary-200 dark:joy-primary-700";
readonly outlinedActiveBorder: "";
readonly outlinedDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly outlinedDisabledBg: "";
readonly outlinedDisabledBorder: "joy-neutral-200 dark:joy-neutral-800";
readonly softColor: "joy-primary-700 dark:joy-primary-200";
readonly softBg: "joy-primary-100 dark:joy-primary-800";
readonly softBorder: "";
readonly softHoverColor: "";
readonly softHoverBg: "joy-primary-200 dark:joy-primary-700";
readonly softHoverBorder: "";
readonly softActiveColor: "joy-primary-800 dark:joy-primary-100";
readonly softActiveBg: "joy-primary-300 dark:joy-primary-600";
readonly softActiveBorder: "";
readonly softDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly softDisabledBg: "joy-neutral-50 dark:joy-neutral-800";
readonly softDisabledBorder: "";
readonly solidColor: "joy-common-white dark:joy-common-white";
readonly solidBg: "joy-primary-500 dark:joy-primary-500";
readonly solidBorder: "";
readonly solidHoverColor: "";
readonly solidHoverBg: "joy-primary-600 dark:joy-primary-600";
readonly solidHoverBorder: "";
readonly solidActiveColor: "";
readonly solidActiveBg: "joy-primary-700 dark:joy-primary-700";
readonly solidActiveBorder: "";
readonly solidDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly solidDisabledBg: "joy-neutral-100 dark:joy-neutral-800";
readonly solidDisabledBorder: "";
readonly mainChannel: "joy-primary-500 dark:joy-primary-400";
};
readonly neutral: {
readonly plainColor: "joy-neutral-700 dark:joy-neutral-300";
readonly plainBg: "";
readonly plainBorder: "";
readonly plainHoverColor: "joy-neutral-900 dark:joy-neutral-300";
readonly plainHoverBg: "joy-neutral-100 dark:joy-neutral-800";
readonly plainHoverBorder: "";
readonly plainActiveColor: "";
readonly plainActiveBg: "joy-neutral-200 dark:joy-neutral-700";
readonly plainActiveBorder: "";
readonly plainDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly plainDisabledBg: "";
readonly plainDisabledBorder: "";
readonly outlinedColor: "joy-neutral-700 dark:joy-neutral-200";
readonly outlinedBg: "";
readonly outlinedBorder: "joy-neutral-300 dark:joy-neutral-700";
readonly outlinedHoverColor: "";
readonly outlinedHoverBg: "joy-neutral-100 dark:joy-neutral-800";
readonly outlinedHoverBorder: "";
readonly outlinedActiveColor: "";
readonly outlinedActiveBg: "joy-neutral-200 dark:joy-neutral-700";
readonly outlinedActiveBorder: "";
readonly outlinedDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly outlinedDisabledBg: "";
readonly outlinedDisabledBorder: "joy-neutral-200 dark:joy-neutral-800";
readonly softColor: "joy-neutral-700 dark:joy-neutral-200";
readonly softBg: "joy-neutral-100 dark:joy-neutral-800";
readonly softBorder: "";
readonly softHoverColor: "";
readonly softHoverBg: "joy-neutral-200 dark:joy-neutral-700";
readonly softHoverBorder: "";
readonly softActiveColor: "joy-neutral-800 dark:joy-neutral-100";
readonly softActiveBg: "joy-neutral-300 dark:joy-neutral-600";
readonly softActiveBorder: "";
readonly softDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly softDisabledBg: "joy-neutral-50 dark:joy-neutral-800";
readonly softDisabledBorder: "";
readonly solidColor: "joy-common-white dark:joy-common-white";
readonly solidBg: "joy-neutral-500 dark:joy-neutral-500";
readonly solidBorder: "";
readonly solidHoverColor: "";
readonly solidHoverBg: "joy-neutral-600 dark:joy-neutral-600";
readonly solidHoverBorder: "";
readonly solidActiveColor: "";
readonly solidActiveBg: "joy-neutral-700 dark:joy-neutral-700";
readonly solidActiveBorder: "";
readonly solidDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly solidDisabledBg: "joy-neutral-100 dark:joy-neutral-800";
readonly solidDisabledBorder: "";
readonly mainChannel: "joy-neutral-500 dark:joy-neutral-400";
};
readonly danger: {
readonly plainColor: "joy-danger-500 dark:joy-danger-300";
readonly plainBg: "";
readonly plainBorder: "";
readonly plainHoverColor: "";
readonly plainHoverBg: "joy-danger-100 dark:joy-danger-800";
readonly plainHoverBorder: "";
readonly plainActiveColor: "";
readonly plainActiveBg: "joy-danger-200 dark:joy-danger-700";
readonly plainActiveBorder: "";
readonly plainDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly plainDisabledBg: "";
readonly plainDisabledBorder: "";
readonly outlinedColor: "joy-danger-500 dark:joy-danger-200";
readonly outlinedBg: "";
readonly outlinedBorder: "joy-danger-300 dark:joy-danger-700";
readonly outlinedHoverColor: "";
readonly outlinedHoverBg: "joy-danger-100 dark:joy-danger-800";
readonly outlinedHoverBorder: "";
readonly outlinedActiveColor: "";
readonly outlinedActiveBg: "joy-danger-200 dark:joy-danger-700";
readonly outlinedActiveBorder: "";
readonly outlinedDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly outlinedDisabledBg: "";
readonly outlinedDisabledBorder: "joy-neutral-200 dark:joy-neutral-800";
readonly softColor: "joy-danger-700 dark:joy-danger-200";
readonly softBg: "joy-danger-100 dark:joy-danger-800";
readonly softBorder: "";
readonly softHoverColor: "";
readonly softHoverBg: "joy-danger-200 dark:joy-danger-700";
readonly softHoverBorder: "";
readonly softActiveColor: "joy-danger-800 dark:joy-danger-100";
readonly softActiveBg: "joy-danger-300 dark:joy-danger-600";
readonly softActiveBorder: "";
readonly softDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly softDisabledBg: "joy-neutral-50 dark:joy-neutral-800";
readonly softDisabledBorder: "";
readonly solidColor: "joy-common-white dark:joy-common-white";
readonly solidBg: "joy-danger-500 dark:joy-danger-500";
readonly solidBorder: "";
readonly solidHoverColor: "";
readonly solidHoverBg: "joy-danger-600 dark:joy-danger-600";
readonly solidHoverBorder: "";
readonly solidActiveColor: "";
readonly solidActiveBg: "joy-danger-700 dark:joy-danger-700";
readonly solidActiveBorder: "";
readonly solidDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly solidDisabledBg: "joy-neutral-100 dark:joy-neutral-800";
readonly solidDisabledBorder: "";
readonly mainChannel: "joy-danger-500 dark:joy-danger-400";
};
readonly success: {
readonly plainColor: "joy-success-500 dark:joy-success-300";
readonly plainBg: "";
readonly plainBorder: "";
readonly plainHoverColor: "";
readonly plainHoverBg: "joy-success-100 dark:joy-success-800";
readonly plainHoverBorder: "";
readonly plainActiveColor: "";
readonly plainActiveBg: "joy-success-200 dark:joy-success-700";
readonly plainActiveBorder: "";
readonly plainDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly plainDisabledBg: "";
readonly plainDisabledBorder: "";
readonly outlinedColor: "joy-success-500 dark:joy-success-200";
readonly outlinedBg: "";
readonly outlinedBorder: "joy-success-300 dark:joy-success-700";
readonly outlinedHoverColor: "";
readonly outlinedHoverBg: "joy-success-100 dark:joy-success-800";
readonly outlinedHoverBorder: "";
readonly outlinedActiveColor: "";
readonly outlinedActiveBg: "joy-success-200 dark:joy-success-700";
readonly outlinedActiveBorder: "";
readonly outlinedDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly outlinedDisabledBg: "";
readonly outlinedDisabledBorder: "joy-neutral-200 dark:joy-neutral-800";
readonly softColor: "joy-success-700 dark:joy-success-200";
readonly softBg: "joy-success-100 dark:joy-success-800";
readonly softBorder: "";
readonly softHoverColor: "";
readonly softHoverBg: "joy-success-200 dark:joy-success-700";
readonly softHoverBorder: "";
readonly softActiveColor: "joy-success-800 dark:joy-success-100";
readonly softActiveBg: "joy-success-300 dark:joy-success-600";
readonly softActiveBorder: "";
readonly softDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly softDisabledBg: "joy-neutral-50 dark:joy-neutral-800";
readonly softDisabledBorder: "";
readonly solidColor: "joy-common-white dark:joy-common-white";
readonly solidBg: "joy-success-500 dark:joy-success-500";
readonly solidBorder: "";
readonly solidHoverColor: "";
readonly solidHoverBg: "joy-success-600 dark:joy-success-600";
readonly solidHoverBorder: "";
readonly solidActiveColor: "";
readonly solidActiveBg: "joy-success-700 dark:joy-success-700";
readonly solidActiveBorder: "";
readonly solidDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly solidDisabledBg: "joy-neutral-100 dark:joy-neutral-800";
readonly solidDisabledBorder: "";
readonly mainChannel: "joy-success-500 dark:joy-success-400";
};
readonly warning: {
readonly plainColor: "joy-warning-500 dark:joy-warning-300";
readonly plainBg: "";
readonly plainBorder: "";
readonly plainHoverColor: "";
readonly plainHoverBg: "joy-warning-100 dark:joy-warning-800";
readonly plainHoverBorder: "";
readonly plainActiveColor: "";
readonly plainActiveBg: "joy-warning-200 dark:joy-warning-700";
readonly plainActiveBorder: "";
readonly plainDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly plainDisabledBg: "";
readonly plainDisabledBorder: "";
readonly outlinedColor: "joy-warning-500 dark:joy-warning-200";
readonly outlinedBg: "";
readonly outlinedBorder: "joy-warning-300 dark:joy-warning-700";
readonly outlinedHoverColor: "";
readonly outlinedHoverBg: "joy-warning-100 dark:joy-warning-800";
readonly outlinedHoverBorder: "";
readonly outlinedActiveColor: "";
readonly outlinedActiveBg: "joy-warning-200 dark:joy-warning-700";
readonly outlinedActiveBorder: "";
readonly outlinedDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly outlinedDisabledBg: "";
readonly outlinedDisabledBorder: "joy-neutral-200 dark:joy-neutral-800";
readonly softColor: "joy-warning-700 dark:joy-warning-200";
readonly softBg: "joy-warning-100 dark:joy-warning-800";
readonly softBorder: "";
readonly softHoverColor: "";
readonly softHoverBg: "joy-warning-200 dark:joy-warning-700";
readonly softHoverBorder: "";
readonly softActiveColor: "joy-warning-800 dark:joy-warning-100";
readonly softActiveBg: "joy-warning-300 dark:joy-warning-600";
readonly softActiveBorder: "";
readonly softDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly softDisabledBg: "joy-neutral-50 dark:joy-neutral-800";
readonly softDisabledBorder: "";
readonly solidColor: "joy-common-white dark:joy-common-white";
readonly solidBg: "joy-warning-500 dark:joy-warning-500";
readonly solidBorder: "";
readonly solidHoverColor: "";
readonly solidHoverBg: "joy-warning-600 dark:joy-warning-600";
readonly solidHoverBorder: "";
readonly solidActiveColor: "";
readonly solidActiveBg: "joy-warning-700 dark:joy-warning-700";
readonly solidActiveBorder: "";
readonly solidDisabledColor: "joy-neutral-400 dark:joy-neutral-500";
readonly solidDisabledBg: "joy-neutral-100 dark:joy-neutral-800";
readonly solidDisabledBorder: "";
readonly mainChannel: "joy-warning-500 dark:joy-warning-400";
};
readonly text: {
readonly primary: "joy-neutral-800 dark:joy-neutral-100";
readonly secondary: "joy-neutral-700 dark:joy-neutral-300";
readonly tertiary: "joy-neutral-600 dark:joy-neutral-400";
readonly icon: "joy-neutral-500 dark:joy-neutral-400";
};
readonly background: {
readonly body: "joy-common-white dark:joy-common-black";
readonly surface: "joy-neutral-50 dark:joy-neutral-900";
readonly popup: "joy-common-white dark:joy-common-black";
readonly level1: "joy-neutral-100 dark:joy-neutral-800";
readonly level2: "joy-neutral-200 dark:joy-neutral-700";
readonly level3: "joy-neutral-300 dark:joy-neutral-600";
readonly tooltip: "joy-neutral-500 dark:joy-neutral-600";
readonly backdrop: "joy-neutral-900/25 dark:joy-neutral-50/25";
};
readonly focusVisible: "joy-primary-500 dark:joy-primary-500";
};
export declare const colorTokens: {
primary: {
plainColor: string;
plainBg: string;
plainBorder: string;
plainHoverColor: string;
plainHoverBg: string;
plainHoverBorder: string;
plainActiveColor: string;
plainActiveBg: string;
plainActiveBorder: string;
plainDisabledColor: string;
plainDisabledBg: string;
plainDisabledBorder: string;
outlinedColor: string;
outlinedBg: string;
outlinedBorder: string;
outlinedHoverColor: string;
outlinedHoverBg: string;
outlinedHoverBorder: string;
outlinedActiveColor: string;
outlinedActiveBg: string;
outlinedActiveBorder: string;
outlinedDisabledColor: string;
outlinedDisabledBg: string;
outlinedDisabledBorder: string;
softColor: string;
softBg: string;
softBorder: string;
softHoverColor: string;
softHoverBg: string;
softHoverBorder: string;
softActiveColor: string;
softActiveBg: string;
softActiveBorder: string;
softDisabledColor: string;
softDisabledBg: string;
softDisabledBorder: string;
solidColor: string;
solidBg: string;
solidBorder: string;
solidHoverColor: string;
solidHoverBg: string;
solidHoverBorder: string;
solidActiveColor: string;
solidActiveBg: string;
solidActiveBorder: string;
solidDisabledColor: string;
solidDisabledBg: string;
solidDisabledBorder: string;
};
neutral: {
plainColor: string;
plainBg: string;
plainBorder: string;
plainHoverColor: string;
plainHoverBg: string;
plainHoverBorder: string;
plainActiveColor: string;
plainActiveBg: string;
plainActiveBorder: string;
plainDisabledColor: string;
plainDisabledBg: string;
plainDisabledBorder: string;
outlinedColor: string;
outlinedBg: string;
outlinedBorder: string;
outlinedHoverColor: string;
outlinedHoverBg: string;
outlinedHoverBorder: string;
outlinedActiveColor: string;
outlinedActiveBg: string;
outlinedActiveBorder: string;
outlinedDisabledColor: string;
outlinedDisabledBg: string;
outlinedDisabledBorder: string;
softColor: string;
softBg: string;
softBorder: string;
softHoverColor: string;
softHoverBg: string;
softHoverBorder: string;
softActiveColor: string;
softActiveBg: string;
softActiveBorder: string;
softDisabledColor: string;
softDisabledBg: string;
softDisabledBorder: string;
solidColor: string;
solidBg: string;
solidBorder: string;
solidHoverColor: string;
solidHoverBg: string;
solidHoverBorder: string;
solidActiveColor: string;
solidActiveBg: string;
solidActiveBorder: string;
solidDisabledColor: string;
solidDisabledBg: string;
solidDisabledBorder: string;
};
danger: {
plainColor: string;
plainBg: string;
plainBorder: string;
plainHoverColor: string;
plainHoverBg: string;
plainHoverBorder: string;
plainActiveColor: string;
plainActiveBg: string;
plainActiveBorder: string;
plainDisabledColor: string;
plainDisabledBg: string;
plainDisabledBorder: string;
outlinedColor: string;
outlinedBg: string;
outlinedBorder: string;
outlinedHoverColor: string;
outlinedHoverBg: string;
outlinedHoverBorder: string;
outlinedActiveColor: string;
outlinedActiveBg: string;
outlinedActiveBorder: string;
outlinedDisabledColor: string;
outlinedDisabledBg: string;
outlinedDisabledBorder: string;
softColor: string;
softBg: string;
softBorder: string;
softHoverColor: string;
softHoverBg: string;
softHoverBorder: string;
softActiveColor: string;
softActiveBg: string;
softActiveBorder: string;
softDisabledColor: string;
softDisabledBg: string;
softDisabledBorder: string;
solidColor: string;
solidBg: string;
solidBorder: string;
solidHoverColor: string;
solidHoverBg: string;
solidHoverBorder: string;
solidActiveColor: string;
solidActiveBg: string;
solidActiveBorder: string;
solidDisabledColor: string;
solidDisabledBg: string;
solidDisabledBorder: string;
};
success: {
plainColor: string;
plainBg: string;
plainBorder: string;
plainHoverColor: string;
plainHoverBg: string;
plainHoverBorder: string;
plainActiveColor: string;
plainActiveBg: string;
plainActiveBorder: string;
plainDisabledColor: string;
plainDisabledBg: string;
plainDisabledBorder: string;
outlinedColor: string;
outlinedBg: string;
outlinedBorder: string;
outlinedHoverColor: string;
outlinedHoverBg: string;
outlinedHoverBorder: string;
outlinedActiveColor: string;
outlinedActiveBg: string;
outlinedActiveBorder: string;
outlinedDisabledColor: string;
outlinedDisabledBg: string;
outlinedDisabledBorder: string;
softColor: string;
softBg: string;
softBorder: string;
softHoverColor: string;
softHoverBg: string;
softHoverBorder: string;
softActiveColor: string;
softActiveBg: string;
softActiveBorder: string;
softDisabledColor: string;
softDisabledBg: string;
softDisabledBorder: string;
solidColor: string;
solidBg: string;
solidBorder: string;
solidHoverColor: string;
solidHoverBg: string;
solidHoverBorder: string;
solidActiveColor: string;
solidActiveBg: string;
solidActiveBorder: string;
solidDisabledColor: string;
solidDisabledBg: string;
solidDisabledBorder: string;
};
warning: {
plainColor: string;
plainBg: string;
plainBorder: string;
plainHoverColor: string;
plainHoverBg: string;
plainHoverBorder: string;
plainActiveColor: string;
plainActiveBg: string;
plainActiveBorder: string;
plainDisabledColor: string;
plainDisabledBg: string;
plainDisabledBorder: string;
outlinedColor: string;
outlinedBg: string;
outlinedBorder: string;
outlinedHoverColor: string;
outlinedHoverBg: string;
outlinedHoverBorder: string;
outlinedActiveColor: string;
outlinedActiveBg: string;
outlinedActiveBorder: string;
outlinedDisabledColor: string;
outlinedDisabledBg: string;
outlinedDisabledBorder: string;
softColor: string;
softBg: string;
softBorder: string;
softHoverColor: string;
softHoverBg: string;
softHoverBorder: string;
softActiveColor: string;
softActiveBg: string;
softActiveBorder: string;
softDisabledColor: string;
softDisabledBg: string;
softDisabledBorder: string;
solidColor: string;
solidBg: string;
solidBorder: string;
solidHoverColor: string;
solidHoverBg: string;
solidHoverBorder: string;
solidActiveColor: string;
solidActiveBg: string;
solidActiveBorder: string;
solidDisabledColor: string;
solidDisabledBg: string;
solidDisabledBorder: string;
};
text: {
primary: string;
secondary: string;
tertiary: string;
icon: string;
};
background: {
body: string;
surface: string;
popup: string;
level1: string;
level2: string;
level3: string;
tooltip: string;
backdrop: string;
};
focusVisible: string;
};