fix: theme types (#6423)

* chore: fix theme types

* chore: format

core/block_svg.ts

@@ -241,7 +241,7 @@ export class BlockSvg extends Block implements IASTNodeLocationSvg,
    *
    * @returns #RRGGBB string.
    */
-  getColourSecondary(): string|null {
+  getColourSecondary(): string|undefined {
     return this.style.colourSecondary;
   }
 
@@ -250,7 +250,7 @@ export class BlockSvg extends Block implements IASTNodeLocationSvg,
    *
    * @returns #RRGGBB string.
    */
-  getColourTertiary(): string|null {
+  getColourTertiary(): string|undefined {
     return this.style.colourTertiary;
   }
 

core/field_angle.ts

@@ -228,6 +228,10 @@ export class FieldAngle extends FieldTextInput {
     dropDownDiv.getContentDiv().appendChild(this.editor_ as AnyDuringMigration);
 
     if (this.sourceBlock_ instanceof BlockSvg) {
+      if (!this.sourceBlock_.style.colourTertiary) {
+        throw new Error(
+            'The renderer did not properly initialize the block style');
+      }
       dropDownDiv.setColour(
           this.sourceBlock_.style.colourPrimary,
           this.sourceBlock_.style.colourTertiary);

core/field_dropdown.ts

@@ -285,6 +285,10 @@ export class FieldDropdown extends Field {
       const borderColour = this.sourceBlock_.isShadow() ?
           (this.sourceBlock_.getParent() as BlockSvg).style.colourTertiary :
           (this.sourceBlock_ as BlockSvg).style.colourTertiary;
+      if (!borderColour) {
+        throw new Error(
+            'The renderer did not properly initialize the block style');
+      }
       dropDownDiv.setColour(primaryColour, borderColour);
     }
 
@@ -499,6 +503,14 @@ export class FieldDropdown extends Field {
    */
   override applyColour() {
     const style = (this.sourceBlock_ as BlockSvg).style;
+    if (!style.colourSecondary) {
+      throw new Error(
+          'The renderer did not properly initialize the block style');
+    }
+    if (!style.colourTertiary) {
+      throw new Error(
+          'The renderer did not properly initialize the block style');
+    }
     if (this.borderRect_) {
       this.borderRect_.setAttribute('stroke', style.colourTertiary);
       if (this.menu_) {

core/field_textinput.ts

@@ -216,15 +216,19 @@ export class FieldTextInput extends Field {
    * @internal
    */
   override applyColour() {
-    if (this.sourceBlock_ && this.getConstants()!.FULL_BLOCK_FIELDS) {
-      if (this.borderRect_) {
-        this.borderRect_.setAttribute(
-            'stroke', (this.sourceBlock_ as BlockSvg).style.colourTertiary);
-      } else {
-        (this.sourceBlock_ as BlockSvg)
-            .pathObject.svgPath.setAttribute(
-                'fill', this.getConstants()!.FIELD_BORDER_RECT_COLOUR);
+    if (!this.sourceBlock_ || !this.getConstants()!.FULL_BLOCK_FIELDS) return;
+
+    const source = this.sourceBlock_ as BlockSvg;
+
+    if (this.borderRect_) {
+      if (!source.style.colourTertiary) {
+        throw new Error(
+            'The renderer did not properly initialize the block style');
       }
+      this.borderRect_.setAttribute('stroke', source.style.colourTertiary);
+    } else {
+      source.pathObject.svgPath.setAttribute(
+          'fill', this.getConstants()!.FIELD_BORDER_RECT_COLOUR);
     }
   }
 

core/renderers/common/constants.ts

@@ -563,7 +563,7 @@ export class ConstantProvider {
     this.setComponentConstants_(theme);
 
     this.ADD_START_HATS =
-        theme.startHats !== null ? theme.startHats : this.ADD_START_HATS;
+        theme.startHats !== undefined ? theme.startHats : this.ADD_START_HATS;
   }
 
   /**

core/renderers/common/path_object.ts

@@ -137,6 +137,10 @@ export class PathObject implements IPathObject {
    * @internal
    */
   applyColour(block: BlockSvg) {
+    if (!this.style.colourTertiary) {
+      throw new Error(
+          'The renderer did not properly initialize the block style');
+    }
     this.svgPath.setAttribute('stroke', this.style.colourTertiary);
     this.svgPath.setAttribute('fill', this.style.colourPrimary);
 
@@ -195,6 +199,10 @@ export class PathObject implements IPathObject {
    */
   protected updateShadow_(shadow: boolean) {
     if (shadow) {
+      if (!this.style.colourSecondary) {
+        throw new Error(
+            'The renderer did not properly initialize the block style');
+      }
       this.svgPath.setAttribute('stroke', 'none');
       this.svgPath.setAttribute('fill', this.style.colourSecondary);
     }

core/renderers/zelos/path_object.ts

@@ -77,11 +77,19 @@ export class PathObject extends BasePathObject {
     // Set shadow stroke colour.
     const parent = block.getParent();
     if (block.isShadow() && parent) {
+      if (!parent.style.colourTertiary) {
+        throw new Error(
+            'The renderer did not properly initialize the block style');
+      }
       this.svgPath.setAttribute('stroke', parent.style.colourTertiary);
     }
 
     // Apply colour to outlines.
     for (const outline of this.outlines.values()) {
+      if (!this.style.colourTertiary) {
+        throw new Error(
+            'The renderer did not properly initialize the block style');
+      }
       outline.setAttribute('fill', this.style.colourTertiary);
     }
   }
@@ -175,6 +183,10 @@ export class PathObject extends BasePathObject {
   setOutlinePath(name: string, pathString: string) {
     const outline = this.getOutlinePath_(name);
     outline.setAttribute('d', pathString);
+    if (!this.style.colourTertiary) {
+      throw new Error(
+          'The renderer did not properly initialize the block style');
+    }
     outline.setAttribute('fill', this.style.colourTertiary);
   }
 

core/theme.ts

@@ -17,11 +17,11 @@ import * as object from './utils/object.js';
 
 
 export interface ITheme {
-  blockStyles: {[key: string]: BlockStyle};
-  categoryStyles: {[key: string]: CategoryStyle};
-  componentStyles: ComponentStyle;
-  fontStyle: FontStyle;
-  startHats: boolean|null;
+  blockStyles?: {[key: string]: BlockStyle};
+  categoryStyles?: {[key: string]: CategoryStyle};
+  componentStyles?: ComponentStyle;
+  fontStyle?: FontStyle;
+  startHats?: boolean;
   base?: string|Theme;
   name: string;
 }
@@ -47,7 +47,7 @@ export class Theme implements ITheme {
    *
    * @internal
    */
-  startHats: boolean|null = null;
+  startHats?: boolean = false;
 
   /**
    * @param name Theme name.
@@ -187,8 +187,8 @@ export class Theme implements ITheme {
 export namespace Theme {
   export interface BlockStyle {
     colourPrimary: string;
-    colourSecondary: string;
-    colourTertiary: string;
+    colourSecondary?: string;
+    colourTertiary?: string;
     hat?: string;
   }
 
@@ -197,28 +197,28 @@ export namespace Theme {
   }
 
   export interface ComponentStyle {
-    workspaceBackgroundColour: string|null;
-    toolboxBackgroundColour: string|null;
-    toolboxForegroundColour: string|null;
-    flyoutBackgroundColour: string|null;
-    flyoutForegroundColour: string|null;
-    flyoutOpacity: number|null;
-    scrollbarColour: string|null;
-    scrollbarOpacity: number|null;
-    insertionMarkerColour: string|null;
-    insertionMarkerOpacity: number|null;
-    markerColour: string|null;
-    cursorColour: string|null;
-    selectedGlowColour: string|null;
-    selectedGlowOpacity: number|null;
-    replacementGlowColour: string|null;
-    replacementGlowOpacity: number|null;
+    workspaceBackgroundColour?: string;
+    toolboxBackgroundColour?: string;
+    toolboxForegroundColour?: string;
+    flyoutBackgroundColour?: string;
+    flyoutForegroundColour?: string;
+    flyoutOpacity?: number;
+    scrollbarColour?: string;
+    scrollbarOpacity?: number;
+    insertionMarkerColour?: string;
+    insertionMarkerOpacity?: number;
+    markerColour?: string;
+    cursorColour?: string;
+    selectedGlowColour?: string;
+    selectedGlowOpacity?: number;
+    replacementGlowColour?: string;
+    replacementGlowOpacity?: number;
   }
 
   export interface FontStyle {
-    family: string|null;
-    weight: string|null;
-    size: number|null;
+    family?: string;
+    weight?: string;
+    size?: number;
   }
 }