refactor: rebrand BottomSheet component (#1908)

packages/blade/.storybook/react/main.js

@@ -28,6 +28,7 @@ module.exports = {
     '../../src/components/Link/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Tooltip/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Typography/**/**/*.stories.@(ts|tsx|js|jsx)',
+    '../../src/components/BottomSheet/**/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Modal/**/**/*.stories.@(ts|tsx|js|jsx)',
     '../../docs/**/*.stories.mdx',
     '../../docs/**/*.stories.@(ts|tsx|js|jsx)',

packages/blade/src/components/BottomSheet/BottomSheet.native.tsx

@@ -31,7 +31,7 @@ const BottomSheetSurface = styled(BaseBox)(({ theme }) => {
     // TODO: we do not have 16px radius token
     borderTopLeftRadius: makeSpace(theme.spacing[5]),
     borderTopRightRadius: makeSpace(theme.spacing[5]),
-    backgroundColor: theme.colors.surface.background.level2.lowContrast,
+    backgroundColor: theme.colors.popup.background.subtle,
     justifyContent: 'center',
     alignItems: 'center',
     position: 'relative',