@valbuild/shared 0.128.0 → 0.130.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/CHANGELOG.md +71 -0
- package/client/dist/valbuild-shared-client.cjs.dev.js +3 -1
- package/client/dist/valbuild-shared-client.cjs.prod.js +3 -1
- package/client/dist/valbuild-shared-client.esm.js +1 -1
- package/dist/declarations/src/internal/emptyOf.d.ts +15 -2
- package/dist/declarations/src/internal/index.d.ts +1 -0
- package/dist/declarations/src/internal/theme/accentRamp.d.ts +120 -0
- package/dist/declarations/src/internal/valCanvasProtocol.d.ts +44 -0
- package/dist/{getSitemapTree-6777bdfa.esm.js → getSitemapTree-878d3888.esm.js} +48 -1
- package/dist/{getSitemapTree-b320d033.cjs.prod.js → getSitemapTree-99839b02.cjs.prod.js} +49 -0
- package/dist/{getSitemapTree-d1977d3e.cjs.dev.js → getSitemapTree-99c97c62.cjs.dev.js} +49 -0
- package/internal/dist/valbuild-shared-internal.cjs.dev.js +518 -1
- package/internal/dist/valbuild-shared-internal.cjs.prod.js +518 -1
- package/internal/dist/valbuild-shared-internal.esm.js +508 -3
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Internal, CODE_LANGUAGES, resolveSettingsModule, missingDeclaredKeys, localeOfValue, discriminatedUnionBranchOf, DEFAULT_COLOR_FORMAT, declaredKeySetOf } from '@valbuild/core';
|
|
2
|
-
import { _ as _createForOfIteratorHelper,
|
|
3
|
-
export { b as VAL_AI_SESSION_STORAGE_KEY, d as VAL_CANVAS_MESSAGE, c as VAL_CANVAS_PARAM, V as VAL_CONFIG_SESSION_STORAGE_KEY, a as VAL_THEME_SESSION_STORAGE_KEY,
|
|
2
|
+
import { _ as _createForOfIteratorHelper, o as _objectSpread2, q as _arrayLikeToArray, r as _unsupportedIterableToArray, s as _typeof, t as _defineProperty } from '../../dist/getSitemapTree-878d3888.esm.js';
|
|
3
|
+
export { D as DEFAULT_CANVAS_SELECTION, e as DEFAULT_CANVAS_SELECTION_SOFT, b as VAL_AI_SESSION_STORAGE_KEY, d as VAL_CANVAS_MESSAGE, c as VAL_CANVAS_PARAM, V as VAL_CONFIG_SESSION_STORAGE_KEY, a as VAL_THEME_SESSION_STORAGE_KEY, h as getNextAppRouterSourceFolder, m as getPageRouterSitemapTree, k as getPageRouterSourceFolder, n as getPatternFromModuleFilePath, j as getTanStackRouterSourceFolder, l as isTanStackRoutesFolder, g as isValCanvasFrame, i as isValCanvasPageMessage, f as isValCanvasStudioMessage, p as parseRoutePattern, w as withValCanvasParam } from '../../dist/getSitemapTree-878d3888.esm.js';
|
|
4
4
|
import { z } from 'zod';
|
|
5
5
|
import { fromError } from 'zod-validation-error';
|
|
6
6
|
import FlexSearch from 'flexsearch';
|
|
@@ -4603,6 +4603,18 @@ function clampDateTimeString(value, options) {
|
|
|
4603
4603
|
* validation then reports, rather than wrong ones.
|
|
4604
4604
|
*/
|
|
4605
4605
|
|
|
4606
|
+
/**
|
|
4607
|
+
* The empty value for a schema — the thing a "create this" affordance writes.
|
|
4608
|
+
*
|
|
4609
|
+
* Returns `JSONValue`, the MUTABLE shape, rather than `Json`. Every value here
|
|
4610
|
+
* is built fresh on the way out — `Object.fromEntries`, a new array, a
|
|
4611
|
+
* primitive — and none of it aliases anything a caller could then mutate out
|
|
4612
|
+
* from under someone. Saying `Json` instead made the type readonly, which is
|
|
4613
|
+
* a claim about sharing that is not true of anything this returns, and left
|
|
4614
|
+
* every caller asserting `as JSONValue` at the point of writing a patch. A
|
|
4615
|
+
* `JSONValue` is still assignable to `Json`, so a reader of the value loses
|
|
4616
|
+
* nothing.
|
|
4617
|
+
*/
|
|
4606
4618
|
function emptyOf(schema, context) {
|
|
4607
4619
|
if (schema.type === "object") {
|
|
4608
4620
|
return Object.fromEntries(Object.keys(schema.items).map(function (key) {
|
|
@@ -6112,4 +6124,497 @@ function performSearch(searchIndex, query) {
|
|
|
6112
6124
|
};
|
|
6113
6125
|
}
|
|
6114
6126
|
|
|
6115
|
-
|
|
6127
|
+
/**
|
|
6128
|
+
* The Studio's chrome, generated from one colour.
|
|
6129
|
+
*
|
|
6130
|
+
* `s.settings()`'s `theme.accent` is a single hex, and what it has to replace is
|
|
6131
|
+
* a TEN-STEP RAMP: `index.css` declares `--colors-brand-green-100` through
|
|
6132
|
+
* `-1000` and every brand token points into it, picking different steps in light
|
|
6133
|
+
* and in dark (a tinted surface is step 200 in light and 800 in dark; the text
|
|
6134
|
+
* on it is 1000 and 100). So the accent is not a colour to place, it is a ramp
|
|
6135
|
+
* to build — which is also why one accent drives both modes with nothing to keep
|
|
6136
|
+
* in sync.
|
|
6137
|
+
*
|
|
6138
|
+
* ## Why an arbitrary hex is safe
|
|
6139
|
+
*
|
|
6140
|
+
* The obvious worry is `contrast.test.ts`, which holds every foreground /
|
|
6141
|
+
* background pair the chrome renders to WCAG AA. A hex typed by an editor never
|
|
6142
|
+
* goes near that test.
|
|
6143
|
+
*
|
|
6144
|
+
* It holds anyway, because of how the ramp is built: **green's lightness at each
|
|
6145
|
+
* step is reused unchanged, and only the hue moves.** WCAG relative luminance is
|
|
6146
|
+
* almost entirely a function of lightness, so a ramp that keeps green's L
|
|
6147
|
+
* profile keeps green's contrast relationships. Chroma is scaled to the accent's
|
|
6148
|
+
* own saturation and then reduced — never L — until each step fits sRGB.
|
|
6149
|
+
*
|
|
6150
|
+
* "Almost entirely" is doing real work in that sentence: at equal OKLCH
|
|
6151
|
+
* lightness a saturated yellow has a higher relative luminance than a blue, so
|
|
6152
|
+
* the ratios do move a little. {@link BRAND_CONTRAST_PAIRS} is the list of pairs
|
|
6153
|
+
* that have to survive it, and `accentRamp.test.ts` runs them over the hue
|
|
6154
|
+
* circle rather than trusting the argument.
|
|
6155
|
+
*
|
|
6156
|
+
* ## What is NOT generated
|
|
6157
|
+
*
|
|
6158
|
+
* With no accent set, the hand-tuned ramp in `index.css` is used as it is. This
|
|
6159
|
+
* module reproduces it to within a step or two, and re-deriving a value somebody
|
|
6160
|
+
* tuned by eye is a silent regression rather than a simplification.
|
|
6161
|
+
*/
|
|
6162
|
+
|
|
6163
|
+
/** The steps `index.css` declares, smallest (lightest) first. */
|
|
6164
|
+
var RAMP_STEPS = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
|
|
6165
|
+
/**
|
|
6166
|
+
* Val's own brand ramp, and the lightness profile every generated ramp borrows.
|
|
6167
|
+
*
|
|
6168
|
+
* A copy of what `index.css` declares, because this package cannot read the UI
|
|
6169
|
+
* package's stylesheet — so the two are held together by a test instead:
|
|
6170
|
+
* `contrast.test.ts` resolves the ramp out of the real CSS and asserts it equals
|
|
6171
|
+
* this. If that test fails, the stylesheet moved and this did not.
|
|
6172
|
+
*/
|
|
6173
|
+
var VAL_GREEN_RAMP = {
|
|
6174
|
+
100: "#dcfae6",
|
|
6175
|
+
200: "#abefc6",
|
|
6176
|
+
300: "#75e0a7",
|
|
6177
|
+
400: "#47cd89",
|
|
6178
|
+
500: "#17b26a",
|
|
6179
|
+
600: "#079455",
|
|
6180
|
+
700: "#067647",
|
|
6181
|
+
800: "#085d3a",
|
|
6182
|
+
900: "#074d31",
|
|
6183
|
+
1000: "#053321"
|
|
6184
|
+
};
|
|
6185
|
+
|
|
6186
|
+
/**
|
|
6187
|
+
* The step the accent itself becomes, and therefore the step the whole ramp's
|
|
6188
|
+
* chroma is scaled against.
|
|
6189
|
+
*
|
|
6190
|
+
* 500 rather than 600: it is the most saturated step in the green ramp, so an
|
|
6191
|
+
* accent anchored there is reproduced about as faithfully as the ramp allows,
|
|
6192
|
+
* and the steps either side of it stay in the same relationship to it that
|
|
6193
|
+
* green's do.
|
|
6194
|
+
*/
|
|
6195
|
+
var ANCHOR_STEP = 500;
|
|
6196
|
+
|
|
6197
|
+
/**
|
|
6198
|
+
* The step drawn on the CUSTOMER's page, as an outline around every editable
|
|
6199
|
+
* element.
|
|
6200
|
+
*
|
|
6201
|
+
* 600 is the step `index.css` pins the page-selection tokens to, for a reason
|
|
6202
|
+
* worth keeping: it clears 3:1 against both white and black, so the outlines
|
|
6203
|
+
* stay visible whatever the site behind them looks like. A generated ramp
|
|
6204
|
+
* inherits that because it inherits green-600's lightness — and
|
|
6205
|
+
* `accentRamp.test.ts` checks it on both grounds rather than assuming.
|
|
6206
|
+
*/
|
|
6207
|
+
var PAGE_SELECTION_STEP = 600;
|
|
6208
|
+
|
|
6209
|
+
// ---------------------------------------------------------------------------
|
|
6210
|
+
// sRGB <-> OKLCH
|
|
6211
|
+
//
|
|
6212
|
+
// Written out rather than taken from a dependency: it is thirty lines, it runs
|
|
6213
|
+
// on every Studio render that has an accent, and `s.color()` already carries
|
|
6214
|
+
// its own copy of the neighbouring maths (`schema/colorFormat.ts`) for the same
|
|
6215
|
+
// reason.
|
|
6216
|
+
// ---------------------------------------------------------------------------
|
|
6217
|
+
|
|
6218
|
+
/** OKLCH: lightness 0-1, chroma, hue in degrees. */
|
|
6219
|
+
|
|
6220
|
+
/**
|
|
6221
|
+
* Every hex form `s.color({ format: "hex" })` accepts.
|
|
6222
|
+
*
|
|
6223
|
+
* Three and four digits as well as six and eight, because that is what the
|
|
6224
|
+
* schema validates — `detectColorFormat` calls anything starting with `#` hex,
|
|
6225
|
+
* and `#fff` parses. A generator that took only six digits left a
|
|
6226
|
+
* schema-VALID accent doing nothing at all: no ramp, no error, and a Studio
|
|
6227
|
+
* still on Val green with a colour sitting in the settings module.
|
|
6228
|
+
*/
|
|
6229
|
+
var HEX = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
|
|
6230
|
+
function srgbToLinear(c) {
|
|
6231
|
+
return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
|
6232
|
+
}
|
|
6233
|
+
function linearToSrgb(c) {
|
|
6234
|
+
return c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
|
|
6235
|
+
}
|
|
6236
|
+
|
|
6237
|
+
/**
|
|
6238
|
+
* `null` for anything that is not a hex colour.
|
|
6239
|
+
*
|
|
6240
|
+
* Alpha is read and discarded. The ramp is a set of opaque surfaces and text
|
|
6241
|
+
* colours, and `s.color()` rejects a non-opaque value anyway unless the field
|
|
6242
|
+
* enabled alpha — which `theme.accent` does not. So `#0f08` is the same accent
|
|
6243
|
+
* as `#0f0`, rather than nothing at all.
|
|
6244
|
+
*/
|
|
6245
|
+
function hexToRgb(hex) {
|
|
6246
|
+
var trimmed = hex.trim();
|
|
6247
|
+
if (!HEX.test(trimmed)) {
|
|
6248
|
+
return null;
|
|
6249
|
+
}
|
|
6250
|
+
var digits = trimmed.slice(1);
|
|
6251
|
+
var _short = digits.length <= 4;
|
|
6252
|
+
var channel = function channel(index) {
|
|
6253
|
+
var slice = _short ? digits[index].repeat(2) : digits.slice(index * 2, index * 2 + 2);
|
|
6254
|
+
return parseInt(slice, 16) / 255;
|
|
6255
|
+
};
|
|
6256
|
+
return [channel(0), channel(1), channel(2)];
|
|
6257
|
+
}
|
|
6258
|
+
function rgbToHex(rgb) {
|
|
6259
|
+
return "#" + rgb.map(function (c) {
|
|
6260
|
+
return Math.round(Math.min(1, Math.max(0, c)) * 255).toString(16).padStart(2, "0");
|
|
6261
|
+
}).join("");
|
|
6262
|
+
}
|
|
6263
|
+
function rgbToOklch(rgb) {
|
|
6264
|
+
var r = srgbToLinear(rgb[0]);
|
|
6265
|
+
var g = srgbToLinear(rgb[1]);
|
|
6266
|
+
var b = srgbToLinear(rgb[2]);
|
|
6267
|
+
var l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
|
|
6268
|
+
var m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
|
|
6269
|
+
var s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
|
|
6270
|
+
var okL = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
|
|
6271
|
+
var okA = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
|
|
6272
|
+
var okB = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
|
|
6273
|
+
return [okL, Math.hypot(okA, okB), Math.atan2(okB, okA) * 180 / Math.PI];
|
|
6274
|
+
}
|
|
6275
|
+
function oklchToRgb(lch) {
|
|
6276
|
+
var okA = lch[1] * Math.cos(lch[2] * Math.PI / 180);
|
|
6277
|
+
var okB = lch[1] * Math.sin(lch[2] * Math.PI / 180);
|
|
6278
|
+
var l = Math.pow(lch[0] + 0.3963377774 * okA + 0.2158037573 * okB, 3);
|
|
6279
|
+
var m = Math.pow(lch[0] - 0.1055613458 * okA - 0.0638541728 * okB, 3);
|
|
6280
|
+
var s = Math.pow(lch[0] - 0.0894841775 * okA - 1.291485548 * okB, 3);
|
|
6281
|
+
return [linearToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s), linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s), linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s)];
|
|
6282
|
+
}
|
|
6283
|
+
|
|
6284
|
+
/** A hair of slack, so a colour that is exactly at the edge is not clamped. */
|
|
6285
|
+
var GAMUT_EPSILON = 0.0005;
|
|
6286
|
+
function inGamut(rgb) {
|
|
6287
|
+
return rgb.every(function (c) {
|
|
6288
|
+
return c >= -GAMUT_EPSILON && c <= 1 + GAMUT_EPSILON;
|
|
6289
|
+
});
|
|
6290
|
+
}
|
|
6291
|
+
|
|
6292
|
+
/**
|
|
6293
|
+
* Bring a colour inside sRGB by reducing its CHROMA, never its lightness.
|
|
6294
|
+
*
|
|
6295
|
+
* That restriction is the whole reason the contrast argument holds: clipping
|
|
6296
|
+
* RGB channels (which is what naive conversion does) moves lightness, and a
|
|
6297
|
+
* step that has drifted lighter is a step whose contrast guarantee is gone.
|
|
6298
|
+
* Twenty-four bisections is well past single-byte precision.
|
|
6299
|
+
*/
|
|
6300
|
+
function clampChromaToGamut(lch) {
|
|
6301
|
+
if (inGamut(oklchToRgb(lch))) {
|
|
6302
|
+
return lch;
|
|
6303
|
+
}
|
|
6304
|
+
var lo = 0;
|
|
6305
|
+
var hi = lch[1];
|
|
6306
|
+
for (var i = 0; i < 24; i++) {
|
|
6307
|
+
var mid = (lo + hi) / 2;
|
|
6308
|
+
if (inGamut(oklchToRgb([lch[0], mid, lch[2]]))) {
|
|
6309
|
+
lo = mid;
|
|
6310
|
+
} else {
|
|
6311
|
+
hi = mid;
|
|
6312
|
+
}
|
|
6313
|
+
}
|
|
6314
|
+
return [lch[0], lo, lch[2]];
|
|
6315
|
+
}
|
|
6316
|
+
var GREEN_PROFILE = RAMP_STEPS.map(function (step) {
|
|
6317
|
+
var rgb = hexToRgb(VAL_GREEN_RAMP[step]);
|
|
6318
|
+
if (rgb === null) {
|
|
6319
|
+
// Unreachable: the ramp above is literal hex. Thrown rather than defaulted
|
|
6320
|
+
// because a broken profile would produce a plausible-looking wrong ramp.
|
|
6321
|
+
throw new Error("Val's green ramp holds a non-hex value at step ".concat(step));
|
|
6322
|
+
}
|
|
6323
|
+
return {
|
|
6324
|
+
step: step,
|
|
6325
|
+
lch: rgbToOklch(rgb)
|
|
6326
|
+
};
|
|
6327
|
+
});
|
|
6328
|
+
|
|
6329
|
+
/**
|
|
6330
|
+
* The ten-step ramp for one accent, or `null` if it is not a six-digit hex.
|
|
6331
|
+
*
|
|
6332
|
+
* `null` rather than a fallback: the caller knows whether it is holding a value
|
|
6333
|
+
* an editor picked (in which case the schema already validated it) or one that
|
|
6334
|
+
* came out of a hand-edited settings file, and only the caller can decide
|
|
6335
|
+
* whether "ignore it" or "report it" is right.
|
|
6336
|
+
*/
|
|
6337
|
+
function accentRamp(accent) {
|
|
6338
|
+
var rgb = hexToRgb(accent);
|
|
6339
|
+
if (rgb === null) {
|
|
6340
|
+
return null;
|
|
6341
|
+
}
|
|
6342
|
+
var _rgbToOklch = rgbToOklch(rgb),
|
|
6343
|
+
_rgbToOklch2 = _slicedToArray(_rgbToOklch, 3),
|
|
6344
|
+
accentChroma = _rgbToOklch2[1],
|
|
6345
|
+
accentHue = _rgbToOklch2[2];
|
|
6346
|
+
var anchor = GREEN_PROFILE.find(function (entry) {
|
|
6347
|
+
return entry.step === ANCHOR_STEP;
|
|
6348
|
+
});
|
|
6349
|
+
if (anchor === undefined || anchor.lch[1] === 0) {
|
|
6350
|
+
throw new Error("Val's green ramp has no chroma at its anchor step");
|
|
6351
|
+
}
|
|
6352
|
+
var chromaScale = accentChroma / anchor.lch[1];
|
|
6353
|
+
var at = function at(step) {
|
|
6354
|
+
var entry = GREEN_PROFILE.find(function (candidate) {
|
|
6355
|
+
return candidate.step === step;
|
|
6356
|
+
});
|
|
6357
|
+
if (entry === undefined) {
|
|
6358
|
+
throw new Error("Val's green ramp has no step ".concat(step));
|
|
6359
|
+
}
|
|
6360
|
+
// Green's lightness and chroma, the accent's hue. Green's own hue is the
|
|
6361
|
+
// one thing a generated ramp does not keep.
|
|
6362
|
+
var _entry$lch = _slicedToArray(entry.lch, 2),
|
|
6363
|
+
lightness = _entry$lch[0],
|
|
6364
|
+
chroma = _entry$lch[1];
|
|
6365
|
+
return rgbToHex(oklchToRgb(clampChromaToGamut([lightness, chroma * chromaScale, accentHue])));
|
|
6366
|
+
};
|
|
6367
|
+
// Written out rather than reduced into, so the type says every step is
|
|
6368
|
+
// present instead of a cast saying so.
|
|
6369
|
+
return {
|
|
6370
|
+
100: at(100),
|
|
6371
|
+
200: at(200),
|
|
6372
|
+
300: at(300),
|
|
6373
|
+
400: at(400),
|
|
6374
|
+
500: at(500),
|
|
6375
|
+
600: at(600),
|
|
6376
|
+
700: at(700),
|
|
6377
|
+
800: at(800),
|
|
6378
|
+
900: at(900),
|
|
6379
|
+
1000: at(1000)
|
|
6380
|
+
};
|
|
6381
|
+
}
|
|
6382
|
+
|
|
6383
|
+
/**
|
|
6384
|
+
* The custom properties that restyle the chrome, ready to put on a `style`
|
|
6385
|
+
* attribute.
|
|
6386
|
+
*
|
|
6387
|
+
* Custom properties on the element rather than a generated stylesheet: nothing
|
|
6388
|
+
* has to be escaped, an inline custom property beats `@layer base` without a
|
|
6389
|
+
* specificity fight, and a subtree that should keep the untouched palette
|
|
6390
|
+
* simply is not given the object. See `useValThemeStyle` for where they go —
|
|
6391
|
+
* every place the Studio stamps `data-mode`, because the theme travels with it.
|
|
6392
|
+
*
|
|
6393
|
+
* Empty when nothing is set, which is what makes "no theme" cost nothing.
|
|
6394
|
+
*/
|
|
6395
|
+
function themeCustomProperties(theme) {
|
|
6396
|
+
var properties = {};
|
|
6397
|
+
if (theme.accent) {
|
|
6398
|
+
var ramp = accentRamp(theme.accent);
|
|
6399
|
+
if (ramp !== null) {
|
|
6400
|
+
var _iterator = _createForOfIteratorHelper(RAMP_STEPS),
|
|
6401
|
+
_step;
|
|
6402
|
+
try {
|
|
6403
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
6404
|
+
var step = _step.value;
|
|
6405
|
+
properties["--colors-brand-green-".concat(step)] = ramp[step];
|
|
6406
|
+
}
|
|
6407
|
+
/*
|
|
6408
|
+
* The page-selection trio, written OUT rather than left to follow the
|
|
6409
|
+
* ramp — and the first of them is the one that has to be said out loud,
|
|
6410
|
+
* because it looks like it should follow and does not.
|
|
6411
|
+
*
|
|
6412
|
+
* `index.css` declares `--bg-page-selection: var(--colors-brand-green-600)`,
|
|
6413
|
+
* so overriding the ramp looks like enough. It is not: **a `var()` inside
|
|
6414
|
+
* a custom property is substituted where the property is DECLARED, not
|
|
6415
|
+
* where it is used.** That declaration lives in the light block, whose
|
|
6416
|
+
* selector is `:host, :root, *[data-mode="light"]` — so on a
|
|
6417
|
+
* `data-mode="dark"` element the rule does not match, nothing is declared
|
|
6418
|
+
* there, and what the element inherits from `:host` is the value already
|
|
6419
|
+
* substituted to green. An override of the ramp on the element cannot
|
|
6420
|
+
* reach backwards into it.
|
|
6421
|
+
*
|
|
6422
|
+
* The brand tokens escape this only because the DARK block re-declares
|
|
6423
|
+
* them: `--bg-brand-primary: var(--colors-brand-green-800)` is computed
|
|
6424
|
+
* on the themed element itself, so it resolves against the override. The
|
|
6425
|
+
* page-selection tokens are deliberately declared once and never flipped
|
|
6426
|
+
* with the theme (the page underneath is not a Val surface), which is
|
|
6427
|
+
* exactly what puts them outside that mechanism.
|
|
6428
|
+
*
|
|
6429
|
+
* So: anything that depends on the ramp and is not re-declared per mode
|
|
6430
|
+
* has to be written here. `brandDerivedTokens.test.ts` scans the
|
|
6431
|
+
* stylesheet and fails if another one appears.
|
|
6432
|
+
*/
|
|
6433
|
+
} catch (err) {
|
|
6434
|
+
_iterator.e(err);
|
|
6435
|
+
} finally {
|
|
6436
|
+
_iterator.f();
|
|
6437
|
+
}
|
|
6438
|
+
properties["--bg-page-selection"] = ramp[PAGE_SELECTION_STEP];
|
|
6439
|
+
var selection = hexToRgb(ramp[PAGE_SELECTION_STEP]);
|
|
6440
|
+
if (selection !== null) {
|
|
6441
|
+
var channels = selection.map(function (c) {
|
|
6442
|
+
return Math.round(c * 255);
|
|
6443
|
+
}).join(", ");
|
|
6444
|
+
properties["--bg-page-selection-fill"] = "rgba(".concat(channels, ", 0.12)");
|
|
6445
|
+
properties["--bg-page-selection-soft"] = "rgba(".concat(channels, ", 0.4)");
|
|
6446
|
+
}
|
|
6447
|
+
}
|
|
6448
|
+
}
|
|
6449
|
+
if (theme.radius) {
|
|
6450
|
+
properties["--radius"] = theme.radius;
|
|
6451
|
+
}
|
|
6452
|
+
return properties;
|
|
6453
|
+
}
|
|
6454
|
+
|
|
6455
|
+
/**
|
|
6456
|
+
* WCAG relative luminance of a six-digit hex.
|
|
6457
|
+
*
|
|
6458
|
+
* Exported so there is one implementation of the maths that decides whether a
|
|
6459
|
+
* theme is legible; `contrast.test.ts` had its own copy, and two copies of a
|
|
6460
|
+
* threshold is how a guarantee quietly stops being one.
|
|
6461
|
+
*/
|
|
6462
|
+
function relativeLuminance(hex) {
|
|
6463
|
+
var rgb = hexToRgb(hex);
|
|
6464
|
+
if (rgb === null) {
|
|
6465
|
+
throw new Error("Not a six-digit hex colour: ".concat(hex));
|
|
6466
|
+
}
|
|
6467
|
+
var _rgb$map = rgb.map(srgbToLinear),
|
|
6468
|
+
_rgb$map2 = _slicedToArray(_rgb$map, 3),
|
|
6469
|
+
r = _rgb$map2[0],
|
|
6470
|
+
g = _rgb$map2[1],
|
|
6471
|
+
b = _rgb$map2[2];
|
|
6472
|
+
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
|
6473
|
+
}
|
|
6474
|
+
|
|
6475
|
+
/** WCAG contrast ratio between two six-digit hex colours, 1 to 21. */
|
|
6476
|
+
function contrastRatio(a, b) {
|
|
6477
|
+
var la = relativeLuminance(a);
|
|
6478
|
+
var lb = relativeLuminance(b);
|
|
6479
|
+
var hi = Math.max(la, lb);
|
|
6480
|
+
var lo = Math.min(la, lb);
|
|
6481
|
+
return (hi + 0.05) / (lo + 0.05);
|
|
6482
|
+
}
|
|
6483
|
+
|
|
6484
|
+
/** WCAG AA for body text. */
|
|
6485
|
+
var AA_TEXT = 4.5;
|
|
6486
|
+
/** WCAG AA for large text and for UI components such as a focus ring. */
|
|
6487
|
+
var AA_LARGE = 3;
|
|
6488
|
+
|
|
6489
|
+
/**
|
|
6490
|
+
* Where a brand pair's background comes from.
|
|
6491
|
+
*
|
|
6492
|
+
* A `RampStep` is a step of the brand ramp, so it moves with the accent. A hex
|
|
6493
|
+
* is a neutral surface that does not — the canvas and the floating panels are
|
|
6494
|
+
* grey in every theme, and a ring has to be legible against them.
|
|
6495
|
+
*/
|
|
6496
|
+
|
|
6497
|
+
/**
|
|
6498
|
+
* Every foreground / background pair the chrome renders with BRAND colours.
|
|
6499
|
+
*
|
|
6500
|
+
* The list is data rather than a test body because two different things have to
|
|
6501
|
+
* be held to it, and one table is the only way they can agree:
|
|
6502
|
+
*
|
|
6503
|
+
* - `accentRamp.test.ts` runs it over ramps generated across the hue circle,
|
|
6504
|
+
* which is what makes an arbitrary accent safe.
|
|
6505
|
+
* - `contrast.test.ts` runs it over the ramp resolved out of the real
|
|
6506
|
+
* `index.css`, which is what stops someone nudging Val's own green past AA.
|
|
6507
|
+
*
|
|
6508
|
+
* The neutral pairs — muted text on a panel, a hairline on the canvas — stay in
|
|
6509
|
+
* `contrast.test.ts`. They have nothing to do with the accent, and a theme
|
|
6510
|
+
* cannot move them.
|
|
6511
|
+
*/
|
|
6512
|
+
var BRAND_CONTRAST_PAIRS = [
|
|
6513
|
+
// Light: `--bg-brand-primary` is step 200, with `--fg-brand-primary` (1000)
|
|
6514
|
+
// and `--fg-brand-primary-alt` (900) on it.
|
|
6515
|
+
{
|
|
6516
|
+
what: "fg-brand-primary on bg-brand-primary",
|
|
6517
|
+
mode: "light",
|
|
6518
|
+
fg: 1000,
|
|
6519
|
+
bg: 200,
|
|
6520
|
+
min: AA_TEXT
|
|
6521
|
+
}, {
|
|
6522
|
+
what: "fg-brand-primary-alt on bg-brand-primary",
|
|
6523
|
+
mode: "light",
|
|
6524
|
+
fg: 900,
|
|
6525
|
+
bg: 200,
|
|
6526
|
+
min: AA_TEXT
|
|
6527
|
+
},
|
|
6528
|
+
// Light: `--bg-brand-secondary` is the filled step 800.
|
|
6529
|
+
{
|
|
6530
|
+
what: "fg-brand-secondary on bg-brand-secondary",
|
|
6531
|
+
mode: "light",
|
|
6532
|
+
fg: 100,
|
|
6533
|
+
bg: 800,
|
|
6534
|
+
min: AA_TEXT
|
|
6535
|
+
}, {
|
|
6536
|
+
what: "fg-brand-secondary-alt on bg-brand-secondary",
|
|
6537
|
+
mode: "light",
|
|
6538
|
+
fg: 200,
|
|
6539
|
+
bg: 800,
|
|
6540
|
+
min: AA_TEXT
|
|
6541
|
+
},
|
|
6542
|
+
// Light: `--border-focus` is step 600, and it has to read on both neutral
|
|
6543
|
+
// surfaces a focused control can sit on.
|
|
6544
|
+
{
|
|
6545
|
+
what: "border-focus on bg-float",
|
|
6546
|
+
mode: "light",
|
|
6547
|
+
fg: 600,
|
|
6548
|
+
bg: "#fcfcfc",
|
|
6549
|
+
min: AA_LARGE
|
|
6550
|
+
}, {
|
|
6551
|
+
what: "border-focus on bg-canvas",
|
|
6552
|
+
mode: "light",
|
|
6553
|
+
fg: 600,
|
|
6554
|
+
bg: "#f4f4f5",
|
|
6555
|
+
min: AA_LARGE
|
|
6556
|
+
},
|
|
6557
|
+
// The outlines drawn on the customer's own page. Not a Val surface at all,
|
|
6558
|
+
// which is why the grounds are pure white and pure black: the site behind
|
|
6559
|
+
// them can be anything.
|
|
6560
|
+
{
|
|
6561
|
+
what: "bg-page-selection on a white site",
|
|
6562
|
+
mode: "light",
|
|
6563
|
+
fg: 600,
|
|
6564
|
+
bg: "#ffffff",
|
|
6565
|
+
min: AA_LARGE
|
|
6566
|
+
}, {
|
|
6567
|
+
what: "bg-page-selection on a black site",
|
|
6568
|
+
mode: "light",
|
|
6569
|
+
fg: 600,
|
|
6570
|
+
bg: "#000000",
|
|
6571
|
+
min: AA_LARGE
|
|
6572
|
+
},
|
|
6573
|
+
// Dark inverts which step is the surface and which is the text.
|
|
6574
|
+
{
|
|
6575
|
+
what: "fg-brand-primary on bg-brand-primary",
|
|
6576
|
+
mode: "dark",
|
|
6577
|
+
fg: 100,
|
|
6578
|
+
bg: 800,
|
|
6579
|
+
min: AA_TEXT
|
|
6580
|
+
}, {
|
|
6581
|
+
what: "fg-brand-primary-alt on bg-brand-primary",
|
|
6582
|
+
mode: "dark",
|
|
6583
|
+
fg: 200,
|
|
6584
|
+
bg: 800,
|
|
6585
|
+
min: AA_TEXT
|
|
6586
|
+
}, {
|
|
6587
|
+
what: "fg-brand-secondary on bg-brand-secondary",
|
|
6588
|
+
mode: "dark",
|
|
6589
|
+
fg: 1000,
|
|
6590
|
+
bg: 200,
|
|
6591
|
+
min: AA_TEXT
|
|
6592
|
+
}, {
|
|
6593
|
+
what: "fg-brand-secondary-alt on bg-brand-secondary",
|
|
6594
|
+
mode: "dark",
|
|
6595
|
+
fg: 900,
|
|
6596
|
+
bg: 200,
|
|
6597
|
+
min: AA_TEXT
|
|
6598
|
+
},
|
|
6599
|
+
// Dark's focus ring lightens rather than mirroring: step 600 is nearly
|
|
6600
|
+
// invisible against the dark canvas.
|
|
6601
|
+
{
|
|
6602
|
+
what: "border-focus on bg-canvas",
|
|
6603
|
+
mode: "dark",
|
|
6604
|
+
fg: 400,
|
|
6605
|
+
bg: "#08080a",
|
|
6606
|
+
min: AA_LARGE
|
|
6607
|
+
}, {
|
|
6608
|
+
what: "border-focus on bg-float",
|
|
6609
|
+
mode: "dark",
|
|
6610
|
+
fg: 400,
|
|
6611
|
+
bg: "#131316",
|
|
6612
|
+
min: AA_LARGE
|
|
6613
|
+
}];
|
|
6614
|
+
|
|
6615
|
+
/** Resolve one side of a {@link BRAND_CONTRAST_PAIRS} entry against a ramp. */
|
|
6616
|
+
function resolvePairGround(ground, ramp) {
|
|
6617
|
+
return typeof ground === "number" ? ramp[ground] : ground;
|
|
6618
|
+
}
|
|
6619
|
+
|
|
6620
|
+
export { AA_LARGE, AA_TEXT, Api, BRAND_CONTRAST_PAIRS, BinaryFileRef, CodeOptions, ColorOptions, DEFAULT_ERROR_MESSAGE, DateOptions, ENCODE_DEFAULTS, ENCODE_MIME_TYPE_OF, FileOptions, HistoricalCommit, HistoricalModule, HistoricalPatchSet, HistoryError, ImageEncodeOption, ImageOptions, JSONValue, JSON_ENTRIES_BATCH_MAX, ModuleComparison, NEVER_ENCODED, ParentRef$1 as ParentRef, Patch, PatchBlock, PatchGroup, PatchId, PatchJSON, RAMP_STEPS, RemirrorBr, RemirrorBulletList, RemirrorHeading, RemirrorImage, RemirrorJSON, RemirrorLinkMark, RemirrorListItem, RemirrorOrderedList, RemirrorParagraph, RemirrorText, RemirrorTextMark, RestoreVerdict, RichTextOptions, SCHEMA_SOURCE_FIXES, SerializedArraySchema, SerializedBooleanSchema, SerializedCodeSchema, SerializedColorSchema, SerializedDateSchema, SerializedDateTimeSchema, SerializedDiscriminatedUnionSchema, SerializedEnumSchema, SerializedFileSchema, SerializedImageSchema, SerializedKeyOfSchema, SerializedLiteralSchema, SerializedLocaleSchema, SerializedNumberSchema, SerializedObjectSchema, SerializedRecordSchema, SerializedRichTextSchema, SerializedRouteSchema, SerializedSchema, SerializedSettingsSchema, SerializedStringSchema, SharedValConfig, VAL_ENABLE_COOKIE_NAME, VAL_GREEN_RAMP, VAL_SESSION_COOKIE, VAL_STATE_COOKIE, ValCommit, ValDeployment, accentRamp, buildDuplicatePatch, buildEmptyAtPathPatch, buildFileRefValue, buildImageGalleryPatch, buildRemoveImageGalleryEntryPatch, buildSearchIndex, checkCompatibility, chooseEncoded, concatModulePath, contrastRatio, createRegExpFromPattern, createSearchIndex, createValClient, declaredLocales, describeContainerAtPath, emptyOf, explainIncompatible, filterBlockingValidationErrors, filterRoutesByPatterns, findSimilar, fitWithin, flattenRichText, getErrorMessageFromUnknownJson, getFilenameFromRef, getInlineImgInfo, getKeyOfRecordAt, getRefParts, getRoutesOf, getRoutesWithModulePaths, getSourceAt, indexModule, isMimeTypeAccepted, isRemoteSchema, isSchemaSourceFixError, isSkippedSource, keyOfRecordPath, levenshtein, localeAt, newestCommitSha, partitionValidationErrors, performSearch, relativeLuminance, remirrorToRichTextSource, removeModule, resolveEncodeSettings, resolvePairGround, resolveSchemaSourceFixForError, resolveSchemaSourceFixes, resolveSerializedSchemaAtPath, richTextToRemirror, safeParsePatch, sourcePathOfChild, themeCustomProperties, toolNames, traverseSchemaSource, urlOf, validateRoutePatterns, withExtension };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@valbuild/shared",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.130.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Val shared types and utilities",
|
|
6
6
|
"repository": {
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"flexsearch": "^0.8.212",
|
|
38
38
|
"zod": "^4.4.3",
|
|
39
39
|
"zod-validation-error": "^5.0.0",
|
|
40
|
-
"@valbuild/core": "0.
|
|
40
|
+
"@valbuild/core": "0.130.0"
|
|
41
41
|
},
|
|
42
42
|
"files": [
|
|
43
43
|
"CHANGELOG.md",
|