@tenphi/glaze 1.3.0 → 1.3.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 +49 -37
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +49 -37
- package/dist/index.mjs.map +1 -1
- package/docs/api.md +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2188,9 +2188,12 @@ function applyToneFlip(delta, baseTone, flip) {
|
|
|
2188
2188
|
* result is clamped to `[0, 100]` only — crossing the dark tone window is
|
|
2189
2189
|
* intended, since the author asked for the extreme.
|
|
2190
2190
|
*/
|
|
2191
|
-
function extremeDarkTone(authorTone, mode, isHighContrast, baseResolved,
|
|
2192
|
-
const
|
|
2193
|
-
|
|
2191
|
+
function extremeDarkTone(authorTone, mode, isHighContrast, baseResolved, config) {
|
|
2192
|
+
const extremeLightTone = mapToneForScheme(authorTone, mode, false, isHighContrast, config);
|
|
2193
|
+
const lightBase = getSchemeVariant(baseResolved, false, isHighContrast);
|
|
2194
|
+
const darkBase = getSchemeVariant(baseResolved, true, isHighContrast);
|
|
2195
|
+
const shift = extremeLightTone - lightBase.t * 100;
|
|
2196
|
+
return clamp(darkBase.t * 100 + (mode === "auto" ? -shift : shift), 0, 100);
|
|
2194
2197
|
}
|
|
2195
2198
|
function resolveRootColor(def, isHighContrast, config) {
|
|
2196
2199
|
return clamp(passTone(def.tone, isHighContrast, config).value, 0, 100);
|
|
@@ -2243,12 +2246,10 @@ function resolveDependentColor(name, def, ctx, isHighContrast, isDark, channels,
|
|
|
2243
2246
|
const baseLightTone = getSchemeVariant(baseResolved, false, isHighContrast).t * 100;
|
|
2244
2247
|
preferredTone = mapToneForScheme(clamp(baseLightTone + applyToneFlip(parsed.value, baseLightTone, flip), 0, 100), "auto", true, isHighContrast, ctx.config);
|
|
2245
2248
|
} else preferredTone = clamp(baseTone + applyToneFlip(parsed.value, baseTone, flip), 0, 100);
|
|
2246
|
-
else
|
|
2247
|
-
isExtreme = true;
|
|
2248
|
-
preferredTone = extremeDarkTone(parsed.value, mode, isHighContrast, baseResolved, baseTone, ctx.config);
|
|
2249
|
-
} else {
|
|
2249
|
+
else {
|
|
2250
2250
|
isExtreme = parsed.kind === "extreme";
|
|
2251
|
-
preferredTone =
|
|
2251
|
+
if (isExtreme && isDark && mode !== "static") preferredTone = extremeDarkTone(parsed.value, mode, isHighContrast, baseResolved, ctx.config);
|
|
2252
|
+
else preferredTone = mapToneForScheme(parsed.value, mode, isDark, isHighContrast, ctx.config);
|
|
2252
2253
|
}
|
|
2253
2254
|
}
|
|
2254
2255
|
const rawContrast = def.contrast;
|
|
@@ -2256,15 +2257,14 @@ function resolveDependentColor(name, def, ctx, isHighContrast, isDark, channels,
|
|
|
2256
2257
|
const resolvedContrast = resolveContrastSpec(rawContrast, isHighContrast, ctx.config, polarity);
|
|
2257
2258
|
const baseOkhsl = toOkhslVariant(baseVariant);
|
|
2258
2259
|
const baseLinearRgb = okhslToLinearSrgb(baseOkhsl.h, baseOkhsl.s, baseOkhsl.l, baseVariant.pastel ?? ctx.config.pastel);
|
|
2259
|
-
const
|
|
2260
|
+
const preferredRange = isExtreme ? [0, 1] : schemeToneRange(isDark, mode, isHighContrast, ctx.config);
|
|
2260
2261
|
let initialDirection;
|
|
2261
2262
|
if (preferredTone < baseTone) initialDirection = "darker";
|
|
2262
2263
|
else if (preferredTone > baseTone) initialDirection = "lighter";
|
|
2263
|
-
const seedTone = isExtreme ? clamp(preferredTone / 100, 0, 1) : clamp(preferredTone / 100, toneRange[0], toneRange[1]);
|
|
2264
2264
|
const solve = {
|
|
2265
2265
|
hue: channels.hue,
|
|
2266
2266
|
saturation: channels.saturation,
|
|
2267
|
-
preferredTone:
|
|
2267
|
+
preferredTone: clamp(preferredTone / 100, preferredRange[0], preferredRange[1]),
|
|
2268
2268
|
baseLinearRgb,
|
|
2269
2269
|
toneRange: [0, 1],
|
|
2270
2270
|
flip,
|
|
@@ -2561,7 +2561,9 @@ function resolveAllColors(seed, defs, config, externalBases) {
|
|
|
2561
2561
|
*
|
|
2562
2562
|
* Hue is scheme-independent unless the theme or a color authors a dark hue,
|
|
2563
2563
|
* so declarations are collected per scheme (`'light'` / `'dark'`) and the dark
|
|
2564
|
-
* set is emitted only when it actually differs — see `
|
|
2564
|
+
* set is emitted only when it actually differs — see `buildHueDeclarations`.
|
|
2565
|
+
* A color that authors a hue in *either* scheme gets its own var in both, so
|
|
2566
|
+
* the shared `var()` reference stays valid.
|
|
2565
2567
|
*/
|
|
2566
2568
|
const ACHROMATIC_EPSILON = 1e-6;
|
|
2567
2569
|
function cssProp(prefix, name, suffix) {
|
|
@@ -2583,23 +2585,28 @@ function themeHuePlan(name, def, variant, ctx, scheme) {
|
|
|
2583
2585
|
const regDef = def;
|
|
2584
2586
|
const baseHueVar = `var(--${ctx.baseName}-hue)`;
|
|
2585
2587
|
const prop = cssProp(ctx.prefix, name, "-hue");
|
|
2586
|
-
if ((regDef.mode ?? "auto") === "static" && schemeSeedHue(ctx, "dark") !== ctx.seedHue) {
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
};
|
|
2596
|
-
}
|
|
2597
|
-
const authored = scheme === "dark" ? regDef.darkHue ?? regDef.hue : regDef.hue;
|
|
2598
|
-
if (authored === void 0) return {
|
|
2588
|
+
if ((regDef.mode ?? "auto") === "static" && schemeSeedHue(ctx, "dark") !== ctx.seedHue) return {
|
|
2589
|
+
hueVar: `var(${prop})`,
|
|
2590
|
+
inline: false,
|
|
2591
|
+
declarations: [{
|
|
2592
|
+
prop,
|
|
2593
|
+
value: String(variant.h)
|
|
2594
|
+
}]
|
|
2595
|
+
};
|
|
2596
|
+
if (regDef.hue === void 0 && regDef.darkHue === void 0) return {
|
|
2599
2597
|
hueVar: baseHueVar,
|
|
2600
2598
|
inline: false,
|
|
2601
2599
|
declarations: []
|
|
2602
2600
|
};
|
|
2601
|
+
const authored = scheme === "dark" ? regDef.darkHue ?? regDef.hue : regDef.hue;
|
|
2602
|
+
if (authored === void 0) return {
|
|
2603
|
+
hueVar: `var(${prop})`,
|
|
2604
|
+
inline: false,
|
|
2605
|
+
declarations: [{
|
|
2606
|
+
prop,
|
|
2607
|
+
value: baseHueVar
|
|
2608
|
+
}]
|
|
2609
|
+
};
|
|
2603
2610
|
const parsed = parseRelativeOrAbsolute(authored);
|
|
2604
2611
|
if (parsed.relative) {
|
|
2605
2612
|
const sign = parsed.value >= 0 ? "+" : "-";
|
|
@@ -2646,7 +2653,7 @@ function buildHuePlan(name, def, variant, ctx, scheme = "light") {
|
|
|
2646
2653
|
return themeHuePlan(name, def, variant, ctx, scheme);
|
|
2647
2654
|
}
|
|
2648
2655
|
/** Collect unique hue declarations across all colors (theme + per-color). */
|
|
2649
|
-
function collectHueDeclarations(resolved, ctx, scheme
|
|
2656
|
+
function collectHueDeclarations(resolved, ctx, scheme) {
|
|
2650
2657
|
if (ctx.emitDeclarations === false) return [];
|
|
2651
2658
|
const seen = /* @__PURE__ */ new Set();
|
|
2652
2659
|
const out = [];
|
|
@@ -2667,21 +2674,24 @@ function collectHueDeclarations(resolved, ctx, scheme = "light") {
|
|
|
2667
2674
|
return out;
|
|
2668
2675
|
}
|
|
2669
2676
|
/**
|
|
2670
|
-
*
|
|
2671
|
-
* light
|
|
2677
|
+
* Hue declarations for both schemes. `dark` is empty when it resolves to the
|
|
2678
|
+
* same hues as light — the common case, with no `darkHue` anywhere.
|
|
2672
2679
|
*
|
|
2673
|
-
* When they differ, the **whole** set is returned rather than only the
|
|
2674
|
-
* whose text changed. A relative declaration reads
|
|
2680
|
+
* When they differ, the **whole** dark set is returned rather than only the
|
|
2681
|
+
* entries whose text changed. A relative declaration reads
|
|
2675
2682
|
* `calc(var(--theme-hue) + N)` in both schemes even though its resolved value
|
|
2676
2683
|
* moves with the seed, and custom properties substitute `var()` at
|
|
2677
2684
|
* computed-value time on the declaring element — so re-declaring
|
|
2678
2685
|
* `--{baseName}-hue` alone would leave inherited per-color vars still holding
|
|
2679
2686
|
* the light-substituted value.
|
|
2680
2687
|
*/
|
|
2681
|
-
function
|
|
2682
|
-
const dark = collectHueDeclarations(resolved, ctx, "dark");
|
|
2688
|
+
function buildHueDeclarations(resolved, ctx) {
|
|
2683
2689
|
const light = collectHueDeclarations(resolved, ctx, "light");
|
|
2684
|
-
|
|
2690
|
+
const dark = collectHueDeclarations(resolved, ctx, "dark");
|
|
2691
|
+
return {
|
|
2692
|
+
light,
|
|
2693
|
+
dark: dark.length === light.length && dark.every((decl, i) => decl.prop === light[i].prop && decl.value === light[i].value) ? [] : dark
|
|
2694
|
+
};
|
|
2685
2695
|
}
|
|
2686
2696
|
function buildHuePlans(resolved, ctx) {
|
|
2687
2697
|
const plans = /* @__PURE__ */ new Map();
|
|
@@ -2771,8 +2781,9 @@ function buildTokenMap(resolved, prefix, states, modes, format = "oklch", pastel
|
|
|
2771
2781
|
const tokens = {};
|
|
2772
2782
|
const huePlans = channelCtx !== void 0 && format === "oklch" ? buildHuePlans(resolved, channelCtx) : void 0;
|
|
2773
2783
|
if (huePlans !== void 0 && channelCtx !== void 0) {
|
|
2774
|
-
|
|
2775
|
-
|
|
2784
|
+
const hueDecls = buildHueDeclarations(resolved, channelCtx);
|
|
2785
|
+
for (const decl of hueDecls.light) tokens[`$${decl.prop.slice(2)}`] = { "": decl.value };
|
|
2786
|
+
if (modes.dark) for (const decl of hueDecls.dark) {
|
|
2776
2787
|
const key = `$${decl.prop.slice(2)}`;
|
|
2777
2788
|
tokens[key] = {
|
|
2778
2789
|
...tokens[key],
|
|
@@ -2829,8 +2840,9 @@ function buildCssMap(resolved, prefix, suffix, format, pastel = false, channelCt
|
|
|
2829
2840
|
};
|
|
2830
2841
|
const huePlans = channelCtx !== void 0 && format === "oklch" ? buildHuePlans(resolved, channelCtx) : void 0;
|
|
2831
2842
|
if (huePlans !== void 0 && channelCtx !== void 0) {
|
|
2832
|
-
|
|
2833
|
-
for (const decl of
|
|
2843
|
+
const hueDecls = buildHueDeclarations(resolved, channelCtx);
|
|
2844
|
+
for (const decl of hueDecls.light) lines.light.push(`${decl.prop}: ${decl.value};`);
|
|
2845
|
+
for (const decl of hueDecls.dark) {
|
|
2834
2846
|
lines.dark.push(`${decl.prop}: ${decl.value};`);
|
|
2835
2847
|
lines.darkContrast.push(`${decl.prop}: ${decl.value};`);
|
|
2836
2848
|
}
|