@trebco/treb 29.4.1 → 29.5.0

package/treb-export/src/import2.ts

@@ -30,12 +30,12 @@ import type { ParseResult } from 'treb-parser';
 import { Parser } from 'treb-parser';
 import type { RangeType, AddressType, HyperlinkType } from './address-type';
 import { is_range, ShiftRange, InRange, is_address } from './address-type';
-import type { ImportedSheetData, AnchoredAnnotation, CellParseResult, AnnotationLayout, Corner as LayoutCorner, IArea, GradientStop, Color } from 'treb-base-types';
+import type { ImportedSheetData, AnchoredAnnotation, CellParseResult, AnnotationLayout, Corner as LayoutCorner, IArea, GradientStop, Color, HTMLColor, ThemeColor } from 'treb-base-types';
 import type { SerializedValueType } from 'treb-base-types';
 import type { Sheet} from './workbook-sheet2';
 import { VisibleState } from './workbook-sheet2';
 import type { CellAnchor } from './drawing2/drawing2';
-import { XMLUtils } from './xml-utils';
+import { type DOMContent, XMLUtils } from './xml-utils';
 
 // import { one_hundred_pixels } from './constants';
 import { ColumnWidthToPixels } from './column-width';
@@ -84,7 +84,7 @@ export class Importer {
       };
       v?: string|number|{
         t$: string;
-        a$?: any;
+        a$?: DOMContent;
       }; 
       f?: string|{ 
         t$: string;
@@ -447,12 +447,12 @@ export class Importer {
 
             const color_element = rule.colorScale.color[index];
             if (color_element.a$.rgb) {
-              color.text = '#' + color_element.a$.rgb.substring(2);
+              (color as HTMLColor).text = '#' + color_element.a$.rgb.substring(2);
             } 
             else if (color_element.a$.theme) {
-              color.theme = Number(color_element.a$.theme) || 0;
+              (color as ThemeColor).theme = Number(color_element.a$.theme) || 0;
               if (color_element.a$.tint) {
-                color.tint = Math.round(color_element.a$.tint * 1000) / 1000;
+                (color as ThemeColor).tint = Math.round(color_element.a$.tint * 1000) / 1000;
               }
             }           
 
@@ -762,15 +762,6 @@ export class Importer {
         row_heights[row_index - 1] = height;
       }
 
-      /*
-      if (row.a$?.ht && row.a$?.customHeight) {
-        const num = Number(row.a$.ht);
-        if (!isNaN(num)) {
-          row_heights[row_index - 1] = Math.round(num * 4 / 3); // seems to be the excel unit -> pixel ratio
-        }
-      }
-      */
-
       let cells = row.c || [];
       if (!Array.isArray(cells)) { cells = [cells]; }
 

package/treb-export/src/workbook-style2.ts

@@ -22,7 +22,7 @@
 // import * as ElementTree from 'elementtree';
 // import { Element, ElementTree as Tree } from 'elementtree';
 
-import { type CompositeBorderEdge, Style, type CellStyle, type PropertyKeys, type Color } from 'treb-base-types';
+import { type CompositeBorderEdge, Style, type CellStyle, type PropertyKeys, type Color, IsHTMLColor, IsThemeColor, type ThemeColor, type HTMLColor, ThemeColorIndex } from 'treb-base-types';
 import { Theme } from './workbook-theme2';
 import { NumberFormatCache } from 'treb-format';
 import { XMLUtils } from './xml-utils';
@@ -85,12 +85,14 @@ export interface CellXf {
 
 }
 
+/*
 interface ColorAttributes {
   indexed?: string;
   rgb?: string;
   theme?: string;
   tint?: string;
 }
+*/
 
 export interface BorderEdge {
   style?: string;
@@ -303,11 +305,11 @@ export class StyleCache {
     //}
 
     if (composite.text) {
-      if (composite.text.text) {
+      if (IsHTMLColor(composite.text)) {
         font.color_argb = composite.text.text;
       }
-      else if (typeof composite.text.theme === 'number') {
-        font.color_theme = composite.text.theme;
+      else if (IsThemeColor(composite.text)) {
+        font.color_theme = ThemeColorIndex(composite.text);
         if (composite.text.tint) {
           font.color_tint = composite.text.tint;
         }
@@ -317,11 +319,11 @@ export class StyleCache {
     const TranslateBorder = (src: CompositeBorderEdge, dest: BorderEdge) => {
       if (src.width) {
         dest.style = 'thin';
-        if (src.color.text) {
+        if (IsHTMLColor(src.color)) {
           dest.rgba =src.color.text;
         }
-        else if (typeof src.color.theme === 'number') {
-          dest.theme = src.color.theme;
+        else if (IsThemeColor(src.color)) {
+          dest.theme = ThemeColorIndex(src.color);
           if (src.color.tint) {
             dest.tint = src.color.tint;
           }
@@ -440,12 +442,12 @@ export class StyleCache {
 
     if (composite.fill) {
       fill.pattern_type = 'solid';
-      if (composite.fill.text) {
+      if (IsHTMLColor(composite.fill)) {
         fill.fg_color = { argb: composite.fill.text };  
         options.fill = fill;
       }
-      else if (typeof composite.fill.theme === 'number') {
-        fill.fg_color = { theme: composite.fill.theme };
+      else if (IsThemeColor(composite.fill)) {
+        fill.fg_color = { theme: ThemeColorIndex(composite.fill) };
         if (composite.fill.tint) {
           fill.fg_color.tint = composite.fill.tint;
         }
@@ -619,7 +621,7 @@ export class StyleCache {
             };
 
             if (fill.fg_color.tint) {
-              props.fill.tint = Math.round(fill.fg_color.tint * 1000) / 1000;
+              (props.fill as ThemeColor).tint = Math.round(fill.fg_color.tint * 1000) / 1000;
             }
 
             /*
@@ -1317,12 +1319,12 @@ export class StyleCache {
     const ParseDXFColor = (element: any) => {
       const color: Color = {};
       if (element.a$.rgb) {
-        color.text = '#' + element.a$.rgb.substring(2);
+        (color as HTMLColor).text = '#' + element.a$.rgb.substring(2);
       }
       else if (element.a$.theme) {
-        color.theme = Number(element.a$.theme) || 0;
+        (color as ThemeColor).theme = Number(element.a$.theme) || 0;
         if (element.a$.tint) {
-          color.tint = Math.round(element.a$.tint * 1000) / 1000;
+          (color as ThemeColor).tint = Math.round(element.a$.tint * 1000) / 1000;
         }
       }
       return color;

package/treb-export/src/workbook2.ts

@@ -28,33 +28,17 @@ const xmlparser2 = new XMLParser(XMLOptions2);
 
 // import * as he from 'he';
 
-//import { Drawing, TwoCellAnchor, CellAnchor } from './drawing/drawing';
 import type { TwoCellAnchor, CellAnchor } from './drawing2/drawing2';
 
-// import { ImportedSheetData, IArea } from 'treb-base-types/src';
 import { SharedStrings } from './shared-strings2';
 import { StyleCache } from './workbook-style2';
 import { Theme } from './workbook-theme2';
 import { Sheet, VisibleState } from './workbook-sheet2';
 import type { RelationshipMap } from './relationship';
 import { ZipWrapper } from './zip-wrapper';
-import type { CellStyle } from 'treb-base-types';
+import type { CellStyle, ThemeColor } from 'treb-base-types';
 import type { SerializedNamed } from 'treb-data-model';
 
-
-/*
-const XMLTypeMap = {
-  'sheet':          'application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml',
-  'theme':          'application/vnd.openxmlformats-officedocument.theme+xml',
-  'drawing':        'application/vnd.openxmlformats-officedocument.drawing+xml',
-  'chart':          'application/vnd.openxmlformats-officedocument.drawingml.chart+xml',
-  'themeOverride':  'application/vnd.openxmlformats-officedocument.themeOverride+xml',
-  'ctrlProp':       'application/vnd.ms-excel.controlproperties+xml',
-  'style':          'application/vnd.ms-office.chartstyle+xml',
-  'colors':         'application/vnd.ms-office.chartcolorstyle+xml',
-};
-*/
-
 export const ConditionalFormatOperators: Record<string, string> = {
   greaterThan: '>',
   greaterThanOrEquals: '>=',
@@ -413,7 +397,7 @@ export class Workbook {
                   if (fill['a:schemeClr']['a:lumOff']?.a$?.val) {
                     const num = Number(fill['a:schemeClr']['a:lumOff'].a$.val);
                     if (!isNaN(num)) {
-                      style.fill.tint = num / 1e5;
+                      (style.fill as ThemeColor).tint = num / 1e5;
                     }
                   }
                 }

package/treb-export/src/xml-utils.ts

@@ -20,14 +20,62 @@
  */
 
 import { Unescape } from './unescape_xml';
-import type { X2jOptions } from 'fast-xml-parser';
+import { type X2jOptions, XMLBuilder, type XmlBuilderOptions } from 'fast-xml-parser';
 
 export const XMLTagProcessor = (name: string, value: string): string => Unescape(value);
 
 export interface DOMContent {
-  [index: string]: string|DOMContent|string[]|DOMContent[]|number|number[];
+  [index: string]: string|DOMContent|string[]|DOMContent[]|number|number[]|undefined;
 }
 
+/**
+ * not sure why we have to do this, but filter attributes that 
+ * have value === undefined
+ */
+export const ScrubXML = (dom: DOMContent) => {
+  if (dom) {
+    if (Array.isArray(dom)) {
+      for (const entry of dom) {
+        ScrubXML(entry);
+      }
+    }
+    else if (typeof dom === 'object') {
+      for (const [key, value] of Object.entries(dom)) {
+        if (key === 'a$') {
+          if (typeof value === 'object') {
+            const replacement: DOMContent = {};
+            for (const [attr_name, attr_value] of Object.entries(value)) {
+              if (attr_value !== undefined) {
+                replacement[attr_name] = attr_value;
+              }
+            }
+            dom[key] = replacement;
+          }
+        }
+        else {
+          ScrubXML(value as DOMContent);
+        }
+      }
+    }
+  }
+  return dom;
+};
+
+export const PatchXMLBuilder = (options: Partial<XmlBuilderOptions>) => {
+
+  const builder = new XMLBuilder(options);
+  const build = builder.build;
+
+  builder.build = (arg: DOMContent) => {
+    return build.call(builder, ScrubXML(arg)); // get the "this" value right
+  }
+
+  return builder;
+
+};
+
+//////////////////
+
 export const XMLOptions: Partial<X2jOptions> = {
   ignoreAttributes: false,
   attributeNamePrefix: '__',

package/treb-export/src/zip-wrapper.ts

@@ -58,7 +58,7 @@ export class ZipWrapper {
   public Set(path: string, text: string) {
 
     this.text.set(path, text);
-    if (!!this.records[path]) {
+    if (this.records[path]) {
       delete this.records[path];
     }
   }

package/treb-grid/src/editors/overlay_editor.ts

@@ -20,7 +20,7 @@
  */
 
 import { Editor, type NodeDescriptor } from './editor';
-import { Area, Cell, type CellStyle, type CellValue, Rectangle, Style, type Theme, ThemeColor2 } from 'treb-base-types';
+import { Area, Cell, type CellStyle, type CellValue, Rectangle, Style, type Theme, ResolveThemeColor } from 'treb-base-types';
 import { DataModel, type ViewModel, type GridSelection } from 'treb-data-model';
 import { Autocomplete } from './autocomplete';
 import { UA } from '../util/ua';
@@ -287,8 +287,8 @@ export class OverlayEditor extends Editor<ResetSelectionEvent> {
     const style: CellStyle = cell.style || {};
 
     this.edit_node.style.font = Style.Font(style, this.scale);
-    this.edit_node.style.color = ThemeColor2(this.theme, style.text, 1);
-    this.edit_inset.style.backgroundColor = ThemeColor2(this.theme, style.fill, 0);
+    this.edit_node.style.color = ResolveThemeColor(this.theme, style.text, 1);
+    this.edit_inset.style.backgroundColor = ResolveThemeColor(this.theme, style.fill, 0);
 
     // NOTE: now that we dropped support for IE11, we can probably 
     // remove more than one class at the same time.

package/treb-grid/src/layout/base_layout.ts

@@ -24,7 +24,7 @@ import type { DataModel, ViewModel, Annotation } from 'treb-data-model';
 
 import type { Tile } from '../types/tile';
 import type { Theme, Point, Extent, Size, Position, ICellAddress, Table, IArea } from 'treb-base-types';
-import { Style, Area, Rectangle, ThemeColor } from 'treb-base-types';
+import { Style, Area, Rectangle, ResolveThemeColor } from 'treb-base-types';
 
 import { MouseDrag } from '../types/drag_mask';
 import type { GridEvent } from '../types/grid_events';
@@ -1279,7 +1279,7 @@ export abstract class BaseLayout {
     this.row_header.style.backgroundColor =
       this.column_header.style.backgroundColor =
       this.corner.style.backgroundColor =
-      theme.headers?.fill ? ThemeColor(theme, theme.headers.fill) : '';
+      theme.headers?.fill ? ResolveThemeColor(theme, theme.headers.fill, 0) : '';
 
     // theme.headers?.background || '';
     // theme.header_background_color || ''; // this.theme.header_background;
@@ -1291,7 +1291,7 @@ export abstract class BaseLayout {
 
     for (const row of this.grid_tiles) {
       for (const tile of row) {
-        tile.style.backgroundColor = ThemeColor(theme, theme.grid_cell?.fill) || '#fff';
+        tile.style.backgroundColor = ResolveThemeColor(theme, theme.grid_cell?.fill, 0) || '#fff';
       }
     }
 

package/treb-grid/src/render/tile_renderer.ts

@@ -25,7 +25,7 @@ import type { ICellAddress,
          CellStyle,
          Theme,
          HorizontalAlign} from 'treb-base-types';
-import { TextPartFlag, Style, ValueType, Area, Rectangle, ThemeColor, ThemeColor2 } from 'treb-base-types';
+import { TextPartFlag, Style, ValueType, Area, Rectangle, ResolveThemeColor, IsDefinedColor } from 'treb-base-types';
 
 import type { Tile } from '../types/tile';
 import { FontMetricsCache as FontMetricsCache2 } from '../util/fontmetrics2';
@@ -307,7 +307,7 @@ export class TileRenderer {
     }
 
     context.setTransform(scale, 0, 0, scale, 0, 0);
-    context.fillStyle = this.theme.headers?.fill ? ThemeColor2(this.theme, this.theme.headers.fill) : '';
+    context.fillStyle = this.theme.headers?.fill ? ResolveThemeColor(this.theme, this.theme.headers.fill) : '';
 
     context.fillRect(0, 0, x, header_size.y);
     context.fillRect(0, 0, header_size.x, y);
@@ -354,7 +354,7 @@ export class TileRenderer {
     context.textBaseline = 'middle';
     context.font = Style.Font(this.theme.headers||{}, this.layout.scale);
 
-    context.fillStyle = ThemeColor2(this.theme, this.theme.headers?.text);
+    context.fillStyle = ResolveThemeColor(this.theme, this.theme.headers?.text);
 
     if (this.view.active_sheet.freeze.rows && this.layout.header_offset.x > 1) {
 
@@ -407,7 +407,7 @@ export class TileRenderer {
       return;
     }
 
-    context.fillStyle = ThemeColor2(this.theme, this.theme.headers?.text, 0);
+    context.fillStyle = ResolveThemeColor(this.theme, this.theme.headers?.text, 0);
 
     context.beginPath();
 
@@ -434,7 +434,7 @@ export class TileRenderer {
       return;
     }
     
-    context.fillStyle = ThemeColor2(this.theme, this.theme.headers?.text, 0);
+    context.fillStyle = ResolveThemeColor(this.theme, this.theme.headers?.text, 0);
     
     context.beginPath();
 
@@ -473,7 +473,7 @@ export class TileRenderer {
         context.textBaseline = 'middle';
         context.font = Style.Font(this.theme.headers||{}, this.layout.scale);
 
-        context.fillStyle = this.theme.headers?.fill ? ThemeColor2(this.theme, this.theme.headers.fill) : '';
+        context.fillStyle = this.theme.headers?.fill ? ResolveThemeColor(this.theme, this.theme.headers.fill) : '';
         context.fillRect(0, 0, tile.logical_size.width, this.layout.header_offset.y);
 
         // context.strokeStyle = this.theme.grid_color || '';
@@ -507,7 +507,7 @@ export class TileRenderer {
 
         const context = tile.getContext('2d', { alpha: false });
         if (!context) continue;
-        context.fillStyle = this.theme.headers?.fill ? ThemeColor2(this.theme, this.theme.headers.fill) : '';
+        context.fillStyle = this.theme.headers?.fill ? ResolveThemeColor(this.theme, this.theme.headers.fill) : '';
 
         context.setTransform(scale, 0, 0, scale, 0, 0);
 
@@ -1065,7 +1065,7 @@ export class TileRenderer {
   protected ResolveColors(style: CellStyle): CellStyle {
 
     const resolved = {...style};
-    resolved.text = { text: ThemeColor2(this.theme, style.text, 1) };
+    resolved.text = { text: ResolveThemeColor(this.theme, style.text, 1) };
 
     // TODO: other colors
 
@@ -1126,7 +1126,7 @@ export class TileRenderer {
 
     // paint top background
 
-    let color = ThemeColor2(this.theme, numpad[8].fill);
+    let color = ResolveThemeColor(this.theme, numpad[8].fill);
     if (color) {
       context.fillStyle = color
       context.fillRect(left + 0, top - 1, width, 1);
@@ -1134,7 +1134,7 @@ export class TileRenderer {
 
     // paint left background
 
-    color = ThemeColor2(this.theme, numpad[4].fill);
+    color = ResolveThemeColor(this.theme, numpad[4].fill);
     if (color) {
       context.fillStyle = color
       context.fillRect(left - 1, top, 1, height);
@@ -1142,7 +1142,7 @@ export class TileRenderer {
 
     // paint our background. note this one goes up, left
 
-    color = ThemeColor2(this.theme, style.fill);
+    color = ResolveThemeColor(this.theme, style.fill);
     if (color) {
       context.fillStyle = color;
       context.fillRect(left - 1, top - 1, width + 1, height + 1);
@@ -1150,7 +1150,7 @@ export class TileRenderer {
 
     // fill of cell to the right
 
-    color = ThemeColor2(this.theme, numpad[6].fill);
+    color = ResolveThemeColor(this.theme, numpad[6].fill);
     if (color) {
       context.fillStyle = color;
       context.fillRect(left + width - 1, top - 1, 1, height + 1);
@@ -1159,7 +1159,7 @@ export class TileRenderer {
 
     // fill of cell underneath
 
-    color = ThemeColor2(this.theme, numpad[2].fill);
+    color = ResolveThemeColor(this.theme, numpad[2].fill);
     if (color) {
       context.fillStyle = color;
       context.fillRect(left - 1, top + height - 1, width + 1, 1);
@@ -1168,54 +1168,54 @@ export class TileRenderer {
     // --- corner borders ------------------------------------------------------
 
     if (numpad[6].border_top && !numpad[6].border_left) {
-      context.fillStyle = ThemeColor2(this.theme, numpad[6].border_top_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, numpad[6].border_top_fill, 1);
       context.fillRect(left + width - 1, top - 2 + numpad[6].border_top, 1, 1);
     }
     if (numpad[9].border_left) {
-      context.fillStyle = ThemeColor2(this.theme, numpad[9].border_left_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, numpad[9].border_left_fill, 1);
       context.fillRect(left + width - 1, top - 1, 1, 1);
     }
     if (numpad[9].border_bottom) {
-      context.fillStyle = ThemeColor2(this.theme, numpad[9].border_bottom_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, numpad[9].border_bottom_fill, 1);
       context.fillRect(left + width - 1, top - 2 + numpad[9].border_bottom, 1, 1);
     }
 
     if (numpad[4].border_top && !numpad[4].border_right) {
-      context.fillStyle = ThemeColor2(this.theme, numpad[4].border_right_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, numpad[4].border_right_fill, 1);
       context.fillRect(left - 1, top - 2 + numpad[4].border_top, 1, 1);
     }
     if (numpad[7].border_right) {
-      context.fillStyle = ThemeColor2(this.theme, numpad[7].border_right_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, numpad[7].border_right_fill, 1);
       context.fillRect(left - 1, top - 1, 1, 1);
     }
     if (numpad[7].border_bottom) {
-      context.fillStyle = ThemeColor2(this.theme, numpad[7].border_bottom_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, numpad[7].border_bottom_fill, 1);
       context.fillRect(left - 1, top - 2 + numpad[7].border_bottom, 1, 1);
     }
 
     if (numpad[6].border_bottom && !numpad[6].border_left) {
-      context.fillStyle = ThemeColor2(this.theme, numpad[6].border_bottom_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, numpad[6].border_bottom_fill, 1);
       context.fillRect(left + width - 1, top + height - numpad[6].border_bottom, 1, 1);
     }
     if (numpad[3].border_left) {
-      context.fillStyle = ThemeColor2(this.theme, numpad[3].border_left_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, numpad[3].border_left_fill, 1);
       context.fillRect(left + width - 1, top + height - 1, 1, 1);
     }
     if (numpad[3].border_top) {
-      context.fillStyle = ThemeColor2(this.theme, numpad[3].border_top_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, numpad[3].border_top_fill, 1);
       context.fillRect(left + width - 1, top + height - numpad[3].border_top, 1, 1);
     }
 
     if (numpad[4].border_bottom && !numpad[4].border_right) {
-      context.fillStyle = ThemeColor2(this.theme, numpad[4].border_bottom_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, numpad[4].border_bottom_fill, 1);
       context.fillRect(left - 1, top + height - numpad[4].border_bottom, 1, 1);
     }
     if (numpad[1].border_right) {
-      context.fillStyle = ThemeColor2(this.theme, numpad[1].border_right_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, numpad[1].border_right_fill, 1);
       context.fillRect(left - 1, top + height - 1, 1, 1);
     }
     if (numpad[1].border_top) {
-      context.fillStyle = ThemeColor2(this.theme, numpad[1].border_top_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, numpad[1].border_top_fill, 1);
       context.fillRect(left - 1, top + height - numpad[1].border_top, 1, 1);
     }
 
@@ -1224,12 +1224,12 @@ export class TileRenderer {
     // paint top border
 
     if (numpad[8].border_bottom) {
-      context.fillStyle = ThemeColor2(this.theme, numpad[8].border_bottom_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, numpad[8].border_bottom_fill, 1);
       if (numpad[8].border_bottom === 2) {
         context.fillRect(left - 1, top - 2, width + 1, 1);
         context.fillRect(left - 1, top - 0, width + 1, 1);
-        context.fillStyle = ThemeColor2(this.theme, numpad[8].fill) 
-          || ThemeColor(this.theme, this.theme.grid_cell?.fill) || '#fff';
+        context.fillStyle = ResolveThemeColor(this.theme, numpad[8].fill) 
+          || ResolveThemeColor(this.theme, this.theme.grid_cell?.fill, 0) || '#fff';
         context.fillRect(left - 1, top - 1, width + 1, 1);
       }
       else {
@@ -1240,26 +1240,26 @@ export class TileRenderer {
     // paint left border
 
     if (numpad[4].border_right) {
-      context.fillStyle = ThemeColor2(this.theme, numpad[4].border_right_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, numpad[4].border_right_fill, 1);
       context.fillRect(left - 1, top - 1, 1, height + 1);
     }
 
     // paint right border?
 
     if (numpad[6].border_left) {
-      context.fillStyle = ThemeColor2(this.theme, numpad[6].border_left_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, numpad[6].border_left_fill, 1);
       context.fillRect(left + width - 1, top - 1, 1, height + 1);
     }
 
     // bottom? (...)
 
     if (numpad[2].border_top) {
-      context.fillStyle = ThemeColor2(this.theme, numpad[2].border_top_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, numpad[2].border_top_fill, 1);
       if (numpad[2].border_top === 2) {
         context.fillRect(left - 1, top + height - 2, width + 1, 1);
         context.fillRect(left - 1, top + height - 0, width + 1, 1);
-        context.fillStyle = ThemeColor2(this.theme, numpad[2].fill) 
-          || ThemeColor(this.theme, this.theme.grid_cell?.fill) || '#fff';
+        context.fillStyle = ResolveThemeColor(this.theme, numpad[2].fill) 
+          || ResolveThemeColor(this.theme, this.theme.grid_cell?.fill, 0) || '#fff';
         context.fillRect(left - 1, top + height - 1, width + 1, 1);
       }
       else {
@@ -1270,12 +1270,12 @@ export class TileRenderer {
     // -- our borders ----------------------------------------------------------
 
     if (style.border_top) {
-      context.fillStyle = ThemeColor2(this.theme, style.border_top_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, style.border_top_fill, 1);
       if (style.border_top === 2) {
         context.fillRect(left - 1, top - 2, width + 1, 1);
         context.fillRect(left - 1, top + 0, width + 1, 1);
-        context.fillStyle = ThemeColor2(this.theme, style.fill) 
-          || ThemeColor(this.theme, this.theme.grid_cell?.fill) || '#fff';
+        context.fillStyle = ResolveThemeColor(this.theme, style.fill) 
+          || ResolveThemeColor(this.theme, this.theme.grid_cell?.fill, 0) || '#fff';
         context.fillRect(left - 1, top - 1, width + 1, 1);
       }
       else {
@@ -1284,22 +1284,22 @@ export class TileRenderer {
     }
 
     if (style.border_left) {
-      context.fillStyle = ThemeColor2(this.theme, style.border_left_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, style.border_left_fill, 1);
       context.fillRect(left - 1, top - 1, 1, height + 1);
     }
 
     if (style.border_right) {
-      context.fillStyle = ThemeColor2(this.theme, style.border_right_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, style.border_right_fill, 1);
       context.fillRect(left + width - 1, top - 1, 1, height + 1);
     }
 
     if (style.border_bottom) {
-      context.fillStyle = ThemeColor2(this.theme, style.border_bottom_fill, 1);
+      context.fillStyle = ResolveThemeColor(this.theme, style.border_bottom_fill, 1);
       if (style.border_bottom === 2) {
         context.fillRect(left - 1, top + height - 2, width + 1, 1);
         context.fillRect(left - 1, top + height + 0, width + 1, 1);
-        context.fillStyle = ThemeColor2(this.theme, style.fill) 
-          || ThemeColor(this.theme, this.theme.grid_cell?.fill) || '#fff';
+        context.fillStyle = ResolveThemeColor(this.theme, style.fill) 
+          || ResolveThemeColor(this.theme, this.theme.grid_cell?.fill, 0) || '#fff';
         context.fillRect(left - 1, top + height - 1, width + 1, 1);
       }
       else {
@@ -1412,14 +1412,14 @@ export class TileRenderer {
     }
     else {
 
-      const fill = ThemeColor2(this.theme, style.fill);
+      const fill = ResolveThemeColor(this.theme, style.fill);
 
       if (fill) {
         context.fillStyle = fill;
         context.fillRect(0, 0, width - 1, height - 1);
       }
       else {
-        context.fillStyle = ThemeColor(this.theme, this.theme.grid_cell?.fill) || '#fff';
+        context.fillStyle = ResolveThemeColor(this.theme, this.theme.grid_cell?.fill, 0) || '#fff';
         context.fillRect(0, 0, width - 1, height - 1);
       }
 
@@ -1578,7 +1578,7 @@ export class TileRenderer {
         width, 
         height);
 
-      context.strokeStyle = context.fillStyle = ThemeColor2(this.theme, style.text, 1);
+      context.strokeStyle = context.fillStyle = ResolveThemeColor(this.theme, style.text, 1);
 
       // there's an issue with theme colors, the function may not be able
       // to translate so we need to update the style (using a copy) to
@@ -1871,10 +1871,11 @@ export class TileRenderer {
     for (const element of overflow_backgrounds) {
 
       if ( element.cell.style?.fill &&
-           (element.cell.style.fill.text || element.cell.style.fill.theme || element.cell.style.fill.theme === 0) &&
+            IsDefinedColor(element.cell.style.fill) &&
+          // (element.cell.style.fill.text || element.cell.style.fill.theme || element.cell.style.fill.theme === 0) &&
           !this.options.grid_over_background) {
         
-        context.fillStyle = ThemeColor(this.theme, element.cell.style.fill);
+        context.fillStyle = ResolveThemeColor(this.theme, element.cell.style.fill, 0);
         context.fillRect(element.grid.left, element.grid.top, element.grid.width, element.grid.height);
       }
       else {
@@ -1894,7 +1895,7 @@ export class TileRenderer {
                 0 );
         }
         else {
-          context.fillStyle = this.theme.grid_cell?.fill ? ThemeColor(this.theme, this.theme.grid_cell.fill) : '';
+          context.fillStyle = this.theme.grid_cell?.fill ? ResolveThemeColor(this.theme, this.theme.grid_cell.fill, 0) : '';
           context.fillRect(element.background.left, element.background.top,
             element.background.width, element.background.height);
         }
@@ -1924,7 +1925,7 @@ export class TileRenderer {
     context.lineWidth = 1;
 
     context.strokeStyle = context.fillStyle =
-      text_data.format ? text_data.format : ThemeColor2(this.theme, style.text, 1);
+      text_data.format ? text_data.format : ResolveThemeColor(this.theme, style.text, 1);
 
     context.beginPath();