Support using PlatformColor for designTokens (#1939)

* Support using PlatformColor for designTokens

* Avoid loading dark scheme tokens

* Fix scheme platformColor logic

* Fix how we consume platform color from Android

* Fix constants import to fix tests

Author: ethanshar

src/style/colors.ts

@@ -4,7 +4,7 @@ import Color from 'color';
 import tinycolor from 'tinycolor2';
 import {colorsPalette, themeColors} from './colorsPalette';
 import DesignTokens from './designTokens';
-import DesignTokensDM from './designTokensDM';
+// import DesignTokensDM from './designTokensDM';
 //@ts-ignore
 import ColorName from './colorName';
 import Scheme, {Schemes, SchemeType} from './scheme';
@@ -14,8 +14,11 @@ export class Colors {
   private shouldSupportDarkMode = false;
 
   constructor() {
-    const colors = Object.assign(colorsPalette, DesignTokens, themeColors);
+    const colors = Object.assign(colorsPalette, themeColors);
     Object.assign(this, colors);
+    // TODO: For now we load the same design tokens for both schemes to not force it until it's ready
+    this.loadSchemes({light: DesignTokens, dark: DesignTokens});
+    // this.loadSchemes({light: DesignTokens, dark: DesignTokensDM});
 
     Scheme.addChangeListener(() => {
       Object.assign(this, Scheme.getScheme());
@@ -62,9 +65,14 @@ export class Colors {
    * and change the design tokens accordingly
    */
   supportDarkMode() {
-    const designTokensColors = Scheme.getSchemeType() === 'dark' ? DesignTokensDM : DesignTokens;
     this.shouldSupportDarkMode = true;
-    Object.assign(this, designTokensColors);
+  }
+
+  /**
+   * Should use RN PlatformColor API for retrieving design token colors from native
+   */
+  enablePlatformColors() {
+    Scheme.enablePlatformColors();
   }
 
   /**

src/style/scheme.ts

@@ -1,5 +1,6 @@
-import {Appearance} from 'react-native';
-import {remove, xor, isEmpty, merge} from 'lodash';
+import {Appearance, PlatformColor} from 'react-native';
+import {remove, xor, isEmpty, merge, forEach, cloneDeep} from 'lodash';
+import Constants from '../commons/Constants';
 
 export type Schemes = {light: {[key: string]: string}; dark: {[key: string]: string}};
 export type SchemeType = 'default' | 'light' | 'dark';
@@ -9,6 +10,7 @@ class Scheme {
   currentScheme: SchemeType = 'default';
   schemes: Schemes = {light: {}, dark: {}};
   changeListeners: SchemeChangeListener[] = [];
+  private usePlatformColors = false;
 
   constructor() {
     Appearance.addChangeListener(() => {
@@ -61,7 +63,29 @@ class Scheme {
       throw new Error(`There is a mismatch in scheme keys: ${missingKeys.join(', ')}`);
     }
 
-    merge(this.schemes, schemes);
+    const platformColorsSchemes: Schemes = cloneDeep(schemes);
+
+    forEach(schemes, (scheme, schemeKey) => {
+      forEach(scheme, (colorValue, colorKey) => {
+        // @ts-expect-error
+        Object.defineProperty(platformColorsSchemes[schemeKey], colorKey, {
+          get: () => {
+            if (this.usePlatformColors) {
+              if (Constants.isAndroid) {
+                // Remove the $ prefix cause it's not allowed in Android and add the @color prefix
+                return PlatformColor(`@color/${colorKey.replace(/^[$]/, '')}`);
+              } else {
+                return PlatformColor(colorKey);
+              }
+            } else {
+              return colorValue;
+            }
+          }
+        });
+      });
+    });
+
+    merge(this.schemes, platformColorsSchemes);
   }
 
   /**
@@ -71,6 +95,13 @@ class Scheme {
     return this.schemes[this.getSchemeType()];
   }
 
+  /**
+   * Should use RN PlatformColor API for retrieving design token colors from native
+   */
+  enablePlatformColors() {
+    this.usePlatformColors = true;
+  }
+
   /**
    * Add a change scheme event listener
    */