fix: adapt Toolbar to Surface rework

Author: k0ndee

src/components/IconButton/IconButton.tsx

@@ -16,7 +16,6 @@ import ActivityIndicator from '../ActivityIndicator';
 import CrossFadeIcon from '../CrossFadeIcon';
 import Icon from '../Icon';
 import type { IconSource } from '../Icon';
-import Surface from '../Surface';
 import {
   resolveIconColors as resolveToolbarIconColors,
   ToolbarColorContext,

src/components/Toolbar/Toolbar.tsx

@@ -9,8 +9,8 @@ import type { ColorScheme, Orientation, Variant } from './tokens';
 import { ToolbarColorContext } from './ToolbarColorContext';
 import { getSpacing, resolveContainerColor, resolveElevation } from './utils';
 import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../theme/types';
 import { resolveCornerRadius } from '../../theme/utils/shape';
-import type { ThemeProp } from '../../types';
 import Surface from '../Surface';
 
 export type Props = {
@@ -183,11 +183,9 @@ const Toolbar = ({
     <Surface
       ref={isDocked ? undefined : ref}
       elevation={elevation}
+      backgroundColor={backgroundColor}
+      borderRadius={borderRadius}
       style={[
-        {
-          backgroundColor,
-          borderRadius,
-        },
         isDocked && styles.dockedFill,
         styles.content,
         !isDocked && style,

src/components/Toolbar/ToolbarColorContext.ts

@@ -3,7 +3,7 @@ import type { ColorValue } from 'react-native';
 
 import { ToolbarTokens } from './tokens';
 import type { ColorScheme } from './tokens';
-import type { InternalTheme } from '../../types';
+import type { InternalTheme } from '../../theme/types';
 
 export const resolveColors = (colorScheme: ColorScheme) =>
   colorScheme === 'vibrant'

src/components/Toolbar/utils.ts

@@ -4,7 +4,7 @@ import { ToolbarTokens } from './tokens';
 import type { ColorScheme, Variant } from './tokens';
 import { resolveColors } from './ToolbarColorContext';
 import type { Elevation } from '../../theme/types';
-import type { InternalTheme } from '../../types';
+import type { InternalTheme } from '../../theme/types';
 
 /** Resolve the container (background) color; an explicit `containerColor` wins over `colorScheme`. */
 export const resolveContainerColor = ({

src/components/__tests__/Toolbar.test.tsx

@@ -87,7 +87,7 @@ it("applies `style` directly to the floating pill's outer (position) layer", asy
     </Toolbar>
   );
 
-  expect(screen.getByTestId('floating-outer-layer')).toHaveStyle({
+  expect(screen.getByTestId('floating')).toHaveStyle({
     position: 'absolute',
     top: 5,
   });
@@ -102,7 +102,7 @@ it("lets `style` override the floating pill's internal container styles", async
     </Toolbar>
   );
 
-  expect(screen.getByTestId('floating-outer-layer')).toHaveStyle({
+  expect(screen.getByTestId('floating')).toHaveStyle({
     height: 200,
   });
 });
@@ -388,7 +388,7 @@ it("leaves a Button child's explicit textColor/buttonColor untouched", async ()
 // `theme.colors` values are `rgba(r, g, b, 1)` strings convert to hex to
 // compare against the design spec's hex values directly.
 const toHex = (rgba: unknown) => {
-  const [r, g, b] = String(rgba).match(/\d+/g)!.map(Number);
+  const [r, g, b] = (String(rgba).match(/\d+/g) ?? []).map(Number);
   return (
     '#' +
     [r, g, b]