microboard-temp 0.6.5 → 0.8.0

package/dist/cjs/browser.js

@@ -637,12 +637,17 @@ __export(exports_browser, {
   tempStorage: () => tempStorage,
   tagByType: () => tagByType,
   stickerColors: () => stickerColors,
+  srgbChannelToLinear: () => srgbChannelToLinear,
   sha256: () => sha256,
+  semanticColor: () => semanticColor,
   scalePatterns: () => scalePatterns,
   scaleElementBy: () => scaleElementBy,
   rgbToRgba: () => rgbToRgba,
+  resolvePairedForeground: () => resolvePairedForeground,
+  resolveColor: () => resolveColor,
   resizeAndConvertToPng: () => resizeAndConvertToPng,
   resetElementScale: () => resetElementScale,
+  relativeLuminance: () => relativeLuminance,
   registerItem: () => registerItem,
   quickAddItem: () => quickAddItem,
   prepareVideo: () => prepareVideo,
@@ -651,8 +656,11 @@ __export(exports_browser, {
   positionRelatively: () => positionRelatively,
   positionAbsolutely: () => positionAbsolutely,
   parsersHTML: () => parsersHTML,
+  parseCssRgb: () => parseCssRgb,
   omitDefaultProperties: () => omitDefaultProperties,
   messageRouter: () => messageRouter,
+  meetsWCAG_AAA: () => meetsWCAG_AAA,
+  meetsWCAG_AA: () => meetsWCAG_AA,
   itemValidators: () => itemValidators,
   itemFactories: () => itemFactories,
   isShallowSimilarTo: () => isShallowSimilarTo,
@@ -679,14 +687,19 @@ __export(exports_browser, {
   getControlPointData: () => getControlPointData,
   getBlobFromDataURL: () => getBlobFromDataURL,
   forceNumberIntoInterval: () => forceNumberIntoInterval,
+  fixedColor: () => fixedColor,
   fileTosha256: () => fileTosha256,
   exportBoardSnapshot: () => exportBoardSnapshot,
   editModeHotkeyRegistry: () => editModeHotkeyRegistry,
   decodeHtml: () => decodeHtml,
   cursors: () => defaultCursors,
+  cssContrastRatio: () => cssContrastRatio,
   createVideoItem: () => createVideoItem,
   createEvents: () => createEvents,
+  contrastRatio: () => contrastRatio,
   conf: () => conf,
+  coerceOptionalColorValue: () => coerceOptionalColorValue,
+  coerceColorValue: () => coerceColorValue,
   checkHotkeys: () => checkHotkeys,
   catmullRomInterpolate: () => catmullRomInterpolate,
   captureFrame: () => captureFrame,
@@ -712,6 +725,7 @@ __export(exports_browser, {
   STEP_STROKE_WIDTH: () => STEP_STROKE_WIDTH,
   SHAPE_LAST_TYPE_KEY: () => SHAPE_LAST_TYPE_KEY,
   SHAPES_CATEGORIES: () => SHAPES_CATEGORIES,
+  SEMANTIC_COLOR_IDS: () => SEMANTIC_COLOR_IDS,
   RichText: () => RichText,
   QuadraticBezier: () => QuadraticBezier,
   Presence: () => Presence,
@@ -763,6 +777,8 @@ __export(exports_browser, {
   Camera: () => Camera,
   CURSORS_IDLE_CLEANUP_DELAY: () => CURSORS_IDLE_CLEANUP_DELAY,
   CURSORS_ANIMATION_DURATION: () => CURSORS_ANIMATION_DURATION,
+  CONTRAST_PALETTE_LIST: () => CONTRAST_PALETTE_LIST,
+  CONTRAST_PALETTE: () => CONTRAST_PALETTE,
   CONTEXT_NODE_HIGHLIGHT_COLOR: () => CONTEXT_NODE_HIGHLIGHT_COLOR,
   CONNECTOR_POINTER_TYPES: () => CONNECTOR_POINTER_TYPES,
   BoardSelection: () => BoardSelection,
@@ -778,6 +794,184 @@ __export(exports_browser, {
 });
 module.exports = __toCommonJS(exports_browser);
 
+// src/Color/ColorValue.ts
+var SEMANTIC_COLOR_IDS = [
+  "contrastNeutral",
+  "contrastGray",
+  "contrastRed",
+  "contrastOrange",
+  "contrastYellow",
+  "contrastGreen",
+  "contrastTeal",
+  "contrastBlue",
+  "contrastPurple",
+  "contrastPink",
+  "contrastBrown"
+];
+var semanticColor = (id) => ({
+  type: "semantic",
+  id
+});
+var fixedColor = (value) => ({
+  type: "fixed",
+  value
+});
+function coerceColorValue(value) {
+  if (typeof value === "string")
+    return fixedColor(value);
+  return value;
+}
+function coerceOptionalColorValue(value) {
+  if (value === undefined)
+    return;
+  return coerceColorValue(value);
+}
+// src/Color/ContrastPalette.ts
+var CONTRAST_PALETTE = {
+  contrastNeutral: {
+    id: "contrastNeutral",
+    label: "Neutral",
+    light: "rgb(245, 246, 248)",
+    dark: "rgb(20, 21, 26)",
+    contrastRatio: 17.2
+  },
+  contrastGray: {
+    id: "contrastGray",
+    label: "Gray",
+    light: "rgb(224, 225, 229)",
+    dark: "rgb(55, 58, 70)",
+    contrastRatio: 8.6
+  },
+  contrastRed: {
+    id: "contrastRed",
+    label: "Red",
+    light: "rgb(255, 215, 210)",
+    dark: "rgb(120, 10, 10)",
+    contrastRatio: 8.5
+  },
+  contrastOrange: {
+    id: "contrastOrange",
+    label: "Orange",
+    light: "rgb(255, 229, 195)",
+    dark: "rgb(110, 44, 0)",
+    contrastRatio: 8.4
+  },
+  contrastYellow: {
+    id: "contrastYellow",
+    label: "Yellow",
+    light: "rgb(255, 249, 185)",
+    dark: "rgb(89, 71, 0)",
+    contrastRatio: 8.3
+  },
+  contrastGreen: {
+    id: "contrastGreen",
+    label: "Green",
+    light: "rgb(193, 243, 179)",
+    dark: "rgb(0, 74, 22)",
+    contrastRatio: 8.4
+  },
+  contrastTeal: {
+    id: "contrastTeal",
+    label: "Teal",
+    light: "rgb(176, 243, 240)",
+    dark: "rgb(0, 68, 64)",
+    contrastRatio: 8.8
+  },
+  contrastBlue: {
+    id: "contrastBlue",
+    label: "Blue",
+    light: "rgb(208, 222, 255)",
+    dark: "rgb(15, 42, 148)",
+    contrastRatio: 8.7
+  },
+  contrastPurple: {
+    id: "contrastPurple",
+    label: "Purple",
+    light: "rgb(232, 210, 255)",
+    dark: "rgb(62, 0, 132)",
+    contrastRatio: 9.8
+  },
+  contrastPink: {
+    id: "contrastPink",
+    label: "Pink",
+    light: "rgb(255, 212, 228)",
+    dark: "rgb(120, 0, 55)",
+    contrastRatio: 8.5
+  },
+  contrastBrown: {
+    id: "contrastBrown",
+    label: "Brown",
+    light: "rgb(242, 224, 200)",
+    dark: "rgb(74, 33, 0)",
+    contrastRatio: 10.7
+  }
+};
+var CONTRAST_PALETTE_LIST = [
+  CONTRAST_PALETTE.contrastNeutral,
+  CONTRAST_PALETTE.contrastGray,
+  CONTRAST_PALETTE.contrastRed,
+  CONTRAST_PALETTE.contrastOrange,
+  CONTRAST_PALETTE.contrastYellow,
+  CONTRAST_PALETTE.contrastGreen,
+  CONTRAST_PALETTE.contrastTeal,
+  CONTRAST_PALETTE.contrastBlue,
+  CONTRAST_PALETTE.contrastPurple,
+  CONTRAST_PALETTE.contrastPink,
+  CONTRAST_PALETTE.contrastBrown
+];
+// src/Color/resolveColor.ts
+function resolveColor(value, theme, role) {
+  if (typeof value === "string")
+    return value;
+  if (value.type === "fixed") {
+    return value.value;
+  }
+  const pair = CONTRAST_PALETTE[value.id];
+  const lightMode = theme === "light";
+  if (role === "background") {
+    return lightMode ? pair.light : pair.dark;
+  } else {
+    return lightMode ? pair.dark : pair.light;
+  }
+}
+function resolvePairedForeground(background, theme) {
+  if (background.type === "semantic") {
+    return resolveColor(background, theme, "foreground");
+  }
+  return theme === "light" ? CONTRAST_PALETTE.contrastNeutral.dark : CONTRAST_PALETTE.contrastNeutral.light;
+}
+// src/Color/colorUtils.ts
+function srgbChannelToLinear(channel) {
+  const c = channel / 255;
+  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+function relativeLuminance(r, g, b) {
+  return 0.2126 * srgbChannelToLinear(r) + 0.7152 * srgbChannelToLinear(g) + 0.0722 * srgbChannelToLinear(b);
+}
+function contrastRatio(lum1, lum2) {
+  const lighter = Math.max(lum1, lum2);
+  const darker = Math.min(lum1, lum2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function meetsWCAG_AA(ratio) {
+  return ratio >= 4.5;
+}
+function meetsWCAG_AAA(ratio) {
+  return ratio >= 7;
+}
+function parseCssRgb(css) {
+  const m = css.match(/rgba?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)/);
+  if (!m)
+    return null;
+  return [parseFloat(m[1]), parseFloat(m[2]), parseFloat(m[3])];
+}
+function cssContrastRatio(css1, css2) {
+  const rgb1 = parseCssRgb(css1);
+  const rgb2 = parseCssRgb(css2);
+  if (!rgb1 || !rgb2)
+    return null;
+  return contrastRatio(relativeLuminance(...rgb1), relativeLuminance(...rgb2));
+}
 // src/BoardCommand.ts
 class BoardCommand {
   board;
@@ -1371,12 +1565,14 @@ class Mbr {
   }
   render(context) {
     const { ctx } = context;
-    if (this.backgroundColor !== "none") {
-      ctx.fillStyle = this.backgroundColor;
+    const resolvedBg = typeof this.backgroundColor === "string" ? this.backgroundColor : resolveColor(this.backgroundColor, "light", "background");
+    const resolvedBorder = typeof this.borderColor === "string" ? this.borderColor : resolveColor(this.borderColor, "light", "foreground");
+    if (resolvedBg !== "none") {
+      ctx.fillStyle = resolvedBg;
       ctx.fillRect(this.left, this.top, this.getWidth(), this.getHeight());
     }
     if (this.strokeWidth) {
-      ctx.strokeStyle = this.borderColor;
+      ctx.strokeStyle = resolvedBorder;
       ctx.lineWidth = this.strokeWidth;
       ctx.setLineDash([]);
       ctx.strokeRect(this.left, this.top, this.getWidth(), this.getHeight());
@@ -6935,6 +7131,7 @@ var conf = {
     plus: "Plus",
     plusAI: "PlusAI"
   },
+  theme: "light",
   EVENTS_PUBLISH_INTERVAL: 100,
   EVENTS_RESEND_INTERVAL: 1000,
   SELECTION_COLOR: "rgb(71, 120, 245)",
@@ -9368,7 +9565,7 @@ function fillHighlight(ctx, textBlock) {
     return;
   }
   const measure = textBlock.measure;
-  ctx.fillStyle = textBlock.style.backgroundColor;
+  ctx.fillStyle = resolveColor(textBlock.style.backgroundColor, conf.theme, "background");
   ctx.fillRect(textBlock.x, textBlock.y - measure.ascent, measure.width, measure.height);
 }
 function underline(ctx, textBlock) {
@@ -9380,14 +9577,13 @@ function underline(ctx, textBlock) {
   const style = textBlock.style;
   const measure = textBlock.measure;
   const width = measure.width - (textBlock.marginLeft || 0);
-  const color = style.color;
-  ctx.strokeStyle = color;
+  ctx.strokeStyle = resolveColor(style.color, conf.theme, "foreground");
   ctx.lineWidth = textBlock.fontSize / 14;
   ctx.beginPath();
   ctx.moveTo(x, y + 2 * textBlock.fontSize / 14);
   ctx.lineTo(x + width, y + 2 * textBlock.fontSize / 14);
   ctx.stroke();
-  ctx.strokeStyle = style.backgroundColor ?? "black";
+  ctx.strokeStyle = style.backgroundColor ? resolveColor(style.backgroundColor, conf.theme, "background") : "black";
   ctx.lineWidth = 2;
 }
 function cross(ctx, textBlock) {
@@ -9400,19 +9596,18 @@ function cross(ctx, textBlock) {
   const measure = textBlock.measure;
   const width = measure.width;
   const height = measure.height;
-  const color = style.color;
-  ctx.strokeStyle = color;
+  ctx.strokeStyle = resolveColor(style.color, conf.theme, "foreground");
   ctx.lineWidth = textBlock.fontSize / 14;
   ctx.beginPath();
   ctx.moveTo(x, y - height / 4);
   ctx.lineTo(x + width, y - height / 4);
   ctx.stroke();
-  ctx.strokeStyle = style.backgroundColor ?? "black";
+  ctx.strokeStyle = style.backgroundColor ? resolveColor(style.backgroundColor, conf.theme, "background") : "black";
   ctx.lineWidth = 2;
 }
 function fillText(ctx, textBlock) {
   const { text, style, x, y } = textBlock;
-  ctx.fillStyle = style.color;
+  ctx.fillStyle = resolveColor(style.color, conf.theme, "foreground");
   ctx.fillText(text, x, y);
   if (textBlock.listMark) {
     ctx.fillText(textBlock.listMark, x - measureText(textBlock.listMark, style).width - 4, y);
@@ -16699,7 +16894,7 @@ function setSelectionFontHighlight(editor, format, selectionContext) {
   }
   if (format === "none") {
     import_slate25.Editor.removeMark(editor, "fontHighlight");
-  } else if (marks.fontHighlight === format) {
+  } else if (typeof format === "string" && marks.fontHighlight === format) {
     import_slate25.Editor.removeMark(editor, "fontHighlight");
   } else {
     import_slate25.Editor.addMark(editor, "fontHighlight", format);
@@ -22454,8 +22649,8 @@ class RichText extends BaseItem {
             node2.underline ? "underline" : "",
             node2["line-through"] ? "line-through" : ""
           ].filter(Boolean).join(" "),
-          color: node2.fontColor || conf.DEFAULT_TEXT_STYLES.fontColor,
-          backgroundColor: node2.fontHighlight || conf.DEFAULT_TEXT_STYLES.fontHighlight,
+          color: node2.fontColor ? resolveColor(node2.fontColor, conf.theme, "foreground") : conf.DEFAULT_TEXT_STYLES.fontColor,
+          backgroundColor: node2.fontHighlight ? resolveColor(node2.fontHighlight, conf.theme, "background") : conf.DEFAULT_TEXT_STYLES.fontHighlight,
           fontSize: node2.fontSize ? `${node2.fontSize}px` : `${conf.DEFAULT_TEXT_STYLES.fontSize}px`,
           fontFamily: node2.fontFamily || conf.DEFAULT_TEXT_STYLES.fontFamily
         });
@@ -37203,7 +37398,7 @@ class Connector2 extends BaseItem {
     this.endPointerStyle = endPointerStyle;
     this.transformation = new Transformation(this.id, this.board.events);
     this.linkTo = new LinkTo(this.id, this.board.events);
-    this.lineColor = lineColor ?? CONNECTOR_COLOR;
+    this.lineColor = lineColor ?? fixedColor(CONNECTOR_COLOR);
     this.lineWidth = lineWidth ?? CONNECTOR_LINE_WIDTH;
     this.borderStyle = strokeStyle ?? CONNECTOR_BORDER_STYLE;
     this.text = new RichText(board, this.getMbr(), this.id, new Transformation, this.linkTo, conf.i18n.t("connector.textPlaceholder", {
@@ -37620,6 +37815,12 @@ class Connector2 extends BaseItem {
     mbr.strokeWidth = 3;
     mbr.borderStyle = "solid";
     this.clipText(context);
+    const resolvedLineColor = resolveColor(this.lineColor, conf.theme, "foreground");
+    this.lines.setBorderColor(resolvedLineColor);
+    this.startPointer.path.setBorderColor(resolvedLineColor);
+    this.startPointer.path.setBackgroundColor(resolvedLineColor);
+    this.endPointer.path.setBorderColor(resolvedLineColor);
+    this.endPointer.path.setBackgroundColor(resolvedLineColor);
     if (!this.text.isRenderEnabled && this.board.selection.getContext() !== "EditTextUnderPointer") {
       this.lines.render(context);
     }
@@ -37710,7 +37911,7 @@ class Connector2 extends BaseItem {
     div.style.transformOrigin = "left top";
     div.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.position = "absolute";
-    div.setAttribute("data-line-color", this.lineColor);
+    div.setAttribute("data-line-color", resolveColor(this.lineColor, conf.theme, "foreground"));
     div.setAttribute("data-line-width", this.lineWidth.toString());
     div.setAttribute("data-line-style", this.lineStyle);
     div.setAttribute("data-border-style", this.borderStyle);
@@ -37806,7 +38007,9 @@ class Connector2 extends BaseItem {
     this.startPointerStyle = data.startPointerStyle ?? this.startPointerStyle;
     this.endPointerStyle = data.endPointerStyle ?? this.endPointerStyle;
     this.lineStyle = data.lineStyle ?? this.lineStyle;
-    this.lineColor = data.lineColor ?? this.lineColor;
+    if (data.lineColor != null) {
+      this.lineColor = coerceColorValue(data.lineColor);
+    }
     this.lineWidth = data.lineWidth ?? this.lineWidth;
     this.borderStyle = data.borderStyle ?? this.borderStyle;
     if (data.transformation) {
@@ -37899,16 +38102,11 @@ class Connector2 extends BaseItem {
     const endPoint = this.endPoint;
     this.lines = getLine(this.lineStyle, startPoint, endPoint, this.middlePoint).addConnectedItemType(this.itemType);
     this.startPointer = getStartPointer(startPoint, this.startPointerStyle, this.lineStyle, this.lines, this.lineWidth * 0.1 + 0.2);
-    this.startPointer.path.setBorderColor(this.lineColor);
     this.startPointer.path.setBorderWidth(this.lineWidth);
-    this.startPointer.path.setBackgroundColor(this.lineColor);
     this.endPointer = getEndPointer(endPoint, this.endPointerStyle, this.lineStyle, this.lines, this.lineWidth * 0.1 + 0.2);
-    this.endPointer.path.setBorderColor(this.lineColor);
     this.endPointer.path.setBorderWidth(this.lineWidth);
-    this.endPointer.path.setBackgroundColor(this.lineColor);
     this.offsetLines();
     this.lines.setBorderWidth(this.lineWidth);
-    this.lines.setBorderColor(this.lineColor);
     this.lines.setBorderStyle(this.borderStyle);
     this.updateTitle();
   }
@@ -38014,7 +38212,7 @@ class ConnectorData2 {
   startPointerStyle = "None";
   endPointerStyle = "ArrowThin";
   lineStyle = "straight";
-  lineColor = "";
+  lineColor = fixedColor(CONNECTOR_COLOR);
   linkTo;
   lineWidth = 1;
   borderStyle = "solid";
@@ -38707,7 +38905,7 @@ class DefaultShapeData {
   text;
   linkTo;
   itemType = "Shape";
-  constructor(shapeType = "Rectangle", backgroundColor = "none", backgroundOpacity = 1, borderColor = conf.SHAPE_DEFAULT_STROKE_COLOR, borderOpacity = 1, borderStyle = "solid", borderWidth = 1, transformation = new DefaultTransformationData, text5 = new DefaultRichTextData, linkTo) {
+  constructor(shapeType = "Rectangle", backgroundColor = fixedColor("none"), backgroundOpacity = 1, borderColor = fixedColor(conf.SHAPE_DEFAULT_STROKE_COLOR), borderOpacity = 1, borderStyle = "solid", borderWidth = 1, transformation = new DefaultTransformationData, text5 = new DefaultRichTextData, linkTo) {
     this.shapeType = shapeType;
     this.backgroundColor = backgroundColor;
     this.backgroundOpacity = backgroundOpacity;
@@ -39575,9 +39773,13 @@ class Shape extends BaseItem {
     if (data.linkTo) {
       this.linkTo.deserialize(data.linkTo);
     }
-    this.backgroundColor = data.backgroundColor ?? this.backgroundColor;
+    if (data.backgroundColor != null) {
+      this.backgroundColor = coerceColorValue(data.backgroundColor);
+    }
     this.backgroundOpacity = data.backgroundOpacity ?? this.backgroundOpacity;
-    this.borderColor = data.borderColor ?? this.borderColor;
+    if (data.borderColor != null) {
+      this.borderColor = coerceColorValue(data.borderColor);
+    }
     this.borderOpacity = data.borderOpacity ?? this.borderOpacity;
     this.borderStyle = data.borderStyle ?? this.borderStyle;
     this.borderWidth = data.borderWidth ?? this.borderWidth;
@@ -39684,7 +39886,6 @@ class Shape extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(backgroundColor);
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -39720,7 +39921,6 @@ class Shape extends BaseItem {
   }
   applyBorderColor(borderColor) {
     this.borderColor = borderColor;
-    this.path.setBorderColor(borderColor);
   }
   setBorderColor(borderColor) {
     this.emit({
@@ -39828,6 +40028,8 @@ class Shape extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
+    this.path.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
+    this.path.setBorderColor(resolveColor(this.borderColor, conf.theme, "foreground"));
     this.path.render(context);
     this.text.render(context);
     if (this.getLinkTo()) {
@@ -39928,9 +40130,7 @@ class Shape extends BaseItem {
     this.text.setContainer(this.textContainer.copy());
     this.textContainer.transform(this.transformation.toMatrix());
     this.path.transform(this.transformation.toMatrix());
-    this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBackgroundOpacity(this.backgroundOpacity);
-    this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
     this.path.setBorderStyle(this.borderStyle);
     this.path.setBorderOpacity(this.borderOpacity);
@@ -39979,7 +40179,7 @@ class StickerData {
   linkTo;
   text;
   itemType = "Sticker";
-  constructor(backgroundColor = stickerColors["Sky Blue"], transformation = new DefaultTransformationData, linkTo, text5 = new DefaultRichTextData([], "center", undefined)) {
+  constructor(backgroundColor = fixedColor(stickerColors["Sky Blue"]), transformation = new DefaultTransformationData, linkTo, text5 = new DefaultRichTextData([], "center", undefined)) {
     this.backgroundColor = backgroundColor;
     this.transformation = transformation;
     this.linkTo = linkTo;
@@ -40091,7 +40291,9 @@ class Sticker extends BaseItem {
     };
   }
   deserialize(data) {
-    this.backgroundColor = data.backgroundColor ?? this.backgroundColor;
+    if (data.backgroundColor != null) {
+      this.backgroundColor = coerceColorValue(data.backgroundColor);
+    }
     if (data.transformation) {
       this.transformation.deserialize(data.transformation);
     }
@@ -40115,7 +40317,6 @@ class Sticker extends BaseItem {
     this.stickerPath.transform(this.transformation.toMatrix());
     this.text.setContainer(this.textContainer.copy());
     this.textContainer.transform(this.transformation.toMatrix());
-    this.stickerPath.setBackgroundColor(this.backgroundColor);
     this.saveStickerData();
   }
   setId(id) {
@@ -40159,7 +40360,6 @@ class Sticker extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.stickerPath.setBackgroundColor(backgroundColor);
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -40206,6 +40406,7 @@ class Sticker extends BaseItem {
       return;
     }
     this.renderShadow(context);
+    this.stickerPath.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.stickerPath.render(context);
     this.text.render(context);
     if (this.getLinkTo()) {
@@ -40222,7 +40423,7 @@ class Sticker extends BaseItem {
     const unscaledWidth = itemMbr.getWidth() / scaleX;
     const unscaledHeight = height2 / scaleY;
     div.id = this.getId();
-    div.style.backgroundColor = this.backgroundColor;
+    div.style.backgroundColor = resolveColor(this.backgroundColor, conf.theme, "background");
     div.style.width = `${unscaledWidth}px`;
     div.style.height = `${unscaledHeight}px`;
     div.style.transformOrigin = "top left";
@@ -40496,7 +40697,7 @@ class DefaultFrameData {
   canChangeRatio;
   linkTo;
   itemType = "Frame";
-  constructor(shapeType = "Custom", backgroundColor = FRAME_FILL_COLOR, backgroundOpacity = 1, borderColor = FRAME_BORDER_COLOR, borderOpacity = 0.08, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
+  constructor(shapeType = "Custom", backgroundColor = fixedColor(FRAME_FILL_COLOR), backgroundOpacity = 1, borderColor = fixedColor(FRAME_BORDER_COLOR), borderOpacity = 0.08, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
     this.shapeType = shapeType;
     this.backgroundColor = backgroundColor;
     this.backgroundOpacity = backgroundOpacity;
@@ -40704,9 +40905,13 @@ class Frame2 extends BaseItem {
       this.initPath();
     }
     this.linkTo.deserialize(data.linkTo);
-    this.backgroundColor = data.backgroundColor ?? this.backgroundColor;
+    if (data.backgroundColor != null) {
+      this.backgroundColor = coerceColorValue(data.backgroundColor);
+    }
     this.backgroundOpacity = data.backgroundOpacity ?? this.backgroundOpacity;
-    this.borderColor = data.borderColor ?? this.borderColor;
+    if (data.borderColor != null) {
+      this.borderColor = coerceColorValue(data.borderColor);
+    }
     this.borderOpacity = data.borderOpacity ?? this.borderOpacity;
     this.borderStyle = data.borderStyle ?? this.borderStyle;
     this.borderWidth = data.borderWidth ?? this.borderWidth;
@@ -40744,9 +40949,7 @@ class Frame2 extends BaseItem {
       this.path.transform(this.transformation.toMatrix());
       this.textContainer.transform(this.transformation.toMatrix());
     }
-    this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBackgroundOpacity(this.backgroundOpacity);
-    this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
     this.path.setBorderStyle(this.borderStyle);
     this.path.setBorderOpacity(this.borderOpacity);
@@ -40897,7 +41100,6 @@ class Frame2 extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(backgroundColor);
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -40945,6 +41147,8 @@ class Frame2 extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
+    this.path.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
+    this.path.setBorderColor(resolveColor(this.borderColor, conf.theme, "foreground"));
     this.path.render(context);
     this.renderNewShape(context);
     if (this.getLinkTo()) {
@@ -40969,9 +41173,9 @@ class Frame2 extends BaseItem {
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("frame-item");
     div.id = this.getId();
-    div.style.backgroundColor = this.backgroundColor;
+    div.style.backgroundColor = resolveColor(this.backgroundColor, conf.theme, "background");
     div.style.opacity = this.backgroundOpacity.toString();
-    div.style.borderColor = this.borderColor;
+    div.style.borderColor = resolveColor(this.borderColor, conf.theme, "foreground");
     div.style.borderWidth = `${this.borderWidth}px`;
     div.style.borderStyle = this.borderStyle;
     const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
@@ -42607,6 +42811,7 @@ class Drawing extends BaseItem {
   lines = [];
   linkTo;
   strokeWidth = 1;
+  borderColor = fixedColor(conf.PEN_DEFAULT_COLOR);
   borderStyle = "solid";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
   borderOpacity = 1;
@@ -42652,7 +42857,7 @@ class Drawing extends BaseItem {
     this.linkTo.deserialize(data.linkTo);
     this.optimizePoints();
     this.transformation.deserialize(data.transformation);
-    this.borderColor = data.strokeStyle;
+    this.borderColor = coerceColorValue(data.strokeStyle);
     this.strokeWidth = data.strokeWidth;
     this.updateGeometry();
     return this;
@@ -42760,7 +42965,7 @@ class Drawing extends BaseItem {
     }
     const ctx = context.ctx;
     ctx.save();
-    ctx.strokeStyle = this.borderColor;
+    ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, "foreground");
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -42787,7 +42992,7 @@ class Drawing extends BaseItem {
     svg3.setAttribute("style", "position: absolute; overflow: visible;");
     const pathElement = documentFactory.createElementNS("http://www.w3.org/2000/svg", "path");
     pathElement.setAttribute("d", this.getPathData());
-    pathElement.setAttribute("stroke", this.borderColor);
+    pathElement.setAttribute("stroke", resolveColor(this.borderColor, conf.theme, "foreground"));
     pathElement.setAttribute("stroke-width", `${this.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg3.appendChild(pathElement);
@@ -42880,7 +43085,7 @@ class Drawing extends BaseItem {
       case "Drawing":
         switch (op.method) {
           case "setStrokeColor":
-            this.borderColor = op.color;
+            this.borderColor = coerceColorValue(op.color);
             break;
           case "setStrokeWidth":
             this.strokeWidth = op.width;