@retray-dev/ui-kit 12.1.0 → 13.0.0

package/src/theme/colors.ts

@@ -1,5 +1,44 @@
 import { ThemeColors, ResolvedColors } from './types'
-import { mixWithBackground, withAlphaOnWhite, withAlphaOnDark, lighten, darken } from './colorUtils'
+import { hexToRgb } from './colorUtils'
+
+function componentToHex(c: number): string {
+  return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, '0')
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`
+}
+
+function withAlphaOnWhite(hex: string, alpha: number): string {
+  const rgb = hexToRgb(hex)
+  if (!rgb) return hex
+  const r = rgb.r * alpha + 255 * (1 - alpha); const g = rgb.g * alpha + 255 * (1 - alpha); const b = rgb.b * alpha + 255 * (1 - alpha)
+  return rgbToHex(r, g, b)
+}
+
+function withAlphaOnDark(hex: string, alpha: number, bgHex = '#0f0f0f'): string {
+  const rgb = hexToRgb(hex); const bg = hexToRgb(bgHex)
+  if (!rgb || !bg) return hex
+  const r = rgb.r * alpha + bg.r * (1 - alpha); const g = rgb.g * alpha + bg.g * (1 - alpha); const b = rgb.b * alpha + bg.b * (1 - alpha)
+  return rgbToHex(r, g, b)
+}
+
+function mixWithBackground(fgHex: string, bgHex: string, opacity: number): string {
+  const fg = hexToRgb(fgHex); const bg = hexToRgb(bgHex)
+  if (!fg || !bg) return fgHex
+  const r = fg.r * opacity + bg.r * (1 - opacity); const g = fg.g * opacity + bg.g * (1 - opacity); const b = fg.b * opacity + bg.b * (1 - opacity)
+  return rgbToHex(r, g, b)
+}
+
+function lighten(hex: string, amount: number): string {
+  return withAlphaOnWhite(hex, 1 - amount)
+}
+
+function darken(hex: string, amount: number): string {
+  const rgb = hexToRgb(hex)
+  if (!rgb) return hex
+  return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount))
+}
 
 // ─── Default palettes ─────────────────────────────────────────────────────────
 // AUDIT FIXES applied:
@@ -69,6 +108,12 @@ export function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): Resolved
     ? lighten(bg, -0.12)
     : darken(bg, 0.08)
 
+  // Skeleton needs higher contrast than surface to be visible.
+  // Light: 10% darken (was 4% via surface — invisible). Dark: 10% lighten.
+  const skeleton = dark
+    ? lighten(bg, -0.10)
+    : darken(bg, 0.10)
+
   const destructiveTint = dark
     ? withAlphaOnDark(t.destructive, 0.15, bg)
     : withAlphaOnWhite(t.destructive, 0.08)
@@ -96,6 +141,7 @@ export function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): Resolved
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,

package/src/theme/types.ts

@@ -26,13 +26,16 @@ export type ThemeColors = {
 // Derived from ThemeColors. Never supplied by consumers directly.
 export type ResolvedColors = ThemeColors & {
   // Text hierarchy
-  foregroundSubtle: string   // ~55% — body text, subtitles
-  foregroundMuted: string    // ~35% — captions, timestamps, placeholders
+  foregroundSubtle: string   // ~70% — body text, subtitles
+  foregroundMuted: string    // ~62% — captions, timestamps, placeholders
 
-  // Surface fills (chips unselected, input bg, tag bg, skeleton)
+  // Surface fills (chips unselected, input bg, tag bg)
   surface: string            // background slightly off-canvas
   surfaceStrong: string      // slightly stronger fill for pressed/hover states
 
+  // Skeleton placeholder — higher contrast than surface for visibility
+  skeleton: string
+
   // Semantic tints (light bg for alert banners, toast backgrounds)
   destructiveTint: string
   destructiveBorder: string

package/src/utils/animations.ts

@@ -1,74 +1,29 @@
-import { Easing } from 'react-native-reanimated'
 import type { SingleTransition } from 'react-native-ease'
 
-// ─── Spring presets ──────────────────────────────────────────────────────────
-// Tuned for the "Apple HIG / Airbnb" press-feel: snap inward fast, settle out elastically.
-// `stiffness`/`damping`/`mass` model — Reanimated v4 default physics units.
-//
-// pressIn:  high stiffness, heavy damping  → fast, controlled compression
-// pressOut: lower stiffness, less damping  → soft, elastic rebound
-// settle:   pillows / drawers / large surfaces → calm, never twitchy
 export const SPRINGS = {
-  /** Tight, premium press feel — Buttons, Toggle, Tabs triggers. */
-  pressIn: { stiffness: 600, damping: 35, mass: 0.8 },
-  pressOut: { stiffness: 280, damping: 22, mass: 0.8 },
-
-  /** Slightly softer for larger surfaces — Card, ListItem, MenuItem. */
-  surfacePressIn: { stiffness: 380, damping: 30, mass: 0.95 },
-  surfacePressOut: { stiffness: 220, damping: 20, mass: 0.95 },
-
-  /** Settled transitions for moving indicators — Tabs pill, Switch thumb. */
   glide: { stiffness: 380, damping: 38, mass: 1 },
-
-  /** Elastic indicator — Switch thumb, RadioGroup dot. */
   elastic: { stiffness: 320, damping: 22, mass: 0.7 },
 } as const
 
-// ─── Timing presets ──────────────────────────────────────────────────────────
-// All timings target the UI thread via Reanimated `withTiming`.
 export const TIMINGS = {
-  /** Color/opacity transitions on toggles, checkboxes, switches. */
   state: { duration: 160 },
-  /** Focus ring on inputs. */
-  focusIn: { duration: 140 },
-  focusOut: { duration: 100 },
-  /** Accordion / collapsible content. */
   expand: { duration: 240 },
   collapse: { duration: 200 },
-  /** Skeleton shimmer cycle (full pass). */
   shimmer: { duration: 1400 },
 } as const
 
-// ─── Easing presets ──────────────────────────────────────────────────────────
-export const EASINGS = {
-  /** Material-style ease-out — natural deceleration for state changes. */
-  standard: Easing.bezier(0.2, 0, 0, 1),
-  /** Strong ease-out for expanding surfaces (Accordion open). */
-  expand: Easing.bezier(0.23, 1, 0.32, 1),
-  /** Quick ease-in for collapsing. */
-  collapse: Easing.in(Easing.ease),
-} as const
-
-// ─── EaseView transition presets ─────────────────────────────────────────────
-// Equivalents of the reanimated presets above, in `react-native-ease` units.
-// EaseView spring takes raw damping/stiffness/mass (same physical model). EaseView
-// timing takes duration + an easing curve as a cubic-bezier tuple.
-
-/** Color/border state transition for Toggle, Checkbox, Chip, CategoryStrip, Switch track. Mirrors TIMINGS.state + EASINGS.standard. */
 export const COLOR_TRANSITION: SingleTransition = {
   type: 'timing',
   duration: TIMINGS.state.duration,
   easing: [0.2, 0, 0, 1],
 }
 
-/** Icon/opacity crossfade. Mirrors TIMINGS.state + EASINGS.standard. */
 export const OPACITY_TRANSITION: SingleTransition = {
   type: 'timing',
   duration: TIMINGS.state.duration,
   easing: [0.2, 0, 0, 1],
 }
 
-/** Elastic indicator spring — Switch thumb, RadioGroup dot. Mirrors SPRINGS.elastic. */
 export const SPRING_ELASTIC: SingleTransition = {
   type: 'spring',
   stiffness: 320,
@@ -76,8 +31,6 @@ export const SPRING_ELASTIC: SingleTransition = {
   mass: 0.7,
 }
 
-// ─── Press scale tokens ──────────────────────────────────────────────────────
-// Per-component press intensities — taken from DESIGN.md.
 export const PRESS_SCALE = {
   button: 0.95,
   card: 0.98,