@oxyhq/bloom 0.27.0 → 0.28.0

package/src/subtle-hover/SubtleHover.tsx

@@ -0,0 +1,90 @@
+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). A 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;
+
+/**
+ * Web-only style that (a) cross-fades the overlay opacity and (b) promotes it to
+ * its own GPU layer so Safari doesn't nudge the layout by a subpixel when the
+ * overlay composites on hover. Cast because RN's `ViewStyle` has no `willChange`
+ * / `transition*` keys; react-native-web forwards them to the DOM node.
+ */
+const WEB_TRANSITION = {
+  transitionProperty: 'opacity',
+  transitionDuration: '0.1s',
+  transitionTimingFunction: 'ease',
+  willChange: 'opacity',
+} as ViewStyle;
+
+export interface SubtleHoverProps {
+  /** Whether the parent is currently hovered. Drives the overlay opacity. */
+  hover: boolean;
+  /**
+   * Overlay opacity when hovered. Defaults to a mode-tuned value (0.4 dark /
+   * 0.5 light) that reads as a gentle contrast wash.
+   */
+  opacity?: number;
+  /** Extra style merged last — e.g. `borderRadius` to match the parent. */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Opt in to rendering on native. Off by default: hover is a pointer
+   * affordance, so this is a web-only overlay unless a native surface wants the
+   * same wash driven by another interaction (e.g. press).
+   */
+  native?: boolean;
+}
+
+/**
+ * An absolutely-positioned, non-interactive contrast wash that fades in while
+ * its parent is hovered. Ported from Bluesky's `SubtleHover`. Pairs naturally
+ * with {@link useInteractionState} — pass its `state` as `hover`.
+ *
+ * Renders nothing on touch-web (no hovering pointer) and on native unless
+ * `native` is set. Color comes from the theme's `contrast50` token so the wash
+ * tracks the active preset and light/dark mode.
+ */
+export function SubtleHover({ hover, opacity, style, native = false }: SubtleHoverProps) {
+  const theme = useTheme();
+
+  const isWeb = Platform.OS === 'web';
+  if (isWeb ? IS_WEB_TOUCH_DEVICE : !native) {
+    return null;
+  }
+
+  const targetOpacity = opacity ?? (theme.isDark ? 0.4 : 0.5);
+
+  return (
+    <View
+      style={[
+        styles.overlay,
+        { backgroundColor: theme.colors.contrast50, opacity: hover ? targetOpacity : 0 },
+        isWeb ? WEB_TRANSITION : null,
+        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;
 }