Fix/ loadDesignTokens API (#2302)

* fix loadDesignTokens API

* review fixes

* update generateDesignTokens

Author: lidord-wix

src/style/__tests__/colors.spec.js

@@ -126,23 +126,23 @@ describe('style/Colors', () => {
 
   describe('generateDesignTokens(...)', () => {
     it('should generate design tokens from dark color for light theme', () => {
-      const chosenColor = '#860D86';
-      expect(uut.isDark(chosenColor)).toEqual(true);
-      expect(uut.generateDesignTokens(chosenColor, 'light')).toEqual({
-        $backgroundPrimaryHeavy: chosenColor,
+      const primaryColor = '#860D86';
+      expect(uut.isDark(primaryColor)).toEqual(true);
+      expect(uut.generateDesignTokens(primaryColor)).toEqual({
+        $backgroundPrimaryHeavy: primaryColor,
         $backgroundPrimaryLight: '#FFFAFF',
         $backgroundPrimaryMedium: '#FACCFA',
-        $iconPrimary: chosenColor,
+        $iconPrimary: primaryColor,
         $iconPrimaryLight: '#F16FF1',
-        $outlinePrimary: chosenColor,
-        $textPrimary: chosenColor
+        $outlinePrimary: primaryColor,
+        $textPrimary: primaryColor
       });
     });
 
     it('should generate design tokens from light color for light theme', () => {
-      const chosenColor = '#E9BEE7';
-      expect(uut.isDark(chosenColor)).toEqual(false);
-      expect(uut.generateDesignTokens(chosenColor, 'light')).toEqual({
+      const primaryColor = '#E9BEE7';
+      expect(uut.isDark(primaryColor)).toEqual(false);
+      expect(uut.generateDesignTokens(primaryColor)).toEqual({
         $backgroundPrimaryHeavy: '#A4379F',
         $backgroundPrimaryLight: '#F6E4F5',
         $backgroundPrimaryMedium: '#E9BEE7',
@@ -154,9 +154,9 @@ describe('style/Colors', () => {
     });
 
     it('should generate design tokens from dark color for dark theme', () => {
-      const chosenColor = '#860D86';
-      expect(uut.isDark(chosenColor)).toEqual(true);
-      expect(uut.generateDesignTokens(chosenColor, 'dark')).toEqual({
+      const primaryColor = '#860D86';
+      expect(uut.isDark(primaryColor)).toEqual(true);
+      expect(uut.generateDesignTokens(primaryColor, true)).toEqual({
         $backgroundPrimaryHeavy: '#F69DF6',
         $backgroundPrimaryLight: '#860D86',
         $backgroundPrimaryMedium: '#B512B5',
@@ -168,16 +168,16 @@ describe('style/Colors', () => {
     });
 
     it('should generate design tokens from light color for dark theme', () => {
-      const chosenColor = '#E9BEE7';
-      expect(uut.isDark(chosenColor)).toEqual(false);
-      expect(uut.generateDesignTokens(chosenColor, 'dark')).toEqual({
-        $backgroundPrimaryHeavy: chosenColor,
+      const primaryColor = '#E9BEE7';
+      expect(uut.isDark(primaryColor)).toEqual(false);
+      expect(uut.generateDesignTokens(primaryColor, true)).toEqual({
+        $backgroundPrimaryHeavy: primaryColor,
         $backgroundPrimaryLight: '#581E55',
         $backgroundPrimaryMedium: '#7E2B7A',
-        $iconPrimary: chosenColor,
+        $iconPrimary: primaryColor,
         $iconPrimaryLight: '#C24CBD',
-        $outlinePrimary: chosenColor,
-        $textPrimary: chosenColor
+        $outlinePrimary: primaryColor,
+        $textPrimary: primaryColor
       });
     });
   });

src/style/colors.ts

@@ -11,6 +11,7 @@ import ColorName from './colorName';
 import Scheme, {Schemes, SchemeType} from './scheme';
 
 export type DesignToken = {semantic?: [string]; resource_paths?: [string]; toString: Function};
+export type TokensOptions = {primaryColor: string};
 
 export class Colors {
   [key: string]: any;
@@ -49,10 +50,10 @@ export class Colors {
    * Load light and dark schemes based on generated design tokens
    * @param color - palette color
    */
-  loadDesignTokens(color: string) {
+  loadDesignTokens(options: TokensOptions) {
     this.loadSchemes({
-      light: this.generateLightModeTokens(color),
-      dark: this.generateDarkModeTokens(color)
+      light: this.generateDesignTokens(options.primaryColor),
+      dark: this.generateDesignTokens(options.primaryColor, true)
     });
   }
 
@@ -220,39 +221,21 @@ export class Colors {
     return this.shouldSupportDarkMode && Scheme.getSchemeType() === 'dark' ? _.reverse(palette) : palette;
   });
 
-  generateDesignTokens(color: string, mode: 'light' | 'dark' = 'light') {
-    return mode === 'light' ? this.generateLightModeTokens(color) : this.generateDarkModeTokens(color);
-  }
-
-  private generateLightModeTokens(color: string) {
-    const colorPalette: string[] = this.generatePalette(color);
-    const color30 = colorPalette[2];
-    const color50 = colorPalette[4];
-    const color70 = colorPalette[6];
-    const color80 = colorPalette[7];
-
-    const mainColor = this.isDark(color) ? color : color30;
-
-    return {
-      $backgroundPrimaryHeavy: mainColor,
-      $backgroundPrimaryLight: color80,
-      $backgroundPrimaryMedium: color70,
-      $iconPrimary: mainColor,
-      $iconPrimaryLight: color50,
-      $textPrimary: mainColor,
-      $outlinePrimary: mainColor
-    };
-  }
-
-  private generateDarkModeTokens(color: string) {
-    const colorPalette: string[] = _.reverse(this.generatePalette(color));
+  private generateDesignTokens(primaryColor: string, dark?: boolean) {
+    let colorPalette: string[] = this.generatePalette(primaryColor);
+    if (dark) {
+      colorPalette = _.reverse(colorPalette);
+    }
     const color30 = colorPalette[2];
     const color50 = colorPalette[4];
     const color70 = colorPalette[6];
     const color80 = colorPalette[7];
 
-    const mainColor = this.isDark(color) ? color30 : color;
-
+    const isPrimaryColorDark = this.isDark(primaryColor);
+    let mainColor = isPrimaryColorDark ? primaryColor : color30;
+    if (dark) {
+      mainColor = isPrimaryColorDark ? color30 : primaryColor;
+    }
     return {
       $backgroundPrimaryHeavy: mainColor,
       $backgroundPrimaryLight: color80,