@eduardoalvarez/arrecife 0.5.0 → 0.6.0

package/dist/variants/index.d.cts

@@ -0,0 +1,192 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+/**
+ * The system's FOUR variants, and only those four.
+ *
+ * Brand rule 2, as code rather than as documentation: in light mode the primary
+ * button cannot be biolume or sand, so it switches to solid hull. There is no
+ * literal hex anywhere — `brand.hull` is a token, and the hover reuses
+ * `textSecondary` instead of inventing a `hullHover`.
+ *
+ * Brand rule 3: `conversion` appears ONCE per screen. That is documented in the
+ * story and not enforced at runtime: two conversion buttons on one page are a
+ * design problem, not an error that should take the render down.
+ *
+ * `secondary` is NEVER filled. It is border and text: at rest, hover hairline
+ * and foam; on hover, both move to biolume. A filled secondary is a badly tinted
+ * primary, and that is what this file used to do.
+ *
+ * `tertiary` is the system's CLI aesthetic: mono, `./action →` format, no box.
+ * It shows up on every card, so it is not a generic `ghost` under another name —
+ * the text format is part of the variant.
+ *
+ * There ARE two danger variants, and they arrived the way the previous comment
+ * said they would: into the document first and in here second. The rule they
+ * replace — «the system's error lives in alerts and in field validation, not in
+ * a red button» — still holds INSIDE an `AlertDialog`, where a title explains
+ * what is about to happen, focus starts on cancel and clicking outside does not
+ * close it. The context does the work there and the confirm button is still not
+ * red.
+ *
+ * It stops holding in a table row. `cursos` has eight destructive buttons in row
+ * actions and toolbars, next to «Editar» and «Duplicar», with no context to tell
+ * them apart: with every one rendered as `secondary`, «Eliminar curso» looked
+ * exactly like «Cancelar» and only the word separated them. See
+ * `docs/decisions.md` § 21.
+ *
+ * `destructiveOutline` fills on hover, and that IS an exception to «secondary is
+ * never filled» — declared here rather than discovered later. A destructive
+ * button that looks identical to a secondary until you read it is the problem
+ * this variant exists to fix, and at rest it is still only border and text.
+ */
+declare const button: (props?: ({
+    variant?: "primary" | "conversion" | "secondary" | "tertiary" | "destructive" | "destructiveOutline" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+/**
+ * THREE badge families, not one.
+ *
+ * The system defines three distinct shapes and this file served all of them as a
+ * mono pill in small caps. Each has its own shape because each says a different
+ * thing:
+ *
+ *   category · pill r999, mono 11.5, sand      → a slug: `engineering-culture`
+ *   status   · square r6, sans 12.5/500, tint  → a signal: published, draft
+ *   metric   · pill, mono 11.5 muted           → a datum: `8 min read`
+ *
+ * NONE of them is small-capped. The `uppercase tracking-[0.12em]` all three used
+ * to carry came from `text-eyebrow`, which is the eyebrow scale and not the
+ * badge one: it turned `engineering-culture` into `ENGINEERING-CULTURE` and
+ * `pose-laptop-coffee.png` into a file name that does not exist.
+ */
+/**
+ * A signal. Square r6, sans 12.5/500 and the semantic color at 8 % as the
+ * background — the alert recipe at word size: a status IS a one-word alert.
+ *
+ * NO border. It had one for a while, added to reinforce the tone, and it was
+ * heavy: a bordered box next to a title reads as a control and not as a datum.
+ * The tint alone is what the document asks for and it is what looks cleanest.
+ *
+ * The text is `textPrimary`, not the tone's color. In light mode the semantic
+ * colors are calibrated to pass JUST over paper, so over their own tint they
+ * fall to 4.10–4.40 and fail AA. The tint is a surface; what goes on top of it
+ * is a text token. Measured in `alert.tsx`.
+ *
+ * The tone is never the only carrier of meaning: the label spells out
+ * «Publicado» or «Borrador» in full.
+ */
+declare const badge: (props?: ({
+    variant?: "error" | "neutral" | "accent" | "warm" | "success" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * A slug, in sand. Untransformed: slugs already arrive lowercase and forcing it
+ * would be the same mistake the `uppercase` was making.
+ *
+ * The document's border is `#4A3A25`, which is sand at 28 % over abyss: it comes
+ * out of the palette, so it does not enter as a new token. In light mode the
+ * same rule gives dark sand at 28 % over paper, which is what is wanted.
+ *
+ * The filled variant is NOT decorative: it is the only indicator of the active
+ * filter in the article listing. That is why `active` is a prop and not a
+ * `className`.
+ */
+declare const category: (props?: ({
+    active?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * A datum: reading minutes, number of modules, a file name.
+ *
+ * No color box and no transform. It is the family `brand.stories.tsx` was asking
+ * for when it rendered `LAPTOP-COFFEE` for a file name that is actually
+ * `pose-laptop-coffee.png`.
+ */
+declare const metric: string[];
+
+declare const text: (props?: ({
+    variant?: "display" | "stat" | "h1" | "h2" | "h3" | "body" | "lead" | "ui" | "label" | "tag" | "chip" | "meta" | "eyebrow" | null | undefined;
+    tone?: "error" | "primary" | "secondary" | "accent" | "warm" | "success" | "warning" | "muted" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+/**
+ * The alert carries its color in the background, not only in the border.
+ *
+ * The system recipe is the semantic color at 8 % as background and at 22 % as
+ * border. This file gave `bg-surface` to all four variants, so the tone lived
+ * entirely in a 1px border: four alerts told apart by a line.
+ *
+ * All four tones start at ACCENT, which is the system's informational one (✦).
+ * There is no `neutral`: an alert without color is a paragraph.
+ *
+ * MEASURED in both modes, because the document's 8 % is calculated over abyss
+ * and it had to be checked that it survives over paper. Contrast of the tint
+ * against the page background:
+ *
+ *              8 % dark    8 % light
+ *   accent       1.149       1.106
+ *   success      1.116       1.121
+ *   warning      1.126       1.109
+ *   error        1.067       1.120
+ *
+ * Light mode needs NO second table: it holds up as well as or better than dark.
+ * The system's only weak point is `error` over abyss, 1.067, the faintest of the
+ * eight tints, which leans entirely on the 22 % border.
+ *
+ * There is a SECOND recipe, deliberately: the alert under the newsletter form
+ * goes to 10 % with a solid border so it reads under the field. That is
+ * `emphasis="strong"`, and it is not merged with the subtle one because the
+ * difference is documented.
+ *
+ * A THIRD contrast correction, in the line of the three `tokens.ts` already
+ * carried. The title used to be in the semantic color, and in light mode that
+ * cannot pass AA: the light semantics are calibrated to pass JUST over paper
+ * (4.54–4.88), so over their own tint at 8 % they fall to 4.11–4.40. No alpha
+ * fixes it — the problem is putting the color on top of itself.
+ *
+ * The tint is a SURFACE, so the text on top of it is a text token:
+ * `textPrimary` gives 14.6–14.9 over all four tints. The semantic color stays
+ * where it is not text — the border and the glyph — which is all the document
+ * ever asked of it. The glyph is decorative and `aria-hidden`, so the 3:1
+ * threshold applies to it rather than 4.5: its worst light case is 4.11.
+ *
+ * The radius: the document says 12, which is none of the system's five radii. It
+ * uses the card radius rather than introducing a sixth — see
+ * `docs/decisions.md`.
+ */
+declare const alert: (props?: ({
+    variant?: "error" | "accent" | "success" | "warning" | null | undefined;
+    emphasis?: "subtle" | "strong" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+declare const avatar: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+/**
+ * The card's class vocabulary, with no React attached.
+ *
+ * `CARD_SURFACE` is the system's only definition of what a card surface is:
+ * `surface`, `hairline` border, card radius. `CARD_HOVER` is rule 6 — the hover
+ * changes the border and nothing else. `CARD` is the two of them plus what a
+ * clickable card needs.
+ *
+ * They live here and not in `primitives/card.tsx` because `links` writes them by
+ * hand: that project ships no framework JavaScript and cannot import a
+ * component, so until now it copied the class list into its Astro. The copy had
+ * already drifted once — the hero gradient sat at `55%` and `#e9eeea` against
+ * the token's `60%` and `#EFE9DE`, and nothing compared them.
+ */
+declare const CARD_SURFACE = "rounded-card border-hairline bg-surface border";
+/** Rule 6's hover: the border only. Applied where the card is clickable. */
+declare const CARD_HOVER = "transition-standard hover:border-hairline-hover";
+/**
+ * The shared shell of the clickable cards — `ArticleCard`, `TalkCard`,
+ * `CourseCard`, `LinkRow` — so rule 6 lives in exactly one place.
+ *
+ * «States are communicated with border and color, not with movement. A card's
+ * hover changes the border from hairline to hairlineHover and nothing else.» No
+ * scale, no elevation, no title displacement.
+ */
+declare const CARD: string[];
+
+export { CARD, CARD_HOVER, CARD_SURFACE, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, category as categoryBadgeVariants, metric as metricBadgeVariants, text as textVariants };

package/dist/variants/index.d.ts

@@ -0,0 +1,192 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+/**
+ * The system's FOUR variants, and only those four.
+ *
+ * Brand rule 2, as code rather than as documentation: in light mode the primary
+ * button cannot be biolume or sand, so it switches to solid hull. There is no
+ * literal hex anywhere — `brand.hull` is a token, and the hover reuses
+ * `textSecondary` instead of inventing a `hullHover`.
+ *
+ * Brand rule 3: `conversion` appears ONCE per screen. That is documented in the
+ * story and not enforced at runtime: two conversion buttons on one page are a
+ * design problem, not an error that should take the render down.
+ *
+ * `secondary` is NEVER filled. It is border and text: at rest, hover hairline
+ * and foam; on hover, both move to biolume. A filled secondary is a badly tinted
+ * primary, and that is what this file used to do.
+ *
+ * `tertiary` is the system's CLI aesthetic: mono, `./action →` format, no box.
+ * It shows up on every card, so it is not a generic `ghost` under another name —
+ * the text format is part of the variant.
+ *
+ * There ARE two danger variants, and they arrived the way the previous comment
+ * said they would: into the document first and in here second. The rule they
+ * replace — «the system's error lives in alerts and in field validation, not in
+ * a red button» — still holds INSIDE an `AlertDialog`, where a title explains
+ * what is about to happen, focus starts on cancel and clicking outside does not
+ * close it. The context does the work there and the confirm button is still not
+ * red.
+ *
+ * It stops holding in a table row. `cursos` has eight destructive buttons in row
+ * actions and toolbars, next to «Editar» and «Duplicar», with no context to tell
+ * them apart: with every one rendered as `secondary`, «Eliminar curso» looked
+ * exactly like «Cancelar» and only the word separated them. See
+ * `docs/decisions.md` § 21.
+ *
+ * `destructiveOutline` fills on hover, and that IS an exception to «secondary is
+ * never filled» — declared here rather than discovered later. A destructive
+ * button that looks identical to a secondary until you read it is the problem
+ * this variant exists to fix, and at rest it is still only border and text.
+ */
+declare const button: (props?: ({
+    variant?: "primary" | "conversion" | "secondary" | "tertiary" | "destructive" | "destructiveOutline" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+/**
+ * THREE badge families, not one.
+ *
+ * The system defines three distinct shapes and this file served all of them as a
+ * mono pill in small caps. Each has its own shape because each says a different
+ * thing:
+ *
+ *   category · pill r999, mono 11.5, sand      → a slug: `engineering-culture`
+ *   status   · square r6, sans 12.5/500, tint  → a signal: published, draft
+ *   metric   · pill, mono 11.5 muted           → a datum: `8 min read`
+ *
+ * NONE of them is small-capped. The `uppercase tracking-[0.12em]` all three used
+ * to carry came from `text-eyebrow`, which is the eyebrow scale and not the
+ * badge one: it turned `engineering-culture` into `ENGINEERING-CULTURE` and
+ * `pose-laptop-coffee.png` into a file name that does not exist.
+ */
+/**
+ * A signal. Square r6, sans 12.5/500 and the semantic color at 8 % as the
+ * background — the alert recipe at word size: a status IS a one-word alert.
+ *
+ * NO border. It had one for a while, added to reinforce the tone, and it was
+ * heavy: a bordered box next to a title reads as a control and not as a datum.
+ * The tint alone is what the document asks for and it is what looks cleanest.
+ *
+ * The text is `textPrimary`, not the tone's color. In light mode the semantic
+ * colors are calibrated to pass JUST over paper, so over their own tint they
+ * fall to 4.10–4.40 and fail AA. The tint is a surface; what goes on top of it
+ * is a text token. Measured in `alert.tsx`.
+ *
+ * The tone is never the only carrier of meaning: the label spells out
+ * «Publicado» or «Borrador» in full.
+ */
+declare const badge: (props?: ({
+    variant?: "error" | "neutral" | "accent" | "warm" | "success" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * A slug, in sand. Untransformed: slugs already arrive lowercase and forcing it
+ * would be the same mistake the `uppercase` was making.
+ *
+ * The document's border is `#4A3A25`, which is sand at 28 % over abyss: it comes
+ * out of the palette, so it does not enter as a new token. In light mode the
+ * same rule gives dark sand at 28 % over paper, which is what is wanted.
+ *
+ * The filled variant is NOT decorative: it is the only indicator of the active
+ * filter in the article listing. That is why `active` is a prop and not a
+ * `className`.
+ */
+declare const category: (props?: ({
+    active?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * A datum: reading minutes, number of modules, a file name.
+ *
+ * No color box and no transform. It is the family `brand.stories.tsx` was asking
+ * for when it rendered `LAPTOP-COFFEE` for a file name that is actually
+ * `pose-laptop-coffee.png`.
+ */
+declare const metric: string[];
+
+declare const text: (props?: ({
+    variant?: "display" | "stat" | "h1" | "h2" | "h3" | "body" | "lead" | "ui" | "label" | "tag" | "chip" | "meta" | "eyebrow" | null | undefined;
+    tone?: "error" | "primary" | "secondary" | "accent" | "warm" | "success" | "warning" | "muted" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+/**
+ * The alert carries its color in the background, not only in the border.
+ *
+ * The system recipe is the semantic color at 8 % as background and at 22 % as
+ * border. This file gave `bg-surface` to all four variants, so the tone lived
+ * entirely in a 1px border: four alerts told apart by a line.
+ *
+ * All four tones start at ACCENT, which is the system's informational one (✦).
+ * There is no `neutral`: an alert without color is a paragraph.
+ *
+ * MEASURED in both modes, because the document's 8 % is calculated over abyss
+ * and it had to be checked that it survives over paper. Contrast of the tint
+ * against the page background:
+ *
+ *              8 % dark    8 % light
+ *   accent       1.149       1.106
+ *   success      1.116       1.121
+ *   warning      1.126       1.109
+ *   error        1.067       1.120
+ *
+ * Light mode needs NO second table: it holds up as well as or better than dark.
+ * The system's only weak point is `error` over abyss, 1.067, the faintest of the
+ * eight tints, which leans entirely on the 22 % border.
+ *
+ * There is a SECOND recipe, deliberately: the alert under the newsletter form
+ * goes to 10 % with a solid border so it reads under the field. That is
+ * `emphasis="strong"`, and it is not merged with the subtle one because the
+ * difference is documented.
+ *
+ * A THIRD contrast correction, in the line of the three `tokens.ts` already
+ * carried. The title used to be in the semantic color, and in light mode that
+ * cannot pass AA: the light semantics are calibrated to pass JUST over paper
+ * (4.54–4.88), so over their own tint at 8 % they fall to 4.11–4.40. No alpha
+ * fixes it — the problem is putting the color on top of itself.
+ *
+ * The tint is a SURFACE, so the text on top of it is a text token:
+ * `textPrimary` gives 14.6–14.9 over all four tints. The semantic color stays
+ * where it is not text — the border and the glyph — which is all the document
+ * ever asked of it. The glyph is decorative and `aria-hidden`, so the 3:1
+ * threshold applies to it rather than 4.5: its worst light case is 4.11.
+ *
+ * The radius: the document says 12, which is none of the system's five radii. It
+ * uses the card radius rather than introducing a sixth — see
+ * `docs/decisions.md`.
+ */
+declare const alert: (props?: ({
+    variant?: "error" | "accent" | "success" | "warning" | null | undefined;
+    emphasis?: "subtle" | "strong" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+declare const avatar: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+/**
+ * The card's class vocabulary, with no React attached.
+ *
+ * `CARD_SURFACE` is the system's only definition of what a card surface is:
+ * `surface`, `hairline` border, card radius. `CARD_HOVER` is rule 6 — the hover
+ * changes the border and nothing else. `CARD` is the two of them plus what a
+ * clickable card needs.
+ *
+ * They live here and not in `primitives/card.tsx` because `links` writes them by
+ * hand: that project ships no framework JavaScript and cannot import a
+ * component, so until now it copied the class list into its Astro. The copy had
+ * already drifted once — the hero gradient sat at `55%` and `#e9eeea` against
+ * the token's `60%` and `#EFE9DE`, and nothing compared them.
+ */
+declare const CARD_SURFACE = "rounded-card border-hairline bg-surface border";
+/** Rule 6's hover: the border only. Applied where the card is clickable. */
+declare const CARD_HOVER = "transition-standard hover:border-hairline-hover";
+/**
+ * The shared shell of the clickable cards — `ArticleCard`, `TalkCard`,
+ * `CourseCard`, `LinkRow` — so rule 6 lives in exactly one place.
+ *
+ * «States are communicated with border and color, not with movement. A card's
+ * hover changes the border from hairline to hairlineHover and nothing else.» No
+ * scale, no elevation, no title displacement.
+ */
+declare const CARD: string[];
+
+export { CARD, CARD_HOVER, CARD_SURFACE, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, category as categoryBadgeVariants, metric as metricBadgeVariants, text as textVariants };

package/dist/variants/index.js

@@ -0,0 +1,3 @@
+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-25YNFCIF.js';
+export { text as textVariants } from '../chunk-ODBFN44D.js';
+import '../chunk-MLKGABMK.js';