@tldraw/editor
Version:
tldraw infinite canvas SDK (editor).
601 lines (600 loc) • 17.9 kB
JavaScript
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var defaultThemes_exports = {};
__export(defaultThemes_exports, {
DEFAULT_THEME: () => DEFAULT_THEME,
getColorValue: () => getColorValue
});
module.exports = __toCommonJS(defaultThemes_exports);
var import_tlschema = require("@tldraw/tlschema");
const DEFAULT_THEME = {
id: "default",
fontSize: 16,
lineHeight: 1.35,
strokeWidth: 2,
fonts: {
draw: {
fontFamily: import_tlschema.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: import_tlschema.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: import_tlschema.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: import_tlschema.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)",
snap: "hsl(0, 76%, 60%)",
selectionStroke: "hsl(214, 84%, 56%)",
selectionFill: "hsl(210, 100%, 56%, 24%)",
brushFill: "hsl(0, 0%, 56%, 10.2%)",
brushStroke: "hsl(0, 0%, 56%, 25.1%)",
selectedContrast: "#ffffff",
laser: "hsl(0, 100%, 50%)",
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",
snap: "hsl(0, 76%, 60%)",
selectionStroke: "hsl(214, 84%, 56%)",
selectionFill: "hsl(209, 100%, 57%, 20%)",
brushFill: "hsl(0, 0%, 56%, 10.2%)",
brushStroke: "hsl(0, 0%, 56%, 25.1%)",
selectedContrast: "#ffffff",
laser: "hsl(0, 100%, 50%)",
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)"
}
}
}
};
function getColorValue(colors, color, variant) {
const colorEntry = colors[color];
if (!colorEntry || typeof colorEntry === "string") {
return color;
}
return colorEntry[variant];
}
//# sourceMappingURL=defaultThemes.js.map