@oxy.so/bloom 5.4.0 → 6.0.0

package/src/composer-panel/ComposerPillBase.tsx

@@ -1,7 +1,7 @@
 import { useComposerButton } from './context';
 import { COMPOSER_BUTTON_LAYOUT } from './button-layout';
 import { SurfaceLevelProvider, surfaceFillVars, useSurfaceFill, useSurfaceLevelValue } from '../styles/surface-levels';
-import { resolveSurfaceFill } from '../surface/shared';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { parseRgba } from '../theme/color-utils';
 import { SurfacePaint } from '../surface/SurfacePaint';
@@ -73,7 +73,7 @@ function GlassChip({ shown, radius, dark }: { shown: boolean; radius: number; da
   const fade = useAnimatedStyle(() => ({ opacity: opacity.value }), [opacity]);
   if (!mounted) return null;
   return <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, fade]}>
-    <SurfacePaint fill={`rgba(255, 255, 255, ${dark ? 0.06 : 0.12})`} radius={radius} glass />
+    <SurfacePaint fill={`rgba(255, 255, 255, ${dark ? 0.06 : 0.12})`} radius={radius} />
   </Animated.View>;
 }
 
@@ -587,7 +587,7 @@ export function ComposerPillBase({
   const paintsSurface = surface && typeof surfaceFill === 'string' && surfaceFill !== 'transparent' && parseRgba(surfaceFill)?.a !== 0;
   const ownFill = paintsSurface ? surfaceFill : customSurface?.backgroundColor;
   const publishedFill = typeof ownFill === 'string' && ownFill !== 'transparent' && parseRgba(ownFill)?.a !== 0
-    ? resolveSurfaceFill(ownFill, false, paintsSurface ? theme.colors.card : parentFill) : undefined;
+    ? resolveSurfaceMaterial({ fill: ownFill, parentFill, paint: paintsSurface }).publishedFill : undefined;
   const pillStyle: WebCssStyle = {
     width: '100%',
     height: pillHeight,

package/src/composer-panel/ComposerPopover.tsx

@@ -1,5 +1,5 @@
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
-import { resolveSurfaceFill } from '../surface/shared';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
+import { SurfaceLevelProvider, surfaceFillVars, useOptionalSurfaceFill } from '../styles/surface-levels';
 /**
  * The composer's anchored panel — NATIVE.
  *
@@ -66,10 +66,11 @@ export function ComposerPopover({
 }: ComposerPopoverProps) {
   const theme = useContext(BloomThemeContext)?.theme;
   const panelStyle = StyleSheet.flatten(style);
+  const parentFill = useOptionalSurfaceFill() ?? theme?.colors.background ?? 'transparent';
   const fill = panelStyle?.backgroundColor ?? theme?.colors.card;
   const paintsSurface = Boolean(theme) && typeof fill === 'string' && fill !== 'transparent' && parseRgba(fill)?.a !== 0;
 
-  const publishedFill = paintsSurface ? resolveSurfaceFill(fill as string, false, theme!.colors.card) : undefined;
+  const publishedFill = paintsSurface ? resolveSurfaceMaterial({ fill: fill as string, parentFill: parentFill }).publishedFill : undefined;
   const content = publishedFill ? <SurfaceLevelProvider level={1} fill={publishedFill}>{children}</SurfaceLevelProvider> : children;
   const common = useCommonMessages();
   const window = useWindowDimensions();

package/src/composer-panel/PermissionMenu.tsx

@@ -211,7 +211,7 @@ function PermissionRow({
 /** A secondary small `LinkButton`, a step lighter: tertiary, underline on hover. */
 function LearnMore({ label, onPress }: { label: string; onPress: () => void }) {
   const Button = useComposerButton();
-  return <Button variant="link" linkTone="text" underline="hover" size="sm"
+  return <Button appearance="plain" linkTone="text" underline="hover" size="sm"
     accessibilityRole="link" accessibilityLabel={label} onPress={onPress}
     style={COMPOSER_BUTTON_LAYOUT}>{label}</Button>;
 }

package/src/contact-card/ContactProfileCard.tsx

@@ -256,7 +256,7 @@ function ContactProfileCardComponent({
           <Button
             key={channel.kind + String(index)}
             appearance="solid" tone="neutral"
-            size="small"
+            size="sm"
             iconOnly={!labelled}
             leadingIcon={channel.icon ?? spec.icon}
             onPress={channel.onPress}

package/src/content-panel/ContentPanel.tsx

@@ -1,3 +1,4 @@
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 /**
  * Native variant of `ContentPanel` — the framed app-content surface.
  *
@@ -32,11 +33,11 @@
  */
 import React, { memo } from 'react';
 import { SurfacePaint } from '../surface/SurfacePaint';
-import { StyleSheet, useWindowDimensions, type StyleProp, type ViewStyle } from 'react-native';
+import { StyleSheet, useWindowDimensions } from 'react-native';
 
 import { useOptionalPanelChrome } from '../styles/panel-chrome';
 import { StyledView } from '../styles/styled-primitives';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { SurfaceLevelProvider, surfaceFillVars, useOptionalSurfaceFill } from '../styles/surface-levels';
 import {
   ContentPanelNestingContext,
   useContentPanelNestingGuard,
@@ -92,10 +93,12 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   useContentPanelNestingGuard();
   const panelChrome = useOptionalPanelChrome();
   // What the panel tells its subtree it is painted in (`./shared.ts`).
-  const publishedFill = usePanelSurfaceFill(surfaceClassName, surfaceStyle, surfaceColor);
-  const defaultFill = usePanelSurfaceFill(surfaceClassName, surfaceStyle, undefined);
+  const rawFill = usePanelSurfaceFill(surfaceClassName, surfaceStyle, surfaceColor);
+  const defaultFill = rawFill;
   const { width } = useWindowDimensions();
-  const paintsSurface = Boolean(defaultFill) && (framed ?? width >= framedFrom);
+  const parentFill = useOptionalSurfaceFill();
+  const paintsSurface = Boolean(defaultFill) && parentFill !== undefined && (framed ?? width >= framedFrom);
+  const publishedFill = rawFill && paintsSurface ? resolveSurfaceMaterial({ fill: rawFill, parentFill: parentFill! }).publishedFill : rawFill;
   const radius = StyleSheet.flatten(surfaceStyle)?.borderRadius ?? 28;
 
   // Tri-state: `undefined` → responsive (breakpoint-gated), `true` → always
@@ -137,6 +140,7 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
           surfaceFillVars(publishedFill),
           chromeStyle,
           surfaceStyle,
+          paintsSurface ? { backgroundColor: 'transparent' } : null,
         ]}
       >
         {paintsSurface ? <SurfacePaint fill={defaultFill!} radius={radius} /> : null}

package/src/content-panel/ContentPanel.web.tsx

@@ -1,3 +1,4 @@
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 /**
  * Web variant of `ContentPanel` — the framed app-content surface.
  *
@@ -87,14 +88,14 @@
  */
 import React, { memo, useInsertionEffect } from 'react';
 import { useSurfaceMaterial } from '../surface/use-surface-material.web';
-import { type StyleProp, type ViewStyle } from 'react-native';
+import { useWindowDimensions, type ViewStyle } from 'react-native';
 
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { StyledView } from '../styles/styled-primitives';
 
 import { useOptionalPanelChrome } from '../styles/panel-chrome';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { SurfaceLevelProvider, surfaceFillVars, useOptionalSurfaceFill } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import {
   ContentPanelNestingContext,
@@ -155,10 +156,6 @@ const RESPONSIVE_WEB: Record<
 // without reaching adjacent controls. CSS owns
 // responsive framing, including the sticky inset inherited by PageHeader.
 const PANEL_INSET_CSS = `
-@media (width < 500px) { [data-bloom-panel-material][data-bloom-panel-material="500"]::after { content: none; } }
-@media (width < 640px) { [data-bloom-panel-material][data-bloom-panel-material="640"]::after { content: none; } }
-@media (width < 768px) { [data-bloom-panel-material][data-bloom-panel-material="768"]::after { content: none; } }
-@media (width < 1024px) { [data-bloom-panel-material][data-bloom-panel-material="1024"]::after { content: none; } }
 
 [data-bloom-panel] { --bloom-panel-sticky-top: 0px; }
 [data-bloom-panel="framed"] { --bloom-panel-sticky-top: var(--bloom-panel-inset-top); }
@@ -202,9 +199,13 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   // outside a provider.
   const panelChrome = useOptionalPanelChrome();
   // What the panel tells its subtree it is painted in (`./shared.ts`).
-  const publishedFill = usePanelSurfaceFill(surfaceClassName, surfaceStyle, surfaceColor);
-  const defaultFill = usePanelSurfaceFill(surfaceClassName, surfaceStyle, undefined);
-  const materialStyle = useSurfaceMaterial('[data-bloom-panel-material]', 'bloom-content-panel-material');
+  const rawFill = usePanelSurfaceFill(surfaceClassName, surfaceStyle, surfaceColor);
+  const defaultFill = rawFill;
+  const { width } = useWindowDimensions();
+  const parentFill = useOptionalSurfaceFill();
+  const paintsSurface = Boolean(defaultFill) && parentFill !== undefined && (framed ?? width >= framedFrom);
+  const publishedFill = rawFill && paintsSurface ? resolveSurfaceMaterial({ fill: rawFill, parentFill: parentFill! }).publishedFill : rawFill;
+  const materialStyle = useSurfaceMaterial('[data-bloom-panel-material]', 'bloom-content-panel-material', defaultFill ?? 'transparent');
 
   // Tri-state: `undefined` → responsive (md:-gated), `true` → always framed,
   // `false` → never framed (full-bleed).
@@ -248,7 +249,7 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   const gridStackClass = boundToPanel
     ? 'web:grid web:[grid-template-columns:minmax(0,1fr)] web:[grid-template-rows:minmax(0,1fr)]'
     : '';
-  const surfaceClass = [surfaceBase, fillSurface, gridStackClass, surfaceClassName ?? 'bg-card'].filter(Boolean).join(' ');
+  const surfaceClass = [surfaceBase, fillSurface, gridStackClass, surfaceClassName ?? (paintsSurface ? 'bg-transparent' : 'bg-card')].filter(Boolean).join(' ');
   const contentClass = [contentBase, fillContent, boundToPanel ? 'web:[grid-area:1/1]' : '', contentClassName]
     .filter(Boolean)
     .join(' ');
@@ -291,16 +292,16 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
     <ContentPanelNestingContext.Provider value={true}>
       <StyledView
         testID="content-panel-surface"
-        {...{ dataSet: { bloomPanelMaterial: defaultFill && framed !== false ? (framed === true ? 'framed' : String(framedFrom)) : undefined, bloomPanel: boundToPanel || framed === false ? 'none' : responsive ? String(framedFrom) : 'framed' } }}
+        {...{ dataSet: { bloomPanelMaterial: paintsSurface ? 'framed' : undefined, bloomPanel: boundToPanel || framed === false ? 'none' : responsive ? String(framedFrom) : 'framed' } }}
         className={surfaceClass}
         style={[
           // `--bloom-surface` rides the element that carries the fill, so CSS
-          // below the panel and `useSurfaceFill()` below the panel cannot
+          // below the panel and `useOptionalSurfaceFill()` below the panel cannot
           // disagree about what the panel painted.
           surfaceFillVars(publishedFill),
           insetVars,
-          materialStyle,
           surfaceStyle,
+          paintsSurface ? materialStyle : null,
         ]}
       >
         {/* (1) Bleed-mask overlay — gutter box-shadow ring, below chrome. Not

package/src/content-panel/shared.ts

@@ -14,7 +14,7 @@
  * WHICH colour is the honest answer for a given set of props.
  */
 import { useContext } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 
 import { BloomThemeContext } from '../theme/BloomThemeProvider';
 
@@ -41,23 +41,11 @@ function repaintedByStyle(style: StyleProp<ViewStyle>): boolean {
 /**
  * The exact fill the panel publishes, or `undefined` when it cannot know it.
  *
- * Four cases, in order:
- *
- *  - `surfaceColor` given — the caller stated it; nothing beats that.
- *  - `surfaceClassName` given — the caller REPAINTED the surface with a utility
- *    Bloom cannot resolve to a colour (that is the whole point of the prop), so
- *    publishing `card` would be a confident lie. The panel falls back to
- *    publishing the rung alone, which is the weaker answer it had before —
- *    `surfaceColor` is how a caller in this case gets the exact one back.
- *  - `surfaceStyle` carrying a `backgroundColor` — the same repaint by the other
- *    door, and the panel has to stop claiming `card` for it too. The colour is
- *    right there, but WHICH of the two paints is a platform question the panel
- *    must not guess at: `styled()` appends the class descriptor AFTER the style
- *    prop, so on native the class wins the array, while on web the inline style
- *    wins the cascade. Publishing either one would be right on one platform and
- *    quietly wrong on the other, so the panel publishes neither and the caller
- *    names it with `surfaceColor`.
- *  - none of them — the panel paints `bg-card`, so it publishes `colors.card`.
+ * The explicit surfaceColor wins, followed by a string background in
+ * surfaceStyle. A class-only repaint is unknown unless its caller supplies
+ * surfaceColor. Otherwise the default card token is the raw fill.
+ * Framed hosts move this fill into translucent paint and publish its composite;
+ * unframed hosts retain the unmodified fill.
  *
  * Outside a `BloomThemeProvider` there is no palette to name, and the panel has
  * always rendered there on native, so this stays optional rather than throwing:
@@ -70,6 +58,8 @@ export function usePanelSurfaceFill(
 ): string | undefined {
   const ctx = useContext(BloomThemeContext);
   if (surfaceColor) return surfaceColor;
+  const background = StyleSheet.flatten(surfaceStyle)?.backgroundColor;
+  if (typeof background === 'string') return background;
   if (surfaceClassName) return undefined;
   if (repaintedByStyle(surfaceStyle)) return undefined;
   return ctx?.theme.colors.card;

package/src/creator-studio/ArtworkUploader.tsx

@@ -98,25 +98,25 @@ function ArtworkUploaderComponent({
             />
             <View style={styles.previewActions}>
               <Button
-                variant="secondary"
-                size="small"
+
+                size="sm"
                 leadingIcon={RiRefreshLine}
                 onPress={() => setReplacing(true)}
                 disabled={disabled}
-                testID={id('replace')}
+                testID={id('replace')} tone="neutral" appearance="outline"
               >
                 {labels.replace}
               </Button>
               {onRemove ? (
                 <Button
-                  variant="secondary"
-                  size="small"
+
+                  size="sm"
                   iconOnly
                   leadingIcon={RiDeleteBinLine}
                   accessibilityLabel={labels.remove}
                   onPress={onRemove}
                   disabled={disabled}
-                  testID={id('remove')}
+                  testID={id('remove')} tone="neutral" appearance="outline"
                 />
               ) : null}
             </View>
@@ -147,11 +147,11 @@ function ArtworkUploaderComponent({
 
       {replacing && uri ? (
         <Button
-          variant="secondary"
-          size="small"
+
+          size="sm"
           onPress={() => setReplacing(false)}
           style={styles.cancel}
-          testID={id('cancel')}
+          testID={id('cancel')} tone="neutral" appearance="outline"
         >
           {labels.cancel}
         </Button>

package/src/creator-studio/AudienceOverview.tsx

@@ -114,7 +114,7 @@ function AudienceOverviewComponent({
           ) : null}
         </View>
         <View testID={testID ? `${testID}-period` : undefined} style={stacked ? styles.periodStacked : null}>
-          <SegmentedControl label={periodLabel} type="radio" size="small" value={period} onChange={onPeriodChange}>
+          <SegmentedControl label={periodLabel} type="radio" size="sm" value={period} onChange={onPeriodChange}>
             {periods.map((option) => (
               <SegmentedControlItem
                 key={option.value}

package/src/creator-studio/CreditsEditor.tsx

@@ -129,14 +129,14 @@ function CreditsEditorComponent({
               />
             </View>
             <Button
-              variant="secondary"
-              size="medium"
+
+              size="md"
               iconOnly
               leadingIcon={RiDeleteBinLine}
               disabled={disabled}
               accessibilityLabel={labels.remove(index, credit.name)}
               onPress={() => remove(credit.id)}
-              testID={testID ? `${testID}-remove-${index}` : undefined}
+              testID={testID ? `${testID}-remove-${index}` : undefined} tone="neutral" appearance="outline"
             />
           </View>
         );
@@ -153,13 +153,13 @@ function CreditsEditorComponent({
       })}
 
       <Button
-        variant="secondary"
-        size="medium"
+
+        size="md"
         leadingIcon={RiAddLine}
         onPress={add}
         disabled={disabled}
         style={styles.add}
-        testID={testID ? `${testID}-add` : undefined}
+        testID={testID ? `${testID}-add` : undefined} tone="neutral" appearance="outline"
       >
         {labels.add}
       </Button>

package/src/creator-studio/MetadataFields.tsx

@@ -106,13 +106,13 @@ function ArtistChipsInputComponent({
           />
         </TextField>
         <Button
-          variant="secondary"
-          size="medium"
+
+          size="md"
           leadingIcon={RiAddLine}
           disabled={blocked || draft.trim() === ''}
           onPress={commit}
           accessibilityLabel={addName}
-          testID={testID ? `${testID}-add` : undefined}
+          testID={testID ? `${testID}-add` : undefined} tone="neutral" appearance="outline"
         >
           {addLabel}
         </Button>

package/src/creator-studio/PayoutSummaryCard.tsx

@@ -2,13 +2,13 @@ import React, { memo, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 
-import { Button } from '../button';
+import { LinkButton } from '../button';
 import { chartHueTone } from '../chart-cards/palette';
 import { bandSize } from '../chart-cards/geometry';
 import { CartesianPlot } from '../chart-cards/primitives/CartesianPlot';
 import { ChartCardSurface } from '../chart-cards/primitives/ChartCardSurface';
 import { TABULAR } from '../chart-cards/primitives/ChartHeader';
-import { describeDeltaRatio, groupThousands } from '../chart-cards/primitives/format';
+import { describeDeltaRatio } from '../chart-cards/primitives/format';
 import { useActiveIndex } from '../chart-cards/primitives/use-active-index';
 import { roundedBarPath, singleBarSlot } from '../chart-cards/rounded-bar-geometry';
 import { lerp, useChartProgress } from '../chart-cards/use-chart-progress';
@@ -187,9 +187,9 @@ function PayoutSummaryCardComponent({
       </View>
 
       {onViewStatements || statementsHref ? (
-        <Button
-          variant="link"
-          size="small"
+        <LinkButton
+
+          size="sm"
           trailingIcon={RiArrowRightSLine}
           onPress={onViewStatements}
           href={statementsHref}
@@ -197,7 +197,7 @@ function PayoutSummaryCardComponent({
           testID={testID ? `${testID}-statements` : undefined}
         >
           {labels.statements}
-        </Button>
+        </LinkButton>
       ) : null}
     </ChartCardSurface>
   );

package/src/creator-studio/PitchCard.tsx

@@ -183,7 +183,7 @@ function PitchCardComponent({
           </View>
         </View>
         {status === 'submitted' && onEdit ? (
-          <Button variant="secondary" size="medium" onPress={onEdit} style={styles.submit} testID={id('edit')}>
+          <Button  size="md" onPress={onEdit} style={styles.submit} testID={id('edit')} tone="neutral" appearance="outline">
             {labels.edit}
           </Button>
         ) : null}
@@ -250,14 +250,14 @@ function PitchCardComponent({
       />
 
       <Button
-        variant="primary"
-        size="medium"
+
+        size="md"
         leadingIcon={RiSendPlaneLine}
         onPress={onSubmit}
         disabled={!canSubmit}
         loading={submitting}
         style={styles.submit}
-        testID={id('submit')}
+        testID={id('submit')} tone="accent" appearance="solid"
       >
         {labels.submit}
       </Button>

package/src/creator-studio/TrackMetadataForm.tsx

@@ -163,8 +163,8 @@ function TrackMetadataFormComponent({
           </Text>
         </View>
         <Switch
-          value={value.explicit}
-          onValueChange={(v) => set('explicit', v)}
+          checked={value.explicit}
+          onCheckedChange={(v) => set('explicit', v)}
           disabled={disabled}
           accessibilityLabel={labels.explicit}
           testID={id('explicit')}

package/src/creator-studio/TrackUploadRow.tsx

@@ -244,24 +244,24 @@ function TrackUploadRowComponent({
       <View style={styles.actions}>
         {status === 'failed' && onRetry ? (
           <Button
-            variant="secondary"
+
             size="xs"
             leadingIcon={RiRefreshLine}
             onPress={onRetry}
-            testID={testID ? `${testID}-retry` : undefined}
+            testID={testID ? `${testID}-retry` : undefined} tone="neutral" appearance="outline"
           >
             {labels.retry}
           </Button>
         ) : null}
         {onRemove ? (
           <Button
-            variant="secondary"
-            size="small"
+
+            size="sm"
             iconOnly
             leadingIcon={RiCloseLine}
             accessibilityLabel={labels.remove(fileName)}
             onPress={onRemove}
-            testID={testID ? `${testID}-remove` : undefined}
+            testID={testID ? `${testID}-remove` : undefined} tone="neutral" appearance="outline"
           />
         ) : null}
       </View>

package/src/date-picker/TimeField.tsx

@@ -9,7 +9,7 @@ import { TYPE_SCALE } from '../typography';
 import { resolveCalendarPalette } from './palette';
 import { formatTime, parseTime, snapTime, stepTime } from './time';
 import type { TimeFieldProps, TimeFieldSize } from './types';
-import { useInheritedControl } from '../control-surface';
+import { useBloomAppearance } from '../appearance';
 import { useFieldMembership } from '../field/membership';
 
 /**
@@ -45,8 +45,8 @@ import { useFieldMembership } from '../field/membership';
  */
 
 const SIZE_CONFIG: Record<TimeFieldSize, { width: number; height: number; type: 'body-medium' | 'body-2-medium' }> = {
-  small: { width: 96, height: 32, type: 'body-2-medium' },
-  medium: { width: 104, height: 38, type: 'body-medium' },
+  sm: { width: 96, height: 32, type: 'body-2-medium' },
+  md: { width: 104, height: 38, type: 'body-medium' },
 };
 
 /** `transition-colors duration-100 ease-out` on the border. Web only. */
@@ -74,8 +74,8 @@ function TimeFieldComponent({
   // `"--:--"` names nothing, so the name is a prop — or, inside a `Field`, the
   // field's label. The density contract supplies the size the same way: a
   // container can ask for `small` once instead of on every control.
-  const density = useInheritedControl('density', sizeProp === 'small' ? 'sm' : sizeProp === 'medium' ? 'md' : undefined, 'md');
-  const size = density === 'sm' ? 'small' : 'medium';
+  const { size: density } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = density === 'xs' || density === 'sm' ? 'sm' : 'md';
   const field = useFieldMembership({ accessibilityLabel, disabled: disabledProp });
   const disabled = field.disabled;
   const palette = useMemo(() => resolveCalendarPalette(theme), [theme]);

package/src/date-picker/types.ts

@@ -231,7 +231,7 @@ export interface MeetingSchedulerProps extends CalendarConstraintProps {
 }
 
 /** `small` is a 32-tall field with body-2 text; `medium` (default) 38 with body. */
-export type TimeFieldSize = 'small' | 'medium';
+export type TimeFieldSize = 'sm' | 'md';
 
 export interface TimeFieldProps {
   /**

package/src/dialog/Dialog.tsx

@@ -1,7 +1,8 @@
+import { MOTION_RECIPES } from '../motion/recipes';
 import { surfaceStyle } from '../shapes/surface-style';
 import { SURFACE_SHAPES } from '../design-tokens/shapes';
 import { SurfacePaint } from '../surface/SurfacePaint';
-import { resolveSurfaceFill } from '../surface/shared';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import React, {
   useCallback,
   useEffect,
@@ -11,14 +12,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  Pressable,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
+import { StyleSheet, useWindowDimensions, View, type StyleProp, type ViewStyle } from 'react-native';
 import Animated, {
   type AnimatedStyle,
   cancelAnimation,
@@ -35,8 +29,8 @@ import { useTheme } from '../theme/use-theme';
 import { useIsRtl } from '../hooks/use-is-rtl';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { StyledView } from '../styles/styled-primitives';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
-import { Context, useDialogControl } from './context';
+import { SurfaceLevelProvider } from '../styles/surface-levels';
+import { Context } from './context';
 import { DialogBody } from './DialogContent';
 import { DialogBottomSheet } from './DialogBottomSheet';
 import {
@@ -58,12 +52,7 @@ import {
   physicalDialogSide,
   type DialogSidePlacement,
 } from './placement';
-import type {
-  DialogAction,
-  DialogControlProps,
-  DialogInset,
-  DialogProps,
-} from './types';
+import type { DialogControlProps, DialogInset, DialogProps } from './types';
 import { useMessages } from '../locale/messages';
 import { DIALOG_MESSAGES } from './messages';
 
@@ -492,7 +481,7 @@ function SideSheet({
 
   useEffect(() => {
     cancelAnimation(progress);
-    const timing = { duration: ANIMATION_DURATION, easing: Easing.out(Easing.cubic) };
+    const timing = { ...MOTION_RECIPES[open ? 'present' : 'dismiss'], duration: ANIMATION_DURATION, easing: Easing.out(Easing.cubic) };
     if (open) {
       setMounted(true);
       progress.value = withTiming(1, timing);
@@ -538,7 +527,8 @@ function SideSheet({
   );
 
   const panelRadius = StyleSheet.flatten([panelStyle, style])?.borderRadius ?? SURFACE_SHAPES.panel.radius;
-  const surfaceFill = resolveSurfaceFill(String(StyleSheet.flatten([panelStyle, style])?.backgroundColor ?? theme.colors.background), false, theme.colors.background);
+  const material = resolveSurfaceMaterial({ fill: String(StyleSheet.flatten([panelStyle, style])?.backgroundColor ?? theme.colors.background), parentFill: theme.colors.background, level: 0 });
+  const { paintFill, publishedFill: surfaceFill } = material;
   if (!mounted) return null;
 
   // The drawer uses the PAGE token as its tint and nominal surface for its
@@ -582,7 +572,7 @@ function SideSheet({
           sideStyles.panel,
           // `shadowColor` is a valid RN style prop on native (Dialog.tsx is the
           // native variant); the web `shadow*` deprecation is handled in Dialog.web.tsx.
-          { backgroundColor: 'transparent', pointerEvents: 'auto', ...surfaceFillVars(surfaceFill) },
+          { backgroundColor: 'transparent', pointerEvents: 'auto', ...material.vars },
           panelGeometry,
           panelAnimatedStyle,
           panelStyle,
@@ -590,8 +580,8 @@ function SideSheet({
           { backgroundColor: 'transparent' },
         ]}
       >
-        <SurfacePaint fill={surfaceFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={panelRadius} />
-        <SurfaceLevelProvider level={0} fill={surfaceFill}>
+        <SurfacePaint fill={paintFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={panelRadius} />
+        <SurfaceLevelProvider level={material.level} fill={surfaceFill}>
         {header ? (
           // Nav-header mode on a side drawer: a static titled bar (the drawer body
           // has no Dialog scroll offset to drive a collapse) over content inset