@oxy.so/bloom 3.5.0 → 4.0.0

package/src/media-card/shared.ts

@@ -134,7 +134,7 @@ const COVER_GRADIENT_FALLOFF = 0.25;
  * takes for BOTH foregrounds — the title and the muted line under it — to clear
  * AA on it; the gradient's bottom is a further 25% darker, so the text keeps its
  * contrast all the way down. Without a colour — or with one that does not parse
- * — the cover is the theme's neutral 700 → 900, which clears it in both modes.
+ * — the cover darkens the theme's background until both artwork inks clear AA.
  *
  * Checking `textMuted` too is what the previous implementation did not do, and
  * it painted a muted line at 4.18:1 over the palest artwork colours.
@@ -145,9 +145,8 @@ const COVER_GRADIENT_FALLOFF = 0.25;
  * channel; scaling keeps the channels' ratio, so a darkened teal is still teal.
  */
 export function resolveCoverTint(theme: Theme, color?: string): CoverTint {
-  const { neutral: n } = resolveButtonRamps(theme);
-  const text = n[50];
-  const textMuted = mixColor(n[50], n[300], 0.35);
+  const text = '#ffffff';
+  const textMuted = '#e5e5e5';
   const shade = color ? darkenUntilContrast(color, [text, textMuted], AA_TEXT_CONTRAST) : null;
   if (shade) {
     return {
@@ -157,7 +156,8 @@ export function resolveCoverTint(theme: Theme, color?: string): CoverTint {
       textMuted,
     };
   }
-  return { top: n[700], bottom: n[900], text, textMuted };
+  const top = darkenUntilContrast(theme.colors.background, [text, textMuted], AA_TEXT_CONTRAST)!.color;
+  return { top, bottom: darken(top, COVER_GRADIENT_FALLOFF) as string, text, textMuted };
 }
 
 // ---------------------------------------------------------------------------
@@ -198,7 +198,7 @@ export interface MediaCardPaint {
  *   rail         neutral-200 (dark neutral-700) fill      the accent
  */
 export function resolveMediaCardPaint(theme: Theme): MediaCardPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const { colors, isDark } = theme;
   return {
     text: colors.text,
@@ -210,7 +210,7 @@ export function resolveMediaCardPaint(theme: Theme): MediaCardPaint {
     placeholderGlyph: mixColor(colors.background, colors.text, 0.4),
     tile: mixColor(colors.background, colors.text, isDark ? 0.1 : 0.07),
     tileHover: mixColor(colors.background, colors.text, isDark ? 0.16 : 0.12),
-    rail: isDark ? n[700] : n[200],
+    rail: colors.contrast50,
     fill: accent[500],
     accent: accent[500],
     surface: colors.background,

package/src/media-controls/shared.ts

@@ -1,3 +1,4 @@
+import { surfaceFillOn, surfaceTextOn } from '../styles/surface-levels';
 import { Platform } from 'react-native';
 
 import { mixColor, resolveButtonRamps } from '../button/shared';
@@ -40,7 +41,7 @@ export interface MediaControlsPaint {
 }
 
 export function resolveMediaControlsPaint(theme: Theme): MediaControlsPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const dark = theme.isDark;
   const { colors } = theme;
   return {
@@ -52,11 +53,11 @@ export function resolveMediaControlsPaint(theme: Theme): MediaControlsPaint {
     inverseHover: mixColor(colors.text, colors.background, 0.16),
     onInverse: colors.background,
     text: colors.text,
-    textMuted: dark ? n[400] : n[500],
-    wash: dark ? n[800] : n[100],
-    rail: dark ? n[700] : n[200],
-    buffered: dark ? n[500] : n[300],
-    badge: dark ? n[400] : n[500],
+    textMuted: surfaceTextOn(theme, colors.background).textSecondary,
+    wash: surfaceFillOn(theme, colors.background),
+    rail: colors.contrast50,
+    buffered: colors.border,
+    badge: surfaceTextOn(theme, colors.background).textSecondary,
     onBadge: colors.background,
     ring: accent[500],
   };

package/src/media-header/shared.ts

@@ -4,7 +4,7 @@ import { mixColor, resolveButtonRamps } from '../button/shared';
 import { oklchToSrgb, srgbToOklch, srgbToRgbString } from '../theme/color-space';
 import { parseRgba } from '../theme/color-utils';
 import { quietTextOver } from '../styles/color-contrast';
-import { AA_TEXT } from '../styles/surface-levels';
+import { AA_TEXT, resolveSurfaceLevel, surfaceFillOn, hairlineOn, surfaceTextOn } from '../styles/surface-levels';
 import type { Theme } from '../theme/types';
 import type { TypeScaleVariant } from '../typography/scale';
 import { TYPE_SCALE } from '../typography/scale';
@@ -108,12 +108,12 @@ export function resolveMediaHeaderPaint(
   theme: Theme,
   artworkColor?: string | null,
 ): MediaHeaderPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const { colors } = theme;
   const dark = theme.isDark;
   const tinted = tintArtworkColor(artworkColor, dark);
   const fallback = tinted === null;
-  const bandTop = tinted ?? (dark ? n[800] : n[200]);
+  const bandTop = tinted ?? (surfaceFillOn(theme, colors.background));
   const bandBottom = mixColor(colors.background, bandTop, 0.55);
 
   const onBand = readableOn([bandTop, bandBottom], [colors.text, colors.background]);
@@ -139,17 +139,17 @@ export function resolveMediaHeaderPaint(
     text: colors.text,
     // Floored on `card` — the harder of the two fills this label lands on. As
     // `neutral-500` it measured 4.38:1 on the light card.
-    textMuted: quietTextOver([colors.background, dark ? n[900] : n[100]], colors.text, AA_TEXT),
-    wash: dark ? n[800] : n[100],
-    border: dark ? n[600] : n[300],
+    textMuted: quietTextOver([colors.background, resolveSurfaceLevel(theme, 1).background], colors.text, AA_TEXT),
+    wash: surfaceFillOn(theme, colors.background),
+    border: hairlineOn(theme, colors.background),
     borderHover: colors.text,
-    card: dark ? n[900] : n[100],
+    card: resolveSurfaceLevel(theme, 1).background,
     accent: accent[500],
     onAccent: colors.primaryForeground,
     ring: accent[500],
-    placeholder: dark ? n[800] : n[200],
-    placeholderGlyph: dark ? n[500] : n[400],
-    rail: dark ? n[700] : n[200],
+    placeholder: surfaceFillOn(theme, colors.background),
+    placeholderGlyph: surfaceTextOn(theme, surfaceFillOn(theme, colors.background)).textSecondary,
+    rail: colors.contrast50,
     coverShadow: dark ? '0 8px 24px rgba(0, 0, 0, 0.5)' : '0 8px 24px rgba(0, 0, 0, 0.18)',
   };
 }

package/src/media-player/DevicePicker.tsx

@@ -1,3 +1,4 @@
+import { surfaceFillOn } from '../styles/surface-levels';
 import React, { memo, useMemo, useState } from 'react';
 import { Pressable, View } from 'react-native';
 
@@ -26,12 +27,12 @@ function DeviceRow({
 }) {
   const theme = useTheme();
   const palette = useMemo(() => resolveMenuPalette(theme), [theme]);
-  const { accent, neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const { accent } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const [hovered, setHovered] = useState(false);
   const Glyph = DEVICE_GLYPHS[device.kind];
   const disabled = !!device.disabled;
   const accentText = theme.isDark ? accent[400] : accent[600];
-  const iconWell = current ? (theme.isDark ? accent[950] : accent[50]) : theme.isDark ? neutral[700] : neutral[100];
+  const iconWell = current ? (theme.isDark ? accent[950] : accent[50]) : surfaceFillOn(theme, theme.colors.background);
 
   const secondary = current ? currentLabel : device.description;
   const content = (

package/src/media-player/FullScreenPlayer.tsx

@@ -1,7 +1,6 @@
 import React, { memo, useContext, useMemo, useState } from 'react';
 import { Pressable, ScrollView, View, type LayoutChangeEvent } from 'react-native';
 
-import { resolveButtonRamps } from '../button/shared';
 import { RiArrowDownSLine } from '../icons/remix/RiArrowDownSLine';
 import { RiMore2Fill } from '../icons/remix/RiMore2Fill';
 import { RiPlayListLine } from '../icons/remix/RiPlayListLine';
@@ -18,7 +17,7 @@ import { ImmersiveTheme, immersiveDarkTheme } from './ImmersiveTheme';
 import { PlayerIconButton } from './PlayerIconButton';
 import { Artwork, TrackText } from './TrackText';
 import { TransportControls } from './TransportControls';
-import { immersiveBase, resolveArtworkTint, verticalGradient } from './shared';
+import { resolveArtworkTint, verticalGradient } from './shared';
 import type { FullScreenPlayerLabels, FullScreenPlayerProps, LyricsPreview } from './types';
 import { webDataSet } from '../styles/web-data';
 
@@ -363,8 +362,7 @@ function FullScreenPlayerComponent(props: FullScreenPlayerProps) {
     const dark = immersiveDarkTheme(theme, ctx?.colorPreset ?? 'oxy');
     const darkPaint = resolveMediaControlsPaint(dark);
     const tint = resolveArtworkTint(props.artworkColor, darkPaint.text, darkPaint.textMuted).background;
-    const { neutral } = resolveButtonRamps(dark);
-    return { tint, base: immersiveBase(dark.colors.text), card: tint ?? neutral[800] };
+    return { tint, base: dark.colors.background, card: tint ?? dark.colors.backgroundSecondary };
   }, [theme, ctx?.colorPreset, props.artworkColor]);
 
   return (

package/src/media-player/NowPlayingBar.tsx

@@ -1,7 +1,7 @@
+import { hairlineOn } from '../styles/surface-levels';
 import React, { memo, useMemo, useState } from 'react';
 import { useWindowDimensions, View, type LayoutChangeEvent } from 'react-native';
 
-import { resolveButtonRamps } from '../button/shared';
 import { RiFullscreenLine } from '../icons/remix/RiFullscreenLine';
 import { RiMicLine } from '../icons/remix/RiMicLine';
 import { RiPlayListLine } from '../icons/remix/RiPlayListLine';
@@ -93,7 +93,6 @@ function NowPlayingBarComponent({
   const layout = nowPlayingBarLayout(width);
   const labels = { ...DEFAULT_LABELS, ...labelOverrides };
   const paint = useMemo(() => resolveMediaControlsPaint(theme), [theme]);
-  const { neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
   const casting = !!deviceName;
   const narrow = layout === 'narrow';
@@ -125,7 +124,7 @@ function NowPlayingBarComponent({
           paddingRight: 16,
           backgroundColor: theme.colors.background,
           borderTopWidth: 1,
-          borderTopColor: theme.isDark ? neutral[800] : neutral[200],
+          borderTopColor: hairlineOn(theme, theme.colors.background),
         },
         style,
       ]}

package/src/media-player/TrackText.tsx

@@ -1,7 +1,7 @@
+import { surfaceFillOn } from '../styles/surface-levels';
 import React, { useEffect, useMemo } from 'react';
 import { Image, View, type StyleProp, type ViewStyle } from 'react-native';
 
-import { resolveButtonRamps } from '../button/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { webDataSet } from '../styles/web-data';
 import { useImageResolver } from '../image-resolver/context';
@@ -29,7 +29,6 @@ export function Artwork({
 }) {
   const theme = useTheme();
   const resolver = useImageResolver();
-  const { neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const uri = source ? (isImageUrl(source) ? source : resolver?.(source)) : undefined;
   const box: ViewStyle =
     size === '100%' ? { width: '100%', aspectRatio: 1 } : { width: size, height: size };
@@ -40,7 +39,7 @@ export function Artwork({
         {
           borderRadius: radius,
           overflow: 'hidden',
-          backgroundColor: theme.isDark ? neutral[800] : neutral[100],
+          backgroundColor: surfaceFillOn(theme, theme.colors.background),
           alignItems: 'center',
           justifyContent: 'center',
         },
@@ -57,7 +56,7 @@ export function Artwork({
         />
       ) : (
         <View pointerEvents="none">
-          <RiMusic2Line width={24} height={24} fill={theme.isDark ? neutral[500] : neutral[400]} />
+          <RiMusic2Line width={24} height={24} fill={theme.colors.textSecondary} />
         </View>
       )}
     </View>

package/src/media-player/shared.ts

@@ -1,12 +1,12 @@
 import { Platform } from 'react-native';
 
-import { neutralRamp } from '../button/shared';
 import { parseRgba } from '../theme/color-utils';
 import type { WebCssStyle } from '../styles/web-view-style';
 import type { MediaArtist, RepeatMode, SleepTimerValue, TransportControlsSize } from './types';
 import {
   AA_TEXT_CONTRAST,
   contrastRatio,
+  darken,
   darkenUntilContrast,
   relativeLuminance,
 } from '../styles/color-contrast';
@@ -101,9 +101,9 @@ export function resolveArtworkTint(
   return shade ? { background: shade.color, darkened: shade.amount } : { background: null, darkened: 0 };
 }
 
-/** The dark surface the full-screen gradient ends on: neutral-950 tinted by the theme text. */
+/** Legacy text-only helper: a dark theme-linked artwork fallback. New players use background directly. */
 export function immersiveBase(themeText: string): string {
-  return neutralRamp(themeText)[950];
+  return darken(themeText, 0.94) ?? '#000000';
 }
 
 /** A top-to-bottom gradient: `background-image` on web, the native CSS-gradient style elsewhere. */

package/src/message-bubble/shared.ts

@@ -1,3 +1,4 @@
+import { surfaceFillOn, hairlineOn, surfaceTextOn } from '../styles/surface-levels';
 import { Platform, type DimensionValue } from 'react-native';
 
 import { ACCENT_TABLE, colorRamp, mixColor, resolveButtonRamps } from '../button/shared';
@@ -143,8 +144,7 @@ const NAME_STOPS_DARK = [400, 300, 200, 100] as const;
 export function senderNameColor(seed: string, theme: Theme): string {
   const hue = CHART_TONE_ORDER[hashSeed(seed) % CHART_TONE_ORDER.length];
   const ramp = colorRamp(chartHueTone(theme, hue ?? 2).color, ACCENT_TABLE);
-  const { neutral: n } = resolveButtonRamps(theme);
-  const surface = theme.isDark ? n[800] : theme.colors.card;
+  const surface = theme.colors.card;
   const stops = theme.isDark ? NAME_STOPS_DARK : NAME_STOPS_LIGHT;
   for (const stop of stops) {
     if (contrastRatio(surface, ramp[stop]) >= AA) return ramp[stop];
@@ -368,14 +368,14 @@ export interface MessageBubblePaint {
 }
 
 export function resolveMessageBubblePaint(theme: Theme): MessageBubblePaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const { colors } = theme;
   const dark = theme.isDark;
   const background = colors.background;
 
-  const outgoingFill = dark ? accent[600] : accent[500];
-  const onOutgoing = onFill(outgoingFill, theme, n[950]);
-  const incomingFill = dark ? n[800] : colors.card;
+  const outgoingFill = colors.primary;
+  const onOutgoing = colors.primaryForeground;
+  const incomingFill = colors.card;
   const onIncoming = colors.text;
 
   const outgoing: BubbleSidePaint = {
@@ -393,11 +393,11 @@ export function resolveMessageBubblePaint(theme: Theme): MessageBubblePaint {
     fill: incomingFill,
     // Light mode only: a card on a near-white page needs an edge, a neutral-800
     // bubble on a neutral-950 page already has one.
-    border: dark ? undefined : n[200],
+    border: dark ? undefined : colors.borderLight,
     text: onIncoming,
-    meta: dark ? n[400] : n[500],
+    meta: surfaceTextOn(theme, incomingFill).textTertiary,
     accent: dark ? accent[400] : accent[600],
-    quoteFill: dark ? mixColor(incomingFill, n[50], 0.08) : mixColor(incomingFill, n[900], 0.05),
+    quoteFill: surfaceFillOn(theme, incomingFill),
     overlayFill: 'rgba(0, 0, 0, 0.45)',
     overlayText: 'rgb(255 255 255)',
   };
@@ -410,18 +410,18 @@ export function resolveMessageBubblePaint(theme: Theme): MessageBubblePaint {
     highlightBand: mixColor(background, accent[500], dark ? 0.34 : 0.24),
     failed: colors.error,
     failedFill: mixColor(background, colors.error, dark ? 0.22 : 0.1),
-    pillFill: dark ? n[800] : n[200],
-    pillText: dark ? n[300] : n[600],
+    pillFill: colors.backgroundSecondary,
+    pillText: colors.textSecondary,
     unread: dark ? accent[400] : accent[600],
     unreadLine: dark ? mixColor(background, accent[400], 0.4) : mixColor(background, accent[600], 0.35),
-    reactionFill: dark ? n[700] : n[100],
-    reactionText: dark ? n[100] : n[700],
-    reactionMineFill: dark ? mixColor(n[900], accent[500], 0.28) : mixColor(background, accent[500], 0.14),
-    reactionMineText: dark ? accent[300] : accent[700],
+    reactionFill: colors.backgroundTertiary,
+    reactionText: colors.text,
+    reactionMineFill: colors.primarySubtle,
+    reactionMineText: colors.primarySubtleForeground,
     reactionMineBorder: dark ? accent[600] : accent[300],
     reactionRing: background,
     focusRing: accent[500],
-    muted: dark ? n[400] : n[500],
+    muted: colors.textSecondary,
   };
 }
 

package/src/message-media/shared.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
 
-import { colorRamp, mixColor, neutralRamp, resolveButtonRamps, ACCENT_TABLE } from '../button/shared';
+import { colorRamp, mixColor, resolveButtonRamps, ACCENT_TABLE } from '../button/shared';
 import { formatFileSize } from '../file-upload/shared';
 import { contrastRatio, relativeLuminance } from '../styles/color-contrast';
 import type { Theme } from '../theme/types';
@@ -132,9 +132,8 @@ export interface MessageMediaPaint {
 
 /** The bubble fill for a tone — the one both this family and the shell agree on. */
 export function resolveBubbleColor(theme: Theme, tone: MessageTone): string {
-  const { neutral } = resolveButtonRamps(theme);
   if (tone === 'outgoing') return theme.colors.primary;
-  return theme.isDark ? neutral[800] : neutral[100];
+  return theme.colors.card;
 }
 
 /**
@@ -150,7 +149,7 @@ export function resolveMessageMediaPaint(
   onColor?: string,
   bubbleColor?: string,
 ): MessageMediaPaint {
-  const { accent, neutral } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const { colors } = theme;
   const dark = theme.isDark;
   const bubble = bubbleColor ?? resolveBubbleColor(theme, tone);
@@ -180,10 +179,10 @@ export function resolveMessageMediaPaint(
     border: mixColor(bubble, text, 0.14),
     wash: mixColor(bubble, text, 0.08),
     washStrong: mixColor(bubble, text, 0.16),
-    placeholder: dark ? neutral[700] : neutral[200],
+    placeholder: mixColor(bubble, text, 0.16),
     scrim: 'rgba(0, 0, 0, 0.45)',
     onScrim: '#ffffff',
-    spoilerScrim: dark ? neutral[700] : neutral[300],
+    spoilerScrim: mixColor(bubble, text, 0.22),
     danger: outgoing ? text : danger,
     correct: outgoing ? text : correct,
     live: ensureContrast(bubble, colors.error, AA_LARGE),
@@ -225,7 +224,7 @@ const FILE_KIND_COLORS: Record<FileKind, (theme: Theme) => string> = {
   video: (t) => t.colors.primary,
   image: (t) => colorRamp(t.colors.primary, ACCENT_TABLE)[400],
   code: (t) => t.colors.tertiary,
-  other: (t) => neutralRamp(t.colors.text)[t.isDark ? 400 : 500],
+  other: (t) => t.colors.textSecondary,
 };
 
 // ---------------------------------------------------------------------------

package/src/music-library/shared.ts

@@ -1,3 +1,4 @@
+import { hairlineOn, surfaceTextOn } from '../styles/surface-levels';
 import { useCallback, useState } from 'react';
 import { Platform } from 'react-native';
 
@@ -256,14 +257,14 @@ export interface MusicLibraryPaint {
  * one page colour. Text and accents come from the neutral and accent ramps.
  */
 export function resolveMusicLibraryPaint(theme: Theme): MusicLibraryPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const dark = theme.isDark;
   const { background, text } = theme.colors;
   const step = (light: number, darkAlpha: number) => mixColor(background, text, dark ? darkAlpha : light);
   return {
     accent: accent[500],
     text,
-    textMuted: dark ? n[400] : n[500],
+    textMuted: surfaceTextOn(theme, step(0.03, 0.05)).textSecondary,
     surface: step(0.03, 0.05),
     hover: step(0.07, 0.1),
     selected: step(0.11, 0.16),
@@ -271,7 +272,7 @@ export function resolveMusicLibraryPaint(theme: Theme): MusicLibraryPaint {
     field: step(0.06, 0.09),
     fieldHover: step(0.1, 0.14),
     fieldFocusBorder: text,
-    divider: dark ? n[600] : n[300],
+    divider: hairlineOn(theme, step(0.03, 0.05)),
     ring: accent[500],
   };
 }