@oxy.so/bloom 3.6.0 → 4.0.0

package/src/sidebar/SidebarUserMenu.tsx

@@ -1,5 +1,6 @@
 import React, { memo, useState } from 'react';
 import { Pressable, View, useWindowDimensions } from 'react-native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { Button } from '../button';
 import { useInteractionState } from '../hooks/use-interaction-state';
@@ -19,9 +20,12 @@ import {
   menuPanelStyle,
   SidebarAvatarView,
   useSidebarWebCss,
+  useSidebarCollapseProgress,
 } from './parts';
 import type { SidebarAccount, SidebarAccountUser, SidebarUserMenuProps } from './types';
 
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
 /**
  * The account switcher at the top of the rail.
  *
@@ -116,34 +120,20 @@ export function SidebarAccountMenuContent({
         <View style={{ width: '100%', flexDirection: 'row', alignItems: 'center', gap: 12, paddingLeft: 8, paddingRight: 8, paddingBottom: 8 }}>
           {account.onAddUser ? (
             <View style={{ flex: 1 }}>
-              <Button
-                variant="secondary"
-                size="small"
-                leadingIcon={RiAddFill}
-                fullWidth
-                style={{ width: '100%' }}
-                onPress={() => {
+              <Button size="sm" leadingIcon={RiAddFill} style={{ width: "100%" }} onPress={() => {
                   account.onAddUser?.();
                   onSelect();
-                }}
-              >
+                }} appearance="subtle" tone="neutral">
                 {account.addUserLabel ?? 'Add user'}
               </Button>
             </View>
           ) : null}
           {account.onManage ? (
             <View style={{ flex: 1 }}>
-              <Button
-                variant="secondary"
-                size="small"
-                leadingIcon={RiEqualizer3Line}
-                fullWidth
-                style={{ width: '100%' }}
-                onPress={() => {
+              <Button size="sm" leadingIcon={RiEqualizer3Line} style={{ width: "100%" }} onPress={() => {
                   account.onManage?.();
                   onSelect();
-                }}
-              >
+                }} appearance="subtle" tone="neutral">
                 {account.manageLabel ?? 'Manage'}
               </Button>
             </View>
@@ -169,12 +159,15 @@ const SidebarUserMenuComponent: React.FC<SidebarUserMenuProps> = ({
   const narrow = width < BREAKPOINTS.sm;
   const { state: hovered, onIn, onOut } = useInteractionState();
 
+  const progress = useSidebarCollapseProgress(collapsed);
+  const triggerGeometry = useAnimatedStyle(() => ({ paddingLeft: 2 * progress.value, paddingRight: 2 * progress.value }), [progress]);
+  const hoverGeometry = useAnimatedStyle(() => ({ left: -6 + 3 * progress.value, right: -6 + 3 * progress.value }), [progress]);
   const triggerStyle: WebCssStyle = {
     position: 'relative',
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: collapsed ? 'center' : 'flex-start',
-    width: collapsed ? 36 : undefined,
+    justifyContent: 'flex-start',
+    alignSelf: 'flex-start',
     minWidth: 0,
     borderRadius: borderRadius.full,
     '--bloom-sidebar-ring': palette.ring,
@@ -184,7 +177,7 @@ const SidebarUserMenuComponent: React.FC<SidebarUserMenuProps> = ({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild label={account.name}>
-        <Pressable
+        <AnimatedPressable
           {...(IS_WEB ? { dataSet: { bloomSidebar: 'offset' } } : {})}
           accessibilityLabel={account.name}
           onHoverIn={onIn}
@@ -192,23 +185,22 @@ const SidebarUserMenuComponent: React.FC<SidebarUserMenuProps> = ({
             onOut();
             if (suppressHover) onHoverSuppressionEnd?.();
           }}
-          style={triggerStyle}
+          style={[triggerStyle, triggerGeometry]}
           testID={testID}
         >
           {/* The hover pill: a 2px outline drawn outside the box, so it never shifts layout. */}
-          <View
+          <Animated.View
             pointerEvents="none"
             testID={testID ? `${testID}-pill` : undefined}
-            style={{
+            style={[{
               position: 'absolute',
               top: -5,
               bottom: -5,
-              left: collapsed ? -3 : -6,
-              right: collapsed ? -3 : -6,
+
               borderRadius: borderRadius.full,
               borderWidth: 2,
               borderColor: hovered && !suppressHover ? palette.profileHoverBorder : 'transparent',
-            }}
+            }, hoverGeometry]}
           />
           <SidebarAvatarView avatar={account.avatar} size="md" palette={palette} background={avatarBackground} />
           <Collapsible collapsed={collapsed}>
@@ -219,7 +211,7 @@ const SidebarUserMenuComponent: React.FC<SidebarUserMenuProps> = ({
               <ChevronUpDownSmall color={palette.textTertiary} />
             </View>
           </Collapsible>
-        </Pressable>
+        </AnimatedPressable>
       </PopoverTrigger>
       <PopoverContent
         label="Account menu"

package/src/sidebar/metrics.ts

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import { createContext, useContext } from 'react';
 
 import type { TypeScaleVariant } from '../typography/scale';
@@ -48,17 +49,20 @@ function size(expanded: number, padding: number, icon: number, label: TypeScaleV
 }
 
 /**
- * The three row sizes. `medium` is what this sidebar has always drawn, to the
+ * The three row sizes. `md` is what this sidebar has always drawn, to the
  * pixel — 260 expanded, 52 collapsed, a 36px square, a 20px glyph and a
  * `body-medium` label.
  */
 export const SIDEBAR_METRICS: Record<SidebarSize, SidebarMetrics> = {
+  sm: size(232, 6, 18, 'body-2-medium'),
+  md: size(260, 8, 20, 'body-medium'),
+  lg: size(300, 10, 24, 'title-3-medium'),
   small: size(232, 6, 18, 'body-2-medium'),
   medium: size(260, 8, 20, 'body-medium'),
   large: size(300, 10, 24, 'title-3-medium'),
 };
 
-const SizeContext = createContext<SidebarSize>('medium');
+const SizeContext = createContext<SidebarSize | null>(null);
 
 /** A `Sidebar` publishes its size so a row inside it does not take one. */
 export const SidebarSizeProvider = SizeContext.Provider;
@@ -66,5 +70,7 @@ export const SidebarSizeProvider = SizeContext.Provider;
 /** The enclosing sidebar's size, or the row's own when it names one. */
 export function useSidebarMetrics(own?: SidebarSize): SidebarMetrics {
   const inherited = useContext(SizeContext);
-  return SIDEBAR_METRICS[own ?? inherited];
+  const canonical = own === 'small' ? 'sm' : own === 'medium' ? 'md' : own === 'large' ? 'lg' : own;
+  const {size} = useBloomAppearance({size: canonical}, {size: 'md', tone: 'neutral'});
+  return SIDEBAR_METRICS[own ?? inherited ?? (size === 'xs' ? 'sm' : size)];
 }

package/src/sidebar/palette.ts

@@ -1,50 +1,20 @@
 import { useMemo } from 'react';
 
-import { ACCENT_TABLE, BUTTON_SHADOW, colorRamp, mixColor, resolveButtonRamps } from '../button/shared';
+import { BUTTON_SHADOW } from '../button/shared';
+import { resolveAccentColors } from '../theme/accent-colors';
 import { MENU_SHADOW } from '../floating/menu-palette';
 import { PANEL_SHADOW, resolvePanelChrome } from '../styles/panel-chrome';
 import { hairlineOn } from '../styles/surface-levels';
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
-import { parseRgba } from '../theme/color-utils';
-import { oklchToSrgb, srgbToOklch, srgbToRgbString } from '../theme/color-space';
 import type { SidebarAvatarColor } from './types';
 
-/**
- * Sidebar tokens, built on Bloom's ramps.
- *
- *                                      light              dark
- *   background-secondary (panel)       neutral-100        neutral-900
- *   background-secondary-hover (row)   neutral-200        neutral-800
- *   background-tertiary (search, team) neutral-200        neutral-800
- *   background-tertiary-hover          neutral-300        neutral-700
- *   background-full (flat)             card               neutral-925
- *   background-primary (menu panel)    card               neutral-800
- *   background-primary-hover (menu)    neutral-100        neutral-700 @60%
- *   border-button-white (panel edge)   card               zinc-800 ≈ neutral-800
- *   border-button-default (menu edge)  neutral-200        neutral-700
- *   border-button-hover (team card)    neutral-300        neutral-500
- *   border-button-active (search ring) neutral-400        neutral-600
- *   border-sidebar-profile-hover       neutral-300        neutral-600
- *   text-primary                       text               text
- *   text-secondary / icon-secondary    neutral-500        neutral-500
- *   text-tertiary / icon-tertiary      neutral-400        neutral-600
- *   badge-neutral-background           neutral-200        neutral-800
- *   team-menu-count bg / fg            neutral-200 / 500  neutral-700 / 400
- *   avatar-neutral-background          neutral-300        neutral-800
- *   selected nav                       accent-500 solid fill, primary-foreground label
- *                                      (Bloom: no gradient, ring or highlight; pill)
- */
+/** Sidebar chrome reads the same semantic roles as consumer surfaces. */
 export interface SidebarPalette {
   panel: string;
   panelBorder: string;
   panelShadow: string;
-  /**
-   * The DOCKED column's single edge. Not `panelBorder`: that one is white in
-   * light mode — a highlight that reads as an edge only because the card's
-   * shadow sits under it. A docked column has no shadow, so its line has to be
-   * a real hairline against both the panel fill and the page (`hairlineOn`).
-   */
+  /** Docked panels have no shadow, so their single edge uses the shared hairline resolver. */
   dockedEdge: string;
   flat: string;
   rowHover: string;
@@ -64,6 +34,7 @@ export interface SidebarPalette {
   selectedForeground: string;
   badgeNeutral: string;
   badgePrimary: string;
+  badgePrimaryForeground: string;
   teamHoverBorder: string;
   profileHoverBorder: string;
   ring: string;
@@ -89,65 +60,52 @@ export interface SidebarPalette {
  */
 export const SIDEBAR_SHADOW = PANEL_SHADOW;
 
-/** Tailwind `pink-500` sits this far round the OKLCH hue wheel from `blue-500`. */
-const PINK_HUE_OFFSET = 354.308 - 259.815;
-
-function rotateHue(color: string, degrees: number): string {
-  const rgba = parseRgba(color);
-  if (!rgba) return color;
-  const { l, c, h } = srgbToOklch(rgba);
-  return srgbToRgbString(oklchToSrgb({ l, c, h: (((h + degrees) % 360) + 360) % 360 }));
-}
-
 export function resolveSidebarPalette(theme: Theme): SidebarPalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  const success = colorRamp(theme.colors.success, ACCENT_TABLE);
-  const pink = colorRamp(rotateHue(theme.colors.primary, PINK_HUE_OFFSET), ACCENT_TABLE);
-  const dark = theme.isDark;
+  const { colors: c, isDark: dark } = theme;
   const chrome = resolvePanelChrome(theme);
-  const panel = chrome.surface;
-  const card = theme.colors.card;
+  const primary = resolveAccentColors(c, 'primary', 'subtle');
+  const success = resolveAccentColors(c, 'success', 'subtle');
+  const tertiary = resolveAccentColors(c, 'tertiary', 'subtle');
   return {
-    panel,
+    panel: chrome.surface,
     panelBorder: chrome.border,
     panelShadow: chrome.shadow,
-    dockedEdge: hairlineOn(theme, panel),
-    // `neutral-925` (#121212), between the 900 and 950 stops.
-    flat: dark ? mixColor(n[900], n[950], 0.4) : card,
-    rowHover: dark ? n[800] : n[200],
-    tertiary: dark ? n[800] : n[200],
-    segmentedThumb: dark ? n[700] : card,
+    dockedEdge: hairlineOn(theme, chrome.surface),
+    flat: c.background,
+    rowHover: c.backgroundTertiary,
+    tertiary: c.backgroundTertiary,
+    segmentedThumb: c.card,
     segmentedThumbShadow: dark ? BUTTON_SHADOW.dark : BUTTON_SHADOW.light,
-    tertiaryHover: dark ? n[700] : n[300],
-    // `hover:bg-background-tertiary-hover/55` over the panel.
-    searchHover: mixColor(panel, dark ? n[700] : n[300], 0.55),
-    searchRing: dark ? n[600] : n[400],
-    text: theme.colors.text,
-    textSecondary: n[500],
-    textTertiary: dark ? n[600] : n[400],
-    selected: accent[500],
-    selectedForeground: theme.colors.primaryForeground,
-    badgeNeutral: dark ? n[800] : n[200],
-    badgePrimary: accent[400],
-    teamHoverBorder: dark ? n[500] : n[300],
-    profileHoverBorder: dark ? n[600] : n[300],
-    ring: accent[500],
+    tertiaryHover: c.card,
+    searchHover: c.card,
+    searchRing: c.border,
+    text: c.text,
+    textSecondary: c.textSecondary,
+    textTertiary: c.textTertiary,
+    selected: c.primary,
+    selectedForeground: c.primaryForeground,
+    badgeNeutral: c.backgroundTertiary,
+    badgePrimary: c.secondary,
+    badgePrimaryForeground: c.secondaryForeground,
+    teamHoverBorder: c.border,
+    profileHoverBorder: c.border,
+    ring: c.primary,
     menu: {
-      surface: dark ? n[800] : card,
-      border: dark ? n[700] : n[200],
+      surface: c.card,
+      border: c.border,
       shadow: dark ? MENU_SHADOW.dark : MENU_SHADOW.light,
-      rowHover: dark ? mixColor(n[800], n[700], 0.6) : n[100],
-      countBackground: dark ? n[700] : n[200],
-      countForeground: dark ? n[400] : n[500],
+      rowHover: c.backgroundTertiary,
+      countBackground: c.backgroundTertiary,
+      countForeground: c.textSecondary,
     },
     avatar: {
-      neutral: { background: dark ? n[800] : n[300], foreground: n[500] },
-      blue: { background: accent[300], foreground: accent[900] },
-      lime: { background: success[200], foreground: success[700] },
-      pink: { background: pink[200], foreground: pink[500] },
+      neutral: { background: c.backgroundTertiary, foreground: c.textSecondary },
+      blue: { background: primary.background, foreground: primary.foreground },
+      lime: { background: success.background, foreground: success.foreground },
+      pink: { background: tertiary.background, foreground: tertiary.foreground },
     },
-    avatarFlat: dark ? n[900] : n[200],
-    iconQuaternary: dark ? n[700] : n[300],
+    avatarFlat: c.backgroundSecondary,
+    iconQuaternary: c.border,
   };
 }
 

package/src/sidebar/parts.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useEffect, useMemo } from 'react';
 import { Platform, StyleSheet, View, type LayoutChangeEvent, type StyleProp, type ViewStyle } from 'react-native';
-import Animated, { useAnimatedStyle, useSharedValue, type SharedValue } from 'react-native-reanimated';
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming, type SharedValue } from 'react-native-reanimated';
 import Svg, { Defs, G, LinearGradient, Path, Rect, Stop } from 'react-native-svg';
 
 import { Avatar } from '../avatar';
@@ -27,6 +27,21 @@ export function useInSidebar(): boolean {
   return useContext(CollapseContext) !== null;
 }
 
+/** Share the panel's clock; standalone controls use the same reversible timing. */
+export function useSidebarCollapseProgress(collapsed: boolean): SharedValue<number> {
+  const context = useContext(CollapseContext);
+  const reducedMotion = useReducedMotion();
+  const local = useSharedValue(collapsed ? 1 : 0);
+  useEffect(() => {
+    if (!context) {
+      local.value = reducedMotion ? Number(collapsed) : withTiming(Number(collapsed), {
+        duration: MORPH_MS, easing: Easing.bezier(0.4, 0, 0.2, 1),
+      });
+    }
+  }, [collapsed, context, local, reducedMotion]);
+  return context ?? local;
+}
+
 /**
  * A `Collapsible` slot: max-width + opacity + blur(3px) collapse to
  * nothing while the icon beside it stays pinned. The natural width is measured
@@ -43,12 +58,7 @@ export function Collapsible({
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
 }) {
-  const context = useContext(CollapseContext);
-  const local = useSharedValue(collapsed ? 1 : 0);
-  useEffect(() => {
-    if (!context) local.value = collapsed ? 1 : 0;
-  }, [collapsed, context, local]);
-  const progress = context ?? local;
+  const progress = useSidebarCollapseProgress(collapsed);
   const natural = useSharedValue(0);
   const animated = useAnimatedStyle(() => {
     const p = progress.value;

package/src/sidebar/types.ts

@@ -1,6 +1,6 @@
-import type { ComponentType, ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { ReactNode } from 'react';
 import type { BloomIconComponent } from '../icons/icon-component';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 /** A Remix-style icon: `width` / `height` / `fill`. */
 /** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
@@ -119,12 +119,12 @@ export type SidebarSurface = 'card' | 'plain' | 'docked';
  * How big the rows are, and with them the panel. One axis, three rungs, every
  * measurement in `SIDEBAR_METRICS`:
  *
- * - `small`  a 30px square, an 18px glyph, `body-2-medium`; 232 expanded, 46 collapsed
- * - `medium` (default) 36 / 20 / `body-medium`; 260 expanded, 52 collapsed
- * - `large`  44 / 24 / `title-3-medium`; 300 expanded, 60 collapsed — the
+ * - `sm`  a 30px square, an 18px glyph, `body-2-medium`; 232 expanded, 46 collapsed
+ * - `md` (default) 36 / 20 / `body-medium`; 260 expanded, 52 collapsed
+ * - `lg`  44 / 24 / `title-3-medium`; 300 expanded, 60 collapsed — the
  *   destination-first rail a social app reads with at arm's length
  */
-export type SidebarSize = 'small' | 'medium' | 'large';
+export type SidebarSize = 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
 
 /** A row in the team menu. */
 export interface SidebarMenuItem {
@@ -262,7 +262,7 @@ export interface SidebarProps {
   fluid?: boolean;
   /** The panel's edge. Defaults to `card`. */
   surface?: SidebarSurface;
-  /** The row size, and the panel width that follows it. Defaults to `medium`. */
+  /** The row size, and the panel width that follows it. Defaults to `md`. */
   size?: SidebarSize;
 
   /** Shows `ThemeToggle` above the secondary rows. Defaults to true. */

package/src/slider/Slider.tsx

@@ -1,3 +1,5 @@
+import { useBloomAppearance } from '../appearance';
+import { resolveBloomColors } from '../appearance/colors';
 import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import {
   PanResponder,
@@ -94,22 +96,22 @@ function webTransition(properties: string): WebCssStyle {
 }
 
 function resolveSliderPaint(theme: Theme) {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const dark = theme.isDark;
   return {
-    rail: dark ? n[800] : n[200],
-    railHover: dark ? n[700] : n[300],
+    rail: theme.colors.backgroundSecondary,
+    railHover: theme.colors.backgroundTertiary,
     fillTop: accent[500],
     fillBottom: accent[600],
     // accent-600 → accent-700 mix (`rgb(4 80 226 / 0.16)`).
     fillShadow: `inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 2px ${withAlpha(mixColor(accent[700], accent[600], 0.16), 0.16)}`,
-    thumbBorder: dark ? n[700] : n[200],
-    thumbBorderHover: dark ? n[500] : n[300],
+    thumbBorder: theme.colors.borderLight,
+    thumbBorderHover: theme.colors.border,
     thumbBorderDrag: accent[500],
-    thumb: '#FFFFFF',
+    thumb: theme.colors.card,
     thumbShadow: '0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8)',
     thumbShadowDrag: `0 3px 8px ${withAlpha(accent[600], 0.22)}`,
-    surface: dark ? n[800] : theme.colors.card,
+    surface: theme.colors.card,
     bubbleShadow: BUTTON_SHADOW[dark ? 'dark' : 'light'],
     bubbleShadowLifted: dark
       ? '0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 4px 4px 0 rgba(0, 0, 0, 0.1)'
@@ -641,8 +643,10 @@ const SliderComponent = function Slider({
   max = 100,
   step = 1,
   disabled = false,
-  trackHeight = 6,
-  thumbSize = 20,
+  size: sizeProp,
+  tone: toneProp,
+  trackHeight: trackHeightProp,
+  thumbSize: thumbSizeProp,
   minimumTrackTintColor,
   maximumTrackTintColor,
   thumbTintColor,
@@ -653,6 +657,12 @@ const SliderComponent = function Slider({
   accessibilityLabel,
   testID,
 }: SliderProps) {
+  const theme = useTheme();
+  const {size, tone} = useBloomAppearance({size: sizeProp, tone: toneProp}, {size: 'md', tone: 'accent'});
+  const geometry = {xs: [4, 14], sm: [4, 16], md: [6, 20], lg: [8, 24]} as const;
+  const trackHeight = trackHeightProp ?? geometry[size][0];
+  const thumbSize = thumbSizeProp ?? geometry[size][1];
+  const toneColor = tone === 'accent' ? undefined : resolveBloomColors(theme.colors, tone, 'solid').background;
   useAccessibleNameWarning('Slider', accessibilityLabel ?? label);
   const values = useMemo(() => [value], [value]);
   const format = useMemo(
@@ -670,9 +680,9 @@ const SliderComponent = function Slider({
       disabled={disabled}
       trackHeight={trackHeight}
       thumbSize={thumbSize}
-      minimumTrackTintColor={minimumTrackTintColor}
+      minimumTrackTintColor={minimumTrackTintColor ?? toneColor}
       maximumTrackTintColor={maximumTrackTintColor}
-      thumbTintColor={thumbTintColor}
+      thumbTintColor={thumbTintColor ?? toneColor}
       label={label}
       showTooltip={showTooltip}
       formatValue={format}
@@ -695,8 +705,10 @@ const RangeSliderComponent = function RangeSlider({
   max = 100,
   step = 1,
   disabled = false,
-  trackHeight = 6,
-  thumbSize = 20,
+  size: sizeProp,
+  tone: toneProp,
+  trackHeight: trackHeightProp,
+  thumbSize: thumbSizeProp,
   minimumTrackTintColor,
   maximumTrackTintColor,
   thumbTintColor,
@@ -708,6 +720,12 @@ const RangeSliderComponent = function RangeSlider({
   accessibilityLabel,
   testID,
 }: RangeSliderProps) {
+  const theme = useTheme();
+  const {size, tone} = useBloomAppearance({size: sizeProp, tone: toneProp}, {size: 'md', tone: 'accent'});
+  const geometry = {xs: [4, 14], sm: [4, 16], md: [6, 20], lg: [8, 24]} as const;
+  const trackHeight = trackHeightProp ?? geometry[size][0];
+  const thumbSize = thumbSizeProp ?? geometry[size][1];
+  const toneColor = tone === 'accent' ? undefined : resolveBloomColors(theme.colors, tone, 'solid').background;
   const values = useMemo(() => [value[0], value[1]], [value]);
   return (
     <SliderBase
@@ -724,9 +742,9 @@ const RangeSliderComponent = function RangeSlider({
       disabled={disabled}
       trackHeight={trackHeight}
       thumbSize={thumbSize}
-      minimumTrackTintColor={minimumTrackTintColor}
+      minimumTrackTintColor={minimumTrackTintColor ?? toneColor}
       maximumTrackTintColor={maximumTrackTintColor}
-      thumbTintColor={thumbTintColor}
+      thumbTintColor={thumbTintColor ?? toneColor}
       label={label}
       showTooltip={showTooltip}
       formatValue={formatValue}

package/src/slider/types.ts

@@ -1,6 +1,9 @@
+import type { BloomSize, BloomTone } from '../appearance';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 export interface SliderProps {
+  size?: BloomSize;
+  tone?: BloomTone;
   /** Current value (controlled). */
   value: number;
   /** Fired continuously as the user drags / steps the thumb. */

package/src/social-button/SocialButton.tsx

@@ -1,4 +1,5 @@
-import React, { memo, useCallback, useMemo } from 'react';
+import { useBloomAppearance } from '../appearance';
+import React, { memo, useCallback, useId, useMemo } from 'react';
 import { Linking, Platform, View, type TextStyle, type ViewStyle } from 'react-native';
 import Svg, { Circle, Defs, LinearGradient, Path, Stop } from 'react-native-svg';
 
@@ -66,8 +67,8 @@ import type {
 const IS_WEB = Platform.OS === 'web';
 
 export const SOCIAL_BUTTON_GEOMETRY = {
-  medium: { height: 36, width: 300, paddingHorizontal: 12, glyph: 18 },
-  small: { height: 32, width: 250, paddingHorizontal: 10, glyph: 16 },
+  md: { height: 36, width: 300, paddingHorizontal: 12, glyph: 18 },
+  sm: { height: 32, width: 250, paddingHorizontal: 10, glyph: 16 },
 } as const satisfies Record<
   SocialButtonSize,
   { height: number; width: number; paddingHorizontal: number; glyph: number }
@@ -95,12 +96,12 @@ const DARK_INVERTED_BRANDS: ReadonlySet<SocialBrand> = new Set<SocialBrand>(['ap
  * Native only — react-native-web drops `hitSlop`.
  */
 const HIT_SLOP = {
-  medium: { top: 4, bottom: 4, left: 0, right: 0 },
-  small: { top: 6, bottom: 6, left: 0, right: 0 },
+  md: { top: 4, bottom: 4, left: 0, right: 0 },
+  sm: { top: 6, bottom: 6, left: 0, right: 0 },
 } as const;
 const SQUARE_HIT_SLOP = {
-  medium: { top: 4, bottom: 4, left: 4, right: 4 },
-  small: { top: 6, bottom: 6, left: 6, right: 6 },
+  md: { top: 4, bottom: 4, left: 4, right: 4 },
+  sm: { top: 6, bottom: 6, left: 6, right: 6 },
 } as const;
 
 type Gradient = readonly [top: string, bottom: string];
@@ -202,7 +203,7 @@ export function resolveSocialButtonPaint(
   const fill = brandFill(brand, customColor);
 
   if (appearance === 'white') {
-    const p = resolveButtonPalette('secondary', theme);
+    const p = resolveButtonPalette('outline', theme, 'neutral');
     const state = (s: typeof p.rest): SocialStatePaint => ({
       background: s.background,
       gradient: null,
@@ -245,7 +246,7 @@ export function resolveSocialButtonPaint(
 
   if (fill === null) {
     // Google: the primary button itself, gradient states included.
-    const p = resolveButtonPalette('primary', theme);
+    const p = resolveButtonPalette('solid', theme, 'accent');
     const state = (s: typeof p.rest): SocialStatePaint => ({
       background: s.background,
       gradient: s.gradient,
@@ -381,7 +382,7 @@ function ColorLogo({
 const SocialButtonComponent: React.FC<SocialButtonProps> = ({
   brand,
   config,
-  size = 'medium',
+  size: scopedSizeProp,
   appearance = 'colorful',
   iconOnly = false,
   fullWidth = false,
@@ -397,6 +398,8 @@ const SocialButtonComponent: React.FC<SocialButtonProps> = ({
   accessibilityHint,
   testID,
 }) => {
+  const {size: inheritedSize} = useBloomAppearance({size: scopedSizeProp}, {size: 'md', tone: 'accent'});
+  const size = inheritedSize === 'xs' || inheritedSize === 'sm' ? 'sm' : 'md';
   const theme = useTheme();
   useInteractiveWebCss(STYLE_ID, SOCIAL_BUTTON_CSS);
   const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();

package/src/social-button/types.ts

@@ -6,8 +6,8 @@ import type { SocialProvider } from './providers';
 /** A built-in provider, or `custom` for anything else (see {@link SocialBrandConfig}). */
 export type SocialBrand = SocialProvider | 'custom';
 
-/** `medium` 36 tall × 300 wide, `small` 32 × 250 — `Button`'s medium and small heights. */
-export type SocialButtonSize = 'medium' | 'small';
+/** `md` 36 tall × 300 wide, `sm` 32 × 250 — `Button`'s medium and small heights. */
+export type SocialButtonSize = 'md' | 'sm';
 
 /**
  * - `colorful` (default) fills with the brand colour, a white glyph on it.
@@ -41,7 +41,7 @@ export interface SocialButtonProps {
   brand: SocialBrand;
   /** Required when `brand="custom"`; ignored otherwise. */
   config?: SocialBrandConfig;
-  /** Defaults to `'medium'`. */
+  /** Defaults to `'md'`. */
   size?: SocialButtonSize;
   /** Defaults to `'colorful'`. */
   appearance?: SocialButtonAppearance;

package/src/sortable-media/SortablePhotoGrid.tsx

@@ -149,18 +149,18 @@ function resolveGridPaint(theme: Theme): GridPaint {
   const menu = resolveMenuPalette(theme);
   const dark = theme.isDark;
   return {
-    placeholder: dark ? mixColor(n[800], n[700], 0.6) : n[100],
+    placeholder: theme.colors.backgroundTertiary,
     scrim: n[950],
     onMedia: n[50],
     surface: menu.surface,
     surfaceText: menu.text,
     surfaceShadow: menu.shadow,
-    addBorder: dark ? n[600] : n[300],
-    addHover: dark ? n[900] : n[50],
+    addBorder: theme.colors.border,
+    addHover: theme.colors.backgroundSecondary,
     addIcon: theme.colors.textSecondary,
     text: theme.colors.text,
     textSecondary: theme.colors.textSecondary,
-    slotBorder: dark ? n[600] : n[300],
+    slotBorder: theme.colors.border,
     ring: accent[500],
   };
 }

package/src/stat-bar/shared.ts

@@ -1,4 +1,3 @@
-import { resolveButtonRamps } from '../button/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { Theme } from '../theme/types';
 
@@ -39,8 +38,7 @@ export interface MeterColors {
 }
 
 export function resolveMeterColors(theme: Theme): MeterColors {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  return { fill: accent[500], track: theme.isDark ? n[700] : n[200] };
+  return { fill: theme.colors.primary, track: theme.colors.backgroundTertiary };
 }
 
 /** `value` clamped into `[0, max]`, with a non-finite `value` read as 0. */