@tenphi/glaze 0.15.0 → 0.15.1
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/index.cjs +52 -26
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +43 -0
- package/dist/index.d.mts +43 -0
- package/dist/index.mjs +52 -26
- package/dist/index.mjs.map +1 -1
- package/docs/api.md +37 -0
- package/package.json +2 -1
package/dist/index.cjs
CHANGED
|
@@ -1541,7 +1541,8 @@ function toOkhslVariant(v) {
|
|
|
1541
1541
|
h: c.h,
|
|
1542
1542
|
s: c.s,
|
|
1543
1543
|
l: c.l,
|
|
1544
|
-
alpha: v.alpha
|
|
1544
|
+
alpha: v.alpha,
|
|
1545
|
+
pastel: v.pastel
|
|
1545
1546
|
};
|
|
1546
1547
|
}
|
|
1547
1548
|
/** Edge adapter: OKHSL-lightness variant → resolved variant (`t`). */
|
|
@@ -1588,6 +1589,7 @@ function resolveDependentColor(name, def, ctx, isHighContrast, isDark, effective
|
|
|
1588
1589
|
const mode = def.mode ?? "auto";
|
|
1589
1590
|
const satFactor = clamp(def.saturation ?? 1, 0, 1);
|
|
1590
1591
|
const flip = def.flip ?? ctx.config.autoFlip;
|
|
1592
|
+
const pastel = def.pastel ?? ctx.config.pastel;
|
|
1591
1593
|
const baseVariant = getSchemeVariant(baseResolved, isDark, isHighContrast);
|
|
1592
1594
|
const baseTone = baseVariant.t * 100;
|
|
1593
1595
|
let preferredTone;
|
|
@@ -1606,7 +1608,7 @@ function resolveDependentColor(name, def, ctx, isHighContrast, isDark, effective
|
|
|
1606
1608
|
const resolvedContrast = resolveContrastSpec(rawContrast, isHighContrast);
|
|
1607
1609
|
const effectiveSat = isDark ? mapSaturationDark(satFactor * ctx.saturation / 100, mode, ctx.config) : satFactor * ctx.saturation / 100;
|
|
1608
1610
|
const baseOkhsl = toOkhslVariant(baseVariant);
|
|
1609
|
-
const baseLinearRgb = okhslToLinearSrgb(baseOkhsl.h, baseOkhsl.s, baseOkhsl.l, ctx.config.pastel);
|
|
1611
|
+
const baseLinearRgb = okhslToLinearSrgb(baseOkhsl.h, baseOkhsl.s, baseOkhsl.l, baseVariant.pastel ?? ctx.config.pastel);
|
|
1610
1612
|
const toneRange = schemeToneRange(isDark, mode, isHighContrast, ctx.config);
|
|
1611
1613
|
let initialDirection;
|
|
1612
1614
|
if (preferredTone < baseTone) initialDirection = "darker";
|
|
@@ -1620,7 +1622,7 @@ function resolveDependentColor(name, def, ctx, isHighContrast, isDark, effective
|
|
|
1620
1622
|
toneRange: [0, 1],
|
|
1621
1623
|
initialDirection,
|
|
1622
1624
|
flip,
|
|
1623
|
-
pastel
|
|
1625
|
+
pastel
|
|
1624
1626
|
});
|
|
1625
1627
|
if (!result.met) warnContrastUnmet(name, isDark, isHighContrast, resolvedContrast, result.contrast);
|
|
1626
1628
|
return {
|
|
@@ -1640,6 +1642,7 @@ function resolveColorForScheme(name, def, ctx, isDark, isHighContrast) {
|
|
|
1640
1642
|
const mode = regDef.mode ?? "auto";
|
|
1641
1643
|
const isRoot = isAbsoluteTone(regDef.tone) && !regDef.base;
|
|
1642
1644
|
const effectiveHue = resolveEffectiveHue(ctx.hue, regDef.hue);
|
|
1645
|
+
const pastel = regDef.pastel ?? ctx.config.pastel;
|
|
1643
1646
|
let finalTone;
|
|
1644
1647
|
let satFactor;
|
|
1645
1648
|
if (isRoot) {
|
|
@@ -1658,7 +1661,8 @@ function resolveColorForScheme(name, def, ctx, isDark, isHighContrast) {
|
|
|
1658
1661
|
h: effectiveHue,
|
|
1659
1662
|
s: clamp(finalSat, 0, 1),
|
|
1660
1663
|
t: toneFraction,
|
|
1661
|
-
alpha: regDef.opacity ?? 1
|
|
1664
|
+
alpha: regDef.opacity ?? 1,
|
|
1665
|
+
pastel
|
|
1662
1666
|
};
|
|
1663
1667
|
}
|
|
1664
1668
|
function resolveShadowForScheme(def, ctx, isDark, isHighContrast) {
|
|
@@ -1667,7 +1671,10 @@ function resolveShadowForScheme(def, ctx, isDark, isHighContrast) {
|
|
|
1667
1671
|
if (def.fg) fgVariant = toOkhslVariant(getSchemeVariant(ctx.resolved.get(def.fg), isDark, isHighContrast));
|
|
1668
1672
|
const intensity = isHighContrast ? pairHC(def.intensity) : pairNormal(def.intensity);
|
|
1669
1673
|
const tuning = resolveShadowTuning(def.tuning, ctx.config.shadowTuning);
|
|
1670
|
-
return
|
|
1674
|
+
return {
|
|
1675
|
+
...toToneVariant(computeShadow(bgVariant, fgVariant, intensity, tuning)),
|
|
1676
|
+
pastel: def.pastel ?? ctx.config.pastel
|
|
1677
|
+
};
|
|
1671
1678
|
}
|
|
1672
1679
|
function okhslVariantToLinearRgb(v, pastel) {
|
|
1673
1680
|
return okhslToLinearSrgb(v.h, v.s, v.l, pastel);
|
|
@@ -1714,15 +1721,16 @@ function resolveMixForScheme(def, ctx, isDark, isHighContrast) {
|
|
|
1714
1721
|
let t = clamp(isHighContrast ? pairHC(def.value) : pairNormal(def.value), 0, 100) / 100;
|
|
1715
1722
|
const blend = def.blend ?? "opaque";
|
|
1716
1723
|
const space = def.space ?? "okhsl";
|
|
1717
|
-
const
|
|
1718
|
-
const
|
|
1724
|
+
const pastel = def.pastel ?? ctx.config.pastel;
|
|
1725
|
+
const baseLinear = okhslVariantToLinearRgb(baseVariant, baseVariant.pastel ?? ctx.config.pastel);
|
|
1726
|
+
const targetLinear = okhslVariantToLinearRgb(targetVariant, targetVariant.pastel ?? ctx.config.pastel);
|
|
1719
1727
|
if (def.contrast !== void 0) {
|
|
1720
1728
|
const resolvedContrast = resolveContrastSpec(def.contrast, isHighContrast);
|
|
1721
1729
|
const metric = resolvedContrast.metric;
|
|
1722
1730
|
let luminanceAt;
|
|
1723
1731
|
if (blend === "transparent" || space === "srgb") luminanceAt = (v) => metricLuminance(metric, linearSrgbLerp(baseLinear, targetLinear, v));
|
|
1724
1732
|
else luminanceAt = (v) => {
|
|
1725
|
-
return metricLuminance(metric, okhslToLinearSrgb(mixHue(baseVariant, targetVariant, v), baseVariant.s + (targetVariant.s - baseVariant.s) * v, baseVariant.l + (targetVariant.l - baseVariant.l) * v,
|
|
1733
|
+
return metricLuminance(metric, okhslToLinearSrgb(mixHue(baseVariant, targetVariant, v), baseVariant.s + (targetVariant.s - baseVariant.s) * v, baseVariant.l + (targetVariant.l - baseVariant.l) * v, pastel));
|
|
1726
1734
|
};
|
|
1727
1735
|
t = findValueForMixContrast({
|
|
1728
1736
|
preferredValue: t,
|
|
@@ -1733,19 +1741,28 @@ function resolveMixForScheme(def, ctx, isDark, isHighContrast) {
|
|
|
1733
1741
|
flip: ctx.config.autoFlip
|
|
1734
1742
|
}).value;
|
|
1735
1743
|
}
|
|
1736
|
-
if (blend === "transparent") return
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
}
|
|
1744
|
+
if (blend === "transparent") return {
|
|
1745
|
+
...toToneVariant({
|
|
1746
|
+
h: targetVariant.h,
|
|
1747
|
+
s: targetVariant.s,
|
|
1748
|
+
l: targetVariant.l,
|
|
1749
|
+
alpha: clamp(t, 0, 1)
|
|
1750
|
+
}),
|
|
1751
|
+
pastel
|
|
1752
|
+
};
|
|
1753
|
+
if (space === "srgb") return {
|
|
1754
|
+
...linearRgbToToneVariant(linearSrgbLerp(baseLinear, targetLinear, t), pastel),
|
|
1755
|
+
pastel
|
|
1756
|
+
};
|
|
1757
|
+
return {
|
|
1758
|
+
...toToneVariant({
|
|
1759
|
+
h: mixHue(baseVariant, targetVariant, t),
|
|
1760
|
+
s: clamp(baseVariant.s + (targetVariant.s - baseVariant.s) * t, 0, 1),
|
|
1761
|
+
l: clamp(baseVariant.l + (targetVariant.l - baseVariant.l) * t, 0, 1),
|
|
1762
|
+
alpha: 1
|
|
1763
|
+
}),
|
|
1764
|
+
pastel
|
|
1765
|
+
};
|
|
1749
1766
|
}
|
|
1750
1767
|
function defMode(def) {
|
|
1751
1768
|
if (isShadowDef(def) || isMixDef(def)) return void 0;
|
|
@@ -1796,7 +1813,7 @@ function seedField(order, ctx, field, source) {
|
|
|
1796
1813
|
* resolved with a `base` + `contrast` may land slightly under the contrast
|
|
1797
1814
|
* its tone implies because chromatic luminance drifts from the gray tone.
|
|
1798
1815
|
*/
|
|
1799
|
-
function verifyContrastDrift(order, defs, result) {
|
|
1816
|
+
function verifyContrastDrift(order, defs, result, config) {
|
|
1800
1817
|
for (const name of order) {
|
|
1801
1818
|
const def = defs[name];
|
|
1802
1819
|
if (isShadowDef(def) || isMixDef(def)) continue;
|
|
@@ -1832,8 +1849,10 @@ function verifyContrastDrift(order, defs, result) {
|
|
|
1832
1849
|
const bVariant = base[s.field];
|
|
1833
1850
|
const cOkhsl = toOkhslVariant(cVariant);
|
|
1834
1851
|
const bOkhsl = toOkhslVariant(bVariant);
|
|
1835
|
-
const
|
|
1836
|
-
const
|
|
1852
|
+
const cPastel = cVariant.pastel ?? config.pastel;
|
|
1853
|
+
const bPastel = bVariant.pastel ?? config.pastel;
|
|
1854
|
+
const yC = metricLuminance(spec.metric, okhslToLinearSrgb(cOkhsl.h, cOkhsl.s, cOkhsl.l, cPastel));
|
|
1855
|
+
const yB = metricLuminance(spec.metric, okhslToLinearSrgb(bOkhsl.h, bOkhsl.s, bOkhsl.l, bPastel));
|
|
1837
1856
|
warnContrastDrift(name, s.isDark, s.isHighContrast, spec, yC, yB);
|
|
1838
1857
|
}
|
|
1839
1858
|
}
|
|
@@ -1866,7 +1885,7 @@ function resolveAllColors(hue, saturation, defs, config, externalBases) {
|
|
|
1866
1885
|
darkContrast: darkHCMap.get(name),
|
|
1867
1886
|
mode: defMode(defs[name])
|
|
1868
1887
|
});
|
|
1869
|
-
verifyContrastDrift(order, defs, result);
|
|
1888
|
+
verifyContrastDrift(order, defs, result, config);
|
|
1870
1889
|
return result;
|
|
1871
1890
|
}
|
|
1872
1891
|
|
|
@@ -1892,8 +1911,9 @@ function fmt(value, decimals) {
|
|
|
1892
1911
|
return parseFloat(value.toFixed(decimals)).toString();
|
|
1893
1912
|
}
|
|
1894
1913
|
function formatVariant(v, format = "okhsl", pastel = false) {
|
|
1914
|
+
const effectivePastel = v.pastel ?? pastel;
|
|
1895
1915
|
const { l } = variantToOkhsl(v);
|
|
1896
|
-
const base = formatters[format](v.h, v.s * 100, l * 100,
|
|
1916
|
+
const base = formatters[format](v.h, v.s * 100, l * 100, effectivePastel);
|
|
1897
1917
|
if (v.alpha >= 1) return base;
|
|
1898
1918
|
const closing = base.lastIndexOf(")");
|
|
1899
1919
|
return `${base.slice(0, closing)} / ${fmt(v.alpha, 4)})`;
|
|
@@ -2306,6 +2326,7 @@ function buildStandaloneValueDefs(main, options) {
|
|
|
2306
2326
|
mode: options?.mode ?? "auto",
|
|
2307
2327
|
flip: options?.flip,
|
|
2308
2328
|
opacity: options?.opacity,
|
|
2329
|
+
pastel: options?.pastel,
|
|
2309
2330
|
base: hasExternalBase ? STANDALONE_BASE : needsSeedAnchor ? STANDALONE_SEED : void 0
|
|
2310
2331
|
};
|
|
2311
2332
|
const defs = { [primary]: valueDef };
|
|
@@ -2406,6 +2427,7 @@ function createColorToken(input, configOverride) {
|
|
|
2406
2427
|
flip: input.flip,
|
|
2407
2428
|
contrast: input.contrast,
|
|
2408
2429
|
opacity: input.opacity,
|
|
2430
|
+
pastel: input.pastel,
|
|
2409
2431
|
base: hasExternalBase ? STANDALONE_BASE : needsSeedAnchor ? STANDALONE_SEED : void 0
|
|
2410
2432
|
} };
|
|
2411
2433
|
if (needsSeedAnchor) {
|
|
@@ -2455,6 +2477,7 @@ function buildOverridesExport(options) {
|
|
|
2455
2477
|
if (options.contrast !== void 0) out.contrast = options.contrast;
|
|
2456
2478
|
if (options.opacity !== void 0) out.opacity = options.opacity;
|
|
2457
2479
|
if (options.name !== void 0) out.name = options.name;
|
|
2480
|
+
if (options.pastel !== void 0) out.pastel = options.pastel;
|
|
2458
2481
|
if (options.base !== void 0) out.base = isGlazeColorToken(options.base) ? options.base.export() : options.base;
|
|
2459
2482
|
return out;
|
|
2460
2483
|
}
|
|
@@ -2470,6 +2493,7 @@ function buildStructuredInputExport(input) {
|
|
|
2470
2493
|
if (input.opacity !== void 0) out.opacity = input.opacity;
|
|
2471
2494
|
if (input.contrast !== void 0) out.contrast = input.contrast;
|
|
2472
2495
|
if (input.name !== void 0) out.name = input.name;
|
|
2496
|
+
if (input.pastel !== void 0) out.pastel = input.pastel;
|
|
2473
2497
|
if (input.base !== void 0) out.base = isGlazeColorToken(input.base) ? input.base.export() : input.base;
|
|
2474
2498
|
return out;
|
|
2475
2499
|
}
|
|
@@ -2490,6 +2514,7 @@ function rehydrateOverrides(data) {
|
|
|
2490
2514
|
if (data.contrast !== void 0) out.contrast = data.contrast;
|
|
2491
2515
|
if (data.opacity !== void 0) out.opacity = data.opacity;
|
|
2492
2516
|
if (data.name !== void 0) out.name = data.name;
|
|
2517
|
+
if (data.pastel !== void 0) out.pastel = data.pastel;
|
|
2493
2518
|
if (data.base !== void 0) out.base = isExportedToken(data.base) ? colorFromExport(data.base) : data.base;
|
|
2494
2519
|
return out;
|
|
2495
2520
|
}
|
|
@@ -2505,6 +2530,7 @@ function rehydrateStructuredInput(data) {
|
|
|
2505
2530
|
if (data.opacity !== void 0) out.opacity = data.opacity;
|
|
2506
2531
|
if (data.contrast !== void 0) out.contrast = data.contrast;
|
|
2507
2532
|
if (data.name !== void 0) out.name = data.name;
|
|
2533
|
+
if (data.pastel !== void 0) out.pastel = data.pastel;
|
|
2508
2534
|
if (data.base !== void 0) out.base = isExportedToken(data.base) ? colorFromExport(data.base) : data.base;
|
|
2509
2535
|
return out;
|
|
2510
2536
|
}
|