Skip to content

feat: color transforms, ramp introspection, and 0-1 value ranges - #15

Merged
basiclines merged 16 commits into
mainfrom
feat/color-transforms-and-introspection
Mar 17, 2026
Merged

feat: color transforms, ramp introspection, and 0-1 value ranges#15
basiclines merged 16 commits into
mainfrom
feat/color-transforms-and-introspection

Conversation

@basiclines

Copy link
Copy Markdown
Owner

Summary

Adds chainable OKLCH color transforms, ramp introspection, and normalizes value ranges to 0-1 across SDK and CLI. Based on power-user feedback from building a 384-theme terminal palette system.

Breaking Changes

  • color().hsl.s, color().hsl.l now return 0-1 (was 0-100)
  • color().oklch.l now returns 0-1 (was 0-100)
  • String format output (.format()) unchanged — still uses CSS percentages

New Features

Color Transforms (SDK + CLI)

All transforms operate in OKLCH space, return new immutable Color instances:

color("#66b172").lighten(0.1).desaturate(0.05).hex  // bright variant
color("#f85149").set({ lightness: 0.48, chroma: 0.15 }).hex
color("#ff0000").mix("#0000ff", 0.5, "lab").hex     // color-mix
color("#ff8800").blend("#0088ff", 0.5, "multiply").hex

CLI equivalent:

rampa color "#66b172" --lighten 0.1 --desaturate 0.05
rampa color "#ff0000" --mix "#0000ff" --ratio 0.5 --space lab

Ramp Introspection

All color space results now support .at() (0-based, returns Color) and .colors() (returns Color[]):

const ramp = new LinearColorSpace("#000", "#fff").size(12);
ramp.at(3).oklch.c               // chroma at step 3
ramp.at(3).lighten(0.1).hex      // transform a ramp step
ramp.colors().map(c => c.oklch.l) // lightness curve

Commits (rebase-friendly)

  1. Value range normalization — HSL/OKLCH to 0-1
  2. SDK color transforms — lighten/darken/saturate/desaturate/rotate/set/mix/blend + 31 tests
  3. Ramp introspection — .at() and .colors() on Linear/Plane/Cube + 19 tests
  4. CLI transform flags — mirror SDK API with --flags + 13 tests
  5. Documentation — SDK/CLI READMEs, AGENTS.md
  6. Site demos — CLI + SDK transform demos, rebuilt browser bundle

Test Results

  • SDK: 209 tests ✅ (63 new)
  • CLI: 219 tests ✅ (13 new)

basiclines and others added 6 commits March 16, 2026 15:04
Align structured property values with CSS spec conventions:
- HSL s/l: 0-100 → 0-1
- OKLCH l: 0-100 → 0-1
- String format output (.format()) unchanged — still uses percentages

Updated in SDK (color-result.ts, types.ts) and CLI (inspect.ts, json.ts).
Tests updated to match new ranges.

BREAKING CHANGE: color().hsl.s, color().hsl.l, and color().oklch.l now
return 0-1 instead of 0-100.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add chainable OKLCH-based transform methods to Color:
- lighten(n), darken(n) — absolute lightness delta
- saturate(n), desaturate(n) — absolute chroma delta
- rotate(n) — hue rotation in degrees
- set({ lightness?, chroma?, hue? }) — absolute OKLCH values
- mix(color, ratio, space?) — color space interpolation (oklch/lab/srgb)
- blend(color, opacity, mode) — compositing modes (multiply, screen, etc.)

All transforms return new immutable Color instances.
Added OklchSetValues type export.
31 new tests covering all methods, chaining, and immutability.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
All color space results now support:
- .at(index) / .at(sat, lgt) / .at(x, y, z) — returns full Color (0-based)
- .colors() — returns Color[] array of all ramp steps

This enables per-step analysis (chroma curves, lightness comparison)
and transforms on individual ramp steps without parsing CSS output.

19 new tests covering Linear, Plane, and Cube introspection.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
New flags mirroring SDK transform API:
- --lighten, --darken, --saturate, --desaturate, --rotate
- --set-lightness, --set-chroma, --set-hue
- --mix <color> with --ratio and --space
- --blend <color> with --ratio and --mode

Transforms applied left-to-right matching SDK chaining order.
Updated help text with full flag documentation.
13 new CLI integration tests.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
SDK README:
- Document color transforms API with examples
- Document mix/blend separation
- Document 0-1 value range table
- Add ramp introspection (.at/.colors) to color space sections
- Add OklchSetValues to types list

CLI README:
- Expand color subcommand with all transform flags
- Update examples with transform, mix, blend usage

AGENTS.md:
- Add Color Transforms convention
- Add Value Ranges convention

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add CLI and SDK transform demos to the landing page:
- CLI demo: lighten/desaturate, set OKLCH, mix in lab
- SDK demo: transform chains, mix, set, ramp introspection

Rebuild rampa-sdk.min.js with new transform and introspection APIs.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot AI review requested due to automatic review settings March 16, 2026 14:05
@github-actions

github-actions Bot commented Mar 16, 2026

Copy link
Copy Markdown

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR expands the SDK/CLI color capabilities by adding chainable OKLCH-based transforms, ramp introspection helpers (.at() / .colors()), and normalizing structured HSL/OKLCH component ranges to 0–1 while keeping string formatting CSS-compatible.

Changes:

  • Add immutable OKLCH transforms to color() (lighten/darken/saturate/desaturate/rotate/set/mix/blend) and expose related types.
  • Add ramp introspection APIs (.at(), .colors()) for Linear/Plane/Cube color spaces, plus tests.
  • Update CLI rampa color to support transform flags and update docs + site demos accordingly.

Reviewed changes

Copilot reviewed 19 out of 20 changed files in this pull request and generated 9 comments.

Show a summary per file
File Description
site/js/demos.js Adds new CLI/SDK “Color transforms” demo scripts to the site terminal demos.
site/index.html Adds nav buttons for the new “Color transforms” demos (CLI + SDK tabs).
sdk/tests/sdk.test.ts Updates HSL expectations to the new normalized 0–1 structured ranges.
sdk/tests/ramp-introspection.test.ts Adds test coverage for new .at() / .colors() ramp introspection APIs.
sdk/tests/color-transforms.test.ts Adds test coverage for new Color transform/mix/blend APIs and chaining behavior.
sdk/tests/cli-parity.test.ts Updates parity assertions to account for normalized structured values while keeping CSS-string outputs.
sdk/src/types.ts Extends public SDK types for transforms, introspection, and adds 'srgb' to InterpolationMode.
sdk/src/plane-color-space.ts Implements .at() / .colors() returning full Color objects for plane results.
sdk/src/linear-color-space.ts Implements .at() / .colors() returning full Color objects for linear results.
sdk/src/index.ts Re-exports new OklchSetValues type.
sdk/src/cube-color-space.ts Implements .at() / .colors() returning full Color objects for cube results.
sdk/src/color-result.ts Adds the Color transform/mix/blend implementations and normalizes structured HSL/OKLCH values.
sdk/README.md Documents normalized ranges, transforms, mix/blend, and ramp introspection.
cli/tests/color-transforms.test.ts Adds CLI test coverage for new transform flags and output modes.
cli/src/inspect.ts Normalizes structured HSL/OKLCH values to 0–1 in CLI inspection output.
cli/src/formatters/json.ts Normalizes structured HSL/OKLCH values to 0–1 in CLI JSON output.
cli/src/color.ts Adds transform flag parsing + transform application pipeline for rampa color.
cli/README.md Documents new rampa color transform/mix/blend flags and examples.
AGENTS.md Updates agent guidance with new transforms, introspection APIs, and normalized ranges.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Comment thread cli/src/color.ts
Comment thread sdk/src/linear-color-space.ts
Comment thread sdk/src/plane-color-space.ts
Comment thread sdk/README.md
Comment thread sdk/README.md
Color, // { hex, rgb, hsl, oklch, luminance, format(), output(), lighten(), ... }
ColorInfo, // { hex, rgb, hsl, oklch }
OklchSetValues, // { lightness?, chroma?, hue? } for color.set()
InterpolationMode, // 'oklch' | 'lab' | 'rgb'
Comment thread cli/src/color.ts
Comment thread sdk/src/color-result.ts
Comment thread sdk/src/cube-color-space.ts
Comment thread sdk/src/types.ts
basiclines and others added 10 commits March 16, 2026 22:32
- ImageDecoder: PNG (fast-png) and JPEG (jpeg-js) file decoding to RGBA
- PaletteEngine: grid-based pixel sampling (default 50k samples)
- k-means++ clustering with OKLCH deltaE post-merge (tolerance=4)
- ANSI color classification with per-bucket deltaE dedup
- Raw palette with configurable dedup tolerance
- Average color and temperature classification

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- palette(filePath, options?) → PaletteResult async builder
- .dominant() / .at() / .raw() / .ansi() / .average() / .temperature()
- .output('json' | 'css' | 'text') for serialization
- Configurable sampleSize, tolerance, count, rawTolerance, maxColors
- 21 tests covering all API surfaces

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- rampa palette <file> with --dominant, --raw, --ansi, --average, --temperature
- ANSI color swatches with OKLCH L/C/H annotations
- --output json|css|text, --tolerance, --sample-size, --count flags
- 11 tests covering argument parsing and flag combinations

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- SDK README: palette() API, options, examples
- CLI README: palette subcommand flags and usage
- AGENTS.md: architecture updates for image palette feature

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- k-means++ initialization for diverse centroid spread
- Post-merge collapses clusters closer than tolerance deltaE
- ANSI bucket deltaE dedup (no near-identical colors per category)
- buildGroupPalette: group entries by L/C/H with fixed buckets
- Default tolerance lowered from 8 to 4

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- .sortBy('L'|'C'|'H'|'frequency') on dominant/raw/ansi/group results
- SortablePaletteEntries: array with chainable sortBy
- SortablePaletteGroups: record with per-bucket sortBy
- .group({ by: 'L'|'C'|'H' }) for OKLCH property bucketing
- Custom bucket boundaries via GroupOptions.buckets
- Non-enumerable sortBy (clean JSON.stringify)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- --sort frequency|L|C|H for dominant/raw/ansi/group output
- --group L|C|H for OKLCH property bucketing
- --l-buckets, --c-buckets, --h-buckets to override bucket count
- Add hue (H) to OKLCH annotations in dominant/raw output
- Tolerance default lowered to 4, sample size default 50k

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- SDK: 14 new tests (sortBy immutability/chaining, group buckets, k-means++ merge)
- CLI: 7 new tests (--sort L, --group L/C/H, --output json, --l-buckets)
- Total palette tests: 53 (was 32)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- SDK README: .group() method with custom buckets, .sortBy() chaining
- CLI README: --sort, --group, --l/c/h-buckets in flags table + examples

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add .github/skills/update-docs/SKILL.md with documentation audit process,
file inventory, and defaults tracking table.

Reference the skill in AGENTS.md Development Skills section.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@basiclines
basiclines merged commit 76b6b18 into main Mar 17, 2026
1 check passed
@basiclines
basiclines deleted the feat/color-transforms-and-introspection branch March 17, 2026 11:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants