okchroma 0.3.1 → 0.5.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/README.md +3 -3
- package/dist-lib/index.cjs +107 -69
- package/dist-lib/index.mjs +107 -69
- package/dist-lib/types/engine/collision.d.ts +3 -3
- package/dist-lib/types/engine/colorEngine.d.ts +1 -1
- package/dist-lib/types/engine/cssRender.d.ts +17 -2
- package/dist-lib/types/engine/figmaRender.d.ts +8 -3
- package/dist-lib/types/engine/requirements/spec.d.ts +2 -2
- package/dist-lib/types/engine/tokenNames.d.ts +1 -1
- package/dist-lib/types/index.d.ts +3 -3
- package/package.json +1 -1
- package/tokens/semantic.css +90 -97
package/tokens/semantic.css
CHANGED
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
/*
|
|
2
|
-
Semantic token layer
|
|
2
|
+
Semantic token layer: maps role names to primitive tokens.
|
|
3
3
|
This file never changes per brand. Only the primitives (--brand-*, --neutral-*) change.
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
/* ─── Global surface / fg / border ─────────────────────────────────────────── */
|
|
7
7
|
|
|
8
8
|
[data-brand] {
|
|
9
|
-
/* Elevation planes
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
paper-0
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
always the extreme pole: the high in light, the sunken in dark. The stops
|
|
17
|
-
themselves have never moved through any of the renames. */
|
|
9
|
+
/* Elevation planes dim, low, mid, high: mid is the raised plane components sit on,
|
|
10
|
+
the page behind it is low, and the two extremes are edge cases. Both themes use
|
|
11
|
+
the SAME four stops in reversed order, so elevation always moves toward paper-0's
|
|
12
|
+
side of the ramp. Light descends the ramp as elevation rises (dim paper-5 to high
|
|
13
|
+
paper-0, white); dark ascends it (dim paper-0, the deep tinted ground, to high
|
|
14
|
+
paper-5). paper-0 flips with the mode, so it is always the extreme pole: the high
|
|
15
|
+
in light, the dim in dark. */
|
|
18
16
|
--surface-dim: var(--neutral-paper-5);
|
|
19
17
|
--surface-low: var(--neutral-paper-3);
|
|
20
18
|
--surface-mid: var(--neutral-paper-1);
|
|
@@ -22,49 +20,49 @@
|
|
|
22
20
|
|
|
23
21
|
--fg-default: var(--neutral-pen-70);
|
|
24
22
|
--fg-subtle: var(--neutral-pencil-47);
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
API's DISABLED_OPACITY
|
|
23
|
+
|
|
24
|
+
/* --border-default IS THE ACCESSIBILITY BORDER: a border that has to be there (inputs
|
|
25
|
+
and other controls), so it rides highlighter-26, the stop that carries the 3:1 non-text
|
|
26
|
+
contrast requirement. Decorative borders are --border-subtle (chalk-11) and
|
|
27
|
+
the per-family --*-border-default (chalk-15). */
|
|
28
|
+
--border-default: var(--neutral-highlighter-26);
|
|
29
|
+
--border-subtle: var(--neutral-chalk-11);
|
|
30
|
+
|
|
31
|
+
/* Shadow transparencies: pure black at a rung of the engine's opacity ladder (the
|
|
32
|
+
--opacity-NNN numbers signalsCss writes at :root), the same rows the plugins write
|
|
33
|
+
as shadow-04|08|12. Dark is heavier by necessity: near black a light-mode weight
|
|
34
|
+
vanishes, so the dark block picks the heavier rungs for the same three roles.
|
|
35
|
+
Elevation recipes compose these, so dark shadows fall out of the token swap with
|
|
36
|
+
nothing bespoke per style. */
|
|
37
|
+
--shadow-04: rgb(0 0 0 / var(--opacity-004));
|
|
38
|
+
--shadow-08: rgb(0 0 0 / var(--opacity-008));
|
|
39
|
+
--shadow-12: rgb(0 0 0 / var(--opacity-012));
|
|
40
|
+
|
|
41
|
+
/* The scrim: the modal veil, the absolute black at the ladder's top rung in both
|
|
42
|
+
modes. Composed here from the number; a Figma kit composes the same thing as a
|
|
43
|
+
black alias at that opacity. There is no separate scrim color row. */
|
|
44
|
+
--scrim: rgb(0 0 0 / var(--opacity-064));
|
|
45
|
+
|
|
46
|
+
/* Disabled opacity: disabled is a COMPONENT-LEVEL opacity. Colors stay the enabled
|
|
47
|
+
ones and never swap. Mode-invariant; mirrors the JS API's DISABLED_OPACITY
|
|
48
|
+
constant 1:1. */
|
|
50
49
|
--disabled-opacity: 0.38;
|
|
51
50
|
}
|
|
52
51
|
|
|
53
52
|
[data-brand][data-theme="dark"] {
|
|
54
|
-
/* Dark runs the same four stops upward:
|
|
55
|
-
|
|
53
|
+
/* Dark runs the same four stops upward: dim paper-0 (the deep tinted ground), low
|
|
54
|
+
paper-1, mid paper-3, high paper-5, the one-level highest background: every
|
|
56
55
|
family's paper-5 shares one photometric level, so chips sit flush on the high
|
|
57
|
-
plane by construction
|
|
58
|
-
|
|
59
|
-
low is paper-3 (the light value); the stops themselves did not move. */
|
|
56
|
+
plane by construction. Low needs its own override here because the shared
|
|
57
|
+
block's low is paper-3, the light value. */
|
|
60
58
|
--surface-dim: var(--paper-0, #000000);
|
|
61
59
|
--surface-low: var(--neutral-paper-1);
|
|
62
60
|
--surface-mid: var(--neutral-paper-3);
|
|
63
61
|
--surface-high: var(--neutral-paper-5);
|
|
64
62
|
|
|
65
|
-
--shadow-04:
|
|
66
|
-
--shadow-08:
|
|
67
|
-
--shadow-12:
|
|
63
|
+
--shadow-04: rgb(0 0 0 / var(--opacity-032));
|
|
64
|
+
--shadow-08: rgb(0 0 0 / var(--opacity-048));
|
|
65
|
+
--shadow-12: rgb(0 0 0 / var(--opacity-064));
|
|
68
66
|
}
|
|
69
67
|
|
|
70
68
|
/* ─── role.brand ────────────────────────────────────────────────────────────── */
|
|
@@ -77,28 +75,28 @@
|
|
|
77
75
|
--brand-fg-on-emphasis: var(--brand-stamp-on);
|
|
78
76
|
|
|
79
77
|
--brand-bg-faint: var(--brand-paper-3);
|
|
80
|
-
--brand-bg-subtle: var(--brand-
|
|
81
|
-
--brand-bg-subtle-hover: var(--brand-
|
|
78
|
+
--brand-bg-subtle: var(--brand-chalk-11);
|
|
79
|
+
--brand-bg-subtle-hover: var(--brand-chalk-15);
|
|
82
80
|
--brand-bg-emphasis: var(--brand-stamp-fill);
|
|
83
81
|
--brand-bg-emphasis-hover: var(--brand-stamp-fill-hover);
|
|
84
82
|
--brand-bg-emphasis-pressed: var(--brand-stamp-fill-pressed);
|
|
85
83
|
|
|
86
|
-
--brand-border-subtle: var(--brand-
|
|
87
|
-
--brand-border-subtle-hover: var(--brand-
|
|
88
|
-
--brand-border-default: var(--brand-
|
|
89
|
-
--brand-border-default-hover: var(--brand-
|
|
84
|
+
--brand-border-subtle: var(--brand-chalk-8);
|
|
85
|
+
--brand-border-subtle-hover: var(--brand-chalk-11);
|
|
86
|
+
--brand-border-default: var(--brand-chalk-15);
|
|
87
|
+
--brand-border-default-hover: var(--brand-highlighter-26);
|
|
90
88
|
--brand-border-emphasis: var(--brand-stamp-fill);
|
|
91
89
|
--brand-border-emphasis-hover: var(--brand-stamp-fill-hover);
|
|
92
90
|
|
|
93
|
-
/* the SYSTEM LINK (one trio per theme
|
|
91
|
+
/* the SYSTEM LINK (one trio per theme; aliases the primary's pen stops unless a custom
|
|
94
92
|
link color de-conflicts it; --link/-hover/-pressed are emitted per brand) */
|
|
95
93
|
--fg-link: var(--link);
|
|
96
94
|
--fg-link-hover: var(--link-hover);
|
|
97
95
|
--fg-link-pressed: var(--link-pressed);
|
|
98
96
|
|
|
99
|
-
/* the INVERSE link trio
|
|
100
|
-
|
|
101
|
-
|
|
97
|
+
/* the INVERSE link trio: the same link seed re-solved for text on inverted surfaces
|
|
98
|
+
(a pen-70 fill); always its own emitted values, since no stop is anchored against
|
|
99
|
+
that ground and so there is no alias posture */
|
|
102
100
|
--fg-link-inverse: var(--link-inverse);
|
|
103
101
|
--fg-link-inverse-hover: var(--link-inverse-hover);
|
|
104
102
|
--fg-link-inverse-pressed: var(--link-inverse-pressed);
|
|
@@ -114,16 +112,16 @@
|
|
|
114
112
|
--brand-alt-fg-on-emphasis: var(--brand-alt-stamp-on);
|
|
115
113
|
|
|
116
114
|
--brand-alt-bg-faint: var(--brand-alt-paper-3);
|
|
117
|
-
--brand-alt-bg-subtle: var(--brand-alt-
|
|
118
|
-
--brand-alt-bg-subtle-hover: var(--brand-alt-
|
|
115
|
+
--brand-alt-bg-subtle: var(--brand-alt-chalk-11);
|
|
116
|
+
--brand-alt-bg-subtle-hover: var(--brand-alt-chalk-15);
|
|
119
117
|
--brand-alt-bg-emphasis: var(--brand-alt-stamp-fill);
|
|
120
118
|
--brand-alt-bg-emphasis-hover: var(--brand-alt-stamp-fill-hover);
|
|
121
119
|
--brand-alt-bg-emphasis-pressed: var(--brand-alt-stamp-fill-pressed);
|
|
122
120
|
|
|
123
|
-
--brand-alt-border-subtle: var(--brand-alt-
|
|
124
|
-
--brand-alt-border-subtle-hover: var(--brand-alt-
|
|
125
|
-
--brand-alt-border-default: var(--brand-alt-
|
|
126
|
-
--brand-alt-border-default-hover: var(--brand-alt-
|
|
121
|
+
--brand-alt-border-subtle: var(--brand-alt-chalk-8);
|
|
122
|
+
--brand-alt-border-subtle-hover: var(--brand-alt-chalk-11);
|
|
123
|
+
--brand-alt-border-default: var(--brand-alt-chalk-15);
|
|
124
|
+
--brand-alt-border-default-hover: var(--brand-alt-highlighter-26);
|
|
127
125
|
--brand-alt-border-emphasis: var(--brand-alt-stamp-fill);
|
|
128
126
|
--brand-alt-border-emphasis-hover: var(--brand-alt-stamp-fill-hover);
|
|
129
127
|
}
|
|
@@ -131,20 +129,15 @@
|
|
|
131
129
|
/* ─── Signal roles ──────────────────────────────────────────────────────────
|
|
132
130
|
Aliases onto engine-generated signal primitives (dist/signals.css).
|
|
133
131
|
Mode switching happens at the primitive layer, so one block covers both.
|
|
134
|
-
Signal families emit by ROLE (
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
it clears 4.5 against pencil-47 everywhere (agnostic 360-seed sweep, worst 4.96
|
|
144
|
-
light / 8.04 dark). -bg-emphasis / -border-emphasis moved from highlight-9 to
|
|
145
|
-
pencil-47 (ink-9 pre-Stage-B) with it; in dark that reads lighter (contrast vs
|
|
146
|
-
paper-5, median 6.01 → 7.72). Stage B (owner 2026-08-07, names only) relabeled
|
|
147
|
-
every leaf in the block below; the stops themselves did not move. */
|
|
132
|
+
Signal families emit by ROLE (critical/warning/positive/info, the re-pointable
|
|
133
|
+
in-between tier; identity stays engine-internal), so the role tokens and the
|
|
134
|
+
family ramp share a prefix: --critical-fg rides --critical-pen-70.
|
|
135
|
+
|
|
136
|
+
-fg-on-emphasis rides --paper-0, NOT a solved on-color. paper-0 is the
|
|
137
|
+
mode-flipping paper extreme (white in light, the deep tinted ground in dark) and
|
|
138
|
+
it clears the 4.5:1 text bar against pencil-47 in every family and both modes;
|
|
139
|
+
the band audit holds that floor over an agnostic sweep. -bg-emphasis and
|
|
140
|
+
-border-emphasis ride pencil-47. */
|
|
148
141
|
|
|
149
142
|
[data-brand] {
|
|
150
143
|
--critical-fg: var(--critical-pen-70);
|
|
@@ -153,13 +146,13 @@
|
|
|
153
146
|
--critical-fg-alt-hover: var(--critical-pen-70);
|
|
154
147
|
--critical-fg-on-emphasis: var(--paper-0);
|
|
155
148
|
--critical-bg-faint: var(--critical-paper-3);
|
|
156
|
-
--critical-bg-subtle: var(--critical-
|
|
157
|
-
--critical-bg-subtle-hover: var(--critical-
|
|
149
|
+
--critical-bg-subtle: var(--critical-chalk-11);
|
|
150
|
+
--critical-bg-subtle-hover: var(--critical-chalk-15);
|
|
158
151
|
--critical-bg-emphasis: var(--critical-pencil-47);
|
|
159
|
-
--critical-border-subtle: var(--critical-
|
|
160
|
-
--critical-border-subtle-hover: var(--critical-
|
|
161
|
-
--critical-border-default: var(--critical-
|
|
162
|
-
--critical-border-default-hover: var(--critical-
|
|
152
|
+
--critical-border-subtle: var(--critical-chalk-8);
|
|
153
|
+
--critical-border-subtle-hover: var(--critical-chalk-11);
|
|
154
|
+
--critical-border-default: var(--critical-chalk-15);
|
|
155
|
+
--critical-border-default-hover: var(--critical-highlighter-26);
|
|
163
156
|
--critical-border-emphasis: var(--critical-pencil-47);
|
|
164
157
|
|
|
165
158
|
--warning-fg: var(--warning-pen-70);
|
|
@@ -168,13 +161,13 @@
|
|
|
168
161
|
--warning-fg-alt-hover: var(--warning-pen-70);
|
|
169
162
|
--warning-fg-on-emphasis: var(--paper-0);
|
|
170
163
|
--warning-bg-faint: var(--warning-paper-3);
|
|
171
|
-
--warning-bg-subtle: var(--warning-
|
|
172
|
-
--warning-bg-subtle-hover: var(--warning-
|
|
164
|
+
--warning-bg-subtle: var(--warning-chalk-11);
|
|
165
|
+
--warning-bg-subtle-hover: var(--warning-chalk-15);
|
|
173
166
|
--warning-bg-emphasis: var(--warning-pencil-47);
|
|
174
|
-
--warning-border-subtle: var(--warning-
|
|
175
|
-
--warning-border-subtle-hover: var(--warning-
|
|
176
|
-
--warning-border-default: var(--warning-
|
|
177
|
-
--warning-border-default-hover: var(--warning-
|
|
167
|
+
--warning-border-subtle: var(--warning-chalk-8);
|
|
168
|
+
--warning-border-subtle-hover: var(--warning-chalk-11);
|
|
169
|
+
--warning-border-default: var(--warning-chalk-15);
|
|
170
|
+
--warning-border-default-hover: var(--warning-highlighter-26);
|
|
178
171
|
--warning-border-emphasis: var(--warning-pencil-47);
|
|
179
172
|
|
|
180
173
|
--positive-fg: var(--positive-pen-70);
|
|
@@ -183,13 +176,13 @@
|
|
|
183
176
|
--positive-fg-alt-hover: var(--positive-pen-70);
|
|
184
177
|
--positive-fg-on-emphasis: var(--paper-0);
|
|
185
178
|
--positive-bg-faint: var(--positive-paper-3);
|
|
186
|
-
--positive-bg-subtle: var(--positive-
|
|
187
|
-
--positive-bg-subtle-hover: var(--positive-
|
|
179
|
+
--positive-bg-subtle: var(--positive-chalk-11);
|
|
180
|
+
--positive-bg-subtle-hover: var(--positive-chalk-15);
|
|
188
181
|
--positive-bg-emphasis: var(--positive-pencil-47);
|
|
189
|
-
--positive-border-subtle: var(--positive-
|
|
190
|
-
--positive-border-subtle-hover: var(--positive-
|
|
191
|
-
--positive-border-default: var(--positive-
|
|
192
|
-
--positive-border-default-hover: var(--positive-
|
|
182
|
+
--positive-border-subtle: var(--positive-chalk-8);
|
|
183
|
+
--positive-border-subtle-hover: var(--positive-chalk-11);
|
|
184
|
+
--positive-border-default: var(--positive-chalk-15);
|
|
185
|
+
--positive-border-default-hover: var(--positive-highlighter-26);
|
|
193
186
|
--positive-border-emphasis: var(--positive-pencil-47);
|
|
194
187
|
|
|
195
188
|
--info-fg: var(--info-pen-70);
|
|
@@ -198,12 +191,12 @@
|
|
|
198
191
|
--info-fg-alt-hover: var(--info-pen-70);
|
|
199
192
|
--info-fg-on-emphasis: var(--paper-0);
|
|
200
193
|
--info-bg-faint: var(--info-paper-3);
|
|
201
|
-
--info-bg-subtle: var(--info-
|
|
202
|
-
--info-bg-subtle-hover: var(--info-
|
|
194
|
+
--info-bg-subtle: var(--info-chalk-11);
|
|
195
|
+
--info-bg-subtle-hover: var(--info-chalk-15);
|
|
203
196
|
--info-bg-emphasis: var(--info-pencil-47);
|
|
204
|
-
--info-border-subtle: var(--info-
|
|
205
|
-
--info-border-subtle-hover: var(--info-
|
|
206
|
-
--info-border-default: var(--info-
|
|
207
|
-
--info-border-default-hover: var(--info-
|
|
197
|
+
--info-border-subtle: var(--info-chalk-8);
|
|
198
|
+
--info-border-subtle-hover: var(--info-chalk-11);
|
|
199
|
+
--info-border-default: var(--info-chalk-15);
|
|
200
|
+
--info-border-default-hover: var(--info-highlighter-26);
|
|
208
201
|
--info-border-emphasis: var(--info-pencil-47);
|
|
209
202
|
}
|