@oxy.so/bloom 5.4.0 → 6.0.0

package/src/select/types.ts

@@ -13,6 +13,8 @@ export type SelectProps = {
    */
   size?: SelectSize;
   value?: string;
+  /** Initial selection when value is uncontrolled. */
+  defaultValue?: string;
   onValueChange?: (value: string) => void;
   disabled?: boolean;
 };

package/src/settings-list/SettingsList.tsx

@@ -177,7 +177,8 @@ export const SettingsListGroup = memo<SettingsListGroupProps>(function SettingsL
       */}
       <Card
         clipContent
-        variant={variant ?? 'plain'}
+        appearance={variant === 'filled' ? 'subtle' : 'solid'}
+        elevation="none"
         radius="radius-16"
         style={{ backgroundColor }}
         testID={SETTINGS_LIST_GROUP_TEST_ID}

package/src/settings-list/surface.ts

@@ -67,6 +67,7 @@
  * component must not lose.
  */
 import { surfaceFillOn } from '../styles/surface-levels';
+import { parseRgba } from '../theme/color-utils';
 import type { Theme } from '../theme/types';
 import type { SettingsListGroupVariant } from './types';
 
@@ -99,14 +100,13 @@ export function settingsGroupSurface(
 ): string {
   if (variant === 'filled') return theme.colors.backgroundSecondary;
   if (variant === 'plain') return theme.colors.card;
-  // A string equality, and deliberately: every Bloom surface publishes a colour
-  // read off the SAME theme object — level 0 resolves to `colors.background`,
-  // `Dialog` and the sheet shell publish it verbatim, a panel repainted as the
-  // page publishes it through `surfaceColor` — so the two are identical by
-  // construction, not by luck. A consumer publishing an equal-but-differently-
-  // spelled colour falls through to the step, which is a legible surface on the
-  // page too — just not the one the palette names. Wrong-but-legible, never
-  // invisible, which is the direction this failure has to fall.
-  if (ambientFill === theme.colors.background) return theme.colors.card;
+  // Composition may re-emit the same colour in another CSS syntax. Compare
+  // resolved channels so an unchanged page backing stays on the page branch.
+  const actual = parseRgba(ambientFill);
+  const page = parseRgba(theme.colors.background);
+  if (ambientFill === theme.colors.background || (actual && page &&
+      actual.r === page.r && actual.g === page.g && actual.b === page.b && actual.a === page.a)) {
+    return theme.colors.card;
+  }
   return surfaceFillOn(theme, ambientFill);
 }

package/src/settings-modal/SettingsModal.tsx

@@ -1,3 +1,4 @@
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import React, {
   useCallback,
   useEffect,
@@ -30,7 +31,7 @@ import type { WebCssStyle } from '../styles/web-view-style';
 import { webDataSet } from '../styles/web-data';
 import { Text } from '../typography';
 import { SurfacePaint } from '../surface/SurfacePaint';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { SurfaceLevelProvider, surfaceFillVars, useSurfaceFill } from '../styles/surface-levels';
 import {
   SettingsModalContext,
   settingsLayoutFor,
@@ -144,7 +145,9 @@ export function SettingsModal({
   const common = useCommonMessages();
   const { messages } = useMessages(SETTINGS_MODAL_MESSAGES);
   useSettingsWebCss();
+  const parentFill = useSurfaceFill();
   const palette = useSettingsPalette();
+  const publishedFill = resolveSurfaceMaterial({ fill: palette.full, parentFill: parentFill }).publishedFill;
   const reducedMotion = useReducedMotion();
   const isControlled = controlledOpen !== undefined;
 
@@ -397,15 +400,15 @@ export function SettingsModal({
                           height: Math.min(PANEL_HEIGHT, vh - VIEWPORT_GUTTER * 2),
                         },
                     {
-                      backgroundColor: palette.full,
-                      ...surfaceFillVars(palette.full),
+                      backgroundColor: 'transparent',
+                      ...surfaceFillVars(publishedFill),
                       boxShadow: palette.shadowXs,
                     },
                     ringVars(palette),
                   ]}
                 >
-                  <SurfacePaint radius={layout === 'compact' ? 0 : 24} />
-                  <SurfaceLevelProvider level={1} fill={palette.full}>
+                  <SurfacePaint fill={palette.full} radius={layout === 'compact' ? 0 : 24} />
+                  <SurfaceLevelProvider level={1} fill={publishedFill}>
                   {layout === 'compact' ? (
                     compactPageOpen && pageConfig ? (
                       <View style={styles.content}>

package/src/shipment-request/ShipmentLoadPicker.tsx

@@ -193,7 +193,7 @@ function ShipmentLoadPickerComponent({
             min={1}
             max={maxQuantity}
             formatValue={labels.quantityValue}
-            size="small"
+            size="sm"
             disabled={disabled}
             style={{ paddingTop: 0, paddingBottom: 0 }}
             testID={id('quantity')}

package/src/sidebar/Sidebar.tsx

@@ -1,8 +1,7 @@
 import { SurfaceLevelProvider, surfaceFillVars, useSurfaceFill, useSurfaceLevelValue } from '../styles/surface-levels';
-import { resolveSurfaceFill } from '../surface/shared';
-import { useTheme } from '../theme/use-theme';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import { SurfacePaint } from '../surface/SurfacePaint';
-import { parseRgba, withAlpha } from '../theme/color-utils';
+import { parseRgba } from '../theme/color-utils';
 import { surfaceStyle } from '../shapes/surface-style';
 import { SURFACE_SHAPES } from '../design-tokens/shapes';
 import { useBloomAppearance } from '../appearance';
@@ -213,14 +212,13 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   const noResultsLabel = noResultsLabelProp ?? messages.noResults;
   const modesLabel = modesLabelProp ?? messages.mode;
   const palette = useSidebarPalette();
-  const theme = useTheme();
   const parentFill = useSurfaceFill();
   const parentLevel = useSurfaceLevelValue();
   const customSurface = StyleSheet.flatten(style);
-  const surfaceFill = customSurface?.backgroundColor ?? (surface === 'plain' ? undefined : withAlpha(palette.panel, 0.25));
+  const surfaceFill = customSurface?.backgroundColor ?? (surface === 'plain' ? undefined : (palette.panel));
   const hasFill = typeof surfaceFill === 'string' && surfaceFill !== 'transparent' && parseRgba(surfaceFill)?.a !== 0;
   const paintsSurface = surface !== 'plain' && hasFill;
-  const publishedFill = hasFill ? resolveSurfaceFill(surfaceFill, false, paintsSurface ? theme.colors.card : parentFill) : undefined;
+  const publishedFill = hasFill ? resolveSurfaceMaterial({ fill: surfaceFill, parentFill, paint: paintsSurface }).publishedFill : undefined;
   const canonicalSize = sizeProp === 'small' ? 'sm' : sizeProp === 'medium' ? 'md' : sizeProp === 'large' ? 'lg' : sizeProp;
   const {size: scopedSize} = useBloomAppearance({size: canonicalSize}, {size: 'md', tone: 'neutral'});
   const size = scopedSize === 'xs' ? 'sm' : scopedSize;

package/src/sortable-media/SortablePhotoGrid.tsx

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef,
 import { Image, Platform, Pressable, View } from 'react-native';
 
 import { Button } from '../button';
-import { mixColor, resolveButtonRamps } from '../button/shared';
+import { resolveButtonRamps } from '../button/shared';
 import { webDataSet } from '../styles/web-data';
 import { resolveMenuPalette } from '../floating/menu-palette';
 import { useInteractionState } from '../hooks/use-interaction-state';
@@ -572,13 +572,13 @@ const PhotoTile = memo(function PhotoTile({
               {onRemove ? (
                 <View style={{ position: 'absolute', top: 6, right: 6 }}>
                   <Button
-                    variant="secondary"
-                    size="small"
+
+                    size="sm"
                     iconOnly
                     leadingIcon={RiCloseLine}
                     accessibilityLabel={labels.remove(position)}
                     onPress={() => onRemove(photo.id)}
-                    testID={testID ? `${testID}-remove` : undefined}
+                    testID={testID ? `${testID}-remove` : undefined} tone="neutral" appearance="outline"
                   />
                 </View>
               ) : null}
@@ -589,14 +589,14 @@ const PhotoTile = memo(function PhotoTile({
                     style={{ position: 'absolute', bottom: 6, left: 6 }}
                   >
                     <Button
-                      variant="secondary"
-                      size="small"
+
+                      size="sm"
                       iconOnly
                       leadingIcon={RiArrowLeftSLine}
                       accessibilityLabel={labels.moveEarlier(position)}
                       disabled={position === 1}
                       onPress={() => onMove(photo.id, 'earlier')}
-                      testID={testID ? `${testID}-earlier` : undefined}
+                      testID={testID ? `${testID}-earlier` : undefined} tone="neutral" appearance="outline"
                     />
                   </View>
                   <View
@@ -604,14 +604,14 @@ const PhotoTile = memo(function PhotoTile({
                     style={{ position: 'absolute', bottom: 6, right: 6 }}
                   >
                     <Button
-                      variant="secondary"
-                      size="small"
+
+                      size="sm"
                       iconOnly
                       leadingIcon={RiArrowRightSLine}
                       accessibilityLabel={labels.moveLater(position)}
                       disabled={position === total}
                       onPress={() => onMove(photo.id, 'later')}
-                      testID={testID ? `${testID}-later` : undefined}
+                      testID={testID ? `${testID}-later` : undefined} tone="neutral" appearance="outline"
                     />
                   </View>
                 </>
@@ -664,7 +664,7 @@ function UploadOverlay({
         style={{ width: '60%', alignItems: 'center', gap: 6 }}
       >
         {progress === undefined ? (
-          <Loading variant="spinner" size="small" color={paint.onMedia} />
+          <Loading variant="spinner" size="sm" color={paint.onMedia} />
         ) : (
           <>
             <Text variant="caption-1-semibold" style={{ color: paint.onMedia, fontVariant: ['tabular-nums'] }}>
@@ -727,11 +727,11 @@ function ErrorOverlay({
       )}
       {onRetry ? (
         <Button
-          variant="secondary"
+
           size="xs"
           onPress={onRetry}
           accessibilityLabel={labels.retry(position)}
-          testID={testID ? `${testID}-retry` : undefined}
+          testID={testID ? `${testID}-retry` : undefined} tone="neutral" appearance="outline"
         >
           {labels.retryAction}
         </Button>

package/src/stay-filters/AmenityFilter.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
 
-import { Button } from '../button';
+import { LinkButton } from '../button';
 import { ToggleChipGroup } from './ToggleChipGroup';
 import type { AmenityFilterProps } from './types';
 import { useCommonMessages } from '../locale/common-messages';
@@ -47,11 +47,11 @@ export function AmenityFilter<T extends string = string>({
       />
       {foldable ? (
         <View style={{ alignItems: 'flex-start' }}>
-          <Button
-            variant="link"
+          <LinkButton
+
             linkTone="text"
             underline="rest"
-            size="small"
+            size="sm"
             textVariant="body-semibold"
             style={{ paddingTop: 6, paddingBottom: 6, marginTop: -6, marginBottom: -6 }}
             aria-expanded={expanded}
@@ -59,7 +59,7 @@ export function AmenityFilter<T extends string = string>({
             testID={testID ? `${testID}-toggle` : undefined}
           >
             {expanded ? showLessLabel : showMoreLabel}
-          </Button>
+          </LinkButton>
         </View>
       ) : null}
     </View>

package/src/stay-filters/FilterFooter.tsx

@@ -1,8 +1,8 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import { View } from 'react-native';
 
-import { Button } from '../button';
-import { resolveButtonRamps } from '../button/shared';
+import { Button , LinkButton } from '../button';
+
 import { useTheme } from '../theme/use-theme';
 import { useMessages } from '../locale/messages';
 import { STAY_FILTERS_MESSAGES } from './messages';
@@ -56,11 +56,11 @@ function FilterFooterComponent({
         style,
       ]}
     >
-      <Button
-        variant="link"
+      <LinkButton
+
         linkTone="text"
         underline="rest"
-        size="small"
+        size="sm"
         textVariant="body-semibold"
         style={{ paddingTop: 6, paddingBottom: 6, marginTop: -6, marginBottom: -6 }}
         onPress={onClear}
@@ -68,15 +68,15 @@ function FilterFooterComponent({
         testID={testID ? `${testID}-clear` : undefined}
       >
         {clearLabel}
-      </Button>
+      </LinkButton>
       <Button
-        variant="primary"
-        size="large"
+
+        size="lg"
         onPress={onApply}
         loading={loading}
         disabled={applyDisabled}
         accessibilityLabel={resultsLabel}
-        testID={testID ? `${testID}-apply` : undefined}
+        testID={testID ? `${testID}-apply` : undefined} tone="accent" appearance="solid"
       >
         {resultsLabel}
       </Button>

package/src/stay-filters/FilterTriggerButton.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, { memo } from 'react';
 import { View } from 'react-native';
 
@@ -21,11 +22,14 @@ function FilterTriggerButtonComponent({
   onPress,
   label: labelProp,
   accessibilityLabel,
-  size = 'medium',
+  size: sizeProp,
   disabled,
   style,
   testID,
 }: FilterTriggerButtonProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = inheritedSize;
+
   const { messages } = useMessages(STAY_FILTERS_MESSAGES);
   const label = labelProp ?? messages.filters;
   const applied = count > 0;
@@ -33,13 +37,13 @@ function FilterTriggerButtonComponent({
 
   const button = (
     <Button
-      variant="outline"
+
       size={size}
       leadingIcon={RiEqualizerLine}
       onPress={onPress}
       disabled={disabled}
       accessibilityLabel={name}
-      testID={testID}
+      testID={testID} tone="neutral" appearance="outline"
     >
       {label}
     </Button>

package/src/stay-filters/SegmentedFilter.tsx

@@ -21,7 +21,7 @@ export function SegmentedFilter<T extends string = string>({
     <SegmentedControl
       label={accessibilityLabel}
       type="radio"
-      size="large"
+      size="lg"
       value={value}
       onChange={onValueChange}
       style={[{ alignSelf: 'stretch' }, style]}

package/src/stay-filters/SwitchFilterRow.tsx

@@ -46,8 +46,8 @@ function SwitchFilterRowComponent({
         )}
       </View>
       <Switch
-        value={value}
-        onValueChange={onValueChange}
+        checked={value}
+        onCheckedChange={onValueChange}
         disabled={disabled}
         accessibilityLabel={name}
         testID={testID}

package/src/stay-filters/types.ts

@@ -197,8 +197,8 @@ export interface FilterTriggerButtonProps {
    * (the badge is a drawn number, so the name has to say it).
    */
   accessibilityLabel?: string;
-  /** `Button` size. Default `medium`. */
-  size?: 'small' | 'medium' | 'large';
+  /** `Button` size. Default `md`. */
+  size?: 'sm' | 'md' | 'lg';
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
   testID?: string;

package/src/stay-search/GuestPicker.tsx

@@ -1,8 +1,8 @@
 import React, { memo } from 'react';
 import { View } from 'react-native';
 
-import { Button } from '../button';
-import { resolveButtonRamps } from '../button/shared';
+import { LinkButton } from '../button';
+
 import { StepperRow } from '../stepper';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -48,7 +48,7 @@ function GuestPickerComponent({
   note,
   onClose,
   closeLabel: closeLabelProp,
-  size = 'medium',
+  size,
   style,
   testID,
 }: GuestPickerProps) {
@@ -102,9 +102,9 @@ function GuestPickerComponent({
       ) : null}
       {close ? (
         <View style={{ alignItems: 'flex-end', paddingTop: 12 }}>
-          <Button variant="link" size="small" onPress={close} testID={testID ? `${testID}-close` : undefined}>
+          <LinkButton  size="sm" onPress={close} testID={testID ? `${testID}-close` : undefined}>
             {closeLabel}
-          </Button>
+          </LinkButton>
         </View>
       ) : null}
     </View>

package/src/stay-search/StaySearchCompact.tsx

@@ -114,14 +114,14 @@ function StaySearchCompactComponent({
       </Pressable>
       {onFilterPress ? (
         <Button
-          variant="secondary"
-          size="medium"
+
+          size="md"
           iconOnly
           icon={filterIcon}
           onPress={onFilterPress}
           accessibilityLabel={filterLabel}
           testID={testID ? `${testID}-filter` : undefined}
-          style={{ marginRight: 9, flexShrink: 0 }}
+          style={{ marginRight: 9, flexShrink: 0 }} tone="neutral" appearance="outline"
         />
       ) : null}
     </View>

package/src/stay-search/types.ts

@@ -169,7 +169,7 @@ export interface GuestPickerProps {
   onClose?: () => void;
   /** `"Close"` in English; follows the locale. */
   closeLabel?: string;
-  /** Stepper size. Default `'medium'`; `'small'` for a popover. */
+  /** Stepper size. Default `'md'`; `'sm'` for a popover. */
   size?: StepperSize;
   style?: StyleProp<ViewStyle>;
   /** Derives `-<kind>` per row (then the stepper's own suffixes). */

package/src/stepper/Stepper.tsx

@@ -1,4 +1,5 @@
-import React, { memo, useCallback, useMemo } from 'react';
+import { useBloomAppearance } from '../appearance';
+import React, { memo, useCallback } from 'react';
 import { Platform, View, type AccessibilityActionEvent } from 'react-native';
 
 import { Button } from '../button';
@@ -51,10 +52,10 @@ const IS_WEB = Platform.OS === 'web';
 
 const SIZE_CONFIG: Record<
   StepperSize,
-  { button: 'small' | 'medium'; type: TypeScaleVariant; valueWidth: number; height: number; gap: number }
+  { button: 'sm' | 'md'; type: TypeScaleVariant; valueWidth: number; height: number; gap: number }
 > = {
-  small: { button: 'small', type: 'body-semibold', valueWidth: 24, height: 32, gap: 8 },
-  medium: { button: 'medium', type: 'headline-semibold', valueWidth: 32, height: 36, gap: 12 },
+  sm: { button: 'sm', type: 'body-semibold', valueWidth: 24, height: 32, gap: 8 },
+  md: { button: 'md', type: 'headline-semibold', valueWidth: 32, height: 36, gap: 12 },
 };
 
 /** Snap to `step` from `min` and clamp, without floating-point drift. */
@@ -90,7 +91,7 @@ function StepperComponent({
   max,
   step = 1,
   disabled: disabledProp = false,
-  size = 'medium',
+  size: sizeProp,
   formatValue,
   accessibilityLabel,
   decrementLabel: decrementLabelProp,
@@ -100,6 +101,8 @@ function StepperComponent({
   style,
   testID,
 }: StepperProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = inheritedSize === 'xs' || inheritedSize === 'sm' ? 'sm' : 'md';
   const common = useCommonMessages();
   const { messages } = useMessages(STEPPER_MESSAGES);
   const decrementLabel = decrementLabelProp ?? messages.decrease;
@@ -198,7 +201,7 @@ function StepperComponent({
       style={[{ flexDirection: 'row', alignItems: 'center', gap: config.gap }, style]}
     >
       <Button
-        variant="secondary"
+
         size={config.button}
         iconOnly
         icon={removes ? RiDeleteBinLine : RiSubtractLine}
@@ -206,11 +209,13 @@ function StepperComponent({
         disabled={!(canDecrement || removes)}
         accessibilityLabel={removes ? removeLabel : decrementLabel}
         tabIndex={removes ? 0 : -1}
-        testID={testID ? `${testID}-decrement` : undefined}
+        testID={testID ? `${testID}-decrement` : undefined} tone="neutral" appearance="outline"
       />
       <View
         accessibilityRole="adjustable"
         accessibilityLabel={field.accessibilityLabel}
+        aria-describedby={field.describedBy}
+        aria-invalid={field.invalid || undefined}
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuenow={value}
@@ -236,7 +241,7 @@ function StepperComponent({
         </Text>
       </View>
       <Button
-        variant="secondary"
+
         size={config.button}
         iconOnly
         icon={RiAddLine}
@@ -244,7 +249,7 @@ function StepperComponent({
         disabled={!canIncrement}
         accessibilityLabel={incrementLabel}
         tabIndex={-1}
-        testID={testID ? `${testID}-increment` : undefined}
+        testID={testID ? `${testID}-increment` : undefined} tone="neutral" appearance="outline"
       />
     </View>
   );

package/src/stepper/types.ts

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-/** `small` pairs 32px buttons with body text; `medium` (default) 38px buttons with headline text. */
-export type StepperSize = 'small' | 'medium';
+/** `sm` pairs 32px buttons with body text; `md` (default) 36px buttons with headline text. */
+export type StepperSize = 'sm' | 'md';
 
 export interface StepperProps {
   /** The current value. The stepper is fully controlled. */
@@ -17,7 +17,7 @@ export interface StepperProps {
   step?: number;
   /** Disables both buttons and the keyboard. */
   disabled?: boolean;
-  /** Default `medium`. */
+  /** Default `md`. */
   size?: StepperSize;
   /** How the value is drawn and announced (`aria-valuetext`), e.g. `(n) => \`${n}+\``. */
   formatValue?: (value: number) => string;

package/src/styles/surface-levels.ts

@@ -103,6 +103,7 @@ import { Platform, type ViewStyle } from 'react-native';
 
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
+import { BloomThemeContext } from '../theme/BloomThemeProvider';
 import { mixColors, quietText } from './color-contrast';
 import { RING_OFFSET_VAR } from './interactive-web-css';
 import type { WebCssStyle } from './web-view-style';
@@ -360,6 +361,13 @@ export function useSurfaceLevel(delta: number = 0): SurfaceLevelPaint {
  * app does not repeat a guess at every call site and does not have to be swept
  * when a container changes what it paints.
  */
+/** Optional ambient fill for layout containers that also work without a theme. */
+export function useOptionalSurfaceFill(): string | undefined {
+  const theme = useContext(BloomThemeContext)?.theme;
+  const { level, fill } = useContext(SurfaceLevelContext);
+  return fill ?? (theme ? levelBackground(theme, level) : undefined);
+}
+
 export function useSurfaceFill(): string {
   const theme = useTheme();
   const { level, fill } = useContext(SurfaceLevelContext);

package/src/surface/Surface.tsx

@@ -1,30 +1,25 @@
-import { surfaceStyle } from '../shapes/surface-style';
+import { resolveSurfaceGeometry } from './resolve-surface-geometry';
 import { SURFACE_SHAPES } from '../design-tokens/shapes';
 import React, { forwardRef, memo } from 'react';
 import { styled } from 'react-native-css';
 import { Platform, StyleSheet, type View } from 'react-native';
-import { parseRgba, withAlpha } from '../theme/color-utils';
 import { StyledView } from '../styles/styled-primitives';
 import { borderRadius } from '../styles/tokens';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
-import { useSurfaceLayer } from './use-surface-layer';
-import { resolveSurfaceFill } from './shared';
+import { SurfaceLevelProvider } from '../styles/surface-levels';
+import { useResolvedSurface } from './use-resolved-surface';
 import { SurfacePaint } from './SurfacePaint';
 import type { SurfaceProps } from './types';
 
 /** Layout-neutral container: callers supply their own padding and content. */
 const SurfaceComponent = forwardRef<View, SurfaceProps>(function SurfaceComponent({
-  children, material = 'solid', fill, radius = borderRadius.xl, cornerCurve = SURFACE_SHAPES.panel.curve,
+  children, fill, radius, cornerCurve = SURFACE_SHAPES.panel.curve,
   style, className, accessibilityLabel, testID, ...hostProps
 }, ref) {
-  const glass = material === 'glass';
-  const layer = useSurfaceLayer();
   const resolvedStyle = StyleSheet.flatten(style);
-  const effectiveRadius = resolvedStyle?.borderRadius ?? radius;
-  const tint = fill ?? resolvedStyle?.backgroundColor ?? (glass ? withAlpha(layer.fill, 0.25) : layer.fill);
-  const painted = glass || (tint !== 'transparent' && parseRgba(String(tint))?.a !== 0);
-  const color = resolveSurfaceFill(String(tint), glass, layer.parentFill);
-  const publishedFill = painted ? resolveSurfaceFill(color, false, layer.parentFill) : layer.parentFill;
+  const geometry = resolveSurfaceGeometry(radius, style, borderRadius.xl, cornerCurve);
+
+  const override = fill ?? resolvedStyle?.backgroundColor;
+  const material = useResolvedSurface({ fill: override === undefined ? undefined : String(override) });
   return (
     <StyledView
       {...hostProps}
@@ -32,10 +27,10 @@ const SurfaceComponent = forwardRef<View, SurfaceProps>(function SurfaceComponen
       className={className}
       accessibilityLabel={accessibilityLabel}
       testID={testID}
-      style={[{ position: 'relative', borderRadius: effectiveRadius, ...surfaceStyle({ curve: cornerCurve }) }, style, { backgroundColor: 'transparent', ...surfaceFillVars(painted ? publishedFill : undefined) }]}
+      style={[{ position: 'relative' }, style, { backgroundColor: 'transparent', ...material.vars, ...geometry.style }]}
     >
-      {painted ? <SurfacePaint fill={color} backdrop={layer.parentFill} radius={effectiveRadius} shape={{ curve: cornerCurve }} glass={glass} /> : null}
-      <SurfaceLevelProvider level={painted ? layer.level : layer.parentLevel} fill={publishedFill}>{children}</SurfaceLevelProvider>
+      {material.painted ? <SurfacePaint fill={material.paintFill} radius={geometry.radius} shape={geometry.shape} /> : null}
+      <SurfaceLevelProvider level={material.level} fill={material.publishedFill}>{children}</SurfaceLevelProvider>
     </StyledView>
   );
 });