Add white (#3321)

This PR adds white. It's available with Alt+T.
![Kapture 2024-04-01 at 18 32
22](https://github.com/tldraw/tldraw/assets/23072548/932c9621-ee09-403f-aacc-0226e7b03967)



### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `feature` — New feature

### Release Notes

- Adds secret white color.

assets/translations/main.json

@@ -111,6 +111,7 @@
 	"action.zoom-to-selection": "Zoom to selection",
 	"assets.files.upload-failed": "Upload failed",
 	"assets.url.failed": "Couldn't load URL preview",
+	"color-style.white": "White",
 	"color-style.black": "Black",
 	"color-style.blue": "Blue",
 	"color-style.green": "Green",

packages/tldraw/src/lib/ui/context/actions.tsx

@@ -1,6 +1,7 @@
 import {
 	ANIMATION_MEDIUM_MS,
 	Box,
+	DefaultColorStyle,
 	Editor,
 	HALF_PI,
 	PageRecordType,
@@ -1281,6 +1282,23 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					trackEvent('new-page', { source })
 				},
 			},
+			{
+				id: 'select-white-color',
+				label: 'color-style.white',
+				kbd: '?t',
+				onSelect(source) {
+					const style = DefaultColorStyle
+					editor.batch(() => {
+						editor.mark('change-color')
+						if (editor.isIn('select')) {
+							editor.setStyleForSelectedShapes(style, 'white', { squashing: false })
+						}
+						editor.setStyleForNextShapes(style, 'white', { squashing: false })
+						editor.updateInstanceState({ isChangingStyle: true }, { ephemeral: true })
+					})
+					trackEvent('set-style', { source, id: style.id, value: 'white' })
+				},
+			},
 		]
 
 		const actions = makeActions(actionItems)

packages/tldraw/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts

@@ -115,6 +115,7 @@ export type TLUiTranslationKey =
 	| 'action.zoom-to-selection'
 	| 'assets.files.upload-failed'
 	| 'assets.url.failed'
+	| 'color-style.white'
 	| 'color-style.black'
 	| 'color-style.blue'
 	| 'color-style.green'

packages/tldraw/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -115,6 +115,7 @@ export const DEFAULT_TRANSLATION = {
 	'action.zoom-to-selection': 'Zoom to selection',
 	'assets.files.upload-failed': 'Upload failed',
 	'assets.url.failed': "Couldn't load URL preview",
+	'color-style.white': 'White',
 	'color-style.black': 'Black',
 	'color-style.blue': 'Blue',
 	'color-style.green': 'Green',

packages/tlschema/api-report.md

@@ -30,8 +30,8 @@ export const arrowShapeMigrations: Migrations;
 
 // @public (undocumented)
 export const arrowShapeProps: {
-    labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
+    labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
-    color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
+    color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
     fill: EnumStyleProp<"none" | "pattern" | "semi" | "solid">;
     dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
     size: EnumStyleProp<"l" | "m" | "s" | "xl">;
@@ -153,7 +153,7 @@ export function createTLSchema({ shapes, }?: {
 }): TLSchema;
 
 // @public (undocumented)
-export const DefaultColorStyle: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
+export const DefaultColorStyle: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
 
 // @public (undocumented)
 export const DefaultColorThemePalette: {
@@ -195,7 +195,7 @@ export const drawShapeMigrations: Migrations;
 
 // @public (undocumented)
 export const drawShapeProps: {
-    color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
+    color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
     fill: EnumStyleProp<"none" | "pattern" | "semi" | "solid">;
     dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
     size: EnumStyleProp<"l" | "m" | "s" | "xl">;
@@ -482,8 +482,8 @@ export const geoShapeMigrations: Migrations;
 // @public (undocumented)
 export const geoShapeProps: {
     geo: EnumStyleProp<"arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box">;
-    labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
+    labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
-    color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
+    color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
     fill: EnumStyleProp<"none" | "pattern" | "semi" | "solid">;
     dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
     size: EnumStyleProp<"l" | "m" | "s" | "xl">;
@@ -519,7 +519,7 @@ export const highlightShapeMigrations: Migrations;
 
 // @public (undocumented)
 export const highlightShapeProps: {
-    color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
+    color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
     size: EnumStyleProp<"l" | "m" | "s" | "xl">;
     segments: T.ArrayOfValidator<{
         type: "free" | "straight";
@@ -679,7 +679,7 @@ export const lineShapeMigrations: Migrations;
 
 // @public (undocumented)
 export const lineShapeProps: {
-    color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
+    color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
     dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
     size: EnumStyleProp<"l" | "m" | "s" | "xl">;
     spline: EnumStyleProp<"cubic" | "line">;
@@ -699,7 +699,7 @@ export const noteShapeMigrations: Migrations;
 
 // @public (undocumented)
 export const noteShapeProps: {
-    color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
+    color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
     size: EnumStyleProp<"l" | "m" | "s" | "xl">;
     font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
     align: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">;
@@ -777,7 +777,7 @@ export const textShapeMigrations: Migrations;
 
 // @public (undocumented)
 export const textShapeProps: {
-    color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
+    color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
     size: EnumStyleProp<"l" | "m" | "s" | "xl">;
     font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
     align: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">;

packages/tlschema/api/api.json

@@ -256,7 +256,7 @@
             },
             {
               "kind": "Content",
-              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"yellow\">;\n    color: import(\"../styles/StyleProp\")."
+              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"white\" | \"yellow\">;\n    color: import(\"../styles/StyleProp\")."
             },
             {
               "kind": "Reference",
@@ -265,7 +265,7 @@
             },
             {
               "kind": "Content",
-              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"yellow\">;\n    fill: import(\"../styles/StyleProp\")."
+              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"white\" | \"yellow\">;\n    fill: import(\"../styles/StyleProp\")."
             },
             {
               "kind": "Reference",
@@ -1377,7 +1377,7 @@
             },
             {
               "kind": "Content",
-              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"yellow\">"
+              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"white\" | \"yellow\">"
             }
           ],
           "fileUrlPath": "packages/tlschema/src/styles/TLColorStyle.ts",
@@ -1706,7 +1706,7 @@
             },
             {
               "kind": "Content",
-              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"yellow\">;\n    fill: import(\"..\")."
+              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"white\" | \"yellow\">;\n    fill: import(\"..\")."
             },
             {
               "kind": "Reference",
@@ -2111,7 +2111,7 @@
             },
             {
               "kind": "Content",
-              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"yellow\">;\n    color: import(\"../styles/StyleProp\")."
+              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"white\" | \"yellow\">;\n    color: import(\"../styles/StyleProp\")."
             },
             {
               "kind": "Reference",
@@ -2120,7 +2120,7 @@
             },
             {
               "kind": "Content",
-              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"yellow\">;\n    fill: import(\"../styles/StyleProp\")."
+              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"white\" | \"yellow\">;\n    fill: import(\"../styles/StyleProp\")."
             },
             {
               "kind": "Reference",
@@ -2330,7 +2330,7 @@
             },
             {
               "kind": "Content",
-              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"yellow\">;\n    size: import(\"..\")."
+              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"white\" | \"yellow\">;\n    size: import(\"..\")."
             },
             {
               "kind": "Reference",
@@ -2782,7 +2782,7 @@
             },
             {
               "kind": "Content",
-              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"yellow\">;\n    dash: import(\"../styles/StyleProp\")."
+              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"white\" | \"yellow\">;\n    dash: import(\"../styles/StyleProp\")."
             },
             {
               "kind": "Reference",
@@ -2891,7 +2891,7 @@
             },
             {
               "kind": "Content",
-              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"yellow\">;\n    size: import(\"..\")."
+              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"white\" | \"yellow\">;\n    size: import(\"..\")."
             },
             {
               "kind": "Reference",
@@ -3773,7 +3773,7 @@
             },
             {
               "kind": "Content",
-              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"yellow\">;\n    size: import(\"..\")."
+              "text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"white\" | \"yellow\">;\n    size: import(\"..\")."
             },
             {
               "kind": "Reference",

packages/tlschema/src/styles/TLColorStyle.ts

@@ -15,6 +15,7 @@ const colors = [
 	'light-green',
 	'light-red',
 	'red',
+	'white',
 ] as const
 
 /** @public */
@@ -48,7 +49,6 @@ export const DefaultColorThemePalette: {
 		text: '#000000',
 		background: 'rgb(249, 250, 251)',
 		solid: '#fcfffe',
-
 		black: {
 			solid: '#1d1d1d',
 			semi: '#e8e8e8',
@@ -157,6 +157,15 @@ export const DefaultColorThemePalette: {
 				p3: 'color(display-p3 0.972 0.8705 0.05)',
 			},
 		},
+		white: {
+			solid: '#FFFFFF',
+			semi: '#f5f5f5',
+			pattern: '#f9f9f9',
+			highlight: {
+				srgb: '#ffffff',
+				p3: 'color(display-p3 1 1 1)',
+			},
+		},
 	},
 	darkMode: {
 		id: 'dark',
@@ -272,6 +281,15 @@ export const DefaultColorThemePalette: {
 				p3: 'color(display-p3 0.8078 0.7225 0.0312)',
 			},
 		},
+		white: {
+			solid: '#FFFFFF',
+			semi: '#f5f5f5',
+			pattern: '#f9f9f9',
+			highlight: {
+				srgb: '#ffffff',
+				p3: 'color(display-p3 1 1 1)',
+			},
+		},
 	},
 }