Upgrade colorjs and other deps

.github/dependabot.yml

@@ -1,8 +1,24 @@
 version: 2
+
 updates:
   - package-ecosystem: github-actions
     directory: '/'
     schedule:
       interval: weekly
       time: '04:00'
       timezone: America/New_York
+
+  - package-ecosystem: npm
+    directory: '/'
+    versioning-strategy: increase
+    schedule:
+      interval: weekly
+      time: '04:00'
+      timezone: America/New_York
+    groups:
+      prod:
+        dependency-type: production
+      dev:
+        dependency-type: development
+    ignore:
+      - dependency-name: '@types/node'

.github/workflows/test.yml

@@ -15,6 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - run: corepack enable
       - uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
@@ -35,6 +36,7 @@ jobs:
     needs: build
     steps:
       - uses: actions/checkout@v4
+      - run: corepack enable
       - uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
@@ -55,6 +57,7 @@ jobs:
     needs: build
     steps:
       - uses: actions/checkout@v4
+      - run: corepack enable
       - uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc

.nvmrc

@@ -1 +1 @@
-v18
+v20

.sassdocrc

@@ -18,7 +18,6 @@ herman:
     sassOptions:
       loadPaths:
         - 'src/sass'
-        - 'node_modules'
     use:
       - 'config'
 display:

.svelte-kit/tsconfig.json

@@ -24,23 +24,23 @@
 			"..",
 			"./types"
 		],
-		"importsNotUsedAsValues": "error",
+		"verbatimModuleSyntax": true,
 		"isolatedModules": true,
-		"preserveValueImports": true,
 		"lib": [
 			"esnext",
 			"DOM",
 			"DOM.Iterable"
 		],
-		"moduleResolution": "node",
+		"moduleResolution": "bundler",
 		"module": "esnext",
 		"noEmit": true,
-		"target": "esnext",
-		"ignoreDeprecations": "5.0"
+		"target": "esnext"
 	},
 	"include": [
 		"ambient.d.ts",
+		"non-ambient.d.ts",
 		"./types/**/$types.d.ts",
+		"../svelte.config.js",
 		"../vite.config.js",
 		"../vite.config.ts",
 		"../src/**/*.js",
@@ -51,10 +51,6 @@
 		"../tests/**/*.svelte"
 	],
 	"exclude": [
-		"../node_modules/**",
-		"./[!ambient.d.ts]**",
-		"../src/service-worker.js",
-		"../src/service-worker.ts",
-		"../src/service-worker.d.ts"
+		"../node_modules/**"
 	]
 }

.yarnrc.yml

@@ -1,9 +1,11 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 nodeLinker: node-modules
 
 packageExtensions:
-  'markdown-it-anchor@*':
+  markdown-it-anchor@*:
     peerDependenciesMeta:
       '@types/markdown-it':
         optional: true
-
-yarnPath: .yarn/releases/yarn-3.6.1.cjs

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18
+FROM node:20
 
 ARG BUILD_ENV=development
 WORKDIR /app
@@ -7,7 +7,7 @@ COPY ./package.json package.json
 COPY ./yarn.lock yarn.lock
 # Use local version of Yarn:
 COPY ./.yarnrc.yml .yarnrc.yml
-COPY ./.yarn/releases .yarn/releases
+RUN corepack enable
 RUN yarn install --immutable
 
 COPY . /app

package.json

@@ -4,8 +4,7 @@
   "version": "0.0.1",
   "license": "BSD-3-Clause",
   "engines": {
-    "node": "^18",
-    "yarn": "^3"
+    "node": "^20"
   },
   "type": "module",
   "scripts": {
@@ -26,8 +25,8 @@
     "lint:sass": "yarn lint:sass:ci --fix",
     "lint:ci": "run-p prettier:ci sync check lint:js:ci lint:sass:ci tsc tsc:tests",
     "lint:sass:ci": "stylelint '**/*.scss'",
-    "docs:json": "sass --load-path=node_modules src/sass/json.scss static/built/json.css",
-    "docs:sass": "sass --load-path=node_modules src/sass/app.scss static/built/app.css",
+    "docs:json": "sass -p node src/sass/json.scss static/built/json.css",
+    "docs:sass": "sass -p node src/sass/app.scss static/built/app.css",
     "docs:compile": "sassdoc 'src/sass/**/*.scss'",
     "docs": "run-s docs:sass docs:json docs:compile",
     "watch:docs": "chokidar \"src/sass/**/*.scss\" \"./.sassdocrc\" \"./README.md\" -c \"yarn docs\"",
@@ -38,19 +37,20 @@
   },
   "dependencies": {
     "accoutrement": "^4.0.4",
-    "colorjs.io": "^0.4.5"
+    "colorjs.io": "^0.5.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.1.1",
-    "@sveltejs/kit": "^2.5.1",
+    "@sveltejs/kit": "^2.5.2",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/svelte": "^4.1.0",
+    "@testing-library/svelte": "^4.2.1",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.202",
     "@types/node": "*",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
-    "@vitest/coverage-v8": "^0.34.6",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "@vitest/coverage-v8": "^1.3.1",
     "chokidar-cli": "^3.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -66,30 +66,19 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.1",
+    "prettier-plugin-svelte": "^3.2.2",
     "sass": "^1.71.1",
     "sass-true": "^8.0.0",
     "sassdoc": "^2.7.4",
-    "sassdoc-theme-herman": "^5.0.1",
+    "sassdoc-theme-herman": "^6.0.0",
     "stylelint": "^16.2.1",
     "stylelint-config-standard-scss": "^13.0.0",
     "svelte": "^4.2.12",
-    "svelte-check": "^3.6.4",
+    "svelte-check": "^3.6.6",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3",
-    "vite": "^4.5.2",
-    "vitest": "^0.34.6"
+    "vite": "^5.1.4",
+    "vitest": "^1.3.1"
   },
-  "resolutions": {
-    "vite": "<5"
-  },
-  "yarn-upgrade-all": {
-    "ignore": [
-      "@types/node",
-      "@vitest/coverage-v8",
-      "vite",
-      "vitest"
-    ]
-  },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]"
 }

src/@types/global.d.ts

@@ -1,5 +1,4 @@
-import { ColorSpace } from 'colorjs.io/fn';
-import type { PlainColorObject } from 'colorjs.io/types/src/color';
+import { ColorSpace, PlainColorObject } from 'colorjs.io/fn';
 
 declare global {
   interface Window {

src/lib/components/colors/FormatGroup.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { inGamut } from 'colorjs.io/fn';
-  import type { PlainColorObject } from 'colorjs.io/types/src/color';
+  import { inGamut, type PlainColorObject } from 'colorjs.io/fn';
 
   import Output from '$lib/components/colors/Output.svelte';
   import type { FormatGroup } from '$lib/constants';

src/lib/components/colors/Formats.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { PlainColorObject } from 'colorjs.io/types/src/color';
+  import type { PlainColorObject } from 'colorjs.io/fn';
 
   import FormatGroup from '$lib/components/colors/FormatGroup.svelte';
   import type {

src/lib/components/colors/Header.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { serialize, to } from 'colorjs.io/fn';
-  import type { PlainColorObject } from 'colorjs.io/types/src/color';
+  import { type PlainColorObject, serialize, to } from 'colorjs.io/fn';
   import type { Writable } from 'svelte/store';
 
   import CopyButton from '$lib/components/util/CopyButton.svelte';

src/lib/components/colors/Output.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { serialize, to } from 'colorjs.io/fn';
-  import type { PlainColorObject } from 'colorjs.io/types/src/color';
+  import { type PlainColorObject, serialize, to } from 'colorjs.io/fn';
 
   import SupportWarning from '$lib/components/colors/SupportWarning.svelte';
   import CopyButton from '$lib/components/util/CopyButton.svelte';

src/lib/components/colors/Sliders.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { PlainColorObject } from 'colorjs.io/types/src/color';
+  import type { PlainColorObject } from 'colorjs.io/fn';
   import type { Writable } from 'svelte/store';
 
   import type { ColorFormatId } from '$lib/constants';

src/lib/stores.ts

@@ -6,10 +6,10 @@ import {
   OKLab,
   OKLCH,
   P3,
+  type PlainColorObject,
   REC_2020,
   sRGB,
 } from 'colorjs.io/fn';
-import type { PlainColorObject } from 'colorjs.io/types/src/color';
 import { writable } from 'svelte/store';
 
 // eslint-disable-next-line import/no-unresolved

src/lib/utils.ts

@@ -1,5 +1,12 @@
-import { clone, display, serialize, set, steps, to } from 'colorjs.io/fn';
-import type { PlainColorObject } from 'colorjs.io/types/src/color';
+import {
+  clone,
+  display,
+  type PlainColorObject,
+  serialize,
+  set,
+  steps,
+  to,
+} from 'colorjs.io/fn';
 
 import type { ColorFormatId } from '$lib/constants';
 import { FORMATS } from '$lib/constants';

src/routes/+page.svelte

@@ -3,6 +3,8 @@
   import debounce from 'lodash/debounce';
   import { onMount } from 'svelte';
 
+  // eslint-disable-next-line import/no-unresolved
+  import { replaceState } from '$app/navigation';
   import Colors from '$lib/components/colors/index.svelte';
   import Footer from '$lib/components/Footer.svelte';
   import Header from '$lib/components/Header.svelte';
@@ -22,7 +24,7 @@
 
   function colorsToHash() {
     const hashString = storeValuesToHash($bg, $fg, $format);
-    history.replaceState('', '', `#${hashString}`);
+    replaceState(`#${hashString}`, {});
   }
 
   const debouncedColorsToHash = debounce(colorsToHash, 100);

src/sass/config/_fonts.scss

@@ -1,5 +1,5 @@
 @use 'tools';
-@use 'sassdoc-theme-herman/scss/utilities' as herman;
+@use 'pkg:sassdoc-theme-herman' as herman;
 
 /// # Fonts Config
 /// Accoutrement maps for storing global font tokens.

src/sass/config/_tools.scss

@@ -1,4 +1,4 @@
-@forward 'accoutrement/sass/tools' with (
+@forward 'pkg:accoutrement' with (
   $color-var-prefix: '',
   $easing-var-prefix: '',
   $ratio-var-prefix: '',

src/sass/config/animation/_index.scss

@@ -1,4 +1,4 @@
-@use 'sassdoc-theme-herman/scss/utilities' as herman;
+@use 'pkg:sassdoc-theme-herman/' as herman;
 @use '../tools';
 @use 'easing';
 @use 'times';

src/sass/config/color/_docs.scss

@@ -1,4 +1,4 @@
-@use 'sassdoc-theme-herman/scss/utilities' as herman;
+@use 'pkg:sassdoc-theme-herman' as herman;
 @use 'sass:meta';
 @use 'brand';
 @use 'ui';

src/sass/config/scale/_docs.scss

@@ -1,4 +1,4 @@
-@use 'sassdoc-theme-herman/scss/utilities' as herman;
+@use 'pkg:sassdoc-theme-herman' as herman;
 @use 'sass:meta';
 @use 'ratio';
 @use 'layout';

src/sass/json.scss

@@ -1,5 +1,5 @@
 @use 'config';
 @use 'config/color/docs' as color-docs;
 @use 'config/scale/docs' as scale-docs;
-@use 'sassdoc-theme-herman/scss/utilities' as herman;
+@use 'pkg:sassdoc-theme-herman' as herman;
 @include herman.export(herman.$herman);