Override toString on our design token color to expose its original hex value (#1960)

Author: ethanshar

src/style/colors.ts

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 //@ts-ignore
 import Color from 'color';
+import {OpaqueColorValue} from 'react-native';
 import tinycolor from 'tinycolor2';
 import {colorsPalette, themeColors} from './colorsPalette';
 import DesignTokens from './designTokens';
@@ -92,6 +93,11 @@ export class Colors {
     let green;
     let blue;
 
+    // Handle design token PlatformColor object
+    if (typeof p1 === 'object') {
+      p1 = colorStringValue(p1);
+    }
+
     if (arguments.length === 2 && typeof p1 === 'string') {
       hex = p1;
       opacity = p2;
@@ -129,23 +135,19 @@ export class Colors {
     }
   }
 
-  /**
-   * Return the original color string value by its colorKey based on the current scheme(light/dark)
-   */
-  getColorValue(colorKey: string) {
-    return Scheme.getScheme(true)[colorKey] ?? this[colorKey];
-  }
-
-  getColorName(color: string) {
+  getColorName(colorValue: string) {
+    const color = colorStringValue(colorValue);
     return ColorName.name(color)[1];
   }
 
-  getColorTint(color: string, tintKey: string | number) {
-    if (_.isUndefined(tintKey) || isNaN(tintKey as number) || _.isUndefined(color)) {
+  getColorTint(colorValue: string | OpaqueColorValue, tintKey: string | number) {
+    if (_.isUndefined(tintKey) || isNaN(tintKey as number) || _.isUndefined(colorValue)) {
       // console.error('"Colors.getColorTint" must accept a color and tintKey params');
-      return color;
+      return colorValue;
     }
 
+    const color = colorStringValue(colorValue);
+
     if (color === 'transparent') {
       return color;
     }
@@ -170,7 +172,7 @@ export class Colors {
     return this.getTintedColorForDynamicHex(color, tintKey);
   }
 
-  getTintedColorForDynamicHex(color: string, tintKey: string | number) {
+  private getTintedColorForDynamicHex(color: string, tintKey: string | number) {
     // Handles dynamic colors (non uilib colors)
     let tintLevel = Math.floor(Number(tintKey) / 10);
     tintLevel = Math.max(1, tintLevel);
@@ -210,13 +212,14 @@ export class Colors {
     return this.shouldSupportDarkMode && Scheme.getSchemeType() === 'dark' ? _.reverse(palette) : palette;
   });
 
-  shouldGenerateDarkerPalette(color: string) {
+  private shouldGenerateDarkerPalette(color: string) {
     const hsl = Color(color).hsl();
     const hue = hsl.color[0];
     return _.inRange(hue, 51, 184);
   }
 
-  isDark(color: string) {
+  isDark(colorValue: string | OpaqueColorValue) {
+    const color = colorStringValue(colorValue);
     const lum = tinycolor(color).getLuminance();
     return lum < 0.55;
   }
@@ -232,11 +235,17 @@ export class Colors {
   isTransparent(color?: string) {
     return color && _.toUpper(color) === _.toUpper('transparent');
   }
-  areEqual(colorA: string, colorB: string) {
+  areEqual(colorAValue: string | OpaqueColorValue, colorBValue: string | OpaqueColorValue) {
+    const colorA = colorStringValue(colorAValue);
+    const colorB = colorStringValue(colorBValue);
     return _.toLower(colorA) === _.toLower(colorB);
   }
 }
 
+function colorStringValue(color: string | object) {
+  return color.toString();
+}
+
 function adjustSaturation(colors: string[], color: string) {
   let array;
   const lightnessLevel = 80;

src/style/scheme.ts

@@ -9,7 +9,6 @@ export type SchemeChangeListener = (schemeType?: 'light' | 'dark') => void;
 class Scheme {
   private currentScheme: SchemeType = 'default';
   private schemes: Schemes = {light: {}, dark: {}};
-  private schemesJS: Schemes = {light: {}, dark: {}};
   private changeListeners: SchemeChangeListener[] = [];
   private usePlatformColors = false;
 
@@ -64,40 +63,38 @@ class Scheme {
       throw new Error(`There is a mismatch in scheme keys: ${missingKeys.join(', ')}`);
     }
 
-    merge(this.schemesJS, schemes);
-
     const platformColorsSchemes: Schemes = cloneDeep(schemes);
+
     forEach(schemes, (scheme, schemeKey) => {
       forEach(scheme, (colorValue, colorKey) => {
         // @ts-expect-error
         Object.defineProperty(platformColorsSchemes[schemeKey], colorKey, {
           get: () => {
+            let color: any = colorValue;
             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(/^[$]/, '')}`);
+                color = PlatformColor(`@color/${colorKey.replace(/^[$]/, '')}`);
               } else {
-                return PlatformColor(colorKey);
+                color = PlatformColor(colorKey);
               }
-            } else {
-              return colorValue;
+              // Get the original hex string value by calling toString()
+              color.toString = () => schemes[this.getSchemeType()][colorKey];
             }
+            return color;
           }
         });
       });
     });
+
     merge(this.schemes, platformColorsSchemes);
   }
 
   /**
    * Retrieve scheme by current scheme type
    */
-  getScheme(useJS = false) {
-    if (useJS) {
-      return this.schemesJS[this.getSchemeType()];
-    } else {
-      return this.schemes[this.getSchemeType()];
-    }
+  getScheme() {
+    return this.schemes[this.getSchemeType()];
   }
 
   /**