@eduardoalvarez/arrecife 0.9.0 → 0.10.0

package/dist/index.d.cts

@@ -28,7 +28,6 @@ import { F as Face, P as Pose } from './catalog-D13txprv.cjs';
 export { A as ASSETS_PATH, B as Background, a as Fin, f as faceList, b as faceUsage, c as faces, d as fins, p as poseList, e as poses } from './catalog-D13txprv.cjs';
 export { Isotype, IsotypeProps, Logo, LogoProps, Mascot, MascotFace, MascotFaceProps, MascotProps } from './brand/index.cjs';
 import { ClassValue } from 'clsx';
-export { i as social } from './index-BbRplw_B.cjs';
 import '@radix-ui/react-label';
 
 /**
@@ -81,8 +80,8 @@ declare function AccordionContent({ className, children, ...props }: ComponentPr
 type AlertProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & VariantProps<typeof alert> & {
     title?: ReactNode;
     /**
-     * Replaces the variant's mono glyph. Never an emoji: if you need something
-     * else, it is an SVG from `glyphs`.
+     * Replaces the variant's glyph. Never an emoji: if you need something else,
+     * it is `<Icon as={…} />` from `@eduardoalvarez/arrecife/icons`.
      */
     icon?: ReactNode;
 };
@@ -545,6 +544,40 @@ type TextareaProps = ComponentProps<'textarea'> & {
 declare function Textarea({ className, invalid, ...props }: TextareaProps): react.JSX.Element;
 
 declare const ToastAction: react.ForwardRefExoticComponent<ToastPrimitive.ToastActionProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * THE TONE IS A SURFACE, NOT A LINE, and that is what 0.10.0 changed.
+ *
+ * It used to be `bg-surface` for all three and the whole difference between a
+ * confirmation and a failure was `border-success/40` against `border-error/40`:
+ * two hairlines at 40 % opacity, on a box that floats over whatever page it
+ * happens to land on, with no mark on it and the text in `textSecondary`. At the
+ * size a toast actually appears at, that is not a colour — it is two greys.
+ *
+ * What it is now is the recipe `Alert` already carries and had already argued:
+ * the semantic colour SOLID on the border and at 10 % as a tint, which is
+ * `emphasis="strong"` in `variants/alert.ts`. That variant exists for the alert
+ * that has to read UNDER a form field, and a toast has the same problem from the
+ * other side — it reads over content it did not choose, so the subtle 8 %/22 %
+ * recipe is not enough on its own.
+ *
+ * THE TINT RIDES ON A GRADIENT and not on `background-color`, which is the one
+ * odd line here. A toast has to be OPAQUE: it floats, and `bg-success/10` alone
+ * would let the article underneath show through it. `bg-surface` paints the
+ * opaque ground and the flat `linear-gradient` paints the tint on top of it, in
+ * one element, without a wrapper or a `::before` that would need its own
+ * stacking context. The two `from-`/`to-` stops are the same colour on purpose:
+ * it is a fill, not a gradient.
+ *
+ * MEASURED over the resulting surface, dark then light, worst case of the two:
+ *
+ *   text-text-primary over the success tint   14.9   14.6
+ *   text-text-secondary over the success tint  8.4    7.1
+ *   the border against the tint                4.2    3.6   (3:1 graphical)
+ *
+ * The body stays `textSecondary` and the title `textPrimary`, which is the same
+ * split `Alert` uses and for the same reason: a semantic colour is not a text
+ * colour over its own tint.
+ */
 declare const toast$1: (props?: ({
     variant?: "error" | "neutral" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -734,15 +767,19 @@ declare function AuthorCard({ name, role, src, bio, action, className, ...props
  * the same. What changed is the skin and the two dependencies a package cannot
  * have:
  *
- * - the portfolio's `Icon` → the glyphs now live in `src/lib/glyphs.tsx`, with
- *   the same paths.
+ * - the portfolio's `Icon` → the library's own `Icon` over Phosphor. The eight
+ *   paths this file used to carry verbatim from the portfolio are gone with
+ *   `lib/glyphs.tsx`; `Play`, `Pause`, `SpeakerHigh` and `SpeakerSlash` are the
+ *   same symbols in Phosphor's hand, and the ±15s skips are `ArrowCounterClockwise`
+ *   and `ArrowClockwise`. See `docs/decisions/0.10.md` § 51.
  * - analytics' `trackEvent` → the `onFirstPlay` prop, which the consumer wires
  *   to whatever they use. It still fires exactly once per load.
  *
  * And three things the system does not allow:
  *
- * - The waveform no longer animates `scaleY`. The bars are still there and still
- *   tell playback from pause by opacity, but they do not scale.
+ * - The waveform no longer animates `scaleY`. Since 0.10.0 it is not even drawn
+ *   here: it is Phosphor's `Waveform`, which is the same five bars. It still
+ *   tells playback from pause by opacity, and it does not move.
  * - The floating player appears and disappears instead of sliding.
  * - The progress bar no longer interpolates its width.
  *
@@ -982,8 +1019,10 @@ type SocialLink = {
     label: string;
     href: string;
     /**
-     * The glyph, at 19px. Brands are SOLID (`fill`) and functional icons use a 1.6
-     * stroke. Never an emoji.
+     * The glyph, at 19px. It is the PROJECT's — the library ships no catalogue of
+     * social marks since 0.10.0 — and the drawing rule it should follow is the
+     * system's: a brand is SOLID, so `<Icon as={GithubLogo} tone="current" />`,
+     * and a functional mark keeps the default `action`. Never an emoji.
      */
     icon: ReactNode;
 };

package/dist/index.d.ts

@@ -28,7 +28,6 @@ import { F as Face, P as Pose } from './catalog-D13txprv.js';
 export { A as ASSETS_PATH, B as Background, a as Fin, f as faceList, b as faceUsage, c as faces, d as fins, p as poseList, e as poses } from './catalog-D13txprv.js';
 export { Isotype, IsotypeProps, Logo, LogoProps, Mascot, MascotFace, MascotFaceProps, MascotProps } from './brand/index.js';
 import { ClassValue } from 'clsx';
-export { i as social } from './index-BbRplw_B.js';
 import '@radix-ui/react-label';
 
 /**
@@ -81,8 +80,8 @@ declare function AccordionContent({ className, children, ...props }: ComponentPr
 type AlertProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & VariantProps<typeof alert> & {
     title?: ReactNode;
     /**
-     * Replaces the variant's mono glyph. Never an emoji: if you need something
-     * else, it is an SVG from `glyphs`.
+     * Replaces the variant's glyph. Never an emoji: if you need something else,
+     * it is `<Icon as={…} />` from `@eduardoalvarez/arrecife/icons`.
      */
     icon?: ReactNode;
 };
@@ -545,6 +544,40 @@ type TextareaProps = ComponentProps<'textarea'> & {
 declare function Textarea({ className, invalid, ...props }: TextareaProps): react.JSX.Element;
 
 declare const ToastAction: react.ForwardRefExoticComponent<ToastPrimitive.ToastActionProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * THE TONE IS A SURFACE, NOT A LINE, and that is what 0.10.0 changed.
+ *
+ * It used to be `bg-surface` for all three and the whole difference between a
+ * confirmation and a failure was `border-success/40` against `border-error/40`:
+ * two hairlines at 40 % opacity, on a box that floats over whatever page it
+ * happens to land on, with no mark on it and the text in `textSecondary`. At the
+ * size a toast actually appears at, that is not a colour — it is two greys.
+ *
+ * What it is now is the recipe `Alert` already carries and had already argued:
+ * the semantic colour SOLID on the border and at 10 % as a tint, which is
+ * `emphasis="strong"` in `variants/alert.ts`. That variant exists for the alert
+ * that has to read UNDER a form field, and a toast has the same problem from the
+ * other side — it reads over content it did not choose, so the subtle 8 %/22 %
+ * recipe is not enough on its own.
+ *
+ * THE TINT RIDES ON A GRADIENT and not on `background-color`, which is the one
+ * odd line here. A toast has to be OPAQUE: it floats, and `bg-success/10` alone
+ * would let the article underneath show through it. `bg-surface` paints the
+ * opaque ground and the flat `linear-gradient` paints the tint on top of it, in
+ * one element, without a wrapper or a `::before` that would need its own
+ * stacking context. The two `from-`/`to-` stops are the same colour on purpose:
+ * it is a fill, not a gradient.
+ *
+ * MEASURED over the resulting surface, dark then light, worst case of the two:
+ *
+ *   text-text-primary over the success tint   14.9   14.6
+ *   text-text-secondary over the success tint  8.4    7.1
+ *   the border against the tint                4.2    3.6   (3:1 graphical)
+ *
+ * The body stays `textSecondary` and the title `textPrimary`, which is the same
+ * split `Alert` uses and for the same reason: a semantic colour is not a text
+ * colour over its own tint.
+ */
 declare const toast$1: (props?: ({
     variant?: "error" | "neutral" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -734,15 +767,19 @@ declare function AuthorCard({ name, role, src, bio, action, className, ...props
  * the same. What changed is the skin and the two dependencies a package cannot
  * have:
  *
- * - the portfolio's `Icon` → the glyphs now live in `src/lib/glyphs.tsx`, with
- *   the same paths.
+ * - the portfolio's `Icon` → the library's own `Icon` over Phosphor. The eight
+ *   paths this file used to carry verbatim from the portfolio are gone with
+ *   `lib/glyphs.tsx`; `Play`, `Pause`, `SpeakerHigh` and `SpeakerSlash` are the
+ *   same symbols in Phosphor's hand, and the ±15s skips are `ArrowCounterClockwise`
+ *   and `ArrowClockwise`. See `docs/decisions/0.10.md` § 51.
  * - analytics' `trackEvent` → the `onFirstPlay` prop, which the consumer wires
  *   to whatever they use. It still fires exactly once per load.
  *
  * And three things the system does not allow:
  *
- * - The waveform no longer animates `scaleY`. The bars are still there and still
- *   tell playback from pause by opacity, but they do not scale.
+ * - The waveform no longer animates `scaleY`. Since 0.10.0 it is not even drawn
+ *   here: it is Phosphor's `Waveform`, which is the same five bars. It still
+ *   tells playback from pause by opacity, and it does not move.
  * - The floating player appears and disappears instead of sliding.
  * - The progress bar no longer interpolates its width.
  *
@@ -982,8 +1019,10 @@ type SocialLink = {
     label: string;
     href: string;
     /**
-     * The glyph, at 19px. Brands are SOLID (`fill`) and functional icons use a 1.6
-     * stroke. Never an emoji.
+     * The glyph, at 19px. It is the PROJECT's — the library ships no catalogue of
+     * social marks since 0.10.0 — and the drawing rule it should follow is the
+     * system's: a brand is SOLID, so `<Icon as={GithubLogo} tone="current" />`,
+     * and a functional mark keeps the default `action`. Never an emoji.
      */
     icon: ReactNode;
 };