@tldraw/editor 4.6.0-next.20de11b7e238 → 4.6.0-next.241e87d4700a

package/src/lib/editor/managers/ThemeManager/defaultThemes.ts

@@ -0,0 +1,605 @@
+import {
+	DefaultFontFamilies,
+	TLDefaultColor,
+	TLDefaultColorStyle,
+	TLTheme,
+	TLThemeColors,
+} from '@tldraw/tlschema'
+
+/**
+ * The default theme definition containing color palettes for both light and dark modes.
+ *
+ * @public
+ */
+export const DEFAULT_THEME: TLTheme = {
+	id: 'default',
+	fontSize: 16,
+	lineHeight: 1.35,
+	strokeWidth: 2,
+	fonts: {
+		draw: {
+			fontFamily: DefaultFontFamilies.draw,
+			faces: [
+				{ family: 'tldraw_draw', src: { url: 'tldraw_draw', format: 'woff2' }, weight: 'normal' },
+				{
+					family: 'tldraw_draw',
+					src: { url: 'tldraw_draw_bold', format: 'woff2' },
+					weight: 'bold',
+				},
+				{
+					family: 'tldraw_draw',
+					src: { url: 'tldraw_draw_italic', format: 'woff2' },
+					weight: 'normal',
+					style: 'italic',
+				},
+				{
+					family: 'tldraw_draw',
+					src: { url: 'tldraw_draw_italic_bold', format: 'woff2' },
+					weight: 'bold',
+					style: 'italic',
+				},
+			],
+		},
+		sans: {
+			fontFamily: DefaultFontFamilies.sans,
+			faces: [
+				{
+					family: 'tldraw_sans',
+					src: { url: 'tldraw_sans', format: 'woff2' },
+					weight: 'normal',
+					style: 'normal',
+				},
+				{
+					family: 'tldraw_sans',
+					src: { url: 'tldraw_sans_bold', format: 'woff2' },
+					weight: 'bold',
+					style: 'normal',
+				},
+				{
+					family: 'tldraw_sans',
+					src: { url: 'tldraw_sans_italic', format: 'woff2' },
+					weight: 'normal',
+					style: 'italic',
+				},
+				{
+					family: 'tldraw_sans',
+					src: { url: 'tldraw_sans_italic_bold', format: 'woff2' },
+					weight: 'bold',
+					style: 'italic',
+				},
+			],
+		},
+		serif: {
+			fontFamily: DefaultFontFamilies.serif,
+			faces: [
+				{
+					family: 'tldraw_serif',
+					src: { url: 'tldraw_serif', format: 'woff2' },
+					weight: 'normal',
+					style: 'normal',
+				},
+				{
+					family: 'tldraw_serif',
+					src: { url: 'tldraw_serif_bold', format: 'woff2' },
+					weight: 'bold',
+					style: 'normal',
+				},
+				{
+					family: 'tldraw_serif',
+					src: { url: 'tldraw_serif_italic', format: 'woff2' },
+					weight: 'normal',
+					style: 'italic',
+				},
+				{
+					family: 'tldraw_serif',
+					src: { url: 'tldraw_serif_italic_bold', format: 'woff2' },
+					weight: 'bold',
+					style: 'italic',
+				},
+			],
+		},
+		mono: {
+			fontFamily: DefaultFontFamilies.mono,
+			faces: [
+				{
+					family: 'tldraw_mono',
+					src: { url: 'tldraw_mono', format: 'woff2' },
+					weight: 'normal',
+					style: 'normal',
+				},
+				{
+					family: 'tldraw_mono',
+					src: { url: 'tldraw_mono_bold', format: 'woff2' },
+					weight: 'bold',
+					style: 'normal',
+				},
+				{
+					family: 'tldraw_mono',
+					src: { url: 'tldraw_mono_italic', format: 'woff2' },
+					weight: 'normal',
+					style: 'italic',
+				},
+				{
+					family: 'tldraw_mono',
+					src: { url: 'tldraw_mono_italic_bold', format: 'woff2' },
+					weight: 'bold',
+					style: 'italic',
+				},
+			],
+		},
+	},
+	colors: {
+		light: {
+			text: '#000000',
+			background: '#f9fafb',
+			negativeSpace: '#f9fafb',
+			solid: '#fcfffe',
+			cursor: 'black',
+			noteBorder: 'rgb(144, 144, 144)',
+			black: {
+				solid: '#1d1d1d',
+				fill: '#1d1d1d',
+				linedFill: '#363636',
+				frameHeadingStroke: '#717171',
+				frameHeadingFill: '#ffffff',
+				frameStroke: '#717171',
+				frameFill: '#ffffff',
+				frameText: '#000000',
+				noteFill: '#FCE19C',
+				noteText: '#000000',
+				semi: '#e8e8e8',
+				pattern: '#494949',
+				highlightSrgb: '#fddd00',
+				highlightP3: 'color(display-p3 0.972 0.8205 0.05)',
+			},
+			blue: {
+				solid: '#4465e9',
+				fill: '#4465e9',
+				linedFill: '#6580ec',
+				frameHeadingStroke: '#6681ec',
+				frameHeadingFill: '#f9fafe',
+				frameStroke: '#6681ec',
+				frameFill: '#f9fafe',
+				frameText: '#000000',
+				noteFill: '#8AA3FF',
+				noteText: '#000000',
+				semi: '#dce1f8',
+				pattern: '#6681ee',
+				highlightSrgb: '#10acff',
+				highlightP3: 'color(display-p3 0.308 0.6632 0.9996)',
+			},
+			green: {
+				solid: '#099268',
+				fill: '#099268',
+				linedFill: '#0bad7c',
+				frameHeadingStroke: '#37a684',
+				frameHeadingFill: '#f8fcfa',
+				frameStroke: '#37a684',
+				frameFill: '#f8fcfa',
+				frameText: '#000000',
+				noteFill: '#6FC896',
+				noteText: '#000000',
+				semi: '#d3e9e3',
+				pattern: '#39a785',
+				highlightSrgb: '#00ffc8',
+				highlightP3: 'color(display-p3 0.2536 0.984 0.7981)',
+			},
+			grey: {
+				solid: '#9fa8b2',
+				fill: '#9fa8b2',
+				linedFill: '#bbc1c9',
+				frameHeadingStroke: '#aaaaab',
+				frameHeadingFill: '#fbfcfc',
+				frameStroke: '#aaaaab',
+				frameFill: '#fcfcfd',
+				frameText: '#000000',
+				noteFill: '#C0CAD3',
+				noteText: '#000000',
+				semi: '#eceef0',
+				pattern: '#bcc3c9',
+				highlightSrgb: '#cbe7f1',
+				highlightP3: 'color(display-p3 0.8163 0.9023 0.9416)',
+			},
+			'light-blue': {
+				solid: '#4ba1f1',
+				fill: '#4ba1f1',
+				linedFill: '#7abaf5',
+				frameHeadingStroke: '#6cb2f3',
+				frameHeadingFill: '#f8fbfe',
+				frameStroke: '#6cb2f3',
+				frameFill: '#fafcff',
+				frameText: '#000000',
+				noteFill: '#9BC4FD',
+				noteText: '#000000',
+				semi: '#ddedfa',
+				pattern: '#6fbbf8',
+				highlightSrgb: '#00f4ff',
+				highlightP3: 'color(display-p3 0.1512 0.9414 0.9996)',
+			},
+			'light-green': {
+				solid: '#4cb05e',
+				fill: '#4cb05e',
+				linedFill: '#7ec88c',
+				frameHeadingStroke: '#6dbe7c',
+				frameHeadingFill: '#f8fcf9',
+				frameStroke: '#6dbe7c',
+				frameFill: '#fafdfa',
+				frameText: '#000000',
+				noteFill: '#98D08A',
+				noteText: '#000000',
+				semi: '#dbf0e0',
+				pattern: '#65cb78',
+				highlightSrgb: '#65f641',
+				highlightP3: 'color(display-p3 0.563 0.9495 0.3857)',
+			},
+			'light-red': {
+				solid: '#f87777',
+				fill: '#f87777',
+				linedFill: '#f99a9a',
+				frameHeadingStroke: '#f89090',
+				frameHeadingFill: '#fffafa',
+				frameStroke: '#f89090',
+				frameFill: '#fffbfb',
+				frameText: '#000000',
+				noteFill: '#F7A5A1',
+				noteText: '#000000',
+				semi: '#f4dadb',
+				pattern: '#fe9e9e',
+				highlightSrgb: '#ff7fa3',
+				highlightP3: 'color(display-p3 0.9988 0.5301 0.6397)',
+			},
+			'light-violet': {
+				solid: '#e085f4',
+				fill: '#e085f4',
+				linedFill: '#e9abf7',
+				frameHeadingStroke: '#e59bf5',
+				frameHeadingFill: '#fefaff',
+				frameStroke: '#e59bf5',
+				frameFill: '#fefbff',
+				frameText: '#000000',
+				noteFill: '#DFB0F9',
+				noteText: '#000000',
+				semi: '#f5eafa',
+				pattern: '#e9acf8',
+				highlightSrgb: '#ff88ff',
+				highlightP3: 'color(display-p3 0.9676 0.5652 0.9999)',
+			},
+			orange: {
+				solid: '#e16919',
+				fill: '#e16919',
+				linedFill: '#ea8643',
+				frameHeadingStroke: '#e68544',
+				frameHeadingFill: '#fef9f6',
+				frameStroke: '#e68544',
+				frameFill: '#fef9f6',
+				frameText: '#000000',
+				noteFill: '#FAA475',
+				noteText: '#000000',
+				semi: '#f8e2d4',
+				pattern: '#f78438',
+				highlightSrgb: '#ffa500',
+				highlightP3: 'color(display-p3 0.9988 0.6905 0.266)',
+			},
+			red: {
+				solid: '#e03131',
+				fill: '#e03131',
+				linedFill: '#e75f5f',
+				frameHeadingStroke: '#e55757',
+				frameHeadingFill: '#fef7f7',
+				frameStroke: '#e55757',
+				frameFill: '#fef9f9',
+				frameText: '#000000',
+				noteFill: '#FC8282',
+				noteText: '#000000',
+				semi: '#f4dadb',
+				pattern: '#e55959',
+				highlightSrgb: '#ff636e',
+				highlightP3: 'color(display-p3 0.9992 0.4376 0.45)',
+			},
+			violet: {
+				solid: '#ae3ec9',
+				fill: '#ae3ec9',
+				linedFill: '#be68d4',
+				frameHeadingStroke: '#bc62d3',
+				frameHeadingFill: '#fcf7fd',
+				frameStroke: '#bc62d3',
+				frameFill: '#fdf9fd',
+				frameText: '#000000',
+				noteFill: '#DB91FD',
+				noteText: '#000000',
+				semi: '#ecdcf2',
+				pattern: '#bd63d3',
+				highlightSrgb: '#c77cff',
+				highlightP3: 'color(display-p3 0.7469 0.5089 0.9995)',
+			},
+			yellow: {
+				solid: '#f1ac4b',
+				fill: '#f1ac4b',
+				linedFill: '#f5c27a',
+				frameHeadingStroke: '#f3bb6c',
+				frameHeadingFill: '#fefcf8',
+				frameStroke: '#f3bb6c',
+				frameFill: '#fffdfa',
+				frameText: '#000000',
+				noteFill: '#FED49A',
+				noteText: '#000000',
+				semi: '#f9f0e6',
+				pattern: '#fecb92',
+				highlightSrgb: '#fddd00',
+				highlightP3: 'color(display-p3 0.972 0.8705 0.05)',
+			},
+			white: {
+				solid: '#FFFFFF',
+				fill: '#FFFFFF',
+				linedFill: '#ffffff',
+				semi: '#f5f5f5',
+				pattern: '#f9f9f9',
+				frameHeadingStroke: '#7d7d7d',
+				frameHeadingFill: '#ffffff',
+				frameStroke: '#7d7d7d',
+				frameFill: '#ffffff',
+				frameText: '#000000',
+				noteFill: '#FFFFFF',
+				noteText: '#000000',
+				highlightSrgb: '#ffffff',
+				highlightP3: 'color(display-p3 1 1 1)',
+			},
+		},
+		dark: {
+			text: 'hsl(210, 17%, 98%)',
+			background: 'hsl(240, 5%, 6.5%)',
+			negativeSpace: 'hsl(240, 5%, 6.5%)',
+			solid: '#010403',
+			cursor: 'white',
+			noteBorder: 'rgb(20, 20, 20)',
+
+			black: {
+				solid: '#f2f2f2',
+				fill: '#f2f2f2',
+				linedFill: '#ffffff',
+				frameHeadingStroke: '#5c5c5c',
+				frameHeadingFill: '#252525',
+				frameStroke: '#5c5c5c',
+				frameFill: '#0c0c0c',
+				frameText: '#f2f2f2',
+				noteFill: '#2c2c2c',
+				noteText: '#f2f2f2',
+				semi: '#2c3036',
+				pattern: '#989898',
+				highlightSrgb: '#d2b700',
+				highlightP3: 'color(display-p3 0.8078 0.6225 0.0312)',
+			},
+			blue: {
+				solid: '#4f72fc', // 3c60f0
+				fill: '#4f72fc',
+				linedFill: '#3c5cdd',
+				frameHeadingStroke: '#384994',
+				frameHeadingFill: '#1C2036',
+				frameStroke: '#384994',
+				frameFill: '#11141f',
+				frameText: '#f2f2f2',
+				noteFill: '#2A3F98',
+				noteText: '#f2f2f2',
+				semi: '#262d40',
+				pattern: '#3a4b9e',
+				highlightSrgb: '#0079d2',
+				highlightP3: 'color(display-p3 0.0032 0.4655 0.7991)',
+			},
+			green: {
+				solid: '#099268',
+				fill: '#099268',
+				linedFill: '#087856',
+				frameHeadingStroke: '#10513C',
+				frameHeadingFill: '#14241f',
+				frameStroke: '#10513C',
+				frameFill: '#0E1614',
+				frameText: '#f2f2f2',
+				noteFill: '#014429',
+				noteText: '#f2f2f2',
+				semi: '#253231',
+				pattern: '#366a53',
+				highlightSrgb: '#009774',
+				highlightP3: 'color(display-p3 0.0085 0.582 0.4604)',
+			},
+			grey: {
+				solid: '#9398b0',
+				fill: '#9398b0',
+				linedFill: '#8388a5',
+				frameHeadingStroke: '#42474D',
+				frameHeadingFill: '#23262A',
+				frameStroke: '#42474D',
+				frameFill: '#151719',
+				frameText: '#f2f2f2',
+				noteFill: '#56595F',
+				noteText: '#f2f2f2',
+				semi: '#33373c',
+				pattern: '#7c8187',
+				highlightSrgb: '#9cb4cb',
+				highlightP3: 'color(display-p3 0.6299 0.7012 0.7856)',
+			},
+			'light-blue': {
+				solid: '#4dabf7',
+				fill: '#4dabf7',
+				linedFill: '#2793ec',
+				frameHeadingStroke: '#075797',
+				frameHeadingFill: '#142839',
+				frameStroke: '#075797',
+				frameFill: '#0B1823',
+				frameText: '#f2f2f2',
+				noteFill: '#1F5495',
+				noteText: '#f2f2f2',
+				semi: '#2a3642',
+				pattern: '#4d7aa9',
+				highlightSrgb: '#00bdc8',
+				highlightP3: 'color(display-p3 0.0023 0.7259 0.7735)',
+			},
+			'light-green': {
+				solid: '#40c057',
+				fill: '#40c057',
+				linedFill: '#37a44b',
+				frameHeadingStroke: '#1C5427',
+				frameHeadingFill: '#18251A',
+				frameStroke: '#1C5427',
+				frameFill: '#0F1911',
+				frameText: '#f2f2f2',
+				noteFill: '#21581D',
+				noteText: '#f2f2f2',
+				semi: '#2a3830',
+				pattern: '#4e874e',
+				highlightSrgb: '#00a000',
+				highlightP3: 'color(display-p3 0.2711 0.6172 0.0195)',
+			},
+			'light-red': {
+				solid: '#ff8787',
+				fill: '#ff8787',
+				linedFill: '#ff6666',
+				frameHeadingStroke: '#6f3232',
+				frameHeadingFill: '#341818',
+				frameStroke: '#6f3232',
+				frameFill: '#181212',
+				frameText: '#f2f2f2',
+				noteFill: '#7a3333',
+				noteText: '#f2f2f2',
+				semi: '#3c2b2b',
+				pattern: '#a56767',
+				highlightSrgb: '#db005b',
+				highlightP3: 'color(display-p3 0.7849 0.0585 0.3589)',
+			},
+			'light-violet': {
+				solid: '#e599f7',
+				fill: '#e599f7',
+				linedFill: '#dc71f4',
+				frameHeadingStroke: '#6c367a',
+				frameHeadingFill: '#2D2230',
+				frameStroke: '#6c367a',
+				frameFill: '#1C151E',
+				frameText: '#f2f2f2',
+				noteFill: '#762F8E',
+				noteText: '#f2f2f2',
+				semi: '#383442',
+				pattern: '#9770a9',
+				highlightSrgb: '#c400c7',
+				highlightP3: 'color(display-p3 0.7024 0.0403 0.753)',
+			},
+			orange: {
+				solid: '#f76707',
+				fill: '#f76707',
+				linedFill: '#f54900',
+				frameHeadingStroke: '#773a0e',
+				frameHeadingFill: '#2f1d13',
+				frameStroke: '#773a0e',
+				frameFill: '#1c1512',
+				frameText: '#f2f2f2',
+				noteFill: '#7c3905',
+				noteText: '#f2f2f2',
+				semi: '#3b2e27',
+				pattern: '#9f552d',
+				highlightSrgb: '#d07a00',
+				highlightP3: 'color(display-p3 0.7699 0.4937 0.0085)',
+			},
+			red: {
+				solid: '#e03131',
+				fill: '#e03131',
+				linedFill: '#c31d1d',
+				frameHeadingStroke: '#701e1e',
+				frameHeadingFill: '#301616',
+				frameStroke: '#701e1e',
+				frameFill: '#1b1313',
+				frameText: '#f2f2f2',
+				noteFill: '#7e201f',
+				noteText: '#f2f2f2',
+				semi: '#382726',
+				pattern: '#8f3734',
+				highlightSrgb: '#de002c',
+				highlightP3: 'color(display-p3 0.7978 0.0509 0.2035)',
+			},
+			violet: {
+				solid: '#ae3ec9',
+				fill: '#ae3ec9',
+				linedFill: '#8f2fa7',
+				frameHeadingStroke: '#6d1583',
+				frameHeadingFill: '#27152e',
+				frameStroke: '#6d1583',
+				frameFill: '#1b0f21',
+				frameText: '#f2f2f2',
+				noteFill: '#5f1c70',
+				noteText: '#f2f2f2',
+				semi: '#342938',
+				pattern: '#763a8b',
+				highlightSrgb: '#9e00ee',
+				highlightP3: 'color(display-p3 0.5651 0.0079 0.8986)',
+			},
+			yellow: {
+				solid: '#ffc034',
+				fill: '#ffc034',
+				linedFill: '#ffae00',
+				frameHeadingStroke: '#684e12',
+				frameHeadingFill: '#2a2113',
+				frameStroke: '#684e12',
+				frameFill: '#1e1911',
+				frameText: '#f2f2f2',
+				noteFill: '#8a5e1c',
+				noteText: '#f2f2f2',
+				semi: '#3b352b',
+				pattern: '#fecb92',
+				highlightSrgb: '#d2b700',
+				highlightP3: 'color(display-p3 0.8078 0.7225 0.0312)',
+			},
+			white: {
+				solid: '#f3f3f3',
+				fill: '#f3f3f3',
+				linedFill: '#f3f3f3',
+				semi: '#f5f5f5',
+				pattern: '#f9f9f9',
+				frameHeadingStroke: '#ffffff',
+				frameHeadingFill: '#ffffff',
+				frameStroke: '#ffffff',
+				frameFill: '#ffffff',
+				frameText: '#000000',
+				noteFill: '#eaeaea',
+				noteText: '#1d1d1d',
+				highlightSrgb: '#ffffff',
+				highlightP3: 'color(display-p3 1 1 1)',
+			},
+		},
+	},
+}
+
+/**
+ * Resolves a color style value to its actual CSS color string for a given theme and variant.
+ * If the color is not a default theme color, returns the color value as-is.
+ *
+ * @param colors - The color palette for the current color mode (e.g. `theme.colors[colorMode]`)
+ * @param color - The color style value to resolve
+ * @param variant - Which variant of the color to return (solid, fill, pattern, etc.)
+ * @returns The CSS color string for the specified color and variant
+ *
+ * @example
+ * ```ts
+ * import { getColorValue } from 'tldraw'
+ *
+ * const colors = editor.getCurrentTheme().colors[editor.getColorMode()]
+ *
+ * // Get the solid variant of red
+ * const redSolid = getColorValue(colors, 'red', 'solid') // '#e03131'
+ *
+ * // Get the fill variant of blue
+ * const blueFill = getColorValue(colors, 'blue', 'fill') // '#4465e9'
+ *
+ * // Custom color passes through unchanged
+ * const customColor = getColorValue(colors, '#ff0000', 'solid') // '#ff0000'
+ * ```
+ *
+ * @public
+ */
+export function getColorValue(
+	colors: TLThemeColors,
+	color: TLDefaultColorStyle | string,
+	variant: keyof TLDefaultColor
+): string {
+	const colorEntry = colors[color as TLDefaultColorStyle]
+	if (!colorEntry || typeof colorEntry === 'string') {
+		return color
+	}
+	return colorEntry[variant]
+}