[ThemeProvider] Change frameOffset to accept a string

UNRELEASED.md

@@ -9,6 +9,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Added required `ariaLabel` property in `Sheet` ([#3852](https://github.com/Shopify/polaris-react/pull/3852))
 - Removed `NewDesignLanguage`, `Color`, `AnimationProps` exported types ([#3868](https://github.com/Shopify/polaris-react/pull/3868))
 - Replaced `BaseAction` with `Action` type ([#3868](https://github.com/Shopify/polaris-react/pull/3868))
+- Changed the `frameOffset` prop to accept a string in `ThemeProvider` ([#3883](https://github.com/Shopify/polaris-react/pull/3883))
 
 ### Enhancements
 

src/components/Frame/README.md

@@ -648,7 +648,7 @@ function FrameExample() {
         background: '#225062',
       },
     },
-    frameOffset: 60,
+    frameOffset: '60px',
     logo: {
       width: 124,
       topBarSource:

src/utilities/theme/tests/utils.test.ts

@@ -122,7 +122,7 @@ describe('buildCustomProperties', () => {
     expect(colors).not.toContain('--top-bar-background');
   });
 
-  it('creates default custom property of 0px for frameOffset when frameOffset is undefined and newDesignLanguage is false', () => {
+  it('creates default custom property of 0px for frameOffset when frameOffset is undefined', () => {
     const theme = {
       colors: {topBar: {background: '#eeeeee'}, surface: '#ffffff'},
       colorScheme: DefaultColorScheme,
@@ -132,19 +132,9 @@ describe('buildCustomProperties', () => {
     expect(colors).toMatchObject({'--p-frame-offset': '0px'});
   });
 
-  it('creates default custom property of 0px for frameOffset when frameOffset is undefined and newDesignLanguage is true', () => {
-    const theme = {
-      colors: {topBar: {background: '#eeeeee'}, surface: '#ffffff'},
-      colorScheme: DefaultColorScheme,
-    };
-
-    const colors = buildCustomProperties(theme, true);
-    expect(colors).toMatchObject({'--p-frame-offset': '0px'});
-  });
-
   it('creates custom property with value for frameOffset when frameOffset is provided and newDesignLanguage is false', () => {
     const theme = {
-      frameOffset: 60,
+      frameOffset: '60px',
       colors: {topBar: {background: '#eeeeee'}, surface: '#ffffff'},
       colorScheme: DefaultColorScheme,
     };
@@ -155,7 +145,7 @@ describe('buildCustomProperties', () => {
 
   it('creates custom property with value for frameOffset when frameOffset is provided and newDesignLanguage is true', () => {
     const theme = {
-      frameOffset: 80,
+      frameOffset: '80px',
       colors: {topBar: {background: '#eeeeee'}, surface: '#ffffff'},
       colorScheme: DefaultColorScheme,
     };

src/utilities/theme/types.ts

@@ -52,7 +52,7 @@ export interface ThemeConfig {
   colors?: Partial<RoleColors> & LegacyColors;
   colorScheme?: ColorScheme;
   config?: Config;
-  frameOffset?: number;
+  frameOffset?: string;
 }
 
 export type CustomPropertiesLike = Record<string, string>;

src/utilities/theme/utils.ts

@@ -26,18 +26,18 @@ export function buildCustomPropertiesNoMemo(
   newDesignLanguage: boolean,
   tokens?: Record<string, string>,
 ): CustomPropertiesLike {
-  const {colors = {}, colorScheme, config, frameOffset = 0} = themeConfig;
+  const {colors = {}, colorScheme, config, frameOffset = '0px'} = themeConfig;
   const mergedConfig = mergeConfigs(base, config || {});
 
   return newDesignLanguage
     ? customPropertyTransformer({
         ...colorFactory(colors, colorScheme, mergedConfig),
         ...tokens,
-        frameOffset: `${frameOffset}px`,
+        frameOffset,
       })
     : {
         ...buildLegacyColors(themeConfig),
-        ...customPropertyTransformer({frameOffset: `${frameOffset}px`}),
+        ...customPropertyTransformer({frameOffset}),
       };
 }