@tldraw/tlschema 4.2.0-next.f100cedfc45b → 4.3.0-canary.071cf881c1c6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/index.d.ts +34 -1
- package/dist-cjs/index.js +2 -1
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/misc/TLHandle.js.map +1 -1
- package/dist-cjs/styles/TLColorStyle.js +26 -0
- package/dist-cjs/styles/TLColorStyle.js.map +2 -2
- package/dist-cjs/styles/TLFillStyle.js +1 -1
- package/dist-cjs/styles/TLFillStyle.js.map +2 -2
- package/dist-esm/index.d.mts +34 -1
- package/dist-esm/index.mjs +3 -1
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/misc/TLHandle.mjs.map +1 -1
- package/dist-esm/styles/TLColorStyle.mjs +26 -0
- package/dist-esm/styles/TLColorStyle.mjs.map +2 -2
- package/dist-esm/styles/TLFillStyle.mjs +1 -1
- package/dist-esm/styles/TLFillStyle.mjs.map +2 -2
- package/package.json +5 -5
- package/src/index.ts +1 -0
- package/src/misc/TLHandle.ts +2 -0
- package/src/styles/TLColorStyle.ts +27 -0
- package/src/styles/TLFillStyle.ts +1 -1
package/dist-esm/index.mjs
CHANGED
|
@@ -149,6 +149,7 @@ import {
|
|
|
149
149
|
defaultColorNames,
|
|
150
150
|
DefaultColorStyle,
|
|
151
151
|
DefaultColorThemePalette,
|
|
152
|
+
DefaultLabelColorStyle,
|
|
152
153
|
getColorValue,
|
|
153
154
|
getDefaultColorTheme
|
|
154
155
|
} from "./styles/TLColorStyle.mjs";
|
|
@@ -172,7 +173,7 @@ import {
|
|
|
172
173
|
} from "./translations/translations.mjs";
|
|
173
174
|
registerTldrawLibraryVersion(
|
|
174
175
|
"@tldraw/tlschema",
|
|
175
|
-
"4.
|
|
176
|
+
"4.3.0-canary.071cf881c1c6",
|
|
176
177
|
"esm"
|
|
177
178
|
);
|
|
178
179
|
export {
|
|
@@ -188,6 +189,7 @@ export {
|
|
|
188
189
|
DefaultFontFamilies,
|
|
189
190
|
DefaultFontStyle,
|
|
190
191
|
DefaultHorizontalAlignStyle,
|
|
192
|
+
DefaultLabelColorStyle,
|
|
191
193
|
DefaultSizeStyle,
|
|
192
194
|
DefaultTextAlignStyle,
|
|
193
195
|
DefaultVerticalAlignStyle,
|
package/dist-esm/index.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * @fileoverview\n * Main entry point for the tldraw schema package. Exports the complete type system,\n * data structures, validation, and migrations for tldraw's persisted data.\n *\n * This package provides:\n * - Schema creation utilities (createTLSchema, defaultShapeSchemas, defaultBindingSchemas)\n * - All built-in shape types (TLGeoShape, TLTextShape, TLArrowShape, etc.)\n * - Asset management types and validators (TLImageAsset, TLVideoAsset, TLBookmarkAsset)\n * - Binding system for shape relationships (TLArrowBinding)\n * - Store integration types (TLStore, TLStoreProps, TLStoreSnapshot)\n * - Style properties for consistent styling (DefaultColorStyle, DefaultSizeStyle, etc.)\n * - Validation utilities and type guards\n * - Migration systems for schema evolution\n * - Geometry and utility types\n *\n * @example\n * ```ts\n * import { createTLSchema, defaultShapeSchemas, TLStore } from '@tldraw/tlschema'\n *\n * // Create a schema with default shapes\n * const schema = createTLSchema({\n * shapes: defaultShapeSchemas\n * })\n *\n * // Use with a store\n * const store = new Store({ schema })\n * ```\n *\n * @public\n */\n\nimport { registerTldrawLibraryVersion } from '@tldraw/utils'\nexport { assetIdValidator, createAssetValidator, type TLBaseAsset } from './assets/TLBaseAsset'\nexport { type TLBookmarkAsset } from './assets/TLBookmarkAsset'\nexport { type TLImageAsset } from './assets/TLImageAsset'\nexport { type TLVideoAsset } from './assets/TLVideoAsset'\nexport {\n\tarrowBindingMigrations,\n\tarrowBindingProps,\n\tarrowBindingVersions,\n\tElbowArrowSnap,\n\ttype TLArrowBinding,\n\ttype TLArrowBindingProps,\n} from './bindings/TLArrowBinding'\nexport {\n\tbindingIdValidator,\n\tcreateBindingValidator,\n\ttype TLBaseBinding,\n} from './bindings/TLBaseBinding'\nexport {\n\tcreatePresenceStateDerivation,\n\tgetDefaultUserPresence,\n\ttype TLPresenceStateInfo,\n\ttype TLPresenceUserInfo,\n} from './createPresenceStateDerivation'\nexport {\n\tcreateTLSchema,\n\tdefaultBindingSchemas,\n\tdefaultShapeSchemas,\n\ttype SchemaPropsInfo,\n\ttype TLSchema,\n} from './createTLSchema'\nexport {\n\tboxModelValidator,\n\tvecModelValidator,\n\ttype BoxModel,\n\ttype VecModel,\n} from './misc/geometry-types'\nexport { idValidator } from './misc/id-validator'\nexport {\n\tcanvasUiColorTypeValidator,\n\tTL_CANVAS_UI_COLOR_TYPES,\n\ttype TLCanvasUiColor,\n} from './misc/TLColor'\nexport { TL_CURSOR_TYPES, type TLCursor, type TLCursorType } from './misc/TLCursor'\nexport { TL_HANDLE_TYPES, type TLHandle, type TLHandleType } from './misc/TLHandle'\nexport { opacityValidator, type TLOpacityType } from './misc/TLOpacity'\nexport { richTextValidator, toRichText, type TLRichText } from './misc/TLRichText'\nexport { scribbleValidator, TL_SCRIBBLE_STATES, type TLScribble } from './misc/TLScribble'\nexport {\n\tassetMigrations,\n\tAssetRecordType,\n\tassetValidator,\n\ttype TLAsset,\n\ttype TLAssetId,\n\ttype TLAssetPartial,\n\ttype TLAssetShape,\n} from './records/TLAsset'\nexport {\n\tcreateBindingId,\n\tcreateBindingPropsMigrationIds,\n\tcreateBindingPropsMigrationSequence,\n\tisBinding,\n\tisBindingId,\n\trootBindingMigrations,\n\ttype TLBinding,\n\ttype TLBindingCreate,\n\ttype TLBindingId,\n\ttype TLBindingUpdate,\n\ttype TLDefaultBinding,\n\ttype TLUnknownBinding,\n} from './records/TLBinding'\nexport { CameraRecordType, type TLCamera, type TLCameraId } from './records/TLCamera'\nexport {\n\tDocumentRecordType,\n\tisDocument,\n\tTLDOCUMENT_ID,\n\ttype TLDocument,\n} from './records/TLDocument'\nexport {\n\tpluckPreservingValues,\n\tTLINSTANCE_ID,\n\ttype TLInstance,\n\ttype TLInstanceId,\n} from './records/TLInstance'\nexport {\n\tisPageId,\n\tpageIdValidator,\n\tPageRecordType,\n\ttype TLPage,\n\ttype TLPageId,\n} from './records/TLPage'\nexport {\n\tInstancePageStateRecordType,\n\ttype TLInstancePageState,\n\ttype TLInstancePageStateId,\n} from './records/TLPageState'\nexport {\n\tPointerRecordType,\n\tTLPOINTER_ID,\n\ttype TLPointer,\n\ttype TLPointerId,\n} from './records/TLPointer'\nexport {\n\tInstancePresenceRecordType,\n\ttype TLInstancePresence,\n\ttype TLInstancePresenceID,\n} from './records/TLPresence'\nexport { type TLRecord } from './records/TLRecord'\nexport {\n\tcreateShapeId,\n\tcreateShapePropsMigrationIds,\n\tcreateShapePropsMigrationSequence,\n\tgetShapePropKeysByStyle,\n\tisShape,\n\tisShapeId,\n\trootShapeMigrations,\n\ttype TLDefaultShape,\n\ttype TLParentId,\n\ttype TLShape,\n\ttype TLShapeId,\n\ttype TLShapePartial,\n\ttype TLUnknownShape,\n} from './records/TLShape'\nexport {\n\ttype RecordProps,\n\ttype RecordPropsType,\n\ttype TLPropsMigration,\n\ttype TLPropsMigrations,\n} from './recordsWithProps'\nexport { type ShapeWithCrop, type TLShapeCrop } from './shapes/ShapeWithCrop'\nexport {\n\tArrowShapeArrowheadEndStyle,\n\tArrowShapeArrowheadStartStyle,\n\tArrowShapeKindStyle,\n\tarrowShapeMigrations,\n\tarrowShapeProps,\n\tarrowShapeVersions,\n\ttype TLArrowShape,\n\ttype TLArrowShapeArrowheadStyle,\n\ttype TLArrowShapeKind,\n\ttype TLArrowShapeProps,\n} from './shapes/TLArrowShape'\nexport {\n\tcreateShapeValidator,\n\tparentIdValidator,\n\tshapeIdValidator,\n\ttype TLBaseShape,\n} from './shapes/TLBaseShape'\nexport {\n\tbookmarkShapeMigrations,\n\tbookmarkShapeProps,\n\ttype TLBookmarkShape,\n\ttype TLBookmarkShapeProps,\n} from './shapes/TLBookmarkShape'\nexport {\n\tdrawShapeMigrations,\n\tdrawShapeProps,\n\ttype TLDrawShape,\n\ttype TLDrawShapeProps,\n\ttype TLDrawShapeSegment,\n} from './shapes/TLDrawShape'\nexport {\n\tembedShapeMigrations,\n\tembedShapeProps,\n\ttype TLEmbedShape,\n\ttype TLEmbedShapeProps,\n} from './shapes/TLEmbedShape'\nexport {\n\tframeShapeMigrations,\n\tframeShapeProps,\n\ttype TLFrameShape,\n\ttype TLFrameShapeProps,\n} from './shapes/TLFrameShape'\nexport {\n\tGeoShapeGeoStyle,\n\tgeoShapeMigrations,\n\tgeoShapeProps,\n\ttype TLGeoShape,\n\ttype TLGeoShapeGeoStyle,\n\ttype TLGeoShapeProps,\n} from './shapes/TLGeoShape'\nexport {\n\tgroupShapeMigrations,\n\tgroupShapeProps,\n\ttype TLGroupShape,\n\ttype TLGroupShapeProps,\n} from './shapes/TLGroupShape'\nexport {\n\thighlightShapeMigrations,\n\thighlightShapeProps,\n\ttype TLHighlightShape,\n\ttype TLHighlightShapeProps,\n} from './shapes/TLHighlightShape'\nexport {\n\tImageShapeCrop,\n\timageShapeMigrations,\n\timageShapeProps,\n\ttype TLImageShape,\n\ttype TLImageShapeProps,\n} from './shapes/TLImageShape'\nexport {\n\tlineShapeMigrations,\n\tlineShapeProps,\n\tLineShapeSplineStyle,\n\ttype TLLineShape,\n\ttype TLLineShapePoint,\n\ttype TLLineShapeProps,\n\ttype TLLineShapeSplineStyle,\n} from './shapes/TLLineShape'\nexport {\n\tnoteShapeMigrations,\n\tnoteShapeProps,\n\ttype TLNoteShape,\n\ttype TLNoteShapeProps,\n} from './shapes/TLNoteShape'\nexport {\n\ttextShapeMigrations,\n\ttextShapeProps,\n\ttype TLTextShape,\n\ttype TLTextShapeProps,\n} from './shapes/TLTextShape'\nexport {\n\tvideoShapeMigrations,\n\tvideoShapeProps,\n\ttype TLVideoShape,\n\ttype TLVideoShapeProps,\n} from './shapes/TLVideoShape'\nexport { EnumStyleProp, StyleProp, type StylePropValue } from './styles/StyleProp'\nexport {\n\tdefaultColorNames,\n\tDefaultColorStyle,\n\tDefaultColorThemePalette,\n\tgetColorValue,\n\tgetDefaultColorTheme,\n\ttype TLDefaultColorStyle,\n\ttype TLDefaultColorTheme,\n\ttype TLDefaultColorThemeColor,\n} from './styles/TLColorStyle'\nexport { DefaultDashStyle, type TLDefaultDashStyle } from './styles/TLDashStyle'\nexport { DefaultFillStyle, type TLDefaultFillStyle } from './styles/TLFillStyle'\nexport {\n\tDefaultFontFamilies,\n\tDefaultFontStyle,\n\ttype TLDefaultFontStyle,\n} from './styles/TLFontStyle'\nexport {\n\tDefaultHorizontalAlignStyle,\n\ttype TLDefaultHorizontalAlignStyle,\n} from './styles/TLHorizontalAlignStyle'\nexport { DefaultSizeStyle, type TLDefaultSizeStyle } from './styles/TLSizeStyle'\nexport { DefaultTextAlignStyle, type TLDefaultTextAlignStyle } from './styles/TLTextAlignStyle'\nexport {\n\tDefaultVerticalAlignStyle,\n\ttype TLDefaultVerticalAlignStyle,\n} from './styles/TLVerticalAlignStyle'\nexport {\n\ttype TLAssetContext,\n\ttype TLAssetStore,\n\ttype TLSerializedStore,\n\ttype TLStore,\n\ttype TLStoreProps,\n\ttype TLStoreSchema,\n\ttype TLStoreSnapshot,\n} from './TLStore'\nexport {\n\tgetDefaultTranslationLocale,\n\tLANGUAGES,\n\ttype TLLanguage,\n} from './translations/translations'\nexport { type SetValue } from './util-types'\n\nregisterTldrawLibraryVersion(\n\t(globalThis as any).TLDRAW_LIBRARY_NAME,\n\t(globalThis as any).TLDRAW_LIBRARY_VERSION,\n\t(globalThis as any).TLDRAW_LIBRARY_MODULES\n)\n"],
|
|
5
|
-
"mappings": "AAgCA,SAAS,oCAAoC;AAC7C,SAAS,kBAAkB,4BAA8C;AAIzE;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP,SAAS,mBAAmB;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AACP,SAAS,uBAAyD;AAClE,SAAS,uBAAyD;AAClE,SAAS,wBAA4C;AACrD,SAAS,mBAAmB,kBAAmC;AAC/D,SAAS,mBAAmB,0BAA2C;AACvE;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAKM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAOM;AACP,SAAS,wBAAwD;AACjE;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAEM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,OAGM;AAEP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAOM;AAQP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAEM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAIM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAIM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAKM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP,SAAS,eAAe,iBAAsC;AAC9D;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIM;AACP,SAAS,wBAAiD;AAC1D,SAAS,wBAAiD;AAC1D;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AACP;AAAA,EACC;AAAA,OAEM;AACP,SAAS,wBAAiD;AAC1D,SAAS,6BAA2D;AACpE;AAAA,EACC;AAAA,OAEM;AAUP;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF;",
|
|
4
|
+
"sourcesContent": ["/**\n * @fileoverview\n * Main entry point for the tldraw schema package. Exports the complete type system,\n * data structures, validation, and migrations for tldraw's persisted data.\n *\n * This package provides:\n * - Schema creation utilities (createTLSchema, defaultShapeSchemas, defaultBindingSchemas)\n * - All built-in shape types (TLGeoShape, TLTextShape, TLArrowShape, etc.)\n * - Asset management types and validators (TLImageAsset, TLVideoAsset, TLBookmarkAsset)\n * - Binding system for shape relationships (TLArrowBinding)\n * - Store integration types (TLStore, TLStoreProps, TLStoreSnapshot)\n * - Style properties for consistent styling (DefaultColorStyle, DefaultSizeStyle, etc.)\n * - Validation utilities and type guards\n * - Migration systems for schema evolution\n * - Geometry and utility types\n *\n * @example\n * ```ts\n * import { createTLSchema, defaultShapeSchemas, TLStore } from '@tldraw/tlschema'\n *\n * // Create a schema with default shapes\n * const schema = createTLSchema({\n * shapes: defaultShapeSchemas\n * })\n *\n * // Use with a store\n * const store = new Store({ schema })\n * ```\n *\n * @public\n */\n\nimport { registerTldrawLibraryVersion } from '@tldraw/utils'\nexport { assetIdValidator, createAssetValidator, type TLBaseAsset } from './assets/TLBaseAsset'\nexport { type TLBookmarkAsset } from './assets/TLBookmarkAsset'\nexport { type TLImageAsset } from './assets/TLImageAsset'\nexport { type TLVideoAsset } from './assets/TLVideoAsset'\nexport {\n\tarrowBindingMigrations,\n\tarrowBindingProps,\n\tarrowBindingVersions,\n\tElbowArrowSnap,\n\ttype TLArrowBinding,\n\ttype TLArrowBindingProps,\n} from './bindings/TLArrowBinding'\nexport {\n\tbindingIdValidator,\n\tcreateBindingValidator,\n\ttype TLBaseBinding,\n} from './bindings/TLBaseBinding'\nexport {\n\tcreatePresenceStateDerivation,\n\tgetDefaultUserPresence,\n\ttype TLPresenceStateInfo,\n\ttype TLPresenceUserInfo,\n} from './createPresenceStateDerivation'\nexport {\n\tcreateTLSchema,\n\tdefaultBindingSchemas,\n\tdefaultShapeSchemas,\n\ttype SchemaPropsInfo,\n\ttype TLSchema,\n} from './createTLSchema'\nexport {\n\tboxModelValidator,\n\tvecModelValidator,\n\ttype BoxModel,\n\ttype VecModel,\n} from './misc/geometry-types'\nexport { idValidator } from './misc/id-validator'\nexport {\n\tcanvasUiColorTypeValidator,\n\tTL_CANVAS_UI_COLOR_TYPES,\n\ttype TLCanvasUiColor,\n} from './misc/TLColor'\nexport { TL_CURSOR_TYPES, type TLCursor, type TLCursorType } from './misc/TLCursor'\nexport { TL_HANDLE_TYPES, type TLHandle, type TLHandleType } from './misc/TLHandle'\nexport { opacityValidator, type TLOpacityType } from './misc/TLOpacity'\nexport { richTextValidator, toRichText, type TLRichText } from './misc/TLRichText'\nexport { scribbleValidator, TL_SCRIBBLE_STATES, type TLScribble } from './misc/TLScribble'\nexport {\n\tassetMigrations,\n\tAssetRecordType,\n\tassetValidator,\n\ttype TLAsset,\n\ttype TLAssetId,\n\ttype TLAssetPartial,\n\ttype TLAssetShape,\n} from './records/TLAsset'\nexport {\n\tcreateBindingId,\n\tcreateBindingPropsMigrationIds,\n\tcreateBindingPropsMigrationSequence,\n\tisBinding,\n\tisBindingId,\n\trootBindingMigrations,\n\ttype TLBinding,\n\ttype TLBindingCreate,\n\ttype TLBindingId,\n\ttype TLBindingUpdate,\n\ttype TLDefaultBinding,\n\ttype TLUnknownBinding,\n} from './records/TLBinding'\nexport { CameraRecordType, type TLCamera, type TLCameraId } from './records/TLCamera'\nexport {\n\tDocumentRecordType,\n\tisDocument,\n\tTLDOCUMENT_ID,\n\ttype TLDocument,\n} from './records/TLDocument'\nexport {\n\tpluckPreservingValues,\n\tTLINSTANCE_ID,\n\ttype TLInstance,\n\ttype TLInstanceId,\n} from './records/TLInstance'\nexport {\n\tisPageId,\n\tpageIdValidator,\n\tPageRecordType,\n\ttype TLPage,\n\ttype TLPageId,\n} from './records/TLPage'\nexport {\n\tInstancePageStateRecordType,\n\ttype TLInstancePageState,\n\ttype TLInstancePageStateId,\n} from './records/TLPageState'\nexport {\n\tPointerRecordType,\n\tTLPOINTER_ID,\n\ttype TLPointer,\n\ttype TLPointerId,\n} from './records/TLPointer'\nexport {\n\tInstancePresenceRecordType,\n\ttype TLInstancePresence,\n\ttype TLInstancePresenceID,\n} from './records/TLPresence'\nexport { type TLRecord } from './records/TLRecord'\nexport {\n\tcreateShapeId,\n\tcreateShapePropsMigrationIds,\n\tcreateShapePropsMigrationSequence,\n\tgetShapePropKeysByStyle,\n\tisShape,\n\tisShapeId,\n\trootShapeMigrations,\n\ttype TLDefaultShape,\n\ttype TLParentId,\n\ttype TLShape,\n\ttype TLShapeId,\n\ttype TLShapePartial,\n\ttype TLUnknownShape,\n} from './records/TLShape'\nexport {\n\ttype RecordProps,\n\ttype RecordPropsType,\n\ttype TLPropsMigration,\n\ttype TLPropsMigrations,\n} from './recordsWithProps'\nexport { type ShapeWithCrop, type TLShapeCrop } from './shapes/ShapeWithCrop'\nexport {\n\tArrowShapeArrowheadEndStyle,\n\tArrowShapeArrowheadStartStyle,\n\tArrowShapeKindStyle,\n\tarrowShapeMigrations,\n\tarrowShapeProps,\n\tarrowShapeVersions,\n\ttype TLArrowShape,\n\ttype TLArrowShapeArrowheadStyle,\n\ttype TLArrowShapeKind,\n\ttype TLArrowShapeProps,\n} from './shapes/TLArrowShape'\nexport {\n\tcreateShapeValidator,\n\tparentIdValidator,\n\tshapeIdValidator,\n\ttype TLBaseShape,\n} from './shapes/TLBaseShape'\nexport {\n\tbookmarkShapeMigrations,\n\tbookmarkShapeProps,\n\ttype TLBookmarkShape,\n\ttype TLBookmarkShapeProps,\n} from './shapes/TLBookmarkShape'\nexport {\n\tdrawShapeMigrations,\n\tdrawShapeProps,\n\ttype TLDrawShape,\n\ttype TLDrawShapeProps,\n\ttype TLDrawShapeSegment,\n} from './shapes/TLDrawShape'\nexport {\n\tembedShapeMigrations,\n\tembedShapeProps,\n\ttype TLEmbedShape,\n\ttype TLEmbedShapeProps,\n} from './shapes/TLEmbedShape'\nexport {\n\tframeShapeMigrations,\n\tframeShapeProps,\n\ttype TLFrameShape,\n\ttype TLFrameShapeProps,\n} from './shapes/TLFrameShape'\nexport {\n\tGeoShapeGeoStyle,\n\tgeoShapeMigrations,\n\tgeoShapeProps,\n\ttype TLGeoShape,\n\ttype TLGeoShapeGeoStyle,\n\ttype TLGeoShapeProps,\n} from './shapes/TLGeoShape'\nexport {\n\tgroupShapeMigrations,\n\tgroupShapeProps,\n\ttype TLGroupShape,\n\ttype TLGroupShapeProps,\n} from './shapes/TLGroupShape'\nexport {\n\thighlightShapeMigrations,\n\thighlightShapeProps,\n\ttype TLHighlightShape,\n\ttype TLHighlightShapeProps,\n} from './shapes/TLHighlightShape'\nexport {\n\tImageShapeCrop,\n\timageShapeMigrations,\n\timageShapeProps,\n\ttype TLImageShape,\n\ttype TLImageShapeProps,\n} from './shapes/TLImageShape'\nexport {\n\tlineShapeMigrations,\n\tlineShapeProps,\n\tLineShapeSplineStyle,\n\ttype TLLineShape,\n\ttype TLLineShapePoint,\n\ttype TLLineShapeProps,\n\ttype TLLineShapeSplineStyle,\n} from './shapes/TLLineShape'\nexport {\n\tnoteShapeMigrations,\n\tnoteShapeProps,\n\ttype TLNoteShape,\n\ttype TLNoteShapeProps,\n} from './shapes/TLNoteShape'\nexport {\n\ttextShapeMigrations,\n\ttextShapeProps,\n\ttype TLTextShape,\n\ttype TLTextShapeProps,\n} from './shapes/TLTextShape'\nexport {\n\tvideoShapeMigrations,\n\tvideoShapeProps,\n\ttype TLVideoShape,\n\ttype TLVideoShapeProps,\n} from './shapes/TLVideoShape'\nexport { EnumStyleProp, StyleProp, type StylePropValue } from './styles/StyleProp'\nexport {\n\tdefaultColorNames,\n\tDefaultColorStyle,\n\tDefaultColorThemePalette,\n\tDefaultLabelColorStyle,\n\tgetColorValue,\n\tgetDefaultColorTheme,\n\ttype TLDefaultColorStyle,\n\ttype TLDefaultColorTheme,\n\ttype TLDefaultColorThemeColor,\n} from './styles/TLColorStyle'\nexport { DefaultDashStyle, type TLDefaultDashStyle } from './styles/TLDashStyle'\nexport { DefaultFillStyle, type TLDefaultFillStyle } from './styles/TLFillStyle'\nexport {\n\tDefaultFontFamilies,\n\tDefaultFontStyle,\n\ttype TLDefaultFontStyle,\n} from './styles/TLFontStyle'\nexport {\n\tDefaultHorizontalAlignStyle,\n\ttype TLDefaultHorizontalAlignStyle,\n} from './styles/TLHorizontalAlignStyle'\nexport { DefaultSizeStyle, type TLDefaultSizeStyle } from './styles/TLSizeStyle'\nexport { DefaultTextAlignStyle, type TLDefaultTextAlignStyle } from './styles/TLTextAlignStyle'\nexport {\n\tDefaultVerticalAlignStyle,\n\ttype TLDefaultVerticalAlignStyle,\n} from './styles/TLVerticalAlignStyle'\nexport {\n\ttype TLAssetContext,\n\ttype TLAssetStore,\n\ttype TLSerializedStore,\n\ttype TLStore,\n\ttype TLStoreProps,\n\ttype TLStoreSchema,\n\ttype TLStoreSnapshot,\n} from './TLStore'\nexport {\n\tgetDefaultTranslationLocale,\n\tLANGUAGES,\n\ttype TLLanguage,\n} from './translations/translations'\nexport { type SetValue } from './util-types'\n\nregisterTldrawLibraryVersion(\n\t(globalThis as any).TLDRAW_LIBRARY_NAME,\n\t(globalThis as any).TLDRAW_LIBRARY_VERSION,\n\t(globalThis as any).TLDRAW_LIBRARY_MODULES\n)\n"],
|
|
5
|
+
"mappings": "AAgCA,SAAS,oCAAoC;AAC7C,SAAS,kBAAkB,4BAA8C;AAIzE;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP,SAAS,mBAAmB;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AACP,SAAS,uBAAyD;AAClE,SAAS,uBAAyD;AAClE,SAAS,wBAA4C;AACrD,SAAS,mBAAmB,kBAAmC;AAC/D,SAAS,mBAAmB,0BAA2C;AACvE;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAKM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAOM;AACP,SAAS,wBAAwD;AACjE;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAEM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,OAGM;AAEP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAOM;AAQP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAEM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAIM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAIM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAKM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP,SAAS,eAAe,iBAAsC;AAC9D;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIM;AACP,SAAS,wBAAiD;AAC1D,SAAS,wBAAiD;AAC1D;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AACP;AAAA,EACC;AAAA,OAEM;AACP,SAAS,wBAAiD;AAC1D,SAAS,6BAA2D;AACpE;AAAA,EACC;AAAA,OAEM;AAUP;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/misc/TLHandle.ts"],
|
|
4
|
-
"sourcesContent": ["import { IndexKey } from '@tldraw/utils'\nimport { SetValue } from '../util-types'\n\n/**\n * All available handle types used by shapes in the tldraw editor.\n *\n * Handles are interactive control points on shapes that allow users to\n * modify the shape's geometry. Different handle types serve different purposes:\n *\n * - `vertex`: A control point that defines a vertex of the shape\n * - `virtual`: A handle that exists between vertices for adding new points\n * - `create`: A handle for creating new geometry (like extending a line)\n * - `clone`: A handle for duplicating or cloning shape elements\n *\n * @example\n * ```ts\n * // Check if a handle type is valid\n * if (TL_HANDLE_TYPES.has('vertex')) {\n * console.log('Valid handle type')\n * }\n *\n * // Get all available handle types\n * const allHandleTypes = Array.from(TL_HANDLE_TYPES)\n * ```\n *\n * @public\n */\nexport const TL_HANDLE_TYPES = new Set(['vertex', 'virtual', 'create', 'clone'] as const)\n\n/**\n * A union type representing all available handle types.\n *\n * Handle types determine how a handle behaves when interacted with and\n * what kind of shape modification it enables.\n *\n * @example\n * ```ts\n * const vertexHandle: TLHandleType = 'vertex'\n * const virtualHandle: TLHandleType = 'virtual'\n * const createHandle: TLHandleType = 'create'\n * const cloneHandle: TLHandleType = 'clone'\n * ```\n *\n * @public\n */\nexport type TLHandleType = SetValue<typeof TL_HANDLE_TYPES>\n\n/**\n * A handle object representing an interactive control point on a shape.\n *\n * Handles allow users to manipulate shape geometry by dragging control points.\n * Each handle has a position, type, and various properties that control its\n * behavior during interactions.\n *\n * @example\n * ```ts\n * // A vertex handle for a line endpoint\n * const lineEndHandle: TLHandle = {\n * id: 'end',\n * label: 'End point',\n * type: 'vertex',\n * canSnap: true,\n * index: 'a1',\n * x: 100,\n * y: 50\n * }\n *\n * // A virtual handle for adding new points\n * const virtualHandle: TLHandle = {\n * id: 'virtual-1',\n * type: 'virtual',\n * canSnap: false,\n * index: 'a1V',\n * x: 75,\n * y: 25\n * }\n *\n * // A create handle for extending geometry\n * const createHandle: TLHandle = {\n * id: 'create',\n * type: 'create',\n * canSnap: true,\n * index: 'a2',\n * x: 200,\n * y: 100\n * }\n * ```\n *\n * @public\n */\nexport interface TLHandle {\n\t/** A unique identifier for the handle within the shape */\n\tid: string\n\t/** Optional human-readable label for the handle */\n\t// TODO(mime): this needs to be required.\n\tlabel?: string\n\t/** The type of handle, determining its behavior and interaction mode */\n\ttype: TLHandleType\n\t/**\n\t * @deprecated Use `snapType` instead. Whether this handle should snap to other geometry during interactions.\n\t */\n\tcanSnap?: boolean\n\t/** The type of snap to use for this handle */\n\tsnapType?: 'point' | 'align'\n\t/** The fractional index used for ordering handles */\n\tindex: IndexKey\n\t/** The x-coordinate of the handle in the shape's local coordinate system */\n\tx: number\n\t/** The y-coordinate of the handle in the shape's local coordinate system */\n\ty: number\n}\n"],
|
|
4
|
+
"sourcesContent": ["import { IndexKey } from '@tldraw/utils'\nimport { SetValue } from '../util-types'\n\n/**\n * All available handle types used by shapes in the tldraw editor.\n *\n * Handles are interactive control points on shapes that allow users to\n * modify the shape's geometry. Different handle types serve different purposes:\n *\n * - `vertex`: A control point that defines a vertex of the shape\n * - `virtual`: A handle that exists between vertices for adding new points\n * - `create`: A handle for creating new geometry (like extending a line)\n * - `clone`: A handle for duplicating or cloning shape elements\n *\n * @example\n * ```ts\n * // Check if a handle type is valid\n * if (TL_HANDLE_TYPES.has('vertex')) {\n * console.log('Valid handle type')\n * }\n *\n * // Get all available handle types\n * const allHandleTypes = Array.from(TL_HANDLE_TYPES)\n * ```\n *\n * @public\n */\nexport const TL_HANDLE_TYPES = new Set(['vertex', 'virtual', 'create', 'clone'] as const)\n\n/**\n * A union type representing all available handle types.\n *\n * Handle types determine how a handle behaves when interacted with and\n * what kind of shape modification it enables.\n *\n * @example\n * ```ts\n * const vertexHandle: TLHandleType = 'vertex'\n * const virtualHandle: TLHandleType = 'virtual'\n * const createHandle: TLHandleType = 'create'\n * const cloneHandle: TLHandleType = 'clone'\n * ```\n *\n * @public\n */\nexport type TLHandleType = SetValue<typeof TL_HANDLE_TYPES>\n\n/**\n * A handle object representing an interactive control point on a shape.\n *\n * Handles allow users to manipulate shape geometry by dragging control points.\n * Each handle has a position, type, and various properties that control its\n * behavior during interactions.\n *\n * @example\n * ```ts\n * // A vertex handle for a line endpoint\n * const lineEndHandle: TLHandle = {\n * id: 'end',\n * label: 'End point',\n * type: 'vertex',\n * canSnap: true,\n * index: 'a1',\n * x: 100,\n * y: 50\n * }\n *\n * // A virtual handle for adding new points\n * const virtualHandle: TLHandle = {\n * id: 'virtual-1',\n * type: 'virtual',\n * canSnap: false,\n * index: 'a1V',\n * x: 75,\n * y: 25\n * }\n *\n * // A create handle for extending geometry\n * const createHandle: TLHandle = {\n * id: 'create',\n * type: 'create',\n * canSnap: true,\n * index: 'a2',\n * x: 200,\n * y: 100\n * }\n * ```\n *\n * @public\n */\nexport interface TLHandle {\n\t/** A unique identifier for the handle within the shape */\n\tid: string\n\t/** Optional human-readable label for the handle */\n\t// TODO(mime): this needs to be required.\n\tlabel?: string\n\t/** The type of handle, determining its behavior and interaction mode */\n\ttype: TLHandleType\n\t/**\n\t * @deprecated Use `snapType` instead. Whether this handle should snap to other geometry during interactions.\n\t */\n\tcanSnap?: boolean\n\t/** The type of snap to use for this handle */\n\tsnapType?: 'point' | 'align'\n\t/** The ID of the handle to use as reference point for shift-modifier angle snapping */\n\tsnapReferenceHandleId?: string\n\t/** The fractional index used for ordering handles */\n\tindex: IndexKey\n\t/** The x-coordinate of the handle in the shape's local coordinate system */\n\tx: number\n\t/** The y-coordinate of the handle in the shape's local coordinate system */\n\ty: number\n}\n"],
|
|
5
5
|
"mappings": "AA2BO,MAAM,kBAAkB,oBAAI,IAAI,CAAC,UAAU,WAAW,UAAU,OAAO,CAAU;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -23,6 +23,7 @@ const DefaultColorThemePalette = {
|
|
|
23
23
|
black: {
|
|
24
24
|
solid: "#1d1d1d",
|
|
25
25
|
fill: "#1d1d1d",
|
|
26
|
+
linedFill: "#363636",
|
|
26
27
|
frameHeadingStroke: "#717171",
|
|
27
28
|
frameHeadingFill: "#ffffff",
|
|
28
29
|
frameStroke: "#717171",
|
|
@@ -38,6 +39,7 @@ const DefaultColorThemePalette = {
|
|
|
38
39
|
blue: {
|
|
39
40
|
solid: "#4465e9",
|
|
40
41
|
fill: "#4465e9",
|
|
42
|
+
linedFill: "#6580ec",
|
|
41
43
|
frameHeadingStroke: "#6681ec",
|
|
42
44
|
frameHeadingFill: "#f9fafe",
|
|
43
45
|
frameStroke: "#6681ec",
|
|
@@ -53,6 +55,7 @@ const DefaultColorThemePalette = {
|
|
|
53
55
|
green: {
|
|
54
56
|
solid: "#099268",
|
|
55
57
|
fill: "#099268",
|
|
58
|
+
linedFill: "#0bad7c",
|
|
56
59
|
frameHeadingStroke: "#37a684",
|
|
57
60
|
frameHeadingFill: "#f8fcfa",
|
|
58
61
|
frameStroke: "#37a684",
|
|
@@ -68,6 +71,7 @@ const DefaultColorThemePalette = {
|
|
|
68
71
|
grey: {
|
|
69
72
|
solid: "#9fa8b2",
|
|
70
73
|
fill: "#9fa8b2",
|
|
74
|
+
linedFill: "#bbc1c9",
|
|
71
75
|
frameHeadingStroke: "#aaaaab",
|
|
72
76
|
frameHeadingFill: "#fbfcfc",
|
|
73
77
|
frameStroke: "#aaaaab",
|
|
@@ -83,6 +87,7 @@ const DefaultColorThemePalette = {
|
|
|
83
87
|
"light-blue": {
|
|
84
88
|
solid: "#4ba1f1",
|
|
85
89
|
fill: "#4ba1f1",
|
|
90
|
+
linedFill: "#7abaf5",
|
|
86
91
|
frameHeadingStroke: "#6cb2f3",
|
|
87
92
|
frameHeadingFill: "#f8fbfe",
|
|
88
93
|
frameStroke: "#6cb2f3",
|
|
@@ -98,6 +103,7 @@ const DefaultColorThemePalette = {
|
|
|
98
103
|
"light-green": {
|
|
99
104
|
solid: "#4cb05e",
|
|
100
105
|
fill: "#4cb05e",
|
|
106
|
+
linedFill: "#7ec88c",
|
|
101
107
|
frameHeadingStroke: "#6dbe7c",
|
|
102
108
|
frameHeadingFill: "#f8fcf9",
|
|
103
109
|
frameStroke: "#6dbe7c",
|
|
@@ -113,6 +119,7 @@ const DefaultColorThemePalette = {
|
|
|
113
119
|
"light-red": {
|
|
114
120
|
solid: "#f87777",
|
|
115
121
|
fill: "#f87777",
|
|
122
|
+
linedFill: "#f99a9a",
|
|
116
123
|
frameHeadingStroke: "#f89090",
|
|
117
124
|
frameHeadingFill: "#fffafa",
|
|
118
125
|
frameStroke: "#f89090",
|
|
@@ -128,6 +135,7 @@ const DefaultColorThemePalette = {
|
|
|
128
135
|
"light-violet": {
|
|
129
136
|
solid: "#e085f4",
|
|
130
137
|
fill: "#e085f4",
|
|
138
|
+
linedFill: "#e9abf7",
|
|
131
139
|
frameHeadingStroke: "#e59bf5",
|
|
132
140
|
frameHeadingFill: "#fefaff",
|
|
133
141
|
frameStroke: "#e59bf5",
|
|
@@ -143,6 +151,7 @@ const DefaultColorThemePalette = {
|
|
|
143
151
|
orange: {
|
|
144
152
|
solid: "#e16919",
|
|
145
153
|
fill: "#e16919",
|
|
154
|
+
linedFill: "#ea8643",
|
|
146
155
|
frameHeadingStroke: "#e68544",
|
|
147
156
|
frameHeadingFill: "#fef9f6",
|
|
148
157
|
frameStroke: "#e68544",
|
|
@@ -158,6 +167,7 @@ const DefaultColorThemePalette = {
|
|
|
158
167
|
red: {
|
|
159
168
|
solid: "#e03131",
|
|
160
169
|
fill: "#e03131",
|
|
170
|
+
linedFill: "#e75f5f",
|
|
161
171
|
frameHeadingStroke: "#e55757",
|
|
162
172
|
frameHeadingFill: "#fef7f7",
|
|
163
173
|
frameStroke: "#e55757",
|
|
@@ -173,6 +183,7 @@ const DefaultColorThemePalette = {
|
|
|
173
183
|
violet: {
|
|
174
184
|
solid: "#ae3ec9",
|
|
175
185
|
fill: "#ae3ec9",
|
|
186
|
+
linedFill: "#be68d4",
|
|
176
187
|
frameHeadingStroke: "#bc62d3",
|
|
177
188
|
frameHeadingFill: "#fcf7fd",
|
|
178
189
|
frameStroke: "#bc62d3",
|
|
@@ -188,6 +199,7 @@ const DefaultColorThemePalette = {
|
|
|
188
199
|
yellow: {
|
|
189
200
|
solid: "#f1ac4b",
|
|
190
201
|
fill: "#f1ac4b",
|
|
202
|
+
linedFill: "#f5c27a",
|
|
191
203
|
frameHeadingStroke: "#f3bb6c",
|
|
192
204
|
frameHeadingFill: "#fefcf8",
|
|
193
205
|
frameStroke: "#f3bb6c",
|
|
@@ -203,6 +215,7 @@ const DefaultColorThemePalette = {
|
|
|
203
215
|
white: {
|
|
204
216
|
solid: "#FFFFFF",
|
|
205
217
|
fill: "#FFFFFF",
|
|
218
|
+
linedFill: "#ffffff",
|
|
206
219
|
semi: "#f5f5f5",
|
|
207
220
|
pattern: "#f9f9f9",
|
|
208
221
|
frameHeadingStroke: "#7d7d7d",
|
|
@@ -224,6 +237,7 @@ const DefaultColorThemePalette = {
|
|
|
224
237
|
black: {
|
|
225
238
|
solid: "#f2f2f2",
|
|
226
239
|
fill: "#f2f2f2",
|
|
240
|
+
linedFill: "#ffffff",
|
|
227
241
|
frameHeadingStroke: "#5c5c5c",
|
|
228
242
|
frameHeadingFill: "#252525",
|
|
229
243
|
frameStroke: "#5c5c5c",
|
|
@@ -240,6 +254,7 @@ const DefaultColorThemePalette = {
|
|
|
240
254
|
solid: "#4f72fc",
|
|
241
255
|
// 3c60f0
|
|
242
256
|
fill: "#4f72fc",
|
|
257
|
+
linedFill: "#3c5cdd",
|
|
243
258
|
frameHeadingStroke: "#384994",
|
|
244
259
|
frameHeadingFill: "#1C2036",
|
|
245
260
|
frameStroke: "#384994",
|
|
@@ -255,6 +270,7 @@ const DefaultColorThemePalette = {
|
|
|
255
270
|
green: {
|
|
256
271
|
solid: "#099268",
|
|
257
272
|
fill: "#099268",
|
|
273
|
+
linedFill: "#087856",
|
|
258
274
|
frameHeadingStroke: "#10513C",
|
|
259
275
|
frameHeadingFill: "#14241f",
|
|
260
276
|
frameStroke: "#10513C",
|
|
@@ -270,6 +286,7 @@ const DefaultColorThemePalette = {
|
|
|
270
286
|
grey: {
|
|
271
287
|
solid: "#9398b0",
|
|
272
288
|
fill: "#9398b0",
|
|
289
|
+
linedFill: "#8388a5",
|
|
273
290
|
frameHeadingStroke: "#42474D",
|
|
274
291
|
frameHeadingFill: "#23262A",
|
|
275
292
|
frameStroke: "#42474D",
|
|
@@ -285,6 +302,7 @@ const DefaultColorThemePalette = {
|
|
|
285
302
|
"light-blue": {
|
|
286
303
|
solid: "#4dabf7",
|
|
287
304
|
fill: "#4dabf7",
|
|
305
|
+
linedFill: "#2793ec",
|
|
288
306
|
frameHeadingStroke: "#075797",
|
|
289
307
|
frameHeadingFill: "#142839",
|
|
290
308
|
frameStroke: "#075797",
|
|
@@ -300,6 +318,7 @@ const DefaultColorThemePalette = {
|
|
|
300
318
|
"light-green": {
|
|
301
319
|
solid: "#40c057",
|
|
302
320
|
fill: "#40c057",
|
|
321
|
+
linedFill: "#37a44b",
|
|
303
322
|
frameHeadingStroke: "#1C5427",
|
|
304
323
|
frameHeadingFill: "#18251A",
|
|
305
324
|
frameStroke: "#1C5427",
|
|
@@ -315,6 +334,7 @@ const DefaultColorThemePalette = {
|
|
|
315
334
|
"light-red": {
|
|
316
335
|
solid: "#ff8787",
|
|
317
336
|
fill: "#ff8787",
|
|
337
|
+
linedFill: "#ff6666",
|
|
318
338
|
frameHeadingStroke: "#6f3232",
|
|
319
339
|
// Darker and desaturated variant of solid
|
|
320
340
|
frameHeadingFill: "#341818",
|
|
@@ -338,6 +358,7 @@ const DefaultColorThemePalette = {
|
|
|
338
358
|
"light-violet": {
|
|
339
359
|
solid: "#e599f7",
|
|
340
360
|
fill: "#e599f7",
|
|
361
|
+
linedFill: "#dc71f4",
|
|
341
362
|
frameHeadingStroke: "#6c367a",
|
|
342
363
|
frameHeadingFill: "#2D2230",
|
|
343
364
|
frameStroke: "#6c367a",
|
|
@@ -353,6 +374,7 @@ const DefaultColorThemePalette = {
|
|
|
353
374
|
orange: {
|
|
354
375
|
solid: "#f76707",
|
|
355
376
|
fill: "#f76707",
|
|
377
|
+
linedFill: "#f54900",
|
|
356
378
|
frameHeadingStroke: "#773a0e",
|
|
357
379
|
// Darker, muted version of solid
|
|
358
380
|
frameHeadingFill: "#2f1d13",
|
|
@@ -376,6 +398,7 @@ const DefaultColorThemePalette = {
|
|
|
376
398
|
red: {
|
|
377
399
|
solid: "#e03131",
|
|
378
400
|
fill: "#e03131",
|
|
401
|
+
linedFill: "#c31d1d",
|
|
379
402
|
frameHeadingStroke: "#701e1e",
|
|
380
403
|
// Darker, muted variation of solid
|
|
381
404
|
frameHeadingFill: "#301616",
|
|
@@ -399,6 +422,7 @@ const DefaultColorThemePalette = {
|
|
|
399
422
|
violet: {
|
|
400
423
|
solid: "#ae3ec9",
|
|
401
424
|
fill: "#ae3ec9",
|
|
425
|
+
linedFill: "#8f2fa7",
|
|
402
426
|
frameHeadingStroke: "#6d1583",
|
|
403
427
|
// Darker, muted variation of solid
|
|
404
428
|
frameHeadingFill: "#27152e",
|
|
@@ -422,6 +446,7 @@ const DefaultColorThemePalette = {
|
|
|
422
446
|
yellow: {
|
|
423
447
|
solid: "#ffc034",
|
|
424
448
|
fill: "#ffc034",
|
|
449
|
+
linedFill: "#ffae00",
|
|
425
450
|
frameHeadingStroke: "#684e12",
|
|
426
451
|
// Darker, muted variant of solid
|
|
427
452
|
frameHeadingFill: "#2a2113",
|
|
@@ -445,6 +470,7 @@ const DefaultColorThemePalette = {
|
|
|
445
470
|
white: {
|
|
446
471
|
solid: "#f3f3f3",
|
|
447
472
|
fill: "#f3f3f3",
|
|
473
|
+
linedFill: "#f3f3f3",
|
|
448
474
|
semi: "#f5f5f5",
|
|
449
475
|
pattern: "#f9f9f9",
|
|
450
476
|
frameHeadingStroke: "#ffffff",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles/TLColorStyle.ts"],
|
|
4
|
-
"sourcesContent": ["import { Expand } from '@tldraw/utils'\nimport { T } from '@tldraw/validate'\nimport { StyleProp } from './StyleProp'\n\n/**\n * Array of default color names available in tldraw's color palette.\n * These colors form the basis for the default color style system and are available\n * in both light and dark theme variants.\n *\n * @example\n * ```ts\n * import { defaultColorNames } from '@tldraw/tlschema'\n *\n * // Create a color picker with all default colors\n * const colorOptions = defaultColorNames.map(color => ({\n * name: color,\n * value: color\n * }))\n * ```\n *\n * @public\n */\nexport const defaultColorNames = [\n\t'black',\n\t'grey',\n\t'light-violet',\n\t'violet',\n\t'blue',\n\t'light-blue',\n\t'yellow',\n\t'orange',\n\t'green',\n\t'light-green',\n\t'light-red',\n\t'red',\n\t'white',\n] as const\n\n/**\n * Defines the color variants available for each color in the default theme.\n * Each color has multiple variants for different use cases like fills, strokes,\n * patterns, and UI elements like frames and notes.\n *\n * @example\n * ```ts\n * import { TLDefaultColorThemeColor } from '@tldraw/tlschema'\n *\n * const blueColor: TLDefaultColorThemeColor = {\n * solid: '#4465e9',\n * semi: '#dce1f8',\n * pattern: '#6681ee',\n * fill: '#4465e9',\n * // ... other variants\n * }\n * ```\n *\n * @public\n */\nexport interface TLDefaultColorThemeColor {\n\tsolid: string\n\tsemi: string\n\tpattern: string\n\tfill: string // usually same as solid\n\tframeHeadingStroke: string\n\tframeHeadingFill: string\n\tframeStroke: string\n\tframeFill: string\n\tframeText: string\n\tnoteFill: string\n\tnoteText: string\n\thighlightSrgb: string\n\thighlightP3: string\n}\n\n/**\n * Complete color theme definition containing all colors and their variants\n * for either light or dark mode. Includes base theme properties and all\n * default colors with their respective color variants.\n *\n * @example\n * ```ts\n * import { TLDefaultColorTheme } from '@tldraw/tlschema'\n *\n * const customTheme: TLDefaultColorTheme = {\n * id: 'light',\n * text: '#000000',\n * background: '#ffffff',\n * solid: '#fcfffe',\n * black: { solid: '#000000', semi: '#cccccc', ... },\n * // ... other colors\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultColorTheme = Expand<\n\t{\n\t\tid: 'light' | 'dark'\n\t\ttext: string\n\t\tbackground: string\n\t\tsolid: string\n\t} & Record<(typeof defaultColorNames)[number], TLDefaultColorThemeColor>\n>\n\n/**\n * Complete color palette containing both light and dark theme definitions.\n * This object provides the full color system used by tldraw's default themes,\n * including all color variants and theme-specific adjustments.\n *\n * @example\n * ```ts\n * import { DefaultColorThemePalette } from '@tldraw/tlschema'\n *\n * // Get the dark theme colors\n * const darkTheme = DefaultColorThemePalette.darkMode\n * const redColor = darkTheme.red.solid // '#e03131'\n *\n * // Access light theme colors\n * const lightTheme = DefaultColorThemePalette.lightMode\n * const blueColor = lightTheme.blue.fill // '#4465e9'\n * ```\n *\n * @public\n */\nexport const DefaultColorThemePalette: {\n\tlightMode: TLDefaultColorTheme\n\tdarkMode: TLDefaultColorTheme\n} = {\n\tlightMode: {\n\t\tid: 'light',\n\t\ttext: '#000000',\n\t\tbackground: '#f9fafb',\n\t\tsolid: '#fcfffe',\n\t\tblack: {\n\t\t\tsolid: '#1d1d1d',\n\t\t\tfill: '#1d1d1d',\n\t\t\tframeHeadingStroke: '#717171',\n\t\t\tframeHeadingFill: '#ffffff',\n\t\t\tframeStroke: '#717171',\n\t\t\tframeFill: '#ffffff',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#FCE19C',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#e8e8e8',\n\t\t\tpattern: '#494949',\n\t\t\thighlightSrgb: '#fddd00',\n\t\t\thighlightP3: 'color(display-p3 0.972 0.8205 0.05)',\n\t\t},\n\t\tblue: {\n\t\t\tsolid: '#4465e9',\n\t\t\tfill: '#4465e9',\n\t\t\tframeHeadingStroke: '#6681ec',\n\t\t\tframeHeadingFill: '#f9fafe',\n\t\t\tframeStroke: '#6681ec',\n\t\t\tframeFill: '#f9fafe',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#8AA3FF',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#dce1f8',\n\t\t\tpattern: '#6681ee',\n\t\t\thighlightSrgb: '#10acff',\n\t\t\thighlightP3: 'color(display-p3 0.308 0.6632 0.9996)',\n\t\t},\n\t\tgreen: {\n\t\t\tsolid: '#099268',\n\t\t\tfill: '#099268',\n\t\t\tframeHeadingStroke: '#37a684',\n\t\t\tframeHeadingFill: '#f8fcfa',\n\t\t\tframeStroke: '#37a684',\n\t\t\tframeFill: '#f8fcfa',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#6FC896',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#d3e9e3',\n\t\t\tpattern: '#39a785',\n\t\t\thighlightSrgb: '#00ffc8',\n\t\t\thighlightP3: 'color(display-p3 0.2536 0.984 0.7981)',\n\t\t},\n\t\tgrey: {\n\t\t\tsolid: '#9fa8b2',\n\t\t\tfill: '#9fa8b2',\n\t\t\tframeHeadingStroke: '#aaaaab',\n\t\t\tframeHeadingFill: '#fbfcfc',\n\t\t\tframeStroke: '#aaaaab',\n\t\t\tframeFill: '#fcfcfd',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#C0CAD3',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#eceef0',\n\t\t\tpattern: '#bcc3c9',\n\t\t\thighlightSrgb: '#cbe7f1',\n\t\t\thighlightP3: 'color(display-p3 0.8163 0.9023 0.9416)',\n\t\t},\n\t\t'light-blue': {\n\t\t\tsolid: '#4ba1f1',\n\t\t\tfill: '#4ba1f1',\n\t\t\tframeHeadingStroke: '#6cb2f3',\n\t\t\tframeHeadingFill: '#f8fbfe',\n\t\t\tframeStroke: '#6cb2f3',\n\t\t\tframeFill: '#fafcff',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#9BC4FD',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#ddedfa',\n\t\t\tpattern: '#6fbbf8',\n\t\t\thighlightSrgb: '#00f4ff',\n\t\t\thighlightP3: 'color(display-p3 0.1512 0.9414 0.9996)',\n\t\t},\n\t\t'light-green': {\n\t\t\tsolid: '#4cb05e',\n\t\t\tfill: '#4cb05e',\n\t\t\tframeHeadingStroke: '#6dbe7c',\n\t\t\tframeHeadingFill: '#f8fcf9',\n\t\t\tframeStroke: '#6dbe7c',\n\t\t\tframeFill: '#fafdfa',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#98D08A',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#dbf0e0',\n\t\t\tpattern: '#65cb78',\n\t\t\thighlightSrgb: '#65f641',\n\t\t\thighlightP3: 'color(display-p3 0.563 0.9495 0.3857)',\n\t\t},\n\t\t'light-red': {\n\t\t\tsolid: '#f87777',\n\t\t\tfill: '#f87777',\n\t\t\tframeHeadingStroke: '#f89090',\n\t\t\tframeHeadingFill: '#fffafa',\n\t\t\tframeStroke: '#f89090',\n\t\t\tframeFill: '#fffbfb',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#F7A5A1',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#f4dadb',\n\t\t\tpattern: '#fe9e9e',\n\t\t\thighlightSrgb: '#ff7fa3',\n\t\t\thighlightP3: 'color(display-p3 0.9988 0.5301 0.6397)',\n\t\t},\n\t\t'light-violet': {\n\t\t\tsolid: '#e085f4',\n\t\t\tfill: '#e085f4',\n\t\t\tframeHeadingStroke: '#e59bf5',\n\t\t\tframeHeadingFill: '#fefaff',\n\t\t\tframeStroke: '#e59bf5',\n\t\t\tframeFill: '#fefbff',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#DFB0F9',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#f5eafa',\n\t\t\tpattern: '#e9acf8',\n\t\t\thighlightSrgb: '#ff88ff',\n\t\t\thighlightP3: 'color(display-p3 0.9676 0.5652 0.9999)',\n\t\t},\n\t\torange: {\n\t\t\tsolid: '#e16919',\n\t\t\tfill: '#e16919',\n\t\t\tframeHeadingStroke: '#e68544',\n\t\t\tframeHeadingFill: '#fef9f6',\n\t\t\tframeStroke: '#e68544',\n\t\t\tframeFill: '#fef9f6',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#FAA475',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#f8e2d4',\n\t\t\tpattern: '#f78438',\n\t\t\thighlightSrgb: '#ffa500',\n\t\t\thighlightP3: 'color(display-p3 0.9988 0.6905 0.266)',\n\t\t},\n\t\tred: {\n\t\t\tsolid: '#e03131',\n\t\t\tfill: '#e03131',\n\t\t\tframeHeadingStroke: '#e55757',\n\t\t\tframeHeadingFill: '#fef7f7',\n\t\t\tframeStroke: '#e55757',\n\t\t\tframeFill: '#fef9f9',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#FC8282',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#f4dadb',\n\t\t\tpattern: '#e55959',\n\t\t\thighlightSrgb: '#ff636e',\n\t\t\thighlightP3: 'color(display-p3 0.9992 0.4376 0.45)',\n\t\t},\n\t\tviolet: {\n\t\t\tsolid: '#ae3ec9',\n\t\t\tfill: '#ae3ec9',\n\t\t\tframeHeadingStroke: '#bc62d3',\n\t\t\tframeHeadingFill: '#fcf7fd',\n\t\t\tframeStroke: '#bc62d3',\n\t\t\tframeFill: '#fdf9fd',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#DB91FD',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#ecdcf2',\n\t\t\tpattern: '#bd63d3',\n\t\t\thighlightSrgb: '#c77cff',\n\t\t\thighlightP3: 'color(display-p3 0.7469 0.5089 0.9995)',\n\t\t},\n\t\tyellow: {\n\t\t\tsolid: '#f1ac4b',\n\t\t\tfill: '#f1ac4b',\n\t\t\tframeHeadingStroke: '#f3bb6c',\n\t\t\tframeHeadingFill: '#fefcf8',\n\t\t\tframeStroke: '#f3bb6c',\n\t\t\tframeFill: '#fffdfa',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#FED49A',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#f9f0e6',\n\t\t\tpattern: '#fecb92',\n\t\t\thighlightSrgb: '#fddd00',\n\t\t\thighlightP3: 'color(display-p3 0.972 0.8705 0.05)',\n\t\t},\n\t\twhite: {\n\t\t\tsolid: '#FFFFFF',\n\t\t\tfill: '#FFFFFF',\n\t\t\tsemi: '#f5f5f5',\n\t\t\tpattern: '#f9f9f9',\n\t\t\tframeHeadingStroke: '#7d7d7d',\n\t\t\tframeHeadingFill: '#ffffff',\n\t\t\tframeStroke: '#7d7d7d',\n\t\t\tframeFill: '#ffffff',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#FFFFFF',\n\t\t\tnoteText: '#000000',\n\t\t\thighlightSrgb: '#ffffff',\n\t\t\thighlightP3: 'color(display-p3 1 1 1)',\n\t\t},\n\t},\n\tdarkMode: {\n\t\tid: 'dark',\n\t\ttext: 'hsl(210, 17%, 98%)',\n\t\tbackground: 'hsl(240, 5%, 6.5%)',\n\t\tsolid: '#010403',\n\n\t\tblack: {\n\t\t\tsolid: '#f2f2f2',\n\t\t\tfill: '#f2f2f2',\n\t\t\tframeHeadingStroke: '#5c5c5c',\n\t\t\tframeHeadingFill: '#252525',\n\t\t\tframeStroke: '#5c5c5c',\n\t\t\tframeFill: '#0c0c0c',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#2c2c2c',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#2c3036',\n\t\t\tpattern: '#989898',\n\t\t\thighlightSrgb: '#d2b700',\n\t\t\thighlightP3: 'color(display-p3 0.8078 0.6225 0.0312)',\n\t\t},\n\t\tblue: {\n\t\t\tsolid: '#4f72fc', // 3c60f0\n\t\t\tfill: '#4f72fc',\n\t\t\tframeHeadingStroke: '#384994',\n\t\t\tframeHeadingFill: '#1C2036',\n\t\t\tframeStroke: '#384994',\n\t\t\tframeFill: '#11141f',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#2A3F98',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#262d40',\n\t\t\tpattern: '#3a4b9e',\n\t\t\thighlightSrgb: '#0079d2',\n\t\t\thighlightP3: 'color(display-p3 0.0032 0.4655 0.7991)',\n\t\t},\n\t\tgreen: {\n\t\t\tsolid: '#099268',\n\t\t\tfill: '#099268',\n\t\t\tframeHeadingStroke: '#10513C',\n\t\t\tframeHeadingFill: '#14241f',\n\t\t\tframeStroke: '#10513C',\n\t\t\tframeFill: '#0E1614',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#014429',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#253231',\n\t\t\tpattern: '#366a53',\n\t\t\thighlightSrgb: '#009774',\n\t\t\thighlightP3: 'color(display-p3 0.0085 0.582 0.4604)',\n\t\t},\n\t\tgrey: {\n\t\t\tsolid: '#9398b0',\n\t\t\tfill: '#9398b0',\n\t\t\tframeHeadingStroke: '#42474D',\n\t\t\tframeHeadingFill: '#23262A',\n\t\t\tframeStroke: '#42474D',\n\t\t\tframeFill: '#151719',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#56595F',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#33373c',\n\t\t\tpattern: '#7c8187',\n\t\t\thighlightSrgb: '#9cb4cb',\n\t\t\thighlightP3: 'color(display-p3 0.6299 0.7012 0.7856)',\n\t\t},\n\t\t'light-blue': {\n\t\t\tsolid: '#4dabf7',\n\t\t\tfill: '#4dabf7',\n\t\t\tframeHeadingStroke: '#075797',\n\t\t\tframeHeadingFill: '#142839',\n\t\t\tframeStroke: '#075797',\n\t\t\tframeFill: '#0B1823',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#1F5495',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#2a3642',\n\t\t\tpattern: '#4d7aa9',\n\t\t\thighlightSrgb: '#00bdc8',\n\t\t\thighlightP3: 'color(display-p3 0.0023 0.7259 0.7735)',\n\t\t},\n\t\t'light-green': {\n\t\t\tsolid: '#40c057',\n\t\t\tfill: '#40c057',\n\t\t\tframeHeadingStroke: '#1C5427',\n\t\t\tframeHeadingFill: '#18251A',\n\t\t\tframeStroke: '#1C5427',\n\t\t\tframeFill: '#0F1911',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#21581D',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#2a3830',\n\t\t\tpattern: '#4e874e',\n\t\t\thighlightSrgb: '#00a000',\n\t\t\thighlightP3: 'color(display-p3 0.2711 0.6172 0.0195)',\n\t\t},\n\t\t'light-red': {\n\t\t\tsolid: '#ff8787',\n\t\t\tfill: '#ff8787',\n\t\t\tframeHeadingStroke: '#6f3232', // Darker and desaturated variant of solid\n\t\t\tframeHeadingFill: '#341818', // Deep, muted dark red\n\t\t\tframeStroke: '#6f3232', // Matches headingStroke\n\t\t\tframeFill: '#181212', // Darker, muted background shade\n\t\t\tframeText: '#f2f2f2', // Consistent bright text color\n\t\t\tnoteFill: '#7a3333', // Medium-dark, muted variant of solid\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#3c2b2b', // Subdued, darker neutral-red tone\n\t\t\tpattern: '#a56767', // Existing pattern shade retained\n\t\t\thighlightSrgb: '#db005b',\n\t\t\thighlightP3: 'color(display-p3 0.7849 0.0585 0.3589)',\n\t\t},\n\t\t'light-violet': {\n\t\t\tsolid: '#e599f7',\n\t\t\tfill: '#e599f7',\n\t\t\tframeHeadingStroke: '#6c367a',\n\t\t\tframeHeadingFill: '#2D2230',\n\t\t\tframeStroke: '#6c367a',\n\t\t\tframeFill: '#1C151E',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#762F8E',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#383442',\n\t\t\tpattern: '#9770a9',\n\t\t\thighlightSrgb: '#c400c7',\n\t\t\thighlightP3: 'color(display-p3 0.7024 0.0403 0.753)',\n\t\t},\n\t\torange: {\n\t\t\tsolid: '#f76707',\n\t\t\tfill: '#f76707',\n\t\t\tframeHeadingStroke: '#773a0e', // Darker, muted version of solid\n\t\t\tframeHeadingFill: '#2f1d13', // Deep, warm, muted background\n\t\t\tframeStroke: '#773a0e', // Matches headingStroke\n\t\t\tframeFill: '#1c1512', // Darker, richer muted background\n\t\t\tframeText: '#f2f2f2', // Bright text for contrast\n\t\t\tnoteFill: '#7c3905', // Muted dark variant for note fill\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#3b2e27', // Muted neutral-orange tone\n\t\t\tpattern: '#9f552d', // Retained existing shade\n\t\t\thighlightSrgb: '#d07a00',\n\t\t\thighlightP3: 'color(display-p3 0.7699 0.4937 0.0085)',\n\t\t},\n\t\tred: {\n\t\t\tsolid: '#e03131',\n\t\t\tfill: '#e03131',\n\t\t\tframeHeadingStroke: '#701e1e', // Darker, muted variation of solid\n\t\t\tframeHeadingFill: '#301616', // Deep, muted reddish backdrop\n\t\t\tframeStroke: '#701e1e', // Matches headingStroke\n\t\t\tframeFill: '#1b1313', // Rich, dark muted background\n\t\t\tframeText: '#f2f2f2', // Bright text for readability\n\t\t\tnoteFill: '#7e201f', // Muted dark variant for note fill\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#382726', // Dark neutral-red tone\n\t\t\tpattern: '#8f3734', // Existing pattern color retained\n\t\t\thighlightSrgb: '#de002c',\n\t\t\thighlightP3: 'color(display-p3 0.7978 0.0509 0.2035)',\n\t\t},\n\t\tviolet: {\n\t\t\tsolid: '#ae3ec9',\n\t\t\tfill: '#ae3ec9',\n\t\t\tframeHeadingStroke: '#6d1583', // Darker, muted variation of solid\n\t\t\tframeHeadingFill: '#27152e', // Deep, rich muted violet backdrop\n\t\t\tframeStroke: '#6d1583', // Matches headingStroke\n\t\t\tframeFill: '#1b0f21', // Darker muted violet background\n\t\t\tframeText: '#f2f2f2', // Consistent bright text color\n\t\t\tnoteFill: '#5f1c70', // Muted dark variant for note fill\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#342938', // Dark neutral-violet tone\n\t\t\tpattern: '#763a8b', // Retained existing pattern color\n\t\t\thighlightSrgb: '#9e00ee',\n\t\t\thighlightP3: 'color(display-p3 0.5651 0.0079 0.8986)',\n\t\t},\n\t\tyellow: {\n\t\t\tsolid: '#ffc034',\n\t\t\tfill: '#ffc034',\n\t\t\tframeHeadingStroke: '#684e12', // Darker, muted variant of solid\n\t\t\tframeHeadingFill: '#2a2113', // Rich, muted dark-yellow background\n\t\t\tframeStroke: '#684e12', // Matches headingStroke\n\t\t\tframeFill: '#1e1911', // Darker muted shade for background fill\n\t\t\tframeText: '#f2f2f2', // Bright text color for readability\n\t\t\tnoteFill: '#8a5e1c', // Muted, dark complementary variant\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#3b352b', // Dark muted neutral-yellow tone\n\t\t\tpattern: '#fecb92', // Existing shade retained\n\t\t\thighlightSrgb: '#d2b700',\n\t\t\thighlightP3: 'color(display-p3 0.8078 0.7225 0.0312)',\n\t\t},\n\t\twhite: {\n\t\t\tsolid: '#f3f3f3',\n\t\t\tfill: '#f3f3f3',\n\t\t\tsemi: '#f5f5f5',\n\t\t\tpattern: '#f9f9f9',\n\t\t\tframeHeadingStroke: '#ffffff',\n\t\t\tframeHeadingFill: '#ffffff',\n\t\t\tframeStroke: '#ffffff',\n\t\t\tframeFill: '#ffffff',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#eaeaea',\n\t\t\tnoteText: '#1d1d1d',\n\t\t\thighlightSrgb: '#ffffff',\n\t\t\thighlightP3: 'color(display-p3 1 1 1)',\n\t\t},\n\t},\n}\n\n/**\n * Returns the appropriate default color theme based on the dark mode preference.\n *\n * @param opts - Configuration options\n * - isDarkMode - Whether to return the dark theme (true) or light theme (false)\n * @returns The corresponding TLDefaultColorTheme (light or dark)\n *\n * @example\n * ```ts\n * import { getDefaultColorTheme } from '@tldraw/tlschema'\n *\n * // Get light theme\n * const lightTheme = getDefaultColorTheme({ isDarkMode: false })\n *\n * // Get dark theme\n * const darkTheme = getDefaultColorTheme({ isDarkMode: true })\n *\n * // Use with editor\n * const theme = getDefaultColorTheme({ isDarkMode: window.matchMedia('(prefers-color-scheme: dark)').matches })\n * ```\n *\n * @public\n */\nexport function getDefaultColorTheme(opts: { isDarkMode: boolean }): TLDefaultColorTheme {\n\treturn opts.isDarkMode ? DefaultColorThemePalette.darkMode : DefaultColorThemePalette.lightMode\n}\n\n/**\n * Default color style property used by tldraw shapes for their primary color.\n * This style prop allows shapes to use any of the default color names and\n * automatically saves the last used value for new shapes.\n *\n * @example\n * ```ts\n * import { DefaultColorStyle } from '@tldraw/tlschema'\n *\n * // Use in shape props definition\n * interface MyShapeProps {\n * color: typeof DefaultColorStyle\n * // other props...\n * }\n *\n * // Set color on a shape\n * const shape = {\n * // ... other properties\n * props: {\n * color: 'red' as const,\n * // ... other props\n * }\n * }\n * ```\n *\n * @public\n */\nexport const DefaultColorStyle = StyleProp.defineEnum('tldraw:color', {\n\tdefaultValue: 'black',\n\tvalues: defaultColorNames,\n})\n\n/**\n * Default label color style property used for text labels on shapes.\n * This is separate from the main color style to allow different colors\n * for shape fills/strokes versus their text labels.\n *\n * @example\n * ```ts\n * import { DefaultLabelColorStyle } from '@tldraw/tlschema'\n *\n * // Use in shape props definition\n * interface MyShapeProps {\n * labelColor: typeof DefaultLabelColorStyle\n * // other props...\n * }\n *\n * // Create a shape with different fill and label colors\n * const shape = {\n * // ... other properties\n * props: {\n * color: 'blue' as const,\n * labelColor: 'white' as const,\n * // ... other props\n * }\n * }\n * ```\n *\n * @public\n */\nexport const DefaultLabelColorStyle = StyleProp.defineEnum('tldraw:labelColor', {\n\tdefaultValue: 'black',\n\tvalues: defaultColorNames,\n})\n\n/**\n * Type representing a default color style value.\n * This is a union type of all available default color names.\n *\n * @example\n * ```ts\n * import { TLDefaultColorStyle } from '@tldraw/tlschema'\n *\n * // Valid color values\n * const redColor: TLDefaultColorStyle = 'red'\n * const blueColor: TLDefaultColorStyle = 'blue'\n *\n * // Type guard usage\n * function isValidColor(color: string): color is TLDefaultColorStyle {\n * return ['black', 'red', 'blue'].includes(color as TLDefaultColorStyle)\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultColorStyle = T.TypeOf<typeof DefaultColorStyle>\n\nconst defaultColorNamesSet = new Set(defaultColorNames)\n\n/**\n * Type guard to check if a color value is one of the default theme colors.\n * Useful for determining if a color can be looked up in the theme palette.\n *\n * @param color - The color value to check\n * @returns True if the color is a default theme color, false otherwise\n *\n * @example\n * ```ts\n * import { isDefaultThemeColor, TLDefaultColorStyle } from '@tldraw/tlschema'\n *\n * const color: TLDefaultColorStyle = 'red'\n *\n * if (isDefaultThemeColor(color)) {\n * // color is guaranteed to be a default theme color\n * console.log(`${color} is a default theme color`)\n * } else {\n * // color might be a custom hex value or other format\n * console.log(`${color} is a custom color`)\n * }\n * ```\n *\n * @public\n */\nexport function isDefaultThemeColor(\n\tcolor: TLDefaultColorStyle\n): color is (typeof defaultColorNames)[number] {\n\treturn defaultColorNamesSet.has(color as (typeof defaultColorNames)[number])\n}\n\n/**\n * Resolves a color style value to its actual CSS color string for a given theme and variant.\n * If the color is not a default theme color, returns the color value as-is.\n *\n * @param theme - The color theme to use for resolution\n * @param color - The color style value to resolve\n * @param variant - Which variant of the color to return (solid, fill, pattern, etc.)\n * @returns The CSS color string for the specified color and variant\n *\n * @example\n * ```ts\n * import { getColorValue, getDefaultColorTheme } from '@tldraw/tlschema'\n *\n * const theme = getDefaultColorTheme({ isDarkMode: false })\n *\n * // Get the solid variant of red\n * const redSolid = getColorValue(theme, 'red', 'solid') // '#e03131'\n *\n * // Get the fill variant of blue\n * const blueFill = getColorValue(theme, 'blue', 'fill') // '#4465e9'\n *\n * // Custom color passes through unchanged\n * const customColor = getColorValue(theme, '#ff0000', 'solid') // '#ff0000'\n * ```\n *\n * @public\n */\nexport function getColorValue(\n\ttheme: TLDefaultColorTheme,\n\tcolor: TLDefaultColorStyle,\n\tvariant: keyof TLDefaultColorThemeColor\n): string {\n\tif (!isDefaultThemeColor(color)) {\n\t\treturn color\n\t}\n\n\treturn theme[color][variant]\n}\n"],
|
|
5
|
-
"mappings": "AAEA,SAAS,iBAAiB;AAoBnB,MAAM,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;
|
|
4
|
+
"sourcesContent": ["import { Expand } from '@tldraw/utils'\nimport { T } from '@tldraw/validate'\nimport { StyleProp } from './StyleProp'\n\n/**\n * Array of default color names available in tldraw's color palette.\n * These colors form the basis for the default color style system and are available\n * in both light and dark theme variants.\n *\n * @example\n * ```ts\n * import { defaultColorNames } from '@tldraw/tlschema'\n *\n * // Create a color picker with all default colors\n * const colorOptions = defaultColorNames.map(color => ({\n * name: color,\n * value: color\n * }))\n * ```\n *\n * @public\n */\nexport const defaultColorNames = [\n\t'black',\n\t'grey',\n\t'light-violet',\n\t'violet',\n\t'blue',\n\t'light-blue',\n\t'yellow',\n\t'orange',\n\t'green',\n\t'light-green',\n\t'light-red',\n\t'red',\n\t'white',\n] as const\n\n/**\n * Defines the color variants available for each color in the default theme.\n * Each color has multiple variants for different use cases like fills, strokes,\n * patterns, and UI elements like frames and notes.\n *\n * @example\n * ```ts\n * import { TLDefaultColorThemeColor } from '@tldraw/tlschema'\n *\n * const blueColor: TLDefaultColorThemeColor = {\n * solid: '#4465e9',\n * semi: '#dce1f8',\n * pattern: '#6681ee',\n * fill: '#4465e9',\n * // ... other variants\n * }\n * ```\n *\n * @public\n */\nexport interface TLDefaultColorThemeColor {\n\tsolid: string\n\tsemi: string\n\tpattern: string\n\tfill: string // usually same as solid\n\tlinedFill: string // usually slightly lighter than fill\n\tframeHeadingStroke: string\n\tframeHeadingFill: string\n\tframeStroke: string\n\tframeFill: string\n\tframeText: string\n\tnoteFill: string\n\tnoteText: string\n\thighlightSrgb: string\n\thighlightP3: string\n}\n\n/**\n * Complete color theme definition containing all colors and their variants\n * for either light or dark mode. Includes base theme properties and all\n * default colors with their respective color variants.\n *\n * @example\n * ```ts\n * import { TLDefaultColorTheme } from '@tldraw/tlschema'\n *\n * const customTheme: TLDefaultColorTheme = {\n * id: 'light',\n * text: '#000000',\n * background: '#ffffff',\n * solid: '#fcfffe',\n * black: { solid: '#000000', semi: '#cccccc', ... },\n * // ... other colors\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultColorTheme = Expand<\n\t{\n\t\tid: 'light' | 'dark'\n\t\ttext: string\n\t\tbackground: string\n\t\tsolid: string\n\t} & Record<(typeof defaultColorNames)[number], TLDefaultColorThemeColor>\n>\n\n/**\n * Complete color palette containing both light and dark theme definitions.\n * This object provides the full color system used by tldraw's default themes,\n * including all color variants and theme-specific adjustments.\n *\n * @example\n * ```ts\n * import { DefaultColorThemePalette } from '@tldraw/tlschema'\n *\n * // Get the dark theme colors\n * const darkTheme = DefaultColorThemePalette.darkMode\n * const redColor = darkTheme.red.solid // '#e03131'\n *\n * // Access light theme colors\n * const lightTheme = DefaultColorThemePalette.lightMode\n * const blueColor = lightTheme.blue.fill // '#4465e9'\n * ```\n *\n * @public\n */\nexport const DefaultColorThemePalette: {\n\tlightMode: TLDefaultColorTheme\n\tdarkMode: TLDefaultColorTheme\n} = {\n\tlightMode: {\n\t\tid: 'light',\n\t\ttext: '#000000',\n\t\tbackground: '#f9fafb',\n\t\tsolid: '#fcfffe',\n\t\tblack: {\n\t\t\tsolid: '#1d1d1d',\n\t\t\tfill: '#1d1d1d',\n\t\t\tlinedFill: '#363636',\n\t\t\tframeHeadingStroke: '#717171',\n\t\t\tframeHeadingFill: '#ffffff',\n\t\t\tframeStroke: '#717171',\n\t\t\tframeFill: '#ffffff',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#FCE19C',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#e8e8e8',\n\t\t\tpattern: '#494949',\n\t\t\thighlightSrgb: '#fddd00',\n\t\t\thighlightP3: 'color(display-p3 0.972 0.8205 0.05)',\n\t\t},\n\t\tblue: {\n\t\t\tsolid: '#4465e9',\n\t\t\tfill: '#4465e9',\n\t\t\tlinedFill: '#6580ec',\n\t\t\tframeHeadingStroke: '#6681ec',\n\t\t\tframeHeadingFill: '#f9fafe',\n\t\t\tframeStroke: '#6681ec',\n\t\t\tframeFill: '#f9fafe',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#8AA3FF',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#dce1f8',\n\t\t\tpattern: '#6681ee',\n\t\t\thighlightSrgb: '#10acff',\n\t\t\thighlightP3: 'color(display-p3 0.308 0.6632 0.9996)',\n\t\t},\n\t\tgreen: {\n\t\t\tsolid: '#099268',\n\t\t\tfill: '#099268',\n\t\t\tlinedFill: '#0bad7c',\n\t\t\tframeHeadingStroke: '#37a684',\n\t\t\tframeHeadingFill: '#f8fcfa',\n\t\t\tframeStroke: '#37a684',\n\t\t\tframeFill: '#f8fcfa',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#6FC896',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#d3e9e3',\n\t\t\tpattern: '#39a785',\n\t\t\thighlightSrgb: '#00ffc8',\n\t\t\thighlightP3: 'color(display-p3 0.2536 0.984 0.7981)',\n\t\t},\n\t\tgrey: {\n\t\t\tsolid: '#9fa8b2',\n\t\t\tfill: '#9fa8b2',\n\t\t\tlinedFill: '#bbc1c9',\n\t\t\tframeHeadingStroke: '#aaaaab',\n\t\t\tframeHeadingFill: '#fbfcfc',\n\t\t\tframeStroke: '#aaaaab',\n\t\t\tframeFill: '#fcfcfd',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#C0CAD3',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#eceef0',\n\t\t\tpattern: '#bcc3c9',\n\t\t\thighlightSrgb: '#cbe7f1',\n\t\t\thighlightP3: 'color(display-p3 0.8163 0.9023 0.9416)',\n\t\t},\n\t\t'light-blue': {\n\t\t\tsolid: '#4ba1f1',\n\t\t\tfill: '#4ba1f1',\n\t\t\tlinedFill: '#7abaf5',\n\t\t\tframeHeadingStroke: '#6cb2f3',\n\t\t\tframeHeadingFill: '#f8fbfe',\n\t\t\tframeStroke: '#6cb2f3',\n\t\t\tframeFill: '#fafcff',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#9BC4FD',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#ddedfa',\n\t\t\tpattern: '#6fbbf8',\n\t\t\thighlightSrgb: '#00f4ff',\n\t\t\thighlightP3: 'color(display-p3 0.1512 0.9414 0.9996)',\n\t\t},\n\t\t'light-green': {\n\t\t\tsolid: '#4cb05e',\n\t\t\tfill: '#4cb05e',\n\t\t\tlinedFill: '#7ec88c',\n\t\t\tframeHeadingStroke: '#6dbe7c',\n\t\t\tframeHeadingFill: '#f8fcf9',\n\t\t\tframeStroke: '#6dbe7c',\n\t\t\tframeFill: '#fafdfa',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#98D08A',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#dbf0e0',\n\t\t\tpattern: '#65cb78',\n\t\t\thighlightSrgb: '#65f641',\n\t\t\thighlightP3: 'color(display-p3 0.563 0.9495 0.3857)',\n\t\t},\n\t\t'light-red': {\n\t\t\tsolid: '#f87777',\n\t\t\tfill: '#f87777',\n\t\t\tlinedFill: '#f99a9a',\n\t\t\tframeHeadingStroke: '#f89090',\n\t\t\tframeHeadingFill: '#fffafa',\n\t\t\tframeStroke: '#f89090',\n\t\t\tframeFill: '#fffbfb',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#F7A5A1',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#f4dadb',\n\t\t\tpattern: '#fe9e9e',\n\t\t\thighlightSrgb: '#ff7fa3',\n\t\t\thighlightP3: 'color(display-p3 0.9988 0.5301 0.6397)',\n\t\t},\n\t\t'light-violet': {\n\t\t\tsolid: '#e085f4',\n\t\t\tfill: '#e085f4',\n\t\t\tlinedFill: '#e9abf7',\n\t\t\tframeHeadingStroke: '#e59bf5',\n\t\t\tframeHeadingFill: '#fefaff',\n\t\t\tframeStroke: '#e59bf5',\n\t\t\tframeFill: '#fefbff',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#DFB0F9',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#f5eafa',\n\t\t\tpattern: '#e9acf8',\n\t\t\thighlightSrgb: '#ff88ff',\n\t\t\thighlightP3: 'color(display-p3 0.9676 0.5652 0.9999)',\n\t\t},\n\t\torange: {\n\t\t\tsolid: '#e16919',\n\t\t\tfill: '#e16919',\n\t\t\tlinedFill: '#ea8643',\n\t\t\tframeHeadingStroke: '#e68544',\n\t\t\tframeHeadingFill: '#fef9f6',\n\t\t\tframeStroke: '#e68544',\n\t\t\tframeFill: '#fef9f6',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#FAA475',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#f8e2d4',\n\t\t\tpattern: '#f78438',\n\t\t\thighlightSrgb: '#ffa500',\n\t\t\thighlightP3: 'color(display-p3 0.9988 0.6905 0.266)',\n\t\t},\n\t\tred: {\n\t\t\tsolid: '#e03131',\n\t\t\tfill: '#e03131',\n\t\t\tlinedFill: '#e75f5f',\n\t\t\tframeHeadingStroke: '#e55757',\n\t\t\tframeHeadingFill: '#fef7f7',\n\t\t\tframeStroke: '#e55757',\n\t\t\tframeFill: '#fef9f9',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#FC8282',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#f4dadb',\n\t\t\tpattern: '#e55959',\n\t\t\thighlightSrgb: '#ff636e',\n\t\t\thighlightP3: 'color(display-p3 0.9992 0.4376 0.45)',\n\t\t},\n\t\tviolet: {\n\t\t\tsolid: '#ae3ec9',\n\t\t\tfill: '#ae3ec9',\n\t\t\tlinedFill: '#be68d4',\n\t\t\tframeHeadingStroke: '#bc62d3',\n\t\t\tframeHeadingFill: '#fcf7fd',\n\t\t\tframeStroke: '#bc62d3',\n\t\t\tframeFill: '#fdf9fd',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#DB91FD',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#ecdcf2',\n\t\t\tpattern: '#bd63d3',\n\t\t\thighlightSrgb: '#c77cff',\n\t\t\thighlightP3: 'color(display-p3 0.7469 0.5089 0.9995)',\n\t\t},\n\t\tyellow: {\n\t\t\tsolid: '#f1ac4b',\n\t\t\tfill: '#f1ac4b',\n\t\t\tlinedFill: '#f5c27a',\n\t\t\tframeHeadingStroke: '#f3bb6c',\n\t\t\tframeHeadingFill: '#fefcf8',\n\t\t\tframeStroke: '#f3bb6c',\n\t\t\tframeFill: '#fffdfa',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#FED49A',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#f9f0e6',\n\t\t\tpattern: '#fecb92',\n\t\t\thighlightSrgb: '#fddd00',\n\t\t\thighlightP3: 'color(display-p3 0.972 0.8705 0.05)',\n\t\t},\n\t\twhite: {\n\t\t\tsolid: '#FFFFFF',\n\t\t\tfill: '#FFFFFF',\n\t\t\tlinedFill: '#ffffff',\n\t\t\tsemi: '#f5f5f5',\n\t\t\tpattern: '#f9f9f9',\n\t\t\tframeHeadingStroke: '#7d7d7d',\n\t\t\tframeHeadingFill: '#ffffff',\n\t\t\tframeStroke: '#7d7d7d',\n\t\t\tframeFill: '#ffffff',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#FFFFFF',\n\t\t\tnoteText: '#000000',\n\t\t\thighlightSrgb: '#ffffff',\n\t\t\thighlightP3: 'color(display-p3 1 1 1)',\n\t\t},\n\t},\n\tdarkMode: {\n\t\tid: 'dark',\n\t\ttext: 'hsl(210, 17%, 98%)',\n\t\tbackground: 'hsl(240, 5%, 6.5%)',\n\t\tsolid: '#010403',\n\n\t\tblack: {\n\t\t\tsolid: '#f2f2f2',\n\t\t\tfill: '#f2f2f2',\n\t\t\tlinedFill: '#ffffff',\n\t\t\tframeHeadingStroke: '#5c5c5c',\n\t\t\tframeHeadingFill: '#252525',\n\t\t\tframeStroke: '#5c5c5c',\n\t\t\tframeFill: '#0c0c0c',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#2c2c2c',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#2c3036',\n\t\t\tpattern: '#989898',\n\t\t\thighlightSrgb: '#d2b700',\n\t\t\thighlightP3: 'color(display-p3 0.8078 0.6225 0.0312)',\n\t\t},\n\t\tblue: {\n\t\t\tsolid: '#4f72fc', // 3c60f0\n\t\t\tfill: '#4f72fc',\n\t\t\tlinedFill: '#3c5cdd',\n\t\t\tframeHeadingStroke: '#384994',\n\t\t\tframeHeadingFill: '#1C2036',\n\t\t\tframeStroke: '#384994',\n\t\t\tframeFill: '#11141f',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#2A3F98',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#262d40',\n\t\t\tpattern: '#3a4b9e',\n\t\t\thighlightSrgb: '#0079d2',\n\t\t\thighlightP3: 'color(display-p3 0.0032 0.4655 0.7991)',\n\t\t},\n\t\tgreen: {\n\t\t\tsolid: '#099268',\n\t\t\tfill: '#099268',\n\t\t\tlinedFill: '#087856',\n\t\t\tframeHeadingStroke: '#10513C',\n\t\t\tframeHeadingFill: '#14241f',\n\t\t\tframeStroke: '#10513C',\n\t\t\tframeFill: '#0E1614',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#014429',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#253231',\n\t\t\tpattern: '#366a53',\n\t\t\thighlightSrgb: '#009774',\n\t\t\thighlightP3: 'color(display-p3 0.0085 0.582 0.4604)',\n\t\t},\n\t\tgrey: {\n\t\t\tsolid: '#9398b0',\n\t\t\tfill: '#9398b0',\n\t\t\tlinedFill: '#8388a5',\n\t\t\tframeHeadingStroke: '#42474D',\n\t\t\tframeHeadingFill: '#23262A',\n\t\t\tframeStroke: '#42474D',\n\t\t\tframeFill: '#151719',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#56595F',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#33373c',\n\t\t\tpattern: '#7c8187',\n\t\t\thighlightSrgb: '#9cb4cb',\n\t\t\thighlightP3: 'color(display-p3 0.6299 0.7012 0.7856)',\n\t\t},\n\t\t'light-blue': {\n\t\t\tsolid: '#4dabf7',\n\t\t\tfill: '#4dabf7',\n\t\t\tlinedFill: '#2793ec',\n\t\t\tframeHeadingStroke: '#075797',\n\t\t\tframeHeadingFill: '#142839',\n\t\t\tframeStroke: '#075797',\n\t\t\tframeFill: '#0B1823',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#1F5495',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#2a3642',\n\t\t\tpattern: '#4d7aa9',\n\t\t\thighlightSrgb: '#00bdc8',\n\t\t\thighlightP3: 'color(display-p3 0.0023 0.7259 0.7735)',\n\t\t},\n\t\t'light-green': {\n\t\t\tsolid: '#40c057',\n\t\t\tfill: '#40c057',\n\t\t\tlinedFill: '#37a44b',\n\t\t\tframeHeadingStroke: '#1C5427',\n\t\t\tframeHeadingFill: '#18251A',\n\t\t\tframeStroke: '#1C5427',\n\t\t\tframeFill: '#0F1911',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#21581D',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#2a3830',\n\t\t\tpattern: '#4e874e',\n\t\t\thighlightSrgb: '#00a000',\n\t\t\thighlightP3: 'color(display-p3 0.2711 0.6172 0.0195)',\n\t\t},\n\t\t'light-red': {\n\t\t\tsolid: '#ff8787',\n\t\t\tfill: '#ff8787',\n\t\t\tlinedFill: '#ff6666',\n\t\t\tframeHeadingStroke: '#6f3232', // Darker and desaturated variant of solid\n\t\t\tframeHeadingFill: '#341818', // Deep, muted dark red\n\t\t\tframeStroke: '#6f3232', // Matches headingStroke\n\t\t\tframeFill: '#181212', // Darker, muted background shade\n\t\t\tframeText: '#f2f2f2', // Consistent bright text color\n\t\t\tnoteFill: '#7a3333', // Medium-dark, muted variant of solid\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#3c2b2b', // Subdued, darker neutral-red tone\n\t\t\tpattern: '#a56767', // Existing pattern shade retained\n\t\t\thighlightSrgb: '#db005b',\n\t\t\thighlightP3: 'color(display-p3 0.7849 0.0585 0.3589)',\n\t\t},\n\t\t'light-violet': {\n\t\t\tsolid: '#e599f7',\n\t\t\tfill: '#e599f7',\n\t\t\tlinedFill: '#dc71f4',\n\t\t\tframeHeadingStroke: '#6c367a',\n\t\t\tframeHeadingFill: '#2D2230',\n\t\t\tframeStroke: '#6c367a',\n\t\t\tframeFill: '#1C151E',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#762F8E',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#383442',\n\t\t\tpattern: '#9770a9',\n\t\t\thighlightSrgb: '#c400c7',\n\t\t\thighlightP3: 'color(display-p3 0.7024 0.0403 0.753)',\n\t\t},\n\t\torange: {\n\t\t\tsolid: '#f76707',\n\t\t\tfill: '#f76707',\n\t\t\tlinedFill: '#f54900',\n\t\t\tframeHeadingStroke: '#773a0e', // Darker, muted version of solid\n\t\t\tframeHeadingFill: '#2f1d13', // Deep, warm, muted background\n\t\t\tframeStroke: '#773a0e', // Matches headingStroke\n\t\t\tframeFill: '#1c1512', // Darker, richer muted background\n\t\t\tframeText: '#f2f2f2', // Bright text for contrast\n\t\t\tnoteFill: '#7c3905', // Muted dark variant for note fill\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#3b2e27', // Muted neutral-orange tone\n\t\t\tpattern: '#9f552d', // Retained existing shade\n\t\t\thighlightSrgb: '#d07a00',\n\t\t\thighlightP3: 'color(display-p3 0.7699 0.4937 0.0085)',\n\t\t},\n\t\tred: {\n\t\t\tsolid: '#e03131',\n\t\t\tfill: '#e03131',\n\t\t\tlinedFill: '#c31d1d',\n\t\t\tframeHeadingStroke: '#701e1e', // Darker, muted variation of solid\n\t\t\tframeHeadingFill: '#301616', // Deep, muted reddish backdrop\n\t\t\tframeStroke: '#701e1e', // Matches headingStroke\n\t\t\tframeFill: '#1b1313', // Rich, dark muted background\n\t\t\tframeText: '#f2f2f2', // Bright text for readability\n\t\t\tnoteFill: '#7e201f', // Muted dark variant for note fill\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#382726', // Dark neutral-red tone\n\t\t\tpattern: '#8f3734', // Existing pattern color retained\n\t\t\thighlightSrgb: '#de002c',\n\t\t\thighlightP3: 'color(display-p3 0.7978 0.0509 0.2035)',\n\t\t},\n\t\tviolet: {\n\t\t\tsolid: '#ae3ec9',\n\t\t\tfill: '#ae3ec9',\n\t\t\tlinedFill: '#8f2fa7',\n\t\t\tframeHeadingStroke: '#6d1583', // Darker, muted variation of solid\n\t\t\tframeHeadingFill: '#27152e', // Deep, rich muted violet backdrop\n\t\t\tframeStroke: '#6d1583', // Matches headingStroke\n\t\t\tframeFill: '#1b0f21', // Darker muted violet background\n\t\t\tframeText: '#f2f2f2', // Consistent bright text color\n\t\t\tnoteFill: '#5f1c70', // Muted dark variant for note fill\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#342938', // Dark neutral-violet tone\n\t\t\tpattern: '#763a8b', // Retained existing pattern color\n\t\t\thighlightSrgb: '#9e00ee',\n\t\t\thighlightP3: 'color(display-p3 0.5651 0.0079 0.8986)',\n\t\t},\n\t\tyellow: {\n\t\t\tsolid: '#ffc034',\n\t\t\tfill: '#ffc034',\n\t\t\tlinedFill: '#ffae00',\n\t\t\tframeHeadingStroke: '#684e12', // Darker, muted variant of solid\n\t\t\tframeHeadingFill: '#2a2113', // Rich, muted dark-yellow background\n\t\t\tframeStroke: '#684e12', // Matches headingStroke\n\t\t\tframeFill: '#1e1911', // Darker muted shade for background fill\n\t\t\tframeText: '#f2f2f2', // Bright text color for readability\n\t\t\tnoteFill: '#8a5e1c', // Muted, dark complementary variant\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#3b352b', // Dark muted neutral-yellow tone\n\t\t\tpattern: '#fecb92', // Existing shade retained\n\t\t\thighlightSrgb: '#d2b700',\n\t\t\thighlightP3: 'color(display-p3 0.8078 0.7225 0.0312)',\n\t\t},\n\t\twhite: {\n\t\t\tsolid: '#f3f3f3',\n\t\t\tfill: '#f3f3f3',\n\t\t\tlinedFill: '#f3f3f3',\n\t\t\tsemi: '#f5f5f5',\n\t\t\tpattern: '#f9f9f9',\n\t\t\tframeHeadingStroke: '#ffffff',\n\t\t\tframeHeadingFill: '#ffffff',\n\t\t\tframeStroke: '#ffffff',\n\t\t\tframeFill: '#ffffff',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#eaeaea',\n\t\t\tnoteText: '#1d1d1d',\n\t\t\thighlightSrgb: '#ffffff',\n\t\t\thighlightP3: 'color(display-p3 1 1 1)',\n\t\t},\n\t},\n}\n\n/**\n * Returns the appropriate default color theme based on the dark mode preference.\n *\n * @param opts - Configuration options\n * - isDarkMode - Whether to return the dark theme (true) or light theme (false)\n * @returns The corresponding TLDefaultColorTheme (light or dark)\n *\n * @example\n * ```ts\n * import { getDefaultColorTheme } from '@tldraw/tlschema'\n *\n * // Get light theme\n * const lightTheme = getDefaultColorTheme({ isDarkMode: false })\n *\n * // Get dark theme\n * const darkTheme = getDefaultColorTheme({ isDarkMode: true })\n *\n * // Use with editor\n * const theme = getDefaultColorTheme({ isDarkMode: window.matchMedia('(prefers-color-scheme: dark)').matches })\n * ```\n *\n * @public\n */\nexport function getDefaultColorTheme(opts: { isDarkMode: boolean }): TLDefaultColorTheme {\n\treturn opts.isDarkMode ? DefaultColorThemePalette.darkMode : DefaultColorThemePalette.lightMode\n}\n\n/**\n * Default color style property used by tldraw shapes for their primary color.\n * This style prop allows shapes to use any of the default color names and\n * automatically saves the last used value for new shapes.\n *\n * @example\n * ```ts\n * import { DefaultColorStyle } from '@tldraw/tlschema'\n *\n * // Use in shape props definition\n * interface MyShapeProps {\n * color: typeof DefaultColorStyle\n * // other props...\n * }\n *\n * // Set color on a shape\n * const shape = {\n * // ... other properties\n * props: {\n * color: 'red' as const,\n * // ... other props\n * }\n * }\n * ```\n *\n * @public\n */\nexport const DefaultColorStyle = StyleProp.defineEnum('tldraw:color', {\n\tdefaultValue: 'black',\n\tvalues: defaultColorNames,\n})\n\n/**\n * Default label color style property used for text labels on shapes.\n * This is separate from the main color style to allow different colors\n * for shape fills/strokes versus their text labels.\n *\n * @example\n * ```ts\n * import { DefaultLabelColorStyle } from '@tldraw/tlschema'\n *\n * // Use in shape props definition\n * interface MyShapeProps {\n * labelColor: typeof DefaultLabelColorStyle\n * // other props...\n * }\n *\n * // Create a shape with different fill and label colors\n * const shape = {\n * // ... other properties\n * props: {\n * color: 'blue' as const,\n * labelColor: 'white' as const,\n * // ... other props\n * }\n * }\n * ```\n *\n * @public\n */\nexport const DefaultLabelColorStyle = StyleProp.defineEnum('tldraw:labelColor', {\n\tdefaultValue: 'black',\n\tvalues: defaultColorNames,\n})\n\n/**\n * Type representing a default color style value.\n * This is a union type of all available default color names.\n *\n * @example\n * ```ts\n * import { TLDefaultColorStyle } from '@tldraw/tlschema'\n *\n * // Valid color values\n * const redColor: TLDefaultColorStyle = 'red'\n * const blueColor: TLDefaultColorStyle = 'blue'\n *\n * // Type guard usage\n * function isValidColor(color: string): color is TLDefaultColorStyle {\n * return ['black', 'red', 'blue'].includes(color as TLDefaultColorStyle)\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultColorStyle = T.TypeOf<typeof DefaultColorStyle>\n\nconst defaultColorNamesSet = new Set(defaultColorNames)\n\n/**\n * Type guard to check if a color value is one of the default theme colors.\n * Useful for determining if a color can be looked up in the theme palette.\n *\n * @param color - The color value to check\n * @returns True if the color is a default theme color, false otherwise\n *\n * @example\n * ```ts\n * import { isDefaultThemeColor, TLDefaultColorStyle } from '@tldraw/tlschema'\n *\n * const color: TLDefaultColorStyle = 'red'\n *\n * if (isDefaultThemeColor(color)) {\n * // color is guaranteed to be a default theme color\n * console.log(`${color} is a default theme color`)\n * } else {\n * // color might be a custom hex value or other format\n * console.log(`${color} is a custom color`)\n * }\n * ```\n *\n * @public\n */\nexport function isDefaultThemeColor(\n\tcolor: TLDefaultColorStyle\n): color is (typeof defaultColorNames)[number] {\n\treturn defaultColorNamesSet.has(color as (typeof defaultColorNames)[number])\n}\n\n/**\n * Resolves a color style value to its actual CSS color string for a given theme and variant.\n * If the color is not a default theme color, returns the color value as-is.\n *\n * @param theme - The color theme to use for resolution\n * @param color - The color style value to resolve\n * @param variant - Which variant of the color to return (solid, fill, pattern, etc.)\n * @returns The CSS color string for the specified color and variant\n *\n * @example\n * ```ts\n * import { getColorValue, getDefaultColorTheme } from '@tldraw/tlschema'\n *\n * const theme = getDefaultColorTheme({ isDarkMode: false })\n *\n * // Get the solid variant of red\n * const redSolid = getColorValue(theme, 'red', 'solid') // '#e03131'\n *\n * // Get the fill variant of blue\n * const blueFill = getColorValue(theme, 'blue', 'fill') // '#4465e9'\n *\n * // Custom color passes through unchanged\n * const customColor = getColorValue(theme, '#ff0000', 'solid') // '#ff0000'\n * ```\n *\n * @public\n */\nexport function getColorValue(\n\ttheme: TLDefaultColorTheme,\n\tcolor: TLDefaultColorStyle,\n\tvariant: keyof TLDefaultColorThemeColor\n): string {\n\tif (!isDefaultThemeColor(color)) {\n\t\treturn color\n\t}\n\n\treturn theme[color][variant]\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { StyleProp } from "./StyleProp.mjs";
|
|
2
2
|
const DefaultFillStyle = StyleProp.defineEnum("tldraw:fill", {
|
|
3
3
|
defaultValue: "none",
|
|
4
|
-
values: ["none", "semi", "solid", "pattern", "fill"]
|
|
4
|
+
values: ["none", "semi", "solid", "pattern", "fill", "lined-fill"]
|
|
5
5
|
});
|
|
6
6
|
export {
|
|
7
7
|
DefaultFillStyle
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles/TLFillStyle.ts"],
|
|
4
|
-
"sourcesContent": ["import { T } from '@tldraw/validate'\nimport { StyleProp } from './StyleProp'\n\n/**\n * Default fill style property used by tldraw shapes for interior styling.\n * Controls how the inside of shapes are filled or left empty.\n *\n * Available values:\n * - `none` - No fill, shape interior is transparent\n * - `semi` - Semi-transparent fill using the shape's color\n * - `solid` - Solid fill using the shape's color\n * - `pattern` - Crosshatch pattern fill using the shape's color\n * - `fill` - Alternative solid fill variant\n *\n * @example\n * ```ts\n * import { DefaultFillStyle } from '@tldraw/tlschema'\n *\n * // Use in shape props definition\n * interface MyShapeProps {\n * fill: typeof DefaultFillStyle\n * // other props...\n * }\n *\n * // Create a shape with solid fill\n * const shape = {\n * // ... other properties\n * props: {\n * fill: 'solid' as const,\n * // ... other props\n * }\n * }\n * ```\n *\n * @public\n */\nexport const DefaultFillStyle = StyleProp.defineEnum('tldraw:fill', {\n\tdefaultValue: 'none',\n\tvalues: ['none', 'semi', 'solid', 'pattern', 'fill'],\n})\n\n/**\n * Type representing a default fill style value.\n * This is a union type of all available fill style options.\n *\n * @example\n * ```ts\n * import { TLDefaultFillStyle } from '@tldraw/tlschema'\n *\n * // Valid fill style values\n * const noFill: TLDefaultFillStyle = 'none'\n * const solidFill: TLDefaultFillStyle = 'solid'\n * const patternFill: TLDefaultFillStyle = 'pattern'\n *\n * // Use in a function parameter\n * function setShapeFill(fill: TLDefaultFillStyle) {\n * // Apply fill style to shape\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultFillStyle = T.TypeOf<typeof DefaultFillStyle>\n"],
|
|
5
|
-
"mappings": "AACA,SAAS,iBAAiB;AAmCnB,MAAM,mBAAmB,UAAU,WAAW,eAAe;AAAA,EACnE,cAAc;AAAA,EACd,QAAQ,CAAC,QAAQ,QAAQ,SAAS,WAAW,
|
|
4
|
+
"sourcesContent": ["import { T } from '@tldraw/validate'\nimport { StyleProp } from './StyleProp'\n\n/**\n * Default fill style property used by tldraw shapes for interior styling.\n * Controls how the inside of shapes are filled or left empty.\n *\n * Available values:\n * - `none` - No fill, shape interior is transparent\n * - `semi` - Semi-transparent fill using the shape's color\n * - `solid` - Solid fill using the shape's color\n * - `pattern` - Crosshatch pattern fill using the shape's color\n * - `fill` - Alternative solid fill variant\n *\n * @example\n * ```ts\n * import { DefaultFillStyle } from '@tldraw/tlschema'\n *\n * // Use in shape props definition\n * interface MyShapeProps {\n * fill: typeof DefaultFillStyle\n * // other props...\n * }\n *\n * // Create a shape with solid fill\n * const shape = {\n * // ... other properties\n * props: {\n * fill: 'solid' as const,\n * // ... other props\n * }\n * }\n * ```\n *\n * @public\n */\nexport const DefaultFillStyle = StyleProp.defineEnum('tldraw:fill', {\n\tdefaultValue: 'none',\n\tvalues: ['none', 'semi', 'solid', 'pattern', 'fill', 'lined-fill'],\n})\n\n/**\n * Type representing a default fill style value.\n * This is a union type of all available fill style options.\n *\n * @example\n * ```ts\n * import { TLDefaultFillStyle } from '@tldraw/tlschema'\n *\n * // Valid fill style values\n * const noFill: TLDefaultFillStyle = 'none'\n * const solidFill: TLDefaultFillStyle = 'solid'\n * const patternFill: TLDefaultFillStyle = 'pattern'\n *\n * // Use in a function parameter\n * function setShapeFill(fill: TLDefaultFillStyle) {\n * // Apply fill style to shape\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultFillStyle = T.TypeOf<typeof DefaultFillStyle>\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,iBAAiB;AAmCnB,MAAM,mBAAmB,UAAU,WAAW,eAAe;AAAA,EACnE,cAAc;AAAA,EACd,QAAQ,CAAC,QAAQ,QAAQ,SAAS,WAAW,QAAQ,YAAY;AAClE,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tldraw/tlschema",
|
|
3
3
|
"description": "tldraw infinite canvas SDK (schema).",
|
|
4
|
-
"version": "4.
|
|
4
|
+
"version": "4.3.0-canary.071cf881c1c6",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "tldraw Inc.",
|
|
7
7
|
"email": "hello@tldraw.com"
|
|
@@ -51,10 +51,10 @@
|
|
|
51
51
|
"vitest": "^3.2.4"
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@tldraw/state": "4.
|
|
55
|
-
"@tldraw/store": "4.
|
|
56
|
-
"@tldraw/utils": "4.
|
|
57
|
-
"@tldraw/validate": "4.
|
|
54
|
+
"@tldraw/state": "4.3.0-canary.071cf881c1c6",
|
|
55
|
+
"@tldraw/store": "4.3.0-canary.071cf881c1c6",
|
|
56
|
+
"@tldraw/utils": "4.3.0-canary.071cf881c1c6",
|
|
57
|
+
"@tldraw/validate": "4.3.0-canary.071cf881c1c6"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
60
|
"react": "^18.2.0 || ^19.0.0",
|
package/src/index.ts
CHANGED
package/src/misc/TLHandle.ts
CHANGED
|
@@ -102,6 +102,8 @@ export interface TLHandle {
|
|
|
102
102
|
canSnap?: boolean
|
|
103
103
|
/** The type of snap to use for this handle */
|
|
104
104
|
snapType?: 'point' | 'align'
|
|
105
|
+
/** The ID of the handle to use as reference point for shift-modifier angle snapping */
|
|
106
|
+
snapReferenceHandleId?: string
|
|
105
107
|
/** The fractional index used for ordering handles */
|
|
106
108
|
index: IndexKey
|
|
107
109
|
/** The x-coordinate of the handle in the shape's local coordinate system */
|