stream.place / streamplace
This repository has no description
Star
Fork 0
Watch
streamplace js components MIGRATION.md
3.6 kB
Markdown
at agent/android-e2e

@streamplace/components — redesign migration notes #

The Linear × YouTube redesign restructured the design-token system and primitives. Most public APIs are preserved via deprecated aliases; this file lists everything a downstream consumer might notice.

Typeface #

  • Atkinson Hyperlegible → Geist / Geist Mono. Apps embedding the components must load Geist-Regular/Medium/SemiBold and GeistMono-Regular/Medium/SemiBold (see js/app/components/provider/provider.shared.tsx for the expo-font map). Static weights only — the app does not load variable fonts.
  • fontFamilies.light/extraLight now alias regular; bold/extraBold alias semiBold. The design system uses weights 400/500/600 only.

Tokens #

  • colors.primary ramp is now pink (#e955c2 at 500), aligned with the web app's --primary; colors.secondary is a teal ramp (#1abbc0 at 500). theme.colors.primary/ring no longer use iOS systemBlue on iOS — one accent everywhere. Broadcaster branding overrides still apply.
  • New theme.colors keys: surface0–3, surfaceHover, text1–4, borderSubtle, borderStrong, live, liveDim, liveForeground, overlay, focus, danger. Legacy keys (background, card, popover, text, textMuted, textDisabled, …) remain and map onto the new scale.
  • borderRadius: sm is 4 (was 3); xl/2xl/3xl are deprecated aliases of lg (12).
  • spacing: off-grid keys (5, 7, 9, 10, 11, 14, …) are deprecated; use the 4/8/12/16/24/32/48/64 grid (keys 1/2/3/4/6/8/12/16).
  • typography.ios / typography.android are deprecated remaps onto the single universal scale (12/13/14/16/20/24/32). typeScale is the canonical scale. usePlatformTypography() returns remapped values.
  • animations is deprecated in favor of motion (fast 120 / base 200 / slow 300, bezier, easingCss, sheetSpring). animations.fast changed 150→120; slower now equals 300 (was 500).
  • New exports: surfaces, textAlphas, borderAlphas, statusColors, scrims, typeScale, fontWeights, tabularNums, motion.

Components #

  • Button: canonical variants are primary/secondary/ghost/danger and sizes sm/md/lg. outline→secondary, destructive→danger, success→primary, xl→lg, pill→pill prop, icon→use the new IconButton. Old names still compile.
  • Text: size values map to the new scale — note sm is now 13 (was 14), base 14 (was 16), lg 16 (was 18), 3xl/4xl are 32. weight values outside normal/medium/semibold clamp to the nearest supported weight. New tabular prop for counts/timers.
  • View: the Card and Surface convenience wrappers (View variants) were removed — both had no known usages. Use the new level-based Surface/Card from components/ui/surface.
  • New primitives: Surface/Card, Badge/LiveBadge/LivePulseDot, Avatar (with live ring), Skeleton, Tabs, IconButton.
  • Focus rings: on web the root ThemeProvider injects a global :focus-visible rule (2px focus ring, 2px offset). Remove any custom outline resets that fight it.
  • ButtonPrimitive.Root accepts a new pressedStyle prop; its style prop is now a Pressable style function internally.

App-internal (not published, listed for fork maintainers) #

  • js/app/components/home/avatar.tsx (unused UserAvatar) removed.
  • BottomMetadata gained a compact prop and now renders on mobile portrait watch layouts, not just full desktop.
  • Player control auto-hide is standardized at 3 s.