You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
15 KiB
15 KiB
prose — alcance de tema: análisis y propuesta
Generado por
node --import tsx/esm scripts/theming-census.ts --report. Lo medido y la propuesta se regeneran; el Veredicto (§5) se conserva. Vista de conjunto: README · método y protocolo:PLAN-theming.md§1, §2, §7.
- Medido: 2026-08-20 · Alcance: 1% — 1 de 74 knobs por token público
- Knobs de apariencia: 74 — público 1 · privado 0 · global 43 · literal 30 · sistema 0 (fuera del ratio)
- Contrato hoy (
lib/recipes/base.ts): 2 pública(s) —measure,line-height - Eje
size: sí · ficheros:prose.css
1. Knobs fuera de alcance
1.1 Directo a primitivo global (43)
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | prose.css:24 |
[data-prose] |
color |
var(--color-content-primary) |
| 2 | prose.css:25 |
[data-prose] |
font-size |
var(--size-md-font-size) |
| 3 | prose.css:32 |
[data-prose][data-size='sm'] |
font-size |
var(--size-sm-font-size) |
| 4 | prose.css:35 |
[data-prose][data-size='lg'] |
font-size |
var(--size-lg-font-size) |
| 5 | prose.css:58 |
:where([data-prose] h1):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-weight |
var(--font-weight-bold) |
| 6 | prose.css:61 |
:where([data-prose] h1):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
color |
var(--color-content-primary) |
| 7 | prose.css:67 |
:where([data-prose] h2):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-weight |
var(--font-weight-semibold) |
| 8 | prose.css:70 |
:where([data-prose] h2):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
color |
var(--color-content-primary) |
| 9 | prose.css:76 |
:where([data-prose] h3):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-weight |
var(--font-weight-semibold) |
| 10 | prose.css:78 |
:where([data-prose] h3):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
color |
var(--color-content-primary) |
| 11 | prose.css:84 |
:where([data-prose] h4):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-weight |
var(--font-weight-semibold) |
| 12 | prose.css:85 |
:where([data-prose] h4):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
color |
var(--color-content-primary) |
| 13 | prose.css:91 |
:where([data-prose] h5):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-weight |
var(--font-weight-semibold) |
| 14 | prose.css:92 |
:where([data-prose] h5):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
color |
var(--color-content-primary) |
| 15 | prose.css:98 |
:where([data-prose] h6):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-weight |
var(--font-weight-semibold) |
| 16 | prose.css:100 |
:where([data-prose] h6):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
color |
var(--color-content-muted) |
| 17 | prose.css:117 |
:where([data-prose] a):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
color |
var(--color-primary-text) |
| 18 | prose.css:118 |
:where([data-prose] a):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-weight |
var(--font-weight-medium) |
| 19 | prose.css:127 |
:where([data-prose] strong):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-weight |
var(--font-weight-semibold) |
| 20 | prose.css:137 |
:where([data-prose] mark):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
background |
var(--color-risk-track) |
| 21 | prose.css:140 |
:where([data-prose] mark):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
border-radius |
var(--radius-sm) |
| 22 | prose.css:155 |
:where([data-prose] blockquote):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
border-inline-start |
3px solid var(--color-border-strong) |
| 23 | prose.css:156 |
:where([data-prose] blockquote):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
color |
var(--color-content-secondary) |
| 24 | prose.css:170 |
:where([data-prose] ul > li)::marker |
color |
var(--color-content-muted) |
| 25 | prose.css:173 |
:where([data-prose] ol > li)::marker |
color |
var(--color-content-muted) |
| 26 | prose.css:187 |
:where([data-prose] dt):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-weight |
var(--font-weight-semibold) |
| 27 | prose.css:200 |
:where([data-prose] code):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-family |
var(--font-family-mono, monospace) |
| 28 | prose.css:203 |
:where([data-prose] code):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
background |
var(--color-surface-muted) |
| 29 | prose.css:204 |
:where([data-prose] code):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
border-radius |
var(--radius-sm) |
| 30 | prose.css:210 |
:where([data-prose] pre):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
background |
var(--color-surface-muted) |
| 31 | prose.css:211 |
:where([data-prose] pre):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
border-radius |
var(--radius-md) |
| 32 | prose.css:224 |
:where([data-prose] kbd):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-family |
var(--font-family-mono, monospace) |
| 33 | prose.css:227 |
:where([data-prose] kbd):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
background |
var(--color-surface-default) |
| 34 | prose.css:228 |
:where([data-prose] kbd):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
border |
1px solid var(--color-border-default) |
| 35 | prose.css:229 |
:where([data-prose] kbd):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
border-radius |
var(--radius-sm) |
| 36 | prose.css:230 |
:where([data-prose] kbd):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
box-shadow |
0 1px 0 1px var(--color-border-subtle) |
| 37 | prose.css:239 |
:where([data-prose] :is(img, video)):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
border-radius |
var(--radius-md) |
| 38 | prose.css:253 |
:where([data-prose] figcaption):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
color |
var(--color-content-muted) |
| 39 | prose.css:262 |
:where([data-prose] hr):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
border-block-start |
1px solid var(--color-border-default) |
| 40 | prose.css:281 |
:where([data-prose] thead):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
border-block-end |
1px solid var(--color-border-strong) |
| 41 | prose.css:285 |
:where([data-prose] th):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-weight |
var(--font-weight-semibold) |
| 42 | prose.css:292 |
:where([data-prose] td):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
border-block-end |
1px solid var(--color-border-subtle) |
| 43 | prose.css:300 |
:where([data-prose] tfoot):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
border-block-start |
1px solid var(--color-border-strong) |
1.2 A través de un privado (0)
Ninguno.
1.3 Literales (30)
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | prose.css:57 |
:where([data-prose] h1):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-size |
2.25em |
| 2 | prose.css:59 |
:where([data-prose] h1):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
line-height |
1.1 |
| 3 | prose.css:60 |
:where([data-prose] h1):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
letter-spacing |
-0.01em |
| 4 | prose.css:66 |
:where([data-prose] h2):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-size |
1.5em |
| 5 | prose.css:68 |
:where([data-prose] h2):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
line-height |
1.3 |
| 6 | prose.css:69 |
:where([data-prose] h2):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
letter-spacing |
-0.008em |
| 7 | prose.css:75 |
:where([data-prose] h3):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-size |
1.25em |
| 8 | prose.css:77 |
:where([data-prose] h3):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
line-height |
1.4 |
| 9 | prose.css:83 |
:where([data-prose] h4):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-size |
1em |
| 10 | prose.css:90 |
:where([data-prose] h5):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-size |
0.9em |
| 11 | prose.css:97 |
:where([data-prose] h6):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-size |
0.85em |
| 12 | prose.css:99 |
:where([data-prose] h6):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
letter-spacing |
0.02em |
| 13 | prose.css:107 |
:where([data-prose] :is(h1, h2, h3, h4, h5, h6) code):not( :where([data-prose-ignore], [data-prose-ignore] *) ) |
font-size |
0.9em |
| 14 | prose.css:139 |
:where([data-prose] mark):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
padding |
0.05em 0.15em |
| 15 | prose.css:147 |
:where([data-prose] :is(sub, sup)):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-size |
0.75em |
| 16 | prose.css:154 |
:where([data-prose] blockquote):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
padding-inline-start |
1em |
| 17 | prose.css:164 |
:where([data-prose] :is(ul, ol)):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
padding-inline-start |
1.6em |
| 18 | prose.css:201 |
:where([data-prose] code):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-size |
0.875em |
| 19 | prose.css:202 |
:where([data-prose] code):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
padding |
0.15em 0.35em |
| 20 | prose.css:209 |
:where([data-prose] pre):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
padding |
1em 1.15em |
| 21 | prose.css:213 |
:where([data-prose] pre):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-size |
0.875em |
| 22 | prose.css:214 |
:where([data-prose] pre):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
line-height |
1.6 |
| 23 | prose.css:225 |
:where([data-prose] kbd):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-size |
0.8em |
| 24 | prose.css:226 |
:where([data-prose] kbd):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
padding |
0.15em 0.4em |
| 25 | prose.css:252 |
:where([data-prose] figcaption):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-size |
0.85em |
| 26 | prose.css:272 |
:where([data-prose] table):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
inline-size |
max-content |
| 27 | prose.css:277 |
:where([data-prose] table):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
font-size |
0.9em |
| 28 | prose.css:278 |
:where([data-prose] table):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
line-height |
1.5 |
| 29 | prose.css:284 |
:where([data-prose] th):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
padding |
0.5em 0.75em |
| 30 | prose.css:290 |
:where([data-prose] td):not(:where([data-prose-ignore], [data-prose-ignore] *)) |
padding |
0.5em 0.75em |
2. Sistema transversal (0) — informativo, fuera del ratio
Un tema los alcanza a nivel de sistema, por diseño (recipe-contract §2).
Ninguno.
3. Privados de la receta — ¿de dónde sale su valor?
La receta no declara privados propios en su CSS.
4. Propuesta de corrección
- Tiene eje
size: los tokens dimensionales van por talla ({part}-{eje}-{k}) apuntando al bundle--size-{k}-*, nunca al primitivo crudo (theming §5; el guardrecipe-css-contractprohíbe el primitivo).
4.1 Tokens a declarar en lib/recipes/base.ts (13)
Valor verbatim del CSS de hoy: el default no se mueve, sólo cambia quién
puede moverlo. Nombres derivados de recipe-contract §1 (ejes lógicos, talla
al final) y theming §6.7 (slots de color, modificador delante). Un token con
DOS valores distintos es una colisión de nombre: son dos knobs, o el nombre
no distingue lo que debería — se marca ⚠.
token (--prose-…) |
scope TSC | valor propuesto | usos |
|---|---|---|---|
font-size |
root |
⚠ var(--size-md-font-size) / 2.25em / 1.5em / 1.25em / 1em / 0.9em / 0.85em / 0.75em / 0.875em / 0.8em |
14 |
fg |
root |
⚠ var(--color-content-primary) / var(--color-content-muted) / var(--color-primary-text) / var(--color-content-secondary) |
12 |
font-weight |
root |
⚠ var(--font-weight-bold) / var(--font-weight-semibold) / var(--font-weight-medium) |
10 |
line-height (ya existe) |
root |
⚠ 1.1 / 1.3 / 1.4 / 1.6 / 1.5 |
5 |
radius |
root |
⚠ var(--radius-sm) / var(--radius-md) |
5 |
bg |
root |
⚠ var(--color-risk-track) / var(--color-surface-muted) / var(--color-surface-default) |
4 |
letter-spacing |
root |
⚠ -0.01em / -0.008em / 0.02em |
3 |
padding-inline |
root |
⚠ 1em / 1.6em |
2 |
font-family |
root |
var(--font-family-mono, monospace) |
2 |
font-size-sm |
root |
var(--size-sm-font-size) |
1 |
font-size-lg |
root |
var(--size-lg-font-size) |
1 |
shadow |
root |
0 1px 0 1px var(--color-border-subtle) |
1 |
width |
root |
max-content |
1 |
4.2 Sin nombre mecánico (12)
- ⚠ decisión:
paddinges shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4) — 6:padding. - ⚠ decisión:
border-inline-startes shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4) — 1:border-inline-start. - ⚠ decisión:
borderes shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4) — 1:border. - ⚠ decisión:
border-block-startes shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4) — 2:border-block-start. - ⚠ decisión:
border-block-endes shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4) — 2:border-block-end.
4.4 Lo que hay que comprobar a mano (PLAN-theming §1.3 · §7.4)
- Privado que no deriva de un público — §3 lo marca; el privado debe leer el público o desaparecer.
- Velo o acento en el nodo equivocado (
archetype: 'item'en un envoltorio, unbackgrounden shorthand que mata la capa de estado) — se mide desde el píxel hacia arriba. - Doble animación al mover un sello a una superficie con animación propia — registro de
animationstart/animationend. - Diff de computed = 0 en reposo · hover · abierto · disabled · foco, por talla, antes y después.
- Centinela por token nuevo: valor imposible en el root → el nodo lo sigue. Si no, el token miente.
5. Veredicto
(pendiente — lo escribe el autor; se conserva al regenerar)