Remove iteration (#60)

## Describe your changes
Get iteration reduced as much as possible

## Issue ticket number and link
#2

## Checklist before requesting a review
- [x] I have performed a self-review of my code
- [x] If it is a core feature, I have added thorough tests.

---------

Co-authored-by: Copilot <[email protected]>

Author: lounsbrough

cypress/support/commands.ts

@@ -1,11 +1,17 @@
 /// <reference types="cypress" />
 
-import { colord } from 'colord'
+import { colord, extend as extendColord } from 'colord'
+import colordLabPlugin from 'colord/plugins/lab'
+
+extendColord([colordLabPlugin])
 
 const expectColorsToMatch = (color1: string | undefined, color2: string | undefined) => {
   expect(Boolean(color1), 'expected both color to be defined or undefined').to.equal(Boolean(color2))
   if (color1 && color2) {
-    expect(colord(color1).toHex()).to.be.equal(colord(color2).toHex())
+    const delta = 0.005
+    if (colord(color1).delta(colord(color2)) > delta) {
+      throw new Error(`expected colors to match: ${color1} vs ${color2} (allowed delta: ${delta})`)
+    }
   }
 }
 

demo/package.json

@@ -4,25 +4,25 @@
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^6.3.0",
-    "@mui/material": "^6.3.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.1.2",
+    "@mui/material": "^7.1.2",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^22.10.3",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.0.6",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@types/react-helmet": "^6.1.11",
-    "react": "^19.0.0",
+    "react": "^19.1.0",
     "react-color-a11y": "workspace:*",
     "react-colorful": "^5.6.1",
-    "react-dom": "^19.0.0",
+    "react-dom": "^19.1.0",
     "react-helmet-async": "^2.0.5",
     "react-scripts": "5.0.1",
-    "typescript": "^5.7.2",
-    "web-vitals": "^4.2.4"
+    "typescript": "^5.8.3",
+    "web-vitals": "^5.0.3"
   },
   "scripts": {
     "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",

demo/src/App.tsx

@@ -5,7 +5,7 @@ import {
   Typography,
   Slider,
   Switch,
-  Grid2 as Grid
+  Grid
 } from '@mui/material'
 import { HexColorPicker, HexColorInput } from 'react-colorful'
 import SettingsBox from './SettingsBox'

package.json

@@ -45,26 +45,26 @@
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.17.0",
-    "@rollup/plugin-commonjs": "^28.0.2",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "@types/node": "^22.10.3",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
-    "@typescript-eslint/eslint-plugin": "^8.19.0",
-    "cypress": "^14.0.1",
-    "eslint": "^9.17.0",
-    "gh-pages": "^6.2.0",
-    "postcss": "^8.4.49",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "rollup": "^4.29.1",
+    "@eslint/js": "^9.29.0",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@types/node": "^24.0.4",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@typescript-eslint/eslint-plugin": "^8.35.0",
+    "cypress": "^14.5.0",
+    "eslint": "^9.29.0",
+    "gh-pages": "^6.3.0",
+    "postcss": "^8.5.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rollup": "^4.44.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.36.0",
-    "ts-loader": "^9.5.1",
+    "ts-loader": "^9.5.2",
     "ts-node": "^10.9.2",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.2",
-    "webpack": "^5.97.1"
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.35.0",
+    "webpack": "^5.99.9"
   }
 }