WIP

cli/package.json

@@ -49,7 +49,6 @@
   "devDependencies": {
     "@ava/typescript": "^3.0.1",
     "@tsconfig/node-lts-strictest-esm": "^18.12.1",
-    "@types/color": "^3.0.3",
     "@types/color-convert": "^2.0.0",
     "@types/common-tags": "^1.8.1",
     "@types/d3-scale": "^4.0.3",
@@ -61,8 +60,8 @@
   },
   "dependencies": {
     "base64-js": "^1.5.1",
-    "color": "^4.2.3",
     "color-convert": "^2.0.1",
+    "colorjs.io": "^0.4.5",
     "commander": "^10.0.0",
     "common-tags": "^1.8.2",
     "d3-scale": "^4.0.2",

cli/src/bin.ts

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import Color from 'color';
+import Color from 'colorjs.io';
 import { Command } from 'commander';
 import flatten from 'lodash/flatten.js';
 import { parse } from 'yaml';
@@ -103,8 +103,8 @@ const resolvedColorSets: (BuiltInColorSet | ColorSet)[] = await Promise.all(
           accent7: `#${base16.base0F}`,
         };
         const isDark =
-          Color(variant.shade0).luminosity() <
-          Color(variant.shade7).luminosity();
+          new Color(variant.shade0).luminance <
+          new Color(variant.shade7).luminance;
         const colors: ColorSet = {
           name: base16.scheme,
           variants: isDark ? { dark: variant } : { light: variant },

cli/src/color-set/index.ts

@@ -1,4 +1,4 @@
-import Color from 'color';
+import Color from 'colorjs.io';
 import capitalize from 'lodash/capitalize.js';
 import camelCase from 'lodash/camelCase.js';
 import kebabCase from 'lodash/kebabCase.js';
@@ -117,50 +117,43 @@ export function prepareVariant(variant: Variant): FullVariant {
   }
   const start = new Color(variant.shade0);
   const end = new Color(variant.shade7);
-  const rDelta = (end.red() - start.red()) / 7;
-  const gDelta = (end.green() - start.green()) / 7;
-  const bDelta = (end.blue() - start.blue()) / 7;
+  const shades = Color.steps(start, end, {
+    steps: 8,
+    space: 'oklch',
+    outputSpace: 'srgb',
+  }).map((c) => new Color(c).toString({ format: 'hex', collapse: false }));
+  const [_1, shade1, shade2, shade3, shade4, shade5, shade6, _2] = shades;
+  if (!shade1 || !shade2 || !shade3 || !shade4 || !shade5 || !shade6)
+    throw new Error();
   return {
     ...variant,
-    shade1: new Color({
-      r: start.red() + rDelta * 1,
-      g: start.green() + gDelta * 1,
-      b: start.blue() + bDelta * 1,
-    }).hex(),
-    shade2: new Color({
-      r: start.red() + rDelta * 2,
-      g: start.green() + gDelta * 2,
-      b: start.blue() + bDelta * 2,
-    }).hex(),
-    shade3: new Color({
-      r: start.red() + rDelta * 3,
-      g: start.green() + gDelta * 3,
-      b: start.blue() + bDelta * 3,
-    }).hex(),
-    shade4: new Color({
-      r: start.red() + rDelta * 4,
-      g: start.green() + gDelta * 4,
-      b: start.blue() + bDelta * 4,
-    }).hex(),
-    shade5: new Color({
-      r: start.red() + rDelta * 5,
-      g: start.green() + gDelta * 5,
-      b: start.blue() + bDelta * 5,
-    }).hex(),
-    shade6: new Color({
-      r: start.red() + rDelta * 6,
-      g: start.green() + gDelta * 6,
-      b: start.blue() + bDelta * 6,
-    }).hex(),
+    shade1,
+    shade2,
+    shade3,
+    shade4,
+    shade5,
+    shade6,
   };
 }
 
+export function mix(color1: string, color2: string, p: number): string {
+  return new Color(Color.mix(new Color(color1), new Color(color2), p)).toString(
+    { format: 'hex', collapse: false },
+  );
+}
+
 export function brightMix(
   colors: FullVariant,
   key: keyof FullVariant,
   isDark: boolean,
 ): string {
-  return Color(colors[key])
-    .mix(isDark ? Color(colors.shade7) : Color(colors.shade0), 0.2)
-    .hex();
+  return mix(colors[key], isDark ? colors.shade7 : colors.shade0, 0.2);
+}
+
+export function dimMix(
+  colors: FullVariant,
+  key: keyof FullVariant,
+  isDark: boolean,
+) {
+  return mix(colors[key], isDark ? colors.shade0 : colors.shade7, 0.2);
 }

cli/src/template/alacritty.ts

@@ -1,24 +1,7 @@
 import { source } from 'common-tags';
-import Color from 'color';
 import { Document, YAMLMap } from 'yaml';
 import type { Template } from './index.js';
-import { colorSetToVariants, FullVariant } from '../color-set/index.js';
-
-const MIX = 0.2;
-
-const brightMix = (
-  isDark: boolean,
-  colors: FullVariant,
-  key: keyof FullVariant,
-) =>
-  Color(colors[key])
-    .mix(isDark ? Color(colors.shade7) : Color(colors.shade0), MIX)
-    .hex();
-
-const dimMix = (isDark: boolean, colors: FullVariant, key: keyof FullVariant) =>
-  Color(colors[key])
-    .mix(isDark ? Color(colors.shade0) : Color(colors.shade7), MIX)
-    .hex();
+import { colorSetToVariants, brightMix, dimMix } from '../color-set/index.js';
 
 const template: Template = {
   name: 'Alacritty',
@@ -47,22 +30,22 @@ const template: Template = {
             },
             bright: {
               black: isDark ? colors.shade3 : colors.shade5,
-              red: brightMix(isDark, colors, 'accent0'),
-              green: brightMix(isDark, colors, 'accent3'),
-              yellow: brightMix(isDark, colors, 'accent2'),
-              blue: brightMix(isDark, colors, 'accent5'),
-              magenta: brightMix(isDark, colors, 'accent7'),
-              cyan: brightMix(isDark, colors, 'accent4'),
+              red: brightMix(colors, 'accent0', isDark),
+              green: brightMix(colors, 'accent3', isDark),
+              yellow: brightMix(colors, 'accent2', isDark),
+              blue: brightMix(colors, 'accent5', isDark),
+              magenta: brightMix(colors, 'accent7', isDark),
+              cyan: brightMix(colors, 'accent4', isDark),
               white: isDark ? colors.shade7 : colors.shade1,
             },
             dim: {
               black: isDark ? colors.shade1 : colors.shade7,
-              red: dimMix(isDark, colors, 'accent0'),
-              green: dimMix(isDark, colors, 'accent3'),
-              yellow: dimMix(isDark, colors, 'accent2'),
-              blue: dimMix(isDark, colors, 'accent5'),
-              magenta: dimMix(isDark, colors, 'accent7'),
-              cyan: dimMix(isDark, colors, 'accent4'),
+              red: dimMix(colors, 'accent0', isDark),
+              green: dimMix(colors, 'accent3', isDark),
+              yellow: dimMix(colors, 'accent2', isDark),
+              blue: dimMix(colors, 'accent5', isDark),
+              magenta: dimMix(colors, 'accent7', isDark),
+              cyan: dimMix(colors, 'accent4', isDark),
               white: isDark ? colors.shade5 : colors.shade3,
             },
           },

cli/src/template/bbedit.ts

@@ -1,16 +1,12 @@
-import Color from 'color';
+import Color from 'colorjs.io';
 import { source } from 'common-tags';
 import { colorSetToVariants } from '../color-set/index.js';
 import type { Template } from './index.js';
 
 const DESTINATION = '~/Library/Application Support/BBEdit/Color Schemes/';
 
 const formatColor = (hex: string) => {
-  const [r, g, b] = Color(hex)
-    .rgb()
-    .array()
-    .map((c) => c / 255);
-  return `rgba(${r}, ${g}, ${b}, 1.00)`;
+  return new Color(hex).toString({ format: 'rgba' });
 };
 
 const template: Template = {

cli/src/template/chrome.ts

@@ -1,4 +1,4 @@
-import Color from 'color';
+import Color from 'colorjs.io';
 import { colorSetToVariants } from '../color-set/index.js';
 import { dirname, join, Template, version } from './index.js';
 import { source } from 'common-tags';
@@ -9,11 +9,11 @@ const template: Template = {
     const variants = colorSetToVariants(colorSet);
     for (const variant of variants) {
       const themeName = variant.title.human;
-      const shade0rgb = Color(variant.colors.shade0).rgb().array();
-      const shade1rgb = Color(variant.colors.shade1).rgb().array();
-      const shade7rgb = Color(variant.colors.shade7).rgb().array();
-      const accent5hsl = Color(variant.colors.accent5).hsl().array();
-      const accent6hsl = Color(variant.colors.accent6).hsl().array();
+      const shade0rgb = new Color(variant.colors.shade0).to('srgb').coords;
+      const shade1rgb = new Color(variant.colors.shade1).to('srgb').coords;
+      const shade7rgb = new Color(variant.colors.shade7).to('srgb').coords;
+      const accent5hsl = new Color(variant.colors.accent5).to('hsl').coords;
+      const accent6hsl = new Color(variant.colors.accent6).to('hsl').coords;
       yield {
         path: join(themeName, 'manifest.json'),
         content: JSON.stringify(

cli/src/template/conemu.ts

@@ -1,4 +1,4 @@
-import Color from 'color';
+import Color from 'colorjs.io';
 import { source } from 'common-tags';
 import { colorSetToVariants } from '../color-set/index.js';
 import type { Template } from './index.js';

cli/src/template/css.ts

@@ -1,4 +1,4 @@
-import Color from 'color';
+import Color from 'colorjs.io';
 import { source } from 'common-tags';
 import { colorSetToVariants } from '../color-set/index.js';
 import type { Template } from './index.js';

cli/src/template/firefox-addon.ts

@@ -1,4 +1,4 @@
-import Color from 'color';
+import Color from 'colorjs.io';
 import { source } from 'common-tags';
 import { colorSetToVariants } from '../color-set/index.js';
 import { dirname, join, Template, version } from './index.js';

cli/src/template/hyper.ts

@@ -1,4 +1,4 @@
-import Color from 'color';
+import Color from 'colorjs.io';
 import { source } from 'common-tags';
 import { AnnotatedVariant, colorSetToVariants } from '../color-set/index.js';
 import { dirname, join, Template, version } from './index.js';

cli/src/template/iterm.ts

@@ -1,4 +1,4 @@
-import Color from 'color';
+import Color from 'colorjs.io';
 import type { Template } from './index.js';
 import { colorSetToVariants } from '../color-set/index.js';
 import { source } from 'common-tags';

cli/src/template/kde-plasma-colors.ts

@@ -1,6 +1,6 @@
 import type { Template } from './index.js';
 import { colorSetToVariants } from '../color-set/index.js';
-import Color from 'color';
+import Color from 'colorjs.io';
 import { source } from 'common-tags';
 
 function formatColor(color: string | Color): string {

cli/src/template/konsole.ts

@@ -1,7 +1,7 @@
 import type { Template } from './index.js';
 import { brightMix, colorSetToVariants } from '../color-set/index.js';
 import { source } from 'common-tags';
-import Color from 'color';
+import Color from 'colorjs.io';
 
 function format(color: string): string {
   return Color(color).rgb().round().array().join(',');

cli/src/template/sketch-palettes.ts

@@ -1,4 +1,4 @@
-import Color from 'color';
+import Color from 'colorjs.io';
 import type { Template } from './index.js';
 import { colorSetToVariants } from '../color-set/index.js';
 import { source } from 'common-tags';

cli/src/template/terminal.ts

@@ -1,6 +1,6 @@
 import type { Template } from './index.js';
 import { brightMix, colorSetToVariants } from '../color-set/index.js';
-import Color from 'color';
+import Color from 'colorjs.io';
 import { source } from 'common-tags';
 import { fromByteArray } from 'base64-js';
 

cli/src/template/visual-studio.ts

@@ -1,6 +1,6 @@
 import type { Template } from './index.js';
 import { colorSetToVariants } from '../color-set/index.js';
-import Color from 'color';
+import Color from 'colorjs.io';
 import { source } from 'common-tags';
 
 function format(hex: string): string {