@graview/core 0.1.15 → 0.1.17
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/README.md +23 -5
- package/dist/app.d.ts +8 -8
- package/dist/app.d.ts.map +1 -1
- package/dist/arrangement.d.ts +2 -2
- package/dist/arrangement.d.ts.map +1 -1
- package/dist/arrangement.js +5 -5
- package/dist/arranging.js +3 -3
- package/dist/capabilities.js +1 -1
- package/dist/capabilities.js.map +1 -1
- package/dist/city.d.ts +5 -5
- package/dist/city.js +3 -3
- package/dist/cli/check/beginnings.js +2 -2
- package/dist/cli/check/brand.d.ts.map +1 -1
- package/dist/cli/check/brand.js +15 -9
- package/dist/cli/check/brand.js.map +1 -1
- package/dist/cli/check/city.js +1 -1
- package/dist/cli/check/context.js +1 -1
- package/dist/cli/check/relations.js +2 -2
- package/dist/cli/check/relations.js.map +1 -1
- package/dist/cli/check/settings.js +8 -8
- package/dist/cli/check/settings.js.map +1 -1
- package/dist/cli/check/views.d.ts +1 -1
- package/dist/cli/check/views.js +1 -1
- package/dist/cli/create.d.ts +1 -1
- package/dist/cli/create.js +5 -5
- package/dist/cli/describe.d.ts +1 -1
- package/dist/cli/describe.js +2 -2
- package/dist/cli/describe.js.map +1 -1
- package/dist/cli/index.d.ts +1 -1
- package/dist/columns.d.ts +1 -1
- package/dist/columns.js +1 -1
- package/dist/compiled.d.ts.map +1 -1
- package/dist/compiled.js +6 -2
- package/dist/compiled.js.map +1 -1
- package/dist/conformance/fixtures.d.ts.map +1 -1
- package/dist/conformance/fixtures.js +194 -0
- package/dist/conformance/fixtures.js.map +1 -1
- package/dist/describe.d.ts +1 -1
- package/dist/describe.d.ts.map +1 -1
- package/dist/document/brand-check.d.ts +10 -0
- package/dist/document/brand-check.d.ts.map +1 -0
- package/dist/document/brand-check.js +33 -0
- package/dist/document/brand-check.js.map +1 -0
- package/dist/document/brand.d.ts +10 -0
- package/dist/document/brand.d.ts.map +1 -0
- package/dist/document/brand.js +49 -0
- package/dist/document/brand.js.map +1 -0
- package/dist/document/compile-checked.d.ts.map +1 -1
- package/dist/document/compile-checked.js +6 -2
- package/dist/document/compile-checked.js.map +1 -1
- package/dist/document/compile.d.ts +6 -0
- package/dist/document/compile.d.ts.map +1 -1
- package/dist/document/compile.js +4 -13
- package/dist/document/compile.js.map +1 -1
- package/dist/document/compiled.d.ts.map +1 -1
- package/dist/document/compiled.js +12 -4
- package/dist/document/compiled.js.map +1 -1
- package/dist/document/describe-place.d.ts +16 -0
- package/dist/document/describe-place.d.ts.map +1 -1
- package/dist/document/describe-place.js +14 -1
- package/dist/document/describe-place.js.map +1 -1
- package/dist/document/diff.d.ts +1 -1
- package/dist/document/diff.d.ts.map +1 -1
- package/dist/document/diff.js +52 -7
- package/dist/document/diff.js.map +1 -1
- package/dist/document/edit.d.ts +7 -2
- package/dist/document/edit.d.ts.map +1 -1
- package/dist/document/edit.js +188 -48
- package/dist/document/edit.js.map +1 -1
- package/dist/document/expr/analyze.d.ts +2 -2
- package/dist/document/expr/analyze.js +2 -2
- package/dist/document/expr/print.js +1 -1
- package/dist/document/index.d.ts +3 -1
- package/dist/document/index.d.ts.map +1 -1
- package/dist/document/index.js +1 -0
- package/dist/document/index.js.map +1 -1
- package/dist/document/quote.d.ts +5 -0
- package/dist/document/quote.d.ts.map +1 -0
- package/dist/document/quote.js +17 -0
- package/dist/document/quote.js.map +1 -0
- package/dist/document/respell.d.ts +20 -0
- package/dist/document/respell.d.ts.map +1 -0
- package/dist/document/respell.js +66 -0
- package/dist/document/respell.js.map +1 -0
- package/dist/document/rules.d.ts +2 -2
- package/dist/document/rules.d.ts.map +1 -1
- package/dist/document/rules.js +2 -2
- package/dist/document/rules.js.map +1 -1
- package/dist/document/schema.d.ts +47 -2
- package/dist/document/schema.d.ts.map +1 -1
- package/dist/document/schema.js +27 -3
- package/dist/document/schema.js.map +1 -1
- package/dist/document/thumbnail.d.ts +9 -0
- package/dist/document/thumbnail.d.ts.map +1 -1
- package/dist/document/thumbnail.js +74 -12
- package/dist/document/thumbnail.js.map +1 -1
- package/dist/document/to-document.js +5 -5
- package/dist/document/to-document.js.map +1 -1
- package/dist/document/upgrade.d.ts +3 -1
- package/dist/document/upgrade.d.ts.map +1 -1
- package/dist/document/upgrade.js +6 -3
- package/dist/document/upgrade.js.map +1 -1
- package/dist/graph/graph.js +3 -3
- package/dist/graph/primitives.d.ts +2 -2
- package/dist/graph/primitives.js +2 -2
- package/dist/index.d.ts +12 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +9 -5
- package/dist/index.js.map +1 -1
- package/dist/invariants/engine.js +1 -1
- package/dist/invariants/types.d.ts +3 -3
- package/dist/invariants/types.d.ts.map +1 -1
- package/dist/labels.d.ts +1 -1
- package/dist/modules.d.ts +1 -1
- package/dist/modules.js +1 -1
- package/dist/mutations/define-mutation.js +4 -4
- package/dist/mutations/define-mutation.js.map +1 -1
- package/dist/mutations/derive-edits.js +3 -3
- package/dist/mutations/node-ref.js +1 -1
- package/dist/mutations/types.d.ts +1 -1
- package/dist/mutations/words.js +3 -3
- package/dist/ops/types.d.ts +1 -1
- package/dist/ops/withheld.d.ts +3 -3
- package/dist/permissions/policy.d.ts +1 -1
- package/dist/permissions/policy.js +3 -3
- package/dist/permissions/types.d.ts +2 -2
- package/dist/places.d.ts +19 -2
- package/dist/places.d.ts.map +1 -1
- package/dist/places.js +41 -4
- package/dist/places.js.map +1 -1
- package/dist/scaffold/domain.js +3 -3
- package/dist/scaffold/index.d.ts +1 -1
- package/dist/scaffold/index.d.ts.map +1 -1
- package/dist/scaffold/names.d.ts +1 -1
- package/dist/scaffold/names.js +1 -1
- package/dist/scaffold/names.js.map +1 -1
- package/dist/scaffold/project.d.ts.map +1 -1
- package/dist/scaffold/project.js +4 -1
- package/dist/scaffold/project.js.map +1 -1
- package/dist/scene-districts.d.ts +1 -1
- package/dist/schema/define-node.d.ts +4 -4
- package/dist/schema/define-node.d.ts.map +1 -1
- package/dist/schema/define-node.js +8 -8
- package/dist/schema/define-node.js.map +1 -1
- package/dist/schema/figures.d.ts +1 -1
- package/dist/schema/figures.js +7 -7
- package/dist/schema/figures.js.map +1 -1
- package/dist/schema/types.d.ts +1 -1
- package/dist/search.d.ts +13 -1
- package/dist/search.d.ts.map +1 -1
- package/dist/search.js +33 -14
- package/dist/search.js.map +1 -1
- package/dist/seen.d.ts +2 -2
- package/dist/seen.js +12 -12
- package/dist/seen.js.map +1 -1
- package/dist/settings.d.ts +1 -1
- package/dist/settings.js +3 -3
- package/dist/settings.js.map +1 -1
- package/dist/store.d.ts +2 -2
- package/dist/store.d.ts.map +1 -1
- package/dist/store.js +8 -8
- package/dist/store.js.map +1 -1
- package/dist/sync/google-calendar.js +1 -1
- package/dist/sync/types.d.ts +2 -2
- package/dist/testing.d.ts +1 -1
- package/dist/testing.d.ts.map +1 -1
- package/dist/testing.js +2 -2
- package/dist/testing.js.map +1 -1
- package/dist/theme/accent.d.ts +37 -0
- package/dist/theme/accent.d.ts.map +1 -0
- package/dist/theme/accent.js +138 -0
- package/dist/theme/accent.js.map +1 -0
- package/dist/theme/contrast.d.ts +7 -7
- package/dist/theme/contrast.d.ts.map +1 -1
- package/dist/theme/contrast.js +14 -14
- package/dist/theme/contrast.js.map +1 -1
- package/dist/theme/derive.d.ts +4 -4
- package/dist/theme/derive.d.ts.map +1 -1
- package/dist/theme/derive.js +21 -22
- package/dist/theme/derive.js.map +1 -1
- package/dist/theme/fonts.d.ts +19 -0
- package/dist/theme/fonts.d.ts.map +1 -0
- package/dist/theme/fonts.js +74 -0
- package/dist/theme/fonts.js.map +1 -0
- package/dist/theme/identity.d.ts +83 -0
- package/dist/theme/identity.d.ts.map +1 -0
- package/dist/theme/identity.js +128 -0
- package/dist/theme/identity.js.map +1 -0
- package/dist/theme/kit.d.ts +9 -9
- package/dist/theme/kit.d.ts.map +1 -1
- package/dist/theme/kit.js +15 -15
- package/dist/theme/kit.js.map +1 -1
- package/dist/theme/layers.d.ts +2 -2
- package/dist/theme/layers.d.ts.map +1 -1
- package/dist/theme/layers.js +2 -2
- package/dist/theme/layers.js.map +1 -1
- package/dist/theme/look.d.ts +27 -7
- package/dist/theme/look.d.ts.map +1 -1
- package/dist/theme/look.js +30 -6
- package/dist/theme/look.js.map +1 -1
- package/dist/theme/marks.d.ts +28 -0
- package/dist/theme/marks.d.ts.map +1 -0
- package/dist/theme/marks.js +237 -0
- package/dist/theme/marks.js.map +1 -0
- package/dist/theme/palettes.d.ts +15 -7
- package/dist/theme/palettes.d.ts.map +1 -1
- package/dist/theme/palettes.js +61 -53
- package/dist/theme/palettes.js.map +1 -1
- package/dist/theme/types.d.ts +38 -6
- package/dist/theme/types.d.ts.map +1 -1
- package/dist/theme/types.js.map +1 -1
- package/dist/validate-graph.js +2 -2
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/dist/watched.js +8 -8
- package/package.json +1 -1
package/dist/theme/contrast.js
CHANGED
|
@@ -35,11 +35,11 @@ function fromFunction(text) {
|
|
|
35
35
|
return null;
|
|
36
36
|
return { ...hslToRgb(h, s > 1 ? s / 100 : s, l > 1 ? l / 100 : l), a: a ?? 1 };
|
|
37
37
|
}
|
|
38
|
-
/** sRGB back to HSL, so a
|
|
39
|
-
export function rgbToHsl(
|
|
40
|
-
const r =
|
|
41
|
-
const g =
|
|
42
|
-
const b =
|
|
38
|
+
/** sRGB back to HSL, so a color can be moved in lightness and stay itself. */
|
|
39
|
+
export function rgbToHsl(color) {
|
|
40
|
+
const r = color.r / 255;
|
|
41
|
+
const g = color.g / 255;
|
|
42
|
+
const b = color.b / 255;
|
|
43
43
|
const max = Math.max(r, g, b);
|
|
44
44
|
const min = Math.min(r, g, b);
|
|
45
45
|
const l = (max + min) / 2;
|
|
@@ -80,14 +80,14 @@ function hslToRgb(h, s, l) {
|
|
|
80
80
|
};
|
|
81
81
|
}
|
|
82
82
|
/**
|
|
83
|
-
* Every
|
|
83
|
+
* Every color a token value mentions.
|
|
84
84
|
*
|
|
85
|
-
* A gradient is not one
|
|
85
|
+
* A gradient is not one color and pretending otherwise is how a check passes
|
|
86
86
|
* on a value it never looked at. `bar` and `float` are gradients in both
|
|
87
87
|
* built-in schemes; a pair drawn on one owes its contrast against the WORST
|
|
88
88
|
* stop, because that is where the text will be at some point along it.
|
|
89
89
|
*/
|
|
90
|
-
export function
|
|
90
|
+
export function colorsIn(value) {
|
|
91
91
|
const found = [];
|
|
92
92
|
for (const token of value.matchAll(FUNC)) {
|
|
93
93
|
const parsed = fromFunction(token[0]);
|
|
@@ -101,7 +101,7 @@ export function coloursIn(value) {
|
|
|
101
101
|
}
|
|
102
102
|
return found;
|
|
103
103
|
}
|
|
104
|
-
/** One
|
|
104
|
+
/** One color laid over another, straight alpha. */
|
|
105
105
|
export function composite(over, under) {
|
|
106
106
|
const a = over.a + under.a * (1 - over.a);
|
|
107
107
|
if (a === 0)
|
|
@@ -113,8 +113,8 @@ function channel(value) {
|
|
|
113
113
|
const c = value / 255;
|
|
114
114
|
return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
|
|
115
115
|
}
|
|
116
|
-
export function luminance(
|
|
117
|
-
return (0.2126 * channel(
|
|
116
|
+
export function luminance(color) {
|
|
117
|
+
return (0.2126 * channel(color.r) + 0.7152 * channel(color.g) + 0.0722 * channel(color.b));
|
|
118
118
|
}
|
|
119
119
|
/** WCAG 2.1 contrast ratio, 1 to 21. */
|
|
120
120
|
export function contrast(a, b) {
|
|
@@ -133,8 +133,8 @@ export function checkContrast(tokens) {
|
|
|
133
133
|
for (const pair of TEXT_PAIRS) {
|
|
134
134
|
const inkValue = String(tokens[pair.ink]);
|
|
135
135
|
const onValue = String(tokens[pair.on]);
|
|
136
|
-
const inks =
|
|
137
|
-
const grounds =
|
|
136
|
+
const inks = colorsIn(inkValue);
|
|
137
|
+
const grounds = colorsIn(onValue);
|
|
138
138
|
if (inks.length === 0 || grounds.length === 0) {
|
|
139
139
|
findings.push({
|
|
140
140
|
ink: pair.ink,
|
|
@@ -146,7 +146,7 @@ export function checkContrast(tokens) {
|
|
|
146
146
|
});
|
|
147
147
|
continue;
|
|
148
148
|
}
|
|
149
|
-
const backdrop = pair.over ?
|
|
149
|
+
const backdrop = pair.over ? colorsIn(String(tokens[pair.over]))[0] : undefined;
|
|
150
150
|
const opaque = backdrop ?? { r: 255, g: 255, b: 255, a: 1 };
|
|
151
151
|
// The worst stop of a gradient and the worst ink of a multi-stop value:
|
|
152
152
|
// text has to be legible everywhere it lands, not on average.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contrast.js","sourceRoot":"","sources":["../../src/theme/contrast.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"contrast.js","sourceRoot":"","sources":["../../src/theme/contrast.ts"],"names":[],"mappings":"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"}
|
package/dist/theme/derive.d.ts
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { checkContrast } from "./contrast.js";
|
|
2
2
|
import type { Scheme, ThemeTokens } from "./types.js";
|
|
3
3
|
/**
|
|
4
|
-
* A brand hands over one accent
|
|
4
|
+
* A brand hands over one accent color. What can be made of it, and what
|
|
5
5
|
* cannot.
|
|
6
6
|
*
|
|
7
7
|
* The two schemes here are not inversions of each other — dark loses
|
|
8
8
|
* luminance, light loses contrast and gains haze — so "derive the other one"
|
|
9
|
-
* is not a
|
|
9
|
+
* is not a color operation. What an accent CAN determine is everything
|
|
10
10
|
* keyed to it: its dim companion, its glow, the lit edge, the wash. What it
|
|
11
11
|
* cannot determine is the ground family (warm paper or cool slate is a
|
|
12
12
|
* decision, not a consequence), the ink that has to clear AA against that
|
|
13
|
-
* ground, and the warning
|
|
13
|
+
* ground, and the warning color, which must stay distinguishable from the
|
|
14
14
|
* accent rather than derived from it.
|
|
15
15
|
*
|
|
16
16
|
* So this derives what it can from a neutral base and REFUSES, naming what
|
|
@@ -20,7 +20,7 @@ import type { Scheme, ThemeTokens } from "./types.js";
|
|
|
20
20
|
* interface.
|
|
21
21
|
*/
|
|
22
22
|
export interface AccentBrandOptions {
|
|
23
|
-
/** The one
|
|
23
|
+
/** The one color a brand always has. Hex, rgb() or hsl(). */
|
|
24
24
|
readonly accent: string;
|
|
25
25
|
/**
|
|
26
26
|
* Text drawn ON the accent — a filled button. Derived as black or white
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"derive.d.ts","sourceRoot":"","sources":["../../src/theme/derive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAOd,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEtD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,kBAAkB;IACjC,
|
|
1
|
+
{"version":3,"file":"derive.d.ts","sourceRoot":"","sources":["../../src/theme/derive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAOd,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEtD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,kBAAkB;IACjC,6DAA6D;IAC7D,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE;QAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzE,4EAA4E;IAC5E,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;IACrD,+EAA+E;IAC/E,QAAQ,CAAC,IAAI,CAAC,EAAE;QAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACrE;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC;IAClB,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;CACzD;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC;IACnB,6EAA6E;IAC7E,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;CACtB;AAQD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,kBAAkB,GAAG,YAAY,GAAG,YAAY,CAkGxF;AAqDD,oEAAoE;AACpE,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,GAC7C,SAAS,CAAC,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,GAAG;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,EAAE,CAI5E;AAGD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,MAAM,CASvF"}
|
package/dist/theme/derive.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { checkContrast,
|
|
2
|
-
const rgba = (
|
|
1
|
+
import { checkContrast, colorsIn, composite, contrast, hsl, rgbToHsl, } from "./contrast.js";
|
|
2
|
+
const rgba = (color, alpha) => `rgba(${Math.round(color.r)}, ${Math.round(color.g)}, ${Math.round(color.b)}, ${alpha})`;
|
|
3
3
|
const BLACK = { r: 0, g: 0, b: 0, a: 1 };
|
|
4
4
|
const WHITE = { r: 255, g: 255, b: 255, a: 1 };
|
|
5
5
|
/**
|
|
@@ -7,12 +7,12 @@ const WHITE = { r: 255, g: 255, b: 255, a: 1 };
|
|
|
7
7
|
* missing.
|
|
8
8
|
*/
|
|
9
9
|
export function brandFromAccent(options) {
|
|
10
|
-
const accent =
|
|
10
|
+
const accent = colorsIn(options.accent)[0];
|
|
11
11
|
if (!accent) {
|
|
12
12
|
return {
|
|
13
13
|
ok: false,
|
|
14
14
|
missing: ["accent"],
|
|
15
|
-
why: `"${options.accent}" is not a
|
|
15
|
+
why: `"${options.accent}" is not a color this can read. Use a hex, rgb() or hsl() value.`,
|
|
16
16
|
};
|
|
17
17
|
}
|
|
18
18
|
const schemes = {};
|
|
@@ -21,20 +21,20 @@ export function brandFromAccent(options) {
|
|
|
21
21
|
const base = rgbToHsl(accent);
|
|
22
22
|
for (const scheme of ["dark", "light"]) {
|
|
23
23
|
const neutral = options.base[scheme];
|
|
24
|
-
const ground =
|
|
25
|
-
const panel = composite(
|
|
24
|
+
const ground = colorsIn(neutral.ground)[0] ?? (scheme === "dark" ? BLACK : WHITE);
|
|
25
|
+
const panel = composite(colorsIn(neutral.panel)[0] ?? WHITE, ground);
|
|
26
26
|
/*
|
|
27
|
-
* The accent is used as TEXT, and no single
|
|
27
|
+
* The accent is used as TEXT, and no single color can be text in both
|
|
28
28
|
* schemes.
|
|
29
29
|
*
|
|
30
30
|
* 4.5:1 on white needs a lightness under about 0.18; 4.5:1 on a dark
|
|
31
31
|
* panel needs one over about 0.24. Those do not overlap, which is why
|
|
32
32
|
* "the brand's accent" is one hue with two lightnesses rather than one
|
|
33
|
-
*
|
|
33
|
+
* color — and why a framework that simply took the hex would have
|
|
34
34
|
* shipped an unreadable label in one scheme or the other.
|
|
35
35
|
*
|
|
36
36
|
* So the hue and the saturation are the brand's; the lightness is moved
|
|
37
|
-
* as little as it takes. If it has to move further than this, the
|
|
37
|
+
* as little as it takes. If it has to move further than this, the color
|
|
38
38
|
* has stopped being recognisably theirs and the honest answer is to ask.
|
|
39
39
|
*/
|
|
40
40
|
// Text on the panel and, with no capsule under it, on the ground itself (FR-117): it has to clear both.
|
|
@@ -45,13 +45,13 @@ export function brandFromAccent(options) {
|
|
|
45
45
|
}
|
|
46
46
|
else if (Math.abs(readable.l - base.l) > MAX_SHIFT) {
|
|
47
47
|
missing.add(`accent (${scheme})`);
|
|
48
|
-
reasons.push(`reaching 4.5:1 on the ${scheme} panel would move the accent's lightness by ${Math.round(Math.abs(readable.l - base.l) * 100)} points, which is far enough that it stops being the same
|
|
48
|
+
reasons.push(`reaching 4.5:1 on the ${scheme} panel would move the accent's lightness by ${Math.round(Math.abs(readable.l - base.l) * 100)} points, which is far enough that it stops being the same color — supply one for ${scheme}`);
|
|
49
49
|
}
|
|
50
50
|
const tone = readable ?? base;
|
|
51
51
|
const shown = hsl(tone.h, tone.s, tone.l);
|
|
52
52
|
const chosenInk = options.accentInk?.[scheme] ??
|
|
53
53
|
(contrast(WHITE, shown) >= contrast(BLACK, shown) ? "#ffffff" : "#000000");
|
|
54
|
-
const inkOnAccent = contrast(
|
|
54
|
+
const inkOnAccent = contrast(colorsIn(chosenInk)[0] ?? WHITE, shown);
|
|
55
55
|
if (inkOnAccent + 0.005 < 4.5) {
|
|
56
56
|
missing.add(`accentInk (${scheme})`);
|
|
57
57
|
reasons.push(`neither black nor white clears 4.5:1 on the accent (best ${inkOnAccent.toFixed(2)}:1), so text on a filled button has to be given`);
|
|
@@ -68,20 +68,19 @@ export function brandFromAccent(options) {
|
|
|
68
68
|
* so it gives way to the alpha that can actually be seen.
|
|
69
69
|
*/
|
|
70
70
|
edgeBright: rgba(shown, visibleAlpha(shown, panel, scheme === "dark" ? 0.55 : 0.42, 3)),
|
|
71
|
-
wash
|
|
72
|
-
|
|
73
|
-
: `radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,0.9) 0%, transparent 58%), radial-gradient(80% 60% at 92% 104%, ${rgba(shown, 0.06)} 0%, transparent 60%)`,
|
|
71
|
+
// The wash is the base's, as it is (the shipped ones paint none): an
|
|
72
|
+
// accent is not a reason to start glowing behind the scene.
|
|
74
73
|
...(options.warn?.[scheme] ? { warn: options.warn[scheme] } : {}),
|
|
75
74
|
};
|
|
76
75
|
/*
|
|
77
|
-
* A warning
|
|
76
|
+
* A warning color must not be mistakable for the accent. Two roles that
|
|
78
77
|
* look alike is a worse failure than an ugly pair, because one of them
|
|
79
78
|
* means "something is broken".
|
|
80
79
|
*/
|
|
81
|
-
const warn =
|
|
80
|
+
const warn = colorsIn(schemes[scheme].warn)[0];
|
|
82
81
|
if (warn && hueGap(rgbToHsl(warn).h, tone.h) < 25) {
|
|
83
82
|
missing.add(`warn (${scheme})`);
|
|
84
|
-
reasons.push(`the warning
|
|
83
|
+
reasons.push(`the warning color shares the accent's hue in ${scheme}, so "something is broken" looks like "this is selected"`);
|
|
85
84
|
}
|
|
86
85
|
}
|
|
87
86
|
if (missing.size > 0) {
|
|
@@ -90,17 +89,17 @@ export function brandFromAccent(options) {
|
|
|
90
89
|
return { ok: true, schemes };
|
|
91
90
|
}
|
|
92
91
|
/**
|
|
93
|
-
* The smallest alpha at which a
|
|
92
|
+
* The smallest alpha at which a color laid on a ground clears a ratio, or
|
|
94
93
|
* the preferred one if that is already enough.
|
|
95
94
|
*
|
|
96
95
|
* Searched rather than solved because compositing then luminance is not
|
|
97
96
|
* invertible in closed form, and a hundred steps is cheap for something that
|
|
98
97
|
* runs once per theme.
|
|
99
98
|
*/
|
|
100
|
-
function visibleAlpha(
|
|
99
|
+
function visibleAlpha(color, ground, preferred, ratio) {
|
|
101
100
|
for (let step = Math.round(preferred * 100); step <= 100; step++) {
|
|
102
101
|
const alpha = step / 100;
|
|
103
|
-
if (contrast(composite({ ...
|
|
102
|
+
if (contrast(composite({ ...color, a: alpha }, ground), ground) >= ratio)
|
|
104
103
|
return alpha;
|
|
105
104
|
}
|
|
106
105
|
return 1;
|
|
@@ -110,12 +109,12 @@ function hueGap(a, b) {
|
|
|
110
109
|
const gap = Math.abs(a - b) % 360;
|
|
111
110
|
return gap > 180 ? 360 - gap : gap;
|
|
112
111
|
}
|
|
113
|
-
/** As much lightness as a brand's
|
|
112
|
+
/** As much lightness as a brand's color may be moved and still be theirs. */
|
|
114
113
|
const MAX_SHIFT = 0.3;
|
|
115
114
|
/**
|
|
116
115
|
* The lightness nearest the brand's own that clears the ratio on every one of these grounds.
|
|
117
116
|
*
|
|
118
|
-
* Searched from the original outwards rather than from an end, so a
|
|
117
|
+
* Searched from the original outwards rather than from an end, so a color
|
|
119
118
|
* that already works is left exactly alone and one that does not is moved the
|
|
120
119
|
* smallest distance that helps. Dark schemes are searched upward first and
|
|
121
120
|
* light ones downward, since that is the direction that will win.
|
package/dist/theme/derive.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"derive.js","sourceRoot":"","sources":["../../src/theme/derive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,
|
|
1
|
+
{"version":3,"file":"derive.js","sourceRoot":"","sources":["../../src/theme/derive.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/** The three stacks a document names by keyword, made of the faces the reader's system already has. */
|
|
2
|
+
export declare const SYSTEM_STACKS: Readonly<Record<"system-sans" | "system-serif" | "system-mono", string>>;
|
|
3
|
+
export type SystemStack = keyof typeof SYSTEM_STACKS;
|
|
4
|
+
/** Faces an operating system installs: named in a stack, used where the reader has them, and never fetched. */
|
|
5
|
+
export declare const SYSTEM_FONTS: readonly string[];
|
|
6
|
+
/** The web fonts a document may name (FR-124). The host decides whether and from where they load. */
|
|
7
|
+
export declare const DOCUMENT_FONTS: readonly string[];
|
|
8
|
+
/** The families a stack names, in order, unquoted. */
|
|
9
|
+
export declare function familiesIn(stack: string): readonly string[];
|
|
10
|
+
/** Whether a family is the reader's own — a generic family or a face the system installs — and so never fetched. */
|
|
11
|
+
export declare function isSystemFamily(family: string): boolean;
|
|
12
|
+
/** A document's stack as CSS: a keyword's stack, or the stack as written. */
|
|
13
|
+
export declare function stackOf(value: string): string;
|
|
14
|
+
/**
|
|
15
|
+
* Why a document may not name this stack, or null (FR-124). `served` is the
|
|
16
|
+
* web fonts the host serves beyond `DOCUMENT_FONTS`.
|
|
17
|
+
*/
|
|
18
|
+
export declare function fontProblem(value: string, served?: readonly string[]): string | null;
|
|
19
|
+
//# sourceMappingURL=fonts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/theme/fonts.ts"],"names":[],"mappings":"AAiBA,uGAAuG;AACvG,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,GAAG,cAAc,GAAG,aAAa,EAAE,MAAM,CAAC,CAKlG,CAAC;AACF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,aAAa,CAAC;AAKrD,+GAA+G;AAC/G,eAAO,MAAM,YAAY,EAAE,SAAS,MAAM,EAIzC,CAAC;AAEF,qGAAqG;AACrG,eAAO,MAAM,cAAc,EAAE,SAAS,MAAM,EAI3C,CAAC;AAIF,sDAAsD;AACtD,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAK3D;AAED,oHAAoH;AACpH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAEtD;AAED,6EAA6E;AAC7E,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,GAAE,SAAS,MAAM,EAAO,GAAG,MAAM,GAAG,IAAI,CAWxF"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { TYPOGRAPHY } from "./look.js";
|
|
2
|
+
/*
|
|
3
|
+
* THE FACES A DOCUMENT MAY NAME (FR-124).
|
|
4
|
+
*
|
|
5
|
+
* A document says how its words are set, and never where a font comes
|
|
6
|
+
* from: a stack that names an address — `url(…)`, `https://…`, `@import` —
|
|
7
|
+
* is refused, so nothing a chat writes makes a page fetch from a server of
|
|
8
|
+
* its choosing. What it may name is three stacks of the system's own faces
|
|
9
|
+
* (`system-serif`, `system-sans`, `system-mono`), a face every system has
|
|
10
|
+
* (Georgia, Helvetica, Menlo…), and the web fonts on `DOCUMENT_FONTS`.
|
|
11
|
+
* Loading those is the HOST's decision: the embed fetches them from Google
|
|
12
|
+
* Fonts as it fetches a TypeScript brand's, unless the host passes
|
|
13
|
+
* `fonts: false` and serves them itself; a host that serves others names
|
|
14
|
+
* them to `compileDocument(…, { fonts })`.
|
|
15
|
+
*/
|
|
16
|
+
/** The three stacks a document names by keyword, made of the faces the reader's system already has. */
|
|
17
|
+
export const SYSTEM_STACKS = {
|
|
18
|
+
/* The system's own sans, as `system-sans` has always meant: not `TYPOGRAPHY.body`, which names Montserrat first. */
|
|
19
|
+
"system-sans": 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
|
|
20
|
+
"system-serif": 'ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, "Times New Roman", serif',
|
|
21
|
+
"system-mono": TYPOGRAPHY.mono,
|
|
22
|
+
};
|
|
23
|
+
/** CSS's generic families and the system's own aliases: never fetched. */
|
|
24
|
+
const GENERIC = ["serif", "sans-serif", "monospace", "cursive", "fantasy", "system-ui", "math", "emoji", "-apple-system", "BlinkMacSystemFont"];
|
|
25
|
+
/** Faces an operating system installs: named in a stack, used where the reader has them, and never fetched. */
|
|
26
|
+
export const SYSTEM_FONTS = [
|
|
27
|
+
"Georgia", "Times New Roman", "Times", "Iowan Old Style", "Palatino", "Palatino Linotype", "Charter", "Cambria", "Baskerville", "Optima",
|
|
28
|
+
"Helvetica", "Helvetica Neue", "Arial", "Verdana", "Segoe UI", "Roboto", "Avenir", "Avenir Next", "Gill Sans",
|
|
29
|
+
"Menlo", "Monaco", "Consolas", "SF Mono", "SFMono-Regular", "Courier New",
|
|
30
|
+
];
|
|
31
|
+
/** The web fonts a document may name (FR-124). The host decides whether and from where they load. */
|
|
32
|
+
export const DOCUMENT_FONTS = [
|
|
33
|
+
"Inter", "Source Sans 3", "IBM Plex Sans", "DM Sans", "Work Sans", "Space Grotesk", "Manrope",
|
|
34
|
+
"Source Serif 4", "IBM Plex Serif", "Fraunces", "Lora", "Merriweather", "Playfair Display", "EB Garamond", "Libre Baskerville", "Literata", "Crimson Pro",
|
|
35
|
+
"IBM Plex Mono", "JetBrains Mono", "Source Code Pro", "Fira Code",
|
|
36
|
+
];
|
|
37
|
+
const lower = (names) => new Set(names.map((name) => name.toLowerCase()));
|
|
38
|
+
/** The families a stack names, in order, unquoted. */
|
|
39
|
+
export function familiesIn(stack) {
|
|
40
|
+
return stack
|
|
41
|
+
.split(",")
|
|
42
|
+
.map((family) => family.trim().replace(/^["']|["']$/g, "").trim())
|
|
43
|
+
.filter((family) => family.length > 0);
|
|
44
|
+
}
|
|
45
|
+
/** Whether a family is the reader's own — a generic family or a face the system installs — and so never fetched. */
|
|
46
|
+
export function isSystemFamily(family) {
|
|
47
|
+
return lower([...GENERIC, ...SYSTEM_FONTS]).has(family.toLowerCase()) || family.toLowerCase().startsWith("ui-");
|
|
48
|
+
}
|
|
49
|
+
/** A document's stack as CSS: a keyword's stack, or the stack as written. */
|
|
50
|
+
export function stackOf(value) {
|
|
51
|
+
return SYSTEM_STACKS[value] ?? value;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Why a document may not name this stack, or null (FR-124). `served` is the
|
|
55
|
+
* web fonts the host serves beyond `DOCUMENT_FONTS`.
|
|
56
|
+
*/
|
|
57
|
+
export function fontProblem(value, served = []) {
|
|
58
|
+
if (value in SYSTEM_STACKS)
|
|
59
|
+
return null;
|
|
60
|
+
const origin = /(?:https?:)?\/\/([^/\s'"),;]+)/i.exec(value)?.[1];
|
|
61
|
+
if (origin)
|
|
62
|
+
return `it loads a font from ${origin}, and a document names a face, never where one comes from`;
|
|
63
|
+
if (/url\(|@import|[;{}<>:\\]/i.test(value))
|
|
64
|
+
return "it is not a list of font names; a document names a face, never where one comes from";
|
|
65
|
+
const allowed = lower([...DOCUMENT_FONTS, ...served]);
|
|
66
|
+
const families = familiesIn(value);
|
|
67
|
+
if (families.length === 0)
|
|
68
|
+
return "it names no face";
|
|
69
|
+
const unknown = families.find((family) => !isSystemFamily(family) && !allowed.has(family.toLowerCase()));
|
|
70
|
+
if (unknown)
|
|
71
|
+
return `"${unknown}" is not a face a document may name: say system-serif, system-sans or system-mono, a face every system has (Georgia, Helvetica, Menlo), or a web font from the list (${[...DOCUMENT_FONTS, ...served].join(", ")})`;
|
|
72
|
+
return null;
|
|
73
|
+
}
|
|
74
|
+
//# sourceMappingURL=fonts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fonts.js","sourceRoot":"","sources":["../../src/theme/fonts.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
/** The identity's colors, as the kit gives them. Not a palette: `LIGHT` and `DARK` are built from these. */
|
|
2
|
+
export declare const GRAVIEW_COLORS: Readonly<{
|
|
3
|
+
/** En Dash navy: the primary ink of the identity, and the light scheme's accent. */
|
|
4
|
+
navy: "#001769";
|
|
5
|
+
/**
|
|
6
|
+
* En Dash turquoise: the symbol's point, and an accent FILL only. It is
|
|
7
|
+
* never text on paper (1.5:1); text on it is navy. Nothing the framework
|
|
8
|
+
* draws by default depends on it: a one-color mark is the whole mark.
|
|
9
|
+
*/
|
|
10
|
+
turquoise: "#00e5b9";
|
|
11
|
+
/** The warm surface the light scheme stands on. */
|
|
12
|
+
paper: "#f7f7f2";
|
|
13
|
+
/** Reading text. */
|
|
14
|
+
ink: "#18213a";
|
|
15
|
+
/** Secondary text: 5.8:1 on paper, 6.2:1 on white. */
|
|
16
|
+
muted: "#586174";
|
|
17
|
+
}>;
|
|
18
|
+
/** The family the identity is set in. Named in `TYPOGRAPHY`; loaded by the host, or by `@graview/primitives/montserrat.css`. */
|
|
19
|
+
export declare const GRAVIEW_FACE = "Montserrat";
|
|
20
|
+
/**
|
|
21
|
+
* The identity's three weights, for a variable face: large calm headlines,
|
|
22
|
+
* comfortable reading, and short action labels. A face without the
|
|
23
|
+
* in-between weights rounds them as CSS says (450 to 400, 550 to 600).
|
|
24
|
+
*/
|
|
25
|
+
export declare const WEIGHTS: Readonly<{
|
|
26
|
+
display: 550;
|
|
27
|
+
body: 450;
|
|
28
|
+
label: 600;
|
|
29
|
+
}>;
|
|
30
|
+
/**
|
|
31
|
+
* The weights a brand that names its own faces gets when it names no
|
|
32
|
+
* weights: the conventional ones, since 450 and 550 only mean something in
|
|
33
|
+
* a variable face, and a static one would round them.
|
|
34
|
+
*/
|
|
35
|
+
export declare const PLAIN_WEIGHTS: Readonly<{
|
|
36
|
+
display: 600;
|
|
37
|
+
body: 400;
|
|
38
|
+
label: 600;
|
|
39
|
+
}>;
|
|
40
|
+
/** Display tracking: large headlines are set a little tight. */
|
|
41
|
+
export declare const DISPLAY_TRACKING = "-0.025em";
|
|
42
|
+
/**
|
|
43
|
+
* How the symbol and the horizontal logo are used (the kit's handoff page).
|
|
44
|
+
* A size is the symbol's displayed height in CSS pixels.
|
|
45
|
+
*/
|
|
46
|
+
export declare const LOGO_RULES: Readonly<{
|
|
47
|
+
/** The horizontal Graview logo is not drawn narrower than this. */
|
|
48
|
+
minWidth: 140;
|
|
49
|
+
/** Clear space on every side, as a share of the displayed symbol's height. */
|
|
50
|
+
clearSpace: 0.5;
|
|
51
|
+
/** At and under this, the optical micro symbol. */
|
|
52
|
+
microMax: 24;
|
|
53
|
+
/** At and over this, the regular symbol. */
|
|
54
|
+
regularMin: 32;
|
|
55
|
+
/**
|
|
56
|
+
* Between the two, the one that reads more clearly. Measured at 25–31 px
|
|
57
|
+
* at 1x and 2x: the micro's heavier strokes and wider gaps hold up to 27,
|
|
58
|
+
* the regular's finer geometry reads from 28.
|
|
59
|
+
*/
|
|
60
|
+
microBelow: 28;
|
|
61
|
+
}>;
|
|
62
|
+
/** Which drawing of the symbol a displayed height takes. */
|
|
63
|
+
export declare function symbolCut(size: number): "micro" | "regular";
|
|
64
|
+
/** What `graviewSymbol` draws. */
|
|
65
|
+
export interface SymbolOptions {
|
|
66
|
+
/** The displayed height in CSS pixels. Picks the cut (`symbolCut`) and sets the height. */
|
|
67
|
+
readonly size?: number;
|
|
68
|
+
/**
|
|
69
|
+
* The accessible name. Absent, the symbol is decorative (`aria-hidden`),
|
|
70
|
+
* which is right beside a visible name. A link around it is named by its
|
|
71
|
+
* destination ("Graview"), not by this.
|
|
72
|
+
*/
|
|
73
|
+
readonly title?: string;
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* The shared-plane symbol as an inline SVG string, in `currentColor`.
|
|
77
|
+
*
|
|
78
|
+
* Inline so it inherits the color it stands in (an `<img>` of an SVG file
|
|
79
|
+
* does not). Named with `aria-label` rather than a `<title id>`, so drawing
|
|
80
|
+
* it a hundred times on one page never repeats an id.
|
|
81
|
+
*/
|
|
82
|
+
export declare function graviewSymbol(options?: SymbolOptions): string;
|
|
83
|
+
//# sourceMappingURL=identity.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"identity.d.ts","sourceRoot":"","sources":["../../src/theme/identity.ts"],"names":[],"mappings":"AAuBA,4GAA4G;AAC5G,eAAO,MAAM,cAAc;IACzB,oFAAoF;;IAEpF;;;;OAIG;;IAEH,mDAAmD;;IAEnD,oBAAoB;;IAEpB,sDAAsD;;EAEtD,CAAC;AAEH,gIAAgI;AAChI,eAAO,MAAM,YAAY,eAAe,CAAC;AAEzC;;;;GAIG;AACH,eAAO,MAAM,OAAO;;;;EAIlB,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,aAAa;;;;EAIxB,CAAC;AAEH,gEAAgE;AAChE,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAE3C;;;GAGG;AACH,eAAO,MAAM,UAAU;IACrB,mEAAmE;;IAEnE,8EAA8E;;IAE9E,mDAAmD;;IAEnD,4CAA4C;;IAE5C;;;;OAIG;;EAEH,CAAC;AA4BH,4DAA4D;AAC5D,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAE3D;AAED,kCAAkC;AAClC,MAAM,WAAW,aAAa;IAC5B,2FAA2F;IAC3F,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,OAAO,GAAE,aAAkB,GAAG,MAAM,CASjE"}
|