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

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
+   * hue-preserving lightness swap is done in CSS (`styles.css`) — see MES-1412.
    */
-  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, so no
+   * runtime contrast measurement is needed (the stops clear AA by construction).
    */
-  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. */
@@ -114,23 +119,27 @@ export function useChinPalette({
   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: `accent_color` is always a hex from the
+  // extractor, and CSS would resolve any colour name — narrowing keeps the input
+  // contract the same one the old `accentSurface` enforced. The bare-hex case is
+  // supported because the extractor omits the `#` often enough that dropping it
+  // would silently lose the colour (MES-1349).
+  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 and needs no runtime contrast — a sent audio
+  // card put white ink on the strip's near-white at 1.13:1 before (MES-1388).
+  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,6 +1101,26 @@
   }
 }
 
+/* Derived accent surface for `LinkAttachment` cards (MES-1412). React publishes
+   the raw extracted colour as `--accent`; the hue-preserving lightness swap that
+   used to run in JS (culori) runs natively via relative colour syntax. Only
+   where the syntax resolves and an accent was published does the surface paint —
+   every other browser keeps the plain bubble fill from the card's `bg-[…]` class
+   (the same fallback the old JS guard degraded to). The `--surface-l` stops clear
+   4.5:1 against each side's ink at every hue by construction. */
+.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 (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
@@ -1135,6 +1155,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;