microboard-temp 0.6.5 → 0.8.0

package/dist/esm/index.js

@@ -608,6 +608,184 @@ var require_escape_html = __commonJS((exports, module) => {
   }
 });
 
+// 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;
@@ -1201,12 +1379,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());
@@ -6765,6 +6945,7 @@ var conf = {
     plus: "Plus",
     plusAI: "PlusAI"
   },
+  theme: "light",
   EVENTS_PUBLISH_INTERVAL: 100,
   EVENTS_RESEND_INTERVAL: 1000,
   SELECTION_COLOR: "rgb(71, 120, 245)",
@@ -9203,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) {
@@ -9215,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) {
@@ -9235,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);
@@ -16538,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);
@@ -22293,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
         });
@@ -37042,7 +37221,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", {
@@ -37459,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);
     }
@@ -37549,7 +37734,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);
@@ -37645,7 +37830,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) {
@@ -37738,16 +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);
-    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();
   }
@@ -37853,7 +38035,7 @@ class ConnectorData2 {
   startPointerStyle = "None";
   endPointerStyle = "ArrowThin";
   lineStyle = "straight";
-  lineColor = "";
+  lineColor = fixedColor(CONNECTOR_COLOR);
   linkTo;
   lineWidth = 1;
   borderStyle = "solid";
@@ -38546,7 +38728,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;
@@ -39414,9 +39596,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;
@@ -39523,7 +39709,6 @@ class Shape extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(backgroundColor);
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -39559,7 +39744,6 @@ class Shape extends BaseItem {
   }
   applyBorderColor(borderColor) {
     this.borderColor = borderColor;
-    this.path.setBorderColor(borderColor);
   }
   setBorderColor(borderColor) {
     this.emit({
@@ -39667,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()) {
@@ -39767,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);
@@ -39818,7 +40002,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;
@@ -39930,7 +40114,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);
     }
@@ -39954,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(this.backgroundColor);
     this.saveStickerData();
   }
   setId(id) {
@@ -39998,7 +40183,6 @@ class Sticker extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.stickerPath.setBackgroundColor(backgroundColor);
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -40045,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()) {
@@ -40061,7 +40246,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";
@@ -40335,7 +40520,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;
@@ -40543,9 +40728,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;
@@ -40583,9 +40772,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);
@@ -40736,7 +40923,6 @@ class Frame2 extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(backgroundColor);
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -40784,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()) {
@@ -40808,9 +40996,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();
@@ -42446,6 +42634,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;
@@ -42491,7 +42680,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;
@@ -42599,7 +42788,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);
@@ -42626,7 +42815,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);
@@ -42719,7 +42908,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;
@@ -57105,12 +57294,17 @@ export {
   tempStorage,
   tagByType,
   stickerColors,
+  srgbChannelToLinear,
   sha256,
+  semanticColor,
   scalePatterns,
   scaleElementBy,
   rgbToRgba,
+  resolvePairedForeground,
+  resolveColor,
   resizeAndConvertToPng,
   resetElementScale,
+  relativeLuminance,
   registerItem,
   quickAddItem,
   prepareVideo,
@@ -57119,8 +57313,11 @@ export {
   positionRelatively,
   positionAbsolutely,
   parsersHTML,
+  parseCssRgb,
   omitDefaultProperties,
   messageRouter,
+  meetsWCAG_AAA,
+  meetsWCAG_AA,
   itemValidators,
   itemFactories,
   isShallowSimilarTo,
@@ -57147,14 +57344,19 @@ export {
   getControlPointData,
   getBlobFromDataURL,
   forceNumberIntoInterval,
+  fixedColor,
   fileTosha256,
   exportBoardSnapshot,
   editModeHotkeyRegistry,
   decodeHtml,
   defaultCursors as cursors,
+  cssContrastRatio,
   createVideoItem,
   createEvents,
+  contrastRatio,
   conf,
+  coerceOptionalColorValue,
+  coerceColorValue,
   checkHotkeys,
   catmullRomInterpolate,
   captureFrame,
@@ -57180,6 +57382,7 @@ export {
   STEP_STROKE_WIDTH,
   SHAPE_LAST_TYPE_KEY,
   SHAPES_CATEGORIES,
+  SEMANTIC_COLOR_IDS,
   RichText,
   QuadraticBezier,
   Presence,
@@ -57231,6 +57434,8 @@ export {
   Camera,
   CURSORS_IDLE_CLEANUP_DELAY,
   CURSORS_ANIMATION_DURATION,
+  CONTRAST_PALETTE_LIST,
+  CONTRAST_PALETTE,
   CONTEXT_NODE_HIGHLIGHT_COLOR,
   CONNECTOR_POINTER_TYPES,
   BoardSelection,