@promptctl/rich-js 0.12.0 → 0.13.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/dist/core/color.d.ts +41 -1
- package/dist/core/color.js +107 -5
- package/dist/template-bindings/color-funcs.d.ts +12 -2
- package/dist/template-bindings/color-funcs.js +12 -4
- package/dist/template-bindings/index.d.ts +7 -5
- package/dist/template-bindings/index.js +9 -6
- package/dist/themes/colorMath.d.ts +11 -19
- package/dist/themes/colorMath.js +38 -31
- package/package.json +1 -1
package/dist/core/color.d.ts
CHANGED
|
@@ -31,11 +31,34 @@ export declare class ColorRgba {
|
|
|
31
31
|
*/
|
|
32
32
|
compositeOver(bg: ColorRgba): ColorRgba;
|
|
33
33
|
}
|
|
34
|
+
/**
|
|
35
|
+
* WCAG 2.x relative luminance (0..1) of an opaque color. The single
|
|
36
|
+
* luminance function in the codebase — `contrastFor`, `contrastRatio`, and
|
|
37
|
+
* any caller that needs to reason about readability all funnel through it.
|
|
38
|
+
* [LAW:one-source-of-truth]
|
|
39
|
+
*/
|
|
40
|
+
export declare function relativeLuminance(c: ColorRgba): number;
|
|
41
|
+
/**
|
|
42
|
+
* WCAG 2.x contrast ratio between two colors, in [1, 21]. Symmetric — the
|
|
43
|
+
* order of arguments does not matter. 4.5 is the AA threshold for normal
|
|
44
|
+
* text, 3.0 for large text.
|
|
45
|
+
*
|
|
46
|
+
* Assumes opaque inputs: alpha is ignored, since the displayed contrast of a
|
|
47
|
+
* translucent color depends on what it composites over. For a translucent
|
|
48
|
+
* foreground, flatten it first (or use `ensureContrast`, which does).
|
|
49
|
+
*/
|
|
50
|
+
export declare function contrastRatio(a: ColorRgba, b: ColorRgba): number;
|
|
34
51
|
export declare class ColorTable {
|
|
35
52
|
private readonly colors;
|
|
53
|
+
private readonly firstIndex;
|
|
36
54
|
private readonly matchCache;
|
|
37
|
-
|
|
55
|
+
private readonly readableCache;
|
|
56
|
+
constructor(colors: ColorRgba[], firstIndex?: number);
|
|
38
57
|
get(index: number): ColorRgba;
|
|
58
|
+
private luminanceCache;
|
|
59
|
+
/** Each entry's relative luminance, computed once per table. */
|
|
60
|
+
private luminances;
|
|
61
|
+
/** How many entries the table holds (terminal indices `firstIndex`…). */
|
|
39
62
|
get size(): number;
|
|
40
63
|
/**
|
|
41
64
|
* Finds the nearest table index to the given color (Euclidean RGB distance, cached).
|
|
@@ -43,6 +66,16 @@ export declare class ColorTable {
|
|
|
43
66
|
* don't collide, but is not used in the distance metric.
|
|
44
67
|
*/
|
|
45
68
|
match(value: ColorRgba): number;
|
|
69
|
+
/**
|
|
70
|
+
* The nearest entry to `value` (the distance `match` uses) among those that
|
|
71
|
+
* clear `minRatio` against `on`; when none does, the entry with the most
|
|
72
|
+
* contrast against `on`. Text downgraded on its own background: `match`
|
|
73
|
+
* moves text and background independently, and two independent roundings
|
|
74
|
+
* can meet in the middle, so a pair that read at 4.5:1 in truecolor can
|
|
75
|
+
* draw at 2:1. [LAW:dataflow-not-control-flow] One scan scores every entry;
|
|
76
|
+
* the ratio decides which one wins.
|
|
77
|
+
*/
|
|
78
|
+
matchReadable(value: ColorRgba, on: ColorRgba, minRatio: number): number;
|
|
46
79
|
}
|
|
47
80
|
export declare enum ColorDepth {
|
|
48
81
|
DEFAULT = 0,
|
|
@@ -153,6 +186,13 @@ export declare class TerminalTheme {
|
|
|
153
186
|
}
|
|
154
187
|
export declare const STANDARD_TABLE: ColorTable;
|
|
155
188
|
export declare const EIGHT_BIT_TABLE: ColorTable;
|
|
189
|
+
/**
|
|
190
|
+
* What a downgrade to 256 colours may choose: the cube and the grey ramp,
|
|
191
|
+
* indices 16–255. Indices 0–15 are the terminal's own ANSI colours, which
|
|
192
|
+
* every theme redefines, so their RGB is unknown and a match against them is
|
|
193
|
+
* a guess; Python Rich never picks them either.
|
|
194
|
+
*/
|
|
195
|
+
export declare const EIGHT_BIT_DOWNGRADE_TABLE: ColorTable;
|
|
156
196
|
export declare const WINDOWS_TABLE: ColorTable;
|
|
157
197
|
export declare const ANSI_COLOR_NAMES: Record<string, number>;
|
|
158
198
|
/**
|
package/dist/core/color.js
CHANGED
|
@@ -65,16 +65,74 @@ export class ColorRgba {
|
|
|
65
65
|
return new ColorRgba(Math.round(bg.red + (this.red - bg.red) * t), Math.round(bg.green + (this.green - bg.green) * t), Math.round(bg.blue + (this.blue - bg.blue) * t), 1);
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
|
+
/**
|
|
69
|
+
* WCAG 2.x relative luminance (0..1) of an opaque color. The single
|
|
70
|
+
* luminance function in the codebase — `contrastFor`, `contrastRatio`, and
|
|
71
|
+
* any caller that needs to reason about readability all funnel through it.
|
|
72
|
+
* [LAW:one-source-of-truth]
|
|
73
|
+
*/
|
|
74
|
+
export function relativeLuminance(c) {
|
|
75
|
+
const ch = (v) => {
|
|
76
|
+
const x = v / 255;
|
|
77
|
+
return x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
|
|
78
|
+
};
|
|
79
|
+
return 0.2126 * ch(c.red) + 0.7152 * ch(c.green) + 0.0722 * ch(c.blue);
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* WCAG 2.x contrast ratio between two colors, in [1, 21]. Symmetric — the
|
|
83
|
+
* order of arguments does not matter. 4.5 is the AA threshold for normal
|
|
84
|
+
* text, 3.0 for large text.
|
|
85
|
+
*
|
|
86
|
+
* Assumes opaque inputs: alpha is ignored, since the displayed contrast of a
|
|
87
|
+
* translucent color depends on what it composites over. For a translucent
|
|
88
|
+
* foreground, flatten it first (or use `ensureContrast`, which does).
|
|
89
|
+
*/
|
|
90
|
+
export function contrastRatio(a, b) {
|
|
91
|
+
return luminanceRatio(relativeLuminance(a), relativeLuminance(b));
|
|
92
|
+
}
|
|
93
|
+
// [LAW:single-enforcer] The WCAG ratio over two relative luminances — the one
|
|
94
|
+
// formula `contrastRatio` and `ColorTable.matchReadable` (which caches its
|
|
95
|
+
// entries' luminances) both measure with.
|
|
96
|
+
function luminanceRatio(la, lb) {
|
|
97
|
+
return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
|
|
98
|
+
}
|
|
68
99
|
// --- ColorTable ---
|
|
100
|
+
/**
|
|
101
|
+
* An indexed palette: entry `i` of `colors` is terminal index `firstIndex + i`.
|
|
102
|
+
* `firstIndex` lets a table hold only the part of a palette a downgrade may
|
|
103
|
+
* choose (the 256-colour cube and grey ramp start at 16) while every index it
|
|
104
|
+
* reports is the terminal's own.
|
|
105
|
+
*/
|
|
106
|
+
// [LAW:single-enforcer] The one size policy for ColorTable's memos: a key is
|
|
107
|
+
// derived from colours a long-running host computes without end (ramp stops,
|
|
108
|
+
// mixes), so an unbounded map grows with every render. Clearing at the cap is
|
|
109
|
+
// the policy `cellLen` already uses; a refill costs one table scan per key.
|
|
110
|
+
const TABLE_CACHE_MAX = 4096;
|
|
111
|
+
function remember(cache, key, index) {
|
|
112
|
+
if (cache.size >= TABLE_CACHE_MAX)
|
|
113
|
+
cache.clear();
|
|
114
|
+
cache.set(key, index);
|
|
115
|
+
return index;
|
|
116
|
+
}
|
|
69
117
|
export class ColorTable {
|
|
70
118
|
colors;
|
|
119
|
+
firstIndex;
|
|
71
120
|
matchCache = new Map();
|
|
72
|
-
|
|
121
|
+
readableCache = new Map();
|
|
122
|
+
constructor(colors, firstIndex = 0) {
|
|
73
123
|
this.colors = colors;
|
|
124
|
+
this.firstIndex = firstIndex;
|
|
74
125
|
}
|
|
75
126
|
get(index) {
|
|
76
|
-
return this.colors[index];
|
|
127
|
+
return this.colors[index - this.firstIndex];
|
|
128
|
+
}
|
|
129
|
+
luminanceCache;
|
|
130
|
+
/** Each entry's relative luminance, computed once per table. */
|
|
131
|
+
luminances() {
|
|
132
|
+
this.luminanceCache ??= this.colors.map(relativeLuminance);
|
|
133
|
+
return this.luminanceCache;
|
|
77
134
|
}
|
|
135
|
+
/** How many entries the table holds (terminal indices `firstIndex`…). */
|
|
78
136
|
get size() {
|
|
79
137
|
return this.colors.length;
|
|
80
138
|
}
|
|
@@ -101,8 +159,45 @@ export class ColorTable {
|
|
|
101
159
|
bestIndex = i;
|
|
102
160
|
}
|
|
103
161
|
}
|
|
104
|
-
this.matchCache
|
|
105
|
-
|
|
162
|
+
return remember(this.matchCache, key, this.firstIndex + bestIndex);
|
|
163
|
+
}
|
|
164
|
+
/**
|
|
165
|
+
* The nearest entry to `value` (the distance `match` uses) among those that
|
|
166
|
+
* clear `minRatio` against `on`; when none does, the entry with the most
|
|
167
|
+
* contrast against `on`. Text downgraded on its own background: `match`
|
|
168
|
+
* moves text and background independently, and two independent roundings
|
|
169
|
+
* can meet in the middle, so a pair that read at 4.5:1 in truecolor can
|
|
170
|
+
* draw at 2:1. [LAW:dataflow-not-control-flow] One scan scores every entry;
|
|
171
|
+
* the ratio decides which one wins.
|
|
172
|
+
*/
|
|
173
|
+
matchReadable(value, on, minRatio) {
|
|
174
|
+
const key = `${value.red},${value.green},${value.blue}|${on.red},${on.green},${on.blue}|${minRatio}`;
|
|
175
|
+
const cached = this.readableCache.get(key);
|
|
176
|
+
if (cached !== undefined)
|
|
177
|
+
return cached;
|
|
178
|
+
const lOn = relativeLuminance(on);
|
|
179
|
+
let best = 0;
|
|
180
|
+
let bestPasses = false;
|
|
181
|
+
let bestScore = -Infinity;
|
|
182
|
+
for (let i = 0; i < this.colors.length; i++) {
|
|
183
|
+
const c = this.colors[i];
|
|
184
|
+
const lc = this.luminances()[i];
|
|
185
|
+
const ratio = luminanceRatio(lc, lOn);
|
|
186
|
+
const passes = ratio >= minRatio;
|
|
187
|
+
const dr = c.red - value.red;
|
|
188
|
+
const dg = c.green - value.green;
|
|
189
|
+
const db = c.blue - value.blue;
|
|
190
|
+
// A passing entry scores by closeness; a failing one only by contrast,
|
|
191
|
+
// and loses to every passing one.
|
|
192
|
+
const score = passes ? -(dr * dr + dg * dg + db * db) : ratio;
|
|
193
|
+
if ((passes && !bestPasses) ||
|
|
194
|
+
(passes === bestPasses && score > bestScore)) {
|
|
195
|
+
best = i;
|
|
196
|
+
bestPasses = passes;
|
|
197
|
+
bestScore = score;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
return remember(this.readableCache, key, this.firstIndex + best);
|
|
106
201
|
}
|
|
107
202
|
}
|
|
108
203
|
// --- Enums ---
|
|
@@ -370,7 +465,7 @@ export class ColorSpec {
|
|
|
370
465
|
const triplet = this.getTruecolor();
|
|
371
466
|
switch (targetSystem) {
|
|
372
467
|
case ColorDepth.EIGHT_BIT: {
|
|
373
|
-
const index =
|
|
468
|
+
const index = EIGHT_BIT_DOWNGRADE_TABLE.match(triplet);
|
|
374
469
|
return ColorSpec.fromAnsi(index);
|
|
375
470
|
}
|
|
376
471
|
case ColorDepth.STANDARD: {
|
|
@@ -537,6 +632,13 @@ function buildWindowsTable() {
|
|
|
537
632
|
}
|
|
538
633
|
export const STANDARD_TABLE = new ColorTable(buildStandard16());
|
|
539
634
|
export const EIGHT_BIT_TABLE = new ColorTable(build256Table());
|
|
635
|
+
/**
|
|
636
|
+
* What a downgrade to 256 colours may choose: the cube and the grey ramp,
|
|
637
|
+
* indices 16–255. Indices 0–15 are the terminal's own ANSI colours, which
|
|
638
|
+
* every theme redefines, so their RGB is unknown and a match against them is
|
|
639
|
+
* a guess; Python Rich never picks them either.
|
|
640
|
+
*/
|
|
641
|
+
export const EIGHT_BIT_DOWNGRADE_TABLE = new ColorTable(build256Table().slice(16), 16);
|
|
540
642
|
export const WINDOWS_TABLE = new ColorTable(buildWindowsTable());
|
|
541
643
|
// --- Internal fallback theme ---
|
|
542
644
|
//
|
|
@@ -55,7 +55,13 @@
|
|
|
55
55
|
* from that point on the math is pure. A consumer with no theme system at all still gets
|
|
56
56
|
* the full color vocabulary by feeding it hex literals. [LAW:one-way-deps]
|
|
57
57
|
*/
|
|
58
|
-
import type { FuncMap } from "@promptctl/go-template-js";
|
|
58
|
+
import type { FuncMap, TemplateFunc } from "@promptctl/go-template-js";
|
|
59
|
+
import { ColorDepth } from "../core/color.js";
|
|
60
|
+
/**
|
|
61
|
+
* The `readableOn` binding, measuring at the depth `drawnAt` names when it is
|
|
62
|
+
* evaluated — a consumer that renders at a per-call depth registers its own.
|
|
63
|
+
*/
|
|
64
|
+
export declare const readableOnFunc: (drawnAt: () => ColorDepth) => TemplateFunc;
|
|
59
65
|
/**
|
|
60
66
|
* The palette-free color vocabulary: every function takes colors and returns a
|
|
61
67
|
* color, so they compose by nesting.
|
|
@@ -73,5 +79,9 @@ import type { FuncMap } from "@promptctl/go-template-js";
|
|
|
73
79
|
*
|
|
74
80
|
* Pair with `paletteFuncs()` to name colors from a theme, and with
|
|
75
81
|
* `richTextStyleFuncs()`'s `fg`/`bg` to paint them onto text.
|
|
82
|
+
*
|
|
83
|
+
* @param drawnAt the depth the terminal will draw at, read on every
|
|
84
|
+
* `readableOn` evaluation so a host that learns its depth per render passes
|
|
85
|
+
* one getter; defaults to truecolor.
|
|
76
86
|
*/
|
|
77
|
-
export declare function colorFuncs(): FuncMap;
|
|
87
|
+
export declare function colorFuncs(drawnAt?: () => ColorDepth): FuncMap;
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
* from that point on the math is pure. A consumer with no theme system at all still gets
|
|
56
56
|
* the full color vocabulary by feeding it hex literals. [LAW:one-way-deps]
|
|
57
57
|
*/
|
|
58
|
-
import { blendRgb } from "../core/color.js";
|
|
58
|
+
import { blendRgb, ColorDepth } from "../core/color.js";
|
|
59
59
|
import { Oklch, IDENTITY } from "../core/oklch.js";
|
|
60
60
|
import { HEX_COLOR_RE, parseHexColor } from "../themes/colorRef.js";
|
|
61
61
|
import { darken, contrastFor, ensureContrast } from "../themes/colorMath.js";
|
|
@@ -147,7 +147,11 @@ const RATIO_RANGE = {
|
|
|
147
147
|
note: "4.5 = AA body text, 3 = AA large text",
|
|
148
148
|
};
|
|
149
149
|
const contrastOnFunc = colorFunc(["string"], ((bgHex) => contrastFor(asColor(bgHex, "contrastOn")).hex));
|
|
150
|
-
|
|
150
|
+
/**
|
|
151
|
+
* The `readableOn` binding, measuring at the depth `drawnAt` names when it is
|
|
152
|
+
* evaluated — a consumer that renders at a per-call depth registers its own.
|
|
153
|
+
*/
|
|
154
|
+
export const readableOnFunc = (drawnAt) => colorFunc(["string", "string", "float"], ((fgHex, bgHex, ratio) => ensureContrast(asColor(fgHex, "readableOn"), asColor(bgHex, "readableOn"), asAmount(ratio, "readableOn", "ratio", RATIO_RANGE), drawnAt()).hex));
|
|
151
155
|
// --- OKLCH axes ---
|
|
152
156
|
//
|
|
153
157
|
// [LAW:one-source-of-truth] One function per `ThemeKey` axis, and the table is
|
|
@@ -198,14 +202,18 @@ function oklchAxisFuncs() {
|
|
|
198
202
|
*
|
|
199
203
|
* Pair with `paletteFuncs()` to name colors from a theme, and with
|
|
200
204
|
* `richTextStyleFuncs()`'s `fg`/`bg` to paint them onto text.
|
|
205
|
+
*
|
|
206
|
+
* @param drawnAt the depth the terminal will draw at, read on every
|
|
207
|
+
* `readableOn` evaluation so a host that learns its depth per render passes
|
|
208
|
+
* one getter; defaults to truecolor.
|
|
201
209
|
*/
|
|
202
|
-
export function colorFuncs() {
|
|
210
|
+
export function colorFuncs(drawnAt = () => ColorDepth.TRUECOLOR) {
|
|
203
211
|
return {
|
|
204
212
|
darken: darkenFunc,
|
|
205
213
|
lighten: lightenFunc,
|
|
206
214
|
mix: mixFunc,
|
|
207
215
|
contrastOn: contrastOnFunc,
|
|
208
|
-
readableOn: readableOnFunc,
|
|
216
|
+
readableOn: readableOnFunc(drawnAt),
|
|
209
217
|
...oklchAxisFuncs(),
|
|
210
218
|
};
|
|
211
219
|
}
|
|
@@ -36,13 +36,15 @@
|
|
|
36
36
|
import { type Engine, type FuncMap } from "@promptctl/go-template-js";
|
|
37
37
|
import { RichText } from "../core/text.js";
|
|
38
38
|
import { Segment } from "../core/segment.js";
|
|
39
|
+
import { ColorDepth } from "../core/color.js";
|
|
39
40
|
export { paletteFuncs } from "./palette-funcs.js";
|
|
40
|
-
export { colorFuncs } from "./color-funcs.js";
|
|
41
|
+
export { colorFuncs, readableOnFunc } from "./color-funcs.js";
|
|
41
42
|
/**
|
|
42
43
|
* Funcs registered by the rich-js binding — the colour sinks, the palette-free
|
|
43
|
-
* colour math, text attributes, and the `link` cell-splitter.
|
|
44
|
-
*
|
|
45
|
-
* `
|
|
44
|
+
* colour math, text attributes, and the `link` cell-splitter. Nothing here
|
|
45
|
+
* needs a theme; the two that do (`color`, `ramp`) ship separately via
|
|
46
|
+
* `paletteFuncs(getPalette)`, merged consumer-side. `drawnAt` is forwarded to
|
|
47
|
+
* `colorFuncs` — the depth `readableOn` measures at, truecolor when omitted.
|
|
46
48
|
*
|
|
47
49
|
* `FuncMap` is not parameterised over `T` in `@promptctl/go-template-js` — the engine's
|
|
48
50
|
* `T` lives on the `Engine`/`EngineConfig`, and per-function input/output
|
|
@@ -55,7 +57,7 @@ export { colorFuncs } from "./color-funcs.js";
|
|
|
55
57
|
* into a wider engine must keep `T = RichText`; merging into an engine
|
|
56
58
|
* whose `T` is something else will compile but fail at evaluation time.
|
|
57
59
|
*/
|
|
58
|
-
export declare function richTextFuncs(): FuncMap;
|
|
60
|
+
export declare function richTextFuncs(drawnAt?: () => ColorDepth): FuncMap;
|
|
59
61
|
/**
|
|
60
62
|
* Construct an `Engine<RichText>` with the rich-js style-function set
|
|
61
63
|
* registered. Consumers that already manage their own engine should call
|
|
@@ -40,12 +40,13 @@ import { Segment } from "../core/segment.js";
|
|
|
40
40
|
import { richTextStyleFuncs } from "./style-funcs.js";
|
|
41
41
|
import { colorFuncs } from "./color-funcs.js";
|
|
42
42
|
export { paletteFuncs } from "./palette-funcs.js";
|
|
43
|
-
export { colorFuncs } from "./color-funcs.js";
|
|
43
|
+
export { colorFuncs, readableOnFunc } from "./color-funcs.js";
|
|
44
44
|
/**
|
|
45
45
|
* Funcs registered by the rich-js binding — the colour sinks, the palette-free
|
|
46
|
-
* colour math, text attributes, and the `link` cell-splitter.
|
|
47
|
-
*
|
|
48
|
-
* `
|
|
46
|
+
* colour math, text attributes, and the `link` cell-splitter. Nothing here
|
|
47
|
+
* needs a theme; the two that do (`color`, `ramp`) ship separately via
|
|
48
|
+
* `paletteFuncs(getPalette)`, merged consumer-side. `drawnAt` is forwarded to
|
|
49
|
+
* `colorFuncs` — the depth `readableOn` measures at, truecolor when omitted.
|
|
49
50
|
*
|
|
50
51
|
* `FuncMap` is not parameterised over `T` in `@promptctl/go-template-js` — the engine's
|
|
51
52
|
* `T` lives on the `Engine`/`EngineConfig`, and per-function input/output
|
|
@@ -58,8 +59,10 @@ export { colorFuncs } from "./color-funcs.js";
|
|
|
58
59
|
* into a wider engine must keep `T = RichText`; merging into an engine
|
|
59
60
|
* whose `T` is something else will compile but fail at evaluation time.
|
|
60
61
|
*/
|
|
61
|
-
|
|
62
|
-
|
|
62
|
+
// [LAW:one-source-of-truth] The truecolor default lives on `colorFuncs` alone;
|
|
63
|
+
// an omitted `drawnAt` is forwarded as omitted.
|
|
64
|
+
export function richTextFuncs(drawnAt) {
|
|
65
|
+
return { ...richTextStyleFuncs(), ...colorFuncs(drawnAt) };
|
|
63
66
|
}
|
|
64
67
|
/**
|
|
65
68
|
* Construct an `Engine<RichText>` with the rich-js style-function set
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ColorRgba } from "../core/color.js";
|
|
1
|
+
import { ColorDepth, ColorRgba, contrastRatio, relativeLuminance } from "../core/color.js";
|
|
2
2
|
/**
|
|
3
3
|
* Darken a color by N levels, where each level reduces HSL lightness by 10%.
|
|
4
4
|
* Negative levels lighten. Level 0 returns an equivalent triplet (after the
|
|
@@ -20,23 +20,7 @@ export declare function alphaBlend(fg: ColorRgba, bg: ColorRgba, alpha: number):
|
|
|
20
20
|
* where black and white are equally readable).
|
|
21
21
|
*/
|
|
22
22
|
export declare function contrastFor(bg: ColorRgba): ColorRgba;
|
|
23
|
-
|
|
24
|
-
* WCAG 2.x relative luminance (0..1) of an opaque color. The single
|
|
25
|
-
* luminance function in the codebase — `contrastFor`, `contrastRatio`, and
|
|
26
|
-
* any caller that needs to reason about readability all funnel through it.
|
|
27
|
-
* [LAW:one-source-of-truth]
|
|
28
|
-
*/
|
|
29
|
-
export declare function relativeLuminance(c: ColorRgba): number;
|
|
30
|
-
/**
|
|
31
|
-
* WCAG 2.x contrast ratio between two colors, in [1, 21]. Symmetric — the
|
|
32
|
-
* order of arguments does not matter. 4.5 is the AA threshold for normal
|
|
33
|
-
* text, 3.0 for large text.
|
|
34
|
-
*
|
|
35
|
-
* Assumes opaque inputs: alpha is ignored, since the displayed contrast of a
|
|
36
|
-
* translucent color depends on what it composites over. For a translucent
|
|
37
|
-
* foreground, flatten it first (or use `ensureContrast`, which does).
|
|
38
|
-
*/
|
|
39
|
-
export declare function contrastRatio(a: ColorRgba, b: ColorRgba): number;
|
|
23
|
+
export { relativeLuminance, contrastRatio };
|
|
40
24
|
/**
|
|
41
25
|
* Return a foreground guaranteed to clear `minRatio` against `bg`, keeping the
|
|
42
26
|
* color *recognizably itself*. If the themed `fg` already passes it is returned
|
|
@@ -53,10 +37,18 @@ export declare function contrastRatio(a: ColorRgba, b: ColorRgba): number;
|
|
|
53
37
|
* actually sees and the returned color is opaque. `bg` is treated as the
|
|
54
38
|
* opaque substrate.
|
|
55
39
|
*
|
|
40
|
+
* `drawnAt` is the depth the terminal will draw the pair at. At 256 colours
|
|
41
|
+
* the terminal rounds text and background independently, and two roundings
|
|
42
|
+
* can meet in the middle, so the ratio is measured on the drawn pair: a
|
|
43
|
+
* colour that loses the floor there is replaced by the nearest cube/grey entry
|
|
44
|
+
* that clears it (whose own rounding is itself). Every other depth draws a
|
|
45
|
+
* colour the chosen one IS (truecolor) or one only the terminal knows (ANSI).
|
|
46
|
+
*
|
|
56
47
|
* [LAW:single-enforcer] The one place "is this text readable, and if not fix
|
|
57
48
|
* it" is decided. Callers route every fg/bg pair through here and the
|
|
58
49
|
* unreadable state never reaches output. [LAW:dataflow-not-control-flow] the
|
|
59
50
|
* function always runs; the measured ratio (data) decides how far the
|
|
60
51
|
* lightness moves — there is no caller-side "should I check contrast" branch.
|
|
61
52
|
*/
|
|
62
|
-
export declare function ensureContrast(fg: ColorRgba, bg: ColorRgba, minRatio?: number
|
|
53
|
+
export declare function ensureContrast(fg: ColorRgba, bg: ColorRgba, minRatio?: number, // WCAG AA for normal text
|
|
54
|
+
drawnAt?: ColorDepth): ColorRgba;
|
package/dist/themes/colorMath.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ColorRgba, blendRgb } from "../core/color.js";
|
|
1
|
+
import { ColorDepth, ColorRgba, EIGHT_BIT_DOWNGRADE_TABLE, blendRgb, contrastRatio, relativeLuminance, } from "../core/color.js";
|
|
2
2
|
import { Oklch } from "../core/oklch.js";
|
|
3
3
|
const LEVEL_STEP = 0.1;
|
|
4
4
|
function rgbToHsl(c) {
|
|
@@ -90,35 +90,11 @@ export function contrastFor(bg) {
|
|
|
90
90
|
? new ColorRgba(0, 0, 0)
|
|
91
91
|
: new ColorRgba(255, 255, 255);
|
|
92
92
|
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
*/
|
|
99
|
-
export function relativeLuminance(c) {
|
|
100
|
-
const ch = (v) => {
|
|
101
|
-
const x = v / 255;
|
|
102
|
-
return x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
|
|
103
|
-
};
|
|
104
|
-
return 0.2126 * ch(c.red) + 0.7152 * ch(c.green) + 0.0722 * ch(c.blue);
|
|
105
|
-
}
|
|
106
|
-
/**
|
|
107
|
-
* WCAG 2.x contrast ratio between two colors, in [1, 21]. Symmetric — the
|
|
108
|
-
* order of arguments does not matter. 4.5 is the AA threshold for normal
|
|
109
|
-
* text, 3.0 for large text.
|
|
110
|
-
*
|
|
111
|
-
* Assumes opaque inputs: alpha is ignored, since the displayed contrast of a
|
|
112
|
-
* translucent color depends on what it composites over. For a translucent
|
|
113
|
-
* foreground, flatten it first (or use `ensureContrast`, which does).
|
|
114
|
-
*/
|
|
115
|
-
export function contrastRatio(a, b) {
|
|
116
|
-
const la = relativeLuminance(a);
|
|
117
|
-
const lb = relativeLuminance(b);
|
|
118
|
-
const hi = la > lb ? la : lb;
|
|
119
|
-
const lo = la > lb ? lb : la;
|
|
120
|
-
return (hi + 0.05) / (lo + 0.05);
|
|
121
|
-
}
|
|
93
|
+
// [LAW:one-way-deps] The WCAG measures live in core/color.ts, beside the
|
|
94
|
+
// ColorTable whose `matchReadable` needs them to pick a drawn text colour, and
|
|
95
|
+
// below the theme math here. Re-exported so this module stays the colour-math
|
|
96
|
+
// surface.
|
|
97
|
+
export { relativeLuminance, contrastRatio };
|
|
122
98
|
// Iterations for the lightness bisection below. 20 resolves L to ~1e-6 — far
|
|
123
99
|
// finer than 8-bit quantization or the eye.
|
|
124
100
|
const CONTRAST_ITERS = 20;
|
|
@@ -138,13 +114,44 @@ const CONTRAST_ITERS = 20;
|
|
|
138
114
|
* actually sees and the returned color is opaque. `bg` is treated as the
|
|
139
115
|
* opaque substrate.
|
|
140
116
|
*
|
|
117
|
+
* `drawnAt` is the depth the terminal will draw the pair at. At 256 colours
|
|
118
|
+
* the terminal rounds text and background independently, and two roundings
|
|
119
|
+
* can meet in the middle, so the ratio is measured on the drawn pair: a
|
|
120
|
+
* colour that loses the floor there is replaced by the nearest cube/grey entry
|
|
121
|
+
* that clears it (whose own rounding is itself). Every other depth draws a
|
|
122
|
+
* colour the chosen one IS (truecolor) or one only the terminal knows (ANSI).
|
|
123
|
+
*
|
|
141
124
|
* [LAW:single-enforcer] The one place "is this text readable, and if not fix
|
|
142
125
|
* it" is decided. Callers route every fg/bg pair through here and the
|
|
143
126
|
* unreadable state never reaches output. [LAW:dataflow-not-control-flow] the
|
|
144
127
|
* function always runs; the measured ratio (data) decides how far the
|
|
145
128
|
* lightness moves — there is no caller-side "should I check contrast" branch.
|
|
146
129
|
*/
|
|
147
|
-
export function ensureContrast(fg, bg, minRatio = 4.5
|
|
130
|
+
export function ensureContrast(fg, bg, minRatio = 4.5, // WCAG AA for normal text
|
|
131
|
+
drawnAt = ColorDepth.TRUECOLOR) {
|
|
132
|
+
const chosen = ensureTruecolorContrast(fg, bg, minRatio);
|
|
133
|
+
// [LAW:dataflow-not-control-flow] The depth names the table the terminal
|
|
134
|
+
// draws from; only one whose entries have a known RGB can be measured.
|
|
135
|
+
const table = MEASURABLE_DOWNGRADE[drawnAt];
|
|
136
|
+
if (table === undefined)
|
|
137
|
+
return chosen;
|
|
138
|
+
const drawnBg = table.get(table.match(bg));
|
|
139
|
+
const drawn = table.get(table.match(chosen));
|
|
140
|
+
if (contrastRatio(drawn, drawnBg) >= minRatio)
|
|
141
|
+
return chosen;
|
|
142
|
+
return table.get(table.matchReadable(chosen, drawnBg, minRatio));
|
|
143
|
+
}
|
|
144
|
+
/**
|
|
145
|
+
* The downgrade tables whose entries the terminal draws at a known RGB, by the
|
|
146
|
+
* depth that draws from them. 256 colours is the one: its cube and grey ramp
|
|
147
|
+
* are fixed by xterm. ANSI 0–15 and the default colour are the terminal
|
|
148
|
+
* theme's own, so text drawn there has no ratio to keep; truecolor draws the
|
|
149
|
+
* chosen colour itself.
|
|
150
|
+
*/
|
|
151
|
+
const MEASURABLE_DOWNGRADE = {
|
|
152
|
+
[ColorDepth.EIGHT_BIT]: EIGHT_BIT_DOWNGRADE_TABLE,
|
|
153
|
+
};
|
|
154
|
+
function ensureTruecolorContrast(fg, bg, minRatio) {
|
|
148
155
|
// Flatten translucency so the guarantee holds for the displayed color, not
|
|
149
156
|
// the raw bytes (e.g. a "#FFFFFF60" text-disabled over a light surface).
|
|
150
157
|
const opaqueFg = fg.compositeOver(bg);
|