microboard-temp 0.7.0 → 0.8.0

package/dist/cjs/browser.js

@@ -9565,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) {
@@ -9577,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) {
@@ -9597,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);
@@ -16896,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);
@@ -22651,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
         });
@@ -37817,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);
     }
@@ -38098,17 +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);
-    const resolvedLineColor = resolveColor(this.lineColor, conf.theme, "foreground");
-    this.startPointer.path.setBorderColor(resolvedLineColor);
     this.startPointer.path.setBorderWidth(this.lineWidth);
-    this.startPointer.path.setBackgroundColor(resolvedLineColor);
     this.endPointer = getEndPointer(endPoint, this.endPointerStyle, this.lineStyle, this.lines, this.lineWidth * 0.1 + 0.2);
-    this.endPointer.path.setBorderColor(resolvedLineColor);
     this.endPointer.path.setBorderWidth(this.lineWidth);
-    this.endPointer.path.setBackgroundColor(resolvedLineColor);
     this.offsetLines();
     this.lines.setBorderWidth(this.lineWidth);
-    this.lines.setBorderColor(resolvedLineColor);
     this.lines.setBorderStyle(this.borderStyle);
     this.updateTitle();
   }
@@ -39888,7 +39886,6 @@ class Shape extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -39924,7 +39921,6 @@ class Shape extends BaseItem {
   }
   applyBorderColor(borderColor) {
     this.borderColor = borderColor;
-    this.path.setBorderColor(resolveColor(borderColor, conf.theme, "foreground"));
   }
   setBorderColor(borderColor) {
     this.emit({
@@ -40032,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()) {
@@ -40132,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);
@@ -40321,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(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.saveStickerData();
   }
   setId(id) {
@@ -40365,7 +40360,6 @@ class Sticker extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.stickerPath.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -40412,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()) {
@@ -40954,9 +40949,7 @@ class Frame2 extends BaseItem {
       this.path.transform(this.transformation.toMatrix());
       this.textContainer.transform(this.transformation.toMatrix());
     }
-    this.path.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.path.setBackgroundOpacity(this.backgroundOpacity);
-    this.path.setBorderColor(resolveColor(this.borderColor, conf.theme, "foreground"));
     this.path.setBorderWidth(this.borderWidth);
     this.path.setBorderStyle(this.borderStyle);
     this.path.setBorderOpacity(this.borderOpacity);
@@ -41107,7 +41100,6 @@ class Frame2 extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -41155,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()) {

package/dist/cjs/index.js

@@ -9565,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) {
@@ -9577,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) {
@@ -9597,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);
@@ -16896,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);
@@ -22651,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
         });
@@ -37817,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);
     }
@@ -38098,17 +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);
-    const resolvedLineColor = resolveColor(this.lineColor, conf.theme, "foreground");
-    this.startPointer.path.setBorderColor(resolvedLineColor);
     this.startPointer.path.setBorderWidth(this.lineWidth);
-    this.startPointer.path.setBackgroundColor(resolvedLineColor);
     this.endPointer = getEndPointer(endPoint, this.endPointerStyle, this.lineStyle, this.lines, this.lineWidth * 0.1 + 0.2);
-    this.endPointer.path.setBorderColor(resolvedLineColor);
     this.endPointer.path.setBorderWidth(this.lineWidth);
-    this.endPointer.path.setBackgroundColor(resolvedLineColor);
     this.offsetLines();
     this.lines.setBorderWidth(this.lineWidth);
-    this.lines.setBorderColor(resolvedLineColor);
     this.lines.setBorderStyle(this.borderStyle);
     this.updateTitle();
   }
@@ -39888,7 +39886,6 @@ class Shape extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -39924,7 +39921,6 @@ class Shape extends BaseItem {
   }
   applyBorderColor(borderColor) {
     this.borderColor = borderColor;
-    this.path.setBorderColor(resolveColor(borderColor, conf.theme, "foreground"));
   }
   setBorderColor(borderColor) {
     this.emit({
@@ -40032,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()) {
@@ -40132,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);
@@ -40321,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(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.saveStickerData();
   }
   setId(id) {
@@ -40365,7 +40360,6 @@ class Sticker extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.stickerPath.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -40412,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()) {
@@ -40954,9 +40949,7 @@ class Frame2 extends BaseItem {
       this.path.transform(this.transformation.toMatrix());
       this.textContainer.transform(this.transformation.toMatrix());
     }
-    this.path.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.path.setBackgroundOpacity(this.backgroundOpacity);
-    this.path.setBorderColor(resolveColor(this.borderColor, conf.theme, "foreground"));
     this.path.setBorderWidth(this.borderWidth);
     this.path.setBorderStyle(this.borderStyle);
     this.path.setBorderOpacity(this.borderOpacity);
@@ -41107,7 +41100,6 @@ class Frame2 extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -41155,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()) {

package/dist/cjs/node.js

@@ -10602,7 +10602,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) {
@@ -10614,14 +10614,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) {
@@ -10634,19 +10633,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);
@@ -19436,7 +19434,7 @@ function setSelectionFontHighlight(editor, format, selectionContext) {
   }
   if (format === "none") {
     import_slate24.Editor.removeMark(editor, "fontHighlight");
-  } else if (marks.fontHighlight === format) {
+  } else if (typeof format === "string" && marks.fontHighlight === format) {
     import_slate24.Editor.removeMark(editor, "fontHighlight");
   } else {
     import_slate24.Editor.addMark(editor, "fontHighlight", format);
@@ -25123,8 +25121,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
         });
@@ -40290,6 +40288,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);
     }
@@ -40571,17 +40575,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);
-    const resolvedLineColor = resolveColor(this.lineColor, conf.theme, "foreground");
-    this.startPointer.path.setBorderColor(resolvedLineColor);
     this.startPointer.path.setBorderWidth(this.lineWidth);
-    this.startPointer.path.setBackgroundColor(resolvedLineColor);
     this.endPointer = getEndPointer(endPoint, this.endPointerStyle, this.lineStyle, this.lines, this.lineWidth * 0.1 + 0.2);
-    this.endPointer.path.setBorderColor(resolvedLineColor);
     this.endPointer.path.setBorderWidth(this.lineWidth);
-    this.endPointer.path.setBackgroundColor(resolvedLineColor);
     this.offsetLines();
     this.lines.setBorderWidth(this.lineWidth);
-    this.lines.setBorderColor(resolvedLineColor);
     this.lines.setBorderStyle(this.borderStyle);
     this.updateTitle();
   }
@@ -42361,7 +42359,6 @@ class Shape extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -42397,7 +42394,6 @@ class Shape extends BaseItem {
   }
   applyBorderColor(borderColor) {
     this.borderColor = borderColor;
-    this.path.setBorderColor(resolveColor(borderColor, conf.theme, "foreground"));
   }
   setBorderColor(borderColor) {
     this.emit({
@@ -42505,6 +42501,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()) {
@@ -42605,9 +42603,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);
@@ -42794,7 +42790,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(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.saveStickerData();
   }
   setId(id) {
@@ -42838,7 +42833,6 @@ class Sticker extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.stickerPath.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -42885,6 +42879,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()) {
@@ -43427,9 +43422,7 @@ class Frame2 extends BaseItem {
       this.path.transform(this.transformation.toMatrix());
       this.textContainer.transform(this.transformation.toMatrix());
     }
-    this.path.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.path.setBackgroundOpacity(this.backgroundOpacity);
-    this.path.setBorderColor(resolveColor(this.borderColor, conf.theme, "foreground"));
     this.path.setBorderWidth(this.borderWidth);
     this.path.setBorderStyle(this.borderStyle);
     this.path.setBorderOpacity(this.borderOpacity);
@@ -43580,7 +43573,6 @@ class Frame2 extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -43628,6 +43620,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()) {

package/dist/esm/browser.js

@@ -9391,7 +9391,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) {
@@ -9403,14 +9403,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) {
@@ -9423,19 +9422,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);
@@ -16726,7 +16724,7 @@ function setSelectionFontHighlight(editor, format, selectionContext) {
   }
   if (format === "none") {
     Editor22.removeMark(editor, "fontHighlight");
-  } else if (marks.fontHighlight === format) {
+  } else if (typeof format === "string" && marks.fontHighlight === format) {
     Editor22.removeMark(editor, "fontHighlight");
   } else {
     Editor22.addMark(editor, "fontHighlight", format);
@@ -22481,8 +22479,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
         });
@@ -37647,6 +37645,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);
     }
@@ -37928,17 +37932,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);
-    const resolvedLineColor = resolveColor(this.lineColor, conf.theme, "foreground");
-    this.startPointer.path.setBorderColor(resolvedLineColor);
     this.startPointer.path.setBorderWidth(this.lineWidth);
-    this.startPointer.path.setBackgroundColor(resolvedLineColor);
     this.endPointer = getEndPointer(endPoint, this.endPointerStyle, this.lineStyle, this.lines, this.lineWidth * 0.1 + 0.2);
-    this.endPointer.path.setBorderColor(resolvedLineColor);
     this.endPointer.path.setBorderWidth(this.lineWidth);
-    this.endPointer.path.setBackgroundColor(resolvedLineColor);
     this.offsetLines();
     this.lines.setBorderWidth(this.lineWidth);
-    this.lines.setBorderColor(resolvedLineColor);
     this.lines.setBorderStyle(this.borderStyle);
     this.updateTitle();
   }
@@ -39718,7 +39716,6 @@ class Shape extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -39754,7 +39751,6 @@ class Shape extends BaseItem {
   }
   applyBorderColor(borderColor) {
     this.borderColor = borderColor;
-    this.path.setBorderColor(resolveColor(borderColor, conf.theme, "foreground"));
   }
   setBorderColor(borderColor) {
     this.emit({
@@ -39862,6 +39858,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()) {
@@ -39962,9 +39960,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);
@@ -40151,7 +40147,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(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.saveStickerData();
   }
   setId(id) {
@@ -40195,7 +40190,6 @@ class Sticker extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.stickerPath.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -40242,6 +40236,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()) {
@@ -40784,9 +40779,7 @@ class Frame2 extends BaseItem {
       this.path.transform(this.transformation.toMatrix());
       this.textContainer.transform(this.transformation.toMatrix());
     }
-    this.path.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.path.setBackgroundOpacity(this.backgroundOpacity);
-    this.path.setBorderColor(resolveColor(this.borderColor, conf.theme, "foreground"));
     this.path.setBorderWidth(this.borderWidth);
     this.path.setBorderStyle(this.borderStyle);
     this.path.setBorderOpacity(this.borderOpacity);
@@ -40937,7 +40930,6 @@ class Frame2 extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -40985,6 +40977,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()) {

package/dist/esm/index.js

@@ -9384,7 +9384,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) {
@@ -9396,14 +9396,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) {
@@ -9416,19 +9415,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);
@@ -16719,7 +16717,7 @@ function setSelectionFontHighlight(editor, format, selectionContext) {
   }
   if (format === "none") {
     Editor22.removeMark(editor, "fontHighlight");
-  } else if (marks.fontHighlight === format) {
+  } else if (typeof format === "string" && marks.fontHighlight === format) {
     Editor22.removeMark(editor, "fontHighlight");
   } else {
     Editor22.addMark(editor, "fontHighlight", format);
@@ -22474,8 +22472,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
         });
@@ -37640,6 +37638,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);
     }
@@ -37921,17 +37925,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);
-    const resolvedLineColor = resolveColor(this.lineColor, conf.theme, "foreground");
-    this.startPointer.path.setBorderColor(resolvedLineColor);
     this.startPointer.path.setBorderWidth(this.lineWidth);
-    this.startPointer.path.setBackgroundColor(resolvedLineColor);
     this.endPointer = getEndPointer(endPoint, this.endPointerStyle, this.lineStyle, this.lines, this.lineWidth * 0.1 + 0.2);
-    this.endPointer.path.setBorderColor(resolvedLineColor);
     this.endPointer.path.setBorderWidth(this.lineWidth);
-    this.endPointer.path.setBackgroundColor(resolvedLineColor);
     this.offsetLines();
     this.lines.setBorderWidth(this.lineWidth);
-    this.lines.setBorderColor(resolvedLineColor);
     this.lines.setBorderStyle(this.borderStyle);
     this.updateTitle();
   }
@@ -39711,7 +39709,6 @@ class Shape extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -39747,7 +39744,6 @@ class Shape extends BaseItem {
   }
   applyBorderColor(borderColor) {
     this.borderColor = borderColor;
-    this.path.setBorderColor(resolveColor(borderColor, conf.theme, "foreground"));
   }
   setBorderColor(borderColor) {
     this.emit({
@@ -39855,6 +39851,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()) {
@@ -39955,9 +39953,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);
@@ -40144,7 +40140,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(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.saveStickerData();
   }
   setId(id) {
@@ -40188,7 +40183,6 @@ class Sticker extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.stickerPath.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -40235,6 +40229,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()) {
@@ -40777,9 +40772,7 @@ class Frame2 extends BaseItem {
       this.path.transform(this.transformation.toMatrix());
       this.textContainer.transform(this.transformation.toMatrix());
     }
-    this.path.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.path.setBackgroundOpacity(this.backgroundOpacity);
-    this.path.setBorderColor(resolveColor(this.borderColor, conf.theme, "foreground"));
     this.path.setBorderWidth(this.borderWidth);
     this.path.setBorderStyle(this.borderStyle);
     this.path.setBorderOpacity(this.borderOpacity);
@@ -40930,7 +40923,6 @@ class Frame2 extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -40978,6 +40970,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()) {

package/dist/esm/node.js

@@ -10168,7 +10168,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) {
@@ -10180,14 +10180,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) {
@@ -10200,19 +10199,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);
@@ -19254,7 +19252,7 @@ function setSelectionFontHighlight(editor, format, selectionContext) {
   }
   if (format === "none") {
     Editor21.removeMark(editor, "fontHighlight");
-  } else if (marks.fontHighlight === format) {
+  } else if (typeof format === "string" && marks.fontHighlight === format) {
     Editor21.removeMark(editor, "fontHighlight");
   } else {
     Editor21.addMark(editor, "fontHighlight", format);
@@ -24941,8 +24939,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
         });
@@ -40108,6 +40106,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);
     }
@@ -40389,17 +40393,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);
-    const resolvedLineColor = resolveColor(this.lineColor, conf.theme, "foreground");
-    this.startPointer.path.setBorderColor(resolvedLineColor);
     this.startPointer.path.setBorderWidth(this.lineWidth);
-    this.startPointer.path.setBackgroundColor(resolvedLineColor);
     this.endPointer = getEndPointer(endPoint, this.endPointerStyle, this.lineStyle, this.lines, this.lineWidth * 0.1 + 0.2);
-    this.endPointer.path.setBorderColor(resolvedLineColor);
     this.endPointer.path.setBorderWidth(this.lineWidth);
-    this.endPointer.path.setBackgroundColor(resolvedLineColor);
     this.offsetLines();
     this.lines.setBorderWidth(this.lineWidth);
-    this.lines.setBorderColor(resolvedLineColor);
     this.lines.setBorderStyle(this.borderStyle);
     this.updateTitle();
   }
@@ -42179,7 +42177,6 @@ class Shape extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -42215,7 +42212,6 @@ class Shape extends BaseItem {
   }
   applyBorderColor(borderColor) {
     this.borderColor = borderColor;
-    this.path.setBorderColor(resolveColor(borderColor, conf.theme, "foreground"));
   }
   setBorderColor(borderColor) {
     this.emit({
@@ -42323,6 +42319,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()) {
@@ -42423,9 +42421,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);
@@ -42612,7 +42608,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(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.saveStickerData();
   }
   setId(id) {
@@ -42656,7 +42651,6 @@ class Sticker extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.stickerPath.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -42703,6 +42697,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()) {
@@ -43245,9 +43240,7 @@ class Frame2 extends BaseItem {
       this.path.transform(this.transformation.toMatrix());
       this.textContainer.transform(this.transformation.toMatrix());
     }
-    this.path.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.path.setBackgroundOpacity(this.backgroundOpacity);
-    this.path.setBorderColor(resolveColor(this.borderColor, conf.theme, "foreground"));
     this.path.setBorderWidth(this.borderWidth);
     this.path.setBorderStyle(this.borderStyle);
     this.path.setBorderOpacity(this.borderOpacity);
@@ -43398,7 +43391,6 @@ class Frame2 extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -43446,6 +43438,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()) {

package/dist/types/Items/RichText/CanvasText/Render.d.ts

@@ -27,8 +27,8 @@ interface LayoutTextNode {
 interface LeafStyle {
     fontStyle: string;
     fontWeight: string;
-    color: string;
-    backgroundColor: string | undefined;
+    color: string | import("../../../..").ColorValue;
+    backgroundColor: string | import("../../../..").ColorValue | undefined;
     fontSize: number | "auto";
     fontFamily: string;
     textDecorationLine?: 'underline';

package/dist/types/Items/RichText/Editor/TextNode.d.ts

@@ -1,4 +1,5 @@
 import { HorisontalAlignment } from "../../Alignment";
+import type { ColorValue } from "../../../..";
 export declare const TextStyles: string[];
 export type TextStyle = (typeof TextStyles)[number];
 export type TextNode = {
@@ -14,9 +15,9 @@ export type TextNode = {
     subscript: boolean;
     superscript: boolean;
     fontFamily?: string;
-    fontColor?: string;
+    fontColor?: string | ColorValue;
     fontSize?: number | "auto";
-    fontHighlight?: string;
+    fontHighlight?: string | ColorValue;
     enableAuto?: boolean;
     paddingTop?: number;
     paddingBottom?: number;

package/dist/types/Items/RichText/RichText.d.ts

@@ -47,7 +47,7 @@ export declare class RichText extends BaseItem {
     private selection?;
     transformationRenderBlock?: boolean;
     lastClickPoint?: Point;
-    initialFontColor?: string;
+    initialFontColor?: string | import("../../..").ColorValue;
     frameMbr?: Mbr;
     private _onLimitReached;
     private shrinkWidth;
@@ -109,7 +109,7 @@ export declare class RichText extends BaseItem {
     set onLimitReached(handler: () => void);
     setSelectionFontColor(format: string, selectionContext?: SelectionContext): SlateOp[];
     setHyperLink(link: string | undefined, selection: BaseRange | null): SlateOp[];
-    applySelectionFontColor(fontColor: string): void;
+    applySelectionFontColor(fontColor: string | import("../../..").ColorValue): void;
     setSelectionFontStyle(style: TextStyle | TextStyle[], selectionContext?: SelectionContext): SlateOp[];
     applySelectionFontSize(fontSize: number, selectionContext?: SelectionContext): void;
     setSelectionFontSize(fontSize: number | "auto", selectionContext?: SelectionContext): SlateOp[];
@@ -118,11 +118,11 @@ export declare class RichText extends BaseItem {
     setSelectionHorisontalAlignment(horisontalAlignment: HorisontalAlignment, selectionContext?: SelectionContext): SlateOp[];
     applySetSelectionHorisontalAlignment(horisontalAlignment: HorisontalAlignment, selectionContext?: SelectionContext): void;
     getFontStyles(): TextStyle[];
-    getFontColor(): string;
+    getFontColor(): string | import("../../..").ColorValue;
     getFontFamily(): string;
     getFontSize(): number;
     getMinFontSize(): number;
-    getFontHighlight(): string;
+    getFontHighlight(): string | import("../../..").ColorValue;
     getBlockType(): BlockType;
     getHorisontalAlignment(): HorisontalAlignment | undefined;
     getVerticalAlignment(): VerticalAlignment;

package/dist/types/Items/RichText/editorHelpers/selectionOps/applySelectionFontColor.d.ts

@@ -1,2 +1,3 @@
 import { Editor } from 'slate';
-export declare function applySelectionFontColor(editor: Editor, fontColor: string): void;
+import type { ColorValue } from '../../../../..';
+export declare function applySelectionFontColor(editor: Editor, fontColor: string | ColorValue): void;

package/dist/types/Items/RichText/editorHelpers/selectionOps/setSelectionFontHighlight.d.ts

@@ -1,2 +1,3 @@
 import { Editor } from 'slate';
-export declare function setSelectionFontHighlight(editor: Editor, format: string, selectionContext?: string): void;
+import type { ColorValue } from '../../../../..';
+export declare function setSelectionFontHighlight(editor: Editor, format: string | ColorValue, selectionContext?: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "microboard-temp",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A flexible interactive whiteboard library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",