export DesignTokens and DesignTokensDM (#1931)

Author: lidord-wix

generatedTypes/src/commons/modifiers.d.ts

@@ -1,8 +1,8 @@
 import _ from 'lodash';
+import { DesignTokens } from '../style';
 import { BorderRadiusesLiterals } from '../style/borderRadiuses';
 import TypographyPresets from '../style/typographyPresets';
 import { colorsPalette } from '../style/colorsPalette';
-import { designTokens } from '../style/designTokens';
 export declare const FLEX_KEY_PATTERN: RegExp;
 export declare const PADDING_KEY_PATTERN: RegExp;
 export declare const MARGIN_KEY_PATTERN: RegExp;
@@ -56,7 +56,7 @@ export declare type MarginLiterals = keyof typeof MARGIN_VARIATIONS;
 export declare type NativeMarginModifierKeyType = typeof MARGIN_VARIATIONS[MarginLiterals];
 export declare type FlexLiterals = keyof typeof STYLE_KEY_CONVERTERS;
 export declare type NativeFlexModifierKeyType = typeof STYLE_KEY_CONVERTERS[FlexLiterals];
-export declare type ColorLiterals = keyof (typeof colorsPalette & typeof designTokens);
+export declare type ColorLiterals = keyof (typeof colorsPalette & typeof DesignTokens);
 export declare type TypographyLiterals = keyof typeof TypographyPresets;
 export declare type BorderRadiusLiterals = keyof typeof BorderRadiusesLiterals;
 export declare type AlignmentLiterals = 'row' | 'spread' | 'center' | 'centerH' | 'centerV' | 'left' | 'right' | 'top' | 'bottom';

generatedTypes/src/style/colors.d.ts

@@ -117,11 +117,7 @@ declare const colorObject: Colors & {
     orange50: string;
     orange60: string;
     orange70: string;
-    orange80: string; /**
-     * Set color scheme for app
-     * arguments:
-     * scheme - color scheme e.g light/dark/default
-     */
+    orange80: string;
     red1: string;
     red5: string;
     red10: string;
@@ -130,6 +126,10 @@ declare const colorObject: Colors & {
     red40: string;
     red50: string;
     red60: string;
+    /**
+     * Support listening to Appearance changes
+     * and change the design tokens accordingly
+     */
     red70: string;
     red80: string;
     purple1: string;
@@ -142,8 +142,7 @@ declare const colorObject: Colors & {
     purple60: string;
     purple70: string;
     purple80: string;
-    violet1: string;
-    /**
+    violet1: string; /**
      * Add alpha to hex or rgb color
      * arguments:
      * p1 - hex color / R part of RGB
@@ -195,11 +194,6 @@ 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;

generatedTypes/src/style/designTokens.d.ts

@@ -1,4 +1,4 @@
-export declare const designTokens: {
+declare const _default: {
     $backgroundDefault: string;
     $backgroundElevated: string;
     $backgroundNeutralHeavy: string;
@@ -60,3 +60,4 @@ export declare const designTokens: {
     $outlineDanger: string;
     $dividerDefault: string;
 };
+export default _default;

generatedTypes/src/style/designTokensDM.d.ts

@@ -1,4 +1,4 @@
-export declare const designTokensDM: {
+declare const _default: {
     $backgroundDefault: string;
     $backgroundElevated: string;
     $backgroundNeutralHeavy: string;
@@ -60,3 +60,4 @@ export declare const designTokensDM: {
     $outlineDanger: string;
     $dividerDefault: string;
 };
+export default _default;

generatedTypes/src/style/index.d.ts

@@ -1,4 +1,6 @@
 export { default as Colors } from './colors';
+export { default as DesignTokens } from './designTokens';
+export { default as DesignTokensDM } from './designTokensDM';
 export { default as Scheme, SchemeType, Schemes, SchemeChangeListener } from './scheme';
 export { default as Typography } from './typography';
 export { default as BorderRadiuses } from './borderRadiuses';

src/commons/modifiers.ts

@@ -1,11 +1,10 @@
 import _ from 'lodash';
 import {StyleSheet} from 'react-native';
-import {Typography, Colors, Scheme, BorderRadiuses, Spacings, ThemeManager} from '../style';
+import {Typography, Colors, Scheme, DesignTokens, BorderRadiuses, Spacings, ThemeManager} from '../style';
 import {BorderRadiusesLiterals} from '../style/borderRadiuses';
 import TypographyPresets from '../style/typographyPresets';
 import {SpacingLiterals} from '../style/spacings';
 import {colorsPalette} from '../style/colorsPalette';
-import {designTokens} from '../style/designTokens';
 export const FLEX_KEY_PATTERN = /^flex(G|S)?(-\d*)?$/;
 export const PADDING_KEY_PATTERN = new RegExp(`padding[LTRBHV]?-([0-9]*|${Spacings.getKeysPattern()})`);
 export const MARGIN_KEY_PATTERN = new RegExp(`margin[LTRBHV]?-([0-9]*|${Spacings.getKeysPattern()})`);
@@ -65,7 +64,7 @@ export type MarginLiterals = keyof typeof MARGIN_VARIATIONS;
 export type NativeMarginModifierKeyType = typeof MARGIN_VARIATIONS[MarginLiterals];
 export type FlexLiterals = keyof typeof STYLE_KEY_CONVERTERS;
 export type NativeFlexModifierKeyType = typeof STYLE_KEY_CONVERTERS[FlexLiterals];
-export type ColorLiterals = keyof (typeof colorsPalette & typeof designTokens);
+export type ColorLiterals = keyof (typeof colorsPalette & typeof DesignTokens);
 export type TypographyLiterals = keyof typeof TypographyPresets;
 export type BorderRadiusLiterals = keyof typeof BorderRadiusesLiterals;
 export type AlignmentLiterals =

src/style/colors.ts

@@ -3,8 +3,8 @@ import _ from 'lodash';
 import Color from 'color';
 import tinycolor from 'tinycolor2';
 import {colorsPalette, themeColors} from './colorsPalette';
-import {designTokens} from './designTokens';
-import {designTokensDM} from './designTokensDM';
+import DesignTokens from './designTokens';
+import DesignTokensDM from './designTokensDM';
 //@ts-ignore
 import ColorName from './colorName';
 import Scheme, {Schemes, SchemeType} from './scheme';
@@ -14,7 +14,7 @@ export class Colors {
   private shouldSupportDarkMode = false;
 
   constructor() {
-    const colors = Object.assign(colorsPalette, designTokens, themeColors);
+    const colors = Object.assign(colorsPalette, DesignTokens, themeColors);
     Object.assign(this, colors);
 
     Scheme.addChangeListener(() => {
@@ -62,7 +62,7 @@ export class Colors {
    * and change the design tokens accordingly
    */
   supportDarkMode() {
-    const designTokensColors = Scheme.getSchemeType() === 'dark' ? designTokensDM : designTokens;
+    const designTokensColors = Scheme.getSchemeType() === 'dark' ? DesignTokensDM : DesignTokens;
     this.shouldSupportDarkMode = true;
     Object.assign(this, designTokensColors);
   }
@@ -274,7 +274,7 @@ function threeDigitHexToSix(value: string) {
 
 const TypedColors = Colors as ExtendTypeWith<
   typeof Colors,
-  typeof colorsPalette & typeof themeColors & typeof designTokens
+  typeof colorsPalette & typeof themeColors & typeof DesignTokens
 >;
 const colorObject = new TypedColors();
 colorObject.loadColors(colorsPalette);

src/style/designTokens.ts

@@ -1,6 +1,6 @@
 import {colorsPalette} from './colorsPalette';
 
-export const designTokens = {
+export default {
   // BACKGROUND
   $backgroundDefault: colorsPalette.white,
   $backgroundElevated: colorsPalette.white,

src/style/designTokensDM.ts

@@ -1,6 +1,6 @@
 import {colorsPalette} from './colorsPalette';
 
-export const designTokensDM = {
+export default {
   // BACKGROUND
   $backgroundDefault: colorsPalette.dmBlack,
   $backgroundElevated: colorsPalette.grey10,

src/style/index.ts

@@ -1,4 +1,6 @@
 export {default as Colors} from './colors';
+export {default as DesignTokens} from './designTokens';
+export {default as DesignTokensDM} from './designTokensDM';
 export {default as Scheme, SchemeType, Schemes, SchemeChangeListener} from './scheme';
 export {default as Typography} from './typography';
 export {default as BorderRadiuses} from './borderRadiuses';