chore(PreviewTools): Include border prop

.yarn/patches/playroom-npm-1.2.1-6d189aed91.patch

@@ -1,3 +1,26 @@
+diff --git a/src/components/Preview/Preview.css.ts b/src/components/Preview/Preview.css.ts
+index 4431c0abe73040cc889164c25ceb92c46469ea53..42b612edf5a09feafbec1868f0871f289b3aac19 100644
+--- a/src/components/Preview/Preview.css.ts
++++ b/src/components/Preview/Preview.css.ts
+@@ -18,12 +18,10 @@ export const root = style([
+ ]);
+
+-export const rootEmbedded = style([
+-  sprinkles({
+-    borderRadius: 'medium',
+-  }),
+-  {
+-    border: `1px solid ${colorPaletteVars.border.standard}`,
+-  },
+-]);
++export const rootEmbedded = style([
++  {
++    borderRadius: '12px',
++  },
++  // Remove border for embedded previews
++]);
+
+ export const header = style([
 diff --git a/src/components/Preview/Preview.tsx b/src/components/Preview/Preview.tsx
 index 61a15c7f600a7302e9b6f034f8d021b3e3f4fda7..cde7a63b06c0ac357c42af0c5829d1ec605fb023 100644
 --- a/src/components/Preview/Preview.tsx

playroom/components/index.tsx

@@ -30,6 +30,7 @@ import IconAppleOff from '../icons/icon-apple-off';
 import IconCode from '../icons/icon-code';
 import * as styles from '../preview-tools.css';
 import {CSSTransition} from 'react-transition-group';
+import {useIsOsDarkModeEnabled} from '../../src/theme-context-provider';
 
 import type {ThemeConfig, ColorScheme, KnownSkinName, IconProps} from '../../src';
 
@@ -40,6 +41,11 @@ export {default as Animation} from './animation';
 
 type ValidSkinName = Exclude<KnownSkinName, 'O2' | 'Vivo' | 'Movistar' | 'Tu'>;
 
+const BrandIcon = ({Logo}: {Logo: React.ComponentType<{size: number; color?: string}>}) => {
+    const {isDarkMode} = useTheme();
+    return <Logo size={24} color={isDarkMode ? skinVars.colors.inverse : undefined} />;
+};
+
 const themesMap: {
     [skinName in ValidSkinName]: {
         themeConfig: ThemeConfig;
@@ -50,32 +56,32 @@ const themesMap: {
     'Movistar-new': {
         text: 'Movistar',
         themeConfig: Movistar_New,
-        Icon: () => <MovistarNewLogo size={24} />,
+        Icon: () => <BrandIcon Logo={MovistarNewLogo} />,
     },
     'Vivo-new': {
         text: 'Vivo',
         themeConfig: Vivo_New,
-        Icon: () => <VivoLogo size={24} />,
+        Icon: () => <BrandIcon Logo={VivoLogo} />,
     },
     'O2-new': {
         text: 'O2',
         themeConfig: O2_New,
-        Icon: () => <O2NewLogo size={24} />,
+        Icon: () => <BrandIcon Logo={O2NewLogo} />,
     },
     Telefonica: {
         text: 'Telefónica',
         themeConfig: Telefonica,
-        Icon: () => <TelefonicaLogo size={24} />,
+        Icon: () => <BrandIcon Logo={TelefonicaLogo} />,
     },
     Blau: {
         text: 'Blau',
         themeConfig: Blau,
-        Icon: () => <BlauLogo size={24} />,
+        Icon: () => <BrandIcon Logo={BlauLogo} />,
     },
     Esimflag: {
         text: 'Esimflag',
         themeConfig: Esimflag,
-        Icon: () => <EsimflagLogo size={24} />,
+        Icon: () => <BrandIcon Logo={EsimflagLogo} />,
     },
 };
 
@@ -228,11 +234,11 @@ type PreviewToolsProps = {
     floating?: boolean;
     position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
     showPlatformSelector?: boolean;
-    showColorSchemeSelector?: boolean;
     forceMobile?: boolean;
     forceDesktop?: boolean;
     forceTabs?: boolean;
     hide?: boolean;
+    showBorder?: boolean;
     children: React.ReactNode;
 };
 
@@ -247,6 +253,7 @@ export const PreviewTools = ({
     forceDesktop = false,
     forceTabs = false,
     hide,
+    showBorder = false,
 }: PreviewToolsProps): JSX.Element => {
     const {
         skinName: initialSkinName,
@@ -256,6 +263,7 @@ export const PreviewTools = ({
     const [os, setOs] = React.useState<'android' | 'ios' | 'desktop'>(initialOs);
     const [colorScheme, setColorScheme] = React.useState<ColorScheme>('light');
     const overrideTheme = useOverrideTheme();
+    const isOsDarkModeEnabled = useIsOsDarkModeEnabled();
 
     const [showControls, setShowControls] = React.useState(false);
     const controlsRef = React.useRef<HTMLDivElement | null>(null);
@@ -300,12 +308,12 @@ export const PreviewTools = ({
             platformOverrides: {platform: os},
             // Dont override mediaqueries for PreviewToolsControls, to avoid using Select instead of Tabs in desktop
             enableTabFocus: false,
-            colorScheme: 'light',
+            colorScheme,
             dimensions: {
                 headerMobileHeight: 'mistica',
             },
         };
-    }, [os, skinName]);
+    }, [colorScheme, os, skinName]);
 
     const controls = (
         <ThemeContextProvider theme={theme} as="div">
@@ -323,8 +331,17 @@ export const PreviewTools = ({
             />
         </ThemeContextProvider>
     );
+
+    const isDarkMode = colorScheme === 'dark' || (colorScheme === 'auto' && isOsDarkModeEnabled);
+    const border = showBorder && !isDarkMode ? <div className={styles.previewBorder} /> : undefined;
+
     if (hide) {
-        return <>{children}</>;
+        return (
+            <>
+                {border}
+                {children}
+            </>
+        );
     }
     if (floating) {
         return (
@@ -407,7 +424,10 @@ export const PreviewTools = ({
     } else {
         return (
             <>
-                <Portal>{controls}</Portal>
+                <Portal>
+                    {border}
+                    {controls}
+                </Portal>
                 <div className={styles.controlsHeight} />
                 {children}
             </>

playroom/preview-tools.css.ts

@@ -30,7 +30,6 @@ export const controls = style([
 
         gap: 8,
         zIndex: 2,
-        background: 'white',
         borderBottom: `1px solid ${skinVars.colors.divider}`,
     },
     controlsHeight,
@@ -73,6 +72,24 @@ export const floattingButtonBackground = sprinkles({
     height: 40,
 });
 
+export const previewBorder = style([
+    sprinkles({
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+    }),
+    {
+        height: '100vh',
+        boxSizing: 'border-box',
+        border: '1px solid',
+        borderColor: skinVars.colors.divider,
+        borderRadius: 12,
+        pointerEvents: 'none',
+        zIndex: 3,
+    },
+]);
+
 export const floatingButtonIcon = style({
     transition: 'transform 0.3s ease',
     '@media': {