From 4b98e23e38f03564005224e6a446e9286e17e28d Mon Sep 17 00:00:00 2001
From: Artur Yorsh <artyorsh.me@gmail.com>
Date: Tue, 21 May 2019 15:48:19 +0300
Subject: [PATCH 1/2] feat(theme): referencing values

---
 src/framework/theme/support/tests/theme.json |  4 ++-
 src/framework/theme/theme/theme.service.ts   | 30 +++++++++++++++++++-
 src/framework/theme/theme/theme.spec.tsx     |  6 ++++
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/framework/theme/support/tests/theme.json b/src/framework/theme/support/tests/theme.json
index e1fb57e03..be9582424 100644
--- a/src/framework/theme/support/tests/theme.json
+++ b/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"
 }
diff --git a/src/framework/theme/theme/theme.service.ts b/src/framework/theme/theme/theme.service.ts
index 094506415..16d9fc267 100644
--- a/src/framework/theme/theme/theme.service.ts
+++ b/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);
 }
diff --git a/src/framework/theme/theme/theme.spec.tsx b/src/framework/theme/theme/theme.spec.tsx
index cfc2af1cb..a2933ba97 100644
--- a/src/framework/theme/theme/theme.spec.tsx
+++ b/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', () => {

From b1e0b1cb830b6839c1ddcccaf58635d7a754edfd Mon Sep 17 00:00:00 2001
From: Artur Yorsh <artyorsh.me@gmail.com>
Date: Tue, 21 May 2019 16:09:10 +0300
Subject: [PATCH 2/2] test(theme): update snapshot

---
 src/framework/theme/application/application.spec.tsx.snap | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/framework/theme/application/application.spec.tsx.snap b/src/framework/theme/application/application.spec.tsx.snap
index 32ef84aef..515cf4ea1 100644
--- a/src/framework/theme/application/application.spec.tsx.snap
+++ b/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",
     }