microboard-temp 0.7.0 → 0.8.1

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"
@@ -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);
@@ -42474,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;
@@ -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()) {
@@ -45108,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;
@@ -45143,6 +45138,7 @@ class Drawing extends BaseItem {
       transformation: this.transformation.serialize(),
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
+      colorRole: this.colorRole,
       linkTo: this.linkTo.serialize()
     };
   }
@@ -45156,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;
   }
@@ -45262,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);
@@ -45289,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);
@@ -45445,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",
@@ -46430,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);
@@ -46485,6 +46493,9 @@ class AddDrawing extends BoardTool {
   isHighlighter() {
     return false;
   }
+  applyDrawingRole(drawing) {
+    drawing.setColorRole("foreground");
+  }
   leftButtonDown() {
     if (this.strokeColor === "none") {
       return false;
@@ -46524,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;
@@ -46565,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);
@@ -46592,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,
@@ -47011,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");
@@ -47022,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/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/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.7.0",
+  "version": "0.8.1",
   "description": "A flexible interactive whiteboard library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",