Switch to internal color engine

src/color/colorString.ts

@@ -5,6 +5,15 @@ import hslToRgb from './transforms/hslToRgb'
 import type { HSL } from './hsl'
 import type { RGB } from './rgb'
 
+function roundRgb(rgb: RGB): RGB {
+  return {
+    r: Math.round(rgb.r),
+    g: Math.round(rgb.g),
+    b: Math.round(rgb.b),
+    a: rgb.a, // do not round off alpha
+  }
+}
+
 function rgbToHexString(rgb: RGB): string {
   const int =
     ((Math.round(rgb.r) & 0xff) << 16) +
@@ -17,6 +26,7 @@ function rgbToHexString(rgb: RGB): string {
 }
 
 function rgbToRgbaString(rgb: RGB): string {
+  rgb = roundRgb(rgb)
   return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`
 }
 

src/mappings/__tests__/analogue.spec.ts

@@ -3,12 +3,12 @@ import analogue from '../analogue'
 describe('analogue', () => {
   it('returns a new hex color value with hue rotated in steps of 30˚', () => {
     const color = analogue('blue', 1)
-    expect(color).toBe('#7F00FF')
+    expect(color).toBe('#8000FF')
   })
 
   it('rotates the hue in the opposite direction if key is negative', () => {
     const color = analogue('blue', -1)
-    expect(color).toBe('#007FFF')
+    expect(color).toBe('#0080FF')
   })
 
   it('returns the base color if key is not a number', () => {

src/mappings/lightness.ts

@@ -1,6 +1,5 @@
-import Color from 'color'
-
-import normalize from '../normalize'
+import colorString from '../color/colorString'
+import hsl from '../color/hsl'
 
 import type { ColorMapping } from '../palette'
 
@@ -16,11 +15,11 @@ import type { ColorMapping } from '../palette'
 const lightness: ColorMapping = (baseColor, key) => {
   if (typeof key !== 'number') return baseColor
 
-  const base = Color(baseColor)
+  const base = hsl(baseColor)
 
   const targetL = Math.min(Math.max(key, 0), 100)
 
-  return normalize(base.lightness(targetL))
+  return colorString({ ...base, l: targetL })
 }
 
 export default lightness

src/mappings/opacity.ts

@@ -1,6 +1,5 @@
-import Color from 'color'
-
-import normalize from '../normalize'
+import colorString from '../color/colorString'
+import rgb from '../color/rgb'
 
 import type { ColorMapping } from '../palette'
 
@@ -16,11 +15,11 @@ import type { ColorMapping } from '../palette'
 const opacity: ColorMapping = (baseColor, key) => {
   if (typeof key !== 'number') return baseColor
 
-  const base = Color(baseColor)
+  const base = rgb(baseColor)
 
   const targetA = Math.min(Math.max(key, 0), 1)
 
-  return normalize(base.alpha(targetA))
+  return colorString({ ...base, a: targetA })
 }
 
 export default opacity

src/mappings/rotation.ts

@@ -1,6 +1,5 @@
-import Color from 'color'
-
-import normalize from '../normalize'
+import colorString from '../color/colorString'
+import hsl from '../color/hsl'
 
 import type { ColorMapping } from '../palette'
 
@@ -18,11 +17,11 @@ import type { ColorMapping } from '../palette'
 const rotation: ColorMapping = (baseColor, key) => {
   if (typeof key !== 'number' || key === 0) return baseColor
 
-  const base = Color(baseColor)
+  const base = hsl(baseColor)
 
-  const targetH = (base.hue() + key) % 360
+  const targetH = (base.h + key) % 360
 
-  return normalize(base.hue(targetH))
+  return colorString({ ...base, h: targetH })
 }
 
 export default rotation

src/mappings/saturation.ts

@@ -1,6 +1,5 @@
-import Color from 'color'
-
-import normalize from '../normalize'
+import colorString from '../color/colorString'
+import hsl from '../color/hsl'
 
 import type { ColorMapping } from '../palette'
 
@@ -16,11 +15,11 @@ import type { ColorMapping } from '../palette'
 const saturation: ColorMapping = (baseColor, key) => {
   if (typeof key !== 'number') return baseColor
 
-  const base = Color(baseColor)
+  const base = hsl(baseColor)
 
   const targetS = Math.min(Math.max(key, 0), 100)
 
-  return normalize(base.saturationl(targetS))
+  return colorString({ ...base, s: targetS })
 }
 
 export default saturation

src/presets/__tests__/harmony.spec.ts

@@ -5,7 +5,7 @@ describe('harmony', () => {
     const baseColors = harmony('#0000FF')
     expect(baseColors).toEqual({
       primary: '#0000FF',
-      secondary: '#7F6C93',
+      secondary: '#806C93',
       accent: '#E61980',
       neutral: '#797986',
       error: '#BB2211',
@@ -22,7 +22,7 @@ describe('harmony', () => {
     expect(baseColors).toEqual({
       primary: 'rgba(0, 0, 255, 0.5)',
       secondary: 'rgba(128, 108, 147, 0.5)',
-      accent: 'rgba(230, 26, 128, 0.5)',
+      accent: 'rgba(230, 25, 128, 0.5)',
       neutral: 'rgba(121, 121, 134, 0.5)',
       error: '#BB2211',
     })