From 4dfc59e5cb6d0723869d484fe52a7d2dc1ff4136 Mon Sep 17 00:00:00 2001 From: Steve Ruiz Date: Sat, 17 Jun 2023 23:33:21 +0100 Subject: [PATCH] tldraw.css (#1607) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR introduces `@tldraw/tldraw/tldraw.css`, an exported CSS file that replaces the `editor.css` and `ui.css` that were previously copied from the editor and ui packages. Instead, these files are combined into the `tldraw.css` file, simplifying the import story when using `@tldraw/tldraw`. ### Change Type - [x] `major` — Breaking change ### Release Notes - [tldraw] Removes `editor.css` and `ui.css` exports, replaces with `tldraw.css` --- .gitignore | 3 +- apps/docs/content/docs/collaboration.mdx | 4 +- apps/docs/content/docs/installation.mdx | 16 ++- apps/docs/content/docs/introduction.mdx | 113 +++--------------- apps/docs/content/docs/usage.mdx | 77 ++++-------- apps/docs/styles/globals.css | 42 +++++-- apps/examples/src/1-basic/BasicExample.tsx | 3 +- .../CustomComponentsExample.tsx | 3 +- .../11-user-presence/UserPresenceExample.tsx | 3 +- .../src/12-ui-events/UiEventsExample.tsx | 3 +- .../13-store-events/StoreEventsExample.tsx | 3 +- .../src/14-persistence/PersistenceExample.tsx | 3 +- .../src/15-custom-zones/ZonesExample.tsx | 4 +- .../16-custom-styles/CustomStylesExample.tsx | 3 +- apps/examples/src/2-api/APIExample.tsx | 3 +- .../3-custom-config/CustomConfigExample.tsx | 3 +- .../src/4-custom-ui/CustomUiExample.tsx | 2 +- .../src/5-exploded/ExplodedExample.tsx | 3 +- apps/examples/src/6-scroll/ScrollExample.tsx | 3 +- .../src/7-multiple/MultipleExample.tsx | 3 +- .../8-error-boundary/ErrorBoundaryExample.tsx | 3 +- apps/examples/src/9-hide-ui/HideUiExample.tsx | 3 +- apps/examples/src/end-to-end/end-to-end.tsx | 3 +- apps/examples/src/yjs/YjsExample.tsx | 3 +- packages/editor/editor.css | 4 +- packages/tldraw/package.json | 3 +- packages/tldraw/scripts/copy-css-files.mjs | 37 +++--- packages/ui/ui.css | 2 + 28 files changed, 126 insertions(+), 229 deletions(-) diff --git a/.gitignore b/.gitignore index 8ca3cad34..753bbe350 100644 --- a/.gitignore +++ b/.gitignore @@ -50,8 +50,7 @@ tsconfig.build.json api-json api-md -packages/tldraw/editor.css -packages/tldraw/ui.css +packages/tldraw/tldraw.css packages/assets/embed-icons packages/assets/fonts diff --git a/apps/docs/content/docs/collaboration.mdx b/apps/docs/content/docs/collaboration.mdx index 889ced28b..a936be580 100644 --- a/apps/docs/content/docs/collaboration.mdx +++ b/apps/docs/content/docs/collaboration.mdx @@ -6,4 +6,6 @@ date: 3/22/2023 order: 7 --- -Coming soon. \ No newline at end of file +Coming soon. + +See the [tldraw repository](https://github.com/tldraw/tldraw/tree/main/apps/examples) for an example of how to use yjs with the `@tldraw/tldraw` library. diff --git a/apps/docs/content/docs/installation.mdx b/apps/docs/content/docs/installation.mdx index 34d10b174..dca2d70e3 100644 --- a/apps/docs/content/docs/installation.mdx +++ b/apps/docs/content/docs/installation.mdx @@ -6,10 +6,24 @@ date: 3/22/2023 order: 1 --- -First, install the `@tldraw/tldraw` package using `@alpha` for the **latest alpha release**. It also has peer dependencies on `signia` and `signia-react` which you will need to install at the same time. +At the moment the `@tldraw/tldraw` package is in alpha. We also ship a canary version which is always up to date with the main branch of tldraw [repository](https://github.com/tldraw/tldraw). + +## Alpha + +First, install the `@tldraw/tldraw` package using `@alpha` for the latest. The package also has peer dependencies on `signia` and `signia-react` which you will need to install at the same time. ```bash yarn add @tldraw/tldraw@alpha signia signia-react # or npm install @tldraw/tldraw@alpha signia signia-react ``` + +## Canary + +To get the very latest version, use the [latest canary release](https://www.npmjs.com/package/@tldraw/tldraw?activeTab=versions). Docs for the very latest version are also available at [canary.tldraw.dev](https://canary.tldraw.dev). + +```bash +yarn add @tldraw/tldraw@canary signia signia-react +# or +npm install @tldraw/tldraw@canary signia signia-react +``` \ No newline at end of file diff --git a/apps/docs/content/docs/introduction.mdx b/apps/docs/content/docs/introduction.mdx index 8e70c3605..29276dc46 100644 --- a/apps/docs/content/docs/introduction.mdx +++ b/apps/docs/content/docs/introduction.mdx @@ -8,123 +8,42 @@ order: 0 Welcome to the tldraw developer docs. -tldraw is a React component that you can use to create infinite canvas experiences for the web. It is essentially the [tldraw.com](https://www.tldraw.com) application wrapped up and distributed as a React component, but with powerful APIs for creating custom shapes, tools, behaviors, and user interfaces elements. +Here at tldraw, we make two things: a very good multiplayer whiteboard (at [tldraw.com](https://www.tldraw.com)) and the [open source](https://github.com/tldraw/tldraw) libraries used to create that product. This page is meant to provide documentation and reference for those open source libraries. -![screenshot of tldraw](/images/screenshot.png) - -These docs relate to tldraw's **alpha version**, which is [open source](https://github.com/tldraw/tldraw), permissively licensed under Apache 2.0, and available [on npm](https://www.npmjs.com/package/@tldraw/tldraw) under the alpha and canary versions. - -- Want to explore the code? Visit the [GitHub repo](https://github.com/tldraw/tldraw)). -- Want to dive in? Visit the [examples StackBlitz](https://stackblitz.com/github/tldraw/tldraw/tree/examples?file=src%2F1-basic%2FBasicExample.tsx). -- Found a bug or integration problem? Please create a ticket [here](https://github.com/tldraw/tldraw/issues). -- Questions or feedback? Let us know on the [Discord](https://discord.gg/JMbeb96jsh). - -And if you are just looking for the regular tldraw app, try [tldraw.com](https://www.tldraw.com). - -## Installation - -First, install the `@tldraw/tldraw` package using `@alpha` for the **latest alpha release**. The package also has peer dependencies on `signia` and `signia-react` which you will need to install at the same time. - -```bash -yarn add @tldraw/tldraw@alpha signia signia-react -# or -npm install @tldraw/tldraw@alpha signia signia-react -``` - -To get the very latest version, use the [latest canary release](https://www.npmjs.com/package/@tldraw/tldraw?activeTab=versions). Docs for the very latest version are also available at [canary.tldraw.dev](https://canary.tldraw.dev). - -```bash -yarn add @tldraw/tldraw@canary signia signia-react -# or -npm install @tldraw/tldraw@canary signia signia-react -``` - -## Usage - -You should be able to use the `` component in any React editor. - -To use the `` component, create a file like this one: - -```tsx +```tsx import { Tldraw } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' export default function () { return ( -
+
) } ``` -In addition to the library, you will also need to: +You can use the `` React component to build on top of the default tldraw experience. It's easy to use and easy to extend with your own [custom shapes](/docs/shapes), [custom tools](/docs/tools), and [user interface](/docs/user-interface) overrides. -- import the **CSS files** for the editor and UI -- probably set a `viewport` meta tag in your **html**. +If you want to go even deeper, you can use the `` component as a more minimal engine without the default tldraw shapes or user interface. -See below for more detail on these. +And in either case, you can use the [Editor API](/docs/editor) to drive the experience programatically in order to create or delete shapes, control the camera, or do just about anything you can imagine. -#### Next.js / SSR +Best of all, you can easily plug tldraw into the [collaboration backend](/docs/collaboration) of your choice. -The `` component cannot be server-rendered. If you're using the component in a Next.js app, you will need to import it dynamically. The code to do that will look something like this: +- Want to explore the code? Visit the [GitHub repo](https://github.com/tldraw/tldraw). +- Want to try it out? Visit the [examples sandbox](https://stackblitz.com/github/tldraw/tldraw/tree/examples?file=src%2F1-basic%2FBasicExample.tsx). -```tsx -import dynamic from "next/dynamic" +Otherwise, continue on to the [installation](/docs/installation) and [usage](/docs/usage) guides. -const Editor = dynamic( - async () => import('../components/Editor')), - { ssr: false } -) +## Community -export default function MyPage() { - return -} -``` +Found a bug or want to request a feature? Create a issue [here](https://github.com/tldraw/tldraw/issues). To connect with the team and other users, join us on our [Discord](https://discord.gg/JMbeb96jsh). -### `` - -The `` component combines several other pieces: - -- the tldraw editor (`@tldraw/editor`) -- the tldraw UI (`@tldraw/ui`) -- an engine (`@tldraw/sync-client`) for persistence and cross-tab synchronization - -> **Note:** In the future, this library will also include an engine for using our collaboration services. - -If you wanted to have more granular control, you could also use those subcomponents directly. See the ["exploded" example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/5-exploded/ExplodedExample.tsx) for what that would look like. - -### CSS - -In order to use the `` component, you must also import a CSS file from the library `@tldraw/editor` library (automatically installed with `@tldraw/tldraw`): - -```ts -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' -``` - -You can overwrite these files with other CSS, customize the styles via package patches, or copy the contents into a different file and import that instead. - -In addition to these stylesheets, the root project imports the `src/index.css` file, so its styles are used for every example. Be sure to take a look at this file: you may find some of these styles necessary in your own usage of the `` component. - -### HTML - -You probably also want to update your `index.html`'s meta viewport element as shown below. - -```html - -``` - -These may not be critical to `` performing correctly, however some features (such as safe area positioning) may not work correctly if these are not set. +If you spot an issue with these docs, please use the links at the bottom of each page to create a. If you would like to contribute, the docs are part of the [tldraw repo](https://github.com/tldraw/tldraw). ## License -The source code in this repository (as well as our distributions and releases) are currently licensed under Apache-2.0. The examples are licensed under MIT. +Our open source libraries are licensed and distributed under Apache-2.0. -These licenses are subject to change in our upcoming 2.0 release. If you are planning to use use tldraw in a commercial product, please reach out at [hello@tldraw.com](mailto://hello@tldraw.com). \ No newline at end of file +Our plan is to keep these libraries permissively licensed while we develop a commercial offering for teams who want more from tldraw. If you're planning to use use tldraw in a commercial product, please reach out at [hello@tldraw.com](mailto://hello@tldraw.com). \ No newline at end of file diff --git a/apps/docs/content/docs/usage.mdx b/apps/docs/content/docs/usage.mdx index 501338742..dbb720ae9 100644 --- a/apps/docs/content/docs/usage.mdx +++ b/apps/docs/content/docs/usage.mdx @@ -6,84 +6,47 @@ date: 3/22/2023 order: 2 --- -You should be able to use the `` component in any React editor. +The `` component is the easiest way to get started with tldraw. It combines several lower-level libraries: the `TldrawEditor` component from `@tldraw/editor` and the `TldrawUi` component from `@tldraw/ui`. To use the `` component, create a file like this one: ```tsx import { Tldraw } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' -export default function () { +export default function TldrawExample() { return ( -
+
) } ``` -In addition to the library, you will also need to: - -- import the **CSS files** for the editor and UI -- probably set a `viewport` meta tag in your **html**. - -See below for more detail on these. - -#### A note on next.js / server-rendered react - -The `` component cannot be server-rendered. If you're using the component in a Next.js app, you will need to import it dynamically. The code to do that will look something like this: - -```tsx -import dynamic from "next/dynamic" - -const Editor = dynamic( - async () => import('../components/Editor')), - { ssr: false } -) - -export default function MyPage() { - return -} -``` - -### `` - -The `` component combines several other pieces: - -- the tldraw editor (`@tldraw/editor`) -- the tldraw UI (`@tldraw/ui`) -- an engine (`@tldraw/sync-client`) for persistence and cross-tab syncronization - -> **Note:** In the future, this library will also include an engine for using our collaboration services. - -If you wanted to have more granular control, you could also use those subcomponents directly. See the ["exploded" example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/5-exploded/ExplodedExample.tsx) for what that would look like. - ### CSS -In order to use the `` component, you must also import a CSS file from the library `@tldraw/editor` library (automatically installed with `@tldraw/tldraw`): +In order to use the `` component, you should also import the `tldraw.css` file from the `@tldraw/tldraw` library. You can alternatively import this file inside of another CSS file using the `@import` syntax. -```ts -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' -``` - -You can overwrite these files with other CSS, customize the styles via package patches, or copy the contents into a different file and import that instead. - -In addition to these stylesheets, the root project imports the `src/index.css` file, so its styles are used for every example. Be sure to take a look at this file: you may find some of these styles necessary in your own usage of the `` component. +You can overwrite these files with other CSS or copy the contents into a different file and import that instead. ### HTML -You probably also want to update your `index.html`'s meta viewport element as shown below. +If you're using the tldraw component in a full-screen app, you probably also want to updte your `index.html`'s meta viewport element as shown below. ```html ``` -These may not be critical to `` performing correctly, however some features (such as safe area positioning) may not work correctly if these are not set. \ No newline at end of file +This change may not be critical to `` performing correctly, however some features (such as safe area positioning) will not work correctly if these viewport options are not set. + +## Server rendering + +The `` component can't be server-rendered. If you're using the component in a server-rendered framework (such as Next.js) then you will need to import it dynamically. Check the [examples repository](https://github.com/tldraw/examples) to see examples. + +## Using in Next.js, Create React App, Vite, etc. + +Check the [examples repository](https://github.com/tldraw/examples) to see examples of the tldraw component being used in various frameworks. + +## Going deeper + +If you wanted to have more granular control, you could also use those lower-level components directly. See [this example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/5-exploded/ExplodedExample.tsx) for reference. \ No newline at end of file diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css index 24c743ac3..492f9ddf8 100644 --- a/apps/docs/styles/globals.css +++ b/apps/docs/styles/globals.css @@ -11,7 +11,7 @@ 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; - --color-tint-1: rgba(144, 144, 144, 0.1); + --color-tint-1: rgba(144, 144, 144, 0.08); --color-tint-2: rgba(144, 144, 144, 0.15); --color-tint-3: rgba(144, 144, 144, 0.3); --color-tint-4: rgba(144, 144, 144, 0.5); @@ -25,6 +25,17 @@ --shadow-small: 0px 0px 16px -2px rgba(0, 0, 0, 0.12), 0px 0px 4px 0px rgba(0, 0, 0, 0.12); --shadow-big: 0px 0px 16px -2px rgba(0, 0, 0, 0.24), 0px 0px 4px 0px rgba(0, 0, 0, 0.24); + + /* Code colors */ + --hl: #4e484e; + --hl-1: rgb(54, 59, 69); + --hl-2: rgb(144, 81, 188); + --hl-3: rgb(178, 66, 69); + --hl-4: rgb(69, 141, 155); + --hl-5: rgb(100, 144, 65); + --hl-6: rgb(179, 108, 50); + --hl-7: rgb(73, 131, 216); + --hl-8: rgb(180, 133, 64); } [data-theme='dark'] { @@ -37,6 +48,17 @@ --shadow-small: 0px 0px 16px -2px rgba(0, 0, 0, 0.52), 0px 0px 4px 0px rgba(0, 0, 0, 0.62); --shadow-big: 0px 0px 16px -2px rgba(0, 0, 0, 0.54), 0px 0px 4px 0px rgba(0, 0, 0, 0.54); + + /* Code colors */ + --hl: #c8c5f1; + --hl-1: #5c6370; + --hl-2: #c678dd; + --hl-3: #e06c75; + --hl-4: #56b6c2; + --hl-5: #98c379; + --hl-6: #d19a66; + --hl-7: #61aeee; + --hl-8: #e6c07b; } /* @media (prefers-color-scheme: dark) { @@ -828,19 +850,19 @@ body { /* ------------------- Code Themes ------------------ */ .hljs { - color: var(--color-text); + color: var(--hl); } .hljs-comment, .hljs-quote { - color: #5c6370; + color: var(--hl-1); font-style: italic; } .hljs-doctag, .hljs-keyword, .hljs-formula { - color: #c678dd; + color: var(--hl-2); } .hljs-section, @@ -848,11 +870,11 @@ body { .hljs-selector-tag, .hljs-deletion, .hljs-subst { - color: #e06c75; + color: var(--hl-3); } .hljs-literal { - color: #56b6c2; + color: var(--hl-4); } .hljs-string, @@ -860,7 +882,7 @@ body { .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string { - color: #98c379; + color: var(--hl-5); } .hljs-attr, @@ -871,7 +893,7 @@ body { .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number { - color: #d19a66; + color: var(--hl-6); } .hljs-symbol, @@ -880,13 +902,13 @@ body { .hljs-meta, .hljs-selector-id, .hljs-title { - color: #61aeee; + color: var(--hl-7); } .hljs-built_in, .hljs-title.class_, .hljs-class .hljs-title { - color: #e6c07b; + color: var(--hl-8); } .hljs-emphasis { diff --git a/apps/examples/src/1-basic/BasicExample.tsx b/apps/examples/src/1-basic/BasicExample.tsx index b7304606c..1d189eac9 100644 --- a/apps/examples/src/1-basic/BasicExample.tsx +++ b/apps/examples/src/1-basic/BasicExample.tsx @@ -1,6 +1,5 @@ import { Tldraw } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' export default function Example() { return ( diff --git a/apps/examples/src/10-custom-components/CustomComponentsExample.tsx b/apps/examples/src/10-custom-components/CustomComponentsExample.tsx index 443757217..4af1f1b55 100644 --- a/apps/examples/src/10-custom-components/CustomComponentsExample.tsx +++ b/apps/examples/src/10-custom-components/CustomComponentsExample.tsx @@ -1,6 +1,5 @@ import { Tldraw, TLEditorComponents } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' const components: Partial = { Brush: ({ brush }) => ( diff --git a/apps/examples/src/11-user-presence/UserPresenceExample.tsx b/apps/examples/src/11-user-presence/UserPresenceExample.tsx index 9e3fc5f00..1cb29f327 100644 --- a/apps/examples/src/11-user-presence/UserPresenceExample.tsx +++ b/apps/examples/src/11-user-presence/UserPresenceExample.tsx @@ -1,7 +1,6 @@ /* eslint-disable no-inner-declarations */ import { InstancePresenceRecordType, Tldraw } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' import { useRef } from 'react' const USER_NAME = 'huppy da arrow' diff --git a/apps/examples/src/12-ui-events/UiEventsExample.tsx b/apps/examples/src/12-ui-events/UiEventsExample.tsx index fed4299e8..f24d29c58 100644 --- a/apps/examples/src/12-ui-events/UiEventsExample.tsx +++ b/apps/examples/src/12-ui-events/UiEventsExample.tsx @@ -1,6 +1,5 @@ import { TLUiEventHandler, Tldraw } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' import { useCallback, useState } from 'react' export default function UiEventsExample() { diff --git a/apps/examples/src/13-store-events/StoreEventsExample.tsx b/apps/examples/src/13-store-events/StoreEventsExample.tsx index b586483c7..c2077add1 100644 --- a/apps/examples/src/13-store-events/StoreEventsExample.tsx +++ b/apps/examples/src/13-store-events/StoreEventsExample.tsx @@ -1,6 +1,5 @@ import { Editor, TLEventMapHandler, Tldraw } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' import { useCallback, useEffect, useState } from 'react' export default function StoreEventsExample() { diff --git a/apps/examples/src/14-persistence/PersistenceExample.tsx b/apps/examples/src/14-persistence/PersistenceExample.tsx index 8316d6a16..fc7325435 100644 --- a/apps/examples/src/14-persistence/PersistenceExample.tsx +++ b/apps/examples/src/14-persistence/PersistenceExample.tsx @@ -1,6 +1,5 @@ import { Tldraw, createTLStore, defaultShapes } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' import { throttle } from '@tldraw/utils' import { useLayoutEffect, useState } from 'react' diff --git a/apps/examples/src/15-custom-zones/ZonesExample.tsx b/apps/examples/src/15-custom-zones/ZonesExample.tsx index fae8ed977..22143613b 100644 --- a/apps/examples/src/15-custom-zones/ZonesExample.tsx +++ b/apps/examples/src/15-custom-zones/ZonesExample.tsx @@ -1,7 +1,5 @@ import { Tldraw } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' - +import '@tldraw/tldraw/tldraw.css' export default function Example() { return (
diff --git a/apps/examples/src/16-custom-styles/CustomStylesExample.tsx b/apps/examples/src/16-custom-styles/CustomStylesExample.tsx index 4505a8bab..f54b78348 100644 --- a/apps/examples/src/16-custom-styles/CustomStylesExample.tsx +++ b/apps/examples/src/16-custom-styles/CustomStylesExample.tsx @@ -1,6 +1,5 @@ import { TLUiMenuGroup, Tldraw, menuItem, toolbarItem, useEditor } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' import { TLUiOverrides } from '@tldraw/ui/src/lib/overrides' import { track } from 'signia-react' import { CardShape, MyFilterStyle } from './CardShape' diff --git a/apps/examples/src/2-api/APIExample.tsx b/apps/examples/src/2-api/APIExample.tsx index 86e6ef716..c9b5d0dc9 100644 --- a/apps/examples/src/2-api/APIExample.tsx +++ b/apps/examples/src/2-api/APIExample.tsx @@ -7,8 +7,7 @@ import { createShapeId, useEditor, } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' import { useEffect } from 'react' // The tldraw component shares its App instance via its onMount callback prop. diff --git a/apps/examples/src/3-custom-config/CustomConfigExample.tsx b/apps/examples/src/3-custom-config/CustomConfigExample.tsx index 878e23d02..a45f68f33 100644 --- a/apps/examples/src/3-custom-config/CustomConfigExample.tsx +++ b/apps/examples/src/3-custom-config/CustomConfigExample.tsx @@ -1,6 +1,5 @@ import { TLUiMenuGroup, Tldraw, menuItem, toolbarItem } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' import { CardShape } from './CardShape' const shapes = [CardShape] diff --git a/apps/examples/src/4-custom-ui/CustomUiExample.tsx b/apps/examples/src/4-custom-ui/CustomUiExample.tsx index 470b42359..1bb8c5b31 100644 --- a/apps/examples/src/4-custom-ui/CustomUiExample.tsx +++ b/apps/examples/src/4-custom-ui/CustomUiExample.tsx @@ -1,5 +1,5 @@ import { Canvas, TldrawEditor, defaultShapes, defaultTools, useEditor } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' +import '@tldraw/tldraw/tldraw.css' import { useEffect } from 'react' import { track } from 'signia-react' import './custom-ui.css' diff --git a/apps/examples/src/5-exploded/ExplodedExample.tsx b/apps/examples/src/5-exploded/ExplodedExample.tsx index 147336172..b7602478b 100644 --- a/apps/examples/src/5-exploded/ExplodedExample.tsx +++ b/apps/examples/src/5-exploded/ExplodedExample.tsx @@ -6,8 +6,7 @@ import { defaultShapes, defaultTools, } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' export default function ExplodedExample() { return ( diff --git a/apps/examples/src/6-scroll/ScrollExample.tsx b/apps/examples/src/6-scroll/ScrollExample.tsx index 6e97215da..c4a2e69d9 100644 --- a/apps/examples/src/6-scroll/ScrollExample.tsx +++ b/apps/examples/src/6-scroll/ScrollExample.tsx @@ -1,6 +1,5 @@ import { Tldraw } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' export default function ScrollExample() { return ( diff --git a/apps/examples/src/7-multiple/MultipleExample.tsx b/apps/examples/src/7-multiple/MultipleExample.tsx index 87726e24b..98702fb4c 100644 --- a/apps/examples/src/7-multiple/MultipleExample.tsx +++ b/apps/examples/src/7-multiple/MultipleExample.tsx @@ -1,6 +1,5 @@ import { Tldraw } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' export default function MultipleExample() { return ( diff --git a/apps/examples/src/8-error-boundary/ErrorBoundaryExample.tsx b/apps/examples/src/8-error-boundary/ErrorBoundaryExample.tsx index 4a680d84d..fca0caee1 100644 --- a/apps/examples/src/8-error-boundary/ErrorBoundaryExample.tsx +++ b/apps/examples/src/8-error-boundary/ErrorBoundaryExample.tsx @@ -1,6 +1,5 @@ import { createShapeId, Tldraw, TLShapePartial } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' import { ErrorShape } from './ErrorShape' const shapes = [ErrorShape] diff --git a/apps/examples/src/9-hide-ui/HideUiExample.tsx b/apps/examples/src/9-hide-ui/HideUiExample.tsx index 3bb58ce92..65f799256 100644 --- a/apps/examples/src/9-hide-ui/HideUiExample.tsx +++ b/apps/examples/src/9-hide-ui/HideUiExample.tsx @@ -1,6 +1,5 @@ import { Tldraw } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' export default function HideUiExample() { return ( diff --git a/apps/examples/src/end-to-end/end-to-end.tsx b/apps/examples/src/end-to-end/end-to-end.tsx index 17128da62..8e108567b 100644 --- a/apps/examples/src/end-to-end/end-to-end.tsx +++ b/apps/examples/src/end-to-end/end-to-end.tsx @@ -1,6 +1,5 @@ import { Tldraw } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' export default function EndToEnd() { ;(window as any).__tldraw_editor_events = [] diff --git a/apps/examples/src/yjs/YjsExample.tsx b/apps/examples/src/yjs/YjsExample.tsx index e194d4367..917f2c440 100644 --- a/apps/examples/src/yjs/YjsExample.tsx +++ b/apps/examples/src/yjs/YjsExample.tsx @@ -1,6 +1,5 @@ import { Tldraw, useEditor } from '@tldraw/tldraw' -import '@tldraw/tldraw/editor.css' -import '@tldraw/tldraw/ui.css' +import '@tldraw/tldraw/tldraw.css' import { track } from 'signia-react' import { useYjsStore } from './useYjsStore' diff --git a/packages/editor/editor.css b/packages/editor/editor.css index 74de5cb79..edd6a20a6 100644 --- a/packages/editor/editor.css +++ b/packages/editor/editor.css @@ -1,6 +1,4 @@ -/* -https://alex.dytry.ch/toys/palette/?palette=%7B%22families%22:%5B%22black%22,%22grey%22,%22white%22,%22green%22,%22light-green%22,%22blue%22,%22light-blue%22,%22violet%22,%22light-violet%22,%22red%22,%22light-red%22,%22orange%22,%22yellow%22%5D,%22shades%22:%5B%22light-mode%22,%22dark-mode%22,%22hl-light%22,%22hl-dark%22%5D,%22colors%22:%5B%5B%5B0.2308,0,null%5D,%5B0.9097,0,null%5D,%5B0.2308,0,null%5D,%5B0.2308,0,null%5D%5D,%5B%5B0.7692,0.0145,248.02%5D,%5B0.6778,0.0118,256.72%5D,%5B0.7692,0.0145,248.02%5D,%5B0.7692,0.0145,248.02%5D%5D,%5B%5B1,0,null%5D,%5B0.2308,0,null%5D,%5B1,0,null%5D,%5B1,0,null%5D%5D,%5B%5B0.5851,0.1227,164.1%5D,%5B0.5319,0.0811,162.23%5D,%5B0.8729,0.2083,173.3%5D,%5B0.5851,0.152,173.3%5D%5D,%5B%5B0.7146,0.1835,146.44%5D,%5B0.6384,0.1262,143.36%5D,%5B0.8603,0.2438,140.11%5D,%5B0.6082,0.2286,140.11%5D%5D,%5B%5B0.5566,0.2082,268.35%5D,%5B0.4961,0.1644,270.65%5D,%5B0.7158,0.173,243.85%5D,%5B0.5573,0.178,243.85%5D%5D,%5B%5B0.718,0.1422,246.06%5D,%5B0.6366,0.1055,250.98%5D,%5B0.8615,0.1896,200.03%5D,%5B0.707,0.161,200.03%5D%5D,%5B%5B0.5783,0.2186,319.15%5D,%5B0.5043,0.1647,315.37%5D,%5B0.728,0.2001,307.45%5D,%5B0.5433,0.2927,307.45%5D%5D,%5B%5B0.7904,0.1516,319.77%5D,%5B0.6841,0.1139,315.99%5D,%5B0.812,0.21,327.8%5D,%5B0.5668,0.281,327.8%5D%5D,%5B%5B0.5928,0.2106,26.53%5D,%5B0.5112,0.1455,26.18%5D,%5B0.7326,0.21,20.59%5D,%5B0.554,0.2461,20.59%5D%5D,%5B%5B0.7563,0.146,21.1%5D,%5B0.6561,0.0982,20.86%5D,%5B0.7749,0.178,6.8%5D,%5B0.5565,0.2454,6.8%5D%5D,%5B%5B0.6851,0.1954,44.57%5D,%5B0.5958,0.1366,46.6%5D,%5B0.8207,0.175,68.62%5D,%5B0.6567,0.164,68.61%5D%5D,%5B%5B0.8503,0.1149,68.95%5D,%5B0.7404,0.0813,72.25%5D,%5B0.8939,0.2137,100.36%5D,%5B0.7776,0.186,100.36%5D%5D%5D%7D&selected=3 -*/ +/* @tldraw/editor */ .tl-container { width: 100%; diff --git a/packages/tldraw/package.json b/packages/tldraw/package.json index 2c827b13f..db9fc5342 100644 --- a/packages/tldraw/package.json +++ b/packages/tldraw/package.json @@ -41,8 +41,7 @@ "lint": "yarn run -T tsx ../../scripts/lint.ts" }, "files": [ - "editor.css", - "ui.css" + "tldraw.css" ], "dependencies": { "@tldraw/editor": "workspace:*", diff --git a/packages/tldraw/scripts/copy-css-files.mjs b/packages/tldraw/scripts/copy-css-files.mjs index 757d3179e..fad1c4759 100644 --- a/packages/tldraw/scripts/copy-css-files.mjs +++ b/packages/tldraw/scripts/copy-css-files.mjs @@ -1,8 +1,5 @@ -import { join } from 'path' - -import { existsSync, rmSync } from 'fs' -import { copy } from 'fs-extra' -import { dirname } from 'path' +import { readFileSync, writeFileSync } from 'fs' +import { dirname, join } from 'path' import { fileURLToPath } from 'url' const __filename = fileURLToPath(import.meta.url) @@ -10,21 +7,21 @@ const __dirname = dirname(__filename) const packageDir = join(__dirname, '..') -const files = [ - { - from: join(packageDir, '..', 'editor', 'editor.css'), - to: join(packageDir, 'editor.css'), +let combinedContent = [ + join(packageDir, '..', 'editor', 'editor.css'), + join(packageDir, '..', 'ui', 'ui.css'), +].reduce( + (acc, path) => { + const content = readFileSync(path, 'utf8') + acc += content + '\n' + return acc }, - { - from: join(packageDir, '..', 'ui', 'ui.css'), - to: join(packageDir, 'ui.css'), - }, -] + `/* THIS CSS FILE IS GENERATED! DO NOT EDIT. OR EDIT. I'M A COMMENT NOT A COP */ +/* This file is created by the copy-css-files.mjs script in @tldraw/tldraw. */ +/* It combines @tldraw/editor/editor.css and @tldraw/ui/ui.css */ -for (const { from, to } of files) { - if (existsSync(to)) { - rmSync(to) - } +` +) - await copy(from, to) -} +const destination = join(packageDir, 'tldraw.css') +writeFileSync(destination, combinedContent) diff --git a/packages/ui/ui.css b/packages/ui/ui.css index 6ba628524..b8db68fa8 100644 --- a/packages/ui/ui.css +++ b/packages/ui/ui.css @@ -1,3 +1,5 @@ +/* @tldraw/ui */ + .tl-container { --layer-panels: 300; --layer-menus: 400;