diff --git a/docs/content/docs/getting-started/mantine.mdx b/docs/content/docs/getting-started/mantine.mdx index 293b21af4b..c50ef41e7a 100644 --- a/docs/content/docs/getting-started/mantine.mdx +++ b/docs/content/docs/getting-started/mantine.mdx @@ -9,17 +9,27 @@ imageTitle: Mantine rich text editor using BlockNote [Mantine](https://mantine.dev/) is an open-source collection of React components. ```console tab="npm" +npm install @mantine/core @mantine/hooks @mantine/util npm install @blocknote/core @blocknote/react @blocknote/mantine ``` ```console tab="pnpm" +pnpm add @mantine/core @mantine/hooks @mantine/util pnpm add @blocknote/core @blocknote/react @blocknote/mantine ``` ```console tab="bun" +bun add @mantine/core @mantine/hooks @mantine/util bun add @blocknote/core @blocknote/react @blocknote/mantine ``` To use BlockNote with Mantine, you can import `BlockNoteView` from `@blocknote/mantine` and the stylesheet from `@blocknote/mantine/style.css`. + + If your application already uses Mantine UI, you should use the + `@blocknote/mantine/blocknoteStyles.css` stylesheet instead. It only contains + the styles added by BlockNote on top of the Mantine core styles, whereas + `@blocknote/mantine/style.css` includes both. + + diff --git a/docs/package.json b/docs/package.json index f3b187a93f..17594d86ab 100644 --- a/docs/package.json +++ b/docs/package.json @@ -41,6 +41,8 @@ "@liveblocks/react-tiptap": "3.7.1-tiptap3", "@liveblocks/react-ui": "3.7.1-tiptap3", "@mantine/core": "^8.3.2", + "@mantine/hooks": "^8.3.2", + "@mantine/utils": "^6.0.22", "@mui/icons-material": "^5.16.1", "@mui/material": "^5.16.1", "@polar-sh/better-auth": "^1.0.2", diff --git a/packages/mantine/package.json b/packages/mantine/package.json index 2c2256e61b..eed0453847 100644 --- a/packages/mantine/package.json +++ b/packages/mantine/package.json @@ -43,9 +43,14 @@ "require": "./dist/blocknote-mantine.cjs" }, "./style.css": { - "import": "./dist/style.css", - "require": "./dist/style.css", - "style": "./dist/style.css" + "import": "./src/style.css", + "require": "./src/style.css", + "style": "./src/style.css" + }, + "./blocknoteStyles.css": { + "import": "./src/blocknoteStyles.css", + "require": "./src/blocknoteStyles.css", + "style": "./src/blocknoteStyles.css" } }, "scripts": { @@ -58,9 +63,6 @@ "dependencies": { "@blocknote/core": "0.39.1", "@blocknote/react": "0.39.1", - "@mantine/core": "^8.3.2", - "@mantine/hooks": "^8.3.2", - "@mantine/utils": "^6.0.22", "react-icons": "^5.2.1" }, "devDependencies": { @@ -78,6 +80,9 @@ "vite-plugin-externalize-deps": "^0.8.0" }, "peerDependencies": { + "@mantine/core": "^8.3.2", + "@mantine/hooks": "^8.3.2", + "@mantine/utils": "^6.0.22", "react": "^18.0 || ^19.0 || >= 19.0.0-rc", "react-dom": "^18.0 || ^19.0 || >= 19.0.0-rc" }, diff --git a/packages/mantine/src/BlockNoteView.tsx b/packages/mantine/src/BlockNoteView.tsx index 37f40a1728..3b92da582a 100644 --- a/packages/mantine/src/BlockNoteView.tsx +++ b/packages/mantine/src/BlockNoteView.tsx @@ -18,7 +18,6 @@ import { Theme, } from "./BlockNoteTheme.js"; import { components } from "./components.js"; -import "./style.css"; export const BlockNoteView = < BSchema extends BlockSchema, @@ -98,9 +97,10 @@ export const BlockNoteView = < return ( [draggable="true"] { + display: flex; +} + +.bn-side-menu .mantine-Menu-dropdown { + min-width: 100px; + padding: 2px; + position: absolute; +} + +/* Image Panel styling*/ +.bn-mantine .bn-panel { + background-color: var(--bn-colors-menu-background); + border: var(--bn-border); + border-radius: var(--bn-border-radius-medium); + box-shadow: var(--bn-shadow-medium); + padding: 2px; + width: 500px; +} + +.bn-mantine .bn-panel .bn-tab-panel { + align-items: center; + display: flex; + flex-direction: column; + gap: 8px; + width: 100%; +} + +.bn-panel .mantine-TextInput-root, +.bn-panel .mantine-FileInput-root { + width: 100%; +} + +.bn-panel .mantine-Button-root { + background-color: var(--bn-colors-menu-background); + border: solid var(--bn-colors-border) 1px; + border-radius: var(--bn-border-radius-small); + color: var(--bn-colors-menu-text); + height: 32px; + width: 60%; +} + +.bn-panel .mantine-Button-root:hover { + background-color: var(--bn-colors-hovered-background); +} + +.bn-panel .mantine-Text-root { + text-align: center; +} + +/* Table Handle styling */ +.bn-mantine .bn-table-handle, +.bn-mantine .bn-extend-button, +.bn-mantine .bn-table-cell-handle { + align-items: center; + background-color: var(--bn-colors-menu-background); + border: var(--bn-border); + border-radius: var(--bn-border-radius-small); + box-shadow: var(--bn-shadow-light); + color: var(--bn-colors-side-menu); + cursor: grab; + display: flex; + height: fit-content; + justify-content: center; + overflow: visible; + padding: 0; +} + +.bn-mantine .bn-table-cell-handle { + padding: 0 4px; +} + +.bn-mantine .bn-table-handle svg { + margin-inline: -4px; +} + +.bn-mantine .bn-table-handle-not-draggable { + cursor: pointer; +} + +.bn-mantine .bn-table-handle:hover, +.bn-mantine .bn-table-handle-dragging, +.bn-mantine .bn-extend-button:hover, +.bn-mantine .bn-extend-button-editing, +.bn-mantine .bn-table-cell-handle:hover { + background-color: var(--bn-colors-hovered-background); +} + +.bn-mantine .bn-extend-button-add-remove-columns { + height: 100%; + width: 18px; + margin-left: 4px; + cursor: col-resize; +} + +.bn-mantine .bn-extend-button-add-remove-rows { + height: 18px; + width: 100%; + margin-top: 4px; + cursor: row-resize; +} + +/* Drag Handle & Table Handle Menu styling */ +.bn-mantine .bn-drag-handle-menu, +.bn-mantine .bn-table-handle-menu { + overflow: visible; +} + +/* Tooltip styling */ +.bn-mantine .bn-tooltip { + background-color: var(--bn-colors-tooltip-background); + border: var(--bn-border); + border-radius: var(--bn-border-radius-medium); + box-shadow: var(--bn-shadow-medium); + color: var(--bn-colors-tooltip-text); + padding: 4px 10px; + text-align: center; +} + +/* Additional menu styles */ +.bn-mantine .bn-tick-space { + padding: 0; + width: 20px; +} + +/* Comment styling */ +.bn-mantine .bn-thread { + background-color: var(--bn-colors-menu-background); + border: var(--bn-border); + border-radius: var(--bn-border-radius-medium); + box-shadow: var(--bn-shadow-medium); + color: var(--bn-colors-menu-text); + display: flex; + flex-direction: column; + gap: 16px; + min-width: 350px; + overflow: visible; +} + +.bn-mantine .bn-threads-sidebar .bn-thread { + box-shadow: none; +} + +.bn-mantine .bn-thread:not(.selected) { + cursor: pointer; +} + +.bn-mantine .bn-thread-comments, +.bn-mantine .bn-thread-composer { + display: flex; + flex-direction: column; + margin: 0; + padding: 0; +} + +.bn-mantine .bn-thread-comments { + gap: 1rem; +} + +.bn-mantine .bn-thread-comment { + align-items: flex-start; + flex-direction: column; + gap: 0.25rem; +} + +.bn-mantine .bn-thread-comment > .mantine-Group-root { + gap: 12px; +} + +.bn-mantine .bn-thread-comment p { + color: var(--bn-colors-menu-text); +} + +.bn-mantine .bn-thread .bn-header-text, +.bn-mantine .bn-thread-comment .bn-resolved-text { + font-size: 0.8rem; + font-style: italic; +} + +.bn-mantine .bn-comment-actions-wrapper { + width: 100%; + display: flex; + justify-content: flex-end; +} + +/* Comment action toolbar styling */ +.bn-mantine .bn-action-toolbar { + align-self: flex-end; + background-color: var(--bn-colors-menu-background); + border: var(--bn-border); + border-radius: var(--bn-border-radius-medium); + gap: 0; + padding: 2px; +} + +.bn-action-toolbar .mantine-Button-root, +.bn-action-toolbar .mantine-ActionIcon-root { + background-color: var(--bn-colors-menu-background); + border: none; + border-radius: var(--bn-border-radius-small); + color: var(--bn-colors-menu-text); +} + +.bn-action-toolbar .mantine-Button-root:hover, +.bn-action-toolbar .mantine-ActionIcon-root:hover { + background-color: var(--bn-colors-hovered-background); + border: none; + color: var(--bn-colors-hovered-text); +} + +.bn-action-toolbar .mantine-Button-root[data-selected], +.bn-action-toolbar .mantine-ActionIcon-root[data-selected] { + background-color: var(--bn-colors-selected-background); + border: none; + color: var(--bn-colors-selected-text); +} + +.bn-action-toolbar .mantine-Button-root[data-disabled], +.bn-action-toolbar .mantine-ActionIcon-root[data-disabled] { + background-color: var(--bn-colors-disabled-background); + border: none; + color: var(--bn-colors-disabled-text); +} + +.bn-mantine .bn-action-toolbar .mantine-Menu-itemLabel { + font-size: 12px; +} + +/* Badge styling */ +.bn-mantine .bn-badge-group { + display: flex; + gap: 4px; + justify-content: flex-start; + width: 100%; +} + +.bn-mantine .bn-badge { + flex-grow: 0; +} + +.bn-mantine .bn-badge .mantine-Chip-label { + padding: 0 8px; +} + +.bn-mantine .bn-badge .mantine-Chip-label:not([data-checked="true"]) { + background-color: var(--bn-colors-menu-background); + border: var(--bn-border); + color: var(--bn-colors-menu-text); +} + +.bn-mantine .bn-badge .mantine-Chip-label:hover { + border: 1px solid var(--mantine-primary-color-filled-hover); + color: var(--mantine-primary-color-filled-hover); +} + +.bn-mantine + .bn-badge + .mantine-Chip-label + > span:not(.mantine-Chip-iconWrapper) { + display: inline-flex; + gap: 4px; +} + +.bn-mantine + .bn-badge + .mantine-Chip-label + > span:not(.mantine-Chip-iconWrapper) + > span { + align-items: center; + display: inline-flex; + justify-content: center; +} + +/* Combobox styling */ +.bn-mantine .bn-combobox-input, +.bn-mantine .bn-combobox-items:not(:empty) { + background-color: var(--bn-colors-menu-background); + border: var(--bn-border); + border-radius: var(--bn-border-radius-medium); + box-shadow: var(--bn-shadow-medium); + color: var(--bn-colors-menu-text); + gap: 4px; + min-width: 145px; + padding: 2px; +} + +.bn-mantine .bn-combobox-input .bn-combobox-icon, +.bn-mantine .bn-combobox-input .bn-combobox-right-section { + align-items: center; + display: flex; + justify-content: center; +} + +.bn-mantine .bn-combobox-input .bn-combobox-error { + color: var(--bn-colors-highlights-red-background); +} + +/* We need to get rid of the checked icon - you can set the icon prop to an +empty element (<>), but even so Mantine leaves extra space for the icon, so +we just don't display it in CSS instead. */ +.bn-mantine .bn-badge .mantine-Chip-iconWrapper { + display: none; +} diff --git a/packages/mantine/src/components.tsx b/packages/mantine/src/components.tsx index 7d01c5c936..d5d01f40fa 100644 --- a/packages/mantine/src/components.tsx +++ b/packages/mantine/src/components.tsx @@ -21,7 +21,6 @@ import { PanelTextInput } from "./panel/PanelTextInput.js"; import { Popover, PopoverContent, PopoverTrigger } from "./popover/Popover.js"; import { SideMenu } from "./sideMenu/SideMenu.js"; import { SideMenuButton } from "./sideMenu/SideMenuButton.js"; -import "./style.css"; import { SuggestionMenu } from "./suggestionMenu/SuggestionMenu.js"; import { SuggestionMenuEmptyItem } from "./suggestionMenu/SuggestionMenuEmptyItem.js"; import { SuggestionMenuItem } from "./suggestionMenu/SuggestionMenuItem.js"; diff --git a/packages/mantine/src/mantineStyles.css b/packages/mantine/src/mantineStyles.css index da5d60f0ef..6c5db125a7 100644 --- a/packages/mantine/src/mantineStyles.css +++ b/packages/mantine/src/mantineStyles.css @@ -130,3 +130,533 @@ -webkit-text-size-adjust: 100%; } } + +/* Mantine default CSS variables, scoped to .bn-mantine element. */ +/* https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/default-css-variables.css */ +.bn-mantine { + --mantine-z-index-app: 100; + --mantine-z-index-modal: 200; + --mantine-z-index-popover: 300; + --mantine-z-index-overlay: 400; + --mantine-z-index-max: 9999; + --mantine-scale: 1; + --mantine-cursor-type: default; + --mantine-webkit-font-smoothing: antialiased; + --mantine-moz-font-smoothing: grayscale; + --mantine-color-white: #fff; + --mantine-color-black: #000; + --mantine-line-height: 1.55; + --mantine-font-family: + -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, + sans-serif, Apple Color Emoji, Segoe UI Emoji; + --mantine-font-family-monospace: + ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, + Courier New, monospace; + --mantine-font-family-headings: + -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, + sans-serif, Apple Color Emoji, Segoe UI Emoji; + --mantine-heading-font-weight: 700; + --mantine-heading-text-wrap: wrap; + --mantine-radius-default: calc(0.25rem * var(--mantine-scale)); + --mantine-primary-color-filled: var(--mantine-color-blue-filled); + --mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover); + --mantine-primary-color-light: var(--mantine-color-blue-light); + --mantine-primary-color-light-hover: var(--mantine-color-blue-light-hover); + --mantine-primary-color-light-color: var(--mantine-color-blue-light-color); + --mantine-breakpoint-xs: 36em; + --mantine-breakpoint-sm: 48em; + --mantine-breakpoint-md: 62em; + --mantine-breakpoint-lg: 75em; + --mantine-breakpoint-xl: 88em; + --mantine-spacing-xs: calc(0.625rem * var(--mantine-scale)); + --mantine-spacing-sm: calc(0.75rem * var(--mantine-scale)); + --mantine-spacing-md: calc(1rem * var(--mantine-scale)); + --mantine-spacing-lg: calc(1.25rem * var(--mantine-scale)); + --mantine-spacing-xl: calc(2rem * var(--mantine-scale)); + --mantine-font-size-xs: calc(0.75rem * var(--mantine-scale)); + --mantine-font-size-sm: calc(0.875rem * var(--mantine-scale)); + --mantine-font-size-md: calc(1rem * var(--mantine-scale)); + --mantine-font-size-lg: calc(1.125rem * var(--mantine-scale)); + --mantine-font-size-xl: calc(1.25rem * var(--mantine-scale)); + --mantine-line-height-xs: 1.4; + --mantine-line-height-sm: 1.45; + --mantine-line-height-md: 1.55; + --mantine-line-height-lg: 1.6; + --mantine-line-height-xl: 1.65; + --mantine-shadow-xs: + 0 calc(0.0625rem * var(--mantine-scale)) + calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), + 0 calc(0.0625rem * var(--mantine-scale)) + calc(0.125rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1); + --mantine-shadow-sm: + 0 calc(0.0625rem * var(--mantine-scale)) + calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), + rgba(0, 0, 0, 0.05) 0 calc(0.625rem * var(--mantine-scale)) + calc(0.9375rem * var(--mantine-scale)) + calc(-0.3125rem * var(--mantine-scale)), + rgba(0, 0, 0, 0.04) 0 calc(0.4375rem * var(--mantine-scale)) + calc(0.4375rem * var(--mantine-scale)) + calc(-0.3125rem * var(--mantine-scale)); + --mantine-shadow-md: + 0 calc(0.0625rem * var(--mantine-scale)) + calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), + rgba(0, 0, 0, 0.05) 0 calc(1.25rem * var(--mantine-scale)) + calc(1.5625rem * var(--mantine-scale)) + calc(-0.3125rem * var(--mantine-scale)), + rgba(0, 0, 0, 0.04) 0 calc(0.625rem * var(--mantine-scale)) + calc(0.625rem * var(--mantine-scale)) + calc(-0.3125rem * var(--mantine-scale)); + --mantine-shadow-lg: + 0 calc(0.0625rem * var(--mantine-scale)) + calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), + rgba(0, 0, 0, 0.05) 0 calc(1.75rem * var(--mantine-scale)) + calc(1.4375rem * var(--mantine-scale)) + calc(-0.4375rem * var(--mantine-scale)), + rgba(0, 0, 0, 0.04) 0 calc(0.75rem * var(--mantine-scale)) + calc(0.75rem * var(--mantine-scale)) + calc(-0.4375rem * var(--mantine-scale)); + --mantine-shadow-xl: + 0 calc(0.0625rem * var(--mantine-scale)) + calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), + rgba(0, 0, 0, 0.05) 0 calc(2.25rem * var(--mantine-scale)) + calc(1.75rem * var(--mantine-scale)) + calc(-0.4375rem * var(--mantine-scale)), + rgba(0, 0, 0, 0.04) 0 calc(1.0625rem * var(--mantine-scale)) + calc(1.0625rem * var(--mantine-scale)) + calc(-0.4375rem * var(--mantine-scale)); + --mantine-radius-xs: calc(0.125rem * var(--mantine-scale)); + --mantine-radius-sm: calc(0.25rem * var(--mantine-scale)); + --mantine-radius-md: calc(0.5rem * var(--mantine-scale)); + --mantine-radius-lg: calc(1rem * var(--mantine-scale)); + --mantine-radius-xl: calc(2rem * var(--mantine-scale)); + --mantine-primary-color-0: var(--mantine-color-blue-0); + --mantine-primary-color-1: var(--mantine-color-blue-1); + --mantine-primary-color-2: var(--mantine-color-blue-2); + --mantine-primary-color-3: var(--mantine-color-blue-3); + --mantine-primary-color-4: var(--mantine-color-blue-4); + --mantine-primary-color-5: var(--mantine-color-blue-5); + --mantine-primary-color-6: var(--mantine-color-blue-6); + --mantine-primary-color-7: var(--mantine-color-blue-7); + --mantine-primary-color-8: var(--mantine-color-blue-8); + --mantine-primary-color-9: var(--mantine-color-blue-9); + --mantine-color-dark-0: #c9c9c9; + --mantine-color-dark-1: #b8b8b8; + --mantine-color-dark-2: #828282; + --mantine-color-dark-3: #696969; + --mantine-color-dark-4: #424242; + --mantine-color-dark-5: #3b3b3b; + --mantine-color-dark-6: #2e2e2e; + --mantine-color-dark-7: #242424; + --mantine-color-dark-8: #1f1f1f; + --mantine-color-dark-9: #141414; + --mantine-color-gray-0: #f8f9fa; + --mantine-color-gray-1: #f1f3f5; + --mantine-color-gray-2: #e9ecef; + --mantine-color-gray-3: #dee2e6; + --mantine-color-gray-4: #ced4da; + --mantine-color-gray-5: #adb5bd; + --mantine-color-gray-6: #868e96; + --mantine-color-gray-7: #495057; + --mantine-color-gray-8: #343a40; + --mantine-color-gray-9: #212529; + --mantine-color-red-0: #fff5f5; + --mantine-color-red-1: #ffe3e3; + --mantine-color-red-2: #ffc9c9; + --mantine-color-red-3: #ffa8a8; + --mantine-color-red-4: #ff8787; + --mantine-color-red-5: #ff6b6b; + --mantine-color-red-6: #fa5252; + --mantine-color-red-7: #f03e3e; + --mantine-color-red-8: #e03131; + --mantine-color-red-9: #c92a2a; + --mantine-color-pink-0: #fff0f6; + --mantine-color-pink-1: #ffdeeb; + --mantine-color-pink-2: #fcc2d7; + --mantine-color-pink-3: #faa2c1; + --mantine-color-pink-4: #f783ac; + --mantine-color-pink-5: #f06595; + --mantine-color-pink-6: #e64980; + --mantine-color-pink-7: #d6336c; + --mantine-color-pink-8: #c2255c; + --mantine-color-pink-9: #a61e4d; + --mantine-color-grape-0: #f8f0fc; + --mantine-color-grape-1: #f3d9fa; + --mantine-color-grape-2: #eebefa; + --mantine-color-grape-3: #e599f7; + --mantine-color-grape-4: #da77f2; + --mantine-color-grape-5: #cc5de8; + --mantine-color-grape-6: #be4bdb; + --mantine-color-grape-7: #ae3ec9; + --mantine-color-grape-8: #9c36b5; + --mantine-color-grape-9: #862e9c; + --mantine-color-violet-0: #f3f0ff; + --mantine-color-violet-1: #e5dbff; + --mantine-color-violet-2: #d0bfff; + --mantine-color-violet-3: #b197fc; + --mantine-color-violet-4: #9775fa; + --mantine-color-violet-5: #845ef7; + --mantine-color-violet-6: #7950f2; + --mantine-color-violet-7: #7048e8; + --mantine-color-violet-8: #6741d9; + --mantine-color-violet-9: #5f3dc4; + --mantine-color-indigo-0: #edf2ff; + --mantine-color-indigo-1: #dbe4ff; + --mantine-color-indigo-2: #bac8ff; + --mantine-color-indigo-3: #91a7ff; + --mantine-color-indigo-4: #748ffc; + --mantine-color-indigo-5: #5c7cfa; + --mantine-color-indigo-6: #4c6ef5; + --mantine-color-indigo-7: #4263eb; + --mantine-color-indigo-8: #3b5bdb; + --mantine-color-indigo-9: #364fc7; + --mantine-color-blue-0: #e7f5ff; + --mantine-color-blue-1: #d0ebff; + --mantine-color-blue-2: #a5d8ff; + --mantine-color-blue-3: #74c0fc; + --mantine-color-blue-4: #4dabf7; + --mantine-color-blue-5: #339af0; + --mantine-color-blue-6: #228be6; + --mantine-color-blue-7: #1c7ed6; + --mantine-color-blue-8: #1971c2; + --mantine-color-blue-9: #1864ab; + --mantine-color-cyan-0: #e3fafc; + --mantine-color-cyan-1: #c5f6fa; + --mantine-color-cyan-2: #99e9f2; + --mantine-color-cyan-3: #66d9e8; + --mantine-color-cyan-4: #3bc9db; + --mantine-color-cyan-5: #22b8cf; + --mantine-color-cyan-6: #15aabf; + --mantine-color-cyan-7: #1098ad; + --mantine-color-cyan-8: #0c8599; + --mantine-color-cyan-9: #0b7285; + --mantine-color-teal-0: #e6fcf5; + --mantine-color-teal-1: #c3fae8; + --mantine-color-teal-2: #96f2d7; + --mantine-color-teal-3: #63e6be; + --mantine-color-teal-4: #38d9a9; + --mantine-color-teal-5: #20c997; + --mantine-color-teal-6: #12b886; + --mantine-color-teal-7: #0ca678; + --mantine-color-teal-8: #099268; + --mantine-color-teal-9: #087f5b; + --mantine-color-green-0: #ebfbee; + --mantine-color-green-1: #d3f9d8; + --mantine-color-green-2: #b2f2bb; + --mantine-color-green-3: #8ce99a; + --mantine-color-green-4: #69db7c; + --mantine-color-green-5: #51cf66; + --mantine-color-green-6: #40c057; + --mantine-color-green-7: #37b24d; + --mantine-color-green-8: #2f9e44; + --mantine-color-green-9: #2b8a3e; + --mantine-color-lime-0: #f4fce3; + --mantine-color-lime-1: #e9fac8; + --mantine-color-lime-2: #d8f5a2; + --mantine-color-lime-3: #c0eb75; + --mantine-color-lime-4: #a9e34b; + --mantine-color-lime-5: #94d82d; + --mantine-color-lime-6: #82c91e; + --mantine-color-lime-7: #74b816; + --mantine-color-lime-8: #66a80f; + --mantine-color-lime-9: #5c940d; + --mantine-color-yellow-0: #fff9db; + --mantine-color-yellow-1: #fff3bf; + --mantine-color-yellow-2: #ffec99; + --mantine-color-yellow-3: #ffe066; + --mantine-color-yellow-4: #ffd43b; + --mantine-color-yellow-5: #fcc419; + --mantine-color-yellow-6: #fab005; + --mantine-color-yellow-7: #f59f00; + --mantine-color-yellow-8: #f08c00; + --mantine-color-yellow-9: #e67700; + --mantine-color-orange-0: #fff4e6; + --mantine-color-orange-1: #ffe8cc; + --mantine-color-orange-2: #ffd8a8; + --mantine-color-orange-3: #ffc078; + --mantine-color-orange-4: #ffa94d; + --mantine-color-orange-5: #ff922b; + --mantine-color-orange-6: #fd7e14; + --mantine-color-orange-7: #f76707; + --mantine-color-orange-8: #e8590c; + --mantine-color-orange-9: #d9480f; + --mantine-h1-font-size: calc(2.125rem * var(--mantine-scale)); + --mantine-h1-line-height: 1.3; + --mantine-h1-font-weight: 700; + --mantine-h2-font-size: calc(1.625rem * var(--mantine-scale)); + --mantine-h2-line-height: 1.35; + --mantine-h2-font-weight: 700; + --mantine-h3-font-size: calc(1.375rem * var(--mantine-scale)); + --mantine-h3-line-height: 1.4; + --mantine-h3-font-weight: 700; + --mantine-h4-font-size: calc(1.125rem * var(--mantine-scale)); + --mantine-h4-line-height: 1.45; + --mantine-h4-font-weight: 700; + --mantine-h5-font-size: calc(1rem * var(--mantine-scale)); + --mantine-h5-line-height: 1.5; + --mantine-h5-font-weight: 700; + --mantine-h6-font-size: calc(0.875rem * var(--mantine-scale)); + --mantine-h6-line-height: 1.5; + --mantine-h6-font-weight: 700; +} + +.bn-mantine[data-mantine-color-scheme="dark"] { + --mantine-color-scheme: dark; + --mantine-primary-color-contrast: var(--mantine-color-white); + --mantine-color-bright: var(--mantine-color-white); + --mantine-color-text: var(--mantine-color-dark-0); + --mantine-color-body: var(--mantine-color-dark-7); + --mantine-color-error: var(--mantine-color-red-8); + --mantine-color-placeholder: var(--mantine-color-dark-3); + --mantine-color-anchor: var(--mantine-color-blue-4); + --mantine-color-default: var(--mantine-color-dark-6); + --mantine-color-default-hover: var(--mantine-color-dark-5); + --mantine-color-default-color: var(--mantine-color-white); + --mantine-color-default-border: var(--mantine-color-dark-4); + --mantine-color-dimmed: var(--mantine-color-dark-2); + --mantine-color-disabled: var(--mantine-color-dark-6); + --mantine-color-disabled-color: var(--mantine-color-dark-3); + --mantine-color-disabled-border: var(--mantine-color-dark-4); + --mantine-color-dark-text: var(--mantine-color-dark-4); + --mantine-color-dark-filled: var(--mantine-color-dark-8); + --mantine-color-dark-filled-hover: var(--mantine-color-dark-9); + --mantine-color-dark-light: rgba(46, 46, 46, 0.15); + --mantine-color-dark-light-hover: rgba(46, 46, 46, 0.2); + --mantine-color-dark-light-color: var(--mantine-color-dark-3); + --mantine-color-dark-outline: var(--mantine-color-dark-4); + --mantine-color-dark-outline-hover: rgba(66, 66, 66, 0.05); + --mantine-color-gray-text: var(--mantine-color-gray-4); + --mantine-color-gray-filled: var(--mantine-color-gray-8); + --mantine-color-gray-filled-hover: var(--mantine-color-gray-9); + --mantine-color-gray-light: rgba(134, 142, 150, 0.15); + --mantine-color-gray-light-hover: rgba(134, 142, 150, 0.2); + --mantine-color-gray-light-color: var(--mantine-color-gray-3); + --mantine-color-gray-outline: var(--mantine-color-gray-4); + --mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05); + --mantine-color-red-text: var(--mantine-color-red-4); + --mantine-color-red-filled: var(--mantine-color-red-8); + --mantine-color-red-filled-hover: var(--mantine-color-red-9); + --mantine-color-red-light: rgba(250, 82, 82, 0.15); + --mantine-color-red-light-hover: rgba(250, 82, 82, 0.2); + --mantine-color-red-light-color: var(--mantine-color-red-3); + --mantine-color-red-outline: var(--mantine-color-red-4); + --mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05); + --mantine-color-pink-text: var(--mantine-color-pink-4); + --mantine-color-pink-filled: var(--mantine-color-pink-8); + --mantine-color-pink-filled-hover: var(--mantine-color-pink-9); + --mantine-color-pink-light: rgba(230, 73, 128, 0.15); + --mantine-color-pink-light-hover: rgba(230, 73, 128, 0.2); + --mantine-color-pink-light-color: var(--mantine-color-pink-3); + --mantine-color-pink-outline: var(--mantine-color-pink-4); + --mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05); + --mantine-color-grape-text: var(--mantine-color-grape-4); + --mantine-color-grape-filled: var(--mantine-color-grape-8); + --mantine-color-grape-filled-hover: var(--mantine-color-grape-9); + --mantine-color-grape-light: rgba(190, 75, 219, 0.15); + --mantine-color-grape-light-hover: rgba(190, 75, 219, 0.2); + --mantine-color-grape-light-color: var(--mantine-color-grape-3); + --mantine-color-grape-outline: var(--mantine-color-grape-4); + --mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05); + --mantine-color-violet-text: var(--mantine-color-violet-4); + --mantine-color-violet-filled: var(--mantine-color-violet-8); + --mantine-color-violet-filled-hover: var(--mantine-color-violet-9); + --mantine-color-violet-light: rgba(121, 80, 242, 0.15); + --mantine-color-violet-light-hover: rgba(121, 80, 242, 0.2); + --mantine-color-violet-light-color: var(--mantine-color-violet-3); + --mantine-color-violet-outline: var(--mantine-color-violet-4); + --mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05); + --mantine-color-indigo-text: var(--mantine-color-indigo-4); + --mantine-color-indigo-filled: var(--mantine-color-indigo-8); + --mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9); + --mantine-color-indigo-light: rgba(76, 110, 245, 0.15); + --mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.2); + --mantine-color-indigo-light-color: var(--mantine-color-indigo-3); + --mantine-color-indigo-outline: var(--mantine-color-indigo-4); + --mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05); + --mantine-color-blue-text: var(--mantine-color-blue-4); + --mantine-color-blue-filled: var(--mantine-color-blue-8); + --mantine-color-blue-filled-hover: var(--mantine-color-blue-9); + --mantine-color-blue-light: rgba(34, 139, 230, 0.15); + --mantine-color-blue-light-hover: rgba(34, 139, 230, 0.2); + --mantine-color-blue-light-color: var(--mantine-color-blue-3); + --mantine-color-blue-outline: var(--mantine-color-blue-4); + --mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05); + --mantine-color-cyan-text: var(--mantine-color-cyan-4); + --mantine-color-cyan-filled: var(--mantine-color-cyan-8); + --mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9); + --mantine-color-cyan-light: rgba(21, 170, 191, 0.15); + --mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.2); + --mantine-color-cyan-light-color: var(--mantine-color-cyan-3); + --mantine-color-cyan-outline: var(--mantine-color-cyan-4); + --mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05); + --mantine-color-teal-text: var(--mantine-color-teal-4); + --mantine-color-teal-filled: var(--mantine-color-teal-8); + --mantine-color-teal-filled-hover: var(--mantine-color-teal-9); + --mantine-color-teal-light: rgba(18, 184, 134, 0.15); + --mantine-color-teal-light-hover: rgba(18, 184, 134, 0.2); + --mantine-color-teal-light-color: var(--mantine-color-teal-3); + --mantine-color-teal-outline: var(--mantine-color-teal-4); + --mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05); + --mantine-color-green-text: var(--mantine-color-green-4); + --mantine-color-green-filled: var(--mantine-color-green-8); + --mantine-color-green-filled-hover: var(--mantine-color-green-9); + --mantine-color-green-light: rgba(64, 192, 87, 0.15); + --mantine-color-green-light-hover: rgba(64, 192, 87, 0.2); + --mantine-color-green-light-color: var(--mantine-color-green-3); + --mantine-color-green-outline: var(--mantine-color-green-4); + --mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05); + --mantine-color-lime-text: var(--mantine-color-lime-4); + --mantine-color-lime-filled: var(--mantine-color-lime-8); + --mantine-color-lime-filled-hover: var(--mantine-color-lime-9); + --mantine-color-lime-light: rgba(130, 201, 30, 0.15); + --mantine-color-lime-light-hover: rgba(130, 201, 30, 0.2); + --mantine-color-lime-light-color: var(--mantine-color-lime-3); + --mantine-color-lime-outline: var(--mantine-color-lime-4); + --mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05); + --mantine-color-yellow-text: var(--mantine-color-yellow-4); + --mantine-color-yellow-filled: var(--mantine-color-yellow-8); + --mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9); + --mantine-color-yellow-light: rgba(250, 176, 5, 0.15); + --mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.2); + --mantine-color-yellow-light-color: var(--mantine-color-yellow-3); + --mantine-color-yellow-outline: var(--mantine-color-yellow-4); + --mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05); + --mantine-color-orange-text: var(--mantine-color-orange-4); + --mantine-color-orange-filled: var(--mantine-color-orange-8); + --mantine-color-orange-filled-hover: var(--mantine-color-orange-9); + --mantine-color-orange-light: rgba(253, 126, 20, 0.15); + --mantine-color-orange-light-hover: rgba(253, 126, 20, 0.2); + --mantine-color-orange-light-color: var(--mantine-color-orange-3); + --mantine-color-orange-outline: var(--mantine-color-orange-4); + --mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05); +} + +.bn-mantine[data-mantine-color-scheme="light"] { + --mantine-color-scheme: light; + --mantine-primary-color-contrast: var(--mantine-color-white); + --mantine-color-bright: var(--mantine-color-black); + --mantine-color-text: #000; + --mantine-color-body: #fff; + --mantine-color-error: var(--mantine-color-red-6); + --mantine-color-placeholder: var(--mantine-color-gray-5); + --mantine-color-anchor: var(--mantine-color-blue-6); + --mantine-color-default: var(--mantine-color-white); + --mantine-color-default-hover: var(--mantine-color-gray-0); + --mantine-color-default-color: var(--mantine-color-black); + --mantine-color-default-border: var(--mantine-color-gray-4); + --mantine-color-dimmed: var(--mantine-color-gray-6); + --mantine-color-disabled: var(--mantine-color-gray-2); + --mantine-color-disabled-color: var(--mantine-color-gray-5); + --mantine-color-disabled-border: var(--mantine-color-gray-3); + --mantine-color-dark-text: var(--mantine-color-dark-filled); + --mantine-color-dark-filled: var(--mantine-color-dark-6); + --mantine-color-dark-filled-hover: var(--mantine-color-dark-7); + --mantine-color-dark-light: rgba(46, 46, 46, 0.1); + --mantine-color-dark-light-hover: rgba(46, 46, 46, 0.12); + --mantine-color-dark-light-color: var(--mantine-color-dark-6); + --mantine-color-dark-outline: var(--mantine-color-dark-6); + --mantine-color-dark-outline-hover: rgba(46, 46, 46, 0.05); + --mantine-color-gray-text: var(--mantine-color-gray-filled); + --mantine-color-gray-filled: var(--mantine-color-gray-6); + --mantine-color-gray-filled-hover: var(--mantine-color-gray-7); + --mantine-color-gray-light: rgba(134, 142, 150, 0.1); + --mantine-color-gray-light-hover: rgba(134, 142, 150, 0.12); + --mantine-color-gray-light-color: var(--mantine-color-gray-6); + --mantine-color-gray-outline: var(--mantine-color-gray-6); + --mantine-color-gray-outline-hover: rgba(134, 142, 150, 0.05); + --mantine-color-red-text: var(--mantine-color-red-filled); + --mantine-color-red-filled: var(--mantine-color-red-6); + --mantine-color-red-filled-hover: var(--mantine-color-red-7); + --mantine-color-red-light: rgba(250, 82, 82, 0.1); + --mantine-color-red-light-hover: rgba(250, 82, 82, 0.12); + --mantine-color-red-light-color: var(--mantine-color-red-6); + --mantine-color-red-outline: var(--mantine-color-red-6); + --mantine-color-red-outline-hover: rgba(250, 82, 82, 0.05); + --mantine-color-pink-text: var(--mantine-color-pink-filled); + --mantine-color-pink-filled: var(--mantine-color-pink-6); + --mantine-color-pink-filled-hover: var(--mantine-color-pink-7); + --mantine-color-pink-light: rgba(230, 73, 128, 0.1); + --mantine-color-pink-light-hover: rgba(230, 73, 128, 0.12); + --mantine-color-pink-light-color: var(--mantine-color-pink-6); + --mantine-color-pink-outline: var(--mantine-color-pink-6); + --mantine-color-pink-outline-hover: rgba(230, 73, 128, 0.05); + --mantine-color-grape-text: var(--mantine-color-grape-filled); + --mantine-color-grape-filled: var(--mantine-color-grape-6); + --mantine-color-grape-filled-hover: var(--mantine-color-grape-7); + --mantine-color-grape-light: rgba(190, 75, 219, 0.1); + --mantine-color-grape-light-hover: rgba(190, 75, 219, 0.12); + --mantine-color-grape-light-color: var(--mantine-color-grape-6); + --mantine-color-grape-outline: var(--mantine-color-grape-6); + --mantine-color-grape-outline-hover: rgba(190, 75, 219, 0.05); + --mantine-color-violet-text: var(--mantine-color-violet-filled); + --mantine-color-violet-filled: var(--mantine-color-violet-6); + --mantine-color-violet-filled-hover: var(--mantine-color-violet-7); + --mantine-color-violet-light: rgba(121, 80, 242, 0.1); + --mantine-color-violet-light-hover: rgba(121, 80, 242, 0.12); + --mantine-color-violet-light-color: var(--mantine-color-violet-6); + --mantine-color-violet-outline: var(--mantine-color-violet-6); + --mantine-color-violet-outline-hover: rgba(121, 80, 242, 0.05); + --mantine-color-indigo-text: var(--mantine-color-indigo-filled); + --mantine-color-indigo-filled: var(--mantine-color-indigo-6); + --mantine-color-indigo-filled-hover: var(--mantine-color-indigo-7); + --mantine-color-indigo-light: rgba(76, 110, 245, 0.1); + --mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.12); + --mantine-color-indigo-light-color: var(--mantine-color-indigo-6); + --mantine-color-indigo-outline: var(--mantine-color-indigo-6); + --mantine-color-indigo-outline-hover: rgba(76, 110, 245, 0.05); + --mantine-color-blue-text: var(--mantine-color-blue-filled); + --mantine-color-blue-filled: var(--mantine-color-blue-6); + --mantine-color-blue-filled-hover: var(--mantine-color-blue-7); + --mantine-color-blue-light: rgba(34, 139, 230, 0.1); + --mantine-color-blue-light-hover: rgba(34, 139, 230, 0.12); + --mantine-color-blue-light-color: var(--mantine-color-blue-6); + --mantine-color-blue-outline: var(--mantine-color-blue-6); + --mantine-color-blue-outline-hover: rgba(34, 139, 230, 0.05); + --mantine-color-cyan-text: var(--mantine-color-cyan-filled); + --mantine-color-cyan-filled: var(--mantine-color-cyan-6); + --mantine-color-cyan-filled-hover: var(--mantine-color-cyan-7); + --mantine-color-cyan-light: rgba(21, 170, 191, 0.1); + --mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.12); + --mantine-color-cyan-light-color: var(--mantine-color-cyan-6); + --mantine-color-cyan-outline: var(--mantine-color-cyan-6); + --mantine-color-cyan-outline-hover: rgba(21, 170, 191, 0.05); + --mantine-color-teal-text: var(--mantine-color-teal-filled); + --mantine-color-teal-filled: var(--mantine-color-teal-6); + --mantine-color-teal-filled-hover: var(--mantine-color-teal-7); + --mantine-color-teal-light: rgba(18, 184, 134, 0.1); + --mantine-color-teal-light-hover: rgba(18, 184, 134, 0.12); + --mantine-color-teal-light-color: var(--mantine-color-teal-6); + --mantine-color-teal-outline: var(--mantine-color-teal-6); + --mantine-color-teal-outline-hover: rgba(18, 184, 134, 0.05); + --mantine-color-green-text: var(--mantine-color-green-filled); + --mantine-color-green-filled: var(--mantine-color-green-6); + --mantine-color-green-filled-hover: var(--mantine-color-green-7); + --mantine-color-green-light: rgba(64, 192, 87, 0.1); + --mantine-color-green-light-hover: rgba(64, 192, 87, 0.12); + --mantine-color-green-light-color: var(--mantine-color-green-6); + --mantine-color-green-outline: var(--mantine-color-green-6); + --mantine-color-green-outline-hover: rgba(64, 192, 87, 0.05); + --mantine-color-lime-text: var(--mantine-color-lime-filled); + --mantine-color-lime-filled: var(--mantine-color-lime-6); + --mantine-color-lime-filled-hover: var(--mantine-color-lime-7); + --mantine-color-lime-light: rgba(130, 201, 30, 0.1); + --mantine-color-lime-light-hover: rgba(130, 201, 30, 0.12); + --mantine-color-lime-light-color: var(--mantine-color-lime-6); + --mantine-color-lime-outline: var(--mantine-color-lime-6); + --mantine-color-lime-outline-hover: rgba(130, 201, 30, 0.05); + --mantine-color-yellow-text: var(--mantine-color-yellow-filled); + --mantine-color-yellow-filled: var(--mantine-color-yellow-6); + --mantine-color-yellow-filled-hover: var(--mantine-color-yellow-7); + --mantine-color-yellow-light: rgba(250, 176, 5, 0.1); + --mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.12); + --mantine-color-yellow-light-color: var(--mantine-color-yellow-6); + --mantine-color-yellow-outline: var(--mantine-color-yellow-6); + --mantine-color-yellow-outline-hover: rgba(250, 176, 5, 0.05); + --mantine-color-orange-text: var(--mantine-color-orange-filled); + --mantine-color-orange-filled: var(--mantine-color-orange-6); + --mantine-color-orange-filled-hover: var(--mantine-color-orange-7); + --mantine-color-orange-light: rgba(253, 126, 20, 0.1); + --mantine-color-orange-light-hover: rgba(253, 126, 20, 0.12); + --mantine-color-orange-light-color: var(--mantine-color-orange-6); + --mantine-color-orange-outline: var(--mantine-color-orange-6); + --mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05); +} diff --git a/packages/mantine/src/style.css b/packages/mantine/src/style.css index 8c9c2be3c0..65dc10daa2 100644 --- a/packages/mantine/src/style.css +++ b/packages/mantine/src/style.css @@ -1,795 +1,2 @@ -@import url("@blocknote/react/style.css"); @import url("./mantineStyles.css"); - -/* Mantine base styles*/ - -/* Removes Mantine active styles */ -.bn-mantine .mantine-active:active { - transform: none; -} - -/* Mantine Badge component base styles */ -.bn-mantine .mantine-Badge-root { - background-color: var(--bn-colors-tooltip-background); - color: var(--bn-colors-tooltip-text); -} - -/* Mantine FileInput component base styles */ -.bn-mantine .mantine-FileInput-input { - align-items: center; - background-color: var(--bn-colors-menu-background); - border: none; - border-radius: 4px; - color: var(--bn-colors-menu-text); - display: flex; - flex-direction: row; - font-family: var(--bn-font-family); - justify-content: center; -} - -.bn-mantine .mantine-FileInput-input:hover { - background-color: var(--bn-colors-hovered-background); -} - -.bn-mantine .mantine-FileInput-wrapper { - border: solid var(--bn-colors-border) 1px; - border-radius: 4px; -} - -.bn-mantine .mantine-InputPlaceholder-placeholder { - color: var(--bn-colors-menu-text); - font-family: var(--bn-font-family); - font-weight: 600; -} - -/* Mantine Menu component base styles */ -.bn-mantine .mantine-Menu-dropdown, -.bn-mantine .bn-menu-dropdown { - background-color: var(--bn-colors-menu-background); - border: var(--bn-border); - border-radius: var(--bn-border-radius-medium); - box-shadow: var(--bn-shadow-medium); - box-sizing: border-box; - color: var(--bn-colors-menu-text); - padding: 2px; - overflow: auto; -} - -.bn-mantine .mantine-Menu-label { - background-color: var(--bn-colors-menu-background); - color: var(--bn-colors-menu-text); -} - -.bn-mantine .mantine-Menu-item { - background-color: var(--bn-colors-menu-background); - border: none; - border-radius: var(--bn-border-radius-small); - color: var(--bn-colors-menu-text); -} - -.bn-mantine .mantine-Menu-item[aria-selected="true"], -.bn-mantine .mantine-Menu-item:hover { - background-color: var(--bn-colors-hovered-background); - border: none; - color: var(--bn-colors-hovered-text); -} - -/* Mantine Popover component base styles */ -.bn-mantine .mantine-Popover-dropdown:not(.bn-menu-dropdown) { - background-color: transparent; - border: none; - border-radius: 0; - box-shadow: none; - padding: 0; -} - -/* Mantine Tabs component base styles */ -.bn-mantine .mantine-Tabs-root { - width: 100%; - background-color: var(--bn-colors-menu-background); -} - -.bn-mantine .mantine-Tabs-list:before { - border-color: var(--bn-colors-hovered-background); -} - -.bn-mantine .mantine-Tabs-tab { - color: var(--bn-colors-menu-text); - border-color: var(--bn-colors-hovered-background); -} - -.bn-mantine .mantine-Tabs-tab:hover { - background-color: var(--bn-colors-hovered-background); - border-color: var(--bn-colors-hovered-background); - color: var(--bn-colors-hovered-text); -} - -.bn-mantine .mantine-Tabs-tab[data-active], -.bn-mantine .mantine-Tabs-tab[data-active]:hover { - border-color: var(--bn-colors-menu-text); - color: var(--bn-colors-menu-text); -} - -.bn-mantine .mantine-Tabs-panel { - padding: 8px; -} - -/* Mantine TextInput component base styles */ -.bn-mantine .mantine-TextInput-input { - background-color: var(--bn-colors-menu-background); - border: solid var(--bn-colors-border) 1px; - border-radius: 4px; - color: var(--bn-colors-menu-text); - font-family: var(--bn-font-family); - height: 32px; -} - -.bn-mantine .bn-mt-input-large .mantine-TextInput-input { - border: none; - font-size: 14px; - height: 52px; -} - -/* Mantine Tooltip component base styles */ -.bn-mantine .mantine-Tooltip-tooltip { - background-color: transparent; - border: none; - border-radius: 0; - box-shadow: none; - padding: 0; -} - -.bn-mantine .mantine-Tooltip-tooltip p:last-child { - white-space: pre-wrap; -} - -.bn-mantine .mantine-Tooltip-tooltip p:first-child { - white-space: unset; -} - -/* UI element styling */ - -/* Select styling */ -.bn-mantine .bn-select { - overflow: auto; -} - -.bn-mantine .mantine-Button-root[aria-controls*="dropdown"] { - min-width: fit-content; -} - -/* Toolbar styling */ -.bn-mantine .bn-toolbar { - background-color: var(--bn-colors-menu-background); - border: var(--bn-border); - border-radius: var(--bn-border-radius-medium); - box-shadow: var(--bn-shadow-medium); - flex-wrap: nowrap; - gap: 2px; - padding: 2px; - width: fit-content; - overflow-x: auto; - max-width: 100vw; -} - -.bn-mantine .bn-toolbar:empty { - display: none; -} - -.bn-toolbar .mantine-Button-root, -.bn-toolbar .mantine-ActionIcon-root { - background-color: var(--bn-colors-menu-background); - border: none; - border-radius: var(--bn-border-radius-small); - color: var(--bn-colors-menu-text); -} - -.bn-toolbar .mantine-Button-root:hover, -.bn-toolbar .mantine-ActionIcon-root:hover { - background-color: var(--bn-colors-hovered-background); - border: none; - color: var(--bn-colors-hovered-text); -} - -.bn-toolbar .mantine-Button-root[data-selected], -.bn-toolbar .mantine-ActionIcon-root[data-selected] { - background-color: var(--bn-colors-selected-background); - border: none; - color: var(--bn-colors-selected-text); -} - -.bn-toolbar .mantine-Button-root[data-disabled], -.bn-toolbar .mantine-ActionIcon-root[data-disabled] { - background-color: var(--bn-colors-disabled-background); - border: none; - color: var(--bn-colors-disabled-text); -} - -.bn-toolbar .mantine-Menu-item { - font-size: 12px; - height: 30px; -} - -.bn-toolbar .mantine-Menu-item:hover { - background-color: var(--bn-colors-hovered-background); -} - -.bn-mantine .bn-form-popover { - background-color: var(--bn-colors-menu-background); - border: var(--bn-border); - border-radius: var(--bn-border-radius-medium); - box-shadow: var(--bn-shadow-medium); - color: var(--bn-colors-menu-text); - gap: 4px; - min-width: 145px; - padding: 2px; -} - -.bn-form-popover .mantine-TextInput-root, -.bn-form-popover .mantine-FileInput-root { - width: 300px; -} - -.bn-form-popover .mantine-TextInput-wrapper, -.bn-form-popover .mantine-FileInput-wrapper { - padding: 0; - border-radius: 4px; -} - -.bn-form-popover .mantine-TextInput-wrapper:hover { - background-color: var(--bn-colors-hovered-background); -} - -.bn-form-popover .mantine-TextInput-input, -.bn-form-popover .mantine-FileInput-input { - border: none; - font-size: 12px; -} - -.bn-form-popover .mantine-FileInput-input:hover { - background-color: var(--bn-colors-hovered-background); -} - -.bn-form-popover .mantine-FileInput-section[data-position="left"] { - color: var(--bn-colors-menu-text); -} - -.bn-form-popover .mantine-FileInput-placeholder { - color: var(--bn-colors-menu-text); -} - -/* Suggestion Menu styling*/ - -/* Base styles for Suggestion Menus, copied from the Mantine Menu component. */ -/* Unfortunately necessary, as we can't use a Menu.Dropdown component on its - own. */ -/* https://github.com/mantinedev/mantine/blob/e3e3bb834de1f2f75a27dbc757dc0a2fc6a6cba8/packages/%40mantine/core/src/components/Menu/Menu.module.css */ -.bn-mantine .bn-suggestion-menu { - max-height: 100%; - position: relative; - box-shadow: var(--mantine-shadow-md); - border: calc(0.0625rem * var(--mantine-scale)) solid - var(--mantine-color-gray-2); - border-radius: var(--mantine-radius-default); - padding: 4px; -} - -.bn-mantine .bn-suggestion-menu-label { - color: var(--mantine-color-dimmed); - font-weight: 500; - font-size: var(--mantine-font-size-xs); - padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-sm); - cursor: default; -} - -.bn-mantine .bn-suggestion-menu-item { - font-size: var(--mantine-font-size-sm); - width: 100%; - padding: calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-sm); - border-radius: var(--popover-radius, var(--mantine-radius-default)); - color: var(--menu-item-color, var(--mantine-color-text)); - display: flex; - align-items: center; - user-select: none; - - &:where([data-disabled], :disabled) { - color: var(--mantine-color-dimmed); - opacity: 0.6; - pointer-events: none; - } -} - -/* Additional Suggestion Menu styling*/ -.bn-mt-suggestion-menu-item-body { - flex: 1; -} - -.bn-mt-suggestion-menu-item-section { - display: flex; - justify-content: center; - align-items: center; - - &:where([data-position="left"]) { - margin-inline-end: var(--mantine-spacing-xs); - } - - &:where([data-position="right"]) { - margin-inline-start: var(--mantine-spacing-xs); - } -} - -.bn-mantine .bn-suggestion-menu { - background-color: var(--bn-colors-menu-background); - border: var(--bn-border); - border-radius: var(--bn-border-radius-medium); - box-shadow: var(--bn-shadow-medium); - box-sizing: border-box; - color: var(--bn-colors-menu-text); - height: fit-content; - max-height: inherit; - overflow-y: auto; - padding: 2px; -} - -.bn-mantine .bn-suggestion-menu-item { - cursor: pointer; - height: 52px; -} - -.bn-mantine .bn-suggestion-menu-item-small { - height: fit-content; - /* Made to match with labels */ - padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-sm); -} - -.bn-mantine .bn-suggestion-menu-item[aria-selected="true"], -.bn-mantine .bn-suggestion-menu-item:hover { - background-color: var(--bn-colors-hovered-background); -} - -.bn-mt-suggestion-menu-item-section { - color: var(--bn-colors-tooltip-text); -} - -.bn-mt-suggestion-menu-item-section[data-position="left"] { - background-color: var(--bn-colors-tooltip-background); - border-radius: var(--bn-border-radius-small); - padding: 8px; -} - -.bn-suggestion-menu-item-small - .bn-mt-suggestion-menu-item-section[data-position="left"] { - background-color: transparent; - padding: 0; -} - -.bn-suggestion-menu-item-small - .bn-mt-suggestion-menu-item-section[data-position="left"] - svg { - height: 14px; - width: 14px; -} - -.bn-mt-suggestion-menu-item-body { - align-items: stretch; - display: flex; - flex: 1; - flex-direction: column; - justify-content: flex-start; - padding-right: 16px; -} - -.bn-mt-suggestion-menu-item-title { - color: var(--bn-colors-menu-text); - line-height: 20px; - font-weight: 500; - font-size: 14px; - margin: 0; - padding: 0; -} - -.bn-suggestion-menu-item-small .bn-mt-suggestion-menu-item-title { - font-size: 12px; -} - -.bn-mt-suggestion-menu-item-subtitle { - color: var(--bn-colors-menu-text); - line-height: 16px; - font-size: 10px; - margin: 0; - padding: 0; -} - -.bn-suggestion-menu-item-small .bn-mt-suggestion-menu-item-subtitle { - display: none; -} - -.bn-mantine .bn-suggestion-menu-label { - color: var(--bn-colors-hovered-text); -} - -.bn-mantine .bn-suggestion-menu-loader { - height: 20px; - width: 100%; -} - -.bn-mantine .bn-suggestion-menu-loader span { - background-color: var(--bn-colors-side-menu); -} - -.bn-mantine .bn-grid-suggestion-menu { - background: var(--bn-colors-menu-background); - border-radius: var(--bn-border-radius-large); - box-shadow: var(--bn-shadow-medium); - display: grid; - gap: 7px; - height: fit-content; - justify-items: center; - max-height: inherit; - overflow-y: auto; - padding: 20px; -} - -.bn-mantine .bn-grid-suggestion-menu-item { - align-items: center; - border-radius: var(--bn-border-radius-large); - cursor: pointer; - display: flex; - font-size: 24px; - height: 32px; - justify-content: center; - margin: 2px; - padding: 4px; - width: 32px; -} - -.bn-mantine .bn-grid-suggestion-menu-item[aria-selected="true"], -.bn-mantine .bn-grid-suggestion-menu-item:hover { - background-color: var(--bn-colors-hovered-background); -} - -.bn-mantine .bn-grid-suggestion-menu-empty-item, -.bn-mantine .bn-grid-suggestion-menu-loader { - align-items: center; - color: var(--bn-colors-menu-text); - display: flex; - font-size: 14px; - font-weight: 500; - height: 32px; - justify-content: center; -} - -.bn-mantine .bn-grid-suggestion-menu-loader span { - background-color: var(--bn-colors-side-menu); -} - -/* Side Menu styling */ -.bn-mantine .bn-side-menu { - background-color: transparent; - overflow: visible; -} - -.bn-side-menu .mantine-Menu-item, -.bn-table-handle-menu .mantine-Menu-item { - font-size: 12px; - height: 30px; -} - -.bn-side-menu .mantine-UnstyledButton-root:not(.mantine-Menu-item) { - background-color: transparent; -} - -.bn-side-menu .mantine-UnstyledButton-root:hover { - background-color: var(--bn-colors-hovered-background); -} - -.bn-side-menu .mantine-UnstyledButton-root:not(.mantine-Menu-item) svg { - background-color: transparent; - color: var(--bn-colors-side-menu); - height: 22px; - width: 22px; -} - -.bn-mantine .bn-side-menu > [draggable="true"] { - display: flex; -} - -.bn-side-menu .mantine-Menu-dropdown { - min-width: 100px; - padding: 2px; - position: absolute; -} - -/* Image Panel styling*/ -.bn-mantine .bn-panel { - background-color: var(--bn-colors-menu-background); - border: var(--bn-border); - border-radius: var(--bn-border-radius-medium); - box-shadow: var(--bn-shadow-medium); - padding: 2px; - width: 500px; -} - -.bn-mantine .bn-panel .bn-tab-panel { - align-items: center; - display: flex; - flex-direction: column; - gap: 8px; - width: 100%; -} - -.bn-panel .mantine-TextInput-root, -.bn-panel .mantine-FileInput-root { - width: 100%; -} - -.bn-panel .mantine-Button-root { - background-color: var(--bn-colors-menu-background); - border: solid var(--bn-colors-border) 1px; - border-radius: var(--bn-border-radius-small); - color: var(--bn-colors-menu-text); - height: 32px; - width: 60%; -} - -.bn-panel .mantine-Button-root:hover { - background-color: var(--bn-colors-hovered-background); -} - -.bn-panel .mantine-Text-root { - text-align: center; -} - -/* Table Handle styling */ -.bn-mantine .bn-table-handle, -.bn-mantine .bn-extend-button, -.bn-mantine .bn-table-cell-handle { - align-items: center; - background-color: var(--bn-colors-menu-background); - border: var(--bn-border); - border-radius: var(--bn-border-radius-small); - box-shadow: var(--bn-shadow-light); - color: var(--bn-colors-side-menu); - cursor: grab; - display: flex; - height: fit-content; - justify-content: center; - overflow: visible; - padding: 0; -} - -.bn-mantine .bn-table-cell-handle { - padding: 0 4px; -} - -.bn-mantine .bn-table-handle svg { - margin-inline: -4px; -} - -.bn-mantine .bn-table-handle-not-draggable { - cursor: pointer; -} - -.bn-mantine .bn-table-handle:hover, -.bn-mantine .bn-table-handle-dragging, -.bn-mantine .bn-extend-button:hover, -.bn-mantine .bn-extend-button-editing, -.bn-mantine .bn-table-cell-handle:hover { - background-color: var(--bn-colors-hovered-background); -} - -.bn-mantine .bn-extend-button-add-remove-columns { - height: 100%; - width: 18px; - margin-left: 4px; - cursor: col-resize; -} - -.bn-mantine .bn-extend-button-add-remove-rows { - height: 18px; - width: 100%; - margin-top: 4px; - cursor: row-resize; -} - -/* Drag Handle & Table Handle Menu styling */ -.bn-mantine .bn-drag-handle-menu, -.bn-mantine .bn-table-handle-menu { - overflow: visible; -} - -/* Tooltip styling */ -.bn-mantine .bn-tooltip { - background-color: var(--bn-colors-tooltip-background); - border: var(--bn-border); - border-radius: var(--bn-border-radius-medium); - box-shadow: var(--bn-shadow-medium); - color: var(--bn-colors-tooltip-text); - padding: 4px 10px; - text-align: center; -} - -/* Additional menu styles */ -.bn-mantine .bn-tick-space { - padding: 0; - width: 20px; -} - -/* Comment styling */ -.bn-mantine .bn-thread { - background-color: var(--bn-colors-menu-background); - border: var(--bn-border); - border-radius: var(--bn-border-radius-medium); - box-shadow: var(--bn-shadow-medium); - color: var(--bn-colors-menu-text); - display: flex; - flex-direction: column; - gap: 16px; - min-width: 350px; - overflow: visible; -} - -.bn-mantine .bn-threads-sidebar .bn-thread { - box-shadow: none; -} - -.bn-mantine .bn-thread:not(.selected) { - cursor: pointer; -} - -.bn-mantine .bn-thread-comments, -.bn-mantine .bn-thread-composer { - display: flex; - flex-direction: column; - margin: 0; - padding: 0; -} - -.bn-mantine .bn-thread-comments { - gap: 1rem; -} - -.bn-mantine .bn-thread-comment { - align-items: flex-start; - flex-direction: column; - gap: 0.25rem; -} - -.bn-mantine .bn-thread-comment > .mantine-Group-root { - gap: 12px; -} - -.bn-mantine .bn-thread-comment p { - color: var(--bn-colors-menu-text); -} - -.bn-mantine .bn-thread .bn-header-text, -.bn-mantine .bn-thread-comment .bn-resolved-text { - font-size: 0.8rem; - font-style: italic; -} - -.bn-mantine .bn-comment-actions-wrapper { - width: 100%; - display: flex; - justify-content: flex-end; -} - -/* Comment action toolbar styling */ -.bn-mantine .bn-action-toolbar { - align-self: flex-end; - background-color: var(--bn-colors-menu-background); - border: var(--bn-border); - border-radius: var(--bn-border-radius-medium); - gap: 0; - padding: 2px; -} - -.bn-action-toolbar .mantine-Button-root, -.bn-action-toolbar .mantine-ActionIcon-root { - background-color: var(--bn-colors-menu-background); - border: none; - border-radius: var(--bn-border-radius-small); - color: var(--bn-colors-menu-text); -} - -.bn-action-toolbar .mantine-Button-root:hover, -.bn-action-toolbar .mantine-ActionIcon-root:hover { - background-color: var(--bn-colors-hovered-background); - border: none; - color: var(--bn-colors-hovered-text); -} - -.bn-action-toolbar .mantine-Button-root[data-selected], -.bn-action-toolbar .mantine-ActionIcon-root[data-selected] { - background-color: var(--bn-colors-selected-background); - border: none; - color: var(--bn-colors-selected-text); -} - -.bn-action-toolbar .mantine-Button-root[data-disabled], -.bn-action-toolbar .mantine-ActionIcon-root[data-disabled] { - background-color: var(--bn-colors-disabled-background); - border: none; - color: var(--bn-colors-disabled-text); -} - -.bn-mantine .bn-action-toolbar .mantine-Menu-itemLabel { - font-size: 12px; -} - -/* Badge styling */ -.bn-mantine .bn-badge-group { - display: flex; - gap: 4px; - justify-content: flex-start; - width: 100%; -} - -.bn-mantine .bn-badge { - flex-grow: 0; -} - -.bn-mantine .bn-badge .mantine-Chip-label { - padding: 0 8px; -} - -.bn-mantine .bn-badge .mantine-Chip-label:not([data-checked="true"]) { - background-color: var(--bn-colors-menu-background); - border: var(--bn-border); - color: var(--bn-colors-menu-text); -} - -.bn-mantine .bn-badge .mantine-Chip-label:hover { - border: 1px solid var(--mantine-primary-color-filled-hover); - color: var(--mantine-primary-color-filled-hover); -} - -.bn-mantine - .bn-badge - .mantine-Chip-label - > span:not(.mantine-Chip-iconWrapper) { - display: inline-flex; - gap: 4px; -} - -.bn-mantine - .bn-badge - .mantine-Chip-label - > span:not(.mantine-Chip-iconWrapper) - > span { - align-items: center; - display: inline-flex; - justify-content: center; -} - -/* Combobox styling */ -.bn-mantine .bn-combobox-input, -.bn-mantine .bn-combobox-items:not(:empty) { - background-color: var(--bn-colors-menu-background); - border: var(--bn-border); - border-radius: var(--bn-border-radius-medium); - box-shadow: var(--bn-shadow-medium); - color: var(--bn-colors-menu-text); - gap: 4px; - min-width: 145px; - padding: 2px; -} - -.bn-mantine .bn-combobox-input .bn-combobox-icon, -.bn-mantine .bn-combobox-input .bn-combobox-right-section { - align-items: center; - display: flex; - justify-content: center; -} - -.bn-mantine .bn-combobox-input .bn-combobox-error { - color: var(--bn-colors-highlights-red-background); -} - -/* We need to get rid of the checked icon - you can set the icon prop to an -empty element (<>), but even so Mantine leaves extra space for the icon, so -we just don't display it in CSS instead. */ -.bn-mantine .bn-badge .mantine-Chip-iconWrapper { - display: none; -} +@import url("./blocknoteStyles.css"); diff --git a/playground/package.json b/playground/package.json index 0cb8d424fc..db8d7bcd65 100644 --- a/playground/package.json +++ b/playground/package.json @@ -40,6 +40,8 @@ "@liveblocks/react-tiptap": "3.7.1-tiptap3", "@liveblocks/react-ui": "3.7.1-tiptap3", "@mantine/core": "^8.3.2", + "@mantine/hooks": "^8.3.2", + "@mantine/utils": "^6.0.22", "@mui/icons-material": "^5.16.1", "@mui/material": "^5.16.1", "@uppy/core": "^3.13.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0dd33140f0..a4fab38c58 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -147,6 +147,12 @@ importers: '@mantine/core': specifier: ^8.3.2 version: 8.3.2(@mantine/hooks@8.3.2(react@19.1.0))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + '@mantine/hooks': + specifier: ^8.3.2 + version: 8.3.2(react@19.1.0) + '@mantine/utils': + specifier: ^6.0.22 + version: 6.0.22(react@19.1.0) '@mui/icons-material': specifier: ^5.16.1 version: 5.17.1(@mui/material@5.17.1(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(@types/react@19.1.8)(react@19.1.0) @@ -4670,6 +4676,12 @@ importers: '@mantine/core': specifier: ^8.3.2 version: 8.3.2(@mantine/hooks@8.3.2(react@19.1.0))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + '@mantine/hooks': + specifier: ^8.3.2 + version: 8.3.2(react@19.1.0) + '@mantine/utils': + specifier: ^6.0.22 + version: 6.0.22(react@19.1.0) '@mui/icons-material': specifier: ^5.16.1 version: 5.17.1(@mui/material@5.17.1(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(@types/react@19.1.8)(react@19.1.0)