From 054acc689a17d74754dd2b1bef662ccbdee4d6f1 Mon Sep 17 00:00:00 2001 From: akhilmhdh Date: Mon, 23 Jan 2023 20:08:16 +0530 Subject: [PATCH] feat(ui): implemented dropdown component --- frontend/package-lock.json | 129 ++ frontend/package.json | 1 + .../v2/Dropdown/Dropdown.stories.tsx | 111 ++ .../src/components/v2/Dropdown/Dropdown.tsx | 97 ++ frontend/src/components/v2/Dropdown/index.tsx | 17 + frontend/src/components/v2/index.tsx | 2 + frontend/tailwind.config.js | 1234 +++++++++-------- 7 files changed, 1000 insertions(+), 591 deletions(-) create mode 100644 frontend/src/components/v2/Dropdown/Dropdown.stories.tsx create mode 100644 frontend/src/components/v2/Dropdown/Dropdown.tsx create mode 100644 frontend/src/components/v2/Dropdown/index.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index a7ebe41f0..435f229fc 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -17,6 +17,7 @@ "@radix-ui/react-alert-dialog": "^1.0.2", "@radix-ui/react-checkbox": "^1.0.1", "@radix-ui/react-dialog": "^1.0.2", + "@radix-ui/react-dropdown-menu": "^2.0.2", "@radix-ui/react-label": "^2.0.0", "@radix-ui/react-popover": "^1.0.3", "@radix-ui/react-progress": "^1.0.1", @@ -3793,6 +3794,25 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, + "node_modules/@radix-ui/react-dropdown-menu": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.2.tgz", + "integrity": "sha512-r0kN0fstrSi+uAdK2GkLxnnbhqVBy/9Q4o4PvGOYipW0BldQlYBMSmZprvCNj2i2mAATx16kvzIn12GnaGjbMw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-id": "1.0.0", + "@radix-ui/react-menu": "2.0.2", + "@radix-ui/react-primitive": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, "node_modules/@radix-ui/react-focus-guards": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz", @@ -3844,6 +3864,36 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, + "node_modules/@radix-ui/react-menu": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.2.tgz", + "integrity": "sha512-H5dtBi/k3tc45IMd2Pu+Q2PyONFlsYJ5sWUlflSs8BQRghh5GhJHLRuB1yb88VOywuzzvGkaR/HUJJ65Jf2POA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-collection": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-direction": "1.0.0", + "@radix-ui/react-dismissable-layer": "1.0.2", + "@radix-ui/react-focus-guards": "1.0.0", + "@radix-ui/react-focus-scope": "1.0.1", + "@radix-ui/react-id": "1.0.0", + "@radix-ui/react-popper": "1.1.0", + "@radix-ui/react-portal": "1.0.1", + "@radix-ui/react-presence": "1.0.0", + "@radix-ui/react-primitive": "1.0.1", + "@radix-ui/react-roving-focus": "1.0.2", + "@radix-ui/react-slot": "1.0.1", + "@radix-ui/react-use-callback-ref": "1.0.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, "node_modules/@radix-ui/react-popover": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.3.tgz", @@ -3947,6 +3997,27 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, + "node_modules/@radix-ui/react-roving-focus": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.2.tgz", + "integrity": "sha512-HLK+CqD/8pN6GfJm3U+cqpqhSKYAWiOJDe+A+8MfxBnOue39QEeMa43csUn2CXCHQT0/mewh1LrrG4tfkM9DMA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-collection": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-direction": "1.0.0", + "@radix-ui/react-id": "1.0.0", + "@radix-ui/react-primitive": "1.0.1", + "@radix-ui/react-use-callback-ref": "1.0.0", + "@radix-ui/react-use-controllable-state": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, "node_modules/@radix-ui/react-select": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-1.2.0.tgz", @@ -24759,6 +24830,21 @@ "@radix-ui/react-use-escape-keydown": "1.0.2" } }, + "@radix-ui/react-dropdown-menu": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.2.tgz", + "integrity": "sha512-r0kN0fstrSi+uAdK2GkLxnnbhqVBy/9Q4o4PvGOYipW0BldQlYBMSmZprvCNj2i2mAATx16kvzIn12GnaGjbMw==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-id": "1.0.0", + "@radix-ui/react-menu": "2.0.2", + "@radix-ui/react-primitive": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.0" + } + }, "@radix-ui/react-focus-guards": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz", @@ -24796,6 +24882,32 @@ "@radix-ui/react-primitive": "1.0.1" } }, + "@radix-ui/react-menu": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.2.tgz", + "integrity": "sha512-H5dtBi/k3tc45IMd2Pu+Q2PyONFlsYJ5sWUlflSs8BQRghh5GhJHLRuB1yb88VOywuzzvGkaR/HUJJ65Jf2POA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-collection": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-direction": "1.0.0", + "@radix-ui/react-dismissable-layer": "1.0.2", + "@radix-ui/react-focus-guards": "1.0.0", + "@radix-ui/react-focus-scope": "1.0.1", + "@radix-ui/react-id": "1.0.0", + "@radix-ui/react-popper": "1.1.0", + "@radix-ui/react-portal": "1.0.1", + "@radix-ui/react-presence": "1.0.0", + "@radix-ui/react-primitive": "1.0.1", + "@radix-ui/react-roving-focus": "1.0.2", + "@radix-ui/react-slot": "1.0.1", + "@radix-ui/react-use-callback-ref": "1.0.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + } + }, "@radix-ui/react-popover": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.3.tgz", @@ -24875,6 +24987,23 @@ "@radix-ui/react-primitive": "1.0.1" } }, + "@radix-ui/react-roving-focus": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.2.tgz", + "integrity": "sha512-HLK+CqD/8pN6GfJm3U+cqpqhSKYAWiOJDe+A+8MfxBnOue39QEeMa43csUn2CXCHQT0/mewh1LrrG4tfkM9DMA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-collection": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-direction": "1.0.0", + "@radix-ui/react-id": "1.0.0", + "@radix-ui/react-primitive": "1.0.1", + "@radix-ui/react-use-callback-ref": "1.0.0", + "@radix-ui/react-use-controllable-state": "1.0.0" + } + }, "@radix-ui/react-select": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-1.2.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index dc5a8072e..80c267820 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -24,6 +24,7 @@ "@radix-ui/react-alert-dialog": "^1.0.2", "@radix-ui/react-checkbox": "^1.0.1", "@radix-ui/react-dialog": "^1.0.2", + "@radix-ui/react-dropdown-menu": "^2.0.2", "@radix-ui/react-label": "^2.0.0", "@radix-ui/react-popover": "^1.0.3", "@radix-ui/react-progress": "^1.0.1", diff --git a/frontend/src/components/v2/Dropdown/Dropdown.stories.tsx b/frontend/src/components/v2/Dropdown/Dropdown.stories.tsx new file mode 100644 index 000000000..35e7fd664 --- /dev/null +++ b/frontend/src/components/v2/Dropdown/Dropdown.stories.tsx @@ -0,0 +1,111 @@ +import { faPlus, faTrash, faUndo } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { IconButton } from '../IconButton'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger +} from './Dropdown'; + +const meta: Meta = { + title: 'Components/DropdownMenu', + component: DropdownMenu, + tags: ['v2'], + argTypes: {} +}; + +export default meta; +type Story = StoryObj; + +export const Basic: Story = { + render: (args) => ( +
+ + + + + + + + Delete + Undo + + +
+ ) +}; + +export const Icons: Story = { + render: (args) => ( +
+ + + + + + + + }> + Delete + + }> + Undo + + + +
+ ) +}; + +export const WithDivider: Story = { + render: (args) => ( +
+ + + + + + + + Delete + + Undo + + Redo + + +
+ ) +}; + +export const Group: Story = { + render: (args) => ( +
+ + + + + + + + + Group + Undo + Delete + + + Group#2 + Undo + Delete + + + +
+ ) +}; diff --git a/frontend/src/components/v2/Dropdown/Dropdown.tsx b/frontend/src/components/v2/Dropdown/Dropdown.tsx new file mode 100644 index 000000000..d886fe100 --- /dev/null +++ b/frontend/src/components/v2/Dropdown/Dropdown.tsx @@ -0,0 +1,97 @@ +import { ComponentPropsWithRef, ElementType, forwardRef, ReactNode, Ref } from 'react'; +import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; +import { twMerge } from 'tailwind-merge'; + +// Main menu or parent container +export type DropdownMenuProps = DropdownMenuPrimitive.DropdownMenuProps; +export const DropdownMenu = DropdownMenuPrimitive.Root; + +// trigger +export type DropdownMenuTriggerProps = DropdownMenuPrimitive.DropdownMenuTriggerProps; +export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger; + +// item container +export type DropdownMenuContentProps = DropdownMenuPrimitive.MenuContentProps; +export const DropdownMenuContent = forwardRef( + ({ children, className, ...props }, forwardedRef) => { + return ( + + + {children} + + + ); + } +); + +DropdownMenuContent.displayName = 'DropdownMenuContent'; + +// item label component +export type DropdownLabelProps = DropdownMenuPrimitive.MenuLabelProps; +export const DropdownMenuLabel = ({ className, ...props }: DropdownLabelProps) => ( + +); + +// dropdown items +export type DropdownMenuItemProps = + DropdownMenuPrimitive.MenuContentProps & { + icon?: ReactNode; + as?: T; + inputRef?: Ref; + }; + +export const DropdownMenuItem = ({ + children, + inputRef, + className, + icon, + as: Item = 'button', + ...props +}: DropdownMenuItemProps & ComponentPropsWithRef) => ( + + + {icon && {icon}} + {children} + + +); + +// grouping items into 1 +export type DropdownMenuGroupProps = DropdownMenuPrimitive.DropdownMenuGroupProps; + +export const DropdownMenuGroup = forwardRef( + ({ ...props }, ref) => +); + +DropdownMenuGroup.displayName = 'DropdownMenuGroup'; + +// Divider +export const DropdownMenuSeparator = forwardRef< + HTMLDivElement, + DropdownMenuPrimitive.DropdownMenuSeparatorProps +>(({ className, ...props }, ref) => ( + +)); + +DropdownMenuSeparator.displayName = 'DropdownMenuSeperator'; diff --git a/frontend/src/components/v2/Dropdown/index.tsx b/frontend/src/components/v2/Dropdown/index.tsx new file mode 100644 index 000000000..15a77a417 --- /dev/null +++ b/frontend/src/components/v2/Dropdown/index.tsx @@ -0,0 +1,17 @@ +export type { + DropdownLabelProps, + DropdownMenuContentProps, + DropdownMenuGroupProps, + DropdownMenuItemProps, + DropdownMenuProps, + DropdownMenuTriggerProps +} from './Dropdown'; +export { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger +} from './Dropdown'; diff --git a/frontend/src/components/v2/index.tsx b/frontend/src/components/v2/index.tsx index 3b886d3fd..94fd40a2d 100644 --- a/frontend/src/components/v2/index.tsx +++ b/frontend/src/components/v2/index.tsx @@ -1,11 +1,13 @@ export * from './Button'; export * from './Card'; export * from './Checkbox'; +export * from './Dropdown'; export * from './FormControl'; export * from './IconButton'; export * from './Input'; export * from './Menu'; export * from './Modal'; export * from './Select'; +export * from './Spinner'; export * from './Switch'; export * from './TextArea'; diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 5f823cb5e..5b966d858 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -1,9 +1,9 @@ -const colors = require("tailwindcss/colors"); +const colors = require('tailwindcss/colors'); const round = (num) => num .toFixed(7) - .replace(/(\.[0-9]+?)0+$/, "$1") - .replace(/\.0$/, ""); + .replace(/(\.[0-9]+?)0+$/, '$1') + .replace(/\.0$/, ''); const rem = (px) => `${round(px / 16)}rem`; const em = (px, base) => `${round(px / base)}em`; @@ -15,71 +15,71 @@ let defaultModifiers = { lineHeight: round(24 / 14), p: { marginTop: em(16, 14), - marginBottom: em(16, 14), + marginBottom: em(16, 14) }, '[class~="lead"]': { fontSize: em(18, 14), lineHeight: round(28 / 18), marginTop: em(16, 18), - marginBottom: em(16, 18), + marginBottom: em(16, 18) }, blockquote: { marginTop: em(24, 18), marginBottom: em(24, 18), - paddingLeft: em(20, 18), + paddingLeft: em(20, 18) }, h1: { fontSize: em(30, 14), - marginTop: "0", + marginTop: '0', marginBottom: em(24, 30), - lineHeight: round(36 / 30), + lineHeight: round(36 / 30) }, h2: { fontSize: em(20, 14), marginTop: em(32, 20), marginBottom: em(16, 20), - lineHeight: round(28 / 20), + lineHeight: round(28 / 20) }, h3: { fontSize: em(18, 14), marginTop: em(28, 18), marginBottom: em(8, 18), - lineHeight: round(28 / 18), + lineHeight: round(28 / 18) }, h4: { marginTop: em(20, 14), marginBottom: em(8, 14), - lineHeight: round(20 / 14), + lineHeight: round(20 / 14) }, img: { marginTop: em(24, 14), - marginBottom: em(24, 14), + marginBottom: em(24, 14) }, video: { marginTop: em(24, 14), - marginBottom: em(24, 14), + marginBottom: em(24, 14) }, figure: { marginTop: em(24, 14), - marginBottom: em(24, 14), + marginBottom: em(24, 14) }, - "figure > *": { - marginTop: "0", - marginBottom: "0", + 'figure > *': { + marginTop: '0', + marginBottom: '0' }, figcaption: { fontSize: em(12, 14), lineHeight: round(16 / 12), - marginTop: em(8, 12), + marginTop: em(8, 12) }, code: { - fontSize: em(12, 14), + fontSize: em(12, 14) }, - "h2 code": { - fontSize: em(18, 20), + 'h2 code': { + fontSize: em(18, 20) }, - "h3 code": { - fontSize: em(16, 18), + 'h3 code': { + fontSize: em(16, 18) }, pre: { fontSize: em(12, 14), @@ -90,101 +90,101 @@ let defaultModifiers = { paddingTop: em(8, 12), paddingRight: em(12, 12), paddingBottom: em(8, 12), - paddingLeft: em(12, 12), + paddingLeft: em(12, 12) }, ol: { marginTop: em(16, 14), marginBottom: em(16, 14), - paddingLeft: em(22, 14), + paddingLeft: em(22, 14) }, ul: { marginTop: em(16, 14), marginBottom: em(16, 14), - paddingLeft: em(22, 14), + paddingLeft: em(22, 14) }, li: { marginTop: em(4, 14), - marginBottom: em(4, 14), + marginBottom: em(4, 14) }, - "ol > li": { - paddingLeft: em(6, 14), + 'ol > li': { + paddingLeft: em(6, 14) }, - "ul > li": { - paddingLeft: em(6, 14), + 'ul > li': { + paddingLeft: em(6, 14) }, - "> ul > li p": { + '> ul > li p': { marginTop: em(8, 14), - marginBottom: em(8, 14), + marginBottom: em(8, 14) }, - "> ul > li > *:first-child": { - marginTop: em(16, 14), + '> ul > li > *:first-child': { + marginTop: em(16, 14) }, - "> ul > li > *:last-child": { - marginBottom: em(16, 14), + '> ul > li > *:last-child': { + marginBottom: em(16, 14) }, - "> ol > li > *:first-child": { - marginTop: em(16, 14), + '> ol > li > *:first-child': { + marginTop: em(16, 14) }, - "> ol > li > *:last-child": { - marginBottom: em(16, 14), + '> ol > li > *:last-child': { + marginBottom: em(16, 14) }, - "ul ul, ul ol, ol ul, ol ol": { + 'ul ul, ul ol, ol ul, ol ol': { marginTop: em(8, 14), - marginBottom: em(8, 14), + marginBottom: em(8, 14) }, hr: { marginTop: em(40, 14), - marginBottom: em(40, 14), + marginBottom: em(40, 14) }, - "hr + *": { - marginTop: "0", + 'hr + *': { + marginTop: '0' }, - "h2 + *": { - marginTop: "0", + 'h2 + *': { + marginTop: '0' }, - "h3 + *": { - marginTop: "0", + 'h3 + *': { + marginTop: '0' }, - "h4 + *": { - marginTop: "0", + 'h4 + *': { + marginTop: '0' }, table: { fontSize: em(12, 14), - lineHeight: round(18 / 12), + lineHeight: round(18 / 12) }, - "thead th": { + 'thead th': { paddingRight: em(12, 12), paddingBottom: em(8, 12), - paddingLeft: em(12, 12), + paddingLeft: em(12, 12) }, - "thead th:first-child": { - paddingLeft: "0", + 'thead th:first-child': { + paddingLeft: '0' }, - "thead th:last-child": { - paddingRight: "0", + 'thead th:last-child': { + paddingRight: '0' }, - "tbody td, tfoot td": { + 'tbody td, tfoot td': { paddingTop: em(8, 12), paddingRight: em(12, 12), paddingBottom: em(8, 12), - paddingLeft: em(12, 12), + paddingLeft: em(12, 12) }, - "tbody td:first-child, tfoot td:first-child": { - paddingLeft: "0", - }, - "tbody td:last-child, tfoot td:last-child": { - paddingRight: "0", + 'tbody td:first-child, tfoot td:first-child': { + paddingLeft: '0' }, + 'tbody td:last-child, tfoot td:last-child': { + paddingRight: '0' + } }, { - "> :first-child": { - marginTop: "0", + '> :first-child': { + marginTop: '0' }, - "> :last-child": { - marginBottom: "0", - }, - }, - ], + '> :last-child': { + marginBottom: '0' + } + } + ] }, base: { css: [ @@ -193,71 +193,71 @@ let defaultModifiers = { lineHeight: round(28 / 16), p: { marginTop: em(20, 16), - marginBottom: em(20, 16), + marginBottom: em(20, 16) }, '[class~="lead"]': { fontSize: em(20, 16), lineHeight: round(32 / 20), marginTop: em(24, 20), - marginBottom: em(24, 20), + marginBottom: em(24, 20) }, blockquote: { marginTop: em(32, 20), marginBottom: em(32, 20), - paddingLeft: em(20, 20), + paddingLeft: em(20, 20) }, h1: { fontSize: em(36, 16), - marginTop: "0", + marginTop: '0', marginBottom: em(32, 36), - lineHeight: round(40 / 36), + lineHeight: round(40 / 36) }, h2: { fontSize: em(24, 16), marginTop: em(48, 24), marginBottom: em(24, 24), - lineHeight: round(32 / 24), + lineHeight: round(32 / 24) }, h3: { fontSize: em(20, 16), marginTop: em(32, 20), marginBottom: em(12, 20), - lineHeight: round(32 / 20), + lineHeight: round(32 / 20) }, h4: { marginTop: em(24, 16), marginBottom: em(8, 16), - lineHeight: round(24 / 16), + lineHeight: round(24 / 16) }, img: { marginTop: em(32, 16), - marginBottom: em(32, 16), + marginBottom: em(32, 16) }, video: { marginTop: em(32, 16), - marginBottom: em(32, 16), + marginBottom: em(32, 16) }, figure: { marginTop: em(32, 16), - marginBottom: em(32, 16), + marginBottom: em(32, 16) }, - "figure > *": { - marginTop: "0", - marginBottom: "0", + 'figure > *': { + marginTop: '0', + marginBottom: '0' }, figcaption: { fontSize: em(14, 16), lineHeight: round(20 / 14), - marginTop: em(12, 14), + marginTop: em(12, 14) }, code: { - fontSize: em(14, 16), + fontSize: em(14, 16) }, - "h2 code": { - fontSize: em(21, 24), + 'h2 code': { + fontSize: em(21, 24) }, - "h3 code": { - fontSize: em(18, 20), + 'h3 code': { + fontSize: em(18, 20) }, pre: { fontSize: em(14, 16), @@ -268,101 +268,101 @@ let defaultModifiers = { paddingTop: em(12, 14), paddingRight: em(16, 14), paddingBottom: em(12, 14), - paddingLeft: em(16, 14), + paddingLeft: em(16, 14) }, ol: { marginTop: em(20, 16), marginBottom: em(20, 16), - paddingLeft: em(26, 16), + paddingLeft: em(26, 16) }, ul: { marginTop: em(20, 16), marginBottom: em(20, 16), - paddingLeft: em(26, 16), + paddingLeft: em(26, 16) }, li: { marginTop: em(8, 16), - marginBottom: em(8, 16), + marginBottom: em(8, 16) }, - "ol > li": { - paddingLeft: em(6, 16), + 'ol > li': { + paddingLeft: em(6, 16) }, - "ul > li": { - paddingLeft: em(6, 16), + 'ul > li': { + paddingLeft: em(6, 16) }, - "> ul > li p": { + '> ul > li p': { marginTop: em(12, 16), - marginBottom: em(12, 16), + marginBottom: em(12, 16) }, - "> ul > li > *:first-child": { - marginTop: em(20, 16), + '> ul > li > *:first-child': { + marginTop: em(20, 16) }, - "> ul > li > *:last-child": { - marginBottom: em(20, 16), + '> ul > li > *:last-child': { + marginBottom: em(20, 16) }, - "> ol > li > *:first-child": { - marginTop: em(20, 16), + '> ol > li > *:first-child': { + marginTop: em(20, 16) }, - "> ol > li > *:last-child": { - marginBottom: em(20, 16), + '> ol > li > *:last-child': { + marginBottom: em(20, 16) }, - "ul ul, ul ol, ol ul, ol ol": { + 'ul ul, ul ol, ol ul, ol ol': { marginTop: em(12, 16), - marginBottom: em(12, 16), + marginBottom: em(12, 16) }, hr: { marginTop: em(48, 16), - marginBottom: em(48, 16), + marginBottom: em(48, 16) }, - "hr + *": { - marginTop: "0", + 'hr + *': { + marginTop: '0' }, - "h2 + *": { - marginTop: "0", + 'h2 + *': { + marginTop: '0' }, - "h3 + *": { - marginTop: "0", + 'h3 + *': { + marginTop: '0' }, - "h4 + *": { - marginTop: "0", + 'h4 + *': { + marginTop: '0' }, table: { fontSize: em(14, 16), - lineHeight: round(24 / 14), + lineHeight: round(24 / 14) }, - "thead th": { + 'thead th': { paddingRight: em(8, 14), paddingBottom: em(8, 14), - paddingLeft: em(8, 14), + paddingLeft: em(8, 14) }, - "thead th:first-child": { - paddingLeft: "0", + 'thead th:first-child': { + paddingLeft: '0' }, - "thead th:last-child": { - paddingRight: "0", + 'thead th:last-child': { + paddingRight: '0' }, - "tbody td, tfoot td": { + 'tbody td, tfoot td': { paddingTop: em(8, 14), paddingRight: em(8, 14), paddingBottom: em(8, 14), - paddingLeft: em(8, 14), + paddingLeft: em(8, 14) }, - "tbody td:first-child, tfoot td:first-child": { - paddingLeft: "0", - }, - "tbody td:last-child, tfoot td:last-child": { - paddingRight: "0", + 'tbody td:first-child, tfoot td:first-child': { + paddingLeft: '0' }, + 'tbody td:last-child, tfoot td:last-child': { + paddingRight: '0' + } }, { - "> :first-child": { - marginTop: "0", + '> :first-child': { + marginTop: '0' }, - "> :last-child": { - marginBottom: "0", - }, - }, - ], + '> :last-child': { + marginBottom: '0' + } + } + ] }, lg: { css: [ @@ -371,71 +371,71 @@ let defaultModifiers = { lineHeight: round(32 / 18), p: { marginTop: em(24, 18), - marginBottom: em(24, 18), + marginBottom: em(24, 18) }, '[class~="lead"]': { fontSize: em(22, 18), lineHeight: round(32 / 22), marginTop: em(24, 22), - marginBottom: em(24, 22), + marginBottom: em(24, 22) }, blockquote: { marginTop: em(40, 24), marginBottom: em(40, 24), - paddingLeft: em(24, 24), + paddingLeft: em(24, 24) }, h1: { fontSize: em(48, 18), - marginTop: "0", + marginTop: '0', marginBottom: em(40, 48), - lineHeight: round(48 / 48), + lineHeight: round(48 / 48) }, h2: { fontSize: em(30, 18), marginTop: em(56, 30), marginBottom: em(32, 30), - lineHeight: round(40 / 30), + lineHeight: round(40 / 30) }, h3: { fontSize: em(24, 18), marginTop: em(40, 24), marginBottom: em(16, 24), - lineHeight: round(36 / 24), + lineHeight: round(36 / 24) }, h4: { marginTop: em(32, 18), marginBottom: em(8, 18), - lineHeight: round(28 / 18), + lineHeight: round(28 / 18) }, img: { marginTop: em(32, 18), - marginBottom: em(32, 18), + marginBottom: em(32, 18) }, video: { marginTop: em(32, 18), - marginBottom: em(32, 18), + marginBottom: em(32, 18) }, figure: { marginTop: em(32, 18), - marginBottom: em(32, 18), + marginBottom: em(32, 18) }, - "figure > *": { - marginTop: "0", - marginBottom: "0", + 'figure > *': { + marginTop: '0', + marginBottom: '0' }, figcaption: { fontSize: em(16, 18), lineHeight: round(24 / 16), - marginTop: em(16, 16), + marginTop: em(16, 16) }, code: { - fontSize: em(16, 18), + fontSize: em(16, 18) }, - "h2 code": { - fontSize: em(26, 30), + 'h2 code': { + fontSize: em(26, 30) }, - "h3 code": { - fontSize: em(21, 24), + 'h3 code': { + fontSize: em(21, 24) }, pre: { fontSize: em(16, 18), @@ -446,101 +446,101 @@ let defaultModifiers = { paddingTop: em(16, 16), paddingRight: em(24, 16), paddingBottom: em(16, 16), - paddingLeft: em(24, 16), + paddingLeft: em(24, 16) }, ol: { marginTop: em(24, 18), marginBottom: em(24, 18), - paddingLeft: em(28, 18), + paddingLeft: em(28, 18) }, ul: { marginTop: em(24, 18), marginBottom: em(24, 18), - paddingLeft: em(28, 18), + paddingLeft: em(28, 18) }, li: { marginTop: em(12, 18), - marginBottom: em(12, 18), + marginBottom: em(12, 18) }, - "ol > li": { - paddingLeft: em(8, 18), + 'ol > li': { + paddingLeft: em(8, 18) }, - "ul > li": { - paddingLeft: em(8, 18), + 'ul > li': { + paddingLeft: em(8, 18) }, - "> ul > li p": { + '> ul > li p': { marginTop: em(16, 18), - marginBottom: em(16, 18), + marginBottom: em(16, 18) }, - "> ul > li > *:first-child": { - marginTop: em(24, 18), + '> ul > li > *:first-child': { + marginTop: em(24, 18) }, - "> ul > li > *:last-child": { - marginBottom: em(24, 18), + '> ul > li > *:last-child': { + marginBottom: em(24, 18) }, - "> ol > li > *:first-child": { - marginTop: em(24, 18), + '> ol > li > *:first-child': { + marginTop: em(24, 18) }, - "> ol > li > *:last-child": { - marginBottom: em(24, 18), + '> ol > li > *:last-child': { + marginBottom: em(24, 18) }, - "ul ul, ul ol, ol ul, ol ol": { + 'ul ul, ul ol, ol ul, ol ol': { marginTop: em(16, 18), - marginBottom: em(16, 18), + marginBottom: em(16, 18) }, hr: { marginTop: em(56, 18), - marginBottom: em(56, 18), + marginBottom: em(56, 18) }, - "hr + *": { - marginTop: "0", + 'hr + *': { + marginTop: '0' }, - "h2 + *": { - marginTop: "0", + 'h2 + *': { + marginTop: '0' }, - "h3 + *": { - marginTop: "0", + 'h3 + *': { + marginTop: '0' }, - "h4 + *": { - marginTop: "0", + 'h4 + *': { + marginTop: '0' }, table: { fontSize: em(16, 18), - lineHeight: round(24 / 16), + lineHeight: round(24 / 16) }, - "thead th": { + 'thead th': { paddingRight: em(12, 16), paddingBottom: em(12, 16), - paddingLeft: em(12, 16), + paddingLeft: em(12, 16) }, - "thead th:first-child": { - paddingLeft: "0", + 'thead th:first-child': { + paddingLeft: '0' }, - "thead th:last-child": { - paddingRight: "0", + 'thead th:last-child': { + paddingRight: '0' }, - "tbody td, tfoot td": { + 'tbody td, tfoot td': { paddingTop: em(12, 16), paddingRight: em(12, 16), paddingBottom: em(12, 16), - paddingLeft: em(12, 16), + paddingLeft: em(12, 16) }, - "tbody td:first-child, tfoot td:first-child": { - paddingLeft: "0", - }, - "tbody td:last-child, tfoot td:last-child": { - paddingRight: "0", + 'tbody td:first-child, tfoot td:first-child': { + paddingLeft: '0' }, + 'tbody td:last-child, tfoot td:last-child': { + paddingRight: '0' + } }, { - "> :first-child": { - marginTop: "0", + '> :first-child': { + marginTop: '0' }, - "> :last-child": { - marginBottom: "0", - }, - }, - ], + '> :last-child': { + marginBottom: '0' + } + } + ] }, xl: { css: [ @@ -549,71 +549,71 @@ let defaultModifiers = { lineHeight: round(36 / 20), p: { marginTop: em(24, 20), - marginBottom: em(24, 20), + marginBottom: em(24, 20) }, '[class~="lead"]': { fontSize: em(24, 20), lineHeight: round(36 / 24), marginTop: em(24, 24), - marginBottom: em(24, 24), + marginBottom: em(24, 24) }, blockquote: { marginTop: em(48, 30), marginBottom: em(48, 30), - paddingLeft: em(32, 30), + paddingLeft: em(32, 30) }, h1: { fontSize: em(56, 20), - marginTop: "0", + marginTop: '0', marginBottom: em(48, 56), - lineHeight: round(56 / 56), + lineHeight: round(56 / 56) }, h2: { fontSize: em(36, 20), marginTop: em(56, 36), marginBottom: em(32, 36), - lineHeight: round(40 / 36), + lineHeight: round(40 / 36) }, h3: { fontSize: em(30, 20), marginTop: em(48, 30), marginBottom: em(20, 30), - lineHeight: round(40 / 30), + lineHeight: round(40 / 30) }, h4: { marginTop: em(36, 20), marginBottom: em(12, 20), - lineHeight: round(32 / 20), + lineHeight: round(32 / 20) }, img: { marginTop: em(40, 20), - marginBottom: em(40, 20), + marginBottom: em(40, 20) }, video: { marginTop: em(40, 20), - marginBottom: em(40, 20), + marginBottom: em(40, 20) }, figure: { marginTop: em(40, 20), - marginBottom: em(40, 20), + marginBottom: em(40, 20) }, - "figure > *": { - marginTop: "0", - marginBottom: "0", + 'figure > *': { + marginTop: '0', + marginBottom: '0' }, figcaption: { fontSize: em(18, 20), lineHeight: round(28 / 18), - marginTop: em(18, 18), + marginTop: em(18, 18) }, code: { - fontSize: em(18, 20), + fontSize: em(18, 20) }, - "h2 code": { - fontSize: em(31, 36), + 'h2 code': { + fontSize: em(31, 36) }, - "h3 code": { - fontSize: em(27, 30), + 'h3 code': { + fontSize: em(27, 30) }, pre: { fontSize: em(18, 20), @@ -624,174 +624,174 @@ let defaultModifiers = { paddingTop: em(20, 18), paddingRight: em(24, 18), paddingBottom: em(20, 18), - paddingLeft: em(24, 18), + paddingLeft: em(24, 18) }, ol: { marginTop: em(24, 20), marginBottom: em(24, 20), - paddingLeft: em(32, 20), + paddingLeft: em(32, 20) }, ul: { marginTop: em(24, 20), marginBottom: em(24, 20), - paddingLeft: em(32, 20), + paddingLeft: em(32, 20) }, li: { marginTop: em(12, 20), - marginBottom: em(12, 20), + marginBottom: em(12, 20) }, - "ol > li": { - paddingLeft: em(8, 20), + 'ol > li': { + paddingLeft: em(8, 20) }, - "ul > li": { - paddingLeft: em(8, 20), + 'ul > li': { + paddingLeft: em(8, 20) }, - "> ul > li p": { + '> ul > li p': { marginTop: em(16, 20), - marginBottom: em(16, 20), + marginBottom: em(16, 20) }, - "> ul > li > *:first-child": { - marginTop: em(24, 20), + '> ul > li > *:first-child': { + marginTop: em(24, 20) }, - "> ul > li > *:last-child": { - marginBottom: em(24, 20), + '> ul > li > *:last-child': { + marginBottom: em(24, 20) }, - "> ol > li > *:first-child": { - marginTop: em(24, 20), + '> ol > li > *:first-child': { + marginTop: em(24, 20) }, - "> ol > li > *:last-child": { - marginBottom: em(24, 20), + '> ol > li > *:last-child': { + marginBottom: em(24, 20) }, - "ul ul, ul ol, ol ul, ol ol": { + 'ul ul, ul ol, ol ul, ol ol': { marginTop: em(16, 20), - marginBottom: em(16, 20), + marginBottom: em(16, 20) }, hr: { marginTop: em(56, 20), - marginBottom: em(56, 20), + marginBottom: em(56, 20) }, - "hr + *": { - marginTop: "0", + 'hr + *': { + marginTop: '0' }, - "h2 + *": { - marginTop: "0", + 'h2 + *': { + marginTop: '0' }, - "h3 + *": { - marginTop: "0", + 'h3 + *': { + marginTop: '0' }, - "h4 + *": { - marginTop: "0", + 'h4 + *': { + marginTop: '0' }, table: { fontSize: em(18, 20), - lineHeight: round(28 / 18), + lineHeight: round(28 / 18) }, - "thead th": { + 'thead th': { paddingRight: em(12, 18), paddingBottom: em(16, 18), - paddingLeft: em(12, 18), + paddingLeft: em(12, 18) }, - "thead th:first-child": { - paddingLeft: "0", + 'thead th:first-child': { + paddingLeft: '0' }, - "thead th:last-child": { - paddingRight: "0", + 'thead th:last-child': { + paddingRight: '0' }, - "tbody td, tfoot td": { + 'tbody td, tfoot td': { paddingTop: em(16, 18), paddingRight: em(12, 18), paddingBottom: em(16, 18), - paddingLeft: em(12, 18), + paddingLeft: em(12, 18) }, - "tbody td:first-child, tfoot td:first-child": { - paddingLeft: "0", - }, - "tbody td:last-child, tfoot td:last-child": { - paddingRight: "0", + 'tbody td:first-child, tfoot td:first-child': { + paddingLeft: '0' }, + 'tbody td:last-child, tfoot td:last-child': { + paddingRight: '0' + } }, { - "> :first-child": { - marginTop: "0", + '> :first-child': { + marginTop: '0' }, - "> :last-child": { - marginBottom: "0", - }, - }, - ], + '> :last-child': { + marginBottom: '0' + } + } + ] }, - "2xl": { + '2xl': { css: [ { fontSize: rem(24), lineHeight: round(40 / 24), p: { marginTop: em(32, 24), - marginBottom: em(32, 24), + marginBottom: em(32, 24) }, '[class~="lead"]': { fontSize: em(30, 24), lineHeight: round(44 / 30), marginTop: em(32, 30), - marginBottom: em(32, 30), + marginBottom: em(32, 30) }, blockquote: { marginTop: em(64, 36), marginBottom: em(64, 36), - paddingLeft: em(40, 36), + paddingLeft: em(40, 36) }, h1: { fontSize: em(64, 24), - marginTop: "0", + marginTop: '0', marginBottom: em(56, 64), - lineHeight: round(64 / 64), + lineHeight: round(64 / 64) }, h2: { fontSize: em(48, 24), marginTop: em(72, 48), marginBottom: em(40, 48), - lineHeight: round(52 / 48), + lineHeight: round(52 / 48) }, h3: { fontSize: em(36, 24), marginTop: em(56, 36), marginBottom: em(24, 36), - lineHeight: round(44 / 36), + lineHeight: round(44 / 36) }, h4: { marginTop: em(40, 24), marginBottom: em(16, 24), - lineHeight: round(36 / 24), + lineHeight: round(36 / 24) }, img: { marginTop: em(48, 24), - marginBottom: em(48, 24), + marginBottom: em(48, 24) }, video: { marginTop: em(48, 24), - marginBottom: em(48, 24), + marginBottom: em(48, 24) }, figure: { marginTop: em(48, 24), - marginBottom: em(48, 24), + marginBottom: em(48, 24) }, - "figure > *": { - marginTop: "0", - marginBottom: "0", + 'figure > *': { + marginTop: '0', + marginBottom: '0' }, figcaption: { fontSize: em(20, 24), lineHeight: round(32 / 20), - marginTop: em(20, 20), + marginTop: em(20, 20) }, code: { - fontSize: em(20, 24), + fontSize: em(20, 24) }, - "h2 code": { - fontSize: em(42, 48), + 'h2 code': { + fontSize: em(42, 48) }, - "h3 code": { - fontSize: em(32, 36), + 'h3 code': { + fontSize: em(32, 36) }, pre: { fontSize: em(20, 24), @@ -802,435 +802,435 @@ let defaultModifiers = { paddingTop: em(24, 20), paddingRight: em(32, 20), paddingBottom: em(24, 20), - paddingLeft: em(32, 20), + paddingLeft: em(32, 20) }, ol: { marginTop: em(32, 24), marginBottom: em(32, 24), - paddingLeft: em(38, 24), + paddingLeft: em(38, 24) }, ul: { marginTop: em(32, 24), marginBottom: em(32, 24), - paddingLeft: em(38, 24), + paddingLeft: em(38, 24) }, li: { marginTop: em(12, 24), - marginBottom: em(12, 24), + marginBottom: em(12, 24) }, - "ol > li": { - paddingLeft: em(10, 24), + 'ol > li': { + paddingLeft: em(10, 24) }, - "ul > li": { - paddingLeft: em(10, 24), + 'ul > li': { + paddingLeft: em(10, 24) }, - "> ul > li p": { + '> ul > li p': { marginTop: em(20, 24), - marginBottom: em(20, 24), + marginBottom: em(20, 24) }, - "> ul > li > *:first-child": { - marginTop: em(32, 24), + '> ul > li > *:first-child': { + marginTop: em(32, 24) }, - "> ul > li > *:last-child": { - marginBottom: em(32, 24), + '> ul > li > *:last-child': { + marginBottom: em(32, 24) }, - "> ol > li > *:first-child": { - marginTop: em(32, 24), + '> ol > li > *:first-child': { + marginTop: em(32, 24) }, - "> ol > li > *:last-child": { - marginBottom: em(32, 24), + '> ol > li > *:last-child': { + marginBottom: em(32, 24) }, - "ul ul, ul ol, ol ul, ol ol": { + 'ul ul, ul ol, ol ul, ol ol': { marginTop: em(16, 24), - marginBottom: em(16, 24), + marginBottom: em(16, 24) }, hr: { marginTop: em(72, 24), - marginBottom: em(72, 24), + marginBottom: em(72, 24) }, - "hr + *": { - marginTop: "0", + 'hr + *': { + marginTop: '0' }, - "h2 + *": { - marginTop: "0", + 'h2 + *': { + marginTop: '0' }, - "h3 + *": { - marginTop: "0", + 'h3 + *': { + marginTop: '0' }, - "h4 + *": { - marginTop: "0", + 'h4 + *': { + marginTop: '0' }, table: { fontSize: em(20, 24), - lineHeight: round(28 / 20), + lineHeight: round(28 / 20) }, - "thead th": { + 'thead th': { paddingRight: em(12, 20), paddingBottom: em(16, 20), - paddingLeft: em(12, 20), + paddingLeft: em(12, 20) }, - "thead th:first-child": { - paddingLeft: "0", + 'thead th:first-child': { + paddingLeft: '0' }, - "thead th:last-child": { - paddingRight: "0", + 'thead th:last-child': { + paddingRight: '0' }, - "tbody td, tfoot td": { + 'tbody td, tfoot td': { paddingTop: em(16, 20), paddingRight: em(12, 20), paddingBottom: em(16, 20), - paddingLeft: em(12, 20), + paddingLeft: em(12, 20) }, - "tbody td:first-child, tfoot td:first-child": { - paddingLeft: "0", - }, - "tbody td:last-child, tfoot td:last-child": { - paddingRight: "0", + 'tbody td:first-child, tfoot td:first-child': { + paddingLeft: '0' }, + 'tbody td:last-child, tfoot td:last-child': { + paddingRight: '0' + } }, { - "> :first-child": { - marginTop: "0", + '> :first-child': { + marginTop: '0' }, - "> :last-child": { - marginBottom: "0", - }, - }, - ], + '> :last-child': { + marginBottom: '0' + } + } + ] }, // Invert (for dark mode) invert: { css: { - "--tw-prose-body": "var(--tw-prose-invert-body)", - "--tw-prose-headings": "var(--tw-prose-invert-headings)", - "--tw-prose-lead": "var(--tw-prose-invert-lead)", - "--tw-prose-links": "var(--tw-prose-invert-links)", - "--tw-prose-bold": "var(--tw-prose-invert-bold)", - "--tw-prose-counters": "var(--tw-prose-invert-counters)", - "--tw-prose-bullets": "var(--tw-prose-invert-bullets)", - "--tw-prose-hr": "var(--tw-prose-invert-hr)", - "--tw-prose-quotes": "var(--tw-prose-invert-quotes)", - "--tw-prose-quote-borders": "var(--tw-prose-invert-quote-borders)", - "--tw-prose-captions": "var(--tw-prose-invert-captions)", - "--tw-prose-code": "var(--tw-prose-invert-code)", - "--tw-prose-pre-code": "var(--tw-prose-invert-pre-code)", - "--tw-prose-pre-bg": "var(--tw-prose-invert-pre-bg)", - "--tw-prose-th-borders": "var(--tw-prose-invert-th-borders)", - "--tw-prose-td-borders": "var(--tw-prose-invert-td-borders)", - }, + '--tw-prose-body': 'var(--tw-prose-invert-body)', + '--tw-prose-headings': 'var(--tw-prose-invert-headings)', + '--tw-prose-lead': 'var(--tw-prose-invert-lead)', + '--tw-prose-links': 'var(--tw-prose-invert-links)', + '--tw-prose-bold': 'var(--tw-prose-invert-bold)', + '--tw-prose-counters': 'var(--tw-prose-invert-counters)', + '--tw-prose-bullets': 'var(--tw-prose-invert-bullets)', + '--tw-prose-hr': 'var(--tw-prose-invert-hr)', + '--tw-prose-quotes': 'var(--tw-prose-invert-quotes)', + '--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)', + '--tw-prose-captions': 'var(--tw-prose-invert-captions)', + '--tw-prose-code': 'var(--tw-prose-invert-code)', + '--tw-prose-pre-code': 'var(--tw-prose-invert-pre-code)', + '--tw-prose-pre-bg': 'var(--tw-prose-invert-pre-bg)', + '--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)', + '--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)' + } }, // Gray color themes slate: { css: { - "--tw-prose-body": colors.slate[700], - "--tw-prose-headings": colors.slate[900], - "--tw-prose-lead": colors.slate[600], - "--tw-prose-links": colors.slate[900], - "--tw-prose-bold": colors.slate[900], - "--tw-prose-counters": colors.slate[500], - "--tw-prose-bullets": colors.slate[300], - "--tw-prose-hr": colors.slate[200], - "--tw-prose-quotes": colors.slate[900], - "--tw-prose-quote-borders": colors.slate[200], - "--tw-prose-captions": colors.slate[500], - "--tw-prose-code": colors.slate[900], - "--tw-prose-pre-code": colors.slate[200], - "--tw-prose-pre-bg": colors.slate[800], - "--tw-prose-th-borders": colors.slate[300], - "--tw-prose-td-borders": colors.slate[200], - "--tw-prose-invert-body": colors.slate[300], - "--tw-prose-invert-headings": colors.white, - "--tw-prose-invert-lead": colors.slate[400], - "--tw-prose-invert-links": colors.white, - "--tw-prose-invert-bold": colors.white, - "--tw-prose-invert-counters": colors.slate[400], - "--tw-prose-invert-bullets": colors.slate[600], - "--tw-prose-invert-hr": colors.slate[700], - "--tw-prose-invert-quotes": colors.slate[100], - "--tw-prose-invert-quote-borders": colors.slate[700], - "--tw-prose-invert-captions": colors.slate[400], - "--tw-prose-invert-code": colors.white, - "--tw-prose-invert-pre-code": colors.slate[300], - "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)", - "--tw-prose-invert-th-borders": colors.slate[600], - "--tw-prose-invert-td-borders": colors.slate[700], - }, + '--tw-prose-body': colors.slate[700], + '--tw-prose-headings': colors.slate[900], + '--tw-prose-lead': colors.slate[600], + '--tw-prose-links': colors.slate[900], + '--tw-prose-bold': colors.slate[900], + '--tw-prose-counters': colors.slate[500], + '--tw-prose-bullets': colors.slate[300], + '--tw-prose-hr': colors.slate[200], + '--tw-prose-quotes': colors.slate[900], + '--tw-prose-quote-borders': colors.slate[200], + '--tw-prose-captions': colors.slate[500], + '--tw-prose-code': colors.slate[900], + '--tw-prose-pre-code': colors.slate[200], + '--tw-prose-pre-bg': colors.slate[800], + '--tw-prose-th-borders': colors.slate[300], + '--tw-prose-td-borders': colors.slate[200], + '--tw-prose-invert-body': colors.slate[300], + '--tw-prose-invert-headings': colors.white, + '--tw-prose-invert-lead': colors.slate[400], + '--tw-prose-invert-links': colors.white, + '--tw-prose-invert-bold': colors.white, + '--tw-prose-invert-counters': colors.slate[400], + '--tw-prose-invert-bullets': colors.slate[600], + '--tw-prose-invert-hr': colors.slate[700], + '--tw-prose-invert-quotes': colors.slate[100], + '--tw-prose-invert-quote-borders': colors.slate[700], + '--tw-prose-invert-captions': colors.slate[400], + '--tw-prose-invert-code': colors.white, + '--tw-prose-invert-pre-code': colors.slate[300], + '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', + '--tw-prose-invert-th-borders': colors.slate[600], + '--tw-prose-invert-td-borders': colors.slate[700] + } }, gray: { css: { - "--tw-prose-body": colors.gray[700], - "--tw-prose-headings": colors.gray[900], - "--tw-prose-lead": colors.gray[600], - "--tw-prose-links": colors.gray[900], - "--tw-prose-bold": colors.gray[900], - "--tw-prose-counters": colors.gray[500], - "--tw-prose-bullets": colors.gray[300], - "--tw-prose-hr": colors.gray[200], - "--tw-prose-quotes": colors.gray[900], - "--tw-prose-quote-borders": colors.gray[200], - "--tw-prose-captions": colors.gray[500], - "--tw-prose-code": colors.gray[900], - "--tw-prose-pre-code": colors.gray[200], - "--tw-prose-pre-bg": colors.gray[800], - "--tw-prose-th-borders": colors.gray[300], - "--tw-prose-td-borders": colors.gray[200], - "--tw-prose-invert-body": colors.gray[300], - "--tw-prose-invert-headings": colors.white, - "--tw-prose-invert-lead": colors.gray[400], - "--tw-prose-invert-links": colors.white, - "--tw-prose-invert-bold": colors.white, - "--tw-prose-invert-counters": colors.gray[400], - "--tw-prose-invert-bullets": colors.gray[600], - "--tw-prose-invert-hr": colors.gray[700], - "--tw-prose-invert-quotes": colors.gray[100], - "--tw-prose-invert-quote-borders": colors.gray[700], - "--tw-prose-invert-captions": colors.gray[400], - "--tw-prose-invert-code": colors.white, - "--tw-prose-invert-pre-code": colors.gray[300], - "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)", - "--tw-prose-invert-th-borders": colors.gray[600], - "--tw-prose-invert-td-borders": colors.gray[700], - }, + '--tw-prose-body': colors.gray[700], + '--tw-prose-headings': colors.gray[900], + '--tw-prose-lead': colors.gray[600], + '--tw-prose-links': colors.gray[900], + '--tw-prose-bold': colors.gray[900], + '--tw-prose-counters': colors.gray[500], + '--tw-prose-bullets': colors.gray[300], + '--tw-prose-hr': colors.gray[200], + '--tw-prose-quotes': colors.gray[900], + '--tw-prose-quote-borders': colors.gray[200], + '--tw-prose-captions': colors.gray[500], + '--tw-prose-code': colors.gray[900], + '--tw-prose-pre-code': colors.gray[200], + '--tw-prose-pre-bg': colors.gray[800], + '--tw-prose-th-borders': colors.gray[300], + '--tw-prose-td-borders': colors.gray[200], + '--tw-prose-invert-body': colors.gray[300], + '--tw-prose-invert-headings': colors.white, + '--tw-prose-invert-lead': colors.gray[400], + '--tw-prose-invert-links': colors.white, + '--tw-prose-invert-bold': colors.white, + '--tw-prose-invert-counters': colors.gray[400], + '--tw-prose-invert-bullets': colors.gray[600], + '--tw-prose-invert-hr': colors.gray[700], + '--tw-prose-invert-quotes': colors.gray[100], + '--tw-prose-invert-quote-borders': colors.gray[700], + '--tw-prose-invert-captions': colors.gray[400], + '--tw-prose-invert-code': colors.white, + '--tw-prose-invert-pre-code': colors.gray[300], + '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', + '--tw-prose-invert-th-borders': colors.gray[600], + '--tw-prose-invert-td-borders': colors.gray[700] + } }, zinc: { css: { - "--tw-prose-body": colors.zinc[700], - "--tw-prose-headings": colors.zinc[900], - "--tw-prose-lead": colors.zinc[600], - "--tw-prose-links": colors.zinc[900], - "--tw-prose-bold": colors.zinc[900], - "--tw-prose-counters": colors.zinc[500], - "--tw-prose-bullets": colors.zinc[300], - "--tw-prose-hr": colors.zinc[200], - "--tw-prose-quotes": colors.zinc[900], - "--tw-prose-quote-borders": colors.zinc[200], - "--tw-prose-captions": colors.zinc[500], - "--tw-prose-code": colors.zinc[900], - "--tw-prose-pre-code": colors.zinc[200], - "--tw-prose-pre-bg": colors.zinc[800], - "--tw-prose-th-borders": colors.zinc[300], - "--tw-prose-td-borders": colors.zinc[200], - "--tw-prose-invert-body": colors.zinc[300], - "--tw-prose-invert-headings": colors.white, - "--tw-prose-invert-lead": colors.zinc[400], - "--tw-prose-invert-links": colors.white, - "--tw-prose-invert-bold": colors.white, - "--tw-prose-invert-counters": colors.zinc[400], - "--tw-prose-invert-bullets": colors.zinc[600], - "--tw-prose-invert-hr": colors.zinc[700], - "--tw-prose-invert-quotes": colors.zinc[100], - "--tw-prose-invert-quote-borders": colors.zinc[700], - "--tw-prose-invert-captions": colors.zinc[400], - "--tw-prose-invert-code": colors.white, - "--tw-prose-invert-pre-code": colors.zinc[300], - "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)", - "--tw-prose-invert-th-borders": colors.zinc[600], - "--tw-prose-invert-td-borders": colors.zinc[700], - }, + '--tw-prose-body': colors.zinc[700], + '--tw-prose-headings': colors.zinc[900], + '--tw-prose-lead': colors.zinc[600], + '--tw-prose-links': colors.zinc[900], + '--tw-prose-bold': colors.zinc[900], + '--tw-prose-counters': colors.zinc[500], + '--tw-prose-bullets': colors.zinc[300], + '--tw-prose-hr': colors.zinc[200], + '--tw-prose-quotes': colors.zinc[900], + '--tw-prose-quote-borders': colors.zinc[200], + '--tw-prose-captions': colors.zinc[500], + '--tw-prose-code': colors.zinc[900], + '--tw-prose-pre-code': colors.zinc[200], + '--tw-prose-pre-bg': colors.zinc[800], + '--tw-prose-th-borders': colors.zinc[300], + '--tw-prose-td-borders': colors.zinc[200], + '--tw-prose-invert-body': colors.zinc[300], + '--tw-prose-invert-headings': colors.white, + '--tw-prose-invert-lead': colors.zinc[400], + '--tw-prose-invert-links': colors.white, + '--tw-prose-invert-bold': colors.white, + '--tw-prose-invert-counters': colors.zinc[400], + '--tw-prose-invert-bullets': colors.zinc[600], + '--tw-prose-invert-hr': colors.zinc[700], + '--tw-prose-invert-quotes': colors.zinc[100], + '--tw-prose-invert-quote-borders': colors.zinc[700], + '--tw-prose-invert-captions': colors.zinc[400], + '--tw-prose-invert-code': colors.white, + '--tw-prose-invert-pre-code': colors.zinc[300], + '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', + '--tw-prose-invert-th-borders': colors.zinc[600], + '--tw-prose-invert-td-borders': colors.zinc[700] + } }, neutral: { css: { - "--tw-prose-body": colors.neutral[700], - "--tw-prose-headings": colors.neutral[900], - "--tw-prose-lead": colors.neutral[600], - "--tw-prose-links": colors.neutral[900], - "--tw-prose-bold": colors.neutral[900], - "--tw-prose-counters": colors.neutral[500], - "--tw-prose-bullets": colors.neutral[300], - "--tw-prose-hr": colors.neutral[200], - "--tw-prose-quotes": colors.neutral[900], - "--tw-prose-quote-borders": colors.neutral[200], - "--tw-prose-captions": colors.neutral[500], - "--tw-prose-code": colors.neutral[900], - "--tw-prose-pre-code": colors.neutral[200], - "--tw-prose-pre-bg": colors.neutral[800], - "--tw-prose-th-borders": colors.neutral[300], - "--tw-prose-td-borders": colors.neutral[200], - "--tw-prose-invert-body": colors.neutral[300], - "--tw-prose-invert-headings": colors.white, - "--tw-prose-invert-lead": colors.neutral[400], - "--tw-prose-invert-links": colors.white, - "--tw-prose-invert-bold": colors.white, - "--tw-prose-invert-counters": colors.neutral[400], - "--tw-prose-invert-bullets": colors.neutral[600], - "--tw-prose-invert-hr": colors.neutral[700], - "--tw-prose-invert-quotes": colors.neutral[100], - "--tw-prose-invert-quote-borders": colors.neutral[700], - "--tw-prose-invert-captions": colors.neutral[400], - "--tw-prose-invert-code": colors.white, - "--tw-prose-invert-pre-code": colors.neutral[300], - "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)", - "--tw-prose-invert-th-borders": colors.neutral[600], - "--tw-prose-invert-td-borders": colors.neutral[700], - }, + '--tw-prose-body': colors.neutral[700], + '--tw-prose-headings': colors.neutral[900], + '--tw-prose-lead': colors.neutral[600], + '--tw-prose-links': colors.neutral[900], + '--tw-prose-bold': colors.neutral[900], + '--tw-prose-counters': colors.neutral[500], + '--tw-prose-bullets': colors.neutral[300], + '--tw-prose-hr': colors.neutral[200], + '--tw-prose-quotes': colors.neutral[900], + '--tw-prose-quote-borders': colors.neutral[200], + '--tw-prose-captions': colors.neutral[500], + '--tw-prose-code': colors.neutral[900], + '--tw-prose-pre-code': colors.neutral[200], + '--tw-prose-pre-bg': colors.neutral[800], + '--tw-prose-th-borders': colors.neutral[300], + '--tw-prose-td-borders': colors.neutral[200], + '--tw-prose-invert-body': colors.neutral[300], + '--tw-prose-invert-headings': colors.white, + '--tw-prose-invert-lead': colors.neutral[400], + '--tw-prose-invert-links': colors.white, + '--tw-prose-invert-bold': colors.white, + '--tw-prose-invert-counters': colors.neutral[400], + '--tw-prose-invert-bullets': colors.neutral[600], + '--tw-prose-invert-hr': colors.neutral[700], + '--tw-prose-invert-quotes': colors.neutral[100], + '--tw-prose-invert-quote-borders': colors.neutral[700], + '--tw-prose-invert-captions': colors.neutral[400], + '--tw-prose-invert-code': colors.white, + '--tw-prose-invert-pre-code': colors.neutral[300], + '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', + '--tw-prose-invert-th-borders': colors.neutral[600], + '--tw-prose-invert-td-borders': colors.neutral[700] + } }, stone: { css: { - "--tw-prose-body": colors.stone[700], - "--tw-prose-headings": colors.stone[900], - "--tw-prose-lead": colors.stone[600], - "--tw-prose-links": colors.stone[900], - "--tw-prose-bold": colors.stone[900], - "--tw-prose-counters": colors.stone[500], - "--tw-prose-bullets": colors.stone[300], - "--tw-prose-hr": colors.stone[200], - "--tw-prose-quotes": colors.stone[900], - "--tw-prose-quote-borders": colors.stone[200], - "--tw-prose-captions": colors.stone[500], - "--tw-prose-code": colors.stone[900], - "--tw-prose-pre-code": colors.stone[200], - "--tw-prose-pre-bg": colors.stone[800], - "--tw-prose-th-borders": colors.stone[300], - "--tw-prose-td-borders": colors.stone[200], - "--tw-prose-invert-body": colors.stone[300], - "--tw-prose-invert-headings": colors.white, - "--tw-prose-invert-lead": colors.stone[400], - "--tw-prose-invert-links": colors.white, - "--tw-prose-invert-bold": colors.white, - "--tw-prose-invert-counters": colors.stone[400], - "--tw-prose-invert-bullets": colors.stone[600], - "--tw-prose-invert-hr": colors.stone[700], - "--tw-prose-invert-quotes": colors.stone[100], - "--tw-prose-invert-quote-borders": colors.stone[700], - "--tw-prose-invert-captions": colors.stone[400], - "--tw-prose-invert-code": colors.white, - "--tw-prose-invert-pre-code": colors.stone[300], - "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)", - "--tw-prose-invert-th-borders": colors.stone[600], - "--tw-prose-invert-td-borders": colors.stone[700], - }, + '--tw-prose-body': colors.stone[700], + '--tw-prose-headings': colors.stone[900], + '--tw-prose-lead': colors.stone[600], + '--tw-prose-links': colors.stone[900], + '--tw-prose-bold': colors.stone[900], + '--tw-prose-counters': colors.stone[500], + '--tw-prose-bullets': colors.stone[300], + '--tw-prose-hr': colors.stone[200], + '--tw-prose-quotes': colors.stone[900], + '--tw-prose-quote-borders': colors.stone[200], + '--tw-prose-captions': colors.stone[500], + '--tw-prose-code': colors.stone[900], + '--tw-prose-pre-code': colors.stone[200], + '--tw-prose-pre-bg': colors.stone[800], + '--tw-prose-th-borders': colors.stone[300], + '--tw-prose-td-borders': colors.stone[200], + '--tw-prose-invert-body': colors.stone[300], + '--tw-prose-invert-headings': colors.white, + '--tw-prose-invert-lead': colors.stone[400], + '--tw-prose-invert-links': colors.white, + '--tw-prose-invert-bold': colors.white, + '--tw-prose-invert-counters': colors.stone[400], + '--tw-prose-invert-bullets': colors.stone[600], + '--tw-prose-invert-hr': colors.stone[700], + '--tw-prose-invert-quotes': colors.stone[100], + '--tw-prose-invert-quote-borders': colors.stone[700], + '--tw-prose-invert-captions': colors.stone[400], + '--tw-prose-invert-code': colors.white, + '--tw-prose-invert-pre-code': colors.stone[300], + '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', + '--tw-prose-invert-th-borders': colors.stone[600], + '--tw-prose-invert-td-borders': colors.stone[700] + } }, // Link-only themes (for backward compatibility) red: { css: { - "--tw-prose-links": colors.red[600], - "--tw-prose-invert-links": colors.red[500], - }, + '--tw-prose-links': colors.red[600], + '--tw-prose-invert-links': colors.red[500] + } }, orange: { css: { - "--tw-prose-links": colors.orange[600], - "--tw-prose-invert-links": colors.orange[500], - }, + '--tw-prose-links': colors.orange[600], + '--tw-prose-invert-links': colors.orange[500] + } }, amber: { css: { - "--tw-prose-links": colors.amber[600], - "--tw-prose-invert-links": colors.amber[500], - }, + '--tw-prose-links': colors.amber[600], + '--tw-prose-invert-links': colors.amber[500] + } }, yellow: { css: { - "--tw-prose-links": colors.yellow[600], - "--tw-prose-invert-links": colors.yellow[500], - }, + '--tw-prose-links': colors.yellow[600], + '--tw-prose-invert-links': colors.yellow[500] + } }, lime: { css: { - "--tw-prose-links": colors.lime[600], - "--tw-prose-invert-links": colors.lime[500], - }, + '--tw-prose-links': colors.lime[600], + '--tw-prose-invert-links': colors.lime[500] + } }, green: { css: { - "--tw-prose-links": colors.green[600], - "--tw-prose-invert-links": colors.green[500], - }, + '--tw-prose-links': colors.green[600], + '--tw-prose-invert-links': colors.green[500] + } }, emerald: { css: { - "--tw-prose-links": colors.emerald[600], - "--tw-prose-invert-links": colors.emerald[500], - }, + '--tw-prose-links': colors.emerald[600], + '--tw-prose-invert-links': colors.emerald[500] + } }, teal: { css: { - "--tw-prose-links": colors.teal[600], - "--tw-prose-invert-links": colors.teal[500], - }, + '--tw-prose-links': colors.teal[600], + '--tw-prose-invert-links': colors.teal[500] + } }, cyan: { css: { - "--tw-prose-links": colors.cyan[600], - "--tw-prose-invert-links": colors.cyan[500], - }, + '--tw-prose-links': colors.cyan[600], + '--tw-prose-invert-links': colors.cyan[500] + } }, sky: { css: { - "--tw-prose-links": colors.sky[600], - "--tw-prose-invert-links": colors.sky[500], - }, + '--tw-prose-links': colors.sky[600], + '--tw-prose-invert-links': colors.sky[500] + } }, blue: { css: { - "--tw-prose-links": colors.blue[600], - "--tw-prose-invert-links": colors.blue[500], - }, + '--tw-prose-links': colors.blue[600], + '--tw-prose-invert-links': colors.blue[500] + } }, indigo: { css: { - "--tw-prose-links": colors.indigo[600], - "--tw-prose-invert-links": colors.indigo[500], - }, + '--tw-prose-links': colors.indigo[600], + '--tw-prose-invert-links': colors.indigo[500] + } }, violet: { css: { - "--tw-prose-links": colors.violet[600], - "--tw-prose-invert-links": colors.violet[500], - }, + '--tw-prose-links': colors.violet[600], + '--tw-prose-invert-links': colors.violet[500] + } }, purple: { css: { - "--tw-prose-links": colors.purple[600], - "--tw-prose-invert-links": colors.purple[500], - }, + '--tw-prose-links': colors.purple[600], + '--tw-prose-invert-links': colors.purple[500] + } }, fuchsia: { css: { - "--tw-prose-links": colors.fuchsia[600], - "--tw-prose-invert-links": colors.fuchsia[500], - }, + '--tw-prose-links': colors.fuchsia[600], + '--tw-prose-invert-links': colors.fuchsia[500] + } }, pink: { css: { - "--tw-prose-links": colors.pink[600], - "--tw-prose-invert-links": colors.pink[500], - }, + '--tw-prose-links': colors.pink[600], + '--tw-prose-invert-links': colors.pink[500] + } }, rose: { css: { - "--tw-prose-links": colors.rose[600], - "--tw-prose-invert-links": colors.rose[500], - }, - }, + '--tw-prose-links': colors.rose[600], + '--tw-prose-invert-links': colors.rose[500] + } + } }; -const plugin = require("tailwindcss/plugin"); +const plugin = require('tailwindcss/plugin'); /** @type {import('tailwindcss').Config} */ module.exports = { @@ -1352,6 +1352,8 @@ module.exports = { '85%, 90%': { transform: 'translateX(9ch)' }, '95%, 100%': { transform: 'translateX(11ch)' } }, + // REQUIRED BY DEISGN COMPONENT + // MODAL fadeIn: { '0%': { opacity: 0 }, '100%': { opacity: 1 } @@ -1366,6 +1368,48 @@ module.exports = { transform: 'translate(-50%, -50%) scale(1)' } }, + // Dropdown + slideUpAndFade: { + from: { + opacity: 0, + transform: ' translateY(2px)' + }, + to: { + opacity: 1, + transform: ' translateY(0)' + } + }, + slideRightAndFade: { + from: { + opacity: 0, + transform: ' translateX(-2px)' + }, + to: { + opacity: 1, + transform: ' translateX(0)' + } + }, + slideDownAndFade: { + from: { + opacity: 0, + transform: ' translateY(-2px)' + }, + to: { + opacity: 1, + transform: ' translateY(0)' + } + }, + slideLeftAndFade: { + from: { + opacity: 0, + transform: ' translateX(2px)' + }, + to: { + opacity: 1, + transform: ' translateX(0)' + } + }, + // END spin: { '0%': { transform: 'rotate(0deg)' }, '40%': { transform: 'rotate(360deg)' }, @@ -1427,7 +1471,16 @@ module.exports = { } }, animation: { + // Design Lib + // MODAL fadeIn: 'fadeIn 100ms cubic-bezier(0.16, 1, 0.3, 1)', + popIn: 'popIn 150ms cubic-bezier(0.16, 1, 0.3, 1);', + // Dropdown + slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)', + slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)', + slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)', + slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)', + // END bounce: 'bounce 1000ms ease-in-out infinite', spin: 'spin 4000ms ease-in-out infinite', cursor: 'cursor .6s linear infinite alternate', @@ -1438,8 +1491,7 @@ module.exports = { popup: 'popup 300ms ease-in-out', popdown: 'popdown 300ms ease-in-out', popright: 'popright 100ms ease-in-out', - popleft: 'popleft 100ms ease-in-out', - popIn: 'popIn 150ms cubic-bezier(0.16, 1, 0.3, 1);' + popleft: 'popleft 100ms ease-in-out' }, fontSize: { xxxs: '.23rem',