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

package/src/styles/TLColorStyle.ts

@@ -1,26 +1,23 @@
-import { Expand } from '@tldraw/utils'
-import { T } from '@tldraw/validate'
 import { StyleProp } from './StyleProp'
+import { TLDefaultColor, TLThemeDefaultColors, TLThemes } from './TLTheme'
 
 /**
- * Array of default color names available in tldraw's color palette.
- * These colors form the basis for the default color style system and are available
- * in both light and dark theme variants.
- *
- * @example
- * ```ts
- * import { defaultColorNames } from '@tldraw/tlschema'
- *
- * // Create a color picker with all default colors
- * const colorOptions = defaultColorNames.map(color => ({
- *   name: color,
- *   value: color
- * }))
- * ```
+ * The names of all available shape colors, derived from {@link TLThemeDefaultColors}.
+ * Extend {@link TLThemeDefaultColors} to add custom color names.
  *
  * @public
  */
-export const defaultColorNames = [
+export type TLDefaultColorStyle = {
+	[K in keyof TLThemeDefaultColors]: TLThemeDefaultColors[K] extends TLDefaultColor ? K : never
+}[keyof TLThemeDefaultColors] &
+	string
+
+/**
+ * Used only for initial values of the color style; the source of truth has moved to TLTheme.
+ *
+ * @internal
+ */
+const defaultColorNames: TLDefaultColorStyle[] = [
 	'black',
 	'grey',
 	'light-violet',
@@ -37,579 +34,6 @@ export const defaultColorNames = [
 ] as const
 
 /**
- * Defines the color variants available for each color in the default theme.
- * Each color has multiple variants for different use cases like fills, strokes,
- * patterns, and UI elements like frames and notes.
- *
- * @example
- * ```ts
- * import { TLDefaultColorThemeColor } from '@tldraw/tlschema'
- *
- * const blueColor: TLDefaultColorThemeColor = {
- *   solid: '#4465e9',
- *   semi: '#dce1f8',
- *   pattern: '#6681ee',
- *   fill: '#4465e9',
- *   // ... other variants
- * }
- * ```
- *
- * @public
- */
-export interface TLDefaultColorThemeColor {
-	solid: string
-	semi: string
-	pattern: string
-	fill: string // usually same as solid
-	linedFill: string // usually slightly lighter than fill
-	frameHeadingStroke: string
-	frameHeadingFill: string
-	frameStroke: string
-	frameFill: string
-	frameText: string
-	noteFill: string
-	noteText: string
-	highlightSrgb: string
-	highlightP3: string
-}
-
-/**
- * Complete color theme definition containing all colors and their variants
- * for either light or dark mode. Includes base theme properties and all
- * default colors with their respective color variants.
- *
- * @example
- * ```ts
- * import { TLDefaultColorTheme } from '@tldraw/tlschema'
- *
- * const customTheme: TLDefaultColorTheme = {
- *   id: 'light',
- *   text: '#000000',
- *   background: '#ffffff',
- *   solid: '#fcfffe',
- *   black: { solid: '#000000', semi: '#cccccc', ... },
- *   // ... other colors
- * }
- * ```
- *
- * @public
- */
-export type TLDefaultColorTheme = Expand<
-	{
-		id: 'light' | 'dark'
-		text: string
-		background: string
-		solid: string
-	} & Record<(typeof defaultColorNames)[number], TLDefaultColorThemeColor>
->
-
-/**
- * Complete color palette containing both light and dark theme definitions.
- * This object provides the full color system used by tldraw's default themes,
- * including all color variants and theme-specific adjustments.
- *
- * @example
- * ```ts
- * import { DefaultColorThemePalette } from '@tldraw/tlschema'
- *
- * // Get the dark theme colors
- * const darkTheme = DefaultColorThemePalette.darkMode
- * const redColor = darkTheme.red.solid // '#e03131'
- *
- * // Access light theme colors
- * const lightTheme = DefaultColorThemePalette.lightMode
- * const blueColor = lightTheme.blue.fill // '#4465e9'
- * ```
- *
- * @public
- */
-export const DefaultColorThemePalette: {
-	lightMode: TLDefaultColorTheme
-	darkMode: TLDefaultColorTheme
-} = {
-	lightMode: {
-		id: 'light',
-		text: '#000000',
-		background: '#f9fafb',
-		solid: '#fcfffe',
-		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)',
-		},
-	},
-	darkMode: {
-		id: 'dark',
-		text: 'hsl(210, 17%, 98%)',
-		background: 'hsl(240, 5%, 6.5%)',
-		solid: '#010403',
-
-		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', // Darker and desaturated variant of solid
-			frameHeadingFill: '#341818', // Deep, muted dark red
-			frameStroke: '#6f3232', // Matches headingStroke
-			frameFill: '#181212', // Darker, muted background shade
-			frameText: '#f2f2f2', // Consistent bright text color
-			noteFill: '#7a3333', // Medium-dark, muted variant of solid
-			noteText: '#f2f2f2',
-			semi: '#3c2b2b', // Subdued, darker neutral-red tone
-			pattern: '#a56767', // Existing pattern shade retained
-			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', // Darker, muted version of solid
-			frameHeadingFill: '#2f1d13', // Deep, warm, muted background
-			frameStroke: '#773a0e', // Matches headingStroke
-			frameFill: '#1c1512', // Darker, richer muted background
-			frameText: '#f2f2f2', // Bright text for contrast
-			noteFill: '#7c3905', // Muted dark variant for note fill
-			noteText: '#f2f2f2',
-			semi: '#3b2e27', // Muted neutral-orange tone
-			pattern: '#9f552d', // Retained existing shade
-			highlightSrgb: '#d07a00',
-			highlightP3: 'color(display-p3 0.7699 0.4937 0.0085)',
-		},
-		red: {
-			solid: '#e03131',
-			fill: '#e03131',
-			linedFill: '#c31d1d',
-			frameHeadingStroke: '#701e1e', // Darker, muted variation of solid
-			frameHeadingFill: '#301616', // Deep, muted reddish backdrop
-			frameStroke: '#701e1e', // Matches headingStroke
-			frameFill: '#1b1313', // Rich, dark muted background
-			frameText: '#f2f2f2', // Bright text for readability
-			noteFill: '#7e201f', // Muted dark variant for note fill
-			noteText: '#f2f2f2',
-			semi: '#382726', // Dark neutral-red tone
-			pattern: '#8f3734', // Existing pattern color retained
-			highlightSrgb: '#de002c',
-			highlightP3: 'color(display-p3 0.7978 0.0509 0.2035)',
-		},
-		violet: {
-			solid: '#ae3ec9',
-			fill: '#ae3ec9',
-			linedFill: '#8f2fa7',
-			frameHeadingStroke: '#6d1583', // Darker, muted variation of solid
-			frameHeadingFill: '#27152e', // Deep, rich muted violet backdrop
-			frameStroke: '#6d1583', // Matches headingStroke
-			frameFill: '#1b0f21', // Darker muted violet background
-			frameText: '#f2f2f2', // Consistent bright text color
-			noteFill: '#5f1c70', // Muted dark variant for note fill
-			noteText: '#f2f2f2',
-			semi: '#342938', // Dark neutral-violet tone
-			pattern: '#763a8b', // Retained existing pattern color
-			highlightSrgb: '#9e00ee',
-			highlightP3: 'color(display-p3 0.5651 0.0079 0.8986)',
-		},
-		yellow: {
-			solid: '#ffc034',
-			fill: '#ffc034',
-			linedFill: '#ffae00',
-			frameHeadingStroke: '#684e12', // Darker, muted variant of solid
-			frameHeadingFill: '#2a2113', // Rich, muted dark-yellow background
-			frameStroke: '#684e12', // Matches headingStroke
-			frameFill: '#1e1911', // Darker muted shade for background fill
-			frameText: '#f2f2f2', // Bright text color for readability
-			noteFill: '#8a5e1c', // Muted, dark complementary variant
-			noteText: '#f2f2f2',
-			semi: '#3b352b', // Dark muted neutral-yellow tone
-			pattern: '#fecb92', // Existing shade retained
-			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)',
-		},
-	},
-}
-
-/**
- * Returns the appropriate default color theme based on the dark mode preference.
- *
- * @param opts - Configuration options
- *   - isDarkMode - Whether to return the dark theme (true) or light theme (false)
- * @returns The corresponding TLDefaultColorTheme (light or dark)
- *
- * @example
- * ```ts
- * import { getDefaultColorTheme } from '@tldraw/tlschema'
- *
- * // Get light theme
- * const lightTheme = getDefaultColorTheme({ isDarkMode: false })
- *
- * // Get dark theme
- * const darkTheme = getDefaultColorTheme({ isDarkMode: true })
- *
- * // Use with editor
- * const theme = getDefaultColorTheme({ isDarkMode: window.matchMedia('(prefers-color-scheme: dark)').matches })
- * ```
- *
- * @public
- */
-export function getDefaultColorTheme(opts: { isDarkMode: boolean }): TLDefaultColorTheme {
-	return opts.isDarkMode ? DefaultColorThemePalette.darkMode : DefaultColorThemePalette.lightMode
-}
-
-/**
- * Default color style property used by tldraw shapes for their primary color.
- * This style prop allows shapes to use any of the default color names and
- * automatically saves the last used value for new shapes.
- *
- * @example
- * ```ts
- * import { DefaultColorStyle } from '@tldraw/tlschema'
- *
- * // Use in shape props definition
- * interface MyShapeProps {
- *   color: typeof DefaultColorStyle
- *   // other props...
- * }
- *
- * // Set color on a shape
- * const shape = {
- *   // ... other properties
- *   props: {
- *     color: 'red' as const,
- *     // ... other props
- *   }
- * }
- * ```
- *
  * @public
  */
 export const DefaultColorStyle = StyleProp.defineEnum('tldraw:color', {
@@ -618,31 +42,6 @@ export const DefaultColorStyle = StyleProp.defineEnum('tldraw:color', {
 })
 
 /**
- * Default label color style property used for text labels on shapes.
- * This is separate from the main color style to allow different colors
- * for shape fills/strokes versus their text labels.
- *
- * @example
- * ```ts
- * import { DefaultLabelColorStyle } from '@tldraw/tlschema'
- *
- * // Use in shape props definition
- * interface MyShapeProps {
- *   labelColor: typeof DefaultLabelColorStyle
- *   // other props...
- * }
- *
- * // Create a shape with different fill and label colors
- * const shape = {
- *   // ... other properties
- *   props: {
- *     color: 'blue' as const,
- *     labelColor: 'white' as const,
- *     // ... other props
- *   }
- * }
- * ```
- *
  * @public
  */
 export const DefaultLabelColorStyle = StyleProp.defineEnum('tldraw:labelColor', {
@@ -651,94 +50,52 @@ export const DefaultLabelColorStyle = StyleProp.defineEnum('tldraw:labelColor',
 })
 
 /**
- * Type representing a default color style value.
- * This is a union type of all available default color names.
- *
- * @example
- * ```ts
- * import { TLDefaultColorStyle } from '@tldraw/tlschema'
- *
- * // Valid color values
- * const redColor: TLDefaultColorStyle = 'red'
- * const blueColor: TLDefaultColorStyle = 'blue'
- *
- * // Type guard usage
- * function isValidColor(color: string): color is TLDefaultColorStyle {
- *   return ['black', 'red', 'blue'].includes(color as TLDefaultColorStyle)
- * }
- * ```
- *
- * @public
- */
-export type TLDefaultColorStyle = T.TypeOf<typeof DefaultColorStyle>
-
-const defaultColorNamesSet = new Set(defaultColorNames)
-
-/**
- * Type guard to check if a color value is one of the default theme colors.
- * Useful for determining if a color can be looked up in the theme palette.
- *
- * @param color - The color value to check
- * @returns True if the color is a default theme color, false otherwise
- *
- * @example
- * ```ts
- * import { isDefaultThemeColor, TLDefaultColorStyle } from '@tldraw/tlschema'
- *
- * const color: TLDefaultColorStyle = 'red'
+ * Scan theme definitions and sync color registrations to match.
+ * A color entry is any key in `TLThemeColors` whose value is an object
+ * (i.e. a {@link TLDefaultColor}), as opposed to utility strings like
+ * `background` or `text`.
  *
- * if (isDefaultThemeColor(color)) {
- *   // color is guaranteed to be a default theme color
- *   console.log(`${color} is a default theme color`)
- * } else {
- *   // color might be a custom hex value or other format
- *   console.log(`${color} is a custom color`)
- * }
- * ```
+ * Colors present in themes but not yet registered will be added.
+ * Colors currently registered but absent from all themes will be removed.
  *
  * @public
  */
-export function isDefaultThemeColor(
-	color: TLDefaultColorStyle
-): color is (typeof defaultColorNames)[number] {
-	return defaultColorNamesSet.has(color as (typeof defaultColorNames)[number])
-}
+export function registerColorsFromThemes(definitions: TLThemes): void {
+	const colorNames = new Set<TLDefaultColorStyle>()
+	for (const def of Object.values(definitions)) {
+		for (const colorPalette of [def.colors.light, def.colors.dark]) {
+			for (const [key, value] of Object.entries(colorPalette)) {
+				if (typeof value === 'object' && value !== null) {
+					colorNames.add(key as TLDefaultColorStyle)
+				}
+			}
+		}
+	}
+	if (colorNames.size > 0) {
+		DefaultColorStyle.addValues(...colorNames)
+		DefaultLabelColorStyle.addValues(...colorNames)
+	}
 
-/**
- * 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 theme - The color theme to use for resolution
- * @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, getDefaultColorTheme } from '@tldraw/tlschema'
- *
- * const theme = getDefaultColorTheme({ isDarkMode: false })
- *
- * // Get the solid variant of red
- * const redSolid = getColorValue(theme, 'red', 'solid') // '#e03131'
- *
- * // Get the fill variant of blue
- * const blueFill = getColorValue(theme, 'blue', 'fill') // '#4465e9'
- *
- * // Custom color passes through unchanged
- * const customColor = getColorValue(theme, '#ff0000', 'solid') // '#ff0000'
- * ```
- *
- * @public
- */
-export function getColorValue(
-	theme: TLDefaultColorTheme,
-	color: TLDefaultColorStyle,
-	variant: keyof TLDefaultColorThemeColor
-): string {
-	if (!isDefaultThemeColor(color)) {
-		return color
+	const toRemove = DefaultColorStyle.values.filter((v) => !colorNames.has(v as TLDefaultColorStyle))
+	if (toRemove.length > 0) {
+		DefaultColorStyle.removeValues(...toRemove)
+		DefaultLabelColorStyle.removeValues(...toRemove)
 	}
 
-	return theme[color][variant]
+	if (process.env.NODE_ENV !== 'production') {
+		for (const def of Object.values(definitions)) {
+			for (const color of colorNames) {
+				if (!(color in def.colors.light)) {
+					console.warn(
+						`Theme '${def.id}' light palette is missing color '${color}'. Shapes using this color won't render correctly.`
+					)
+				}
+				if (!(color in def.colors.dark)) {
+					console.warn(
+						`Theme '${def.id}' dark palette is missing color '${color}'. Shapes using this color won't render correctly.`
+					)
+				}
+			}
+		}
+	}
 }