microboard-temp 0.8.0 → 0.8.1

package/dist/cjs/browser.js

@@ -7211,7 +7211,7 @@ var conf = {
     "rgb(231, 232, 238)",
     "rgb(156, 156, 156)"
   ],
-  DEFAULT_STICKER_COLOR: "rgb(233, 208, 255)",
+  DEFAULT_STICKER_COLOR: semanticColor("contrastBlue"),
   STICKER_COLOR_NAMES: [
     "purple",
     "pink",
@@ -7421,7 +7421,7 @@ var conf = {
   DEFAULT_TEXT_STYLES: {
     fontFamily: "Manrope",
     fontSize: 14,
-    fontColor: "rgb(20, 21, 26)",
+    fontColor: semanticColor("contrastNeutral"),
     fontHighlight: "",
     lineHeight: 1.4,
     bold: false,
@@ -9105,7 +9105,7 @@ function getTextStyle(data) {
   const leafStyle = {
     fontStyle: "normal",
     fontWeight: "normal",
-    color: data.fontColor ?? "black",
+    color: data.fontColor ?? semanticColor("contrastNeutral"),
     backgroundColor: data.fontHighlight,
     fontSize: data.fontSize ?? 14,
     fontFamily: data.fontFamily ?? "Arial"
@@ -40179,7 +40179,7 @@ class StickerData {
   linkTo;
   text;
   itemType = "Sticker";
-  constructor(backgroundColor = fixedColor(stickerColors["Sky Blue"]), transformation = new DefaultTransformationData, linkTo, text5 = new DefaultRichTextData([], "center", undefined)) {
+  constructor(backgroundColor = semanticColor("contrastBlue"), transformation = new DefaultTransformationData, linkTo, text5 = new DefaultRichTextData([], "center", undefined)) {
     this.backgroundColor = backgroundColor;
     this.transformation = transformation;
     this.linkTo = linkTo;
@@ -42811,8 +42811,9 @@ class Drawing extends BaseItem {
   lines = [];
   linkTo;
   strokeWidth = 1;
-  borderColor = fixedColor(conf.PEN_DEFAULT_COLOR);
+  borderColor = semanticColor("contrastNeutral");
   borderStyle = "solid";
+  colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
   borderOpacity = 1;
   transformationRenderBlock = undefined;
@@ -42846,6 +42847,7 @@ class Drawing extends BaseItem {
       transformation: this.transformation.serialize(),
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
+      colorRole: this.colorRole,
       linkTo: this.linkTo.serialize()
     };
   }
@@ -42859,6 +42861,9 @@ class Drawing extends BaseItem {
     this.transformation.deserialize(data.transformation);
     this.borderColor = coerceColorValue(data.strokeStyle);
     this.strokeWidth = data.strokeWidth;
+    if (data.colorRole) {
+      this.colorRole = data.colorRole;
+    }
     this.updateGeometry();
     return this;
   }
@@ -42965,7 +42970,8 @@ class Drawing extends BaseItem {
     }
     const ctx = context.ctx;
     ctx.save();
-    ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, "foreground");
+    ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -42992,7 +42998,8 @@ 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", resolveColor(this.borderColor, conf.theme, "foreground"));
+    pathElement.setAttribute("stroke", resolveColor(this.borderColor, conf.theme, this.colorRole));
+    pathElement.setAttribute("stroke-opacity", `${this.borderOpacity}`);
     pathElement.setAttribute("stroke-width", `${this.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg3.appendChild(pathElement);
@@ -43148,6 +43155,13 @@ class Drawing extends BaseItem {
   getStrokeColor() {
     return this.borderColor;
   }
+  setColorRole(role) {
+    this.colorRole = role;
+    return this;
+  }
+  getColorRole() {
+    return this.colorRole;
+  }
   setStrokeWidth(width2) {
     this.emit({
       class: "Drawing",
@@ -44133,7 +44147,7 @@ class AddDrawing extends BoardTool {
   drawing = null;
   isDown = false;
   strokeWidth = conf.PEN_INITIAL_STROKE_WIDTH;
-  strokeColor = conf.PEN_DEFAULT_COLOR;
+  strokeColor = semanticColor("contrastNeutral");
   strokeStyle = conf.PEN_STROKE_STYLE;
   constructor(board) {
     super(board);
@@ -44188,6 +44202,9 @@ class AddDrawing extends BoardTool {
   isHighlighter() {
     return false;
   }
+  applyDrawingRole(drawing) {
+    drawing.setColorRole("foreground");
+  }
   leftButtonDown() {
     if (this.strokeColor === "none") {
       return false;
@@ -44227,9 +44244,10 @@ class AddDrawing extends BoardTool {
     }
     const drawing = new Drawing(this.board, points);
     drawing.transformation.translateTo(x, y);
-    drawing.setStrokeColor(this.strokeColor);
+    drawing.setStrokeColor(coerceColorValue(this.strokeColor));
     drawing.setStrokeWidth(this.strokeWidth);
     drawing.setBorderStyle(this.strokeStyle);
+    this.applyDrawingRole(drawing);
     this.board.add(drawing).updateMbr();
     this.board.selection.removeAll();
     this.drawing = null;
@@ -44268,16 +44286,17 @@ class AddDrawing extends BoardTool {
       return;
     }
     const drawing = this.drawing;
-    drawing.setStrokeColor(this.strokeColor);
+    drawing.setStrokeColor(coerceColorValue(this.strokeColor));
     drawing.setStrokeWidth(this.strokeWidth);
     drawing.setBorderStyle(this.strokeStyle);
+    this.applyDrawingRole(drawing);
     drawing.render(context);
   }
 }
 // src/Tools/AddDrawing/AddHighlighter.ts
 class AddHighlighter extends AddDrawing {
   strokeWidth = conf.HIGHLIGHTER_INITIAL_STROKE_WIDTH;
-  strokeColor = conf.HIGHLIGHTER_DEFAULT_COLOR;
+  strokeColor = semanticColor("contrastGreen");
   strokeStyle = conf.PEN_STROKE_STYLE;
   constructor(board) {
     super(board);
@@ -44295,6 +44314,10 @@ class AddHighlighter extends AddDrawing {
   isHighlighter() {
     return true;
   }
+  applyDrawingRole(drawing) {
+    drawing.setColorRole("background");
+    drawing.setStrokeOpacity(0.5);
+  }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({
       strokeWidth: this.strokeWidth,
@@ -44714,7 +44737,8 @@ class AddSticker extends BoardTool {
   }
   setCursor(color2) {
     if (conf.STICKER_COLOR_NAMES) {
-      const colorName = color2 ? conf.STICKER_COLOR_NAMES[conf.STICKER_COLORS.indexOf(color2)] : undefined;
+      const cssColor = color2 ? resolveColor(color2, conf.theme, "background") : undefined;
+      const colorName = cssColor ? conf.STICKER_COLOR_NAMES[conf.STICKER_COLORS.indexOf(cssColor)] : undefined;
       this.board.pointer.setCursor(colorName ? `sticker-${colorName}` : "crosshair");
     } else {
       this.board.pointer.setCursor("crosshair");
@@ -44725,7 +44749,7 @@ class AddSticker extends BoardTool {
       class: "Sticker",
       method: "setBackgroundColor",
       item: [this.sticker.getId()],
-      backgroundColor: color2
+      backgroundColor: coerceColorValue(color2)
     });
     this.setCursor(color2);
     this.board.tools.publish();

package/dist/cjs/index.js

@@ -7211,7 +7211,7 @@ var conf = {
     "rgb(231, 232, 238)",
     "rgb(156, 156, 156)"
   ],
-  DEFAULT_STICKER_COLOR: "rgb(233, 208, 255)",
+  DEFAULT_STICKER_COLOR: semanticColor("contrastBlue"),
   STICKER_COLOR_NAMES: [
     "purple",
     "pink",
@@ -7421,7 +7421,7 @@ var conf = {
   DEFAULT_TEXT_STYLES: {
     fontFamily: "Manrope",
     fontSize: 14,
-    fontColor: "rgb(20, 21, 26)",
+    fontColor: semanticColor("contrastNeutral"),
     fontHighlight: "",
     lineHeight: 1.4,
     bold: false,
@@ -9105,7 +9105,7 @@ function getTextStyle(data) {
   const leafStyle = {
     fontStyle: "normal",
     fontWeight: "normal",
-    color: data.fontColor ?? "black",
+    color: data.fontColor ?? semanticColor("contrastNeutral"),
     backgroundColor: data.fontHighlight,
     fontSize: data.fontSize ?? 14,
     fontFamily: data.fontFamily ?? "Arial"
@@ -40179,7 +40179,7 @@ class StickerData {
   linkTo;
   text;
   itemType = "Sticker";
-  constructor(backgroundColor = fixedColor(stickerColors["Sky Blue"]), transformation = new DefaultTransformationData, linkTo, text5 = new DefaultRichTextData([], "center", undefined)) {
+  constructor(backgroundColor = semanticColor("contrastBlue"), transformation = new DefaultTransformationData, linkTo, text5 = new DefaultRichTextData([], "center", undefined)) {
     this.backgroundColor = backgroundColor;
     this.transformation = transformation;
     this.linkTo = linkTo;
@@ -42811,8 +42811,9 @@ class Drawing extends BaseItem {
   lines = [];
   linkTo;
   strokeWidth = 1;
-  borderColor = fixedColor(conf.PEN_DEFAULT_COLOR);
+  borderColor = semanticColor("contrastNeutral");
   borderStyle = "solid";
+  colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
   borderOpacity = 1;
   transformationRenderBlock = undefined;
@@ -42846,6 +42847,7 @@ class Drawing extends BaseItem {
       transformation: this.transformation.serialize(),
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
+      colorRole: this.colorRole,
       linkTo: this.linkTo.serialize()
     };
   }
@@ -42859,6 +42861,9 @@ class Drawing extends BaseItem {
     this.transformation.deserialize(data.transformation);
     this.borderColor = coerceColorValue(data.strokeStyle);
     this.strokeWidth = data.strokeWidth;
+    if (data.colorRole) {
+      this.colorRole = data.colorRole;
+    }
     this.updateGeometry();
     return this;
   }
@@ -42965,7 +42970,8 @@ class Drawing extends BaseItem {
     }
     const ctx = context.ctx;
     ctx.save();
-    ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, "foreground");
+    ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -42992,7 +42998,8 @@ 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", resolveColor(this.borderColor, conf.theme, "foreground"));
+    pathElement.setAttribute("stroke", resolveColor(this.borderColor, conf.theme, this.colorRole));
+    pathElement.setAttribute("stroke-opacity", `${this.borderOpacity}`);
     pathElement.setAttribute("stroke-width", `${this.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg3.appendChild(pathElement);
@@ -43148,6 +43155,13 @@ class Drawing extends BaseItem {
   getStrokeColor() {
     return this.borderColor;
   }
+  setColorRole(role) {
+    this.colorRole = role;
+    return this;
+  }
+  getColorRole() {
+    return this.colorRole;
+  }
   setStrokeWidth(width2) {
     this.emit({
       class: "Drawing",
@@ -44133,7 +44147,7 @@ class AddDrawing extends BoardTool {
   drawing = null;
   isDown = false;
   strokeWidth = conf.PEN_INITIAL_STROKE_WIDTH;
-  strokeColor = conf.PEN_DEFAULT_COLOR;
+  strokeColor = semanticColor("contrastNeutral");
   strokeStyle = conf.PEN_STROKE_STYLE;
   constructor(board) {
     super(board);
@@ -44188,6 +44202,9 @@ class AddDrawing extends BoardTool {
   isHighlighter() {
     return false;
   }
+  applyDrawingRole(drawing) {
+    drawing.setColorRole("foreground");
+  }
   leftButtonDown() {
     if (this.strokeColor === "none") {
       return false;
@@ -44227,9 +44244,10 @@ class AddDrawing extends BoardTool {
     }
     const drawing = new Drawing(this.board, points);
     drawing.transformation.translateTo(x, y);
-    drawing.setStrokeColor(this.strokeColor);
+    drawing.setStrokeColor(coerceColorValue(this.strokeColor));
     drawing.setStrokeWidth(this.strokeWidth);
     drawing.setBorderStyle(this.strokeStyle);
+    this.applyDrawingRole(drawing);
     this.board.add(drawing).updateMbr();
     this.board.selection.removeAll();
     this.drawing = null;
@@ -44268,16 +44286,17 @@ class AddDrawing extends BoardTool {
       return;
     }
     const drawing = this.drawing;
-    drawing.setStrokeColor(this.strokeColor);
+    drawing.setStrokeColor(coerceColorValue(this.strokeColor));
     drawing.setStrokeWidth(this.strokeWidth);
     drawing.setBorderStyle(this.strokeStyle);
+    this.applyDrawingRole(drawing);
     drawing.render(context);
   }
 }
 // src/Tools/AddDrawing/AddHighlighter.ts
 class AddHighlighter extends AddDrawing {
   strokeWidth = conf.HIGHLIGHTER_INITIAL_STROKE_WIDTH;
-  strokeColor = conf.HIGHLIGHTER_DEFAULT_COLOR;
+  strokeColor = semanticColor("contrastGreen");
   strokeStyle = conf.PEN_STROKE_STYLE;
   constructor(board) {
     super(board);
@@ -44295,6 +44314,10 @@ class AddHighlighter extends AddDrawing {
   isHighlighter() {
     return true;
   }
+  applyDrawingRole(drawing) {
+    drawing.setColorRole("background");
+    drawing.setStrokeOpacity(0.5);
+  }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({
       strokeWidth: this.strokeWidth,
@@ -44714,7 +44737,8 @@ class AddSticker extends BoardTool {
   }
   setCursor(color2) {
     if (conf.STICKER_COLOR_NAMES) {
-      const colorName = color2 ? conf.STICKER_COLOR_NAMES[conf.STICKER_COLORS.indexOf(color2)] : undefined;
+      const cssColor = color2 ? resolveColor(color2, conf.theme, "background") : undefined;
+      const colorName = cssColor ? conf.STICKER_COLOR_NAMES[conf.STICKER_COLORS.indexOf(cssColor)] : undefined;
       this.board.pointer.setCursor(colorName ? `sticker-${colorName}` : "crosshair");
     } else {
       this.board.pointer.setCursor("crosshair");
@@ -44725,7 +44749,7 @@ class AddSticker extends BoardTool {
       class: "Sticker",
       method: "setBackgroundColor",
       item: [this.sticker.getId()],
-      backgroundColor: color2
+      backgroundColor: coerceColorValue(color2)
     });
     this.setCursor(color2);
     this.board.tools.publish();

package/dist/cjs/node.js

@@ -8248,7 +8248,7 @@ var conf = {
     "rgb(231, 232, 238)",
     "rgb(156, 156, 156)"
   ],
-  DEFAULT_STICKER_COLOR: "rgb(233, 208, 255)",
+  DEFAULT_STICKER_COLOR: semanticColor("contrastBlue"),
   STICKER_COLOR_NAMES: [
     "purple",
     "pink",
@@ -8458,7 +8458,7 @@ var conf = {
   DEFAULT_TEXT_STYLES: {
     fontFamily: "Manrope",
     fontSize: 14,
-    fontColor: "rgb(20, 21, 26)",
+    fontColor: semanticColor("contrastNeutral"),
     fontHighlight: "",
     lineHeight: 1.4,
     bold: false,
@@ -10142,7 +10142,7 @@ function getTextStyle(data) {
   const leafStyle = {
     fontStyle: "normal",
     fontWeight: "normal",
-    color: data.fontColor ?? "black",
+    color: data.fontColor ?? semanticColor("contrastNeutral"),
     backgroundColor: data.fontHighlight,
     fontSize: data.fontSize ?? 14,
     fontFamily: data.fontFamily ?? "Arial"
@@ -42652,7 +42652,7 @@ class StickerData {
   linkTo;
   text;
   itemType = "Sticker";
-  constructor(backgroundColor = fixedColor(stickerColors["Sky Blue"]), transformation = new DefaultTransformationData, linkTo, text5 = new DefaultRichTextData([], "center", undefined)) {
+  constructor(backgroundColor = semanticColor("contrastBlue"), transformation = new DefaultTransformationData, linkTo, text5 = new DefaultRichTextData([], "center", undefined)) {
     this.backgroundColor = backgroundColor;
     this.transformation = transformation;
     this.linkTo = linkTo;
@@ -45284,8 +45284,9 @@ class Drawing extends BaseItem {
   lines = [];
   linkTo;
   strokeWidth = 1;
-  borderColor = fixedColor(conf.PEN_DEFAULT_COLOR);
+  borderColor = semanticColor("contrastNeutral");
   borderStyle = "solid";
+  colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
   borderOpacity = 1;
   transformationRenderBlock = undefined;
@@ -45319,6 +45320,7 @@ class Drawing extends BaseItem {
       transformation: this.transformation.serialize(),
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
+      colorRole: this.colorRole,
       linkTo: this.linkTo.serialize()
     };
   }
@@ -45332,6 +45334,9 @@ class Drawing extends BaseItem {
     this.transformation.deserialize(data.transformation);
     this.borderColor = coerceColorValue(data.strokeStyle);
     this.strokeWidth = data.strokeWidth;
+    if (data.colorRole) {
+      this.colorRole = data.colorRole;
+    }
     this.updateGeometry();
     return this;
   }
@@ -45438,7 +45443,8 @@ class Drawing extends BaseItem {
     }
     const ctx = context.ctx;
     ctx.save();
-    ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, "foreground");
+    ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -45465,7 +45471,8 @@ 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", resolveColor(this.borderColor, conf.theme, "foreground"));
+    pathElement.setAttribute("stroke", resolveColor(this.borderColor, conf.theme, this.colorRole));
+    pathElement.setAttribute("stroke-opacity", `${this.borderOpacity}`);
     pathElement.setAttribute("stroke-width", `${this.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg3.appendChild(pathElement);
@@ -45621,6 +45628,13 @@ class Drawing extends BaseItem {
   getStrokeColor() {
     return this.borderColor;
   }
+  setColorRole(role) {
+    this.colorRole = role;
+    return this;
+  }
+  getColorRole() {
+    return this.colorRole;
+  }
   setStrokeWidth(width2) {
     this.emit({
       class: "Drawing",
@@ -46606,7 +46620,7 @@ class AddDrawing extends BoardTool {
   drawing = null;
   isDown = false;
   strokeWidth = conf.PEN_INITIAL_STROKE_WIDTH;
-  strokeColor = conf.PEN_DEFAULT_COLOR;
+  strokeColor = semanticColor("contrastNeutral");
   strokeStyle = conf.PEN_STROKE_STYLE;
   constructor(board) {
     super(board);
@@ -46661,6 +46675,9 @@ class AddDrawing extends BoardTool {
   isHighlighter() {
     return false;
   }
+  applyDrawingRole(drawing) {
+    drawing.setColorRole("foreground");
+  }
   leftButtonDown() {
     if (this.strokeColor === "none") {
       return false;
@@ -46700,9 +46717,10 @@ class AddDrawing extends BoardTool {
     }
     const drawing = new Drawing(this.board, points);
     drawing.transformation.translateTo(x, y);
-    drawing.setStrokeColor(this.strokeColor);
+    drawing.setStrokeColor(coerceColorValue(this.strokeColor));
     drawing.setStrokeWidth(this.strokeWidth);
     drawing.setBorderStyle(this.strokeStyle);
+    this.applyDrawingRole(drawing);
     this.board.add(drawing).updateMbr();
     this.board.selection.removeAll();
     this.drawing = null;
@@ -46741,16 +46759,17 @@ class AddDrawing extends BoardTool {
       return;
     }
     const drawing = this.drawing;
-    drawing.setStrokeColor(this.strokeColor);
+    drawing.setStrokeColor(coerceColorValue(this.strokeColor));
     drawing.setStrokeWidth(this.strokeWidth);
     drawing.setBorderStyle(this.strokeStyle);
+    this.applyDrawingRole(drawing);
     drawing.render(context);
   }
 }
 // src/Tools/AddDrawing/AddHighlighter.ts
 class AddHighlighter extends AddDrawing {
   strokeWidth = conf.HIGHLIGHTER_INITIAL_STROKE_WIDTH;
-  strokeColor = conf.HIGHLIGHTER_DEFAULT_COLOR;
+  strokeColor = semanticColor("contrastGreen");
   strokeStyle = conf.PEN_STROKE_STYLE;
   constructor(board) {
     super(board);
@@ -46768,6 +46787,10 @@ class AddHighlighter extends AddDrawing {
   isHighlighter() {
     return true;
   }
+  applyDrawingRole(drawing) {
+    drawing.setColorRole("background");
+    drawing.setStrokeOpacity(0.5);
+  }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({
       strokeWidth: this.strokeWidth,
@@ -47187,7 +47210,8 @@ class AddSticker extends BoardTool {
   }
   setCursor(color2) {
     if (conf.STICKER_COLOR_NAMES) {
-      const colorName = color2 ? conf.STICKER_COLOR_NAMES[conf.STICKER_COLORS.indexOf(color2)] : undefined;
+      const cssColor = color2 ? resolveColor(color2, conf.theme, "background") : undefined;
+      const colorName = cssColor ? conf.STICKER_COLOR_NAMES[conf.STICKER_COLORS.indexOf(cssColor)] : undefined;
       this.board.pointer.setCursor(colorName ? `sticker-${colorName}` : "crosshair");
     } else {
       this.board.pointer.setCursor("crosshair");
@@ -47198,7 +47222,7 @@ class AddSticker extends BoardTool {
       class: "Sticker",
       method: "setBackgroundColor",
       item: [this.sticker.getId()],
-      backgroundColor: color2
+      backgroundColor: coerceColorValue(color2)
     });
     this.setCursor(color2);
     this.board.tools.publish();

package/dist/esm/browser.js

@@ -7032,7 +7032,7 @@ var conf = {
     "rgb(231, 232, 238)",
     "rgb(156, 156, 156)"
   ],
-  DEFAULT_STICKER_COLOR: "rgb(233, 208, 255)",
+  DEFAULT_STICKER_COLOR: semanticColor("contrastBlue"),
   STICKER_COLOR_NAMES: [
     "purple",
     "pink",
@@ -7242,7 +7242,7 @@ var conf = {
   DEFAULT_TEXT_STYLES: {
     fontFamily: "Manrope",
     fontSize: 14,
-    fontColor: "rgb(20, 21, 26)",
+    fontColor: semanticColor("contrastNeutral"),
     fontHighlight: "",
     lineHeight: 1.4,
     bold: false,
@@ -8931,7 +8931,7 @@ function getTextStyle(data) {
   const leafStyle = {
     fontStyle: "normal",
     fontWeight: "normal",
-    color: data.fontColor ?? "black",
+    color: data.fontColor ?? semanticColor("contrastNeutral"),
     backgroundColor: data.fontHighlight,
     fontSize: data.fontSize ?? 14,
     fontFamily: data.fontFamily ?? "Arial"
@@ -40009,7 +40009,7 @@ class StickerData {
   linkTo;
   text;
   itemType = "Sticker";
-  constructor(backgroundColor = fixedColor(stickerColors["Sky Blue"]), transformation = new DefaultTransformationData, linkTo, text5 = new DefaultRichTextData([], "center", undefined)) {
+  constructor(backgroundColor = semanticColor("contrastBlue"), transformation = new DefaultTransformationData, linkTo, text5 = new DefaultRichTextData([], "center", undefined)) {
     this.backgroundColor = backgroundColor;
     this.transformation = transformation;
     this.linkTo = linkTo;
@@ -42641,8 +42641,9 @@ class Drawing extends BaseItem {
   lines = [];
   linkTo;
   strokeWidth = 1;
-  borderColor = fixedColor(conf.PEN_DEFAULT_COLOR);
+  borderColor = semanticColor("contrastNeutral");
   borderStyle = "solid";
+  colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
   borderOpacity = 1;
   transformationRenderBlock = undefined;
@@ -42676,6 +42677,7 @@ class Drawing extends BaseItem {
       transformation: this.transformation.serialize(),
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
+      colorRole: this.colorRole,
       linkTo: this.linkTo.serialize()
     };
   }
@@ -42689,6 +42691,9 @@ class Drawing extends BaseItem {
     this.transformation.deserialize(data.transformation);
     this.borderColor = coerceColorValue(data.strokeStyle);
     this.strokeWidth = data.strokeWidth;
+    if (data.colorRole) {
+      this.colorRole = data.colorRole;
+    }
     this.updateGeometry();
     return this;
   }
@@ -42795,7 +42800,8 @@ class Drawing extends BaseItem {
     }
     const ctx = context.ctx;
     ctx.save();
-    ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, "foreground");
+    ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -42822,7 +42828,8 @@ 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", resolveColor(this.borderColor, conf.theme, "foreground"));
+    pathElement.setAttribute("stroke", resolveColor(this.borderColor, conf.theme, this.colorRole));
+    pathElement.setAttribute("stroke-opacity", `${this.borderOpacity}`);
     pathElement.setAttribute("stroke-width", `${this.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg3.appendChild(pathElement);
@@ -42978,6 +42985,13 @@ class Drawing extends BaseItem {
   getStrokeColor() {
     return this.borderColor;
   }
+  setColorRole(role) {
+    this.colorRole = role;
+    return this;
+  }
+  getColorRole() {
+    return this.colorRole;
+  }
   setStrokeWidth(width2) {
     this.emit({
       class: "Drawing",
@@ -43963,7 +43977,7 @@ class AddDrawing extends BoardTool {
   drawing = null;
   isDown = false;
   strokeWidth = conf.PEN_INITIAL_STROKE_WIDTH;
-  strokeColor = conf.PEN_DEFAULT_COLOR;
+  strokeColor = semanticColor("contrastNeutral");
   strokeStyle = conf.PEN_STROKE_STYLE;
   constructor(board) {
     super(board);
@@ -44018,6 +44032,9 @@ class AddDrawing extends BoardTool {
   isHighlighter() {
     return false;
   }
+  applyDrawingRole(drawing) {
+    drawing.setColorRole("foreground");
+  }
   leftButtonDown() {
     if (this.strokeColor === "none") {
       return false;
@@ -44057,9 +44074,10 @@ class AddDrawing extends BoardTool {
     }
     const drawing = new Drawing(this.board, points);
     drawing.transformation.translateTo(x, y);
-    drawing.setStrokeColor(this.strokeColor);
+    drawing.setStrokeColor(coerceColorValue(this.strokeColor));
     drawing.setStrokeWidth(this.strokeWidth);
     drawing.setBorderStyle(this.strokeStyle);
+    this.applyDrawingRole(drawing);
     this.board.add(drawing).updateMbr();
     this.board.selection.removeAll();
     this.drawing = null;
@@ -44098,16 +44116,17 @@ class AddDrawing extends BoardTool {
       return;
     }
     const drawing = this.drawing;
-    drawing.setStrokeColor(this.strokeColor);
+    drawing.setStrokeColor(coerceColorValue(this.strokeColor));
     drawing.setStrokeWidth(this.strokeWidth);
     drawing.setBorderStyle(this.strokeStyle);
+    this.applyDrawingRole(drawing);
     drawing.render(context);
   }
 }
 // src/Tools/AddDrawing/AddHighlighter.ts
 class AddHighlighter extends AddDrawing {
   strokeWidth = conf.HIGHLIGHTER_INITIAL_STROKE_WIDTH;
-  strokeColor = conf.HIGHLIGHTER_DEFAULT_COLOR;
+  strokeColor = semanticColor("contrastGreen");
   strokeStyle = conf.PEN_STROKE_STYLE;
   constructor(board) {
     super(board);
@@ -44125,6 +44144,10 @@ class AddHighlighter extends AddDrawing {
   isHighlighter() {
     return true;
   }
+  applyDrawingRole(drawing) {
+    drawing.setColorRole("background");
+    drawing.setStrokeOpacity(0.5);
+  }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({
       strokeWidth: this.strokeWidth,
@@ -44544,7 +44567,8 @@ class AddSticker extends BoardTool {
   }
   setCursor(color2) {
     if (conf.STICKER_COLOR_NAMES) {
-      const colorName = color2 ? conf.STICKER_COLOR_NAMES[conf.STICKER_COLORS.indexOf(color2)] : undefined;
+      const cssColor = color2 ? resolveColor(color2, conf.theme, "background") : undefined;
+      const colorName = cssColor ? conf.STICKER_COLOR_NAMES[conf.STICKER_COLORS.indexOf(cssColor)] : undefined;
       this.board.pointer.setCursor(colorName ? `sticker-${colorName}` : "crosshair");
     } else {
       this.board.pointer.setCursor("crosshair");
@@ -44555,7 +44579,7 @@ class AddSticker extends BoardTool {
       class: "Sticker",
       method: "setBackgroundColor",
       item: [this.sticker.getId()],
-      backgroundColor: color2
+      backgroundColor: coerceColorValue(color2)
     });
     this.setCursor(color2);
     this.board.tools.publish();

package/dist/esm/index.js

@@ -7025,7 +7025,7 @@ var conf = {
     "rgb(231, 232, 238)",
     "rgb(156, 156, 156)"
   ],
-  DEFAULT_STICKER_COLOR: "rgb(233, 208, 255)",
+  DEFAULT_STICKER_COLOR: semanticColor("contrastBlue"),
   STICKER_COLOR_NAMES: [
     "purple",
     "pink",
@@ -7235,7 +7235,7 @@ var conf = {
   DEFAULT_TEXT_STYLES: {
     fontFamily: "Manrope",
     fontSize: 14,
-    fontColor: "rgb(20, 21, 26)",
+    fontColor: semanticColor("contrastNeutral"),
     fontHighlight: "",
     lineHeight: 1.4,
     bold: false,
@@ -8924,7 +8924,7 @@ function getTextStyle(data) {
   const leafStyle = {
     fontStyle: "normal",
     fontWeight: "normal",
-    color: data.fontColor ?? "black",
+    color: data.fontColor ?? semanticColor("contrastNeutral"),
     backgroundColor: data.fontHighlight,
     fontSize: data.fontSize ?? 14,
     fontFamily: data.fontFamily ?? "Arial"
@@ -40002,7 +40002,7 @@ class StickerData {
   linkTo;
   text;
   itemType = "Sticker";
-  constructor(backgroundColor = fixedColor(stickerColors["Sky Blue"]), transformation = new DefaultTransformationData, linkTo, text5 = new DefaultRichTextData([], "center", undefined)) {
+  constructor(backgroundColor = semanticColor("contrastBlue"), transformation = new DefaultTransformationData, linkTo, text5 = new DefaultRichTextData([], "center", undefined)) {
     this.backgroundColor = backgroundColor;
     this.transformation = transformation;
     this.linkTo = linkTo;
@@ -42634,8 +42634,9 @@ class Drawing extends BaseItem {
   lines = [];
   linkTo;
   strokeWidth = 1;
-  borderColor = fixedColor(conf.PEN_DEFAULT_COLOR);
+  borderColor = semanticColor("contrastNeutral");
   borderStyle = "solid";
+  colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
   borderOpacity = 1;
   transformationRenderBlock = undefined;
@@ -42669,6 +42670,7 @@ class Drawing extends BaseItem {
       transformation: this.transformation.serialize(),
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
+      colorRole: this.colorRole,
       linkTo: this.linkTo.serialize()
     };
   }
@@ -42682,6 +42684,9 @@ class Drawing extends BaseItem {
     this.transformation.deserialize(data.transformation);
     this.borderColor = coerceColorValue(data.strokeStyle);
     this.strokeWidth = data.strokeWidth;
+    if (data.colorRole) {
+      this.colorRole = data.colorRole;
+    }
     this.updateGeometry();
     return this;
   }
@@ -42788,7 +42793,8 @@ class Drawing extends BaseItem {
     }
     const ctx = context.ctx;
     ctx.save();
-    ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, "foreground");
+    ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -42815,7 +42821,8 @@ 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", resolveColor(this.borderColor, conf.theme, "foreground"));
+    pathElement.setAttribute("stroke", resolveColor(this.borderColor, conf.theme, this.colorRole));
+    pathElement.setAttribute("stroke-opacity", `${this.borderOpacity}`);
     pathElement.setAttribute("stroke-width", `${this.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg3.appendChild(pathElement);
@@ -42971,6 +42978,13 @@ class Drawing extends BaseItem {
   getStrokeColor() {
     return this.borderColor;
   }
+  setColorRole(role) {
+    this.colorRole = role;
+    return this;
+  }
+  getColorRole() {
+    return this.colorRole;
+  }
   setStrokeWidth(width2) {
     this.emit({
       class: "Drawing",
@@ -43956,7 +43970,7 @@ class AddDrawing extends BoardTool {
   drawing = null;
   isDown = false;
   strokeWidth = conf.PEN_INITIAL_STROKE_WIDTH;
-  strokeColor = conf.PEN_DEFAULT_COLOR;
+  strokeColor = semanticColor("contrastNeutral");
   strokeStyle = conf.PEN_STROKE_STYLE;
   constructor(board) {
     super(board);
@@ -44011,6 +44025,9 @@ class AddDrawing extends BoardTool {
   isHighlighter() {
     return false;
   }
+  applyDrawingRole(drawing) {
+    drawing.setColorRole("foreground");
+  }
   leftButtonDown() {
     if (this.strokeColor === "none") {
       return false;
@@ -44050,9 +44067,10 @@ class AddDrawing extends BoardTool {
     }
     const drawing = new Drawing(this.board, points);
     drawing.transformation.translateTo(x, y);
-    drawing.setStrokeColor(this.strokeColor);
+    drawing.setStrokeColor(coerceColorValue(this.strokeColor));
     drawing.setStrokeWidth(this.strokeWidth);
     drawing.setBorderStyle(this.strokeStyle);
+    this.applyDrawingRole(drawing);
     this.board.add(drawing).updateMbr();
     this.board.selection.removeAll();
     this.drawing = null;
@@ -44091,16 +44109,17 @@ class AddDrawing extends BoardTool {
       return;
     }
     const drawing = this.drawing;
-    drawing.setStrokeColor(this.strokeColor);
+    drawing.setStrokeColor(coerceColorValue(this.strokeColor));
     drawing.setStrokeWidth(this.strokeWidth);
     drawing.setBorderStyle(this.strokeStyle);
+    this.applyDrawingRole(drawing);
     drawing.render(context);
   }
 }
 // src/Tools/AddDrawing/AddHighlighter.ts
 class AddHighlighter extends AddDrawing {
   strokeWidth = conf.HIGHLIGHTER_INITIAL_STROKE_WIDTH;
-  strokeColor = conf.HIGHLIGHTER_DEFAULT_COLOR;
+  strokeColor = semanticColor("contrastGreen");
   strokeStyle = conf.PEN_STROKE_STYLE;
   constructor(board) {
     super(board);
@@ -44118,6 +44137,10 @@ class AddHighlighter extends AddDrawing {
   isHighlighter() {
     return true;
   }
+  applyDrawingRole(drawing) {
+    drawing.setColorRole("background");
+    drawing.setStrokeOpacity(0.5);
+  }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({
       strokeWidth: this.strokeWidth,
@@ -44537,7 +44560,8 @@ class AddSticker extends BoardTool {
   }
   setCursor(color2) {
     if (conf.STICKER_COLOR_NAMES) {
-      const colorName = color2 ? conf.STICKER_COLOR_NAMES[conf.STICKER_COLORS.indexOf(color2)] : undefined;
+      const cssColor = color2 ? resolveColor(color2, conf.theme, "background") : undefined;
+      const colorName = cssColor ? conf.STICKER_COLOR_NAMES[conf.STICKER_COLORS.indexOf(cssColor)] : undefined;
       this.board.pointer.setCursor(colorName ? `sticker-${colorName}` : "crosshair");
     } else {
       this.board.pointer.setCursor("crosshair");
@@ -44548,7 +44572,7 @@ class AddSticker extends BoardTool {
       class: "Sticker",
       method: "setBackgroundColor",
       item: [this.sticker.getId()],
-      backgroundColor: color2
+      backgroundColor: coerceColorValue(color2)
     });
     this.setCursor(color2);
     this.board.tools.publish();

package/dist/esm/node.js

@@ -7809,7 +7809,7 @@ var conf = {
     "rgb(231, 232, 238)",
     "rgb(156, 156, 156)"
   ],
-  DEFAULT_STICKER_COLOR: "rgb(233, 208, 255)",
+  DEFAULT_STICKER_COLOR: semanticColor("contrastBlue"),
   STICKER_COLOR_NAMES: [
     "purple",
     "pink",
@@ -8019,7 +8019,7 @@ var conf = {
   DEFAULT_TEXT_STYLES: {
     fontFamily: "Manrope",
     fontSize: 14,
-    fontColor: "rgb(20, 21, 26)",
+    fontColor: semanticColor("contrastNeutral"),
     fontHighlight: "",
     lineHeight: 1.4,
     bold: false,
@@ -9708,7 +9708,7 @@ function getTextStyle(data) {
   const leafStyle = {
     fontStyle: "normal",
     fontWeight: "normal",
-    color: data.fontColor ?? "black",
+    color: data.fontColor ?? semanticColor("contrastNeutral"),
     backgroundColor: data.fontHighlight,
     fontSize: data.fontSize ?? 14,
     fontFamily: data.fontFamily ?? "Arial"
@@ -42470,7 +42470,7 @@ class StickerData {
   linkTo;
   text;
   itemType = "Sticker";
-  constructor(backgroundColor = fixedColor(stickerColors["Sky Blue"]), transformation = new DefaultTransformationData, linkTo, text5 = new DefaultRichTextData([], "center", undefined)) {
+  constructor(backgroundColor = semanticColor("contrastBlue"), transformation = new DefaultTransformationData, linkTo, text5 = new DefaultRichTextData([], "center", undefined)) {
     this.backgroundColor = backgroundColor;
     this.transformation = transformation;
     this.linkTo = linkTo;
@@ -45102,8 +45102,9 @@ class Drawing extends BaseItem {
   lines = [];
   linkTo;
   strokeWidth = 1;
-  borderColor = fixedColor(conf.PEN_DEFAULT_COLOR);
+  borderColor = semanticColor("contrastNeutral");
   borderStyle = "solid";
+  colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
   borderOpacity = 1;
   transformationRenderBlock = undefined;
@@ -45137,6 +45138,7 @@ class Drawing extends BaseItem {
       transformation: this.transformation.serialize(),
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
+      colorRole: this.colorRole,
       linkTo: this.linkTo.serialize()
     };
   }
@@ -45150,6 +45152,9 @@ class Drawing extends BaseItem {
     this.transformation.deserialize(data.transformation);
     this.borderColor = coerceColorValue(data.strokeStyle);
     this.strokeWidth = data.strokeWidth;
+    if (data.colorRole) {
+      this.colorRole = data.colorRole;
+    }
     this.updateGeometry();
     return this;
   }
@@ -45256,7 +45261,8 @@ class Drawing extends BaseItem {
     }
     const ctx = context.ctx;
     ctx.save();
-    ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, "foreground");
+    ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -45283,7 +45289,8 @@ 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", resolveColor(this.borderColor, conf.theme, "foreground"));
+    pathElement.setAttribute("stroke", resolveColor(this.borderColor, conf.theme, this.colorRole));
+    pathElement.setAttribute("stroke-opacity", `${this.borderOpacity}`);
     pathElement.setAttribute("stroke-width", `${this.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg3.appendChild(pathElement);
@@ -45439,6 +45446,13 @@ class Drawing extends BaseItem {
   getStrokeColor() {
     return this.borderColor;
   }
+  setColorRole(role) {
+    this.colorRole = role;
+    return this;
+  }
+  getColorRole() {
+    return this.colorRole;
+  }
   setStrokeWidth(width2) {
     this.emit({
       class: "Drawing",
@@ -46424,7 +46438,7 @@ class AddDrawing extends BoardTool {
   drawing = null;
   isDown = false;
   strokeWidth = conf.PEN_INITIAL_STROKE_WIDTH;
-  strokeColor = conf.PEN_DEFAULT_COLOR;
+  strokeColor = semanticColor("contrastNeutral");
   strokeStyle = conf.PEN_STROKE_STYLE;
   constructor(board) {
     super(board);
@@ -46479,6 +46493,9 @@ class AddDrawing extends BoardTool {
   isHighlighter() {
     return false;
   }
+  applyDrawingRole(drawing) {
+    drawing.setColorRole("foreground");
+  }
   leftButtonDown() {
     if (this.strokeColor === "none") {
       return false;
@@ -46518,9 +46535,10 @@ class AddDrawing extends BoardTool {
     }
     const drawing = new Drawing(this.board, points);
     drawing.transformation.translateTo(x, y);
-    drawing.setStrokeColor(this.strokeColor);
+    drawing.setStrokeColor(coerceColorValue(this.strokeColor));
     drawing.setStrokeWidth(this.strokeWidth);
     drawing.setBorderStyle(this.strokeStyle);
+    this.applyDrawingRole(drawing);
     this.board.add(drawing).updateMbr();
     this.board.selection.removeAll();
     this.drawing = null;
@@ -46559,16 +46577,17 @@ class AddDrawing extends BoardTool {
       return;
     }
     const drawing = this.drawing;
-    drawing.setStrokeColor(this.strokeColor);
+    drawing.setStrokeColor(coerceColorValue(this.strokeColor));
     drawing.setStrokeWidth(this.strokeWidth);
     drawing.setBorderStyle(this.strokeStyle);
+    this.applyDrawingRole(drawing);
     drawing.render(context);
   }
 }
 // src/Tools/AddDrawing/AddHighlighter.ts
 class AddHighlighter extends AddDrawing {
   strokeWidth = conf.HIGHLIGHTER_INITIAL_STROKE_WIDTH;
-  strokeColor = conf.HIGHLIGHTER_DEFAULT_COLOR;
+  strokeColor = semanticColor("contrastGreen");
   strokeStyle = conf.PEN_STROKE_STYLE;
   constructor(board) {
     super(board);
@@ -46586,6 +46605,10 @@ class AddHighlighter extends AddDrawing {
   isHighlighter() {
     return true;
   }
+  applyDrawingRole(drawing) {
+    drawing.setColorRole("background");
+    drawing.setStrokeOpacity(0.5);
+  }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({
       strokeWidth: this.strokeWidth,
@@ -47005,7 +47028,8 @@ class AddSticker extends BoardTool {
   }
   setCursor(color2) {
     if (conf.STICKER_COLOR_NAMES) {
-      const colorName = color2 ? conf.STICKER_COLOR_NAMES[conf.STICKER_COLORS.indexOf(color2)] : undefined;
+      const cssColor = color2 ? resolveColor(color2, conf.theme, "background") : undefined;
+      const colorName = cssColor ? conf.STICKER_COLOR_NAMES[conf.STICKER_COLORS.indexOf(cssColor)] : undefined;
       this.board.pointer.setCursor(colorName ? `sticker-${colorName}` : "crosshair");
     } else {
       this.board.pointer.setCursor("crosshair");
@@ -47016,7 +47040,7 @@ class AddSticker extends BoardTool {
       class: "Sticker",
       method: "setBackgroundColor",
       item: [this.sticker.getId()],
-      backgroundColor: color2
+      backgroundColor: coerceColorValue(color2)
     });
     this.setCursor(color2);
     this.board.tools.publish();

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

@@ -12,7 +12,7 @@ import { LinkTo } from "../LinkTo/LinkTo";
 import { DocumentFactory } from "../../api/DocumentFactory";
 import { Board } from "../../Board";
 import { BaseItem } from "../BaseItem/BaseItem";
-import { ColorValue } from "../../..";
+import { ColorValue, ColorRole } from "../../..";
 export interface DrawingData {
     itemType: "Drawing";
     points: {
@@ -22,6 +22,7 @@ export interface DrawingData {
     transformation: TransformationData;
     strokeStyle: ColorValue | string;
     strokeWidth: number;
+    colorRole?: ColorRole;
     linkTo?: string;
 }
 export declare class Drawing extends BaseItem {
@@ -38,6 +39,7 @@ export declare class Drawing extends BaseItem {
     strokeWidth: BorderWidth;
     borderColor: ColorValue;
     borderStyle: BorderStyle;
+    colorRole: ColorRole;
     private linePattern;
     private borderOpacity;
     transformationRenderBlock?: boolean;
@@ -68,6 +70,8 @@ export declare class Drawing extends BaseItem {
     getBorderStyle(): BorderStyle;
     setStrokeColor(color: ColorValue): this;
     getStrokeColor(): ColorValue;
+    setColorRole(role: ColorRole): this;
+    getColorRole(): ColorRole;
     setStrokeWidth(width: number): this;
     getLinkTo(): string | undefined;
     getStrokeWidth(): number;

package/dist/types/Settings.d.ts

@@ -4,7 +4,7 @@ import { BrowserPath2D } from "./api/BrowserPath2DFactory";
 import { MockDocumentFactory } from "./api/MockDocumentFactory";
 import { MockPath2D } from "./api/MockPath2D";
 import type { BorderStyle } from "./Items/Path/Path";
-import type { Theme } from "./Color/ColorValue";
+import type { Theme, ColorValue } from "./Color/ColorValue";
 export interface Connection {
     connectionId: number;
     getCurrentUser: () => string;
@@ -80,8 +80,8 @@ type ExportFrameDecorationRecord = Record<`${"top" | "bottom"}-${"left" | "right
 export type DefaultTextStyles = {
     fontFamily: string;
     fontSize: number;
-    fontColor: string;
-    fontHighlight: string;
+    fontColor: string | ColorValue;
+    fontHighlight: string | ColorValue;
     lineHeight: number;
     bold: boolean;
     italic: boolean;
@@ -182,7 +182,7 @@ export declare const conf: {
     TEXT_COLORS: string[];
     TEXT_HIGHLIGHT_COLORS: string[];
     STICKER_COLORS: string[];
-    DEFAULT_STICKER_COLOR: string;
+    DEFAULT_STICKER_COLOR: import("./Color").SemanticColor;
     STICKER_COLOR_NAMES: string[];
     SHAPE_STROKE_COLORS: string[];
     SHAPE_DEFAULT_STROKE_COLOR: string;

package/dist/types/Tools/AddDrawing/AddDrawing.d.ts

@@ -4,21 +4,24 @@ import { Drawing } from '../../Items/Drawing';
 import { DrawingContext } from '../../Items/DrawingContext';
 import { BorderStyle } from '../../Items/Path';
 import { BoardTool } from '../BoardTool';
+import { ColorValue } from '../../..';
 export declare class AddDrawing extends BoardTool {
     drawing: Drawing | null;
     isDown: boolean;
     strokeWidth: number;
-    strokeColor: string;
+    strokeColor: ColorValue | string;
     strokeStyle: BorderStyle;
     constructor(board: Board);
     private updateSettings;
     setStrokeWidth(strokeWidth: number): void;
-    setStrokeColor(strokeColor: string): void;
+    setStrokeColor(strokeColor: ColorValue | string): void;
     getStrokeWidth(): number;
-    getStrokeColor(): string;
+    getStrokeColor(): ColorValue | string;
     renderPointerCircle(point: Point, context: DrawingContext): void;
     setCursor(): void;
     isHighlighter(): boolean;
+    /** Apply the correct color role and opacity to a drawing based on tool type. */
+    protected applyDrawingRole(drawing: Drawing): void;
     leftButtonDown(): boolean;
     pointerMoveBy(_x: number, _y: number): boolean;
     leftButtonUp(): boolean;

package/dist/types/Tools/AddDrawing/AddHighlighter.d.ts

@@ -1,11 +1,14 @@
 import { Board } from '../../Board';
+import { Drawing } from '../../Items/Drawing';
 import { BorderStyle } from '../../Items/Path';
+import { ColorValue } from '../../..';
 import { AddDrawing } from './AddDrawing';
 export declare class AddHighlighter extends AddDrawing {
     strokeWidth: number;
-    strokeColor: string;
+    strokeColor: ColorValue | string;
     strokeStyle: BorderStyle;
     constructor(board: Board);
     isHighlighter(): boolean;
+    protected applyDrawingRole(drawing: Drawing): void;
     private updateSettings;
 }

package/dist/types/Tools/AddSticker/AddSticker.d.ts

@@ -2,6 +2,7 @@ import { Board } from '../../Board';
 import { Line, Mbr } from '../../Items';
 import { DrawingContext } from '../../Items/DrawingContext';
 import { Sticker } from '../../Items/Sticker';
+import { ColorValue } from '../../..';
 import { BoardTool } from '../BoardTool';
 export declare class AddSticker extends BoardTool {
     static MIN_SIZE: number;
@@ -11,9 +12,9 @@ export declare class AddSticker extends BoardTool {
     sticker: Sticker;
     isDown: boolean;
     constructor(board: Board);
-    setCursor(color?: string): void;
-    setBackgroundColor(color: string): void;
-    getBackgroundColor(): string;
+    setCursor(color?: ColorValue | string): void;
+    setBackgroundColor(color: ColorValue | string): void;
+    getBackgroundColor(): ColorValue;
     leftButtonDown(): boolean;
     pointerMoveBy(_x: number, _y: number): boolean;
     leftButtonUp(): boolean;

package/package.json

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