Infra/ revese color palettes in dark mode (#1893)

* revese color palettes in dark mode

* add getInvertedTintKey method

* update inverting logic

Author: lidord-wix

generatedTypes/src/style/colors.d.ts

@@ -3,6 +3,7 @@ import tinycolor from 'tinycolor2';
 import { Schemes, SchemeType } from './scheme';
 export declare class Colors {
     [key: string]: any;
+    private shouldSupportDarkMode;
     constructor();
     /**
      * Load custom set of colors
@@ -46,6 +47,7 @@ export declare class Colors {
     getBackgroundKeysPattern(): RegExp;
     isEmpty(color: string): boolean;
     getColorTint(color: string, tintKey: string | number): any;
+    getInvertedTintKey(tintKey: string | number): number;
     getColorName(color: string): any;
     getTintedColorForDynamicHex(color: string, tintKey: string | number): string;
     generateColorPalette: ((color: any) => string[]) & _.MemoizedFunction;
@@ -114,13 +116,12 @@ declare const colorObject: Colors & {
     orange40: string;
     orange50: string;
     orange60: string;
-    /**
+    orange70: string;
+    orange80: string; /**
      * Set color scheme for app
      * arguments:
      * scheme - color scheme e.g light/dark/default
      */
-    orange70: string;
-    orange80: string;
     red1: string;
     red5: string;
     red10: string;
@@ -142,6 +143,14 @@ declare const colorObject: Colors & {
     purple70: string;
     purple80: string;
     violet1: string;
+    /**
+     * Add alpha to hex or rgb color
+     * arguments:
+     * p1 - hex color / R part of RGB
+     * p2 - opacity / G part of RGB
+     * p3 - B part of RGB
+     * p4 - opacity
+     */
     violet5: string;
     violet10: string;
     violet20: string;
@@ -174,11 +183,7 @@ declare const colorObject: Colors & {
     $backgroundSuccessHeavy: string;
     $backgroundSuccess: string;
     $backgroundWarningHeavy: string;
-    $backgroundWarning: string; /**
-     * Load set of schemes for light/dark mode
-     * arguments:
-     * schemes - two sets of map of colors e.g {light: {screen: 'white'}, dark: {screen: 'black'}}
-     */
+    $backgroundWarning: string;
     $backgroundMajor: string;
     $backgroundDangerHeavy: string;
     $backgroundDanger: string;
@@ -190,6 +195,11 @@ declare const colorObject: Colors & {
     $textDisabled: string;
     $textDefault: string;
     $textNeutralHeavy: string;
+    /**
+     * Set color scheme for app
+     * arguments:
+     * scheme - color scheme e.g light/dark/default
+     */
     $textNeutral: string;
     $textNeutralLight: string;
     $textDefaultLight: string;

src/style/colors.ts

@@ -11,6 +11,7 @@ import Scheme, {Schemes, SchemeType} from './scheme';
 
 export class Colors {
   [key: string]: any;
+  private shouldSupportDarkMode = false;
 
   constructor() {
     const colors = Object.assign(colorsPalette, designTokens, themeColors);
@@ -58,13 +59,14 @@ export class Colors {
 
   /**
    * Support listening to Appearance changes
-   * and change the design tokens accordingly 
+   * and change the design tokens accordingly
    */
   supportDarkMode() {
     const designTokensColors = Scheme.getSchemeType() === 'dark' ? designTokensDM : designTokens;
+    this.shouldSupportDarkMode = true;
     Object.assign(this, designTokensColors);
   }
-  
+
   /**
    * Add alpha to hex or rgb color
    * arguments:
@@ -132,7 +134,13 @@ export class Colors {
     const colorKey = _.findKey(this, (_value, key) => this[key] === color);
 
     if (colorKey) {
-      const requiredColorKey = `${colorKey.slice(0, -2)}${tintKey}`;
+      const colorKeys = [1, 5, 10, 20, 30, 40, 50, 60, 70, 80];
+      const keyIndex = _.indexOf(colorKeys, Number(tintKey));
+      const key =
+        this.shouldSupportDarkMode && Scheme.getSchemeType() === 'dark'
+          ? colorKeys[colorKeys.length - 1 - keyIndex]
+          : tintKey;
+      const requiredColorKey = `${colorKey.slice(0, -2)}${key}`;
       const requiredColor = this[requiredColorKey];
 
       if (_.isUndefined(requiredColor)) {
@@ -183,7 +191,8 @@ export class Colors {
 
     const sliced = tints.slice(0, 8);
     const adjusted = adjustSaturation(sliced, color);
-    return adjusted || sliced;
+    const palette = adjusted || sliced;
+    return this.shouldSupportDarkMode && Scheme.getSchemeType() === 'dark' ? _.reverse(palette) : palette;
   });
 
   shouldGenerateDarkerPalette(color: string) {