better-color-tools - npm Package Compare versions

Comparing version 0.10.0 to 0.10.1

CHANGELOG.md

 # better-color-tools
 
+## 0.10.1
+
+### Patch Changes
+
+- a800574: Fix TypeScript types
+
 ## 0.10.0
@@ -4,0 +10,0 @@

dist/adjust.d.ts

 import { type sRGB } from './colorspace.js';
 export interface AdjustOptions {
     /** type of adjustment (default: `"absolute"`) */
-    mode: 'absolute' | 'relative';
+    mode?: 'absolute' | 'relative';
     lightness?: number;
@@ -10,2 +10,3 @@ chroma?: number;
 }
+/** Adjust color through oklab/oklch colorspace */
 export default function adjust(color: sRGB, options: AdjustOptions): sRGB;

dist/adjust.js

 import { sRGBToOklch, oklchTosRGB } from './colorspace.js';
+/** Adjust color through oklab/oklch colorspace */
 export default function adjust(color, options) {
@@ -3,0 +4,0 @@ let [l, c, h, a] = sRGBToOklch(color);

dist/colorspace.d.ts

@@ -1,12 +0,12 @@
-export type HSL = [number, number, number, number];
-export type HWB = [number, number, number, number];
-export type LAB = [number, number, number, number];
-export type LCH = [number, number, number, number];
-export type LUV = [number, number, number, number];
-export type LMS = [number, number, number, number];
-export type LinearRGBD65 = [number, number, number, number];
-export type Oklab = [number, number, number, number];
-export type Oklch = [number, number, number, number];
-export type sRGB = [number, number, number, number];
-export type XYZ = [number, number, number, number];
+export type HSL = number[];
+export type HWB = number[];
+export type LAB = number[];
+export type LCH = number[];
+export type LUV = number[];
+export type LMS = number[];
+export type LinearRGBD65 = number[];
+export type Oklab = number[];
+export type Oklch = number[];
+export type sRGB = number[];
+export type XYZ = number[];
 export type Color = string | number | sRGB | LinearRGBD65 | LMS | Oklab | Oklch;
@@ -13,0 +13,0 @@ type MatrixRow = [number, number, number];

dist/index.d.ts

 export type { AdjustOptions } from './adjust.js';
 export type { ColorMatrix, HSL, HWB, LMS, LinearRGBD65, LUV, Oklab, Oklch, sRGB, XYZ } from './colorspace.js';
 export type { MixColorSpace } from './mix.js';
-export type { ColorOutput } from './parse.js';
+export type { ColorInput, ColorOutput, RGBObj, HSLObj, HWBObj, OklabObj, OklchObj, XYZObj } from './parse.js';
 export { default as adjust } from './adjust.js';
@@ -6,0 +6,0 @@ export { contrastRatio, darken, lighten, lightOrDark, lightness, luminance } from './luminance.js';

dist/parse.d.ts

@@ -0,2 +1,41 @@
+import type { AdjustOptions } from './adjust.js';
 import type { Color, LinearRGBD65, Oklab, Oklch, sRGB, XYZ } from './colorspace.js';
+/** note: values must be normalized to 1 (e.g. `255 -> 1`) */
+export interface RGBObj {
+    r: number;
+    g: number;
+    b: number;
+    alpha?: number;
+}
+export interface HSLObj {
+    h: number;
+    s: number;
+    l: number;
+    alpha?: number;
+}
+export interface HWBObj {
+    h: number;
+    w: number;
+    b: number;
+    alpha?: number;
+}
+export interface OklabObj {
+    l: number;
+    a: number;
+    b: number;
+    alpha?: number;
+}
+export interface OklchObj {
+    l: number;
+    c: number;
+    h: number;
+    alpha?: number;
+}
+export interface XYZObj {
+    x: number;
+    y: number;
+    z: number;
+    alpha?: number;
+}
+export type ColorInput = Color | RGBObj | HSLObj | HWBObj | OklabObj | OklchObj | XYZObj;
 export interface ColorOutput {
@@ -37,6 +76,8 @@ /** `#000000` */
     xyzVal: XYZ;
+    /** Adjust color through oklab/oklch colorspace */
+    adjust: (options: AdjustOptions) => ColorOutput;
     toString(): string;
 }
 /**
- * Parse any valid CSS color color string and convert to:
+ * Parse any valid CSS color or object and convert to:
  * - hex:       '#ff0000'
@@ -53,3 +94,3 @@ * - hexVal:    0xff0000
  */
-export declare function from(rawColor: Color): ColorOutput;
+export declare function from(rawColor: ColorInput): ColorOutput;
 /**
@@ -61,2 +102,2 @@ * hex num to sRGB (doesn’t support alpha as 0x000000 == 0x00000000)
 /** Convert any number of user inputs into RGBA array */
-export declare function parse(rawColor: Color): sRGB;
+export declare function parse(rawColor: ColorInput): sRGB;

dist/parse.js

@@ -13,3 +13,3 @@ import adjust from './adjust.js';
 /**
- * Parse any valid CSS color color string and convert to:
+ * Parse any valid CSS color or object and convert to:
  * - hex:       '#ff0000'
@@ -248,5 +248,7 @@ * - hexVal:    0xff0000
             if (k === 'alpha') {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 alpha = clamp(c[k], 0, 1);
             }
             else {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 c[k.toLowerCase()] = c[k];
@@ -253,0 +255,0 @@ }

package.json

 {
   "name": "better-color-tools",
   "description": "Fast, minimal color conversion and tools for JS/Sass. Supports sRGB, Oklab, Oklch, Display P3, and more.",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "author": {
@@ -35,22 +35,22 @@ "name": "Drew Powers",
     "prepublish": "npm run build",
-    "test": "mocha",
-    "test:benchmark": "mocha -t 10000"
+    "test": "vitest run"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.25.2",
-    "@types/node": "^18.11.9",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
-    "chai": "^4.3.7",
+    "@changesets/cli": "^2.26.0",
+    "@types/node": "^18.14.6",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "@typescript-eslint/parser": "^5.54.0",
     "del-cli": "^4.0.1",
-    "esbuild": "^0.14.54",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
+    "esbuild": "^0.17.11",
+    "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "mocha": "^10.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
-    "sass": "^1.56.1",
-    "typescript": "^4.9.3"
+    "pnpm": "^7.28.0",
+    "prettier": "^2.8.4",
+    "sass": "^1.58.3",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.4",
+    "vitest": "^0.29.2"
   }
 }

README.md

@@ -5,3 +5,3 @@ # better-color-tools
 
-The JS version of this libray is fast (`~200k` ops/s), lightweight (`5.6 kB` gzip), and dependency-free. The Sass version… is Sass (which has no runtime).
+The JS version of this libray is fast (`~200k` ops/s), lightweight (`5.7 kB` gzip), and dependency-free. The Sass version… is Sass (which has no runtime).
 
@@ -149,17 +149,23 @@ [🏀 **Playground**](https://better-color-tools.pages.dev/)
 
-**Manipulation**
+**Adjust**
 
-Manipulation is best done in a space like [Oklch] which is optimized for manual tweaking.
+Manipulation is done through [Oklch] which is optimized for manual tweaking. Call the `.adjust()` method to manipulate the color (they can even be chained together for multiple, incremental adjustments
 
 ```js
 import better from 'better-color-tools';
-
-let [l, c, h] = better.from('#5a00a6').oklchVal;
-better.from({
-  l,
-  c: c + 0.01, // increase Chroma by 1%
-  h: h + 5, // rotate hue by 5°
-}).hex; // #6f00ca
+better
+  .from('#5a00a6')
+  .adjust({
+    mode: 'relative',
+    hue: 5, // rotate hue by 5° (from wherever it was)
+    chroma: 0.1, // increase chroma by `0.1`
+  })
+  .adjust({
+    mode: 'absolute',
+    lightnes: 0.6, // set lightness to absolute 60%
+  }).hex; // #60009e
 ```
 
+Note that if `mode` is omitted, the default value is `'absolute'`.
+
 **Contrast Ratio**
@@ -166,0 +172,0 @@

src/adjust.ts

@@ -5,3 +5,3 @@ import { type sRGB, sRGBToOklch, oklchTosRGB } from './colorspace.js';
   /** type of adjustment (default: `"absolute"`) */
-  mode: 'absolute' | 'relative';
+  mode?: 'absolute' | 'relative';
   lightness?: number;
@@ -13,2 +13,3 @@ chroma?: number;
 
+/** Adjust color through oklab/oklch colorspace */
 export default function adjust(color: sRGB, options: AdjustOptions): sRGB {
@@ -15,0 +16,0 @@ let [l, c, h, a] = sRGBToOklch(color);

src/colorspace.ts

@@ -1,12 +0,12 @@
-export type HSL = [number, number, number, number];
-export type HWB = [number, number, number, number];
-export type LAB = [number, number, number, number];
-export type LCH = [number, number, number, number];
-export type LUV = [number, number, number, number];
-export type LMS = [number, number, number, number];
-export type LinearRGBD65 = [number, number, number, number];
-export type Oklab = [number, number, number, number];
-export type Oklch = [number, number, number, number];
-export type sRGB = [number, number, number, number];
-export type XYZ = [number, number, number, number];
+export type HSL = number[];
+export type HWB = number[];
+export type LAB = number[];
+export type LCH = number[];
+export type LUV = number[];
+export type LMS = number[];
+export type LinearRGBD65 = number[];
+export type Oklab = number[];
+export type Oklch = number[];
+export type sRGB = number[];
+export type XYZ = number[];
 export type Color = string | number | sRGB | LinearRGBD65 | LMS | Oklab | Oklch;
@@ -13,0 +13,0 @@

src/index.ts

 export type { AdjustOptions } from './adjust.js';
 export type { ColorMatrix, HSL, HWB, LMS, LinearRGBD65, LUV, Oklab, Oklch, sRGB, XYZ } from './colorspace.js';
 export type { MixColorSpace } from './mix.js';
-export type { ColorOutput } from './parse.js';
+export type { ColorInput, ColorOutput, RGBObj, HSLObj, HWBObj, OklabObj, OklchObj, XYZObj } from './parse.js';
 
@@ -6,0 +6,0 @@ export { default as adjust } from './adjust.js';

src/parse.ts

@@ -9,2 +9,47 @@ import type { AdjustOptions } from './adjust.js';
 
+/** note: values must be normalized to 1 (e.g. `255 -> 1`) */
+export interface RGBObj {
+  r: number;
+  g: number;
+  b: number;
+  alpha?: number;
+}
+
+export interface HSLObj {
+  h: number;
+  s: number;
+  l: number;
+  alpha?: number;
+}
+
+export interface HWBObj {
+  h: number;
+  w: number;
+  b: number;
+  alpha?: number;
+}
+
+export interface OklabObj {
+  l: number;
+  a: number;
+  b: number;
+  alpha?: number;
+}
+
+export interface OklchObj {
+  l: number;
+  c: number;
+  h: number;
+  alpha?: number;
+}
+
+export interface XYZObj {
+  x: number;
+  y: number;
+  z: number;
+  alpha?: number;
+}
+
+export type ColorInput = Color | RGBObj | HSLObj | HWBObj | OklabObj | OklchObj | XYZObj;
+
 export interface ColorOutput {
@@ -47,2 +92,4 @@ /** `#000000` */
   xyzVal: XYZ;
+  /** Adjust color through oklab/oklch colorspace */
+  adjust: (options: AdjustOptions) => ColorOutput;
   toString(): string; // JS helper
@@ -60,3 +107,3 @@ }
 /**
- * Parse any valid CSS color color string and convert to:
+ * Parse any valid CSS color or object and convert to:
  * - hex:       '#ff0000'
@@ -73,3 +120,3 @@ * - hexVal:    0xff0000
  */
-export function from(rawColor: Color): ColorOutput {
+export function from(rawColor: ColorInput): ColorOutput {
   const color = parse(rawColor);
@@ -180,3 +227,3 @@
 /** Convert any number of user inputs into RGBA array */
-export function parse(rawColor: Color): sRGB {
+export function parse(rawColor: ColorInput): sRGB {
   const unparsable = new Error(`Unable to parse color ${JSON.stringify(rawColor)}`);
@@ -293,3 +340,3 @@
   if (typeof rawColor == 'object') {
-    const c = { ...(rawColor as Record<string, number>) };
+    const c = { ...(rawColor as RGBObj | HSLObj | HWBObj | OklabObj | OklchObj | XYZObj) };
     let alpha = 1;
@@ -299,5 +346,7 @@ // grab alpha, ensure keys are lowercase
       if (k === 'alpha') {
-        alpha = clamp(c[k], 0, 1);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        alpha = clamp(c[k]!, 0, 1);
       } else {
-        c[k.toLowerCase()] = c[k];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (c as any)[k.toLowerCase()] = (c as any)[k];
       }
@@ -304,0 +353,0 @@ }

src/utils.ts

@@ -53,3 +53,3 @@ import type { ColorMatrix, sRGB } from './index';
 export function multiplyColorMatrix(color: sRGB, matrix: ColorMatrix): sRGB {
-  const product: sRGB = [...color];
+  const product = [...color];
   for (let y = 0; y < matrix.length; y++) {
@@ -56,0 +56,0 @@ let sum = 0;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

2523

increased by1.53%

Number of lines in readme file

288

increased by2.13%

Worsened metrics

Total package byte prevSize

125131

decreased by-3.92%

Dev dependency count

16

increased by6.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes