[FIX] *: use Color alias wherever we work with color strings

Part-of: #2300

src/components/collaborative_client_tag/collaborative_client_tag.ts

@@ -1,12 +1,12 @@
 import { Component } from "@odoo/owl";
 import { DEFAULT_FONT_SIZE } from "../../constants";
-import { HeaderIndex, SpreadsheetChildEnv } from "../../types";
+import { Color, HeaderIndex, SpreadsheetChildEnv } from "../../types";
 import { css } from "../helpers/css";
 
 interface ClientTagProps {
   active: boolean;
   name: string;
-  color: string;
+  color: Color;
   col: HeaderIndex;
   row: HeaderIndex;
 }

src/components/composer/composer/composer.ts

@@ -4,7 +4,13 @@ import { EnrichedToken } from "../../../formulas/index";
 import { functionRegistry } from "../../../functions/index";
 import { isEqual, rangeReference, splitReference, zoneToDimension } from "../../../helpers/index";
 import { ComposerSelection, SelectionIndicator } from "../../../plugins/ui_stateful/edition";
-import { DOMDimension, FunctionDescription, Rect, SpreadsheetChildEnv } from "../../../types/index";
+import {
+  Color,
+  DOMDimension,
+  FunctionDescription,
+  Rect,
+  SpreadsheetChildEnv,
+} from "../../../types/index";
 import { css } from "../../helpers/css";
 import { updateSelectionWithArrowKeys } from "../../helpers/selection_helpers";
 import { TextValueProvider } from "../autocomplete_dropdown/autocomplete_dropdown";
@@ -26,7 +32,7 @@ export const SelectionIndicatorClass = "selector-flag";
 
 export type HtmlContent = {
   value: string;
-  color?: string;
+  color?: Color;
   class?: string;
 };
 
@@ -516,7 +522,7 @@ export class Composer extends Component<Props, SpreadsheetChildEnv> {
     return result;
   }
 
-  private rangeColor(xc: string, sheetName?: string): string | undefined {
+  private rangeColor(xc: string, sheetName?: string): Color | undefined {
     if (this.props.focus === "inactive") {
       return undefined;
     }

src/components/highlight/corner/corner.ts

@@ -1,6 +1,6 @@
 import { Component } from "@odoo/owl";
 import { AUTOFILL_EDGE_LENGTH } from "../../../constants";
-import { SpreadsheetChildEnv, Zone } from "../../../types";
+import { Color, SpreadsheetChildEnv, Zone } from "../../../types";
 import { css } from "../../helpers/css";
 
 css/* scss */ `
@@ -31,7 +31,7 @@ type Orientation = "nw" | "ne" | "sw" | "se";
 
 interface Props {
   zone: Zone;
-  color: string;
+  color: Color;
   orientation: Orientation;
   isResizing: boolean;
   onResizeHighlight: (isLeft: boolean, isRight: boolean) => void;

src/components/highlight/highlight/highlight.ts

@@ -1,7 +1,7 @@
 import { Component, useState } from "@odoo/owl";
 import { ComponentsImportance } from "../../../constants";
 import { clip, isEqual } from "../../../helpers";
-import { Pixel, SpreadsheetChildEnv, Zone } from "../../../types";
+import { Color, Pixel, SpreadsheetChildEnv, Zone } from "../../../types";
 import { css } from "../../helpers/css";
 import { gridOverlayPosition } from "../../helpers/dom_helpers";
 import { dragAndDropBeyondTheViewport } from "../../helpers/drag_and_drop";
@@ -16,7 +16,7 @@ css/*SCSS*/ `
 
 interface Props {
   zone: Zone;
-  color: string;
+  color: Color;
 }
 
 interface HighlightState {

src/components/selection_input/selection_input.ts

@@ -2,7 +2,7 @@ import { Component, onMounted, onPatched, onWillUnmount, useState } from "@odoo/
 import { SELECTION_BORDER_COLOR } from "../../constants";
 import { UuidGenerator } from "../../helpers/index";
 import { RangeInputValue } from "../../plugins/ui_feature/selection_input";
-import { SpreadsheetChildEnv } from "../../types";
+import { Color, SpreadsheetChildEnv } from "../../types";
 import { css } from "../helpers/css";
 import { updateSelectionWithArrowKeys } from "../helpers/selection_helpers";
 
@@ -74,7 +74,7 @@ interface State {
 interface SelectionRange extends Omit<RangeInputValue, "color"> {
   isFocused: boolean;
   isValidRange: boolean;
-  color?: string;
+  color?: Color;
 }
 /**
  * This component can be used when the user needs to input some

src/components/side_panel/chart/gauge_chart_panel/gauge_chart_design_panel.ts

@@ -1,7 +1,13 @@
 import { Component, useState } from "@odoo/owl";
 import { deepCopy } from "../../../../helpers/index";
 import { GaugeChartDefinition, SectionRule } from "../../../../types/chart/gauge_chart";
-import { CommandResult, DispatchResult, SpreadsheetChildEnv, UID } from "../../../../types/index";
+import {
+  Color,
+  CommandResult,
+  DispatchResult,
+  SpreadsheetChildEnv,
+  UID,
+} from "../../../../types/index";
 import { ColorPicker } from "../../../color_picker/color_picker";
 import { css } from "../../../helpers/css";
 import { ChartTerms } from "../../../translations_terms";
@@ -81,7 +87,7 @@ export class GaugeChartDesignPanel extends Component<Props, SpreadsheetChildEnv>
     );
   }
 
-  updateBackgroundColor(color: string) {
+  updateBackgroundColor(color: Color) {
     this.state.openedMenu = undefined;
     this.props.updateChart({
       background: color,
@@ -152,7 +158,7 @@ export class GaugeChartDesignPanel extends Component<Props, SpreadsheetChildEnv>
     this.updateSectionRule(sectionRule);
   }
 
-  updateSectionColor(target: string, color: string) {
+  updateSectionColor(target: string, color: Color) {
     const sectionRule = deepCopy(this.props.definition.sectionRule);
     sectionRule.colors[target] = color;
     this.updateSectionRule(sectionRule);

src/components/side_panel/chart/line_bar_pie_panel/design_panel.ts

@@ -2,7 +2,7 @@ import { Component, useExternalListener, useState } from "@odoo/owl";
 import { BarChartDefinition } from "../../../../types/chart/bar_chart";
 import { LineChartDefinition } from "../../../../types/chart/line_chart";
 import { PieChartDefinition } from "../../../../types/chart/pie_chart";
-import { CommandResult, SpreadsheetChildEnv, UID } from "../../../../types/index";
+import { Color, CommandResult, SpreadsheetChildEnv, UID } from "../../../../types/index";
 import { ColorPicker } from "../../../color_picker/color_picker";
 
 interface Props {
@@ -37,7 +37,7 @@ export class LineBarPieDesignPanel extends Component<Props, SpreadsheetChildEnv>
     this.state.fillColorTool = !this.state.fillColorTool;
   }
 
-  updateBackgroundColor(color: string) {
+  updateBackgroundColor(color: Color) {
     this.props.updateChart({
       background: color,
     });

src/components/side_panel/chart/scorecard_chart_panel/scorecard_chart_design_panel.ts

@@ -1,6 +1,6 @@
 import { Component, useState } from "@odoo/owl";
 import { ScorecardChartDefinition } from "../../../../types/chart/scorecard_chart";
-import { DispatchResult, SpreadsheetChildEnv, UID } from "../../../../types/index";
+import { Color, DispatchResult, SpreadsheetChildEnv, UID } from "../../../../types/index";
 import { ColorPicker } from "../../../color_picker/color_picker";
 
 type ColorPickerId = undefined | "backgroundColor" | "baselineColorUp" | "baselineColorDown";
@@ -37,7 +37,7 @@ export class ScorecardChartDesignPanel extends Component<Props, SpreadsheetChild
     this.state.openedColorPicker = colorPickerId;
   }
 
-  setColor(color: string, colorPickerId: ColorPickerId) {
+  setColor(color: Color, colorPickerId: ColorPickerId) {
     switch (colorPickerId) {
       case "backgroundColor":
         this.props.updateChart({ background: color });

src/components/side_panel/conditional_formatting/conditional_formatting.ts

@@ -5,6 +5,7 @@ import { _t } from "../../../translation";
 import {
   CancelledReason,
   CellIsRule,
+  Color,
   ColorScaleRule,
   ColorScaleThreshold,
   CommandResult,
@@ -634,7 +635,7 @@ export class ConditionalFormattingPanel extends Component<Props, SpreadsheetChil
     this.closeMenus();
   }
 
-  setColor(target: string, color: string) {
+  setColor(target: string, color: Color) {
     this.state.rules.cellIs.style[target] = color;
     this.closeMenus();
   }
@@ -669,7 +670,7 @@ export class ConditionalFormattingPanel extends Component<Props, SpreadsheetChil
     }
   }
 
-  setColorScaleColor(target: string, color: string) {
+  setColorScaleColor(target: string, color: Color) {
     const point = this.state.rules.colorScale[target];
     if (point) {
       point.color = Number.parseInt(color.substr(1), 16);

src/components/top_bar/top_bar.ts

@@ -18,6 +18,7 @@ import { FullMenuItem } from "../../registries/menu_items_registry";
 import {
   Align,
   BorderCommand,
+  Color,
   Format,
   Pixel,
   SetDecimalStep,
@@ -325,8 +326,8 @@ export class TopBar extends Component<Props, SpreadsheetChildEnv> {
   undoTool = false;
   redoTool = false;
   paintFormatTool = false;
-  fillColor: string = "#ffffff";
-  textColor: string = "#000000";
+  fillColor: Color = "#ffffff";
+  textColor: Color = "#000000";
   menus: FullMenuItem[] = [];
   composerStyle = `
     line-height: 34px;
@@ -474,7 +475,7 @@ export class TopBar extends Component<Props, SpreadsheetChildEnv> {
     }
   }
 
-  setColor(target: string, color: string) {
+  setColor(target: string, color: Color) {
     setStyle(this.env, { [target]: color });
     this.onClick();
   }

src/constants.ts

@@ -1,5 +1,5 @@
 import { _lt } from "./translation";
-import { BorderDescr } from "./types";
+import { BorderDescr, Color } from "./types";
 import { CellErrorType } from "./types/errors";
 
 export const CANVAS_SHIFT = 0.5;
@@ -23,7 +23,7 @@ export const BACKGROUND_HEADER_FILTER_COLOR = "#E6F4EA";
 export const BACKGROUND_HEADER_SELECTED_FILTER_COLOR = "#CEEAD6";
 
 // Color picker defaults as upper case HEX to match `toHex`helper
-export const COLOR_PICKER_DEFAULTS = [
+export const COLOR_PICKER_DEFAULTS: Color[] = [
   "#000000",
   "#434343",
   "#666666",

src/helpers/figures/charts/gauge_chart.ts

@@ -328,7 +328,7 @@ export function createGaugeChartRuntime(chart: GaugeChart, getters: Getters): Ga
   }
 
   const data: number[] = [];
-  const backgroundColor: string[] = [];
+  const backgroundColor: Color[] = [];
   needleInflectionPoint
     .sort((a, b) => a.value - b.value)
     .map((point) => {

src/helpers/figures/charts/pie_chart.ts

@@ -208,8 +208,8 @@ function getPieConfiguration(chart: PieChart, labels: string[]): ChartConfigurat
   return config;
 }
 
-function getPieColors(colors: ChartColors, dataSetsValues: DatasetValues[]): string[] {
-  const pieColors: string[] = [];
+function getPieColors(colors: ChartColors, dataSetsValues: DatasetValues[]): Color[] {
+  const pieColors: Color[] = [];
   const maxLength = Math.max(...dataSetsValues.map((ds) => ds.data.length));
   for (let i = 0; i <= maxLength; i++) {
     pieColors.push(colors.next());

src/plugins/ui_feature/find_and_replace.ts

@@ -1,6 +1,7 @@
 import { escapeRegExp } from "../../helpers";
 import {
   CellPosition,
+  Color,
   Command,
   GridRenderingContext,
   HeaderIndex,
@@ -9,8 +10,8 @@ import {
 } from "../../types/index";
 import { UIPlugin } from "../ui_plugin";
 
-const BORDER_COLOR: string = "#8B008B";
-const BACKGROUND_COLOR: string = "#8B008B33";
+const BORDER_COLOR: Color = "#8B008B";
+const BACKGROUND_COLOR: Color = "#8B008B33";
 
 export interface SearchOptions {
   matchCase: boolean;

src/plugins/ui_feature/selection_input.ts

@@ -7,13 +7,13 @@ import {
 } from "../../helpers/index";
 import { StreamCallbacks } from "../../selection_stream/event_stream";
 import { SelectionEvent } from "../../types/event_stream";
-import { Command, CommandResult, Highlight, LAYERS, UID } from "../../types/index";
+import { Color, Command, CommandResult, Highlight, LAYERS, UID } from "../../types/index";
 import { UIPlugin, UIPluginConfig } from "../ui_plugin";
 
 export interface RangeInputValue {
   id: UID;
   xc: string;
-  color: string;
+  color: Color;
 }
 
 /**

src/plugins/ui_feature/selection_multiuser.ts

@@ -1,6 +1,6 @@
 import { ClientDisconnectedError } from "../../collaborative/session";
 import { DEFAULT_FONT, DEFAULT_FONT_SIZE } from "../../constants";
-import { Client, ClientPosition, GridRenderingContext, LAYERS, UID } from "../../types";
+import { Client, ClientPosition, Color, GridRenderingContext, LAYERS, UID } from "../../types";
 import { UIPlugin } from "../ui_plugin";
 
 function randomChoice(arr: string[]): string {
@@ -23,14 +23,14 @@ const colors = [
 ];
 
 interface ClientToDisplay extends Required<Client> {
-  color: string;
+  color: Color;
 }
 
 export class SelectionMultiUserPlugin extends UIPlugin {
   static getters = ["getClientsToDisplay"] as const;
   static layers = [LAYERS.Selection];
   private availableColors = new Set(colors);
-  private colors: Record<UID, string> = {};
+  private colors: Record<UID, Color> = {};
 
   private isPositionValid(position: ClientPosition): boolean {
     return (
@@ -39,7 +39,7 @@ export class SelectionMultiUserPlugin extends UIPlugin {
     );
   }
 
-  private chooseNewColor(): string {
+  private chooseNewColor(): Color {
     if (this.availableColors.size === 0) {
       this.availableColors = new Set(colors);
     }

src/registries/menu_items_registry.ts

@@ -1,4 +1,4 @@
-import { SpreadsheetChildEnv } from "../types";
+import { Color, SpreadsheetChildEnv } from "../types";
 import { Registry } from "./registry";
 
 //------------------------------------------------------------------------------
@@ -36,7 +36,7 @@ export interface MenuItem {
   children?: menuChildren;
   separator?: boolean;
   icon?: string;
-  textColor?: string;
+  textColor?: Color;
 }
 
 export type FullMenuItem = Required<MenuItem>;

src/types/chart/gauge_chart.ts

@@ -18,9 +18,9 @@ export interface SectionRule {
 }
 
 interface ColorSet {
-  readonly lowerColor: string;
-  readonly middleColor: string;
-  readonly upperColor: string;
+  readonly lowerColor: Color;
+  readonly middleColor: Color;
+  readonly upperColor: Color;
 }
 
 interface SectionThreshold {
@@ -53,13 +53,13 @@ export interface GaugeChartOptions extends ChartOptions {
     radiusPercentage: number; // Needle circle radius as the percentage of the chart area width
     widthPercentage: number; // Needle width as the percentage of the chart area width
     lengthPercentage: number; // Needle length as the percentage of the interval between inner radius (0%) and outer radius (100%) of the arc
-    color: string; // The color of the needle
+    color: Color; // The color of the needle
   };
   valueLabel?: {
     formatter: (() => string) | null;
     display: boolean;
-    color: string;
-    backgroundColor: string;
+    color: Color;
+    backgroundColor: Color;
     borderRadius: number;
     fontSize: number;
     padding: {

src/types/commands.ts

@@ -10,6 +10,7 @@ import { BorderCommand, ConditionalFormat, Figure, Format, Style, Zone } from ".
 import {
   Border,
   CellPosition,
+  Color,
   Dimension,
   HeaderIndex,
   Pixel,
@@ -569,7 +570,7 @@ export interface StopSelectionCommand {
  */
 export interface SetColorCommand {
   type: "SET_HIGHLIGHT_COLOR";
-  color: string;
+  color: Color;
 }
 
 export interface EvaluateCellsCommand {