@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 +72 -21
- package/dist/index.js +133 -7
- package/package.json +1 -1
- package/dist/builder.d.ts +0 -38
- package/dist/color-result.d.ts +0 -6
- package/dist/cube-color-space.d.ts +0 -41
- package/dist/formatters/css.d.ts +0 -2
- package/dist/formatters/json.d.ts +0 -2
- package/dist/index.d.ts +0 -38
- package/dist/linear-color-space.d.ts +0 -36
- package/dist/read-only.d.ts +0 -8
- package/dist/types.d.ts +0 -86
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.
|
|
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) // →
|
|
359
|
-
neutral(12) // →
|
|
360
|
-
neutral(
|
|
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
|
-
|
|
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
|
-
|
|
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({ ... }
|
|
501
|
+
new CubeColorSpace({ ... }).interpolation('lab').size(6)
|
|
461
502
|
```
|
|
462
503
|
|
|
463
|
-
### Color
|
|
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
|
-
|
|
519
|
+
Use `.format()` on the color space to change the default output format:
|
|
466
520
|
|
|
467
521
|
```typescript
|
|
468
|
-
const
|
|
469
|
-
|
|
470
|
-
|
|
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 =
|
|
8070
|
+
palette = this._colors.map((c2) => chroma_js_default(c2).hex());
|
|
7995
8071
|
} else {
|
|
7996
|
-
|
|
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
|
|
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
|
|
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
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
|
-
}
|
package/dist/color-result.d.ts
DELETED
|
@@ -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
|
-
}
|
package/dist/formatters/css.d.ts
DELETED
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
|
-
}
|
package/dist/read-only.d.ts
DELETED
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
|
-
}
|