UNPKG

tailwind-joy

Version:

React component library that styles the components of Joy UI in the Tailwind CSS way.

544 lines (543 loc) 23 kB
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; };