@linktr.ee/messaging-react 3.24.2-rc-1785436624 → 3.25.0-rc-1785440433

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

@@ -5,24 +5,10 @@ import React from 'react'
 
 import type { LinkAttachmentLayout, LinkAttachmentStatus } from '../../types'
 
+import { accentSurface } from './accentSurface'
 import type { LinkAttachmentVariant } from './CardShell'
-import { isPlayableAudio } from './CardThumbnail'
-import {
-  CHIN_FALLBACK_BG,
-  chinTextColor,
-  paintableAccent,
-} from './chinContrast'
-
-/**
- * Background each variant falls back to when no accent is paintable, as a hex.
- * Mirrors `CardShell`'s tailwind classes (`bg-[#1e2330]` / `bg-white`) — needed
- * separately because the bubble tail paints *outside* the shell's own box, via
- * an inline style a utility class can't reach.
- */
-const FALLBACK_BG_BY_VARIANT: Record<LinkAttachmentVariant, string> = {
-  dark: CHIN_FALLBACK_BG,
-  light: '#ffffff',
-}
+import { AUDIO_BG, isPlayableAudio } from './CardThumbnail'
+import { BUBBLE_BG_BY_VARIANT, inkFor } from './chinContrast'
 
 export interface ChinPaletteInput {
   variant: LinkAttachmentVariant
@@ -50,12 +36,15 @@ export interface ChinPalette {
    */
   accentStyle?: React.CSSProperties
   /**
-   * Resolved chin text colour, or `undefined` to keep the variant's own
-   * `text-*` classes (which already carry the right contrast for the
-   * fallback fill).
+   * 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.
    */
   chinTextColor?: string
-  /** Colour the bubble tail paints in, always defined. */
+  /**
+   * Colour the bubble tail paints in, always defined: the accent when one is
+   * paintable, otherwise this side's plain bubble fill.
+   */
   tailColor: string
   /** True while the card renders as a skeleton. */
   isLoading: boolean
@@ -115,19 +104,34 @@ export function useChinPalette({
 
   // Truthiness rather than `!= null` so this tracks `CardThumbnail`'s own
   // `thumbnailUrl ?` branch, which renders the placeholder for `''` too.
-  const hasHero =
-    layout === 'featured' &&
-    !!thumbnailUrl &&
-    !isPlayableAudio(mimeType, sourceUrl) &&
-    !heroFailed
-  const accent =
-    hasHero && status === 'ready' ? paintableAccent(accentColor) : undefined
+  //
+  // Playable audio is included even though its hero collapses to the native
+  // `<audio>` player and the artwork is never displayed. MES-1349 excluded it
+  // on the grounds that an accent is a claim about an image the viewer can see;
+  // the colour is now derived rather than painted raw, so it can no longer
+  // mislead about legibility, and an audio attachment with artwork is exactly
+  // the case where colour distinguishes one track from another. The cost is
+  // that a 404 artwork still tints the card here: the `<img>` never mounts, so
+  // `onImageError` cannot fire to withdraw it.
+  const hasArtwork = layout === 'featured' && !!thumbnailUrl && !heroFailed
+  const isAudio = isPlayableAudio(mimeType, sourceUrl)
+  const surface =
+    hasArtwork && status === 'ready'
+      ? accentSurface(accentColor, variant)
+      : 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])
 
   return {
     thumbnailUrl: heroFailed ? undefined : thumbnailUrl,
-    accentStyle: accent ? { backgroundColor: accent } : undefined,
-    chinTextColor: accent ? chinTextColor(accent) : undefined,
-    tailColor: accent ?? FALLBACK_BG_BY_VARIANT[variant],
+    accentStyle: surface ? { backgroundColor: surface } : undefined,
+    chinTextColor: inkFor(painted),
+    tailColor: painted,
     isLoading: status === 'loading',
     onImageError,
   }

package/src/components/LinkAttachment/types.ts

@@ -85,8 +85,8 @@ export interface LinkAttachmentBaseProps {
    * 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 => the card falls back to `CHIN_FALLBACK_BG` with
-   * `CHIN_TEXT_LIGHT`.
+   * 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.
    */
   accentColor?: string