@eduardoalvarez/arrecife 0.12.2 → 0.12.4

package/dist/tokens/index.d.ts

@@ -446,7 +446,7 @@ declare const size: {
  *   invalid     error      4.97:1
  *
  * `brand.body` (#3E7CB1) is NOT here: the system restricts it to fill, never
- * text, and it measures 4.2:1 in this context.
+ * text, and it measures 4.12:1 in this context.
  *
  * Numeric and boolean literals ride with strings in biolume. The document does
  * not assign them, and grouping them with strings — all three are literals — is
@@ -497,14 +497,24 @@ declare const series: {
 declare const gradient: {
     readonly dark: {
         readonly hero: "linear-gradient(160deg, #091319 60%, #0D2129 100%)";
-        readonly section: "linear-gradient(150deg, #10202B 0%, #0D2129 100%)";
-        /** The one used by the article OG template. 145°, from the document. */
-        readonly og: "linear-gradient(145deg, #091319 55%, #0D2129 100%)";
+        /**
+         * Flat, on purpose. The document drew it #10202B → #0D2129, a 0.11 L* sweep
+         * nobody can see; the author chose a flat fosa over inventing a second stop
+         * (§ 9). It stays a `linear-gradient` so `gradient-section`, which sets
+         * `background-image`, keeps working unchanged in every project.
+         */
+        readonly section: "linear-gradient(#10202B, #10202B)";
+        /** The article OG template. 145°, from the document. */
+        readonly og: "linear-gradient(145deg, #091319 58%, #0E2A30 100%)";
+        /** The talk OG template. 150°, from the document. */
+        readonly ogTalk: "linear-gradient(150deg, #091319 55%, #0E2A30 100%)";
     };
     readonly light: {
         readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #FFFFFF 100%)";
         readonly section: "linear-gradient(150deg, #FFFFFF 0%, #F6F2EA 100%)";
         readonly og: "linear-gradient(145deg, #F6F2EA 55%, #FFFFFF 100%)";
+        /** No light talk card exists; the key mirrors dark so both modes carry it. */
+        readonly ogTalk: "linear-gradient(150deg, #F6F2EA 55%, #FFFFFF 100%)";
     };
 };
 /** A single level. There is no elevation scale. */
@@ -522,12 +532,12 @@ declare const motion: {
     readonly properties: "color, background-color, border-color, fill, stroke";
 };
 declare const tagline: {
-    /** Hero. */
-    readonly long: "Ayudo a equipos de ingeniería a escalar con criterio";
-    /** Header, one line. */
-    readonly short: "Ayudo a equipos a escalar con criterio";
-    /** LinkedIn. */
-    readonly en: "Helping engineering teams scale with judgment";
+    /** Hero. The bajada approved in § 65. */
+    readonly long: "Enseño a construir software con IA sin dejar de entender lo que hacemos.";
+    /** Header, one line. Role and method, as in § 65. */
+    readonly short: "Technical Lead · Spec-Driven Development";
+    /** English surfaces. */
+    readonly en: "I teach how to build software with AI without losing sight of what we build.";
 };
 /**
  * The wordmark always reads «Eduardo Álvarez». The mascot is called Tiburoncín
@@ -757,13 +767,15 @@ declare const tokens: {
     readonly gradient: {
         readonly dark: {
             readonly hero: "linear-gradient(160deg, #091319 60%, #0D2129 100%)";
-            readonly section: "linear-gradient(150deg, #10202B 0%, #0D2129 100%)";
-            readonly og: "linear-gradient(145deg, #091319 55%, #0D2129 100%)";
+            readonly section: "linear-gradient(#10202B, #10202B)";
+            readonly og: "linear-gradient(145deg, #091319 58%, #0E2A30 100%)";
+            readonly ogTalk: "linear-gradient(150deg, #091319 55%, #0E2A30 100%)";
         };
         readonly light: {
             readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #FFFFFF 100%)";
             readonly section: "linear-gradient(150deg, #FFFFFF 0%, #F6F2EA 100%)";
             readonly og: "linear-gradient(145deg, #F6F2EA 55%, #FFFFFF 100%)";
+            readonly ogTalk: "linear-gradient(150deg, #F6F2EA 55%, #FFFFFF 100%)";
         };
     };
     readonly syntax: {
@@ -787,9 +799,9 @@ declare const tokens: {
         readonly properties: "color, background-color, border-color, fill, stroke";
     };
     readonly tagline: {
-        readonly long: "Ayudo a equipos de ingeniería a escalar con criterio";
-        readonly short: "Ayudo a equipos a escalar con criterio";
-        readonly en: "Helping engineering teams scale with judgment";
+        readonly long: "Enseño a construir software con IA sin dejar de entender lo que hacemos.";
+        readonly short: "Technical Lead · Spec-Driven Development";
+        readonly en: "I teach how to build software with AI without losing sight of what we build.";
     };
     readonly naming: {
         readonly wordmark: "Eduardo Álvarez";

package/dist/tokens/index.js

@@ -1,2 +1,2 @@
-export { tokens } from '../chunk-6QJQ6K7J.js';
-export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, typeScale } from '../chunk-5YWGOFDX.js';
+export { tokens } from '../chunk-QE7NGR7I.js';
+export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, typeScale } from '../chunk-EYBN76H6.js';

package/dist/tokens/theme.css

@@ -154,8 +154,9 @@
 
   /* --- gradients · dark mode (default) ----------------------------------- */
   --gradient-hero: linear-gradient(160deg, #091319 60%, #0D2129 100%);
-  --gradient-section: linear-gradient(150deg, #10202B 0%, #0D2129 100%);
-  --gradient-og: linear-gradient(145deg, #091319 55%, #0D2129 100%);
+  --gradient-section: linear-gradient(#10202B, #10202B);
+  --gradient-og: linear-gradient(145deg, #091319 58%, #0E2A30 100%);
+  --gradient-og-talk: linear-gradient(150deg, #091319 55%, #0E2A30 100%);
 }
 
 /* --- color per mode, nestable ----------------------------------------------
@@ -192,8 +193,9 @@
   --color-series-4: #71919C;
 
   --gradient-hero: linear-gradient(160deg, #091319 60%, #0D2129 100%);
-  --gradient-section: linear-gradient(150deg, #10202B 0%, #0D2129 100%);
-  --gradient-og: linear-gradient(145deg, #091319 55%, #0D2129 100%);
+  --gradient-section: linear-gradient(#10202B, #10202B);
+  --gradient-og: linear-gradient(145deg, #091319 58%, #0E2A30 100%);
+  --gradient-og-talk: linear-gradient(150deg, #091319 55%, #0E2A30 100%);
 }
 
 [data-theme='light'] {
@@ -227,6 +229,7 @@
   --gradient-hero: linear-gradient(160deg, #F6F2EA 60%, #FFFFFF 100%);
   --gradient-section: linear-gradient(150deg, #FFFFFF 0%, #F6F2EA 100%);
   --gradient-og: linear-gradient(145deg, #F6F2EA 55%, #FFFFFF 100%);
+  --gradient-og-talk: linear-gradient(150deg, #F6F2EA 55%, #FFFFFF 100%);
 }
 
 /* --- the system's two gradients, as utilities -------------------------------

package/llms.txt

@@ -685,7 +685,7 @@ import { Text, Button, Badge, cn } from '@eduardoalvarez/arrecife';
 import type { TextProps } from '@eduardoalvarez/arrecife';
 
 <Text variant="eyebrow" tone="muted">charlas</Text>
-<Text as="h2" variant="h1">Escalar con criterio</Text>
+<Text as="h2" variant="h1">Entender antes de construir</Text>
 <Text variant="body">Clamps itself to 68ch.</Text>
 <Text variant="ui" measure={false}>No clamp, for a narrow cell.</Text>
 ```
@@ -1071,6 +1071,8 @@ Source: `src/primitives/pagination.tsx`
 - No own props: it passes through those of the element or primitive it wraps.
 
 **PaginationLink**
+Mono, bordered, and the current page in solid biolume, as the document draws it: «paginación mono, página actual en bioluz sólido». The page is where you are, so it is the one control that carries the accent fill.
+
 - Extends: `ComponentPropsWithoutRef<'a'>`
 
 | prop | type | req. | default | what it does |
@@ -1312,6 +1314,8 @@ Mount it ONCE, as high in the tree as possible. Two mounted `Toaster`s paint eve
 Source: `src/primitives/tooltip.tsx`
 
 **TooltipContent**
+Inverted on purpose: the document draws it «espuma sobre oscuro, texto casco 13px/500 — se invierte a propósito para que destaque». `bg-text-primary` with `text-background` is that inversion in both modes: foam on the abyss page in dark, ink on paper in light. It is the one layer that does not sit on a surface token, which is exactly what makes it read as a layer.
+
 - No own props: it passes through those of the element or primitive it wraps.
 
 **TooltipProvider**
@@ -1394,7 +1398,7 @@ The byline at the foot of the article: 52px avatar, 15/500 name and the role in
 
 Source: `src/components/blockquote/index.tsx`
 
-The side bar is `accent`, the interactive color, because a quotation is somebody else's voice entering the text. It carries no decorative quote marks: the system's glyphs are SVG, and an ornamental quote adds nothing the border and the indent do not already say.
+The side bar is `warm`, 3px, and the text is italic, as the document draws it: «cita con borde arena 3px, cursiva, sin fondo». Sand is the human accent — quotes, categories, conversion — and biolume is the interactive one; a quote in biolume read as a link that could not be clicked. It carries no decorative quote marks: the border and the italic already say it is somebody's voice.
 
 - Extends: `Omit<ComponentPropsWithoutRef<'blockquote'>, 'cite'>`
 
@@ -1575,7 +1579,7 @@ Source: `src/components/newsletter-form/index.tsx`
 | `description` | `ReactNode` |  |  |  |
 | `disclaimer` | `ReactNode` |  |  | The small print. It is the «sin spam», which is why it accepts a face. |
 | `errorMessage` | `ReactNode` |  | `No se pudo suscribir ese correo. Revísalo y vuelve a intentar.` |  |
-| `expression` | `"annoyed" \| "confused" \| "hearts" \| "laughing" \| "shades" \| "waiting" \| "wink"` |  |  |  |
+| `expression` | `"annoyed" \| "confused" \| "hearts" \| "laughing" \| "shades" \| "waiting" \| "wink"` |  |  | The face beside the disclaimer. It is dropped when `aside` is set: the manual allows one mascot per piece («Dos mascotas en la misma pieza. Compiten entre sí y ninguna gana»), and the aside is the illustration. |
 | `fieldErrors` | `{ name?: ReactNode; email?: ReactNode; }` |  |  | A message under one specific field, instead of the single alert. |
 | `fieldLabel` | `string` |  | `Correo electrónico` |  |
 | `nameField` | `boolean` |  | `false` | Adds the name field ahead of the email one. |
@@ -1584,11 +1588,11 @@ Source: `src/components/newsletter-form/index.tsx`
 | `namePlaceholder` | `string` |  | `Cómo te llamas` |  |
 | `onFieldChange` | `(field: "email" \| "name", value: string) => void` |  |  | Fires when either field changes. It is where the project clears its error. |
 | `onSubmitEmail` | `(email: string, name?: string \| undefined) => void` |  |  | Fires with the email already read from the field, and with the name if that field is enabled. |
-| `placeholder` | `string` |  | `tu@email.dev` |  |
+| `placeholder` | `string` |  | `tu@correo.dev` |  |
 | `resetOnSuccess` | `boolean` |  | `true` | Empties the fields after a successful subscription. On by default. |
 | `state` | `"success" \| "error" \| "idle" \| "sending"` |  | `idle` |  |
 | `submitLabel` | `string` |  | `Suscribirme` |  |
-| `successMessage` | `ReactNode` |  | `Ya estás dentro. Te llega un correo cada dos semanas, y nada más.` |  |
+| `successMessage` | `ReactNode` |  | `Ya estás dentro. Te llega un correo al mes, y nada más.` |  |
 | `title` | `ReactNode` | yes |  |  |
 
 ### PageHeader
@@ -1638,6 +1642,7 @@ A large metric: the number in the `stat` scale and its name underneath.
 | `icon` | `ReactNode` |  |  | Glyph in a tinted circle, in the corner opposite the title. At 1em, and it inherits `currentColor` from the badge, so it takes the tone without being tinted separately. |
 | `label` | `ReactNode` | yes |  | What is being counted. It goes in mono small caps. |
 | `progress` | `number` |  |  | With `progress`, the metric reads as progress and adds the bar. |
+| `progressLabel` | `string` |  |  | The bar's accessible name. It defaults to `label` when `label` is a string; a `label` that is markup has to spell it here, or the bar would announce «[object Object]: 38%». |
 | `spark` | `ReactNode` |  |  | The number's shape over time, under it. A `ReactNode` and not a data prop: a sparkline needs a charting library, and this component lives in the barrel that four projects install. The one project that draws them passes its own, exactly like `icon`. |
 | `tone` | `"neutral" \| "alert" \| "achievement"` |  | `neutral` | `alert` ONLY when the number is the problem, and `achievement` when it is the opposite — the diplomas issued, the modules finished. The two paint the same sand today and they are still two names: a system that names by meaning cannot make «this is bad» the only way to say «this stands out». See `docs/decisions/` § 28. |
 | `value` | `ReactNode` | yes |  | The number, already formatted. The library imposes no locale. |
@@ -2036,7 +2041,7 @@ Types (10): `AreaChartProps`, `BarChartProps`, `ChartContainerProps`, `ChartDatu
 | `defaultTemplate` | `(data?: DefaultData): SatoriNode` | Default · the document's declared exception. |
 | `OG` | `{ readonly width: 1200; readonly height: 630; readonly margin: 64; readonly mascot: 430; readonly signatureFin: 34; readonly mascotReserve: 560; }` | The canvas and the grid. These are the production measurements. |
 | `plantillaBase` | `(options: { mode: "dark" \| "light"; background: string; eyebrow: { text: string; color: string; }; title: string; bajada?: string \| undefined; signature: string; firmaColor: string; base: string; mascot?: SatoriNode \| ... 1 more ... \| undefined; mascotaIzquierda?: boolean \| undefined; tinta: string; tintaSecundaria: string; }): SatoriNode` |  |
-| `talkTemplate` | `(data: TalkData): SatoriNode` | Talk · eyebrow in biolume with the event and year, pose bleeding off the corner. |
+| `talkTemplate` | `(data: TalkData): SatoriNode` | Talk · 150° gradient, eyebrow in biolume with the event and year, pose bleeding off the corner. |
 
 Types (6): `ArticleData`, `BaseData`, `CourseData`, `DefaultData`, `SatoriNode`, `TalkData`.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eduardoalvarez/arrecife",
-  "version": "0.12.2",
+  "version": "0.12.4",
   "description": "The component library of Eduardo Álvarez’s visual identity",
   "license": "MIT",
   "author": "Eduardo Esteban Álvarez Castañeda <soy@eduardoalvarez.dev>",