okchroma 0.1.4 → 0.1.6
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-lib/index.cjs
CHANGED
|
@@ -803,7 +803,6 @@ function perceptualDarkC(L, H2, nativeC, keep = KEEP_DARK, gamut = MASTER_GAMUT)
|
|
|
803
803
|
// src/engine/requirements/spec.ts
|
|
804
804
|
var groupOf = (stop) => stop <= 2 ? "paper" : stop <= 7 ? "wash" : stop === 8 ? "highlight" : "ink";
|
|
805
805
|
var PAPER0_DARK_ROOT_L = 0.16;
|
|
806
|
-
var INK0_SEAM_OVERSHOOT = (ROOT_L_DARK[1] - PAPER0_DARK_ROOT_L) / (ROOT_L_DARK[2] - ROOT_L_DARK[1]);
|
|
807
806
|
var PL_LADDER = { hue: "warm-drift", L: "perceptual", chroma: "ladder" };
|
|
808
807
|
var PL_TEXT = { hue: "warm-drift", L: "perceptual", chroma: "brand" };
|
|
809
808
|
var P_LIFT = { hue: "warm-torsion", L: "perceptual-lift", chroma: "ladder" };
|
|
@@ -818,7 +817,7 @@ var LIGHT = {
|
|
|
818
817
|
stops: [
|
|
819
818
|
// paper-100 (paper-0 pre-Stage-B): the resolved ladder extreme — in light it genuinely is white (rootL 1.0, zero chroma)
|
|
820
819
|
{ stop: 0, rootL: 1, group: "paper", produce: { hue: "warm-drift", L: "fixed", chroma: "ladder" }, satFraction: SCALE_C_LIGHT[0].sat, baseC: SCALE_C_LIGHT[0].base },
|
|
821
|
-
// paper/wash/
|
|
820
|
+
// paper/wash/wax-74: perceptual ladder/envelope blend on the geometric ROOT_L_LIGHT scaffold. Separation
|
|
822
821
|
// falls out of the shape (see above) — no min-separation require. Only stop 8 carries a require: the WCAG
|
|
823
822
|
// 3:1 vs the resolved paper-97 (paper-2) (re-solves automatically since it references paper-97 (paper-2)).
|
|
824
823
|
...[1, 2, 3, 4, 5, 6, 7, 8].map((stop) => ({
|
|
@@ -878,7 +877,7 @@ var DARK = {
|
|
|
878
877
|
};
|
|
879
878
|
var MODE_SPECS = { light: LIGHT, dark: DARK };
|
|
880
879
|
|
|
881
|
-
// node_modules/helmlab/dist/index.js
|
|
880
|
+
// ../../../Users/emilygerrity/okchroma/node_modules/helmlab/dist/index.js
|
|
882
881
|
function o0(n) {
|
|
883
882
|
let t = new Float64Array(9);
|
|
884
883
|
for (let e = 0; e < 3; e++) for (let s = 0; s < 3; s++) t[e * 3 + s] = n[e][s];
|
|
@@ -2569,10 +2568,7 @@ function generateScale(hex, scaleName, forcedArchetype, opts) {
|
|
|
2569
2568
|
const dark = darkRamp.stops.filter((s) => s.stop >= 1).map(toStop).sort((a, b) => a.stop - b.stop);
|
|
2570
2569
|
const p0Light = lightRamp.stops.find((s) => s.stop === 0);
|
|
2571
2570
|
const p0Dark = darkRamp.stops.find((s) => s.stop === 0);
|
|
2572
|
-
const
|
|
2573
|
-
const a = arr.find((s) => s.stop === 10), b = arr.find((s) => s.stop === 11);
|
|
2574
|
-
return a && b ? makeStop(12, b.L + (b.L - a.L) * INK0_SEAM_OVERSHOOT, b.C, b.H) : void 0;
|
|
2575
|
-
};
|
|
2571
|
+
const inkPole = (arr, L) => arr.find((s) => s.stop === 11) ? makeStop(12, L, 0, arr.find((s) => s.stop === 11).H) : void 0;
|
|
2576
2572
|
const cta = makeStop(9, lightRamp.roles.cta.L, lightRamp.roles.cta.C, lightRamp.roles.cta.H);
|
|
2577
2573
|
const ctaDark = makeStop(9, darkRamp.roles.cta.L, darkRamp.roles.cta.C, darkRamp.roles.cta.H);
|
|
2578
2574
|
const roleStop = (r, stop) => makeStop(stop, r.L, r.C, r.H);
|
|
@@ -2596,8 +2592,8 @@ function generateScale(hex, scaleName, forcedArchetype, opts) {
|
|
|
2596
2592
|
identityHex: hex.toUpperCase(),
|
|
2597
2593
|
paper0: p0Light ? makeStop(0, p0Light.L, p0Light.C, p0Light.H) : void 0,
|
|
2598
2594
|
paper0Dark: p0Dark ? makeStop(0, p0Dark.L, p0Dark.C, p0Dark.H) : void 0,
|
|
2599
|
-
ink0:
|
|
2600
|
-
ink0Dark:
|
|
2595
|
+
ink0: inkPole(light, 0),
|
|
2596
|
+
ink0Dark: inkPole(dark, 1)
|
|
2601
2597
|
};
|
|
2602
2598
|
}
|
|
2603
2599
|
function generateNeutralScale(brandH, level = "default", contrastProfile) {
|
|
@@ -2725,8 +2721,8 @@ var SCALE = {
|
|
|
2725
2721
|
"wash-85": WASH,
|
|
2726
2722
|
"wash-80": WASH,
|
|
2727
2723
|
// ("icons" KEPT through the 2026-08-28 on-flood strip (owner): an "icon" query
|
|
2728
|
-
// landing on the
|
|
2729
|
-
"
|
|
2724
|
+
// landing on the wax rows is worth its ic-ON-s noise — the one surviving body carrier)
|
|
2725
|
+
"wax-74": { req: "focus rings, icons, large text", contrast: AA_LARGE, theming: solved, collides: true },
|
|
2730
2726
|
"lead-53": { req: "regular text, inverted backgrounds", contrast: AA_BODY, theming: solved, collides: true },
|
|
2731
2727
|
"ink-42": { req: "regular text, inverted backgrounds", contrast: AA_BODY, theming: solved, collides: true },
|
|
2732
2728
|
// ("high-emphasis" reworded 2026-08-12: the surface planes took low/high as label
|
|
@@ -2773,15 +2769,15 @@ var SYSTEM = {
|
|
|
2773
2769
|
// ("fills" reworded 2026-08-18: fill became a label word and is foreign here;
|
|
2774
2770
|
// "on-color" reworded 2026-08-28: the bare on fed the "on" flood)
|
|
2775
2771
|
"system/alpha/ink": { req: "soft text pole for quiet CTAs" },
|
|
2776
|
-
"system/alpha/
|
|
2777
|
-
"system/alpha/
|
|
2778
|
-
"system/alpha/
|
|
2772
|
+
"system/alpha/away-from-bg/06": OFFSET,
|
|
2773
|
+
"system/alpha/away-from-bg/08": OFFSET,
|
|
2774
|
+
"system/alpha/away-from-bg/16": OFFSET,
|
|
2779
2775
|
// the inverse ladder: the offset rungs with the pole flipped per mode, for
|
|
2780
2776
|
// washes and edges over inverted backgrounds ("interaction" avoided in the
|
|
2781
2777
|
// bodies: acti-ON would feed the "on" flood)
|
|
2782
|
-
"system/alpha/
|
|
2783
|
-
"system/alpha/
|
|
2784
|
-
"system/alpha/
|
|
2778
|
+
"system/alpha/toward-bg/06": OFFSET_INVERSE,
|
|
2779
|
+
"system/alpha/toward-bg/08": OFFSET_INVERSE,
|
|
2780
|
+
"system/alpha/toward-bg/16": OFFSET_INVERSE,
|
|
2785
2781
|
"system/alpha/shadow-04": SHADOW,
|
|
2786
2782
|
"system/alpha/shadow-08": SHADOW,
|
|
2787
2783
|
"system/alpha/shadow-12": SHADOW,
|
|
@@ -2792,12 +2788,12 @@ var SYSTEM = {
|
|
|
2792
2788
|
"system/surface/mid": PLANE("raised plane \u2014 cards, menus"),
|
|
2793
2789
|
// ("overlays" reworded 2026-08-13: paper-overlay took the word as a label — the C50 law)
|
|
2794
2790
|
"system/surface/high": PLANE("topmost plane \u2014 modals, dialogs"),
|
|
2795
|
-
"system/link/default": LINK("", AA_BODY),
|
|
2796
|
-
"system/link/hover": LINK(" pointer-over", AA_BODY),
|
|
2797
|
-
"system/link/pressed": LINK(" pressed", AAA_BODY),
|
|
2798
|
-
"system/link/inverse": LINK_INVERSE("", AA_BODY),
|
|
2799
|
-
"system/link/inverse
|
|
2800
|
-
"system/link/inverse
|
|
2791
|
+
"system/link/default/enabled": LINK("", AA_BODY),
|
|
2792
|
+
"system/link/default/hover": LINK(" pointer-over", AA_BODY),
|
|
2793
|
+
"system/link/default/pressed": LINK(" pressed", AAA_BODY),
|
|
2794
|
+
"system/link/inverse/enabled": LINK_INVERSE("", AA_BODY),
|
|
2795
|
+
"system/link/inverse/hover": LINK_INVERSE(" pointer-over", AA_BODY),
|
|
2796
|
+
"system/link/inverse/pressed": LINK_INVERSE(" pressed", AAA_BODY)
|
|
2801
2797
|
};
|
|
2802
2798
|
var PREFIXES = [
|
|
2803
2799
|
// community spellings FIRST: the 2026-08-21 family rename made the ext word a
|
|
@@ -3377,7 +3373,7 @@ var SHARED_NAMES = {
|
|
|
3377
3373
|
5: "wash-89",
|
|
3378
3374
|
6: "wash-85",
|
|
3379
3375
|
7: "wash-80",
|
|
3380
|
-
8: "
|
|
3376
|
+
8: "wax-74",
|
|
3381
3377
|
// THE INK BAND (C49, owner 2026-08-05): the first text stop + emphasis fill (the
|
|
3382
3378
|
// 2026-07-29 highlight collapse — the old highlight-9 and on-highlight are
|
|
3383
3379
|
// deleted; this stop carries both jobs, its on-color a paper token), the between
|
|
@@ -3431,19 +3427,20 @@ var SYSTEM_LEAF = {
|
|
|
3431
3427
|
TRANSPARENT: "system/alpha/transparent",
|
|
3432
3428
|
SCRIM: "system/alpha/abs-black-060",
|
|
3433
3429
|
INK: "system/alpha/ink",
|
|
3434
|
-
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
//
|
|
3438
|
-
//
|
|
3439
|
-
//
|
|
3440
|
-
//
|
|
3441
|
-
//
|
|
3442
|
-
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
|
|
3446
|
-
|
|
3430
|
+
// the DIRECTIONAL ladders (owner 2026-08-31, renaming the 2026-08-18 bare rungs
|
|
3431
|
+
// and the 2026-08-29 inverse ladder): away-from-bg is the page-polarity pole
|
|
3432
|
+
// (black in light, white in dark), toward-bg the flipped pole — STATE LAYERS for
|
|
3433
|
+
// INVERTED grounds, whose polarity is opposite the page's. (Never call toward-bg
|
|
3434
|
+
// a "wash": that word belongs to the tinted band stops.) The reversal lives in
|
|
3435
|
+
// the engine: a consumer on an inverted ground names one token and never picks a
|
|
3436
|
+
// pole. Colored fills never ride these; their states stay engine-solved stops.
|
|
3437
|
+
// Rungs are two-digit percent, harmonizing with shadow-04/08/12.
|
|
3438
|
+
AWAY_FROM_BG_06: "system/alpha/away-from-bg/06",
|
|
3439
|
+
AWAY_FROM_BG_08: "system/alpha/away-from-bg/08",
|
|
3440
|
+
AWAY_FROM_BG_16: "system/alpha/away-from-bg/16",
|
|
3441
|
+
TOWARD_BG_06: "system/alpha/toward-bg/06",
|
|
3442
|
+
TOWARD_BG_08: "system/alpha/toward-bg/08",
|
|
3443
|
+
TOWARD_BG_16: "system/alpha/toward-bg/16",
|
|
3447
3444
|
SHADOW_04: "system/alpha/shadow-04",
|
|
3448
3445
|
SHADOW_08: "system/alpha/shadow-08",
|
|
3449
3446
|
SHADOW_12: "system/alpha/shadow-12"
|
|
@@ -3498,8 +3495,8 @@ function pageStopFor(neutral, mode) {
|
|
|
3498
3495
|
}
|
|
3499
3496
|
var OFFSET_ALPHAS = { 6: 0.06, 8: 0.08, 16: 0.16 };
|
|
3500
3497
|
var ctaBorderRung = (prefix) => prefix === CSS_NEUTRAL ? 8 : prefix === CSS_SECONDARY ? 6 : 16;
|
|
3501
|
-
var offsetLeafName = (rung) => String(rung).padStart(
|
|
3502
|
-
var offsetVarName = (rung) => `--alpha-${offsetLeafName(rung)}`;
|
|
3498
|
+
var offsetLeafName = (rung) => String(rung).padStart(2, "0");
|
|
3499
|
+
var offsetVarName = (rung) => `--alpha-away-from-bg-${offsetLeafName(rung)}`;
|
|
3503
3500
|
var SHADOW_ALPHAS = {
|
|
3504
3501
|
4: { light: 0.04, dark: 0.32 },
|
|
3505
3502
|
8: { light: 0.08, dark: 0.48 },
|
|
@@ -3512,11 +3509,11 @@ var offsetRgba = (rung, mode) => mode === "light" ? `rgba(0, 0, 0, ${OFFSET_ALPH
|
|
|
3512
3509
|
var alphaRootVars = (mode) => [
|
|
3513
3510
|
` ${TRANSPARENT_VAR}: transparent;`,
|
|
3514
3511
|
...Object.keys(OFFSET_ALPHAS).map(Number).sort((a, b) => a - b).map((r) => ` ${offsetVarName(r)}: ${offsetRgba(r, mode)};`),
|
|
3515
|
-
// the
|
|
3516
|
-
//
|
|
3517
|
-
// is the tinted band's). One spelling with the Figma
|
|
3518
|
-
// --alpha-
|
|
3519
|
-
...Object.keys(OFFSET_ALPHAS).map(Number).sort((a, b) => a - b).map((r) => ` --alpha-
|
|
3512
|
+
// the toward-bg ladder (the 2026-08-29 inverse ladder, renamed 2026-08-31): the
|
|
3513
|
+
// same rungs, pole flipped per mode — state layers for INVERTED grounds (never
|
|
3514
|
+
// called a "wash" — that word is the tinted band's). One spelling with the Figma
|
|
3515
|
+
// row: --alpha-toward-bg-06 ↔ system/alpha/toward-bg/06.
|
|
3516
|
+
...Object.keys(OFFSET_ALPHAS).map(Number).sort((a, b) => a - b).map((r) => ` --alpha-toward-bg-${offsetLeafName(r)}: ${offsetRgba(r, mode === "light" ? "dark" : "light")};`)
|
|
3520
3517
|
];
|
|
3521
3518
|
function ctaPageLc(s, mode, page) {
|
|
3522
3519
|
const cta = mode === "light" ? s.cta : s.ctaDark;
|
|
@@ -3945,13 +3942,13 @@ function themeToFigma(r, input) {
|
|
|
3945
3942
|
putLeaf(g2, SYSTEM_LEAF.ALPHA.TRANSPARENT, pole(true, 0));
|
|
3946
3943
|
putLeaf(g2, SYSTEM_LEAF.ALPHA.SCRIM, pole(false, SCRIM_ALPHA));
|
|
3947
3944
|
putLeaf(g2, SYSTEM_LEAF.ALPHA.INK, pole(mode === "dark", SOFT_ON_CTA_ALPHA[mode]));
|
|
3948
|
-
putLeaf(g2, SYSTEM_LEAF.ALPHA.
|
|
3949
|
-
putLeaf(g2, SYSTEM_LEAF.ALPHA.
|
|
3950
|
-
putLeaf(g2, SYSTEM_LEAF.ALPHA.
|
|
3945
|
+
putLeaf(g2, SYSTEM_LEAF.ALPHA.AWAY_FROM_BG_06, OFFSET_TOKEN(6, mode));
|
|
3946
|
+
putLeaf(g2, SYSTEM_LEAF.ALPHA.AWAY_FROM_BG_08, OFFSET_TOKEN(8, mode));
|
|
3947
|
+
putLeaf(g2, SYSTEM_LEAF.ALPHA.AWAY_FROM_BG_16, OFFSET_TOKEN(16, mode));
|
|
3951
3948
|
const inv = mode === "light" ? "dark" : "light";
|
|
3952
|
-
putLeaf(g2, SYSTEM_LEAF.ALPHA.
|
|
3953
|
-
putLeaf(g2, SYSTEM_LEAF.ALPHA.
|
|
3954
|
-
putLeaf(g2, SYSTEM_LEAF.ALPHA.
|
|
3949
|
+
putLeaf(g2, SYSTEM_LEAF.ALPHA.TOWARD_BG_06, OFFSET_TOKEN(6, inv));
|
|
3950
|
+
putLeaf(g2, SYSTEM_LEAF.ALPHA.TOWARD_BG_08, OFFSET_TOKEN(8, inv));
|
|
3951
|
+
putLeaf(g2, SYSTEM_LEAF.ALPHA.TOWARD_BG_16, OFFSET_TOKEN(16, inv));
|
|
3955
3952
|
putLeaf(g2, SYSTEM_LEAF.ALPHA.SHADOW_04, pole(false, SHADOW_ALPHAS[4][mode]));
|
|
3956
3953
|
putLeaf(g2, SYSTEM_LEAF.ALPHA.SHADOW_08, pole(false, SHADOW_ALPHAS[8][mode]));
|
|
3957
3954
|
putLeaf(g2, SYSTEM_LEAF.ALPHA.SHADOW_12, pole(false, SHADOW_ALPHAS[12][mode]));
|
package/dist-lib/index.mjs
CHANGED
|
@@ -724,7 +724,6 @@ function perceptualDarkC(L, H2, nativeC, keep = KEEP_DARK, gamut = MASTER_GAMUT)
|
|
|
724
724
|
// src/engine/requirements/spec.ts
|
|
725
725
|
var groupOf = (stop) => stop <= 2 ? "paper" : stop <= 7 ? "wash" : stop === 8 ? "highlight" : "ink";
|
|
726
726
|
var PAPER0_DARK_ROOT_L = 0.16;
|
|
727
|
-
var INK0_SEAM_OVERSHOOT = (ROOT_L_DARK[1] - PAPER0_DARK_ROOT_L) / (ROOT_L_DARK[2] - ROOT_L_DARK[1]);
|
|
728
727
|
var PL_LADDER = { hue: "warm-drift", L: "perceptual", chroma: "ladder" };
|
|
729
728
|
var PL_TEXT = { hue: "warm-drift", L: "perceptual", chroma: "brand" };
|
|
730
729
|
var P_LIFT = { hue: "warm-torsion", L: "perceptual-lift", chroma: "ladder" };
|
|
@@ -739,7 +738,7 @@ var LIGHT = {
|
|
|
739
738
|
stops: [
|
|
740
739
|
// paper-100 (paper-0 pre-Stage-B): the resolved ladder extreme — in light it genuinely is white (rootL 1.0, zero chroma)
|
|
741
740
|
{ stop: 0, rootL: 1, group: "paper", produce: { hue: "warm-drift", L: "fixed", chroma: "ladder" }, satFraction: SCALE_C_LIGHT[0].sat, baseC: SCALE_C_LIGHT[0].base },
|
|
742
|
-
// paper/wash/
|
|
741
|
+
// paper/wash/wax-74: perceptual ladder/envelope blend on the geometric ROOT_L_LIGHT scaffold. Separation
|
|
743
742
|
// falls out of the shape (see above) — no min-separation require. Only stop 8 carries a require: the WCAG
|
|
744
743
|
// 3:1 vs the resolved paper-97 (paper-2) (re-solves automatically since it references paper-97 (paper-2)).
|
|
745
744
|
...[1, 2, 3, 4, 5, 6, 7, 8].map((stop) => ({
|
|
@@ -799,7 +798,7 @@ var DARK = {
|
|
|
799
798
|
};
|
|
800
799
|
var MODE_SPECS = { light: LIGHT, dark: DARK };
|
|
801
800
|
|
|
802
|
-
// node_modules/helmlab/dist/index.js
|
|
801
|
+
// ../../../Users/emilygerrity/okchroma/node_modules/helmlab/dist/index.js
|
|
803
802
|
function o0(n) {
|
|
804
803
|
let t = new Float64Array(9);
|
|
805
804
|
for (let e = 0; e < 3; e++) for (let s = 0; s < 3; s++) t[e * 3 + s] = n[e][s];
|
|
@@ -2490,10 +2489,7 @@ function generateScale(hex, scaleName, forcedArchetype, opts) {
|
|
|
2490
2489
|
const dark = darkRamp.stops.filter((s) => s.stop >= 1).map(toStop).sort((a, b) => a.stop - b.stop);
|
|
2491
2490
|
const p0Light = lightRamp.stops.find((s) => s.stop === 0);
|
|
2492
2491
|
const p0Dark = darkRamp.stops.find((s) => s.stop === 0);
|
|
2493
|
-
const
|
|
2494
|
-
const a = arr.find((s) => s.stop === 10), b = arr.find((s) => s.stop === 11);
|
|
2495
|
-
return a && b ? makeStop(12, b.L + (b.L - a.L) * INK0_SEAM_OVERSHOOT, b.C, b.H) : void 0;
|
|
2496
|
-
};
|
|
2492
|
+
const inkPole = (arr, L) => arr.find((s) => s.stop === 11) ? makeStop(12, L, 0, arr.find((s) => s.stop === 11).H) : void 0;
|
|
2497
2493
|
const cta = makeStop(9, lightRamp.roles.cta.L, lightRamp.roles.cta.C, lightRamp.roles.cta.H);
|
|
2498
2494
|
const ctaDark = makeStop(9, darkRamp.roles.cta.L, darkRamp.roles.cta.C, darkRamp.roles.cta.H);
|
|
2499
2495
|
const roleStop = (r, stop) => makeStop(stop, r.L, r.C, r.H);
|
|
@@ -2517,8 +2513,8 @@ function generateScale(hex, scaleName, forcedArchetype, opts) {
|
|
|
2517
2513
|
identityHex: hex.toUpperCase(),
|
|
2518
2514
|
paper0: p0Light ? makeStop(0, p0Light.L, p0Light.C, p0Light.H) : void 0,
|
|
2519
2515
|
paper0Dark: p0Dark ? makeStop(0, p0Dark.L, p0Dark.C, p0Dark.H) : void 0,
|
|
2520
|
-
ink0:
|
|
2521
|
-
ink0Dark:
|
|
2516
|
+
ink0: inkPole(light, 0),
|
|
2517
|
+
ink0Dark: inkPole(dark, 1)
|
|
2522
2518
|
};
|
|
2523
2519
|
}
|
|
2524
2520
|
function generateNeutralScale(brandH, level = "default", contrastProfile) {
|
|
@@ -2646,8 +2642,8 @@ var SCALE = {
|
|
|
2646
2642
|
"wash-85": WASH,
|
|
2647
2643
|
"wash-80": WASH,
|
|
2648
2644
|
// ("icons" KEPT through the 2026-08-28 on-flood strip (owner): an "icon" query
|
|
2649
|
-
// landing on the
|
|
2650
|
-
"
|
|
2645
|
+
// landing on the wax rows is worth its ic-ON-s noise — the one surviving body carrier)
|
|
2646
|
+
"wax-74": { req: "focus rings, icons, large text", contrast: AA_LARGE, theming: solved, collides: true },
|
|
2651
2647
|
"lead-53": { req: "regular text, inverted backgrounds", contrast: AA_BODY, theming: solved, collides: true },
|
|
2652
2648
|
"ink-42": { req: "regular text, inverted backgrounds", contrast: AA_BODY, theming: solved, collides: true },
|
|
2653
2649
|
// ("high-emphasis" reworded 2026-08-12: the surface planes took low/high as label
|
|
@@ -2694,15 +2690,15 @@ var SYSTEM = {
|
|
|
2694
2690
|
// ("fills" reworded 2026-08-18: fill became a label word and is foreign here;
|
|
2695
2691
|
// "on-color" reworded 2026-08-28: the bare on fed the "on" flood)
|
|
2696
2692
|
"system/alpha/ink": { req: "soft text pole for quiet CTAs" },
|
|
2697
|
-
"system/alpha/
|
|
2698
|
-
"system/alpha/
|
|
2699
|
-
"system/alpha/
|
|
2693
|
+
"system/alpha/away-from-bg/06": OFFSET,
|
|
2694
|
+
"system/alpha/away-from-bg/08": OFFSET,
|
|
2695
|
+
"system/alpha/away-from-bg/16": OFFSET,
|
|
2700
2696
|
// the inverse ladder: the offset rungs with the pole flipped per mode, for
|
|
2701
2697
|
// washes and edges over inverted backgrounds ("interaction" avoided in the
|
|
2702
2698
|
// bodies: acti-ON would feed the "on" flood)
|
|
2703
|
-
"system/alpha/
|
|
2704
|
-
"system/alpha/
|
|
2705
|
-
"system/alpha/
|
|
2699
|
+
"system/alpha/toward-bg/06": OFFSET_INVERSE,
|
|
2700
|
+
"system/alpha/toward-bg/08": OFFSET_INVERSE,
|
|
2701
|
+
"system/alpha/toward-bg/16": OFFSET_INVERSE,
|
|
2706
2702
|
"system/alpha/shadow-04": SHADOW,
|
|
2707
2703
|
"system/alpha/shadow-08": SHADOW,
|
|
2708
2704
|
"system/alpha/shadow-12": SHADOW,
|
|
@@ -2713,12 +2709,12 @@ var SYSTEM = {
|
|
|
2713
2709
|
"system/surface/mid": PLANE("raised plane \u2014 cards, menus"),
|
|
2714
2710
|
// ("overlays" reworded 2026-08-13: paper-overlay took the word as a label — the C50 law)
|
|
2715
2711
|
"system/surface/high": PLANE("topmost plane \u2014 modals, dialogs"),
|
|
2716
|
-
"system/link/default": LINK("", AA_BODY),
|
|
2717
|
-
"system/link/hover": LINK(" pointer-over", AA_BODY),
|
|
2718
|
-
"system/link/pressed": LINK(" pressed", AAA_BODY),
|
|
2719
|
-
"system/link/inverse": LINK_INVERSE("", AA_BODY),
|
|
2720
|
-
"system/link/inverse
|
|
2721
|
-
"system/link/inverse
|
|
2712
|
+
"system/link/default/enabled": LINK("", AA_BODY),
|
|
2713
|
+
"system/link/default/hover": LINK(" pointer-over", AA_BODY),
|
|
2714
|
+
"system/link/default/pressed": LINK(" pressed", AAA_BODY),
|
|
2715
|
+
"system/link/inverse/enabled": LINK_INVERSE("", AA_BODY),
|
|
2716
|
+
"system/link/inverse/hover": LINK_INVERSE(" pointer-over", AA_BODY),
|
|
2717
|
+
"system/link/inverse/pressed": LINK_INVERSE(" pressed", AAA_BODY)
|
|
2722
2718
|
};
|
|
2723
2719
|
var PREFIXES = [
|
|
2724
2720
|
// community spellings FIRST: the 2026-08-21 family rename made the ext word a
|
|
@@ -3298,7 +3294,7 @@ var SHARED_NAMES = {
|
|
|
3298
3294
|
5: "wash-89",
|
|
3299
3295
|
6: "wash-85",
|
|
3300
3296
|
7: "wash-80",
|
|
3301
|
-
8: "
|
|
3297
|
+
8: "wax-74",
|
|
3302
3298
|
// THE INK BAND (C49, owner 2026-08-05): the first text stop + emphasis fill (the
|
|
3303
3299
|
// 2026-07-29 highlight collapse — the old highlight-9 and on-highlight are
|
|
3304
3300
|
// deleted; this stop carries both jobs, its on-color a paper token), the between
|
|
@@ -3352,19 +3348,20 @@ var SYSTEM_LEAF = {
|
|
|
3352
3348
|
TRANSPARENT: "system/alpha/transparent",
|
|
3353
3349
|
SCRIM: "system/alpha/abs-black-060",
|
|
3354
3350
|
INK: "system/alpha/ink",
|
|
3355
|
-
|
|
3356
|
-
|
|
3357
|
-
|
|
3358
|
-
//
|
|
3359
|
-
//
|
|
3360
|
-
//
|
|
3361
|
-
//
|
|
3362
|
-
//
|
|
3363
|
-
|
|
3364
|
-
|
|
3365
|
-
|
|
3366
|
-
|
|
3367
|
-
|
|
3351
|
+
// the DIRECTIONAL ladders (owner 2026-08-31, renaming the 2026-08-18 bare rungs
|
|
3352
|
+
// and the 2026-08-29 inverse ladder): away-from-bg is the page-polarity pole
|
|
3353
|
+
// (black in light, white in dark), toward-bg the flipped pole — STATE LAYERS for
|
|
3354
|
+
// INVERTED grounds, whose polarity is opposite the page's. (Never call toward-bg
|
|
3355
|
+
// a "wash": that word belongs to the tinted band stops.) The reversal lives in
|
|
3356
|
+
// the engine: a consumer on an inverted ground names one token and never picks a
|
|
3357
|
+
// pole. Colored fills never ride these; their states stay engine-solved stops.
|
|
3358
|
+
// Rungs are two-digit percent, harmonizing with shadow-04/08/12.
|
|
3359
|
+
AWAY_FROM_BG_06: "system/alpha/away-from-bg/06",
|
|
3360
|
+
AWAY_FROM_BG_08: "system/alpha/away-from-bg/08",
|
|
3361
|
+
AWAY_FROM_BG_16: "system/alpha/away-from-bg/16",
|
|
3362
|
+
TOWARD_BG_06: "system/alpha/toward-bg/06",
|
|
3363
|
+
TOWARD_BG_08: "system/alpha/toward-bg/08",
|
|
3364
|
+
TOWARD_BG_16: "system/alpha/toward-bg/16",
|
|
3368
3365
|
SHADOW_04: "system/alpha/shadow-04",
|
|
3369
3366
|
SHADOW_08: "system/alpha/shadow-08",
|
|
3370
3367
|
SHADOW_12: "system/alpha/shadow-12"
|
|
@@ -3419,8 +3416,8 @@ function pageStopFor(neutral, mode) {
|
|
|
3419
3416
|
}
|
|
3420
3417
|
var OFFSET_ALPHAS = { 6: 0.06, 8: 0.08, 16: 0.16 };
|
|
3421
3418
|
var ctaBorderRung = (prefix) => prefix === CSS_NEUTRAL ? 8 : prefix === CSS_SECONDARY ? 6 : 16;
|
|
3422
|
-
var offsetLeafName = (rung) => String(rung).padStart(
|
|
3423
|
-
var offsetVarName = (rung) => `--alpha-${offsetLeafName(rung)}`;
|
|
3419
|
+
var offsetLeafName = (rung) => String(rung).padStart(2, "0");
|
|
3420
|
+
var offsetVarName = (rung) => `--alpha-away-from-bg-${offsetLeafName(rung)}`;
|
|
3424
3421
|
var SHADOW_ALPHAS = {
|
|
3425
3422
|
4: { light: 0.04, dark: 0.32 },
|
|
3426
3423
|
8: { light: 0.08, dark: 0.48 },
|
|
@@ -3433,11 +3430,11 @@ var offsetRgba = (rung, mode) => mode === "light" ? `rgba(0, 0, 0, ${OFFSET_ALPH
|
|
|
3433
3430
|
var alphaRootVars = (mode) => [
|
|
3434
3431
|
` ${TRANSPARENT_VAR}: transparent;`,
|
|
3435
3432
|
...Object.keys(OFFSET_ALPHAS).map(Number).sort((a, b) => a - b).map((r) => ` ${offsetVarName(r)}: ${offsetRgba(r, mode)};`),
|
|
3436
|
-
// the
|
|
3437
|
-
//
|
|
3438
|
-
// is the tinted band's). One spelling with the Figma
|
|
3439
|
-
// --alpha-
|
|
3440
|
-
...Object.keys(OFFSET_ALPHAS).map(Number).sort((a, b) => a - b).map((r) => ` --alpha-
|
|
3433
|
+
// the toward-bg ladder (the 2026-08-29 inverse ladder, renamed 2026-08-31): the
|
|
3434
|
+
// same rungs, pole flipped per mode — state layers for INVERTED grounds (never
|
|
3435
|
+
// called a "wash" — that word is the tinted band's). One spelling with the Figma
|
|
3436
|
+
// row: --alpha-toward-bg-06 ↔ system/alpha/toward-bg/06.
|
|
3437
|
+
...Object.keys(OFFSET_ALPHAS).map(Number).sort((a, b) => a - b).map((r) => ` --alpha-toward-bg-${offsetLeafName(r)}: ${offsetRgba(r, mode === "light" ? "dark" : "light")};`)
|
|
3441
3438
|
];
|
|
3442
3439
|
function ctaPageLc(s, mode, page) {
|
|
3443
3440
|
const cta = mode === "light" ? s.cta : s.ctaDark;
|
|
@@ -3866,13 +3863,13 @@ function themeToFigma(r, input) {
|
|
|
3866
3863
|
putLeaf(g2, SYSTEM_LEAF.ALPHA.TRANSPARENT, pole(true, 0));
|
|
3867
3864
|
putLeaf(g2, SYSTEM_LEAF.ALPHA.SCRIM, pole(false, SCRIM_ALPHA));
|
|
3868
3865
|
putLeaf(g2, SYSTEM_LEAF.ALPHA.INK, pole(mode === "dark", SOFT_ON_CTA_ALPHA[mode]));
|
|
3869
|
-
putLeaf(g2, SYSTEM_LEAF.ALPHA.
|
|
3870
|
-
putLeaf(g2, SYSTEM_LEAF.ALPHA.
|
|
3871
|
-
putLeaf(g2, SYSTEM_LEAF.ALPHA.
|
|
3866
|
+
putLeaf(g2, SYSTEM_LEAF.ALPHA.AWAY_FROM_BG_06, OFFSET_TOKEN(6, mode));
|
|
3867
|
+
putLeaf(g2, SYSTEM_LEAF.ALPHA.AWAY_FROM_BG_08, OFFSET_TOKEN(8, mode));
|
|
3868
|
+
putLeaf(g2, SYSTEM_LEAF.ALPHA.AWAY_FROM_BG_16, OFFSET_TOKEN(16, mode));
|
|
3872
3869
|
const inv = mode === "light" ? "dark" : "light";
|
|
3873
|
-
putLeaf(g2, SYSTEM_LEAF.ALPHA.
|
|
3874
|
-
putLeaf(g2, SYSTEM_LEAF.ALPHA.
|
|
3875
|
-
putLeaf(g2, SYSTEM_LEAF.ALPHA.
|
|
3870
|
+
putLeaf(g2, SYSTEM_LEAF.ALPHA.TOWARD_BG_06, OFFSET_TOKEN(6, inv));
|
|
3871
|
+
putLeaf(g2, SYSTEM_LEAF.ALPHA.TOWARD_BG_08, OFFSET_TOKEN(8, inv));
|
|
3872
|
+
putLeaf(g2, SYSTEM_LEAF.ALPHA.TOWARD_BG_16, OFFSET_TOKEN(16, inv));
|
|
3876
3873
|
putLeaf(g2, SYSTEM_LEAF.ALPHA.SHADOW_04, pole(false, SHADOW_ALPHAS[4][mode]));
|
|
3877
3874
|
putLeaf(g2, SYSTEM_LEAF.ALPHA.SHADOW_08, pole(false, SHADOW_ALPHAS[8][mode]));
|
|
3878
3875
|
putLeaf(g2, SYSTEM_LEAF.ALPHA.SHADOW_12, pole(false, SHADOW_ALPHAS[12][mode]));
|
|
@@ -28,12 +28,12 @@ export declare const SYSTEM_LEAF: {
|
|
|
28
28
|
readonly TRANSPARENT: "system/alpha/transparent";
|
|
29
29
|
readonly SCRIM: "system/alpha/abs-black-060";
|
|
30
30
|
readonly INK: "system/alpha/ink";
|
|
31
|
-
readonly
|
|
32
|
-
readonly
|
|
33
|
-
readonly
|
|
34
|
-
readonly
|
|
35
|
-
readonly
|
|
36
|
-
readonly
|
|
31
|
+
readonly AWAY_FROM_BG_06: "system/alpha/away-from-bg/06";
|
|
32
|
+
readonly AWAY_FROM_BG_08: "system/alpha/away-from-bg/08";
|
|
33
|
+
readonly AWAY_FROM_BG_16: "system/alpha/away-from-bg/16";
|
|
34
|
+
readonly TOWARD_BG_06: "system/alpha/toward-bg/06";
|
|
35
|
+
readonly TOWARD_BG_08: "system/alpha/toward-bg/08";
|
|
36
|
+
readonly TOWARD_BG_16: "system/alpha/toward-bg/16";
|
|
37
37
|
readonly SHADOW_04: "system/alpha/shadow-04";
|
|
38
38
|
readonly SHADOW_08: "system/alpha/shadow-08";
|
|
39
39
|
readonly SHADOW_12: "system/alpha/shadow-12";
|
package/package.json
CHANGED
package/tokens/semantic.css
CHANGED
|
@@ -26,13 +26,13 @@
|
|
|
26
26
|
theme, riding --link — no longer the brand's raw ink pair) */
|
|
27
27
|
|
|
28
28
|
/* --border-default IS THE ACCESSIBILITY BORDER (owner 2026-07-29): a border that has
|
|
29
|
-
to be there — inputs and other controls — so it rides
|
|
29
|
+
to be there — inputs and other controls — so it rides wax-74, the stop that
|
|
30
30
|
carries the WCAG 1.4.11 3:1 non-text require (highlight-8 pre-Stage-B). It sat on
|
|
31
|
-
--neutral-highlight-9 until that stop was deleted;
|
|
31
|
+
--neutral-highlight-9 until that stop was deleted; wax-74 is where the
|
|
32
32
|
requirement actually lives, and it is the one stop this round does not move.
|
|
33
33
|
Decorative borders are --border-subtle (wash-89) and the per-family
|
|
34
34
|
--*-border-default (wash-85). */
|
|
35
|
-
--border-default: var(--neutral-
|
|
35
|
+
--border-default: var(--neutral-wax-74);
|
|
36
36
|
--border-subtle: var(--neutral-wash-89);
|
|
37
37
|
|
|
38
38
|
/* Shadow transparencies (owner 2026-07-27) — pure black, mirrors the plugin's
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
--brand-border-subtle: var(--brand-wash-92);
|
|
87
87
|
--brand-border-subtle-hover: var(--brand-wash-89);
|
|
88
88
|
--brand-border-default: var(--brand-wash-85);
|
|
89
|
-
--brand-border-default-hover: var(--brand-
|
|
89
|
+
--brand-border-default-hover: var(--brand-wax-74);
|
|
90
90
|
--brand-border-emphasis: var(--brand-stamp-fill);
|
|
91
91
|
--brand-border-emphasis-hover: var(--brand-stamp-fill-hover);
|
|
92
92
|
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
--brand-alt-border-subtle: var(--brand-alt-wash-92);
|
|
124
124
|
--brand-alt-border-subtle-hover: var(--brand-alt-wash-89);
|
|
125
125
|
--brand-alt-border-default: var(--brand-alt-wash-85);
|
|
126
|
-
--brand-alt-border-default-hover: var(--brand-alt-
|
|
126
|
+
--brand-alt-border-default-hover: var(--brand-alt-wax-74);
|
|
127
127
|
--brand-alt-border-emphasis: var(--brand-alt-stamp-fill);
|
|
128
128
|
--brand-alt-border-emphasis-hover: var(--brand-alt-stamp-fill-hover);
|
|
129
129
|
}
|
|
@@ -159,7 +159,7 @@
|
|
|
159
159
|
--critical-border-subtle: var(--critical-wash-92);
|
|
160
160
|
--critical-border-subtle-hover: var(--critical-wash-89);
|
|
161
161
|
--critical-border-default: var(--critical-wash-85);
|
|
162
|
-
--critical-border-default-hover: var(--critical-
|
|
162
|
+
--critical-border-default-hover: var(--critical-wax-74);
|
|
163
163
|
--critical-border-emphasis: var(--critical-lead-53);
|
|
164
164
|
|
|
165
165
|
--warning-fg: var(--warning-ink-30);
|
|
@@ -174,7 +174,7 @@
|
|
|
174
174
|
--warning-border-subtle: var(--warning-wash-92);
|
|
175
175
|
--warning-border-subtle-hover: var(--warning-wash-89);
|
|
176
176
|
--warning-border-default: var(--warning-wash-85);
|
|
177
|
-
--warning-border-default-hover: var(--warning-
|
|
177
|
+
--warning-border-default-hover: var(--warning-wax-74);
|
|
178
178
|
--warning-border-emphasis: var(--warning-lead-53);
|
|
179
179
|
|
|
180
180
|
--positive-fg: var(--positive-ink-30);
|
|
@@ -189,7 +189,7 @@
|
|
|
189
189
|
--positive-border-subtle: var(--positive-wash-92);
|
|
190
190
|
--positive-border-subtle-hover: var(--positive-wash-89);
|
|
191
191
|
--positive-border-default: var(--positive-wash-85);
|
|
192
|
-
--positive-border-default-hover: var(--positive-
|
|
192
|
+
--positive-border-default-hover: var(--positive-wax-74);
|
|
193
193
|
--positive-border-emphasis: var(--positive-lead-53);
|
|
194
194
|
|
|
195
195
|
--info-fg: var(--info-ink-30);
|
|
@@ -204,6 +204,6 @@
|
|
|
204
204
|
--info-border-subtle: var(--info-wash-92);
|
|
205
205
|
--info-border-subtle-hover: var(--info-wash-89);
|
|
206
206
|
--info-border-default: var(--info-wash-85);
|
|
207
|
-
--info-border-default-hover: var(--info-
|
|
207
|
+
--info-border-default-hover: var(--info-wax-74);
|
|
208
208
|
--info-border-emphasis: var(--info-lead-53);
|
|
209
209
|
}
|