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.
This commit is contained in:
parent
3df866a86f
commit
8db84b33b2
9 changed files with 94 additions and 55 deletions
|
@ -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",
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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)
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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">;
|
||||
color: 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" | "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">;
|
||||
color: 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" | "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">;
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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)',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue