feat: color transforms, ramp introspection, and 0-1 value ranges - #15
Merged
Conversation
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>
|
🚀 Netlify Deploy Preview https://feat-color-transforms-and-introspecti--rampadesign.netlify.app |
There was a problem hiding this comment.
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 colorto 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.
| 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' |
- 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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.lnow return 0-1 (was 0-100)color().oklch.lnow returns 0-1 (was 0-100).format()) unchanged — still uses CSS percentagesNew Features
Color Transforms (SDK + CLI)
All transforms operate in OKLCH space, return new immutable Color instances:
CLI equivalent:
Ramp Introspection
All color space results now support
.at()(0-based, returns Color) and.colors()(returns Color[]):Commits (rebase-friendly)
Test Results