@eduardoalvarez/arrecife 0.12.3 → 0.12.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.12.4](https://github.com/Proskynete/arrecife/compare/v0.12.3...v0.12.4) (2026-09-24)
+
+
+### 🐛 Correcciones
+
+* **tokens:** flat dark section, and the transcriptions re-synced from the 24 Sep canvases ([#86](https://github.com/Proskynete/arrecife/issues/86)) ([f5f5f5c](https://github.com/Proskynete/arrecife/commit/f5f5f5c6d45f65ae87ad3bf7dc7cad8e62be955a))
+
 ## [0.12.3](https://github.com/Proskynete/arrecife/compare/v0.12.2...v0.12.3) (2026-09-24)
 
 

package/dist/brand/index.js

@@ -1,5 +1,5 @@
 'use client';
-export { Isotype, Logo, Mascot, MascotFace } from '../chunk-LS3PUZ6L.js';
-import '../chunk-RMA2KF5B.js';
+export { Isotype, Logo, Mascot, MascotFace } from '../chunk-YZ4VVECJ.js';
+import '../chunk-CHHN7NBY.js';
 export { ASSETS_PATH, faceList, faceUsage, faces, fins, poseList, poses } from '../chunk-CKRSQPTX.js';
-import '../chunk-QQ5WRFHC.js';
+import '../chunk-EYBN76H6.js';

package/dist/chart/index.js

@@ -1,8 +1,8 @@
 'use client';
-import { Text } from '../chunk-TJRXYXMG.js';
+import { Text } from '../chunk-IBX7VFDS.js';
 import '../chunk-ODBFN44D.js';
-import { cn } from '../chunk-RMA2KF5B.js';
-import { radius } from '../chunk-QQ5WRFHC.js';
+import { cn } from '../chunk-CHHN7NBY.js';
+import { radius } from '../chunk-EYBN76H6.js';
 import { useId } from 'react';
 import { ResponsiveContainer, Tooltip, Legend, AreaChart as AreaChart$1, CartesianGrid, XAxis, YAxis, Area, BarChart as BarChart$1, Bar, LineChart as LineChart$1, Line } from 'recharts';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-DKXTF6N7.js → chunk-5V6ORCV5.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-RMA2KF5B.js';
+import { cn } from './chunk-CHHN7NBY.js';
 import { jsx } from 'react/jsx-runtime';
 
 var ICON_WEIGHT = "regular";

package/dist/{chunk-RMA2KF5B.js → chunk-CHHN7NBY.js}

@@ -1,4 +1,4 @@
-import { spacing, control, radius, typeScale } from './chunk-QQ5WRFHC.js';
+import { spacing, control, radius, typeScale } from './chunk-EYBN76H6.js';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 

package/dist/{chunk-QQ5WRFHC.js → chunk-EYBN76H6.js}

@@ -265,7 +265,13 @@ var ogDeep = "#0E2A30";
 var gradient = {
   dark: {
     hero: `linear-gradient(160deg, ${dark.background} 60%, ${deep} 100%)`,
-    section: `linear-gradient(150deg, ${dark.surface} 0%, ${deep} 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.
+     */
+    section: `linear-gradient(${dark.surface}, ${dark.surface})`,
     /** The article OG template. 145°, from the document. */
     og: `linear-gradient(145deg, ${dark.background} 58%, ${ogDeep} 100%)`,
     /** The talk OG template. 150°, from the document. */

package/dist/{chunk-TJRXYXMG.js → chunk-IBX7VFDS.js}

@@ -1,5 +1,5 @@
 import { text } from './chunk-ODBFN44D.js';
-import { cn } from './chunk-RMA2KF5B.js';
+import { cn } from './chunk-CHHN7NBY.js';
 import { Slot } from '@radix-ui/react-slot';
 import 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-3SPOZC5F.js → chunk-NGVEMBLN.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-RMA2KF5B.js';
+import { cn } from './chunk-CHHN7NBY.js';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-GP4MRY2B.js → chunk-QE7NGR7I.js}

@@ -1,4 +1,4 @@
-import { naming, tagline, motion, shadow, series, syntax, gradient, size, spacing, control, radius, limits, typeScale, fonts, brand, colors } from './chunk-QQ5WRFHC.js';
+import { naming, tagline, motion, shadow, series, syntax, gradient, size, spacing, control, radius, limits, typeScale, fonts, brand, colors } from './chunk-EYBN76H6.js';
 
 // src/tokens/index.ts
 var tokens = {

package/dist/{chunk-LS3PUZ6L.js → chunk-YZ4VVECJ.js}

@@ -1,6 +1,6 @@
-import { cn } from './chunk-RMA2KF5B.js';
+import { cn } from './chunk-CHHN7NBY.js';
 import { fins, ASSETS_PATH, poses, faces } from './chunk-CKRSQPTX.js';
-import { naming, tagline } from './chunk-QQ5WRFHC.js';
+import { naming, tagline } from './chunk-EYBN76H6.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function Isotype({

package/dist/form/index.js

@@ -1,9 +1,9 @@
 'use client';
-import { Label } from '../chunk-3SPOZC5F.js';
-import { Text } from '../chunk-TJRXYXMG.js';
+import { Label } from '../chunk-NGVEMBLN.js';
+import { Text } from '../chunk-IBX7VFDS.js';
 import '../chunk-ODBFN44D.js';
-import { cn } from '../chunk-RMA2KF5B.js';
-import '../chunk-QQ5WRFHC.js';
+import { cn } from '../chunk-CHHN7NBY.js';
+import '../chunk-EYBN76H6.js';
 import { createContext, useContext, useId } from 'react';
 import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
 import { Slot } from '@radix-ui/react-slot';

package/dist/icons/index.js

@@ -1,3 +1,3 @@
-export { ICON_WEIGHT, Icon, TONE_WEIGHT } from '../chunk-DKXTF6N7.js';
-import '../chunk-RMA2KF5B.js';
-import '../chunk-QQ5WRFHC.js';
+export { ICON_WEIGHT, Icon, TONE_WEIGHT } from '../chunk-5V6ORCV5.js';
+import '../chunk-CHHN7NBY.js';
+import '../chunk-EYBN76H6.js';

package/dist/index.cjs

@@ -330,7 +330,13 @@ var ogDeep = "#0E2A30";
 var gradient = {
   dark: {
     hero: `linear-gradient(160deg, ${dark.background} 60%, ${deep} 100%)`,
-    section: `linear-gradient(150deg, ${dark.surface} 0%, ${deep} 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.
+     */
+    section: `linear-gradient(${dark.surface}, ${dark.surface})`,
     /** The article OG template. 145°, from the document. */
     og: `linear-gradient(145deg, ${dark.background} 58%, ${ogDeep} 100%)`,
     /** The talk OG template. 150°, from the document. */

package/dist/index.js

@@ -1,22 +1,22 @@
 'use client';
-import { Label } from './chunk-3SPOZC5F.js';
-export { Label } from './chunk-3SPOZC5F.js';
-import { Text } from './chunk-TJRXYXMG.js';
-export { Text } from './chunk-TJRXYXMG.js';
-export { tokens } from './chunk-GP4MRY2B.js';
+import { Label } from './chunk-NGVEMBLN.js';
+export { Label } from './chunk-NGVEMBLN.js';
+import { Text } from './chunk-IBX7VFDS.js';
+export { Text } from './chunk-IBX7VFDS.js';
+export { tokens } from './chunk-QE7NGR7I.js';
 import { toggleTheme, currentTheme, watchTheme } from './chunk-GCRII2KQ.js';
 export { THEME_ATTRIBUTE, THEME_EVENT, THEME_KEY, applyTheme, currentTheme, preferredTheme, storedTheme, themeScript, toggleTheme, watchTheme } from './chunk-GCRII2KQ.js';
 import { alert, button, avatar, badge, category, metric, CARD_SURFACE, CARD } from './chunk-FF33ARRA.js';
 export { CARD, CARD_HOVER, CARD_SURFACE, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, category as categoryBadgeVariants, metric as metricBadgeVariants } from './chunk-FF33ARRA.js';
 export { text as textVariants } from './chunk-ODBFN44D.js';
-import { MascotFace, Mascot } from './chunk-LS3PUZ6L.js';
-export { Isotype, Logo, Mascot, MascotFace } from './chunk-LS3PUZ6L.js';
-import { Icon } from './chunk-DKXTF6N7.js';
-import { cn } from './chunk-RMA2KF5B.js';
-export { cn } from './chunk-RMA2KF5B.js';
+import { MascotFace, Mascot } from './chunk-YZ4VVECJ.js';
+export { Isotype, Logo, Mascot, MascotFace } from './chunk-YZ4VVECJ.js';
+import { Icon } from './chunk-5V6ORCV5.js';
+import { cn } from './chunk-CHHN7NBY.js';
+export { cn } from './chunk-CHHN7NBY.js';
 export { ASSETS_PATH, faceList, faceUsage, faces, fins, poseList, poses } from './chunk-CKRSQPTX.js';
-import { naming } from './chunk-QQ5WRFHC.js';
-export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, typeScale } from './chunk-QQ5WRFHC.js';
+import { naming } from './chunk-EYBN76H6.js';
+export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, typeScale } from './chunk-EYBN76H6.js';
 import { CaretDown, XCircle, Warning, CheckCircle, Info, Camera, CircleNotch, CaretLeft, CaretRight, Minus, Check, X, DotsThree, CaretUp, Copy, ArrowUpRight, TrendDown, TrendUp, Sun, Moon, WarningCircle, Waveform, ArrowCounterClockwise, ArrowClockwise, SpeakerSlash, SpeakerHigh, ArrowsClockwise, Pause, Play, Heart } from '@phosphor-icons/react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/og/index.js

@@ -1,5 +1,5 @@
 import { ASSETS_PATH, faces, poses, fins } from '../chunk-CKRSQPTX.js';
-import { fonts, dark, light, naming, gradient, tagline, typeScale } from '../chunk-QQ5WRFHC.js';
+import { fonts, dark, light, naming, gradient, tagline, typeScale } from '../chunk-EYBN76H6.js';
 
 // src/og/templates.ts
 var OG = {

package/dist/shiki/index.js

@@ -1,4 +1,4 @@
-import { syntax } from '../chunk-QQ5WRFHC.js';
+import { syntax } from '../chunk-EYBN76H6.js';
 
 // src/shiki/theme.ts
 var arrecife = {

package/dist/tokens/index.cjs

@@ -267,7 +267,13 @@ var ogDeep = "#0E2A30";
 var gradient = {
   dark: {
     hero: `linear-gradient(160deg, ${dark.background} 60%, ${deep} 100%)`,
-    section: `linear-gradient(150deg, ${dark.surface} 0%, ${deep} 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.
+     */
+    section: `linear-gradient(${dark.surface}, ${dark.surface})`,
     /** The article OG template. 145°, from the document. */
     og: `linear-gradient(145deg, ${dark.background} 58%, ${ogDeep} 100%)`,
     /** The talk OG template. 150°, from the document. */

package/dist/tokens/index.d.cts

@@ -497,7 +497,13 @@ 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%)";
+        /**
+         * 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. */
@@ -761,7 +767,7 @@ 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 section: "linear-gradient(#10202B, #10202B)";
             readonly og: "linear-gradient(145deg, #091319 58%, #0E2A30 100%)";
             readonly ogTalk: "linear-gradient(150deg, #091319 55%, #0E2A30 100%)";
         };

package/dist/tokens/index.d.ts

@@ -497,7 +497,13 @@ 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%)";
+        /**
+         * 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. */
@@ -761,7 +767,7 @@ 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 section: "linear-gradient(#10202B, #10202B)";
             readonly og: "linear-gradient(145deg, #091319 58%, #0E2A30 100%)";
             readonly ogTalk: "linear-gradient(150deg, #091319 55%, #0E2A30 100%)";
         };

package/dist/tokens/index.js

@@ -1,2 +1,2 @@
-export { tokens } from '../chunk-GP4MRY2B.js';
-export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, typeScale } from '../chunk-QQ5WRFHC.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,7 +154,7 @@
 
   /* --- gradients · dark mode (default) ----------------------------------- */
   --gradient-hero: linear-gradient(160deg, #091319 60%, #0D2129 100%);
-  --gradient-section: linear-gradient(150deg, #10202B 0%, #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%);
 }
@@ -193,7 +193,7 @@
   --color-series-4: #71919C;
 
   --gradient-hero: linear-gradient(160deg, #091319 60%, #0D2129 100%);
-  --gradient-section: linear-gradient(150deg, #10202B 0%, #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%);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eduardoalvarez/arrecife",
-  "version": "0.12.3",
+  "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>",