feat(theme): referencing values (#398)

src/framework/theme/application/application.spec.tsx.snap

@@ -2657,6 +2657,7 @@ exports[`@app: application wrapper check * renders properly 1`] = `
       "gray-light": "#DDE1EB",
       "gray-primary": "#A6AEBD",
       "pink-primary": "#FF3D71",
+      "referencing": "$gray-100",
       "text-primary": "#000000",
       "text-primary-inverse": "#ffffff",
     }

src/framework/theme/support/tests/theme.json

@@ -13,5 +13,7 @@
   "gray-100": "#f7f8fa",
   "gray-200": "#edf0f5",
   "gray-300": "#c8cedb",
-  "gray-400": "#a6aebd"
+  "gray-400": "#a6aebd",
+
+  "referencing": "$gray-100"
 }

src/framework/theme/theme/theme.service.ts

@@ -1,5 +1,7 @@
 import { ThemeType } from './type';
 
+const SYMBOL_REFERENCE: string = '$';
+
 /**
  * @param name: string - theme property name, like `backgroundColor`
  * @param theme: ThemeType - theme
@@ -8,5 +10,31 @@ import { ThemeType } from './type';
  * @return any. Theme property value if it presents in theme, fallback otherwise
  */
 export function getThemeValue(name: string, theme: ThemeType, fallback?: any): any | undefined {
-  return theme[name] || fallback;
+  return findThemeValue(name, theme) || fallback;
+}
+
+function findThemeValue(name: string, theme: ThemeType): any | undefined {
+  const value: any = theme[name];
+
+  if (isReferenceKey(value)) {
+    const themeKey: string = toThemeKey(value);
+
+    return findThemeValue(themeKey, theme);
+  }
+
+  return value;
+}
+
+/**
+ * @returns true if theme value references to another
+ */
+function isReferenceKey(value: any): boolean {
+  return `${value}`.startsWith(SYMBOL_REFERENCE);
+}
+
+/**
+ * Transforms reference key to theme key
+ */
+function toThemeKey(value: any): string {
+  return `${value}`.substring(1);
 }

src/framework/theme/theme/theme.spec.tsx

@@ -106,6 +106,12 @@ describe('@theme: service method checks', () => {
     expect(undefinedValue).toBeUndefined();
   });
 
+  it('finds referencing theme value properly', async () => {
+    const themeValue = getThemeValue('referencing', theme);
+
+    expect(themeValue).toEqual(theme['gray-100']);
+  });
+
 });
 
 describe('@theme: ui component checks', () => {