okchroma 0.3.0 → 0.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/README.md +8 -9
- package/dist-lib/index.cjs +2 -2
- package/dist-lib/index.mjs +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
**A color-system engine.** Give it one brand hex, or two, and it resolves a complete
|
|
4
4
|
light and dark token system whose contrast requirements are solved during generation,
|
|
5
|
-
then emits it as CSS custom properties
|
|
5
|
+
then emits it as CSS custom properties or Figma variables.
|
|
6
6
|
|
|
7
7
|
Every family (neutral, brand, brand-alt, critical, warning, positive, info) carries the
|
|
8
8
|
same scale: 3 papers, 4 highlighters, 1 crayon, 1 pencil, 2 pens, plus the stamp (the
|
|
@@ -10,10 +10,10 @@ solid fill with its hover and pressed states, its edge, and its text). The neutr
|
|
|
10
10
|
the two poles. Light and dark resolve together and ship on the same names, so a token is
|
|
11
11
|
mapped once and holds for any brand.
|
|
12
12
|
|
|
13
|
-
Contrast is built into the math, not checked afterwards:
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
Contrast is built into the math, not checked afterwards: crayon reads on every paper at
|
|
14
|
+
3:1 (the non-text bar), pencil at 4.5:1, pen at 4.5:1 on every paper and highlighter in
|
|
15
|
+
both directions; the stamp's text passes 4.5:1 on its fill. APCA is used once, as a booster
|
|
16
|
+
that nudges the stamp fill until its text reads at Lc 65. Each claim, its scope, and the audit that
|
|
17
17
|
proves it: [Guarantees](https://egerrity.github.io/okchroma/#/docs/guarantees).
|
|
18
18
|
|
|
19
19
|
> The reserved-role-per-stop model is a conceptual nod to
|
|
@@ -41,8 +41,7 @@ const css = brandCss('acme', 'Acme', theme.themed, theme.secondary?.scale ?? nul
|
|
|
41
41
|
// and data-theme="dark" on it for dark mode
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
The Figma tree comes from `themeToFigma
|
|
45
|
-
`emitDtcgRamp`. Signatures, the full input, and an end-to-end example:
|
|
44
|
+
The Figma tree comes from `themeToFigma`. Signatures, the full input, and an end-to-end example:
|
|
46
45
|
[Install and API](https://egerrity.github.io/okchroma/#/docs/install).
|
|
47
46
|
|
|
48
47
|
## Run from source
|
|
@@ -67,12 +66,12 @@ The docs site is the source: [egerrity.github.io/okchroma/#/docs](https://egerri
|
|
|
67
66
|
- [Output contract](https://egerrity.github.io/okchroma/#/docs/output): the naming grammar, families and prefixes, modes and selectors, a live CSS block and Figma tree.
|
|
68
67
|
- [Guarantees](https://egerrity.github.io/okchroma/#/docs/guarantees): every claim stated exactly, and how it is verified.
|
|
69
68
|
- [How the theme is generated](https://egerrity.github.io/okchroma/#/docs/generation): the pipeline in execution order, with the constants and the code that runs each step.
|
|
70
|
-
- [Signals and companions](https://egerrity.github.io/okchroma/#/docs/signals)
|
|
69
|
+
- [Signals and companions](https://egerrity.github.io/okchroma/#/docs/signals) and the [Reference](https://egerrity.github.io/okchroma/#/docs/reference): glossary, constants, option types.
|
|
71
70
|
|
|
72
71
|
In the repo: [docs/architecture.md](docs/architecture.md) (the maintainer's map: modules,
|
|
73
72
|
pipeline stages, data structures, the extended plugin's zones),
|
|
74
73
|
[docs/scale.md](docs/scale.md) (the scale and its declared targets),
|
|
75
|
-
[docs/schema.md](docs/schema.md) (the
|
|
74
|
+
[docs/schema.md](docs/schema.md) (the format of the experimental DTCG export),
|
|
76
75
|
[docs/agents.md](docs/agents.md) (how a coding agent consuming the tokens should read
|
|
77
76
|
them), and [CHANGELOG.md](CHANGELOG.md).
|
|
78
77
|
|
package/dist-lib/index.cjs
CHANGED
|
@@ -919,9 +919,9 @@ var P_LIFT = { hue: "warm-torsion", L: "perceptual-lift", chroma: "ladder" };
|
|
|
919
919
|
var P_FIXED = { hue: "warm-torsion", L: "fixed", chroma: "ladder" };
|
|
920
920
|
var P_TEXT = { hue: "warm-torsion", L: "perceptual", chroma: "brand" };
|
|
921
921
|
var S8 = { metric: "wcag", against: "paper-5", target: STOP_8_NONTEXT_CONTRAST, level: "AA" };
|
|
922
|
-
var T9 = { metric: "wcag", against: "paper-
|
|
922
|
+
var T9 = { metric: "wcag", against: "paper-5", target: PENCIL_9_CONTRAST, level: "AA" };
|
|
923
923
|
var T10 = { metric: "wcag", against: "highlighter-20", target: PEN_10_CONTRAST, level: "AA" };
|
|
924
|
-
var T11 = { metric: "wcag", against: "paper-
|
|
924
|
+
var T11 = { metric: "wcag", against: "paper-5", target: PEN_11_CONTRAST_FLOOR, level: "AAA" };
|
|
925
925
|
var ONS = { onFill: { metric: "apca-pole", enforce: true, ratioFloor: 4.5, coEnforceLc: 65 } };
|
|
926
926
|
var LIGHT = {
|
|
927
927
|
stops: [
|
package/dist-lib/index.mjs
CHANGED
|
@@ -840,9 +840,9 @@ var P_LIFT = { hue: "warm-torsion", L: "perceptual-lift", chroma: "ladder" };
|
|
|
840
840
|
var P_FIXED = { hue: "warm-torsion", L: "fixed", chroma: "ladder" };
|
|
841
841
|
var P_TEXT = { hue: "warm-torsion", L: "perceptual", chroma: "brand" };
|
|
842
842
|
var S8 = { metric: "wcag", against: "paper-5", target: STOP_8_NONTEXT_CONTRAST, level: "AA" };
|
|
843
|
-
var T9 = { metric: "wcag", against: "paper-
|
|
843
|
+
var T9 = { metric: "wcag", against: "paper-5", target: PENCIL_9_CONTRAST, level: "AA" };
|
|
844
844
|
var T10 = { metric: "wcag", against: "highlighter-20", target: PEN_10_CONTRAST, level: "AA" };
|
|
845
|
-
var T11 = { metric: "wcag", against: "paper-
|
|
845
|
+
var T11 = { metric: "wcag", against: "paper-5", target: PEN_11_CONTRAST_FLOOR, level: "AAA" };
|
|
846
846
|
var ONS = { onFill: { metric: "apca-pole", enforce: true, ratioFloor: 4.5, coEnforceLc: 65 } };
|
|
847
847
|
var LIGHT = {
|
|
848
848
|
stops: [
|
package/package.json
CHANGED