@basiclines/rampa-sdk 1.5.2 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -345,7 +345,11 @@ rampa('#3b82f6').size(5).lightness(10, 90).add('complementary').toJSON();
345
345
 
346
346
  ## Color Spaces
347
347
 
348
- Color spaces let you create structured palettes from a set of anchor colors and query them semantically. Two primitives are available:
348
+ Color spaces let you create structured palettes from a set of anchor colors and query them semantically. Three geometric primitives are available:
349
+
350
+ - **LinearColorSpace** — 1D interpolated ramp
351
+ - **PlaneColorSpace** — 2D saturation×lightness plane
352
+ - **CubeColorSpace** — 3D trilinear interpolation cube
349
353
 
350
354
  ### `LinearColorSpace`
351
355
 
@@ -355,11 +359,9 @@ Interpolates between two colors to produce an evenly-spaced ramp.
355
359
  import { LinearColorSpace } from '@basiclines/rampa-sdk';
356
360
 
357
361
  const neutral = new LinearColorSpace('#ffffff', '#000000').size(24);
358
- neutral(1) // → ColorResult (lightest)
359
- neutral(12) // → ColorResult (mid gray)
360
- neutral(24) // → ColorResult (darkest)
361
- neutral(12).hex // → '#666666'
362
- neutral(12).format('hsl') // → 'hsl(0, 0%, 40%)'
362
+ neutral(1) // → '#ffffff' (lightest, returns string directly)
363
+ neutral(12) // → '#666666' (mid gray)
364
+ neutral(12).hsl() // → 'hsl(0, 0%, 40%)'
363
365
  neutral.palette // → string[24]
364
366
  ```
365
367
 
@@ -377,6 +379,44 @@ base(1) // → '#45475a' (exact, no interpolation)
377
379
  base(3) // → '#a6e3a1'
378
380
  ```
379
381
 
382
+ ### `PlaneColorSpace`
383
+
384
+ Creates a 2D color plane for a single hue, anchored to shared dark/light values. Create one plane per hue.
385
+
386
+ ```
387
+ Y(lightness)
388
+ 1 │ light ─────────── hue
389
+ │ │ │
390
+ │ │ interpolated │
391
+ │ │ │
392
+ 0 │ dark ─────────── dark
393
+ └──────────────────────── X(saturation)
394
+ 0 1
395
+ ```
396
+
397
+ At Y=0 the entire row converges to the dark anchor.
398
+
399
+ ```typescript
400
+ import { PlaneColorSpace } from '@basiclines/rampa-sdk';
401
+
402
+ // One plane per hue, reuse dark/light anchors
403
+ const red = new PlaneColorSpace('#1e1e2e', '#cdd6f4', '#f38ba8').size(6);
404
+ const blue = new PlaneColorSpace('#1e1e2e', '#cdd6f4', '#89b4fa').size(6);
405
+
406
+ red(3, 5) // → ColorAccessor (saturation=3, lightness=5)
407
+ red(0, 3) // → achromatic at lightness 3 (no hue influence)
408
+ red(5, 5) // → full hue color
409
+ red(0, 0) // → dark anchor
410
+ red.palette // → string[36] (6²)
411
+
412
+ // Template literals and concatenation work directly
413
+ `background: ${red(3, 5)};` // → 'background: #ab34cd;'
414
+
415
+ // Format conversion
416
+ red(3, 5).hsl() // → 'hsl(280, 60%, 50%)'
417
+ red(3, 5).oklch() // → 'oklch(52.3% 0.198 310)'
418
+ ```
419
+
380
420
  ### `CubeColorSpace`
381
421
 
382
422
  Creates a 3D color cube from 8 corner colors via trilinear interpolation. The constructor keys become alias names for semantic lookups.
@@ -384,7 +424,7 @@ Creates a 3D color cube from 8 corner colors via trilinear interpolation. The co
384
424
  ```typescript
385
425
  import { CubeColorSpace } from '@basiclines/rampa-sdk';
386
426
 
387
- const tint = new CubeColorSpace({
427
+ const { r, b, tint } = new CubeColorSpace({
388
428
  k: '#1e1e2e', // origin (0,0,0)
389
429
  r: '#f38ba8', // x axis
390
430
  g: '#a6e3a1', // y axis
@@ -395,11 +435,9 @@ const tint = new CubeColorSpace({
395
435
  w: '#cdd6f4', // x+y+z
396
436
  }).size(6);
397
437
 
398
- tint({ r: 4 }) // → strong red
438
+ r(4) // → strong red
399
439
  tint({ r: 4, b: 2 }) // → red-blue blend
400
440
  tint({ w: 3 }) // → mid-white (all axes at 3)
401
- tint({ r: 5, w: 2 }) // → pastel red (white raises base)
402
- tint.palette // → string[216] (6³)
403
441
  ```
404
442
 
405
443
  #### Custom vocabulary
@@ -440,7 +478,7 @@ When you call `tint({ r: 4, b: 2 })`, each alias's mask is multiplied by its int
440
478
 
441
479
  ### Interpolation modes
442
480
 
443
- Both `LinearColorSpace` and `CubeColorSpace` support configurable interpolation:
481
+ `LinearColorSpace`, `PlaneColorSpace`, and `CubeColorSpace` all support configurable interpolation:
444
482
 
445
483
  | Mode | Description |
446
484
  |------|-------------|
@@ -453,24 +491,37 @@ Both `LinearColorSpace` and `CubeColorSpace` support configurable interpolation:
453
491
  // LinearColorSpace
454
492
  new LinearColorSpace('#ff0000', '#0000ff').interpolation('oklch').size(10)
455
493
  new LinearColorSpace('#ff0000', '#0000ff').interpolation('lab').size(10)
456
- new LinearColorSpace('#ff0000', '#0000ff').interpolation('rgb').size(10)
457
494
  new LinearColorSpace('#f00', '#0f0', '#00f').interpolation(false).size(3)
458
495
 
496
+ // PlaneColorSpace
497
+ new PlaneColorSpace('#000', '#fff', '#f00').interpolation('oklch').size(6)
498
+ new PlaneColorSpace('#000', '#fff', '#f00').interpolation('lab').size(6)
499
+
459
500
  // CubeColorSpace
460
- new CubeColorSpace({ ... }, { interpolation: 'lab' }).size(6)
501
+ new CubeColorSpace({ ... }).interpolation('lab').size(6)
461
502
  ```
462
503
 
463
- ### Color result chaining
504
+ ### Color accessor
505
+
506
+ All color space lookups return a `ColorAccessor` — a string that works directly in template literals and concatenation, with conversion methods:
507
+
508
+ ```typescript
509
+ const c = red(3, 5);
510
+ `${c}` // → '#ab34cd' (string coercion)
511
+ 'bg: ' + c // → 'bg: #ab34cd' (concatenation)
512
+ c.hex() // → '#ab34cd'
513
+ c.hsl() // → 'hsl(280, 60%, 50%)'
514
+ c.rgb() // → 'rgb(171, 52, 205)'
515
+ c.oklch() // → 'oklch(52.3% 0.198 310)'
516
+ c.luminance // → 0.52 (perceptual, 0–1)
517
+ ```
464
518
 
465
- All color space lookups return a `ColorResult` that acts as a hex string but supports format conversion:
519
+ Use `.format()` on the color space to change the default output format:
466
520
 
467
521
  ```typescript
468
- const color = tint({ r: 4, b: 2 });
469
- color.hex // → '#ab34cd'
470
- color.format('hsl') // → 'hsl(280, 60%, 50%)'
471
- color.format('rgb') // → 'rgb(171, 52, 205)'
472
- color.format('oklch') // → 'oklch(52.3% 0.198 310)'
473
- color.toString() // → '#ab34cd'
522
+ const rgbSpace = new PlaneColorSpace('#000', '#fff', '#f00').format('rgb').size(6);
523
+ `${rgbSpace(3, 5)}` // → 'rgb(255, 128, 128)'
524
+ rgbSpace(3, 5).hex() // → '#ff8080' (still available)
474
525
  ```
475
526
 
476
527
  ## Development
package/dist/index.js CHANGED
@@ -7939,8 +7939,77 @@ function generateCubeSpace(corners, stepsPerAxis, mode = "oklch") {
7939
7939
  }
7940
7940
  return colors;
7941
7941
  }
7942
+ function generatePlaneSpace(dark, light, hue3, stepsPerAxis, mode = "oklch") {
7943
+ const mix = (a, b, t) => mixWithMode(a, b, t, mode);
7944
+ const max11 = stepsPerAxis - 1;
7945
+ const colors = [];
7946
+ for (let xi = 0;xi < stepsPerAxis; xi++) {
7947
+ const tx = max11 === 0 ? 0 : xi / max11;
7948
+ const bottom = dark;
7949
+ const top = mix(light, hue3, tx);
7950
+ for (let yi = 0;yi < stepsPerAxis; yi++) {
7951
+ const ty = max11 === 0 ? 0 : yi / max11;
7952
+ colors.push(mix(bottom, top, ty));
7953
+ }
7954
+ }
7955
+ return colors;
7956
+ }
7942
7957
 
7943
7958
  // src/color-result.ts
7959
+ function detectColorFormat(color) {
7960
+ const trimmed = color.trim();
7961
+ if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(trimmed))
7962
+ return "hex";
7963
+ if (/^rgb\s*\(/.test(trimmed))
7964
+ return "rgb";
7965
+ if (/^hsl\s*\(/.test(trimmed))
7966
+ return "hsl";
7967
+ if (/^oklch\s*\(/.test(trimmed))
7968
+ return "oklch";
7969
+ throw new Error(`Unknown color format: ${color}`);
7970
+ }
7971
+ function validateSameFormat(colors) {
7972
+ const formats = colors.map((c2) => detectColorFormat(c2));
7973
+ const first = formats[0];
7974
+ for (let i = 1;i < formats.length; i++) {
7975
+ if (formats[i] !== first) {
7976
+ throw new Error(`All colors must use the same format. Found '${first}' and '${formats[i]}': ${colors[0]} vs ${colors[i]}`);
7977
+ }
7978
+ }
7979
+ return first;
7980
+ }
7981
+ function createColorAccessor(hex6, outputFormat) {
7982
+ const c2 = chroma_js_default(hex6);
7983
+ const [l] = c2.oklch();
7984
+ const formatColor2 = (fmt) => {
7985
+ switch (fmt) {
7986
+ case "hsl": {
7987
+ const [h, s, l2] = c2.hsl();
7988
+ return `hsl(${Math.round(h || 0)}, ${Math.round(s * 100)}%, ${Math.round(l2 * 100)}%)`;
7989
+ }
7990
+ case "rgb": {
7991
+ const [r2, g, b] = c2.rgb();
7992
+ return `rgb(${r2}, ${g}, ${b})`;
7993
+ }
7994
+ case "oklch": {
7995
+ const [l2, ch, h] = c2.oklch();
7996
+ return `oklch(${(l2 * 100).toFixed(1)}% ${ch.toFixed(3)} ${Math.round(h || 0)})`;
7997
+ }
7998
+ default:
7999
+ return hex6;
8000
+ }
8001
+ };
8002
+ const value = formatColor2(outputFormat);
8003
+ const accessor = new String(value);
8004
+ Object.defineProperties(accessor, {
8005
+ hex: { value: () => hex6, enumerable: false },
8006
+ hsl: { value: () => formatColor2("hsl"), enumerable: false },
8007
+ rgb: { value: () => formatColor2("rgb"), enumerable: false },
8008
+ oklch: { value: () => formatColor2("oklch"), enumerable: false },
8009
+ luminance: { value: l, enumerable: false }
8010
+ });
8011
+ return accessor;
8012
+ }
7944
8013
  function createColorResult(hex6) {
7945
8014
  const c2 = chroma_js_default(hex6);
7946
8015
  const [r2, g, b] = c2.rgb();
@@ -7978,30 +8047,39 @@ function createColorResult(hex6) {
7978
8047
  class LinearColorSpace {
7979
8048
  _colors;
7980
8049
  _interpolation = "oklch";
8050
+ _format = "hex";
7981
8051
  constructor(...colors) {
7982
8052
  if (colors.length < 2) {
7983
8053
  throw new Error("LinearColorSpace requires at least 2 colors");
7984
8054
  }
8055
+ validateSameFormat(colors);
7985
8056
  this._colors = colors;
7986
8057
  }
7987
8058
  interpolation(mode) {
7988
8059
  this._interpolation = mode;
7989
8060
  return this;
7990
8061
  }
8062
+ format(fmt) {
8063
+ this._format = fmt;
8064
+ return this;
8065
+ }
7991
8066
  size(steps) {
7992
8067
  let palette;
8068
+ const outputFormat = this._format;
7993
8069
  if (this._interpolation === false) {
7994
- palette = [...this._colors];
8070
+ palette = this._colors.map((c2) => chroma_js_default(c2).hex());
7995
8071
  } else {
7996
- palette = generateLinearSpace(this._colors[0], this._colors[this._colors.length - 1], steps, this._interpolation);
8072
+ const firstHex = chroma_js_default(this._colors[0]).hex();
8073
+ const lastHex = chroma_js_default(this._colors[this._colors.length - 1]).hex();
8074
+ palette = generateLinearSpace(firstHex, lastHex, steps, this._interpolation);
7997
8075
  }
7998
- return buildFn(palette);
8076
+ return buildFn(palette, outputFormat);
7999
8077
  }
8000
8078
  }
8001
- function buildFn(palette) {
8079
+ function buildFn(palette, outputFormat) {
8002
8080
  const fn4 = (index) => {
8003
8081
  const i = Math.max(1, Math.min(palette.length, index)) - 1;
8004
- return createColorResult(palette[i]);
8082
+ return createColorAccessor(palette[i], outputFormat);
8005
8083
  };
8006
8084
  fn4.palette = palette;
8007
8085
  fn4.size = palette.length;
@@ -8023,11 +8101,13 @@ var CORNER_MASKS = [
8023
8101
  class CubeColorSpace {
8024
8102
  _corners;
8025
8103
  _interpolation;
8104
+ _format = "hex";
8026
8105
  constructor(corners, options) {
8027
8106
  const keys = Object.keys(corners);
8028
8107
  if (keys.length !== 8) {
8029
8108
  throw new Error(`CubeColorSpace requires exactly 8 corner colors, got ${keys.length}`);
8030
8109
  }
8110
+ validateSameFormat(Object.values(corners));
8031
8111
  this._corners = corners;
8032
8112
  this._interpolation = options?.interpolation ?? "oklch";
8033
8113
  }
@@ -8035,9 +8115,14 @@ class CubeColorSpace {
8035
8115
  this._interpolation = mode;
8036
8116
  return this;
8037
8117
  }
8118
+ format(fmt) {
8119
+ this._format = fmt;
8120
+ return this;
8121
+ }
8038
8122
  size(stepsPerAxis) {
8039
8123
  const keys = Object.keys(this._corners);
8040
- const cornerColors = keys.map((k3) => this._corners[k3]);
8124
+ const cornerColors = keys.map((k3) => chroma_js_default(this._corners[k3]).hex());
8125
+ const outputFormat = this._format;
8041
8126
  const aliases = {};
8042
8127
  for (let i = 0;i < 8; i++) {
8043
8128
  aliases[keys[i]] = CORNER_MASKS[i];
@@ -8049,7 +8134,7 @@ class CubeColorSpace {
8049
8134
  cy = Math.max(0, Math.min(max11, Math.round(cy)));
8050
8135
  cz = Math.max(0, Math.min(max11, Math.round(cz)));
8051
8136
  const index = cx * stepsPerAxis * stepsPerAxis + cy * stepsPerAxis + cz;
8052
- return createColorResult(palette[index]);
8137
+ return createColorAccessor(palette[index], outputFormat);
8053
8138
  };
8054
8139
  const tint = (query) => {
8055
8140
  let cx = 0, cy = 0, cz = 0;
@@ -8077,6 +8162,46 @@ class CubeColorSpace {
8077
8162
  }
8078
8163
  }
8079
8164
 
8165
+ // src/plane-color-space.ts
8166
+ class PlaneColorSpace {
8167
+ _dark;
8168
+ _light;
8169
+ _hue;
8170
+ _interpolation;
8171
+ _format = "hex";
8172
+ constructor(dark, light, hue3) {
8173
+ validateSameFormat([dark, light, hue3]);
8174
+ this._dark = chroma_js_default(dark).hex();
8175
+ this._light = chroma_js_default(light).hex();
8176
+ this._hue = chroma_js_default(hue3).hex();
8177
+ this._interpolation = "oklch";
8178
+ }
8179
+ interpolation(mode) {
8180
+ this._interpolation = mode;
8181
+ return this;
8182
+ }
8183
+ format(fmt) {
8184
+ this._format = fmt;
8185
+ return this;
8186
+ }
8187
+ size(stepsPerAxis) {
8188
+ const palette = generatePlaneSpace(this._dark, this._light, this._hue, stepsPerAxis, this._interpolation);
8189
+ const fmt = this._format;
8190
+ const lookup = (saturation, lightness) => {
8191
+ const sx = Math.max(0, Math.min(stepsPerAxis - 1, saturation));
8192
+ const ly = Math.max(0, Math.min(stepsPerAxis - 1, lightness));
8193
+ const idx = sx * stepsPerAxis + ly;
8194
+ return createColorAccessor(palette[idx], fmt);
8195
+ };
8196
+ const result = lookup;
8197
+ Object.defineProperties(result, {
8198
+ palette: { value: palette, enumerable: true },
8199
+ size: { value: stepsPerAxis, enumerable: true }
8200
+ });
8201
+ return result;
8202
+ }
8203
+ }
8204
+
8080
8205
  // ../src/usecases/MixColors.ts
8081
8206
  function mixColors(color1, color2, t) {
8082
8207
  const oklch1 = convertToOklch(color1);
@@ -8130,6 +8255,7 @@ export {
8130
8255
  color,
8131
8256
  ReadOnlyBuilder,
8132
8257
  RampaBuilder,
8258
+ PlaneColorSpace,
8133
8259
  LinearColorSpace,
8134
8260
  CubeColorSpace
8135
8261
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@basiclines/rampa-sdk",
3
- "version": "1.5.2",
3
+ "version": "1.7.0",
4
4
  "description": "Programmatic JavaScript SDK for generating color palettes with rampa",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
package/dist/builder.d.ts DELETED
@@ -1,38 +0,0 @@
1
- import type { ColorFormat, ScaleType, BlendMode, HarmonyType, RampaResult } from './types';
2
- export declare class RampaBuilder {
3
- private _baseColor;
4
- private _size;
5
- private _format;
6
- private _lightnessStart;
7
- private _lightnessEnd;
8
- private _saturationStart;
9
- private _saturationEnd;
10
- private _hueStart;
11
- private _hueEnd;
12
- private _lightnessScale;
13
- private _saturationScale;
14
- private _hueScale;
15
- private _tintColor?;
16
- private _tintOpacity;
17
- private _tintBlend;
18
- private _harmonies;
19
- constructor(baseColor: string);
20
- size(steps: number): this;
21
- format(fmt: ColorFormat): this;
22
- lightness(start: number, end: number): this;
23
- saturation(start: number, end: number): this;
24
- hue(start: number, end: number): this;
25
- lightnessScale(scale: ScaleType): this;
26
- saturationScale(scale: ScaleType): this;
27
- hueScale(scale: ScaleType): this;
28
- tint(color: string, opacity: number, blend?: BlendMode): this;
29
- add(type: HarmonyType): this;
30
- add(type: 'shift', degrees: number): this;
31
- private buildConfig;
32
- private formatColor;
33
- private getHarmonyColors;
34
- private buildRamps;
35
- generate(): RampaResult;
36
- toCSS(): string;
37
- toJSON(): string;
38
- }
@@ -1,6 +0,0 @@
1
- import type { ColorResult } from './types';
2
- /**
3
- * Create a ColorResult from a hex string.
4
- * Acts as a string (hex) by default, supports .format() for conversions.
5
- */
6
- export declare function createColorResult(hex: string): ColorResult;
@@ -1,41 +0,0 @@
1
- import type { InterpolationMode, CubeColorSpaceResult } from './types';
2
- /**
3
- * Create a 3D color cube from 8 named corner colors.
4
- *
5
- * The constructor keys become shortcut function names and tint() aliases.
6
- * Key order determines cube position (see CORNER_MASKS above).
7
- *
8
- * @example
9
- * ```ts
10
- * const space = new CubeColorSpace({
11
- * k: '#1e1e2e', r: '#f38ba8', g: '#a6e3a1', b: '#89b4fa',
12
- * y: '#f9e2af', m: '#cba6f7', c: '#94e2d5', w: '#cdd6f4',
13
- * }).size(6);
14
- *
15
- * // With different interpolation:
16
- * const space2 = new CubeColorSpace({ ... }).interpolation('lab').size(6);
17
- *
18
- * space.r(4) // → ColorResult (single-axis shortcut)
19
- * space.tint({ r: 3, b: 2 }) // → ColorResult (multi-axis)
20
- * space.cube(3, 0, 2) // → ColorResult (raw coordinates)
21
- * space.palette // → string[216]
22
- *
23
- * // Destructure for convenience:
24
- * const { r, w, tint, cube } = space;
25
- * ```
26
- */
27
- export declare class CubeColorSpace {
28
- private _corners;
29
- private _interpolation;
30
- constructor(corners: Record<string, string>, options?: {
31
- interpolation?: InterpolationMode;
32
- });
33
- /**
34
- * Set the interpolation mode.
35
- */
36
- interpolation(mode: InterpolationMode): this;
37
- /**
38
- * Set the steps per axis and return the color space accessor object.
39
- */
40
- size(stepsPerAxis: number): CubeColorSpaceResult;
41
- }
@@ -1,2 +0,0 @@
1
- import type { RampResult } from '../types';
2
- export declare function formatCssOutput(ramps: RampResult[]): string;
@@ -1,2 +0,0 @@
1
- import type { RampResult } from '../types';
2
- export declare function formatJsonOutput(ramps: RampResult[]): string;
package/dist/index.d.ts DELETED
@@ -1,38 +0,0 @@
1
- import { RampaBuilder } from './builder';
2
- import { ReadOnlyBuilder } from './read-only';
3
- import { LinearColorSpace } from './linear-color-space';
4
- import { CubeColorSpace } from './cube-color-space';
5
- import type { ColorFormat, ScaleType, BlendMode, HarmonyType, RampResult, RampaResult, ColorInfo, InterpolationMode, ColorResult, RgbComponents, LinearColorSpaceFn, CubeColorSpaceResult, ColorSpaceOptions } from './types';
6
- /**
7
- * Create a new color ramp builder from a base color.
8
- *
9
- * @example
10
- * ```ts
11
- * import { rampa } from '@basiclines/rampa-sdk';
12
- *
13
- * const result = rampa('#3b82f6').size(10).generate();
14
- * const css = rampa('#3b82f6').add('complementary').toCSS();
15
- * ```
16
- */
17
- export declare function rampa(baseColor: string): RampaBuilder;
18
- export declare namespace rampa {
19
- var convert: (color: string, format: ColorFormat) => string;
20
- var readOnly: (color: string) => ReadOnlyBuilder;
21
- var mix: (color1: string, color2: string, t: number) => string;
22
- }
23
- /**
24
- * Create a ColorResult from any hex color string.
25
- * Provides .hex, .rgb, .luminance, .format() for color inspection.
26
- *
27
- * @example
28
- * ```ts
29
- * import { color } from '@basiclines/rampa-sdk';
30
- * const c = color('#ff0000');
31
- * c.rgb // { r: 255, g: 0, b: 0 }
32
- * c.luminance // 0.627 (OKLCH perceptual lightness)
33
- * c.format('hsl') // 'hsl(0, 100%, 50%)'
34
- * ```
35
- */
36
- export declare function color(hex: string): ColorResult;
37
- export { RampaBuilder, ReadOnlyBuilder, LinearColorSpace, CubeColorSpace };
38
- export type { ColorFormat, ScaleType, BlendMode, HarmonyType, RampResult, RampaResult, ColorInfo, InterpolationMode, ColorResult, RgbComponents, LinearColorSpaceFn, CubeColorSpaceResult, ColorSpaceOptions, };
@@ -1,36 +0,0 @@
1
- import type { InterpolationMode, LinearColorSpaceFn } from './types';
2
- /**
3
- * Create a linear color space.
4
- *
5
- * @example
6
- * ```ts
7
- * // Interpolated (default: oklch)
8
- * const neutral = new LinearColorSpace('#ffffff', '#000000').size(24);
9
- * neutral(12) // → ColorResult (mid gray)
10
- * neutral(12).format('hsl') // → 'hsl(...)'
11
- *
12
- * // Different interpolation
13
- * const ramp = new LinearColorSpace('#ff0000', '#0000ff').interpolation('lab').size(10);
14
- *
15
- * // Lookup table — no interpolation, just a plain color array
16
- * const base = new LinearColorSpace('#000', '#f00', '#0f0', '#ff0', '#00f', '#f0f', '#0ff', '#fff')
17
- * .interpolation(false)
18
- * .size(8);
19
- * base(1) // → first color
20
- * base(3) // → third color
21
- * ```
22
- */
23
- export declare class LinearColorSpace {
24
- private _colors;
25
- private _interpolation;
26
- constructor(...colors: string[]);
27
- /**
28
- * Set the interpolation mode.
29
- * Pass false for a plain lookup table (no interpolation).
30
- */
31
- interpolation(mode: InterpolationMode | false): this;
32
- /**
33
- * Set the number of color steps and return the color accessor function.
34
- */
35
- size(steps: number): LinearColorSpaceFn;
36
- }
@@ -1,8 +0,0 @@
1
- import type { ColorFormat, ColorInfo } from './types';
2
- export declare class ReadOnlyBuilder {
3
- private _color;
4
- private _format?;
5
- constructor(color: string);
6
- format(fmt: ColorFormat): this;
7
- generate(): ColorInfo | string;
8
- }
package/dist/types.d.ts DELETED
@@ -1,86 +0,0 @@
1
- export type ColorFormat = 'hex' | 'hsl' | 'rgb' | 'oklch';
2
- export type ScaleType = 'linear' | 'geometric' | 'fibonacci' | 'golden-ratio' | 'logarithmic' | 'powers-of-2' | 'musical-ratio' | 'cielab-uniform' | 'ease-in' | 'ease-out' | 'ease-in-out';
3
- export type BlendMode = 'normal' | 'darken' | 'multiply' | 'plus-darker' | 'color-burn' | 'lighten' | 'screen' | 'plus-lighter' | 'color-dodge' | 'overlay' | 'soft-light' | 'hard-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity';
4
- export type HarmonyType = 'complementary' | 'triadic' | 'analogous' | 'split-complementary' | 'square' | 'compound';
5
- export interface RampResult {
6
- name: string;
7
- baseColor: string;
8
- colors: string[];
9
- }
10
- export interface RampaResult {
11
- ramps: RampResult[];
12
- }
13
- export interface ColorInfo {
14
- hex: string;
15
- rgb: {
16
- r: number;
17
- g: number;
18
- b: number;
19
- };
20
- hsl: {
21
- h: number;
22
- s: number;
23
- l: number;
24
- };
25
- oklch: {
26
- l: number;
27
- c: number;
28
- h: number;
29
- };
30
- }
31
- export type InterpolationMode = 'oklch' | 'lab' | 'rgb';
32
- export interface ColorSpaceOptions {
33
- interpolation?: InterpolationMode;
34
- }
35
- /**
36
- * RGB components (0-255).
37
- */
38
- export interface RgbComponents {
39
- r: number;
40
- g: number;
41
- b: number;
42
- }
43
- /**
44
- * A color result that acts as a hex string but supports format chaining.
45
- */
46
- export interface ColorResult {
47
- /** Hex color string */
48
- hex: string;
49
- /** RGB components (0-255) */
50
- rgb: RgbComponents;
51
- /** Perceptual luminance (0-1) using OKLCH lightness */
52
- luminance: number;
53
- /** Format the color as hsl, rgb, oklch, or hex */
54
- format(fmt: ColorFormat): string;
55
- /** String coercion returns hex */
56
- toString(): string;
57
- }
58
- /**
59
- * The function signature returned by LinearColorSpace.
60
- * Call it with a 1-based index to get a color.
61
- */
62
- export interface LinearColorSpaceFn {
63
- (index: number): ColorResult;
64
- palette: string[];
65
- size: number;
66
- }
67
- /**
68
- * The result object returned by CubeColorSpace.size().
69
- * Provides multiple ways to access colors:
70
- * - Per-corner shortcut functions (e.g. r(3), w(5))
71
- * - tint() for multi-axis lookups
72
- * - cube() for raw 3D coordinate access
73
- * - palette for the full color array
74
- */
75
- export interface CubeColorSpaceResult {
76
- /** Multi-axis lookup: tint({ r: 3, b: 2 }) */
77
- tint(query: Record<string, number>): ColorResult;
78
- /** Raw 3D coordinate lookup: cube(x, y, z) */
79
- cube(x: number, y: number, z: number): ColorResult;
80
- /** Full palette array */
81
- palette: string[];
82
- /** Steps per axis */
83
- size: number;
84
- /** Per-corner shortcut functions, keyed by constructor key names */
85
- [key: string]: ((index: number) => ColorResult) | string[] | number | ((query: Record<string, number>) => ColorResult) | ((x: number, y: number, z: number) => ColorResult);
86
- }