@eduardoalvarez/arrecife 0.5.0 → 0.6.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 +52 -0
- package/README.md +706 -470
- package/dist/brand/index.cjs +112 -95
- package/dist/brand/index.d.cts +40 -39
- package/dist/brand/index.d.ts +40 -39
- package/dist/brand/index.js +5 -4
- package/dist/catalog-D13txprv.d.cts +78 -0
- package/dist/catalog-D13txprv.d.ts +78 -0
- package/dist/chart/index.cjs +100 -83
- package/dist/chart/index.d.cts +66 -66
- package/dist/chart/index.d.ts +66 -66
- package/dist/chart/index.js +14 -12
- package/dist/chunk-25YNFCIF.js +141 -0
- package/dist/{chunk-YZ2SDOVZ.js → chunk-6O3KWB6P.js} +30 -30
- package/dist/chunk-CKRSQPTX.js +36 -0
- package/dist/{chunk-ZEOQKRQ7.js → chunk-DKCN7BAL.js} +1 -1
- package/dist/chunk-GCRII2KQ.js +86 -0
- package/dist/chunk-JMOOFZ3B.js +42 -0
- package/dist/chunk-O4TAH7YJ.js +276 -0
- package/dist/chunk-ODBFN44D.js +45 -0
- package/dist/{chunk-VPT32GPG.js → chunk-PMN7NR3G.js} +2 -2
- package/dist/chunk-XKYHTOUJ.js +27 -0
- package/dist/form/index.cjs +109 -92
- package/dist/form/index.d.cts +43 -42
- package/dist/form/index.d.ts +43 -42
- package/dist/form/index.js +25 -23
- package/dist/index.cjs +1068 -929
- package/dist/index.d.cts +770 -773
- package/dist/index.d.ts +770 -773
- package/dist/index.js +629 -675
- package/dist/{label-DuTvJGxD.d.ts → label-MgHFKnFy.d.cts} +3 -3
- package/dist/{label-DuTvJGxD.d.cts → label-MgHFKnFy.d.ts} +3 -3
- package/dist/og/index.cjs +130 -130
- package/dist/og/index.d.cts +93 -89
- package/dist/og/index.d.ts +93 -89
- package/dist/og/index.js +106 -106
- package/dist/shiki/index.cjs +28 -30
- package/dist/shiki/index.d.cts +4 -4
- package/dist/shiki/index.d.ts +4 -4
- package/dist/shiki/index.js +12 -12
- package/dist/theme/index.cjs +97 -0
- package/dist/theme/index.d.cts +144 -0
- package/dist/theme/index.d.ts +144 -0
- package/dist/theme/index.js +2 -0
- package/dist/tokens/index.cjs +133 -86
- package/dist/tokens/index.d.cts +246 -161
- package/dist/tokens/index.d.ts +246 -161
- package/dist/tokens/index.js +2 -2
- package/dist/tokens/theme.css +133 -98
- package/dist/variants/index.cjs +192 -0
- package/dist/variants/index.d.cts +192 -0
- package/dist/variants/index.d.ts +192 -0
- package/dist/variants/index.js +3 -0
- package/llms.txt +810 -744
- package/package.json +20 -11
- package/dist/catalogo-Du5ID-Hi.d.cts +0 -77
- package/dist/catalogo-Du5ID-Hi.d.ts +0 -77
- package/dist/chunk-E3OMP2DL.js +0 -36
- package/dist/chunk-KPZNNMV5.js +0 -83
- package/dist/chunk-NHS7ETKJ.js +0 -27
- package/dist/chunk-TSPJOM6K.js +0 -229
- package/dist/chunk-UOWIDFCB.js +0 -81
- package/dist/tema/index.cjs +0 -94
- package/dist/tema/index.d.cts +0 -110
- package/dist/tema/index.d.ts +0 -110
- package/dist/tema/index.js +0 -2
package/dist/tokens/index.d.ts
CHANGED
|
@@ -1,31 +1,32 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Arrecife —
|
|
2
|
+
* Arrecife — the single source of the visual identity.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* `scripts/check-tokens-purity.mjs`
|
|
4
|
+
* THE CONSTRAINT THAT OUTRANKS EVERYTHING ELSE: this file imports nothing. Not
|
|
5
|
+
* React, not components, not third-party CSS. It is consumed by the five
|
|
6
|
+
* projects, by an OG generator running on Satori and by an Astro site that
|
|
7
|
+
* never mounts React. The moment a token depends on a component, the library
|
|
8
|
+
* has stopped being portable. `scripts/check-tokens-purity.mjs` verifies it on
|
|
9
|
+
* every build.
|
|
9
10
|
*
|
|
10
|
-
*
|
|
11
|
-
* «
|
|
12
|
-
*
|
|
11
|
+
* Contrast ratios here are MEASURED, not estimated. Do not nudge a hex so it
|
|
12
|
+
* «looks better»: #0F8F80 (3.57:1) and #B4632A (3.95:1) were already corrected
|
|
13
|
+
* for failing AA on paper. If you see them anywhere, they are wrong.
|
|
13
14
|
*
|
|
14
|
-
*
|
|
15
|
-
* `background`,
|
|
16
|
-
*
|
|
17
|
-
*
|
|
15
|
+
* A second correction, for the same reason. The identity document measured
|
|
16
|
+
* everything against `background`, but `surfaceRaised` is the worst case in
|
|
17
|
+
* BOTH modes: in light it is darker than the page, in dark it is lighter. It is
|
|
18
|
+
* where menus and active tabs live, so it is where reading has to work.
|
|
18
19
|
*
|
|
19
|
-
* textMuted
|
|
20
|
-
* warning
|
|
21
|
-
* error
|
|
20
|
+
* textMuted light #6B7480 → #626A75 4.24 → 4.90 over background
|
|
21
|
+
* warning light #9A6A12 → #8D6111 4.23 → 4.88 over background
|
|
22
|
+
* error dark #E05252 → #E15757 4.35 → 4.51 over surface
|
|
22
23
|
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
* background
|
|
24
|
+
* All three keep their exact hue and saturation: only lightness moves, by one
|
|
25
|
+
* to four points. Light `accent` and `warm` stay as they are — they pass over
|
|
26
|
+
* background and over surface, and neither is a text color on surfaceRaised.
|
|
26
27
|
*/
|
|
27
28
|
/**
|
|
28
|
-
*
|
|
29
|
+
* Dark mode (primary). Contrast measured against `background` #091319.
|
|
29
30
|
*/
|
|
30
31
|
declare const dark: {
|
|
31
32
|
readonly background: "#091319";
|
|
@@ -46,10 +47,25 @@ declare const dark: {
|
|
|
46
47
|
readonly success: "#4FB477";
|
|
47
48
|
readonly warning: "#E8A33D";
|
|
48
49
|
readonly error: "#E15757";
|
|
50
|
+
/**
|
|
51
|
+
* The destructive fill. It is NOT `error`, and the difference is the role.
|
|
52
|
+
*
|
|
53
|
+
* `error` is a TEXT color: it has to read against a dark surface, so it sits
|
|
54
|
+
* mid-red. `danger` is a FILL: what has to read is the ink ON TOP of it, so it
|
|
55
|
+
* goes lighter. Same reasoning as `accent` and `accentOn` — one is measured
|
|
56
|
+
* against the page, the other against what it carries.
|
|
57
|
+
*
|
|
58
|
+
* Measured: ink 6.53:1 over the fill and 7.92:1 over the hover; the fill
|
|
59
|
+
* itself 6.71:1 over abyss, 5.94 over surface and 4.91 over surfaceRaised, so
|
|
60
|
+
* the outline variant reads as text on all three.
|
|
61
|
+
*/
|
|
62
|
+
readonly danger: "#F4736B";
|
|
63
|
+
readonly dangerHover: "#F78D86";
|
|
64
|
+
readonly dangerOn: "#2B0A08";
|
|
49
65
|
};
|
|
50
66
|
/**
|
|
51
|
-
*
|
|
52
|
-
* `background`
|
|
67
|
+
* Light mode. Contrast measured against `background` #F6F2EA.
|
|
68
|
+
* `background` is WARM white: never #FFF as the page background.
|
|
53
69
|
*/
|
|
54
70
|
declare const light: {
|
|
55
71
|
readonly background: "#F6F2EA";
|
|
@@ -70,6 +86,20 @@ declare const light: {
|
|
|
70
86
|
readonly success: "#0F6B52";
|
|
71
87
|
readonly warning: "#8D6111";
|
|
72
88
|
readonly error: "#C0392B";
|
|
89
|
+
/**
|
|
90
|
+
* In light mode `danger` and `error` land on the same hex, and that is not an
|
|
91
|
+
* oversight: over paper a red dark enough to carry white ink is also the red
|
|
92
|
+
* that reads as text. In dark they part company because the fill has to be
|
|
93
|
+
* lighter than the text color, not darker.
|
|
94
|
+
*
|
|
95
|
+
* Measured: ink 5.11:1 over the fill and 6.61:1 over the hover; the fill
|
|
96
|
+
* itself 4.87:1 over paper, 5.44 over surface and 4.50 over surfaceRaised —
|
|
97
|
+
* the last one is exactly on the AA line, which is where every light semantic
|
|
98
|
+
* in this palette sits.
|
|
99
|
+
*/
|
|
100
|
+
readonly danger: "#C0392B";
|
|
101
|
+
readonly dangerHover: "#A32F22";
|
|
102
|
+
readonly dangerOn: "#FFF6F4";
|
|
73
103
|
};
|
|
74
104
|
declare const colors: {
|
|
75
105
|
readonly dark: {
|
|
@@ -91,6 +121,21 @@ declare const colors: {
|
|
|
91
121
|
readonly success: "#4FB477";
|
|
92
122
|
readonly warning: "#E8A33D";
|
|
93
123
|
readonly error: "#E15757";
|
|
124
|
+
/**
|
|
125
|
+
* The destructive fill. It is NOT `error`, and the difference is the role.
|
|
126
|
+
*
|
|
127
|
+
* `error` is a TEXT color: it has to read against a dark surface, so it sits
|
|
128
|
+
* mid-red. `danger` is a FILL: what has to read is the ink ON TOP of it, so it
|
|
129
|
+
* goes lighter. Same reasoning as `accent` and `accentOn` — one is measured
|
|
130
|
+
* against the page, the other against what it carries.
|
|
131
|
+
*
|
|
132
|
+
* Measured: ink 6.53:1 over the fill and 7.92:1 over the hover; the fill
|
|
133
|
+
* itself 6.71:1 over abyss, 5.94 over surface and 4.91 over surfaceRaised, so
|
|
134
|
+
* the outline variant reads as text on all three.
|
|
135
|
+
*/
|
|
136
|
+
readonly danger: "#F4736B";
|
|
137
|
+
readonly dangerHover: "#F78D86";
|
|
138
|
+
readonly dangerOn: "#2B0A08";
|
|
94
139
|
};
|
|
95
140
|
readonly light: {
|
|
96
141
|
readonly background: "#F6F2EA";
|
|
@@ -111,23 +156,37 @@ declare const colors: {
|
|
|
111
156
|
readonly success: "#0F6B52";
|
|
112
157
|
readonly warning: "#8D6111";
|
|
113
158
|
readonly error: "#C0392B";
|
|
159
|
+
/**
|
|
160
|
+
* In light mode `danger` and `error` land on the same hex, and that is not an
|
|
161
|
+
* oversight: over paper a red dark enough to carry white ink is also the red
|
|
162
|
+
* that reads as text. In dark they part company because the fill has to be
|
|
163
|
+
* lighter than the text color, not darker.
|
|
164
|
+
*
|
|
165
|
+
* Measured: ink 5.11:1 over the fill and 6.61:1 over the hover; the fill
|
|
166
|
+
* itself 4.87:1 over paper, 5.44 over surface and 4.50 over surfaceRaised —
|
|
167
|
+
* the last one is exactly on the AA line, which is where every light semantic
|
|
168
|
+
* in this palette sits.
|
|
169
|
+
*/
|
|
170
|
+
readonly danger: "#C0392B";
|
|
171
|
+
readonly dangerHover: "#A32F22";
|
|
172
|
+
readonly dangerOn: "#FFF6F4";
|
|
114
173
|
};
|
|
115
174
|
};
|
|
116
|
-
/**
|
|
175
|
+
/** Brand — identical in both modes. */
|
|
117
176
|
declare const brand: {
|
|
118
|
-
/**
|
|
177
|
+
/** The mascot's body. 4.22:1 → FILL ONLY, NEVER text. */
|
|
119
178
|
readonly body: "#3E7CB1";
|
|
120
|
-
/**
|
|
179
|
+
/** Spot pattern. */
|
|
121
180
|
readonly spots: "#C2D7E7";
|
|
122
|
-
/**
|
|
181
|
+
/** Hull · outline, and the background of code blocks. */
|
|
123
182
|
readonly hull: "#0B1524";
|
|
124
183
|
};
|
|
125
184
|
declare const fonts: {
|
|
126
|
-
/**
|
|
185
|
+
/** Headlines and large numbers ONLY. Never body copy. */
|
|
127
186
|
readonly display: "\"Bricolage Grotesque\", ui-sans-serif, system-ui, sans-serif";
|
|
128
|
-
/**
|
|
187
|
+
/** Body and interface. */
|
|
129
188
|
readonly sans: "\"Geist\", ui-sans-serif, system-ui, sans-serif";
|
|
130
|
-
/**
|
|
189
|
+
/** Code, paths, labels, metadata, the CLI signature. */
|
|
131
190
|
readonly mono: "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace";
|
|
132
191
|
};
|
|
133
192
|
declare const typeScale: {
|
|
@@ -138,7 +197,7 @@ declare const typeScale: {
|
|
|
138
197
|
readonly weight: 800;
|
|
139
198
|
readonly tracking: "-0.035em";
|
|
140
199
|
};
|
|
141
|
-
/**
|
|
200
|
+
/** Large metrics. Numbers, not prose: line height 1 and no descenders. */
|
|
142
201
|
readonly stat: {
|
|
143
202
|
readonly family: "display";
|
|
144
203
|
readonly size: 46;
|
|
@@ -174,12 +233,12 @@ declare const typeScale: {
|
|
|
174
233
|
readonly weight: 400;
|
|
175
234
|
};
|
|
176
235
|
/**
|
|
177
|
-
* 17px.
|
|
236
|
+
* 17px. The large button, and the deck on interior pages.
|
|
178
237
|
*
|
|
179
|
-
*
|
|
180
|
-
*
|
|
181
|
-
*
|
|
182
|
-
*
|
|
238
|
+
* It earns its own step because the identity document uses it TWICE, in two
|
|
239
|
+
* different pieces: «lg 15/30 r12» with 17px text, and «h1 44/700 · deck 17px
|
|
240
|
+
* · context paragraph 15px». One use would not have justified splitting the
|
|
241
|
+
* gap between `ui` (15) and `body` (18); two did.
|
|
183
242
|
*/
|
|
184
243
|
readonly lead: {
|
|
185
244
|
readonly family: "sans";
|
|
@@ -200,11 +259,11 @@ declare const typeScale: {
|
|
|
200
259
|
readonly weight: 500;
|
|
201
260
|
};
|
|
202
261
|
/**
|
|
203
|
-
*
|
|
262
|
+
* The status-badge scale: sans 12.5/500, squared off.
|
|
204
263
|
*
|
|
205
|
-
*
|
|
206
|
-
*
|
|
207
|
-
*
|
|
264
|
+
* That is half a pixel below `label`, and this time the half pixel matters: a
|
|
265
|
+
* status badge sits inside a table or next to a title, and at 13 it competed
|
|
266
|
+
* with the text it accompanies. The document specifies 12.5 and it shows.
|
|
208
267
|
*/
|
|
209
268
|
readonly tag: {
|
|
210
269
|
readonly family: "sans";
|
|
@@ -213,15 +272,15 @@ declare const typeScale: {
|
|
|
213
272
|
readonly weight: 500;
|
|
214
273
|
};
|
|
215
274
|
/**
|
|
216
|
-
*
|
|
275
|
+
* The category and metric scale: mono 11.5.
|
|
217
276
|
*
|
|
218
|
-
*
|
|
219
|
-
*
|
|
220
|
-
*
|
|
221
|
-
* 5.57:1
|
|
277
|
+
* It breaks the floor set by `limits.minScreenPx`, deliberately. That floor
|
|
278
|
+
* protects TEXT — what you read in a sentence — and a one-word pill is not
|
|
279
|
+
* running text: it is a mark. Contrast is still measured and still passes AA
|
|
280
|
+
* (plankton 5.57:1 over abyss), which is the part that is not negotiable.
|
|
222
281
|
*
|
|
223
|
-
*
|
|
224
|
-
*
|
|
282
|
+
* At 13 the three badge families grew past the size of a small button and
|
|
283
|
+
* outweighed the title they accompany. See `docs/decisions.md`.
|
|
225
284
|
*/
|
|
226
285
|
readonly chip: {
|
|
227
286
|
readonly family: "mono";
|
|
@@ -230,18 +289,18 @@ declare const typeScale: {
|
|
|
230
289
|
readonly weight: 400;
|
|
231
290
|
};
|
|
232
291
|
/**
|
|
233
|
-
* Mono
|
|
234
|
-
*
|
|
292
|
+
* Mono with NO transform: dates, paths, versions, file names, the footer
|
|
293
|
+
* signature and metric labels. It is most of the mono in the system.
|
|
235
294
|
*
|
|
236
|
-
*
|
|
237
|
-
*
|
|
238
|
-
*
|
|
239
|
-
*
|
|
295
|
+
* It exists because `eyebrow` ships `uppercase` and that is not a preference
|
|
296
|
+
* you can switch off: it IS the eyebrow scale. An `18 Aug 2026` in small caps
|
|
297
|
+
* or a `pose-laptop-coffee.png` in all caps are wrong, and without this step
|
|
298
|
+
* the only way out was a `normal-case` at every call site.
|
|
240
299
|
*
|
|
241
|
-
*
|
|
242
|
-
*
|
|
243
|
-
*
|
|
244
|
-
* 12.5
|
|
300
|
+
* The document says 12.5. This is 13 for the same reason `textMuted` was
|
|
301
|
+
* corrected: `limits.minScreenPx` is 13 and plankton is «never under 13px».
|
|
302
|
+
* This scale is exactly where muted metadata gets written, so putting it at
|
|
303
|
+
* 12.5 would have made its most common use illegible by half a pixel.
|
|
245
304
|
*/
|
|
246
305
|
readonly meta: {
|
|
247
306
|
readonly family: "mono";
|
|
@@ -256,13 +315,13 @@ declare const typeScale: {
|
|
|
256
315
|
readonly transform: "uppercase";
|
|
257
316
|
};
|
|
258
317
|
};
|
|
259
|
-
/**
|
|
318
|
+
/** Hard legibility limits. */
|
|
260
319
|
declare const limits: {
|
|
261
|
-
/**
|
|
320
|
+
/** Absolute minimum on screen. */
|
|
262
321
|
readonly minScreenPx: 13;
|
|
263
|
-
/**
|
|
322
|
+
/** Absolute minimum in print. */
|
|
264
323
|
readonly minPrintPt: 12;
|
|
265
|
-
/**
|
|
324
|
+
/** Maximum body measure. */
|
|
266
325
|
readonly measure: "68ch";
|
|
267
326
|
};
|
|
268
327
|
declare const radius: {
|
|
@@ -273,43 +332,59 @@ declare const radius: {
|
|
|
273
332
|
readonly pill: 999;
|
|
274
333
|
};
|
|
275
334
|
/**
|
|
276
|
-
*
|
|
335
|
+
* Controls, from the document: `sm 8/14 · md 12/22 · lg 15/30 · icon 42×42`.
|
|
277
336
|
*
|
|
278
|
-
*
|
|
279
|
-
*
|
|
280
|
-
* `docs/
|
|
337
|
+
* Only the horizontal padding and the icon button's square. Height comes from
|
|
338
|
+
* the type scale, and there is a single radius for all three sizes: see
|
|
339
|
+
* `docs/decisions.md`.
|
|
281
340
|
*
|
|
282
|
-
*
|
|
283
|
-
*
|
|
341
|
+
* They are not in `spacing` because they are not page rhythm: 14, 22 and 30 do
|
|
342
|
+
* not compose with 8/12/16/26/40 and must not be offered as margins.
|
|
284
343
|
*/
|
|
285
344
|
declare const control: {
|
|
286
345
|
readonly sm: 14;
|
|
287
346
|
readonly md: 22;
|
|
288
347
|
readonly lg: 30;
|
|
289
|
-
/**
|
|
348
|
+
/** Icon button: square, no text. */
|
|
290
349
|
readonly icon: 42;
|
|
350
|
+
/**
|
|
351
|
+
* The dense icon button, 32×32.
|
|
352
|
+
*
|
|
353
|
+
* 42 is the right measure for a control you hit with a thumb, and the four
|
|
354
|
+
* reading sites are where that fits. `cursos` is the odd one out: it is the
|
|
355
|
+
* only admin app of the set, with three actions per table row, and at 42 the
|
|
356
|
+
* row grows with them — the original used 24 and 28.
|
|
357
|
+
*
|
|
358
|
+
* It is 32 and not 28 because 32 is `sm`'s height. A dense icon button lines
|
|
359
|
+
* up with a small text button, so a toolbar mixing the two stays on one
|
|
360
|
+
* baseline; 28 would have been a fifth height that matches nothing.
|
|
361
|
+
*
|
|
362
|
+
* It does not replace `icon`. A page's primary action stays at 42; this is for
|
|
363
|
+
* a row of a table. See `docs/decisions.md` § 22.
|
|
364
|
+
*/
|
|
365
|
+
readonly iconSm: 32;
|
|
291
366
|
};
|
|
292
367
|
/**
|
|
293
|
-
*
|
|
294
|
-
*
|
|
368
|
+
* Page rhythm. All five steps carry `step` in the name, and that is not
|
|
369
|
+
* decoration: it is the fix for a bug that never surfaced anywhere.
|
|
295
370
|
*
|
|
296
|
-
*
|
|
297
|
-
*
|
|
298
|
-
*
|
|
299
|
-
* lg, xl`,
|
|
300
|
-
*
|
|
301
|
-
*
|
|
302
|
-
*
|
|
303
|
-
*
|
|
371
|
+
* In Tailwind v4, `--spacing-*` does not only feed `p-*`, `m-*` and `gap-*`: it
|
|
372
|
+
* also resolves `w-*`, `h-*`, `max-w-*`, `min-w-*`, `basis-*` and `size-*`, and
|
|
373
|
+
* there it BEATS the `--container-*` scale. The steps used to be named `xs, sm,
|
|
374
|
+
* md, lg, xl`, which are exactly the names of that scale, so any project that
|
|
375
|
+
* imported `theme.css` ended up with `max-w-sm` worth 12px instead of 384px.
|
|
376
|
+
* Nothing warned: not the build, not the types, not Storybook, not the suite —
|
|
377
|
+
* the library does not use those utilities internally. It was found in
|
|
378
|
+
* production, with a hero paragraph running one word per line.
|
|
304
379
|
*
|
|
305
|
-
*
|
|
306
|
-
*
|
|
380
|
+
* Redeclaring `--container-sm` does NOT fix it: `--spacing-*` wins resolution.
|
|
381
|
+
* The only way out is for the library not to use those names.
|
|
307
382
|
*
|
|
308
|
-
*
|
|
309
|
-
*
|
|
310
|
-
*
|
|
383
|
+
* The prefix follows the pattern `control` already had: a named group inside
|
|
384
|
+
* the `--spacing-*` namespace. `scripts/check-tokens-namespace.mjs` prevents
|
|
385
|
+
* the relapse.
|
|
311
386
|
*
|
|
312
|
-
* `section` no
|
|
387
|
+
* `section` carries no prefix because it collides with nothing in Tailwind.
|
|
313
388
|
*/
|
|
314
389
|
declare const spacing: {
|
|
315
390
|
readonly stepXs: 8;
|
|
@@ -320,74 +395,76 @@ declare const spacing: {
|
|
|
320
395
|
readonly section: 96;
|
|
321
396
|
};
|
|
322
397
|
declare const size: {
|
|
323
|
-
/**
|
|
398
|
+
/** Navigation bar height. */
|
|
324
399
|
readonly nav: 64;
|
|
325
|
-
/**
|
|
400
|
+
/** Reading column width. */
|
|
326
401
|
readonly content: 760;
|
|
327
|
-
/**
|
|
402
|
+
/** Maximum page width. */
|
|
328
403
|
readonly wide: 1180;
|
|
329
404
|
};
|
|
330
405
|
/**
|
|
331
|
-
*
|
|
406
|
+
* The syntax highlighting palette.
|
|
332
407
|
*
|
|
333
|
-
*
|
|
334
|
-
* identifiers
|
|
335
|
-
*
|
|
336
|
-
* variables
|
|
408
|
+
* Straight from the document: «keywords sand, strings biolume, comments
|
|
409
|
+
* plankton, identifiers foam», over hull. FOUR colors on purpose — the system
|
|
410
|
+
* communicates with color and border, not with chromatic noise, so functions,
|
|
411
|
+
* variables and types all land on foam.
|
|
337
412
|
*
|
|
338
|
-
*
|
|
339
|
-
*
|
|
413
|
+
* The code block is an island of dark theme in both modes (see `CodeBlock`), so
|
|
414
|
+
* this palette has NO light counterpart: it always sits on hull.
|
|
340
415
|
*
|
|
341
|
-
*
|
|
416
|
+
* Contrast MEASURED over `brand.hull` #0B1524, all AA:
|
|
342
417
|
*
|
|
343
|
-
*
|
|
344
|
-
* literal
|
|
345
|
-
*
|
|
346
|
-
*
|
|
347
|
-
*
|
|
418
|
+
* identifier foam 16.42:1
|
|
419
|
+
* literal biolume 10.05:1
|
|
420
|
+
* keyword sand 9.05:1
|
|
421
|
+
* comment plankton 5.43:1
|
|
422
|
+
* invalid error 4.97:1
|
|
348
423
|
*
|
|
349
|
-
* `brand.body` (#3E7CB1)
|
|
350
|
-
*
|
|
424
|
+
* `brand.body` (#3E7CB1) is NOT here: the system restricts it to fill, never
|
|
425
|
+
* text, and it measures 4.2:1 in this context.
|
|
351
426
|
*
|
|
352
|
-
*
|
|
353
|
-
*
|
|
354
|
-
*
|
|
427
|
+
* Numeric and boolean literals ride with strings in biolume. The document does
|
|
428
|
+
* not assign them, and grouping them with strings — all three are literals — is
|
|
429
|
+
* more coherent than introducing a fifth color outside the palette.
|
|
355
430
|
*/
|
|
356
|
-
declare const
|
|
357
|
-
/**
|
|
358
|
-
readonly
|
|
359
|
-
/**
|
|
360
|
-
readonly
|
|
361
|
-
/**
|
|
431
|
+
declare const syntax: {
|
|
432
|
+
/** The hull. It is the block background in both modes. */
|
|
433
|
+
readonly background: "#0B1524";
|
|
434
|
+
/** Identifiers, functions, types, variables. */
|
|
435
|
+
readonly identifier: "#EDF4F3";
|
|
436
|
+
/** Strings, numbers, booleans, null. */
|
|
362
437
|
readonly literal: "#35D6C0";
|
|
363
|
-
/**
|
|
364
|
-
readonly
|
|
365
|
-
/**
|
|
366
|
-
readonly
|
|
438
|
+
/** Keywords, control flow, `import`, `this`. */
|
|
439
|
+
readonly keyword: "#F2A65A";
|
|
440
|
+
/** Comments and punctuation. */
|
|
441
|
+
readonly comment: "#71919C";
|
|
367
442
|
/** `markup.deleted`, `invalid`. */
|
|
368
|
-
readonly
|
|
443
|
+
readonly invalid: "#E15757";
|
|
369
444
|
};
|
|
370
445
|
/**
|
|
371
|
-
*
|
|
372
|
-
*
|
|
446
|
+
* The chart series palette. FOUR, for the same reason as the syntax palette:
|
|
447
|
+
* the system communicates with color and border, not with chromatic noise.
|
|
373
448
|
*
|
|
374
|
-
*
|
|
375
|
-
*
|
|
376
|
-
*
|
|
377
|
-
*
|
|
378
|
-
*
|
|
449
|
+
* None of them is a new color. They are four that already exist in the identity
|
|
450
|
+
* and that are told apart by HUE, not by lightness — teal, orange, blue and
|
|
451
|
+
* grey — which is the only way they stay four distinct series for someone who
|
|
452
|
+
* cannot tell socialLink from green. Picking biolume and `success` would have produced
|
|
453
|
+
* two nearly identical greens in light mode.
|
|
379
454
|
*
|
|
380
|
-
* `brand.body`
|
|
381
|
-
*
|
|
382
|
-
*
|
|
455
|
+
* `brand.body` belongs here and not in syntax highlighting by the same rule
|
|
456
|
+
* read the right way round: the system restricts it to FILL and never to text,
|
|
457
|
+
* and a chart series is fill. It is identical in both modes because it is a
|
|
458
|
+
* brand color.
|
|
383
459
|
*
|
|
384
|
-
*
|
|
385
|
-
*
|
|
386
|
-
*
|
|
460
|
+
* The threshold that applies is the graphical-object one, 3:1 against the
|
|
461
|
+
* background, not the text one. Measured against `background`, all four clear
|
|
462
|
+
* it in both modes with room to spare: the worst is `brand.body` over paper, at
|
|
463
|
+
* 3.9:1.
|
|
387
464
|
*
|
|
388
|
-
*
|
|
389
|
-
*
|
|
390
|
-
* `docs/
|
|
465
|
+
* A fifth series is not added by inventing a hue. If a chart needs five
|
|
466
|
+
* categories, either there are too many categories or they need an «other»
|
|
467
|
+
* bucket: see `docs/decisions.md`.
|
|
391
468
|
*/
|
|
392
469
|
declare const series: {
|
|
393
470
|
readonly dark: readonly ["#35D6C0", "#F2A65A", "#3E7CB1", "#71919C"];
|
|
@@ -396,24 +473,24 @@ declare const series: {
|
|
|
396
473
|
declare const gradient: {
|
|
397
474
|
readonly dark: {
|
|
398
475
|
readonly hero: "linear-gradient(160deg, #091319 60%, #0D2129 100%)";
|
|
399
|
-
readonly
|
|
400
|
-
/**
|
|
476
|
+
readonly section: "linear-gradient(150deg, #10202B 0%, #0D2129 100%)";
|
|
477
|
+
/** The one used by the article OG template. 145°, from the document. */
|
|
401
478
|
readonly og: "linear-gradient(145deg, #091319 55%, #0D2129 100%)";
|
|
402
479
|
};
|
|
403
480
|
readonly light: {
|
|
404
481
|
readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #EFE9DE 100%)";
|
|
405
|
-
readonly
|
|
482
|
+
readonly section: "linear-gradient(150deg, #FFFFFF 0%, #EFE9DE 100%)";
|
|
406
483
|
readonly og: "linear-gradient(145deg, #F6F2EA 55%, #EFE9DE 100%)";
|
|
407
484
|
};
|
|
408
485
|
};
|
|
409
|
-
/**
|
|
486
|
+
/** A single level. There is no elevation scale. */
|
|
410
487
|
declare const shadow: {
|
|
411
488
|
readonly standard: "0 1px 2px rgba(0, 0, 0, 0.35)";
|
|
412
489
|
};
|
|
413
490
|
/**
|
|
414
|
-
* 150ms ease-out —
|
|
415
|
-
*
|
|
416
|
-
*
|
|
491
|
+
* 150ms ease-out — color and border only.
|
|
492
|
+
* The system animates neither position nor scale: states are communicated with
|
|
493
|
+
* border and color, not with movement.
|
|
417
494
|
*/
|
|
418
495
|
declare const motion: {
|
|
419
496
|
readonly duration: "150ms";
|
|
@@ -422,20 +499,20 @@ declare const motion: {
|
|
|
422
499
|
};
|
|
423
500
|
declare const tagline: {
|
|
424
501
|
/** Hero. */
|
|
425
|
-
readonly
|
|
426
|
-
/** Header,
|
|
427
|
-
readonly
|
|
502
|
+
readonly long: "Ayudo a equipos de ingeniería a escalar con criterio";
|
|
503
|
+
/** Header, one line. */
|
|
504
|
+
readonly short: "Ayudo a equipos a escalar con criterio";
|
|
428
505
|
/** LinkedIn. */
|
|
429
506
|
readonly en: "Helping engineering teams scale with judgment";
|
|
430
507
|
};
|
|
431
508
|
/**
|
|
432
|
-
*
|
|
433
|
-
*
|
|
509
|
+
* The wordmark always reads «Eduardo Álvarez». The mascot is called Tiburoncín
|
|
510
|
+
* and its name never appears inside the logo.
|
|
434
511
|
*/
|
|
435
512
|
declare const naming: {
|
|
436
513
|
readonly wordmark: "Eduardo Álvarez";
|
|
437
514
|
readonly mascot: "Tiburoncín";
|
|
438
|
-
/**
|
|
515
|
+
/** The domain, for the footer CLI signature: `$ cd ~/eduardoalvarez.dev/2026`. */
|
|
439
516
|
readonly domain: "eduardoalvarez.dev";
|
|
440
517
|
};
|
|
441
518
|
type ColorMode = keyof typeof colors;
|
|
@@ -446,20 +523,21 @@ type TypeScaleToken = keyof typeof typeScale;
|
|
|
446
523
|
type RadiusToken = keyof typeof radius;
|
|
447
524
|
type ControlToken = keyof typeof control;
|
|
448
525
|
type GradientToken = keyof typeof gradient.dark;
|
|
449
|
-
type
|
|
526
|
+
type SyntaxToken = keyof typeof syntax;
|
|
450
527
|
type SpacingToken = keyof typeof spacing;
|
|
451
528
|
type SizeToken = keyof typeof size;
|
|
452
|
-
/**
|
|
529
|
+
/** The index of a chart series: 0, 1, 2 or 3. */
|
|
453
530
|
type SeriesToken = 0 | 1 | 2 | 3;
|
|
454
531
|
|
|
455
532
|
/**
|
|
456
|
-
*
|
|
533
|
+
* The entry point of `@eduardoalvarez/arrecife/tokens`.
|
|
457
534
|
*
|
|
458
|
-
*
|
|
459
|
-
*
|
|
535
|
+
* Same as `tokens.ts`: it imports nothing from outside this directory. It is the
|
|
536
|
+
* only subpackage the five projects, Satori and React-less Astro can all
|
|
537
|
+
* consume.
|
|
460
538
|
*/
|
|
461
539
|
|
|
462
|
-
/**
|
|
540
|
+
/** Every token in a single object, for Satori templates and generators. */
|
|
463
541
|
declare const tokens: {
|
|
464
542
|
readonly colors: {
|
|
465
543
|
readonly dark: {
|
|
@@ -481,6 +559,9 @@ declare const tokens: {
|
|
|
481
559
|
readonly success: "#4FB477";
|
|
482
560
|
readonly warning: "#E8A33D";
|
|
483
561
|
readonly error: "#E15757";
|
|
562
|
+
readonly danger: "#F4736B";
|
|
563
|
+
readonly dangerHover: "#F78D86";
|
|
564
|
+
readonly dangerOn: "#2B0A08";
|
|
484
565
|
};
|
|
485
566
|
readonly light: {
|
|
486
567
|
readonly background: "#F6F2EA";
|
|
@@ -501,6 +582,9 @@ declare const tokens: {
|
|
|
501
582
|
readonly success: "#0F6B52";
|
|
502
583
|
readonly warning: "#8D6111";
|
|
503
584
|
readonly error: "#C0392B";
|
|
585
|
+
readonly danger: "#C0392B";
|
|
586
|
+
readonly dangerHover: "#A32F22";
|
|
587
|
+
readonly dangerOn: "#FFF6F4";
|
|
504
588
|
};
|
|
505
589
|
};
|
|
506
590
|
readonly brand: {
|
|
@@ -615,6 +699,7 @@ declare const tokens: {
|
|
|
615
699
|
readonly md: 22;
|
|
616
700
|
readonly lg: 30;
|
|
617
701
|
readonly icon: 42;
|
|
702
|
+
readonly iconSm: 32;
|
|
618
703
|
};
|
|
619
704
|
readonly spacing: {
|
|
620
705
|
readonly stepXs: 8;
|
|
@@ -632,22 +717,22 @@ declare const tokens: {
|
|
|
632
717
|
readonly gradient: {
|
|
633
718
|
readonly dark: {
|
|
634
719
|
readonly hero: "linear-gradient(160deg, #091319 60%, #0D2129 100%)";
|
|
635
|
-
readonly
|
|
720
|
+
readonly section: "linear-gradient(150deg, #10202B 0%, #0D2129 100%)";
|
|
636
721
|
readonly og: "linear-gradient(145deg, #091319 55%, #0D2129 100%)";
|
|
637
722
|
};
|
|
638
723
|
readonly light: {
|
|
639
724
|
readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #EFE9DE 100%)";
|
|
640
|
-
readonly
|
|
725
|
+
readonly section: "linear-gradient(150deg, #FFFFFF 0%, #EFE9DE 100%)";
|
|
641
726
|
readonly og: "linear-gradient(145deg, #F6F2EA 55%, #EFE9DE 100%)";
|
|
642
727
|
};
|
|
643
728
|
};
|
|
644
|
-
readonly
|
|
645
|
-
readonly
|
|
646
|
-
readonly
|
|
729
|
+
readonly syntax: {
|
|
730
|
+
readonly background: "#0B1524";
|
|
731
|
+
readonly identifier: "#EDF4F3";
|
|
647
732
|
readonly literal: "#35D6C0";
|
|
648
|
-
readonly
|
|
649
|
-
readonly
|
|
650
|
-
readonly
|
|
733
|
+
readonly keyword: "#F2A65A";
|
|
734
|
+
readonly comment: "#71919C";
|
|
735
|
+
readonly invalid: "#E15757";
|
|
651
736
|
};
|
|
652
737
|
readonly series: {
|
|
653
738
|
readonly dark: readonly ["#35D6C0", "#F2A65A", "#3E7CB1", "#71919C"];
|
|
@@ -662,8 +747,8 @@ declare const tokens: {
|
|
|
662
747
|
readonly properties: "color, background-color, border-color, fill, stroke";
|
|
663
748
|
};
|
|
664
749
|
readonly tagline: {
|
|
665
|
-
readonly
|
|
666
|
-
readonly
|
|
750
|
+
readonly long: "Ayudo a equipos de ingeniería a escalar con criterio";
|
|
751
|
+
readonly short: "Ayudo a equipos a escalar con criterio";
|
|
667
752
|
readonly en: "Helping engineering teams scale with judgment";
|
|
668
753
|
};
|
|
669
754
|
readonly naming: {
|
|
@@ -674,4 +759,4 @@ declare const tokens: {
|
|
|
674
759
|
};
|
|
675
760
|
type Tokens = typeof tokens;
|
|
676
761
|
|
|
677
|
-
export { type BrandToken, type ColorMode, type ColorToken, type ControlToken, type FontToken, type GradientToken, type RadiusToken, type SeriesToken, type
|
|
762
|
+
export { type BrandToken, type ColorMode, type ColorToken, type ControlToken, type FontToken, type GradientToken, type RadiusToken, type SeriesToken, type SizeToken, type SpacingToken, type SyntaxToken, type Tokens, type TypeScaleToken, brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, tokens, typeScale };
|