@eduardoalvarez/arrecife 0.1.0

package/dist/tokens/index.cjs

@@ -0,0 +1,263 @@
+'use strict';
+
+// src/tokens/tokens.ts
+var dark = {
+  background: "#091319",
+  //          abismo · fondo de página
+  surface: "#10202B",
+  //             fosa · tarjetas y paneles
+  surfaceRaised: "#17303E",
+  //       corriente · menús, tabs activos
+  border: "#22414F",
+  //              bordes de control
+  hairline: "#1E3441",
+  //            divisiones sutiles
+  hairlineHover: "#2C4D5D",
+  //       hairline en hover de tarjeta
+  textPrimary: "#EDF4F3",
+  //         espuma            16.84:1
+  textSecondary: "#A7BCC4",
+  //       bruma              9.50:1
+  textMuted: "#71919C",
+  //           plancton           5.57:1  nunca bajo 13px
+  accent: "#35D6C0",
+  //              bioluz            10.31:1  interactivo
+  accentHover: "#5FE3D1",
+  accentOn: "#06171A",
+  //            tinta sobre bioluz
+  warm: "#F2A65A",
+  //                arena              9.28:1  humano y conversión
+  warmHover: "#F7BB7D",
+  warmOn: "#2A1605",
+  //              tinta sobre arena
+  success: "#4FB477",
+  warning: "#E8A33D",
+  error: "#E15757"
+  //                                 4.51:1 sobre surface
+};
+var light = {
+  background: "#F6F2EA",
+  //          papel
+  surface: "#FFFFFF",
+  surfaceRaised: "#EFE9DE",
+  border: "#E6DFD2",
+  hairline: "#EBE6DC",
+  hairlineHover: "#D3C8B2",
+  //       hairline en hover de tarjeta
+  textPrimary: "#0B1524",
+  //                           16.40:1
+  textSecondary: "#3D4B58",
+  textMuted: "#626A75",
+  //                             4.53:1 sobre surfaceRaised
+  accent: "#0D7C6F",
+  //              bioluz oscura      4.55:1
+  accentHover: "#0C7466",
+  accentOn: "#FFFFFF",
+  warm: "#A65B27",
+  //                arena oscura       4.54:1
+  warmHover: "#96511F",
+  warmOn: "#FFF7EE",
+  success: "#0F6B52",
+  warning: "#8D6111",
+  //                               4.51:1 sobre surfaceRaised
+  error: "#C0392B"
+};
+var colors = { dark, light };
+var brand = {
+  /** Cuerpo de la mascota. 4.22:1 → SOLO relleno, NUNCA texto. */
+  body: "#3E7CB1",
+  /** Patrón de manchas. */
+  spots: "#C2D7E7",
+  /** Casco · contorno y fondo de bloques de código. */
+  hull: "#0B1524"
+};
+var fonts = {
+  /** SOLO titulares y números grandes. Nunca cuerpo. */
+  display: '"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif',
+  /** Cuerpo e interfaz. */
+  sans: '"Geist", ui-sans-serif, system-ui, sans-serif',
+  /** Código, rutas, etiquetas, metadatos, firma CLI. */
+  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. */
+  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.
+   *
+   * 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í.
+   */
+  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.
+   *
+   * 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.
+   */
+  tag: { family: "sans", size: 12.5, lineHeight: 1.4, weight: 500 },
+  /**
+   * La escala de categoría y métrica: 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.
+   *
+   * 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`.
+   */
+  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.
+   *
+   * 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.
+   *
+   * 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.
+   */
+  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. */
+  minScreenPx: 13,
+  /** Mínimo absoluto impreso. */
+  minPrintPt: 12,
+  /** Medida máxima de cuerpo. */
+  measure: "68ch"
+};
+var radius = {
+  chip: 6,
+  control: 10,
+  card: 14,
+  panel: 16,
+  pill: 999
+};
+var control = {
+  sm: 14,
+  md: 22,
+  lg: 30,
+  /** Botón de icono: cuadrado, sin texto. */
+  icon: 42
+};
+var spacing = {
+  xs: 8,
+  sm: 12,
+  md: 16,
+  lg: 26,
+  xl: 40,
+  section: 96
+};
+var size = {
+  /** Alto de la barra de navegación. */
+  nav: 64,
+  /** Ancho de columna de lectura. */
+  content: 760,
+  /** Ancho máximo de página. */
+  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. */
+  literal: dark.accent,
+  /** Palabras clave, control de flujo, `import`, `this`. */
+  palabraClave: dark.warm,
+  /** Comentarios y puntuación. */
+  comentario: dark.textMuted,
+  /** `markup.deleted`, `invalid`. */
+  invalido: dark.error
+};
+var profundo = "#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%)`
+  },
+  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%)`
+  }
+};
+var shadow = {
+  standard: "0 1px 2px rgba(0, 0, 0, 0.35)"
+};
+var motion = {
+  duration: "150ms",
+  easing: "ease-out",
+  properties: "color, background-color, border-color, fill, stroke"
+};
+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",
+  /** 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`. */
+  domain: "eduardoalvarez.dev"
+};
+
+// src/tokens/index.ts
+var tokens = {
+  colors,
+  brand,
+  fonts,
+  typeScale,
+  limits,
+  radius,
+  control,
+  spacing,
+  size,
+  gradient,
+  sintaxis,
+  shadow,
+  motion,
+  tagline,
+  naming
+};
+
+exports.brand = brand;
+exports.colors = colors;
+exports.control = control;
+exports.dark = dark;
+exports.fonts = fonts;
+exports.gradient = gradient;
+exports.light = light;
+exports.limits = limits;
+exports.motion = motion;
+exports.naming = naming;
+exports.radius = radius;
+exports.shadow = shadow;
+exports.sintaxis = sintaxis;
+exports.size = size;
+exports.spacing = spacing;
+exports.tagline = tagline;
+exports.tokens = tokens;
+exports.typeScale = typeScale;