@oxy.so/bloom 3.6.0 → 4.1.0

package/src/segmented-control/SegmentedControl.tsx

@@ -1,3 +1,5 @@
+import { normalizeBloomSize } from '../appearance/legacy';
+import { useBloomAppearance, type BloomSize } from '../appearance';
 import {
   createContext,
   useCallback,
@@ -8,6 +10,7 @@ import {
   useState,
 } from 'react';
 import {
+  type GestureResponderEvent,
   Platform,
   Pressable,
   type PressableProps,
@@ -16,7 +19,8 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
-import Animated, { Easing, LinearTransition } from 'react-native-reanimated';
+import Animated, { Easing, ReduceMotion, runOnJS, useAnimatedStyle, useSharedValue, withTiming, type SharedValue } from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -30,8 +34,7 @@ import { mixColor, resolveButtonRamps } from '../button/shared';
 import { useFieldMembership } from '../field/membership';
 
 /**
- * A segmented control. Colours come from Bloom's theme through
- * `button/shared.ts` ramps.
+ * A segmented control using Bloom's canonical surface and text roles.
  *
  *              small    medium   large
  *   segment h  24       28       36
@@ -39,11 +42,11 @@ import { useFieldMembership } from '../field/membership';
  *   text       body-2   body     body     (-medium selected, -regular not)
  *   control h  32       36       44       (4px track padding, 2px gap)
  *
- *   track      neutral-100 (dark: neutral-925)
- *   thumb      surface (dark: neutral-800), shadow-2xs, slides under the
+ *   track      backgroundSecondary
+ *   thumb      card, shadow-2xs, slides under the
  *              selected segment over 200ms `ease`
  *   selected   medium weight, primary text
- *   unselected regular weight, neutral-500; hover → primary text (200ms)
+ *   unselected regular weight, textSecondary; hover → primary text (200ms)
  *   disabled   50% opacity
  *   focus      2px accent ring on the segment
  *
@@ -53,14 +56,15 @@ import { useFieldMembership } from '../field/membership';
  * segment reads through its text weight and colour alone.
  */
 
-type SegmentedControlSize = 'small' | 'medium' | 'large';
+type SegmentedControlSize = BloomSize | 'small' | 'medium' | 'large';
 type SegmentedControlVariant = 'solid' | 'plain';
 
 const GEOMETRY = {
-  small: { height: 24, paddingHorizontal: 8, type: 'body-2' },
-  medium: { height: 28, paddingHorizontal: 10, type: 'body' },
-  large: { height: 36, paddingHorizontal: 12, type: 'body' },
-} as const satisfies Record<SegmentedControlSize, { height: number; paddingHorizontal: number; type: TypeScaleFamily }>;
+  xs: { height: 20, paddingHorizontal: 6, type: 'caption-1' },
+  sm: { height: 24, paddingHorizontal: 8, type: 'body-2' },
+  md: { height: 28, paddingHorizontal: 10, type: 'body' },
+  lg: { height: 36, paddingHorizontal: 12, type: 'body' },
+} as const satisfies Record<BloomSize, { height: number; paddingHorizontal: number; type: TypeScaleFamily }>;
 
 /** Track padding. */
 const TRACK_PADDING = 4;
@@ -81,25 +85,14 @@ interface SegmentedPalette {
 }
 
 function resolveSegmentedPalette(theme: Theme): SegmentedPalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  return theme.isDark
-    ? {
-        // `neutral-925` (#121212), between the 900 and 950 stops.
-        track: mixColor(n[900], n[950], 0.4),
-        thumb: n[800],
-        thumbShadow: '0 1px 0 0 rgba(0, 0, 0, 0.16)',
-        selectedText: theme.colors.text,
-        text: n[500],
-        ring: accent[500],
-      }
-    : {
-        track: n[100],
-        thumb: theme.colors.card,
-        thumbShadow: '0 1px 0 0 rgba(0, 0, 0, 0.05)',
-        selectedText: theme.colors.text,
-        text: n[500],
-        ring: accent[500],
-      };
+  return {
+    track: theme.colors.backgroundSecondary,
+    thumb: theme.colors.card,
+    thumbShadow: theme.isDark ? '0 1px 0 0 rgba(0, 0, 0, 0.16)' : '0 1px 0 0 rgba(0, 0, 0, 0.05)',
+    selectedText: theme.colors.text,
+    text: theme.colors.textSecondary,
+    ring: theme.colors.primary,
+  };
 }
 
 // ---------------------------------------------------------------------------
@@ -132,9 +125,14 @@ ${SEGMENT}${NOT_DISABLED}:focus-visible {
 }`,
 });
 
+type SegmentPosition = { value: string; x: number; width: number; disabled: boolean };
+
 const InternalContext = createContext<{
+  register: (segment: SegmentPosition) => () => void;
+  suppressPress: () => boolean;
+  allowKeyboardPress: () => void;
   type: 'tabs' | 'radio';
-  size: SegmentedControlSize;
+  size: BloomSize;
   variant: SegmentedControlVariant;
   palette: SegmentedPalette;
   /** The group's disabled state. An item ORs it with its own. */
@@ -153,7 +151,7 @@ const InternalContext = createContext<{
  *
  * @example
  * ```tsx
- * <SegmentedControl label="Example" type="radio" value={value} onChange={setValue}>
+ * <SegmentedControl label="Example" type="radio" value={value} onValueChange={setValue}>
  *   <SegmentedControlItem value="one">
  *     <SegmentedControlItemText>One</SegmentedControlItemText>
  *   </SegmentedControlItem>
@@ -166,9 +164,10 @@ const InternalContext = createContext<{
 export function SegmentedControl<T extends string>({
   label,
   type = 'radio',
-  size = 'medium',
+  size: sizeProp,
   variant = 'solid',
   value,
+  onValueChange: onValueChangeProp,
   onChange,
   children,
   style,
@@ -189,7 +188,8 @@ export function SegmentedControl<T extends string>({
   /** `solid` (default) draws the track and sliding thumb; `plain` draws neither. */
   variant?: SegmentedControlVariant;
   value: T;
-  onChange: (value: T) => void;
+  onValueChange?: (value: T) => void;
+  onChange?: (value: T) => void;
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   /**
@@ -205,7 +205,9 @@ export function SegmentedControl<T extends string>({
   nativeID?: string;
   testID?: string;
 }) {
+  const onValueChange = onValueChangeProp ?? onChange ?? (() => {});
   const theme = useTheme();
+  const {size} = useBloomAppearance({size: normalizeBloomSize(sizeProp)}, {size: 'md', tone: 'neutral'});
   useInteractiveWebCss(STYLE_ID, SEGMENTED_CSS);
   // The group is ONE control made of several segments, so a `Field` names the
   // group and disables all of it. `label` is the group's name rather than
@@ -220,8 +222,79 @@ export function SegmentedControl<T extends string>({
     x: number;
   } | null>(null);
 
+  const segments = useSharedValue<SegmentPosition[]>([]);
+  const dragging = useSharedValue(false);
+  const originEnabled = useSharedValue(false);
+  const thumbX = useSharedValue(0);
+  const thumbWidth = useSharedValue(0);
+  const candidate = useSharedValue('');
+  const suppressUntil = useRef(0);
+  const [release, setRelease] = useState(0);
+  const register = useCallback((segment: SegmentPosition) => {
+    segments.value = [...segments.value.filter(item => item.value !== segment.value), segment].sort((a, b) => a.x - b.x);
+    return () => { segments.value = segments.value.filter(item => item.value !== segment.value); };
+  }, [segments]);
+  useLayoutEffect(() => {
+    if (!selectedPosition || dragging.value) return;
+    const config = { duration: TRANSITION_MS, easing: Easing.bezier(0.25, 0.1, 0.25, 1), reduceMotion: ReduceMotion.System };
+    thumbX.value = withTiming(selectedPosition.x, config);
+    thumbWidth.value = withTiming(selectedPosition.width, config);
+  }, [selectedPosition, release, dragging, thumbX, thumbWidth]);
+  const markDrag = useCallback(() => { suppressUntil.current = Date.now() + 500; }, []);
+  const finishDrag = useCallback((next: string, commit: boolean) => {
+    suppressUntil.current = Date.now() + 250;
+    if (commit && next !== value && segments.value.some(item => item.value === next && !item.disabled)) onValueChange(next as T);
+    // Also settle when a controlled parent rejects the proposed value.
+    setRelease(count => count + 1);
+  }, [onValueChange, segments, value]);
+  const gesture = useMemo(() => Gesture.Pan()
+    .activeOffsetX([-6, 6])
+    .failOffsetY([-14, 14])
+    .onBegin(event => {
+      const origin = segments.value.find(item => event.x >= item.x && event.x <= item.x + item.width);
+      originEnabled.value = !!origin && !origin.disabled;
+    })
+    .onStart(() => {
+      if (!originEnabled.value) return;
+      dragging.value = true;
+      candidate.value = '';
+      runOnJS(markDrag)();
+    })
+    .onUpdate(event => {
+      if (!dragging.value) return;
+      const enabled = segments.value.filter(item => !item.disabled);
+      if (!enabled.length) return;
+      let left = enabled[0]!;
+      let right = enabled[enabled.length - 1]!;
+      for (let index = 0; index < enabled.length; index++) {
+        const item = enabled[index]!;
+        const center = item.x + item.width / 2;
+        if (center <= event.x) left = item;
+        if (center >= event.x) { right = item; break; }
+      }
+      const start = left.x + left.width / 2;
+      const end = right.x + right.width / 2;
+      const progress = end === start ? 0 : Math.max(0, Math.min(1, (event.x - start) / (end - start)));
+      thumbX.value = left.x + (right.x - left.x) * progress;
+      thumbWidth.value = left.width + (right.width - left.width) * progress;
+      candidate.value = progress < 0.5 ? left.value : right.value;
+    })
+    .onEnd((_event, success) => {
+      if (!dragging.value) return;
+      dragging.value = false;
+      runOnJS(finishDrag)(candidate.value, success);
+    })
+    .onFinalize(() => {
+      if (!dragging.value) return;
+      dragging.value = false;
+      runOnJS(finishDrag)('', false);
+    }), [segments, originEnabled, dragging, candidate, thumbX, thumbWidth, markDrag, finishDrag]);
+
   const contextValue = useMemo(() => {
     return {
+      register,
+      suppressPress: () => dragging.value || Date.now() < suppressUntil.current,
+      allowKeyboardPress: () => { suppressUntil.current = 0; },
       type,
       size,
       variant,
@@ -233,8 +306,8 @@ export function SegmentedControl<T extends string>({
         val: string,
         position: { width: number; x: number } | null,
       ) => {
-        onChange(val as T);
-        if (position) setSelectedPosition(position);
+        onValueChange(val as T);
+        // Selection geometry follows the controlled value's item layout effect.
       },
       updatePosition: (position: { width: number; x: number }) => {
         setSelectedPosition(currPos => {
@@ -249,7 +322,7 @@ export function SegmentedControl<T extends string>({
         });
       },
     };
-  }, [value, selectedPosition, setSelectedPosition, onChange, type, size, variant, palette, isDisabled]);
+  }, [value, selectedPosition, setSelectedPosition, onValueChange, type, size, variant, palette, register, dragging, isDisabled]);
 
   const solid = variant === 'solid';
   const padding = solid ? TRACK_PADDING : 0;
@@ -260,6 +333,7 @@ export function SegmentedControl<T extends string>({
   const height = GEOMETRY[size].height + padding * 2;
 
   return (
+    <GestureDetector gesture={gesture} touchAction="pan-y">
     <View
       testID={testID}
       nativeID={field.nativeID}
@@ -287,8 +361,8 @@ export function SegmentedControl<T extends string>({
       role={type === 'tabs' ? 'tablist' : 'radiogroup'}>
       {solid && selectedPosition !== null && (
         <SegmentedThumb
-          x={selectedPosition.x}
-          width={selectedPosition.width}
+          x={thumbX}
+          width={thumbWidth}
           palette={palette}
         />
       )}
@@ -296,6 +370,7 @@ export function SegmentedControl<T extends string>({
         {children}
       </InternalContext.Provider>
     </View>
+    </GestureDetector>
   );
 }
 
@@ -357,16 +432,17 @@ export function SegmentedControlItem({
     }
   }, [needsUpdate]);
 
-  // The group's `disabled` is a constraint, so it is OR-ed with the item's own
-  // — a segment cannot re-enable itself inside a disabled group, and a `Field
-  // disabled` reaches every segment through the group.
   const isDisabled = ctx.disabled || disabled === true;
 
-  const onPress = useCallback(() => {
-    if (isDisabled) return;
+  useLayoutEffect(() => {
+    if (position) return ctx.register({ value, ...position, disabled: isDisabled });
+  }, [ctx.register, value, position, isDisabled]);
+
+  const onPress = useCallback((event?: GestureResponderEvent) => {
+    if (isDisabled || ((event?.nativeEvent as { detail?: number } | undefined)?.detail !== 0 && ctx.suppressPress())) return;
     ctx.onSelectValue(value, position);
     onPressProp?.();
-  }, [isDisabled, ctx, value, position, onPressProp]);
+  }, [ctx, value, position, onPressProp, isDisabled]);
 
   // We render the segment as a flat `Pressable` (not Bloom's `Button`)
   // for two reasons:
@@ -407,12 +483,12 @@ export function SegmentedControlItem({
           width: evt.nativeEvent.layout.width,
         };
         if (!ctx.selectedPosition && active) {
-          ctx.onSelectValue(value, measuredPosition);
+          ctx.updatePosition(measuredPosition);
         }
         setPosition(measuredPosition);
       }}>
       <Pressable
-        {...(IS_WEB ? ({ dataSet: { bloomSegmentedItem: '' } } as Record<string, unknown>) : {})}
+        {...(IS_WEB ? ({ dataSet: { bloomSegmentedItem: '' }, onKeyDown: ctx.allowKeyboardPress } as Record<string, unknown>) : {})}
         onPress={onPress}
         onHoverIn={onHoverIn}
         onHoverOut={onHoverOut}
@@ -485,8 +561,8 @@ function SegmentedThumb({
   width,
   palette,
 }: {
-  x: number;
-  width: number;
+  x: SharedValue<number>;
+  width: SharedValue<number>;
   palette: SegmentedPalette;
 }) {
   const base: ViewStyle = {
@@ -494,28 +570,14 @@ function SegmentedThumb({
     top: TRACK_PADDING,
     bottom: TRACK_PADDING,
     left: 0,
-    width,
     borderRadius: borderRadius.full,
     backgroundColor: palette.thumb,
     boxShadow: palette.thumbShadow,
   };
 
-  if (IS_WEB) {
-    const webStyle: WebCssStyle = {
-      ...base,
-      transform: [{ translateX: x }],
-      transitionProperty: 'transform, width',
-      transitionDuration: `${TRANSITION_MS}ms`,
-      transitionTimingFunction: 'ease',
-    };
-    return <View pointerEvents="none" style={webStyle} />;
-  }
-
-  return (
-    <Animated.View
-      pointerEvents="none"
-      layout={LinearTransition.duration(TRANSITION_MS).easing(Easing.bezier(0.25, 0.1, 0.25, 1))}
-      style={[base, { left: x }]}
-    />
-  );
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: width.value,
+    transform: [{ translateX: x.value }],
+  }), [x, width]);
+  return <Animated.View pointerEvents="none" style={[base, animatedStyle]} />;
 }

package/src/select/Select.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, {
   createContext,
   useCallback,
@@ -88,7 +89,9 @@ function useSelectContext(): SelectContextValue {
 // Select
 // ---------------------------------------------------------------------------
 
-export function Select({ children, value, onValueChange, disabled, size = 'md' }: SelectProps) {
+export function Select({ children, value, onValueChange, disabled, size: sizeProp }: SelectProps) {
+  const {size: inheritedSize} = useBloomAppearance({size: sizeProp}, {size: 'md', tone: 'neutral'});
+  const size = inheritedSize === 'xs' || inheritedSize === 'sm' ? 'sm' : 'md';
   const control = useDialogControl();
   const valueStoreState = useState<unknown>(undefined);
 

package/src/select/Select.web.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, {
   createContext,
   useContext,
@@ -159,7 +160,9 @@ function useSelectContext(): SelectContextValue {
 // Select
 // ---------------------------------------------------------------------------
 
-export function Select({ children, value, onValueChange, disabled, size = 'md' }: SelectProps) {
+export function Select({ children, value, onValueChange, disabled, size: sizeProp }: SelectProps) {
+  const {size: inheritedSize} = useBloomAppearance({size: sizeProp}, {size: 'md', tone: 'neutral'});
+  const size = inheritedSize === 'xs' || inheritedSize === 'sm' ? 'sm' : 'md';
   const [isOpen, setIsOpen] = useState(false);
   const triggerRef = useRef<View | null>(null);
   const valueStoreState = useState<unknown>(undefined);

package/src/settings-list/SettingsList.tsx

@@ -19,6 +19,7 @@ import type {
 export const SettingsListItem = memo<SettingsListItemProps>(function SettingsListItem({
   icon,
   title,
+  titleNumberOfLines = 1,
   description,
   value,
   rightElement,
@@ -59,7 +60,7 @@ export const SettingsListItem = memo<SettingsListItemProps>(function SettingsLis
       <View style={styles.textContainer}>
         <Text
           style={[styles.title, { color: titleColor }]}
-          numberOfLines={1}
+          numberOfLines={titleNumberOfLines === 0 ? undefined : titleNumberOfLines}
         >
           {title}
         </Text>

package/src/settings-list/types.ts

@@ -5,6 +5,16 @@ export interface SettingsListItemProps {
   icon?: React.ReactNode;
   /** Primary label */
   title: string;
+  /**
+   * How many lines the title may take before it truncates. Default `1`.
+   *
+   * One line is right for a setting, whose title is a NOUN ("Language",
+   * "Notifications") and whose value sits on the right. It is wrong for a row
+   * whose title is the CONTENT — a postal address, a full file name — where
+   * the tail that gets cut is the part that identifies it. `0` never
+   * truncates.
+   */
+  titleNumberOfLines?: number;
   /** Secondary description text below title */
   description?: string;
   /** Right-side value text (e.g. "English", "On") */

package/src/settings-modal/SettingsFields.tsx

@@ -59,12 +59,12 @@ export function SettingsTextField({
 
   return (
     <View style={styles.field}>
-      <TextField size="small" disabled={disabled}>
+      <TextField size="sm" disabled={disabled}>
         {icon ? <TextFieldIcon icon={icon} /> : null}
         <TextFieldInput
           label={label}
           value={draft}
-          onChangeText={setDraft}
+          onValueChange={setDraft}
           onSubmitEditing={commit}
           onBlur={commit}
           placeholder={placeholder}

package/src/settings-modal/SettingsStorage.tsx

@@ -488,7 +488,7 @@ export function SettingsStoragePage({
                   label="Search files"
                   placeholder="Search"
                   value={query}
-                  onChangeText={(text) => {
+                  onValueChange={(text) => {
                     setQuery(text);
                     setPage(1);
                   }}
@@ -564,7 +564,7 @@ export function SettingsStoragePage({
                         </Text>
                       </View>
                       <View style={[styles.cell, styles.sizeCol]}>
-                        <Chip size="large" style={{ backgroundColor: palette.secondary }} textStyle={{ color: palette.text }}>
+                        <Chip size="lg" style={{ backgroundColor: palette.secondary }} textStyle={{ color: palette.text }}>
                           {file.sizeLabel ?? formatFileSize(file.size)}
                         </Chip>
                       </View>
@@ -572,14 +572,7 @@ export function SettingsStoragePage({
                   )}
                   <View style={[styles.cell, compact ? null : styles.actionsCol, styles.actions]}>
                     <HoverTooltip label="Delete file">
-                      <Button
-                        variant="secondary"
-                        size="small"
-                        iconOnly
-                        leadingIcon={RiDeleteBin6Line}
-                        accessibilityLabel={`Delete ${file.name}`}
-                        onPress={() => deleteFile(file.id)}
-                      />
+                      <Button size="sm" icon={RiDeleteBin6Line} accessibilityLabel={`Delete ${file.name}`} onPress={() => deleteFile(file.id)} appearance="plain" tone="neutral" />
                     </HoverTooltip>
                     <RowMoreMenu file={file} actions={fileActions} onAction={onFileAction} />
                   </View>

package/src/settings-modal/SettingsTools.tsx

@@ -350,7 +350,7 @@ function ServerRow({
             {server.tools?.map((tool) => (
               <Chip
                 key={tool}
-                size="small"
+                size="sm"
                 style={{ backgroundColor: palette.secondary }}
                 textStyle={{ color: palette.textSecondary }}
               >
@@ -571,8 +571,8 @@ export function SettingsToolsPage({
             description="Wait indefinitely to authenticate when prompted. When off, skip authentication prompts after 30 seconds."
           >
             <Switch
-              value={waitForAuthentication}
-              onValueChange={onWaitForAuthenticationChange}
+              checked={waitForAuthentication}
+              onCheckedChange={onWaitForAuthenticationChange}
               accessibilityLabel="Wait for MCP authentication"
             />
           </SettingsRow>
@@ -599,7 +599,7 @@ export function SettingsToolsPage({
         description="Configured in the dashboard"
         inset={8}
         action={
-          <Button variant="secondary" size="small" onPress={onManageTeam}>
+          <Button size="sm" onPress={onManageTeam} appearance="subtle" tone="neutral">
             Manage
           </Button>
         }
@@ -617,7 +617,7 @@ export function SettingsToolsPage({
                 cloud.
               </Text>
             </View>
-            <Button variant="secondary" size="small" onPress={onConfigureTeam}>
+            <Button size="sm" onPress={onConfigureTeam} appearance="subtle" tone="neutral">
               Configure Team MCP Servers
             </Button>
           </View>

package/src/settings-modal/palette.ts

@@ -1,33 +1,5 @@
-/**
- * Settings-modal tokens, resolved from Bloom's theme through the
- * shared ramps (`button/shared.ts`) — the same ramps `Button`, the menus and
- * `AgentLimitsCard` paint from.
- *
- *   Token                                light            dark
- *   background/full                      card             neutral-925 (#121212)
- *   background/primary/default           card             neutral-800
- *   background/primary/hover             neutral-100      neutral-700 @60% over 800
- *   background/secondary/default         neutral-100      neutral-900
- *   background/secondary/hover           neutral-200      neutral-800
- *   background/tertiary/default          neutral-200      neutral-800
- *   background/tertiary/hover            neutral-300      neutral-700
- *   separator-border / border-table      neutral-200      neutral-800
- *   border/button/default                neutral-200      neutral-700
- *   border/button/hover                  neutral-300      neutral-500
- *   border/button/active                 neutral-400      neutral-600
- *   background/primary/active            neutral-200      neutral-800
- *   border/checkbox/default              neutral-300      neutral-700
- *   file-upload-icon background          neutral-300      neutral-600
- *   file-upload-icon foreground (hover)  neutral-400 (500) neutral-400 (300)
- *   text/primary                         text             text
- *   text/secondary, icon/secondary       neutral-500      neutral-500
- *   text/tertiary, icon/tertiary         neutral-400      neutral-600
- *   text/error/primary                   red-500          red-400
- *   accent-400 / accent-500              accent ramp      accent ramp
- *   lime-600 (Saved check)               success-600      success-600
- *   shadow-xs / shadow-dropdown          fixed light      fixed dark alphas
- */
-import { ACCENT_TABLE, BUTTON_SHADOW, colorRamp, DANGER_TABLE, mixColor, resolveButtonRamps, type Ramp } from '../button/shared';
+/** Surface and text slots read canonical theme roles; fixed shadow geometry is unchanged. */
+import { ACCENT_TABLE, BUTTON_SHADOW, colorRamp, DANGER_TABLE, resolveButtonRamps, type Ramp } from '../button/shared';
 import { MENU_SHADOW } from '../floating/menu-palette';
 import type { Theme } from '../theme/types';
 
@@ -68,74 +40,24 @@ export interface SettingsPalette {
 }
 
 export function resolveSettingsPalette(theme: Theme): SettingsPalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  const success = colorRamp(theme.colors.success, ACCENT_TABLE);
-  // `error`, not `negative`: the dark `negative` is M3's pale on-container pink
-  // (rgb 255 180 171 on the blue preset), so its ramp never reaches the
-  // saturated red-600 status dot. `error` stays saturated in both modes.
-  const danger = colorRamp(theme.colors.error, DANGER_TABLE);
-  const shared = {
-    text: theme.colors.text,
-    iconPrimary: theme.colors.text,
-    textSecondary: n[500],
-    iconSecondary: n[500],
-    accent,
-    neutral: n,
-    success,
-    danger,
-    ring: accent[500],
-    backdrop: 'rgba(0, 0, 0, 0.7)',
-  };
-  if (theme.isDark) {
-    return {
-      ...shared,
-      full: mixColor(n[900], n[950], 0.4),
-      primary: n[800],
-      primaryHover: mixColor(n[800], n[700], 0.6),
-      secondary: n[900],
-      secondaryHover: n[800],
-      secondaryHoverSoft: mixColor(n[900], n[800], 0.6),
-      tertiary: n[800],
-      tertiaryHover: n[700],
-      separator: n[800],
-      borderButton: n[700],
-      borderButtonHover: n[500],
-      borderButtonActive: n[600],
-      primaryActive: n[800],
-      borderCheckbox: n[700],
-      uploadIconBackground: n[600],
-      uploadIconForeground: n[400],
-      uploadIconForegroundHover: n[300],
-      textTertiary: n[600],
-      iconTertiary: n[600],
-      error: danger[400],
-      shadowXs: BUTTON_SHADOW.dark,
-      shadowDropdown: MENU_SHADOW.dark,
-    };
-  }
+  const c = theme.colors;
+  // Retained only for decorative artwork, categorical server tiles and status dots.
+  const { accent, neutral } = resolveButtonRamps(theme);
+  const success = colorRamp(c.success, ACCENT_TABLE);
+  const danger = colorRamp(c.error, DANGER_TABLE);
   return {
-    ...shared,
-    full: theme.colors.card,
-    primary: theme.colors.card,
-    primaryHover: n[100],
-    secondary: n[100],
-    secondaryHover: n[200],
-    secondaryHoverSoft: mixColor(n[100], n[200], 0.6),
-    tertiary: n[200],
-    tertiaryHover: n[300],
-    separator: n[200],
-    borderButton: n[200],
-    borderButtonHover: n[300],
-    borderButtonActive: n[400],
-    primaryActive: n[200],
-    borderCheckbox: n[300],
-    uploadIconBackground: n[300],
-    uploadIconForeground: n[400],
-    uploadIconForegroundHover: n[500],
-    textTertiary: n[400],
-    iconTertiary: n[400],
-    error: danger[500],
-    shadowXs: BUTTON_SHADOW.light,
-    shadowDropdown: MENU_SHADOW.light,
+    full: c.background, primary: c.card, primaryHover: c.backgroundSecondary,
+    secondary: c.backgroundSecondary, secondaryHover: c.backgroundTertiary,
+    secondaryHoverSoft: c.backgroundTertiary, tertiary: c.backgroundTertiary,
+    tertiaryHover: c.card, separator: c.borderLight, borderButton: c.border,
+    borderButtonHover: c.border, borderButtonActive: c.primary,
+    primaryActive: c.backgroundTertiary, borderCheckbox: c.border,
+    uploadIconBackground: c.backgroundTertiary, uploadIconForeground: c.textSecondary,
+    uploadIconForegroundHover: c.text, text: c.text, textSecondary: c.textSecondary,
+    textTertiary: c.textTertiary, iconPrimary: c.text, iconSecondary: c.textSecondary,
+    iconTertiary: c.textTertiary, error: c.errorSubtleForeground,
+    accent, neutral, success, danger, ring: c.primary, backdrop: 'rgba(0, 0, 0, 0.7)',
+    shadowXs: theme.isDark ? BUTTON_SHADOW.dark : BUTTON_SHADOW.light,
+    shadowDropdown: theme.isDark ? MENU_SHADOW.dark : MENU_SHADOW.light,
   };
 }