Flatten color theme object (tldraw#6466)

steveruizok · web-flow · commit 2b8b5023f0a5 · 2025-08-08T20:12:44.000Z
This PR flattens the color theme object and introduces a new helper, `getColorValue`, that helps pull a color from the theme. This should actually make tldraw#6462 (and other color-related work) much more practical. ## Flattening `DefaultColorThemePalette` This PR flattens the `DefaultColorThemePalette`, removing the nested properties and renaming them instead. ```ts theme.black.frame.fill ``` Becomes ```ts theme.black.frameFill ``` ## `getColorValue` This pull request standardizes and simplifies how color values are accessed throughout the codebase by introducing and consistently using the new `getColorValue` utility function. This change replaces direct property access on the `theme` object with calls to `getColorValue`, improving maintainability and reducing the risk of errors due to inconsistent color property keys. The update affects a wide range of shape utilities, rendering logic, and example components. ```ts theme.black.frameFill ``` Becomes ```ts getColorValue(theme, 'black', 'frameFill') ``` **Refactoring color value access:** * Replaced direct `theme` property access with `getColorValue` for all shape utilities, including `ArrowShapeUtil`, `DrawShapeUtil`, `GeoShapeUtil`, `FrameShapeUtil`, `HighlightShapeUtil`, `LineShapeUtil`, and `NoteShapeUtil`, ensuring consistent and safer color retrieval. * Updated SVG export logic to use `getColorValue` for determining frame background color. * Added `getColorValue` to imports in all affected files to support the new color access pattern. * Updated example components (`CardShapeUtil`, `CustomRenderer`, `ShapeWithTldrawStylesExample`, `SpeechBubbleUtil`) to use `getColorValue` instead of direct theme property access for colors in rendering logic. These changes collectively improve code consistency, make color logic more robust, and pave the way for easier updates or extensions to color theming in the future. ### Change type - [ ] `bugfix` - [x] `improvement` - [ ] `feature` - [x] `api` - [ ] `other` ### API changes - Changes to the `DefaultColorThemePalette` object. Any color customization may need to be refactored.
diff --git a/apps/examples/src/examples/custom-config/CardShape/CardShapeUtil.tsx b/apps/examples/src/examples/custom-config/CardShape/CardShapeUtil.tsx
@@ -4,6 +4,7 @@ import {
 	Rectangle2d,
 	ShapeUtil,
 	TLResizeInfo,
+	getColorValue,
 	getDefaultColorTheme,
 	resizeBox,
 } from 'tldraw'
@@ -65,8 +66,8 @@ export class CardShapeUtil extends ShapeUtil<ICardShape> {
 					alignItems: 'center',
 					justifyContent: 'center',
 					pointerEvents: 'all',
-					backgroundColor: theme[shape.props.color].semi,
-					color: theme[shape.props.color].solid,
+					backgroundColor: getColorValue(theme, shape.props.color, 'semi'),
+					color: getColorValue(theme, shape.props.color, 'solid'),
 				}}
 			>
 				<h2>Clicks: {count}</h2>
diff --git a/apps/examples/src/examples/custom-renderer/CustomRenderer.tsx b/apps/examples/src/examples/custom-renderer/CustomRenderer.tsx
@@ -1,5 +1,5 @@
 import { useLayoutEffect, useRef } from 'react'
-import { TLDrawShape, TLGeoShape, getDefaultColorTheme, useEditor } from 'tldraw'
+import { TLDrawShape, TLGeoShape, getColorValue, getDefaultColorTheme, useEditor } from 'tldraw'
 
 export function CustomRenderer() {
 	const editor = useEditor()
@@ -70,17 +70,17 @@ export function CustomRenderer() {
 							}
 						}
 					}
-					ctx.strokeStyle = theme[shape.props.color].solid
+					ctx.strokeStyle = getColorValue(theme, shape.props.color, 'solid')
 					ctx.lineWidth = 4
 					ctx.stroke()
 					if (shape.props.fill !== 'none' && shape.props.isClosed) {
-						ctx.fillStyle = theme[shape.props.color].semi
+						ctx.fillStyle = getColorValue(theme, shape.props.color, 'semi')
 						ctx.fill()
 					}
 				} else if (editor.isShapeOfType<TLGeoShape>(shape, 'geo')) {
 					// Draw a geo shape
 					const bounds = editor.getShapeGeometry(shape).bounds
-					ctx.strokeStyle = theme[shape.props.color].solid
+					ctx.strokeStyle = getColorValue(theme, shape.props.color, 'solid')
 					ctx.lineWidth = 2
 					ctx.strokeRect(bounds.minX, bounds.minY, bounds.width, bounds.height)
 				} else {
diff --git a/apps/examples/src/examples/shape-with-tldraw-styles/ShapeWithTldrawStylesExample.tsx b/apps/examples/src/examples/shape-with-tldraw-styles/ShapeWithTldrawStylesExample.tsx
@@ -2,6 +2,7 @@ import {
 	BaseBoxShapeUtil,
 	DefaultColorStyle,
 	DefaultSizeStyle,
+	getColorValue,
 	HTMLContainer,
 	T,
 	TLBaseShape,
@@ -65,7 +66,7 @@ class MyShapeUtil extends BaseBoxShapeUtil<IMyShape> {
 					style={{
 						// [3]
 						fontSize: FONT_SIZES[shape.props.size],
-						color: theme[shape.props.color].solid,
+						color: getColorValue(theme, shape.props.color, 'solid'),
 					}}
 				>
 					Select the shape and use the style panel to change the font size and color
diff --git a/apps/examples/src/examples/speech-bubble/SpeechBubble/SpeechBubbleUtil.tsx b/apps/examples/src/examples/speech-bubble/SpeechBubble/SpeechBubbleUtil.tsx
@@ -19,6 +19,7 @@ import {
 	TLResizeInfo,
 	Vec,
 	ZERO_INDEX_KEY,
+	getColorValue,
 	resizeBox,
 	structuredClone,
 	useDefaultColorTheme,
@@ -189,7 +190,7 @@ export class SpeechBubbleUtil extends ShapeUtil<SpeechBubbleShape> {
 					<path
 						d={pathData}
 						strokeWidth={STROKE_SIZES[size]}
-						stroke={theme[color].solid}
+						stroke={getColorValue(theme, color, 'solid')}
 						fill={'none'}
 					/>
 				</svg>
@@ -203,7 +204,7 @@ export class SpeechBubbleUtil extends ShapeUtil<SpeechBubbleShape> {
 					align={align}
 					verticalAlign="start"
 					text={text}
-					labelColor={theme[color].solid}
+					labelColor={getColorValue(theme, color, 'solid')}
 					isSelected={isSelected}
 					wrap
 				/>
diff --git a/packages/editor/src/lib/exports/getSvgJsx.tsx b/packages/editor/src/lib/exports/getSvgJsx.tsx
@@ -4,6 +4,7 @@ import {
 	TLGroupShape,
 	TLShape,
 	TLShapeId,
+	getColorValue,
 	getDefaultColorTheme,
 } from '@tldraw/tlschema'
 import { hasOwnProperty, promiseWithResolve, uniqueId } from '@tldraw/utils'
@@ -373,8 +374,7 @@ function SvgExport({
 			| { options: { showColors: boolean } }
 		if (frameShapeUtil?.options.showColors) {
 			const shape = editor.getShape(singleFrameShapeId)! as TLFrameShape
-			const color = theme[shape.props.color]
-			backgroundColor = color.frame.fill
+			backgroundColor = getColorValue(theme, shape.props.color, 'frameFill')
 		} else {
 			backgroundColor = theme.solid
 		}
diff --git a/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx b/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx
@@ -31,6 +31,7 @@ import {
 	clamp,
 	debugFlags,
 	exhaustiveSwitchError,
+	getColorValue,
 	getDefaultColorTheme,
 	getFontsFromRichText,
 	invLerp,
@@ -785,8 +786,8 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 						lineHeight={TEXT_PROPS.lineHeight}
 						align="middle"
 						verticalAlign="middle"
+						labelColor={getColorValue(theme, shape.props.labelColor, 'solid')}
 						richText={shape.props.richText}
-						labelColor={theme[shape.props.labelColor].solid}
 						textWidth={labelPosition.box.w - ARROW_LABEL_PADDING * 2 * shape.props.scale}
 						isSelected={isSelected}
 						padding={0}
@@ -934,8 +935,8 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 					font={shape.props.font}
 					align="middle"
 					verticalAlign="middle"
+					labelColor={getColorValue(theme, shape.props.labelColor, 'solid')}
 					richText={shape.props.richText}
-					labelColor={theme[shape.props.labelColor].solid}
 					bounds={getArrowLabelPosition(this.editor, shape)
 						.box.clone()
 						.expandBy(-ARROW_LABEL_PADDING * shape.props.scale)}
@@ -1077,7 +1078,7 @@ const ArrowSvg = track(function ArrowSvg({
 			</defs>
 			<g
 				fill="none"
-				stroke={theme[shape.props.color].solid}
+				stroke={getColorValue(theme, shape.props.color, 'solid')}
 				strokeWidth={strokeWidth}
 				strokeLinejoin="round"
 				strokeLinecap="round"
diff --git a/packages/tldraw/src/lib/shapes/draw/DrawShapeUtil.tsx b/packages/tldraw/src/lib/shapes/draw/DrawShapeUtil.tsx
@@ -14,6 +14,7 @@ import {
 	VecLike,
 	drawShapeMigrations,
 	drawShapeProps,
+	getColorValue,
 	last,
 	lerp,
 	rng,
@@ -289,7 +290,7 @@ function DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverrid
 				<path
 					d={svgInk(allPointsFromSegments, options)}
 					strokeLinecap="round"
-					fill={theme[shape.props.color].solid}
+					fill={getColorValue(theme, shape.props.color, 'solid')}
 				/>
 			</>
 		)
@@ -313,8 +314,8 @@ function DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverrid
 			<path
 				d={solidStrokePath}
 				strokeLinecap="round"
-				fill={isDot ? theme[shape.props.color].solid : 'none'}
-				stroke={theme[shape.props.color].solid}
+				fill={isDot ? getColorValue(theme, shape.props.color, 'solid') : 'none'}
+				stroke={getColorValue(theme, shape.props.color, 'solid')}
 				strokeWidth={sw}
 				strokeDasharray={isDot ? 'none' : getDrawShapeStrokeDashArray(shape, sw, dotAdjustment)}
 				strokeDashoffset="0"
diff --git a/packages/tldraw/src/lib/shapes/frame/FrameShapeUtil.tsx b/packages/tldraw/src/lib/shapes/frame/FrameShapeUtil.tsx
@@ -19,6 +19,7 @@ import {
 	compact,
 	frameShapeMigrations,
 	frameShapeProps,
+	getColorValue,
 	getDefaultColorTheme,
 	lerp,
 	resizeBox,
@@ -220,13 +221,12 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 		)
 
 		const showFrameColors = this.options.showColors
-
-		const color = theme[shape.props.color]
-		const frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill
-		const frameStroke = showFrameColors ? color.frame.stroke : theme.black.frame.stroke
-		const frameHeadingStroke = showFrameColors ? color.frame.headingStroke : theme.background
-		const frameHeadingFill = showFrameColors ? color.frame.headingFill : theme.background
-		const frameHeadingText = showFrameColors ? color.frame.text : theme.text
+		const colorToUse = showFrameColors ? shape.props.color : 'black'
+		const frameFill = getColorValue(theme, colorToUse, 'frameFill')
+		const frameStroke = getColorValue(theme, colorToUse, 'frameStroke')
+		const frameHeadingStroke = getColorValue(theme, colorToUse, 'frameHeadingStroke')
+		const frameHeadingFill = getColorValue(theme, colorToUse, 'frameHeadingFill')
+		const frameHeadingText = getColorValue(theme, colorToUse, 'frameText')
 
 		return (
 			<>
@@ -277,13 +277,12 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 		const text = createTextJsxFromSpans(this.editor, spans, opts)
 
 		const showFrameColors = this.options.showColors
-
-		const color = theme[shape.props.color]
-		const frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill
-		const frameStroke = showFrameColors ? color.frame.stroke : theme.black.frame.stroke
-		const frameHeadingStroke = showFrameColors ? color.frame.headingStroke : theme.background
-		const frameHeadingFill = showFrameColors ? color.frame.headingFill : theme.background
-		const frameHeadingText = showFrameColors ? color.frame.text : theme.text
+		const colorToUse = showFrameColors ? shape.props.color : 'black'
+		const frameFill = getColorValue(theme, colorToUse, 'frameFill')
+		const frameStroke = getColorValue(theme, colorToUse, 'frameStroke')
+		const frameHeadingStroke = getColorValue(theme, colorToUse, 'frameHeadingStroke')
+		const frameHeadingFill = getColorValue(theme, colorToUse, 'frameHeadingFill')
+		const frameHeadingText = getColorValue(theme, colorToUse, 'frameText')
 
 		return (
 			<>
diff --git a/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx b/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx
@@ -18,6 +18,7 @@ import {
 	exhaustiveSwitchError,
 	geoShapeMigrations,
 	geoShapeProps,
+	getColorValue,
 	getDefaultColorTheme,
 	getFontsFromRichText,
 	isEqual,
@@ -220,7 +221,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 							verticalAlign={verticalAlign}
 							richText={richText}
 							isSelected={isOnlySelected}
-							labelColor={theme[props.labelColor].solid}
+							labelColor={getColorValue(theme, props.labelColor, 'solid')}
 							wrap
 						/>
 					</HTMLContainer>
@@ -278,7 +279,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 					align={props.align}
 					verticalAlign={props.verticalAlign}
 					richText={props.richText}
-					labelColor={theme[props.labelColor].solid}
+					labelColor={getColorValue(theme, props.labelColor, 'solid')}
 					bounds={bounds}
 					padding={LABEL_PADDING}
 				/>
diff --git a/packages/tldraw/src/lib/shapes/geo/components/GeoShapeBody.tsx b/packages/tldraw/src/lib/shapes/geo/components/GeoShapeBody.tsx
@@ -1,4 +1,4 @@
-import { TLGeoShape } from '@tldraw/editor'
+import { getColorValue, TLGeoShape } from '@tldraw/editor'
 import { ShapeFill } from '../../shared/ShapeFill'
 import { STROKE_SIZES } from '../../shared/default-shape-constants'
 import { useDefaultColorTheme } from '../../shared/useDefaultColorTheme'
@@ -33,7 +33,7 @@ export function GeoShapeBody({
 				strokeWidth,
 				forceSolid,
 				randomSeed: shape.id,
-				props: { fill: 'none', stroke: theme[color].solid },
+				props: { fill: 'none', stroke: getColorValue(theme, color, 'solid') },
 			})}
 		</>
 	)
diff --git a/packages/tldraw/src/lib/shapes/highlight/HighlightShapeUtil.tsx b/packages/tldraw/src/lib/shapes/highlight/HighlightShapeUtil.tsx
@@ -10,6 +10,7 @@ import {
 	TLHighlightShapeProps,
 	TLResizeInfo,
 	VecLike,
+	getColorValue,
 	highlightShapeMigrations,
 	highlightShapeProps,
 	last,
@@ -289,7 +290,12 @@ function HighlightRenderer({
 			: getShapeDot(shape.props.segments[0].points[0])
 
 	const colorSpace = useColorSpace()
-	const color = theme[shape.props.color].highlight[colorSpace]
+
+	const color = getColorValue(
+		theme,
+		shape.props.color,
+		colorSpace === 'p3' ? 'highlightP3' : 'highlightSrgb'
+	)
 
 	return (
 		<path
diff --git a/packages/tldraw/src/lib/shapes/line/LineShapeUtil.tsx b/packages/tldraw/src/lib/shapes/line/LineShapeUtil.tsx
@@ -12,6 +12,7 @@ import {
 	WeakCache,
 	ZERO_INDEX_KEY,
 	assert,
+	getColorValue,
 	getIndexAbove,
 	getIndexBetween,
 	getIndices,
@@ -346,6 +347,10 @@ function LineShapeSvg({
 		strokeWidth,
 		forceSolid,
 		randomSeed: shape.id,
-		props: { transform: `scale(${scale})`, stroke: theme[color].solid, fill: 'none' },
+		props: {
+			transform: `scale(${scale})`,
+			stroke: getColorValue(theme, color, 'solid'),
+			fill: 'none',
+		},
 	})
 }
diff --git a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx
@@ -17,6 +17,7 @@ import {
 	Vec,
 	WeakCache,
 	exhaustiveSwitchError,
+	getColorValue,
 	getDefaultColorTheme,
 	getFontsFromRichText,
 	isEqual,
@@ -288,7 +289,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 					style={{
 						width: nw,
 						height: nh,
-						backgroundColor: theme[color].note.fill,
+						backgroundColor: getColorValue(theme, color, 'noteFill'),
 						borderBottom: hideShadows
 							? isDarkMode
 								? `${2 * scale}px solid rgb(20, 20, 20)`
@@ -308,7 +309,11 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 							verticalAlign={verticalAlign}
 							richText={richText}
 							isSelected={isSelected}
-							labelColor={labelColor === 'black' ? theme[color].note.text : theme[labelColor].fill}
+							labelColor={
+								labelColor === 'black'
+									? getColorValue(theme, color, 'noteText')
+									: getColorValue(theme, labelColor, 'fill')
+							}
 							wrap
 							padding={LABEL_PADDING * scale}
 							hasCustomTabBehavior
@@ -343,7 +348,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 				align={shape.props.align}
 				verticalAlign={shape.props.verticalAlign}
 				richText={shape.props.richText}
-				labelColor={theme[shape.props.color].note.text}
+				labelColor={getColorValue(theme, shape.props.color, 'noteText')}
 				bounds={bounds}
 				padding={LABEL_PADDING}
 				showTextOutline={false}
@@ -357,7 +362,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 					rx={1}
 					width={NOTE_SIZE}
 					height={bounds.h}
-					fill={theme[shape.props.color].note.fill}
+					fill={getColorValue(theme, shape.props.color, 'noteFill')}
 				/>
 				{textLabel}
 			</>
diff --git a/packages/tldraw/src/lib/shapes/shared/ShapeFill.tsx b/packages/tldraw/src/lib/shapes/shared/ShapeFill.tsx
@@ -1,4 +1,5 @@
 import {
+	getColorValue,
 	TLDefaultColorStyle,
 	TLDefaultColorTheme,
 	TLDefaultFillStyle,
@@ -29,13 +30,13 @@ export const ShapeFill = React.memo(function ShapeFill({
 			return null
 		}
 		case 'solid': {
-			return <path fill={theme[color].semi} d={d} />
+			return <path fill={getColorValue(theme, color, 'semi')} d={d} />
 		}
 		case 'semi': {
-			return <path fill={theme.solid} d={d} />
+			return <path fill={getColorValue(theme, color, 'solid')} d={d} />
 		}
 		case 'fill': {
-			return <path fill={theme[color].fill} d={d} />
+			return <path fill={getColorValue(theme, color, 'fill')} d={d} />
 		}
 		case 'pattern': {
 			return <PatternFill theme={theme} color={color} fill={fill} d={d} scale={scale} />
@@ -53,13 +54,13 @@ export function PatternFill({ d, color, theme }: ShapeFillProps) {
 
 	return (
 		<>
-			<path fill={theme[color].pattern} d={d} />
+			<path fill={getColorValue(theme, color, 'pattern')} d={d} />
 			<path
 				fill={
 					svgExport
 						? `url(#${getHashPatternZoomName(1, theme.id)})`
 						: teenyTiny
-							? theme[color].semi
+							? getColorValue(theme, color, 'semi')
 							: `url(#${getHashPatternZoomName(zoomLevel, theme.id)})`
 				}
 				d={d}
diff --git a/packages/tldraw/src/lib/shapes/text/TextShapeUtil.tsx b/packages/tldraw/src/lib/shapes/text/TextShapeUtil.tsx
diff --git a/packages/tldraw/src/lib/ui/components/MobileStylePanel.tsx b/packages/tldraw/src/lib/ui/components/MobileStylePanel.tsx
diff --git a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx
diff --git a/packages/tlschema/api-report.api.md b/packages/tlschema/api-report.api.md
diff --git a/packages/tlschema/src/index.ts b/packages/tlschema/src/index.ts
diff --git a/packages/tlschema/src/styles/TLColorStyle.ts b/packages/tlschema/src/styles/TLColorStyle.ts
diff --git a/templates/ai/worker/do/openai/getTldrawAiChangesFromSimpleEvents.ts b/templates/ai/worker/do/openai/getTldrawAiChangesFromSimpleEvents.ts
