build(deps): update dependency color to v5 (#11602)

packages/calcite-components/package.json

@@ -74,9 +74,8 @@
     "@esri/calcite-ui-icons": "4.0.1-next.0",
     "@floating-ui/dom": "^1.6.12",
     "@floating-ui/utils": "^0.2.8",
-    "@types/color": "^4.2.0",
     "@types/sortablejs": "^1.15.8",
-    "color": "^4.2.3",
+    "color": "^5.0.0",
     "composed-offset-position": "^0.0.6",
     "dayjs": "^1.11.13",
     "focus-trap": "^7.6.2",

packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import Color from "color";
+import Color, { type ColorInstance } from "color";
 import { PropertyValues } from "lit";
 import { LitElement, property, createEvent, h, method, state, JsxNode } from "@arcgis/lumina";
 import { Scale } from "../interfaces";
@@ -53,7 +53,7 @@ export class ColorPickerHexInput extends LitElement {
   // #region State Properties
 
   /** The last valid/selected color. Used as a fallback if an invalid hex code is entered. */
-  @state() internalColor: Color | undefined = DEFAULT_COLOR;
+  @state() internalColor: ColorInstance | undefined = DEFAULT_COLOR;
 
   // #endregion
 
@@ -377,11 +377,15 @@ export class ColorPickerHexInput extends LitElement {
     return hex ? hex.replace("#", "").slice(0, 6) : "";
   }
 
-  private formatOpacityForInternalInput(color: Color): string {
+  private formatOpacityForInternalInput(color: ColorInstance): string {
     return color ? `${alphaToOpacity(color.alpha())}` : "";
   }
 
-  private nudgeRGBChannels(color: Color, amount: number, context: "rgb" | "a"): Color {
+  private nudgeRGBChannels(
+    color: ColorInstance,
+    amount: number,
+    context: "rgb" | "a",
+  ): ColorInstance {
     let nudgedChannels: Channels;
     const channels = color.array();
     const rgbChannels = channels.slice(0, 3);

packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import Color from "color";
+import Color, { type ColorInstance } from "color";
 import { PropertyValues } from "lit";
 import { LitElement, property, Fragment, h, JsxNode } from "@arcgis/lumina";
 import { getModeName } from "../../utils/dom";
@@ -23,7 +23,7 @@ export class ColorPickerSwatch extends LitElement {
 
   // #region Private Properties
 
-  private internalColor: Color;
+  private internalColor: ColorInstance;
 
   // #endregion
 

packages/calcite-components/src/components/color-picker/color-picker.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import Color from "color";
+import Color, { type ColorInstance } from "color";
 import { throttle } from "lodash-es";
 import { PropertyValues } from "lit";
 import { createEvent, h, JsxNode, LitElement, method, property, state } from "@arcgis/lumina";
@@ -86,7 +86,7 @@ export class ColorPicker extends LitElement implements InteractiveComponent {
       }
     | undefined;
 
-  private get baseColorFieldColor(): Color {
+  private get baseColorFieldColor(): ColorInstance {
     return this.color || this.previousColor || DEFAULT_COLOR;
   }
 
@@ -515,7 +515,7 @@ export class ColorPicker extends LitElement implements InteractiveComponent {
     this.drawColorControls();
   }
 
-  private handleColorChange(color: Color | null, oldColor: Color | null): void {
+  private handleColorChange(color: ColorInstance | null, oldColor: ColorInstance | null): void {
     this.drawColorControls();
     this.updateChannelsFromColor(color);
     this.previousColor = oldColor;
@@ -920,7 +920,7 @@ export class ColorPicker extends LitElement implements InteractiveComponent {
   }
 
   private internalColorSet(
-    color: Color | null,
+    color: ColorInstance | null,
     skipEqual = true,
     context: ColorPicker["internalColorUpdateContext"] = "user-interaction",
   ): void {
@@ -934,7 +934,10 @@ export class ColorPicker extends LitElement implements InteractiveComponent {
     this.internalColorUpdateContext = null;
   }
 
-  private toValue(color: Color | null, format: SupportedMode = this.mode): ColorValue | null {
+  private toValue(
+    color: ColorInstance | null,
+    format: SupportedMode = this.mode,
+  ): ColorValue | null {
     if (!color) {
       return null;
     }
@@ -1175,7 +1178,7 @@ export class ColorPicker extends LitElement implements InteractiveComponent {
     radius: number,
     x: number,
     y: number,
-    color: Color,
+    color: ColorInstance,
     applyAlpha: boolean,
   ): void {
     const startAngle = 0;
@@ -1431,11 +1434,11 @@ export class ColorPicker extends LitElement implements InteractiveComponent {
     this.internalColorSet(Color(channels, this.channelMode));
   }
 
-  private updateChannelsFromColor(color: Color | null): void {
+  private updateChannelsFromColor(color: ColorInstance | null): void {
     this.channels = color ? this.toChannels(color) : [null, null, null, null];
   }
 
-  private toChannels(color: Color): Channels {
+  private toChannels(color: ColorInstance): Channels {
     const { channelMode } = this;
 
     const channels = color[channelMode]()

packages/calcite-components/src/components/color-picker/interfaces.ts

@@ -1,11 +1,11 @@
-import type Color from "color";
+import type { ColorInstance } from "color";
 
 export type ColorMode = "rgb" | "hsv";
 
 export type Channels = [number, number, number, number];
 
 // need to do this otherwise, stencil build doesn't pick up the type import
-export type InternalColor = Color;
+export type InternalColor = ColorInstance;
 
 export type ColorValue = string | RGB | RGBA | HSV | HSVA | HSL | HSLA;
 

packages/calcite-components/src/components/color-picker/utils.ts

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import Color from "color";
+import { ColorInstance as Color } from "color";
 import { Dimensions, Scale } from "../interfaces";
 import { ColorValue, HSLA, HSVA, RGB, RGBA } from "./interfaces";
 import { STATIC_DIMENSIONS } from "./resources";

packages/calcite-components/src/components/interfaces.ts

@@ -1,4 +1,3 @@
-/* Note: using `.d.ts` file extension will exclude it from the output build */
 export type Alignment = "start" | "center" | "end";
 export type Appearance = "solid" | "outline" | "outline-fill" | "transparent";
 export interface Dimensions {

packages/calcite-components/vite.config.ts

@@ -8,7 +8,7 @@ import { useLumina } from "@arcgis/lumina-compiler";
 import { version } from "./package.json";
 import tailwindConfig from "./tailwind.config";
 
-const nonEsmDependencies = ["color", "interactjs"];
+const nonEsmDependencies = ["interactjs"];
 
 export default defineConfig({
   ssr: {