[menu-bar] Add PlatformColor support for electron

CHANGELOG.md

@@ -7,7 +7,7 @@
 ### 🎉 New features
 
 - Add support for launching Expo updates. ([#134](https://github.com/expo/orbit/pull/134), [#137](https://github.com/expo/orbit/pull/137), [#138](https://github.com/expo/orbit/pull/138), [#144](https://github.com/expo/orbit/pull/144), [#148](https://github.com/expo/orbit/pull/148) by [@gabrieldonadel](https://github.com/gabrieldonadel))
-- Add experimental support for Windows and Linux. ([#152](https://github.com/expo/orbit/pull/152), [#157](https://github.com/expo/orbit/pull/157), [#158](https://github.com/expo/orbit/pull/158), [#160](https://github.com/expo/orbit/pull/160), [#161](https://github.com/expo/orbit/pull/161) by [@gabrieldonadel](https://github.com/gabrieldonadel))
+- Add experimental support for Windows and Linux. ([#152](https://github.com/expo/orbit/pull/152), [#157](https://github.com/expo/orbit/pull/157), [#158](https://github.com/expo/orbit/pull/158), [#160](https://github.com/expo/orbit/pull/160), [#161](https://github.com/expo/orbit/pull/161), [#165](https://github.com/expo/orbit/pull/165) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 
 ### 🐛 Bug fixes
 

apps/menu-bar/global.css

@@ -1,3 +1,112 @@
+body {
+  background-color: var(--orbit-window-background);
+}
+
+:not(input):not(textarea),
+:not(input):not(textarea)::after,
+:not(input):not(textarea)::before {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+@media (prefers-color-scheme: light) {
+  /* Platform Color based on macOS Semantic Colors*/
+  :root {
+    --label-color: #242424;
+    --secondary-label-color: #000000;
+    --tertiary-label-color: #000000;
+    --quaternary-label-color: #000000;
+    --link-color: #084fd1;
+    --placeholder-text-color: #000000;
+    --window-frame-text-color: #000000;
+    --selected-menu-item-text-color: #fffefe;
+    --alternate-selected-control-text-color: #fffefe;
+    --header-text-color: #000000;
+    --separator-color: #000000;
+    --grid-color: #e6e6e6;
+    --window-background-color: #e7e7e7;
+    --under-page-background-color: #838383;
+    --control-background-color: #fffefe;
+    --selected-content-background: #064ad9;
+    --unemphasized-selected-content-background-color: #d3d3d3;
+    --find-highlight-color: #ffff0a;
+    --alternating-content-background-color: #f1f2f2;
+    --text-color: #000000;
+    --text-background-color: #fffefe;
+    --selected-text-color: #000000;
+    --selected-text-background-color: #b3d6ff;
+    --unemphasized-selected-text-background-color: #d3d3d3;
+    --unemphasized-selected-text-color: #000000;
+    --control-color: #ffffff;
+    --control-text-color: #000000;
+    --selected-control-color: #b3d6ff;
+    --selected-control-text-color: #000000;
+    --disabled-control-text-color: #000000;
+    --keyboard-focus-indicator-color: #83a9f1;
+    --control-accent-color: #007bff;
+    --highlight-color: #fffefe;
+    --shadow-color: #000000;
+
+    --popover-background: #e6e7e7;
+    --orbit-window-background: #eaecec;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  /* Platform Color based on macOS Semantic Colors*/
+  :root {
+    --label-color: #dedfdf;
+    --secondary-label-color: #9d9e9e;
+    --tertiary-label-color: #5c5d5d;
+    --quaternary-label-color: #3b3d3e;
+    --link-color: #3486fe;
+    --placeholder-text-color: #5c5d5e;
+    --window-frame-text-color: #fffefe;
+    --selected-menu-item-text-color: #fffefe;
+    --alternate-selected-control-text-color: #fffefe;
+    --header-text-color: #fffefe;
+    --separator-color: #3b3d3e;
+    --grid-color: #1a1a1a;
+    --window-background-color: #252525;
+    --under-page-background-color: #1d1d1d;
+    --control-background-color: #161616;
+    --selected-content-background: #064ad9;
+    --unemphasized-selected-content-background-color: #363636;
+    --find-highlight-color: #ffff0a;
+    --alternating-content-background-color: #fffefe;
+    --text-color: #ffffff;
+    --text-background-color: #1e1e1e;
+    --selected-text-color: #ffffff;
+    --selected-text-background-color: #3f638a;
+    --unemphasized-selected-text-background-color: #363636;
+    --unemphasized-selected-text-color: #ffffff;
+    --control-color: #5c5d5e;
+    --control-text-color: #fffefe;
+    --selected-control-color: #3f638a;
+    --selected-control-text-color: #fffefe;
+    --disabled-control-text-color: #fffefe;
+    --keyboard-focus-indicator-color: #286994;
+    --control-accent-color: #007aff;
+    --highlight-color: #a4a4a4;
+    --shadow-color: #000000;
+
+    --popover-background: #212121;
+    --orbit-window-background: #252928;
+  }
+}
+
+:root {
+  --system-red-color: #fb2b2c;
+  --system-green-color: #30d33a;
+  --system-blue-color: #106afe;
+  --system-orange-color: #fc8d0d;
+  --system-yellow-color: #fecf0e;
+  --system-brown-color: #9b7b55;
+  --system-pink-color: #fb194c;
+  --system-purple-color: #4e45d8;
+  --system-gray-color: #85858b;
+}
+
 /* Fonts */
 @font-face {
   src: url('src/assets/fonts/Inter/Inter-Regular.otf');

apps/menu-bar/src/components/AutoResizerRootView/index.web.tsx

@@ -45,7 +45,13 @@ const AutoResizerRootView = ({
   }, [enabled, maxRelativeHeight]);
 
   return (
-    <div ref={divRef} style={{ height: 'fit-content', ...style }}>
+    <div
+      ref={divRef}
+      style={{
+        height: 'fit-content',
+        backgroundColor: 'var(--popover-background)',
+        ...style,
+      }}>
       {children}
     </div>
   );

apps/menu-bar/src/components/NativeColorPalette.tsx

@@ -90,7 +90,7 @@ const colorsArray = [
   'unemphasizedSelectedTextBackgroundColor',
   'linkColor',
   'separatorColor',
-  'selectedContentBackgroundColor',
+  'selectedContentBackground',
   'unemphasizedSelectedContentBackgroundColor',
   'selectedMenuItemTextColor',
   'gridColor',

apps/menu-bar/src/components/PathInput.tsx

@@ -6,6 +6,7 @@ import { TextInput } from './Text';
 import { Row } from './View';
 import * as FilePicker from '../../modules/file-picker';
 import FolderIcon from '../assets/icons/folder.svg';
+import { PlatformColor } from '../modules/PlatformColor';
 import { addOpacity } from '../utils/theme';
 import { useCurrentTheme, useExpoTheme } from '../utils/useExpoTheme';
 
@@ -36,6 +37,7 @@ const PathInput = React.forwardRef<NativeTextInput, React.ComponentProps<typeof
           shadow="input"
           {...props}
           style={styles.input}
+          placeholderTextColor={PlatformColor('placeholderTextColor')}
           ref={forwardedRef as any}
           editable={editable}
           onChangeText={onChangeText}

apps/menu-bar/src/components/Text.tsx

@@ -1,5 +1,5 @@
 import { shadows } from '@expo/styleguide-native';
-import { Text as RNText, TextInput as RNTextInput } from 'react-native';
+import { Platform, Text as RNText, TextInput as RNTextInput } from 'react-native';
 
 import { PlatformColor } from '../modules/PlatformColor';
 import { create } from '../utils/create-component-primitive';
@@ -9,6 +9,11 @@ export const Text = create(RNText, {
   base: {
     fontSize: 14,
     lineHeight: 18,
+    ...Platform.select({
+      web: {
+        color: 'var(--text-color)',
+      },
+    }),
   },
 
   props: {

apps/menu-bar/src/modules/PlatformColor/index.web.ts

@@ -1,4 +1,12 @@
-export const PlatformColor = () => {
-  // Return black as a temporary placeholder
-  return '#000000';
+const camelToSnakeCase = (str: string) =>
+  str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+
+const bodyStyles = window.getComputedStyle(document.body);
+
+export const PlatformColor = (color: string) => {
+  const colorValue =
+    bodyStyles.getPropertyValue(`--${camelToSnakeCase(color)}`) ||
+    bodyStyles.getPropertyValue(`--${camelToSnakeCase(color)}-color`);
+
+  return colorValue || '#000000';
 };

apps/menu-bar/src/utils/theme.ts

@@ -188,7 +188,16 @@ export const text = {
   },
 
   color: {
-    default: { color: PlatformColor('labelColor') },
+    default: {
+      ...Platform.select({
+        native: {
+          color: PlatformColor('labelColor'),
+        },
+        web: {
+          color: 'var(--label-color)',
+        },
+      }),
+    },
     error: { color: lightTheme.text.error },
     warning: { color: lightTheme.text.warning },
     success: { color: lightTheme.text.success },
@@ -200,7 +209,16 @@ export const text = {
 
 export const textDark = {
   color: {
-    default: { color: PlatformColor('labelColor') },
+    default: {
+      ...Platform.select({
+        native: {
+          color: PlatformColor('labelColor'),
+        },
+        web: {
+          color: 'var(--label-color)',
+        },
+      }),
+    },
     error: { color: darkTheme.text.error },
     warning: { color: darkTheme.text.warning },
     success: { color: darkTheme.text.success },
@@ -231,7 +249,14 @@ export const bgDark = {
 
 export const border = {
   default: {
-    borderColor: PlatformColor('gridColor'),
+    ...Platform.select({
+      native: {
+        borderColor: PlatformColor('gridColor'),
+      },
+      web: {
+        borderColor: 'var(--grid-color)',
+      },
+    }),
     borderWidth: 1,
   },
   light: { borderColor: addOpacity(lightTheme.border.default, 0.2), borderWidth: 1 },
@@ -244,7 +269,14 @@ export const border = {
 
 export const borderDark = {
   default: {
-    borderColor: PlatformColor('controlColor'),
+    ...Platform.select({
+      native: {
+        borderColor: PlatformColor('controlColor'),
+      },
+      web: {
+        borderColor: 'var(--control-color)',
+      },
+    }),
     borderWidth: 1,
   },
   warning: { borderColor: darkTheme.border.warning, borderWidth: 1 },