[Guild Week] Added generator for basic design tokens (#2265)

* Added generator for basic design tokens

* Review - renaming, default parameter

* Add a method for generating design tokens and loading the scheme

* Cleanup

Author: Effanuel

src/style/__tests__/colors.spec.js

@@ -123,4 +123,62 @@ describe('style/Colors', () => {
       expect(palette).toEqual(['#661A66', '#8F248F', '#B82EB7', '#D148D1', '#DB71DB', '#E699E6', '#F0C2F0', '#FFE5FF']);
     });
   });
+
+  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,
+        $backgroundPrimaryLight: '#FFFAFF',
+        $backgroundPrimaryMedium: '#FACCFA',
+        $iconPrimary: chosenColor,
+        $iconPrimaryLight: '#F16FF1',
+        $outlinePrimary: chosenColor,
+        $textPrimary: chosenColor
+      });
+    });
+
+    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({
+        $backgroundPrimaryHeavy: '#A4379F',
+        $backgroundPrimaryLight: '#F6E4F5',
+        $backgroundPrimaryMedium: '#E9BEE7',
+        $iconPrimary: '#A4379F',
+        $iconPrimaryLight: '#CF72CB',
+        $outlinePrimary: '#A4379F',
+        $textPrimary: '#A4379F'
+      });
+    });
+
+    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({
+        $backgroundPrimaryHeavy: '#F69DF6',
+        $backgroundPrimaryLight: '#860D86',
+        $backgroundPrimaryMedium: '#B512B5',
+        $iconPrimary: '#F69DF6',
+        $iconPrimaryLight: '#ED40ED',
+        $outlinePrimary: '#F69DF6',
+        $textPrimary: '#F69DF6'
+      });
+    });
+
+    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,
+        $backgroundPrimaryLight: '#581E55',
+        $backgroundPrimaryMedium: '#7E2B7A',
+        $iconPrimary: chosenColor,
+        $iconPrimaryLight: '#C24CBD',
+        $outlinePrimary: chosenColor,
+        $textPrimary: chosenColor
+      });
+    });
+  });
 });

src/style/colors.ts

@@ -43,6 +43,17 @@ export class Colors {
     Object.assign(this, Scheme.getScheme());
   }
 
+  /**
+   * Load light and dark schemes based on generated design tokens
+   * @param color - palette color
+   */
+  loadDesignTokens(color: string) {
+    this.loadSchemes({
+      light: this.generateLightModeTokens(color),
+      dark: this.generateDarkModeTokens(color)
+    });
+  }
+
   /**
    * Get app's current color scheme
    */
@@ -173,7 +184,7 @@ export class Colors {
     return colorsPalette[tintLevel - 1];
   }
 
-  generateColorPalette = _.memoize(color => {
+  private generatePalette = _.memoize((color: string): string[] => {
     const hsl = Color(color).hsl();
     const lightness = Math.round(hsl.color[2]);
     const lightColorsThreshold = this.shouldGenerateDarkerPalette(color) ? 5 : 0;
@@ -199,10 +210,58 @@ export class Colors {
 
     const sliced = tints.slice(0, 8);
     const adjusted = adjustSaturation(sliced, color);
-    const palette = adjusted || sliced;
+    return adjusted || sliced;
+  });
+
+  generateColorPalette = _.memoize((color: string): string[] => {
+    const palette = this.generatePalette(color);
     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));
+    const color30 = colorPalette[2];
+    const color50 = colorPalette[4];
+    const color70 = colorPalette[6];
+    const color80 = colorPalette[7];
+
+    const mainColor = this.isDark(color) ? color30 : color;
+
+    return {
+      $backgroundPrimaryHeavy: mainColor,
+      $backgroundPrimaryLight: color80,
+      $backgroundPrimaryMedium: color70,
+      $iconPrimary: mainColor,
+      $iconPrimaryLight: color50,
+      $textPrimary: mainColor,
+      $outlinePrimary: mainColor
+    };
+  }
+
   private shouldGenerateDarkerPalette(color: string) {
     const hsl = Color(color).hsl();
     const hue = hsl.color[0];

typings/generatedTypes/colors.d.ts

@@ -27,13 +27,25 @@ declare class Colors {
     getColorName(color: string): any;
     getTintedColorForDynamicHex(color: string, tintKey: string | number): string;
     generateColorPalette: ((color: any) => string[]) & _.MemoizedFunction;
+    generateDesignTokens(color: string, mode: 'light' | 'dark'): DesignTokens;
     isDark(color: string): boolean;
     isValidHex(string: string): boolean;
     getHexString(color: string): string;
     getHSL(color: string): tinycolor.ColorFormats.HSLA;
     isTransparent(color: string): boolean;
     areEqual(colorA: string, colorB: string): boolean;
 }
+
+interface DesignTokens {
+    $backgroundPrimaryHeavy: string;
+    $backgroundPrimaryLight: string;
+    $backgroundPrimaryMedium: string;
+    $iconPrimary: string;
+    $iconPrimaryLight: string;
+    $textPrimary: string;
+    $outlinePrimarystring: string;
+}
+
 declare const colorObject: Colors & {
     grey10: string;
     grey20: string;