feat(base/ui/native): Convert rem to px (#15934)

* feat(base/ui): create and use conversion helpers for tokens on mobile

react/features/base/ui/Tokens.ts

@@ -1,4 +1,3 @@
-
 // Mapping between the token used and the color
 export const colorMap = {
     // ----- Surfaces -----
@@ -119,8 +118,8 @@ export const colorMap = {
 
 
 export const font = {
-    weightRegular: '400',
-    weightSemiBold: '600'
+    weightRegular: 400,
+    weightSemiBold: 600
 };
 
 export const shape = {
@@ -130,7 +129,7 @@ export const shape = {
 };
 
 export const spacing
-    = [ 0, 4, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96, 104, 112, 120, 128 ];
+    = [ '0rem', '0.25rem', '0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem', '6.5rem', '7rem', '7.5rem', '8rem' ];
 
 export const typography = {
     labelRegular: 'label01',

react/features/base/ui/components/web/ContextMenu.tsx

@@ -213,7 +213,7 @@ const ContextMenu = ({
 
             if (offsetTop + height > offsetHeight + scrollTop && height > offsetTop) {
                 // top offset and + padding + border
-                container.style.maxHeight = `${offsetTop - ((spacing[2] * 2) + 2)}px`;
+                container.style.maxHeight = `calc(${offsetTop}px - (${spacing[2]} * 2 + 2px))`;
             }
 
             // get the height after style changes

react/features/base/ui/functions.native.ts

@@ -2,6 +2,47 @@ import { DefaultTheme } from 'react-native-paper';
 
 import { createColorTokens } from './utils';
 
+// Base font size in pixels (standard is 16px = 1rem)
+const BASE_FONT_SIZE = 16;
+
+/**
+ * Converts rem to pixels.
+ *
+ * @param {string} remValue - The value in rem units (e.g. '0.875rem').
+ * @returns {number}
+ */
+function remToPixels(remValue: string): number {
+    const numericValue = parseFloat(remValue.replace('rem', ''));
+
+    return Math.round(numericValue * BASE_FONT_SIZE);
+}
+
+/**
+ * Converts all rem to pixels in an object.
+ *
+ * @param {Object} obj - The object to convert rem values in.
+ * @returns {Object}
+ */
+function convertRemValues(obj: any): any {
+    const converted: { [key: string]: any; } = {};
+
+    if (typeof obj !== 'object' || obj === null) {
+        return obj;
+    }
+
+    Object.entries(obj).forEach(([ key, value ]) => {
+        if (typeof value === 'string' && value.includes('rem')) {
+            converted[key] = remToPixels(value);
+        } else if (typeof value === 'object' && value !== null) {
+            converted[key] = convertRemValues(value);
+        } else {
+            converted[key] = value;
+        }
+    });
+
+    return converted;
+}
+
 /**
  * Creates a React Native Paper theme based on local UI tokens.
  *
@@ -13,10 +54,10 @@ export function createNativeTheme({ font, colorMap, shape, spacing, typography }
         ...DefaultTheme,
         palette: createColorTokens(colorMap),
         shape,
-        spacing,
+        spacing: spacing.map(remToPixels),
         typography: {
             font,
-            ...typography
+            ...convertRemValues(typography)
         }
     };
 }

react/features/base/ui/functions.web.ts

@@ -18,7 +18,7 @@ interface ThemeProps {
     colorMap: Object;
     font: Object;
     shape: Object;
-    spacing: Array<number>;
+    spacing: Array<number | string>;
     typography: Object;
 }