@oxyhq/bloom 0.27.0 → 0.29.0

package/src/subtle-hover/SubtleHover.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Platform, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme';
+
+/**
+ * True on touch-capable web browsers (coarse pointer). The CSS `group-hover`
+ * wash only makes sense with a hovering pointer, so it is suppressed on touch
+ * web to match native (which has no hover at all).
+ */
+const IS_WEB_TOUCH_DEVICE =
+  Platform.OS === 'web' &&
+  typeof window !== 'undefined' &&
+  typeof window.matchMedia === 'function' &&
+  window.matchMedia('(pointer: coarse)').matches;
+
+export interface SubtleHoverProps {
+  /**
+   * JS-driven visibility for a coordinated highlight — e.g. every post of one
+   * thread lighting up together. When omitted, the wash instead follows CSS
+   * `group-hover` on web with ZERO React state: the parent element must carry
+   * `className="group"`.
+   */
+  active?: boolean;
+  /** Extra style merged last — e.g. `borderRadius` to match the parent. */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Render on native too (default `false`). Hover is a web pointer affordance,
+   * so the CSS `group-hover` mode is web-only; native only shows the wash in the
+   * JS `active` mode, and only when this is set.
+   */
+  native?: boolean;
+}
+
+/**
+ * An absolutely-positioned, non-interactive contrast wash. Two modes:
+ *
+ * - **CSS `group-hover`** (`active` omitted): the wash fades in on hover purely
+ *   through NativeWind classes — no React state. The parent must carry
+ *   `className="group"`. Web-only (native and touch-web have no hover).
+ * - **JS `active`**: the wash opacity follows the boolean, so several elements
+ *   can light up together (e.g. every post of a thread). Web always; native
+ *   only when `native` is set.
+ *
+ * The wash color comes from the theme's `contrast50` token so it tracks the
+ * active preset and light/dark mode. The web cross-fade is a NativeWind
+ * `transition-opacity` class — no manual `willChange` / web-style casts.
+ */
+export function SubtleHover({ active, style, native = false }: SubtleHoverProps) {
+  const theme = useTheme();
+  const isWeb = Platform.OS === 'web';
+
+  // Full literal class strings (never concatenated fragments) so NativeWind's
+  // compiler statically extracts every variant.
+  if (active === undefined) {
+    // CSS group-hover: a web pointer affordance. Native has no hover, and
+    // neither does touch web — render nothing there.
+    if (!isWeb || IS_WEB_TOUCH_DEVICE) return null;
+    return (
+      <View
+        {...({
+          className:
+            'opacity-0 group-hover:opacity-50 dark:group-hover:opacity-40 transition-opacity duration-150',
+        } as Record<string, string>)}
+        style={[styles.overlay, { backgroundColor: theme.colors.contrast50 }, style]}
+      />
+    );
+  }
+
+  // JS-driven coordinated mode: web always; native only when opted in.
+  if (!isWeb && !native) return null;
+  return (
+    <View
+      {...({ className: 'transition-opacity duration-150' } as Record<string, string>)}
+      style={[
+        styles.overlay,
+        {
+          backgroundColor: theme.colors.contrast50,
+          opacity: active ? (theme.isDark ? 0.4 : 0.5) : 0,
+        },
+        style,
+      ]}
+    />
+  );
+}
+
+SubtleHover.displayName = 'SubtleHover';
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none',
+  },
+});

package/src/subtle-hover/index.ts

@@ -0,0 +1,2 @@
+export { SubtleHover } from './SubtleHover';
+export type { SubtleHoverProps } from './SubtleHover';

package/src/theme/build-theme.ts

@@ -2,6 +2,7 @@ import { Platform } from 'react-native';
 import { APP_COLOR_PRESETS, type AppColorName } from './color-presets';
 import { getAdaptiveColors } from './adaptive-colors';
 import { getResolvedTokens, hslToSrgb } from './token-registry';
+import { THEME_GRADIENTS } from './gradients';
 import type { Theme, ThemeColors } from './types';
 
 /**
@@ -119,6 +120,7 @@ export function buildTheme(
   return {
     mode: resolved,
     colors,
+    gradients: THEME_GRADIENTS,
     isDark: resolved === 'dark',
     isLight: resolved === 'light',
   };

package/src/theme/gradients.ts

@@ -0,0 +1,61 @@
+import type { ThemeGradients } from './types';
+
+/**
+ * Brand-neutral named linear-gradient palettes shared across the design system —
+ * decorative avatar rings, hero surfaces, empty-state art, and similar accents.
+ *
+ * Each entry lists ordered `[offset, color]` stops where `offset` is a `0–1`
+ * position along the gradient axis. These are intentionally theme-agnostic (the
+ * same values are exposed in light and dark mode) and not tied to any single
+ * app's brand, so components can reference them by a stable, descriptive name.
+ */
+export const THEME_GRADIENTS: ThemeGradients = {
+  sky: {
+    values: [
+      [0, '#0A7AFF'],
+      [1, '#59B9FF'],
+    ],
+  },
+  midnight: {
+    values: [
+      [0, '#022C5E'],
+      [1, '#4079BC'],
+    ],
+  },
+  sunrise: {
+    values: [
+      [0, '#4E90AE'],
+      [0.4, '#AEA3AB'],
+      [0.8, '#E6A98F'],
+      [1, '#F3A84C'],
+    ],
+  },
+  sunset: {
+    values: [
+      [0, '#6772AF'],
+      [0.6, '#B88BB6'],
+      [1, '#FFA6AC'],
+    ],
+  },
+  summer: {
+    values: [
+      [0, '#FF6A56'],
+      [0.3, '#FF9156'],
+      [1, '#FFDD87'],
+    ],
+  },
+  nordic: {
+    values: [
+      [0, '#083367'],
+      [1, '#9EE8C1'],
+    ],
+  },
+  bonfire: {
+    values: [
+      [0, '#203E4E'],
+      [0.4, '#755B62'],
+      [0.8, '#CD7765'],
+      [1, '#EF956E'],
+    ],
+  },
+};

package/src/theme/index.ts

@@ -6,10 +6,11 @@ export type {
 export { BloomColorScope, useColorScopeStyle } from './color-scope';
 export type { BloomColorScopeProps } from './color-scope';
 export { buildTheme, STATUS_COLORS } from './build-theme';
+export { THEME_GRADIENTS } from './gradients';
 export { useTheme, useThemeColor, useBloomTheme } from './use-theme';
 export { useNavigationTheme } from './use-navigation-theme';
 export type { NavigationTheme, NavigationThemeFont } from './use-navigation-theme';
-export type { Theme, ThemeColors, ThemeMode } from './types';
+export type { Theme, ThemeColors, ThemeMode, ThemeGradient, ThemeGradients } from './types';
 export type { AppColorName, AppColorPreset, PresetTokens } from './color-presets';
 export {
   APP_COLOR_NAMES,

package/src/theme/types.ts

@@ -44,9 +44,22 @@ export interface ThemeColors {
   overlay: string;
 }
 
+/**
+ * A single named gradient: an ordered list of `[offset, color]` stops where
+ * `offset` runs 0–1 along the gradient axis and `color` is any RN/CSS color.
+ */
+export interface ThemeGradient {
+  values: Array<[number, string]>;
+}
+
+/** Map of named gradients exposed on the theme (`theme.gradients`). */
+export type ThemeGradients = Record<string, ThemeGradient>;
+
 export interface Theme {
   mode: 'light' | 'dark';
   colors: ThemeColors;
+  /** Brand-neutral named linear-gradient palettes. Theme-agnostic (same in light/dark). */
+  gradients: ThemeGradients;
   isDark: boolean;
   isLight: boolean;
 }