@linktr.ee/messaging-react 3.31.1 → 3.31.2-rc-1785926578

package/src/components/LinkAttachment/components/_shared/hex.ts

@@ -1,25 +1,23 @@
 /**
- * The hex contract shared by `chinContrast` and `accentSurface`.
+ * The hex contract for the accent colour `useChinPalette` publishes.
  *
- * `culori` does the parsing, and it accepts every CSS colour — including names
- * like `rebeccapurple` and formats with alpha. Every colour reaching these two
- * modules comes from `getDominantColorFromImageUrl` via a Stream attachment
- * field, or from a constant in this directory, so both narrow the input to a hex
- * before handing it over rather than widening their contract by accident.
+ * The extracted `accent_color` (from `getDominantColorFromImageUrl` via a Stream
+ * attachment field) is always a hex, but CSS `oklch(from …)` would resolve any
+ * colour name — including `rebeccapurple` — so the input is narrowed to a hex
+ * before it is published as `--accent`, rather than widening that contract by
+ * accident.
  */
 
 /**
  * `#abc`, `#aabbcc`, or either without the leading `#`.
  *
- * The missing hash is deliberate: the extractor returns bare hexes often enough
- * that rejecting them would silently drop the colour. It is also why `toCssHex`
- * exists — `background-color: 738883` is invalid and the DOM drops it, which is
- * how a card once rendered unaccented while every calculation behind it had
- * succeeded (MES-1349).
+ * The optional hash is deliberate: the extractor returns bare hexes often
+ * enough that rejecting them would drop the colour. It is also why `toCssHex`
+ * exists — `738883` without the `#` is not a valid CSS colour.
  */
 export const HEX_PATTERN = /^#?(?:[0-9a-f]{3}|[0-9a-f]{6})$/i
 
-/** Normalizes a hex for CSS and for culori, adding the `#` the extractor omits. */
+/** Normalizes a hex for CSS, adding the `#` the extractor omits. */
 export function toCssHex(hex: string): string {
   const trimmed = hex.trim()
   return trimmed.startsWith('#') ? trimmed : `#${trimmed}`

package/src/components/LinkAttachment/components/_shared/useChinPalette.ts

@@ -5,10 +5,19 @@ import React from 'react'
 
 import type { LinkAttachmentLayout, LinkAttachmentStatus } from '../../types'
 
-import { accentSurface } from './accentSurface'
 import type { LinkAttachmentVariant } from './CardShell'
-import { AUDIO_BG, isPlayableAudio } from './CardThumbnail'
-import { BUBBLE_BG_BY_VARIANT, inkFor } from './chinContrast'
+import { isPlayableAudio } from './CardThumbnail'
+import { HEX_PATTERN, toCssHex } from './hex'
+
+/** White on the dark stop, near-black on the light stop and the audio strip. */
+const INK_ON_DARK = '#FFFFFF'
+/** The near-black used across the Figma frames. */
+const INK_ON_LIGHT = '#040403'
+
+const INK_BY_VARIANT: Record<LinkAttachmentVariant, string> = {
+  dark: INK_ON_DARK,
+  light: INK_ON_LIGHT,
+}
 
 export interface ChinPaletteInput {
   variant: LinkAttachmentVariant
@@ -31,21 +40,17 @@ export interface ChinPalette {
    */
   thumbnailUrl?: string
   /**
-   * Inline background for the card shell, or `undefined` to keep the variant's
-   * own `bg-*` class.
-   */
-  accentStyle?: React.CSSProperties
-  /**
-   * Ink for both chin lines, chosen against the surface the card actually
-   * paints — the derived accent, the audio strip, or the fallback fill. Always
-   * defined for a parseable surface.
+   * Raw extracted colour to publish as the `--accent` custom property on the
+   * shell and the tail, or `undefined` when there is no paintable accent. The
+   * card keeps its hue and swaps the lightness in CSS (`styles.css`).
    */
-  chinTextColor?: string
+  accentHex?: string
   /**
-   * Colour the bubble tail paints in, always defined: the accent when one is
-   * paintable, otherwise this side's plain bubble fill.
+   * Ink for both chin lines: white on the sender's dark stop, near-black on the
+   * receiver's pale stop and on the audio strip. Fixed per surface — the stops
+   * clear AA at every hue.
    */
-  tailColor: string
+  chinTextColor: string
   /** True while the card renders as a skeleton. */
   isLoading: boolean
   /** Hand to `CardThumbnail` so a broken hero drops the accent with it. */
@@ -53,33 +58,25 @@ export interface ChinPalette {
 }
 
 /**
- * Resolves a link card's accent-derived colours and tracks hero-image failure.
+ * Resolves the accent a link card publishes and tracks hero-image failure.
  *
  * The accent is a claim about an image the viewer can see, so it only paints
- * when `CardThumbnail` actually mounts that image. Mirroring its branches
- * (`CardThumbnail.tsx:98-160`), the hero is *not* the accent's source when:
+ * when `CardThumbnail` actually mounts that image. Mirroring its branches, the
+ * hero is *not* the accent's source when:
  *
  * - `layout: 'classic'` — there is no hero region at all;
- * - `status` is not `'ready'` — the hero is the pulsing skeleton and there is
- *   no image yet;
+ * - `status` is not `'ready'` — the hero is the pulsing skeleton, no image yet;
  * - `thumbnailUrl` is absent — the hero is the type-icon placeholder, or for a
  *   playable video a bare `bg-black` box with no poster;
  * - the attachment is playable audio — the hero collapses to the native
- *   `<audio>` player and the `<img>` never mounts *even though `thumbnailUrl`
- *   is set*, so `onImageError` can never rescue this one. Left ungated, an
- *   artwork-backed audio link preview shipped a coloured card with no visible
- *   source image, and the accent beat `AUDIO_BG_CLASS` on Sent / Received
- *   because `CardShell` applies it as an inline `style`, which outranks any
- *   `bg-*` class. `ComposerCard` already dodged that by returning early before
- *   it passes `accentStyle`; this is that same rule, stated once instead of
- *   three times (MES-1349);
+ *   `<audio>` player and the `<img>` never mounts even though `thumbnailUrl` is
+ *   set, so `onImageError` can never rescue it and the gate has to be up front;
  * - the image 404s — an accent extracted from something the viewer cannot see.
  *   `onImageError` covers both hero shapes: the `<img>` reports directly, and a
  *   playable video's `poster` (which raises no event of its own) is verified by
  *   the hidden probe image in `CardThumbnail`.
  *
- * Every case falls back to the variant's own fill, which already pairs with
- * the variant's own text colours.
+ * Every excluded case publishes no accent and keeps the variant's own fill.
  */
 export function useChinPalette({
   variant,
@@ -105,32 +102,32 @@ export function useChinPalette({
   // Truthiness rather than `!= null` so this tracks `CardThumbnail`'s own
   // `thumbnailUrl ?` branch, which renders the placeholder for `''` too.
   //
-  // Playable audio stays excluded, as MES-1349 decided: its hero collapses to
-  // the native `<audio>` player, so the artwork never appears and an accent
-  // taken from it would be a claim about an image the viewer cannot see. The
-  // `<img>` never mounts either, so `onImageError` could not withdraw the colour
-  // if the artwork 404'd. Colouring audio cards from their artwork is a change
-  // to the audio tickets (MES-1360 / MES-1361), not to this one.
+  // Playable audio stays excluded: its hero collapses to the native `<audio>`
+  // player, so the artwork never appears and an accent taken from it would claim
+  // an image the viewer cannot see. The `<img>` never mounts either, so
+  // `onImageError` could not withdraw the colour if the artwork 404'd.
   const isAudio = isPlayableAudio(mimeType, sourceUrl)
   const hasHero =
     layout === 'featured' && !!thumbnailUrl && !isAudio && !heroFailed
-  const surface =
-    hasHero && status === 'ready'
-      ? accentSurface(accentColor, variant)
+  const canDerive = hasHero && status === 'ready'
+  // Only a validated hex is published: the extracted `accent_color` is always a
+  // hex, and CSS would resolve any colour name, so narrow the input here. Bare
+  // hexes are accepted because the extractor omits the `#` often enough that
+  // rejecting them would silently lose the colour.
+  const accentHex =
+    canDerive && accentColor != null && HEX_PATTERN.test(accentColor.trim())
+      ? toCssHex(accentColor)
       : undefined
 
-  // Whatever the card ends up painted with, legible or not, the ink is chosen
-  // against it. The accent is derived to suit this side's ink, but the audio
-  // strip and the fallback fill are imposed and cannot be refused — a sent
-  // audio card put white ink on `AUDIO_BG`'s near-white at 1.13:1 (MES-1388).
-  const painted =
-    surface ?? (isAudio ? AUDIO_BG : BUBBLE_BG_BY_VARIANT[variant])
+  // The accent surface and the sender's dark fallback both take white ink; the
+  // pale receiver fallback and the imposed audio strip both take near-black — so
+  // the ink is fixed per surface.
+  const chinTextColor = isAudio ? INK_ON_LIGHT : INK_BY_VARIANT[variant]
 
   return {
     thumbnailUrl: heroFailed ? undefined : thumbnailUrl,
-    accentStyle: surface ? { backgroundColor: surface } : undefined,
-    chinTextColor: inkFor(painted),
-    tailColor: painted,
+    accentHex,
+    chinTextColor,
     isLoading: status === 'loading',
     onImageError,
   }

package/src/components/LinkAttachment/types.ts

@@ -77,16 +77,17 @@ export interface LinkAttachmentBaseProps {
   /**
    * Dominant colour extracted from `thumbnailUrl`, as a hex string
    * (`#RRGGBB` or `#RGB`). Paints the card and — when the card is the last
-   * bubble in a same-author run — its tail. The card derives its own chin
-   * text colour from this value for WCAG AA contrast; callers never pass a
+   * bubble in a same-author run — its tail. Its hue is kept while the lightness
+   * is swapped to a fixed per-side stop (`oklch(from …)` in `styles.css`); the
+   * stops clear WCAG AA at every hue by construction, so callers never pass a
    * text colour.
    *
    * Only painted while the hero image it was extracted from is actually on
    * screen. Omitted, unparseable, `layout: 'classic'`, no `thumbnailUrl`,
    * `status` other than `'ready'`, a playable-audio `mimeType` + `sourceUrl`
-   * (whose hero is the native player rather than an image), or a hero that
-   * fails to load, or the colour cannot clear AA against this side's ink =>
-   * the card falls back to `BUBBLE_BG_BY_VARIANT[variant]`, the plain bubble fill.
+   * (whose hero is the native player rather than an image), or a hero that fails
+   * to load => the card keeps the plain bubble fill. Browsers without
+   * relative-colour-syntax support also keep that fill (progressive enhancement).
    */
   accentColor?: string
 

package/src/styles.css

@@ -1101,10 +1101,28 @@
   }
 }
 
-/* Bubble tail for `LinkAttachment` cards (MES-1349). Same 20x23 geometry and
-   mask path as the text-bubble tails above — the difference is that the fill
-   arrives as an inline style, because it is a dominant colour extracted from
-   the attachment image at send time and Tailwind cannot express a runtime hex.
+/* Derived accent surface for `LinkAttachment` cards. `--accent` is the raw
+   colour extracted from the attachment image; the card keeps its hue and swaps
+   the lightness to this side's `--surface-l` stop. Only paints where the browser
+   resolves relative colour syntax and an accent is set — otherwise the card's
+   `bg-[…]` fallback fill shows through. The stops clear 4.5:1 against each side's
+   ink at every hue. */
+.messaging-link-card[data-variant='dark'] {
+  --surface-l: 0.3;
+}
+.messaging-link-card[data-variant='light'] {
+  --surface-l: 0.9;
+}
+
+@supports (background: oklch(from red l c h)) {
+  .messaging-link-card[style*='--accent'] {
+    background: oklch(from var(--accent) var(--surface-l) c h);
+  }
+}
+
+/* Bubble tail for `LinkAttachment` cards. Same 20x23 geometry and mask path as
+   the text-bubble tails above; the fill is the card's accent surface, derived
+   below from its own `--accent`.
 
    Hand-written here rather than as a toolkit-only Tailwind utility on purpose:
    `styles.css` ships as a built stylesheet that every consumer imports, whereas
@@ -1135,6 +1153,25 @@
   transform-origin: center;
 }
 
+/* The tail paints outside the shell's box, so it can't inherit the shell's
+   computed background — it runs the same derivation itself off its own
+   `--accent`, and falls back to this side's plain bubble fill. Keep these fills
+   in sync with the shell's `bg-[…]` classes and the `--str-chat` bubble vars. */
+.messaging-link-card-tail[data-variant='dark'] {
+  --surface-l: 0.3;
+  background-color: #1e2330;
+}
+.messaging-link-card-tail[data-variant='light'] {
+  --surface-l: 0.9;
+  background-color: #f1f0ee;
+}
+
+@supports (background: oklch(from red l c h)) {
+  .messaging-link-card-tail[style*='--accent'] {
+    background-color: oklch(from var(--accent) var(--surface-l) c h);
+  }
+}
+
 /* Locked attachment wrapper: stack card + text bubble in the correct direction */
 .str-chat__li .str-chat__message--me .str-chat__message-bubble-wrapper {
   display: flex;