@eduardoalvarez/arrecife 0.5.1 → 0.7.0

package/dist/tokens/index.cjs

@@ -3,144 +3,175 @@
 // src/tokens/tokens.ts
 var dark = {
   background: "#091319",
-  //          abismo · fondo de página
+  //          abyss · page background
   surface: "#10202B",
-  //             fosa · tarjetas y paneles
+  //             trench · cards and panels
   surfaceRaised: "#17303E",
-  //       corriente · menús, tabs activos
+  //       current · menus, active tabs
   border: "#22414F",
-  //              bordes de control
+  //              control borders
   hairline: "#1E3441",
-  //            divisiones sutiles
+  //            subtle dividers
   hairlineHover: "#2C4D5D",
-  //       hairline en hover de tarjeta
+  //       hairline on card hover
   textPrimary: "#EDF4F3",
-  //         espuma            16.84:1
+  //         foam              16.84:1
   textSecondary: "#A7BCC4",
-  //       bruma              9.50:1
+  //       haze               9.50:1
   textMuted: "#71919C",
-  //           plancton           5.57:1  nunca bajo 13px
+  //           plankton           5.57:1  never under 13px
   accent: "#35D6C0",
-  //              bioluz            10.31:1  interactivo
+  //              biolume           10.31:1  interactive
   accentHover: "#5FE3D1",
   accentOn: "#06171A",
-  //            tinta sobre bioluz
+  //            ink over biolume
   warm: "#F2A65A",
-  //                arena              9.28:1  humano y conversión
+  //                sand               9.28:1  human and conversion
   warmHover: "#F7BB7D",
   warmOn: "#2A1605",
-  //              tinta sobre arena
+  //              ink over sand
   success: "#4FB477",
   warning: "#E8A33D",
-  error: "#E15757"
-  //                                 4.51:1 sobre surface
+  error: "#E15757",
+  //                                 4.51:1 over surface
+  /**
+   * The destructive fill. It is NOT `error`, and the difference is the role.
+   *
+   * `error` is a TEXT color: it has to read against a dark surface, so it sits
+   * mid-red. `danger` is a FILL: what has to read is the ink ON TOP of it, so it
+   * goes lighter. Same reasoning as `accent` and `accentOn` — one is measured
+   * against the page, the other against what it carries.
+   *
+   * Measured: ink 6.53:1 over the fill and 7.92:1 over the hover; the fill
+   * itself 6.71:1 over abyss, 5.94 over surface and 4.91 over surfaceRaised, so
+   * the outline variant reads as text on all three.
+   */
+  danger: "#F4736B",
+  dangerHover: "#F78D86",
+  dangerOn: "#2B0A08"
+  //             ink over danger    6.53:1
 };
 var light = {
   background: "#F6F2EA",
-  //          papel
+  //          paper
   surface: "#FFFFFF",
   surfaceRaised: "#EFE9DE",
   border: "#E6DFD2",
   hairline: "#EBE6DC",
   hairlineHover: "#D3C8B2",
-  //       hairline en hover de tarjeta
+  //       hairline on card hover
   textPrimary: "#0B1524",
   //                           16.40:1
   textSecondary: "#3D4B58",
   textMuted: "#626A75",
-  //                             4.53:1 sobre surfaceRaised
+  //                             4.53:1 over surfaceRaised
   accent: "#0D7C6F",
-  //              bioluz oscura      4.55:1
+  //              dark biolume       4.55:1
   accentHover: "#0C7466",
   accentOn: "#FFFFFF",
   warm: "#A65B27",
-  //                arena oscura       4.54:1
+  //                dark sand          4.54:1
   warmHover: "#96511F",
   warmOn: "#FFF7EE",
   success: "#0F6B52",
   warning: "#8D6111",
-  //                               4.51:1 sobre surfaceRaised
-  error: "#C0392B"
+  //                               4.51:1 over surfaceRaised
+  error: "#C0392B",
+  /**
+   * In light mode `danger` and `error` land on the same hex, and that is not an
+   * oversight: over paper a red dark enough to carry white ink is also the red
+   * that reads as text. In dark they part company because the fill has to be
+   * lighter than the text color, not darker.
+   *
+   * Measured: ink 5.11:1 over the fill and 6.61:1 over the hover; the fill
+   * itself 4.87:1 over paper, 5.44 over surface and 4.50 over surfaceRaised —
+   * the last one is exactly on the AA line, which is where every light semantic
+   * in this palette sits.
+   */
+  danger: "#C0392B",
+  dangerHover: "#A32F22",
+  dangerOn: "#FFF6F4"
+  //                              5.11:1 over danger
 };
 var colors = { dark, light };
 var brand = {
-  /** Cuerpo de la mascota. 4.22:1 → SOLO relleno, NUNCA texto. */
+  /** The mascot's body. 4.22:1 → FILL ONLY, NEVER text. */
   body: "#3E7CB1",
-  /** Patrón de manchas. */
+  /** Spot pattern. */
   spots: "#C2D7E7",
-  /** Casco · contorno y fondo de bloques de código. */
+  /** Hull · outline, and the background of code blocks. */
   hull: "#0B1524"
 };
 var fonts = {
-  /** SOLO titulares y números grandes. Nunca cuerpo. */
+  /** Headlines and large numbers ONLY. Never body copy. */
   display: '"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif',
-  /** Cuerpo e interfaz. */
+  /** Body and interface. */
   sans: '"Geist", ui-sans-serif, system-ui, sans-serif',
-  /** Código, rutas, etiquetas, metadatos, firma CLI. */
+  /** Code, paths, labels, metadata, the CLI signature. */
   mono: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace'
 };
 var typeScale = {
   display: { family: "display", size: 76, lineHeight: 0.96, weight: 800, tracking: "-0.035em" },
-  /** Métricas grandes. Números, no prosa: interlineado 1 y sin descendentes. */
+  /** Large metrics. Numbers, not prose: line height 1 and no descenders. */
   stat: { family: "display", size: 46, lineHeight: 1, weight: 800, tracking: "-0.035em" },
   h1: { family: "display", size: 44, lineHeight: 1.05, weight: 700, tracking: "-0.03em" },
   h2: { family: "display", size: 30, lineHeight: 1.1, weight: 600, tracking: "-0.02em" },
   h3: { family: "display", size: 25, lineHeight: 1.15, weight: 600, tracking: "-0.02em" },
   body: { family: "sans", size: 18, lineHeight: 1.75, weight: 400 },
   /**
-   * 17px. El botón grande y la bajada de las páginas internas.
+   * 17px. The large button, and the deck on interior pages.
    *
-   * Entra como escalón propio porque el documento lo usa DOS veces y en piezas
-   * distintas: «lg 15px 30px r12» con texto de 17, y «h1 44/700 · bajada 17px ·
-   * párrafo de contexto 15px». Un solo uso no habría justificado partir la
-   * distancia entre `ui` (15) y `body` (18); dos sí.
+   * It earns its own step because the identity document uses it TWICE, in two
+   * different pieces: «lg 15/30 r12» with 17px text, and «h1 44/700 · deck 17px
+   * · context paragraph 15px». One use would not have justified splitting the
+   * gap between `ui` (15) and `body` (18); two did.
    */
   lead: { family: "sans", size: 17, lineHeight: 1.5, weight: 400 },
   ui: { family: "sans", size: 15, lineHeight: 1.6, weight: 400 },
   label: { family: "sans", size: 13, lineHeight: 1.5, weight: 500 },
   /**
-   * La escala de las etiquetas de estado: sans 12.5/500, cuadrada.
+   * The status-badge scale: sans 12.5/500, squared off.
    *
-   * Es medio píxel por debajo de `label`, y esta vez el medio píxel sí importa:
-   * una etiqueta de estado va dentro de una tabla o al lado de un título, y a 13
-   * competía con el texto que acompaña. El documento la da en 12.5 y se ve.
+   * That is half a pixel below `label`, and this time the half pixel matters: a
+   * status badge sits inside a table or next to a title, and at 13 it competed
+   * with the text it accompanies. The document specifies 12.5 and it shows.
    */
   tag: { family: "sans", size: 12.5, lineHeight: 1.4, weight: 500 },
   /**
-   * La escala de categoría y métrica: mono 11.5.
+   * The category and metric scale: mono 11.5.
    *
-   * Rompe el suelo de `limits.minScreenPx`, y es a propósito. Ese suelo protege
-   * al TEXTO —lo que se lee en una frase—, y una píldora de una palabra no es
-   * texto corrido: es una marca. El contraste sigue medido y pasa AA (plancton
-   * 5.57:1 sobre abismo), que es la parte que no se negocia.
+   * It breaks the floor set by `limits.minScreenPx`, deliberately. That floor
+   * protects TEXT — what you read in a sentence — and a one-word pill is not
+   * running text: it is a mark. Contrast is still measured and still passes AA
+   * (plankton 5.57:1 over abyss), which is the part that is not negotiable.
    *
-   * A 13 las tres familias de etiqueta salían del tamaño de un botón pequeño y
-   * pesaban más que el título que acompañan. Ver `docs/decisiones.md`.
+   * At 13 the three badge families grew past the size of a small button and
+   * outweighed the title they accompany. See `docs/decisions.md`.
    */
   chip: { family: "mono", size: 11.5, lineHeight: 1.4, weight: 400 },
   /**
-   * Mono SIN transformar: fechas, rutas, versiones, nombres de archivo, la firma
-   * del footer y las métricas de etiqueta. Es la mayoría del mono del sistema.
+   * Mono with NO transform: dates, paths, versions, file names, the footer
+   * signature and metric labels. It is most of the mono in the system.
    *
-   * Existe porque `eyebrow` lleva `uppercase` de fábrica y no es una preferencia
-   * que se pueda apagar: es la escala del eyebrow. Un `18 ago 2026` en versalitas
-   * o un `pose-laptop-coffee.png` en mayúsculas están mal, y sin este escalón la
-   * única salida era un `normal-case` en cada sitio de uso.
+   * It exists because `eyebrow` ships `uppercase` and that is not a preference
+   * you can switch off: it IS the eyebrow scale. An `18 Aug 2026` in small caps
+   * or a `pose-laptop-coffee.png` in all caps are wrong, and without this step
+   * the only way out was a `normal-case` at every call site.
    *
-   * El documento dice 12.5. Son 13 por la misma razón por la que `textMuted` se
-   * corrigió: `limits.minScreenPx` es 13 y plancton «nunca bajo 13px». Esta
-   * escala es justo donde se escriben las metas en muted, así que ponerla en
-   * 12.5 habría dejado ilegible su uso más común por medio píxel.
+   * The document says 12.5. This is 13 for the same reason `textMuted` was
+   * corrected: `limits.minScreenPx` is 13 and plankton is «never under 13px».
+   * This scale is exactly where muted metadata gets written, so putting it at
+   * 12.5 would have made its most common use illegible by half a pixel.
    */
   meta: { family: "mono", size: 13, lineHeight: 1.6, weight: 400 },
   eyebrow: { family: "mono", size: 12, tracking: "0.12em", transform: "uppercase" }
 };
 var limits = {
-  /** Mínimo absoluto en pantalla. */
+  /** Absolute minimum on screen. */
   minScreenPx: 13,
-  /** Mínimo absoluto impreso. */
+  /** Absolute minimum in print. */
   minPrintPt: 12,
-  /** Medida máxima de cuerpo. */
+  /** Maximum body measure. */
   measure: "68ch"
 };
 var radius = {
@@ -154,8 +185,24 @@ var control = {
   sm: 14,
   md: 22,
   lg: 30,
-  /** Botón de icono: cuadrado, sin texto. */
-  icon: 42
+  /** Icon button: square, no text. */
+  icon: 42,
+  /**
+   * The dense icon button, 32×32.
+   *
+   * 42 is the right measure for a control you hit with a thumb, and the four
+   * reading sites are where that fits. `cursos` is the odd one out: it is the
+   * only admin app of the set, with three actions per table row, and at 42 the
+   * row grows with them — the original used 24 and 28.
+   *
+   * It is 32 and not 28 because 32 is `sm`'s height. A dense icon button lines
+   * up with a small text button, so a toolbar mixing the two stays on one
+   * baseline; 28 would have been a fifth height that matches nothing.
+   *
+   * It does not replace `icon`. A page's primary action stays at 42; this is for
+   * a row of a table. See `docs/decisions.md` § 22.
+   */
+  iconSm: 32
 };
 var spacing = {
   stepXs: 8,
@@ -166,43 +213,67 @@ var spacing = {
   section: 96
 };
 var size = {
-  /** Alto de la barra de navegación. */
+  /** Navigation bar height. */
   nav: 64,
-  /** Ancho de columna de lectura. */
+  /**
+   * The bar when it shares the screen with a sidebar.
+   *
+   * It is not «a smaller bar because it looks better». At 64 the header of an
+   * app shell competes with the rail beside it for the same corner, and the two
+   * together eat the top of the content area. 56 is what `cursos` had arrived at
+   * on its own, and it is the same reasoning as `control.iconSm`: the one admin
+   * app of the five is denser than the four reading sites. See
+   * `docs/decisions.md` § 30.
+   */
+  navCompact: 56,
+  /**
+   * The admin sidebar, and the rail it collapses to.
+   *
+   * They are tokens and not the consumer's `w-*` because a collapsible sidebar
+   * has to know BOTH: the layout beside it reserves one of the two, and two
+   * numbers written by hand in two files drift the first time one of them moves.
+   * A sidebar that never collapses is still just a box the layout sizes.
+   *
+   * 56 is the rail: `navCompact`'s height, so a panel's bar and its rail meet in
+   * a square corner instead of a step.
+   */
+  sidebar: 256,
+  sidebarRail: 56,
+  /** Reading column width. */
   content: 760,
-  /** Ancho máximo de página. */
+  /** Maximum page width. */
   wide: 1180
 };
-var sintaxis = {
-  /** El casco. Es el fondo del bloque en los dos modos. */
-  fondo: brand.hull,
-  /** Identificadores, funciones, tipos, variables. */
-  identificador: dark.textPrimary,
-  /** Cadenas, números, booleanos, null. */
+var syntax = {
+  /** The hull. It is the block background in both modes. */
+  background: brand.hull,
+  /** Identifiers, functions, types, variables. */
+  identifier: dark.textPrimary,
+  /** Strings, numbers, booleans, null. */
   literal: dark.accent,
-  /** Palabras clave, control de flujo, `import`, `this`. */
-  palabraClave: dark.warm,
-  /** Comentarios y puntuación. */
-  comentario: dark.textMuted,
+  /** Keywords, control flow, `import`, `this`. */
+  keyword: dark.warm,
+  /** Comments and punctuation. */
+  comment: dark.textMuted,
   /** `markup.deleted`, `invalid`. */
-  invalido: dark.error
+  invalid: dark.error
 };
 var series = {
   dark: [dark.accent, dark.warm, brand.body, dark.textMuted],
   light: [light.accent, light.warm, brand.body, light.textMuted]
 };
-var profundo = "#0D2129";
+var deep = "#0D2129";
 var gradient = {
   dark: {
-    hero: `linear-gradient(160deg, ${dark.background} 60%, ${profundo} 100%)`,
-    seccion: `linear-gradient(150deg, ${dark.surface} 0%, ${profundo} 100%)`,
-    /** El de la plantilla OG de artículo. 145°, del documento. */
-    og: `linear-gradient(145deg, ${dark.background} 55%, ${profundo} 100%)`
+    hero: `linear-gradient(160deg, ${dark.background} 60%, ${deep} 100%)`,
+    section: `linear-gradient(150deg, ${dark.surface} 0%, ${deep} 100%)`,
+    /** The one used by the article OG template. 145°, from the document. */
+    og: `linear-gradient(145deg, ${dark.background} 55%, ${deep} 100%)`
   },
   light: {
-    hero: `linear-gradient(160deg, ${light.background} 60%, ${light.surfaceRaised} 100%)`,
-    seccion: `linear-gradient(150deg, ${light.surface} 0%, ${light.surfaceRaised} 100%)`,
-    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surfaceRaised} 100%)`
+    hero: `linear-gradient(160deg, ${light.background} 60%, ${light.surface} 100%)`,
+    section: `linear-gradient(150deg, ${light.surface} 0%, ${light.background} 100%)`,
+    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surface} 100%)`
   }
 };
 var shadow = {
@@ -215,16 +286,16 @@ var motion = {
 };
 var tagline = {
   /** Hero. */
-  largo: "Ayudo a equipos de ingenier\xEDa a escalar con criterio",
-  /** Header, una línea. */
-  corto: "Ayudo a equipos a escalar con criterio",
+  long: "Ayudo a equipos de ingenier\xEDa a escalar con criterio",
+  /** Header, one line. */
+  short: "Ayudo a equipos a escalar con criterio",
   /** LinkedIn. */
   en: "Helping engineering teams scale with judgment"
 };
 var naming = {
   wordmark: "Eduardo \xC1lvarez",
   mascot: "Tiburonc\xEDn",
-  /** El dominio, para la firma CLI del footer: `$ cd ~/eduardoalvarez.dev/2026`. */
+  /** The domain, for the footer CLI signature: `$ cd ~/eduardoalvarez.dev/2026`. */
   domain: "eduardoalvarez.dev"
 };
 
@@ -240,7 +311,7 @@ var tokens = {
   spacing,
   size,
   gradient,
-  sintaxis,
+  syntax,
   series,
   shadow,
   motion,
@@ -261,9 +332,9 @@ exports.naming = naming;
 exports.radius = radius;
 exports.series = series;
 exports.shadow = shadow;
-exports.sintaxis = sintaxis;
 exports.size = size;
 exports.spacing = spacing;
+exports.syntax = syntax;
 exports.tagline = tagline;
 exports.tokens = tokens;
 exports.typeScale = typeScale;