From 66f1e1958e7a114ec3212a2df3ced4583832c3d8 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Thu, 28 Dec 2017 16:28:34 -0600
Subject: [PATCH] chore(theme): update css variable names

---
 .../src/components/css-text/css-text.css      |  2 +-
 .../theme-selector/theme-selector.tsx         |  4 +-
 .../theme-builder/src/theme-variables.ts      | 88 ++++++++++---------
 packages/core/src/themes/css/default.css      | 74 ++++++++++------
 packages/core/src/themes/css/oceanic.css      | 76 ++++++++++------
 5 files changed, 148 insertions(+), 96 deletions(-)

diff --git a/packages/core/scripts/theme-builder/src/components/css-text/css-text.css b/packages/core/scripts/theme-builder/src/components/css-text/css-text.css
index 13d60de06c..3d400b497e 100644
--- a/packages/core/scripts/theme-builder/src/components/css-text/css-text.css
+++ b/packages/core/scripts/theme-builder/src/components/css-text/css-text.css
@@ -8,7 +8,7 @@ h1 {
 textarea {
   margin: 12px 0 0 0;
   min-width: 300px;
-  height: 640px;
+  height: 680px;
   font-family: Courier New, Courier, monospace;
 }
 
diff --git a/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.tsx b/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.tsx
index cb8d5b507c..dbc21cac7f 100644
--- a/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.tsx
+++ b/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.tsx
@@ -54,7 +54,7 @@ export class ThemeSelector {
     const computed = window.getComputedStyle(document.body);
 
     this.themeVariables = THEME_VARIABLES.map(themeVariable => {
-      const value = (computed.getPropertyValue(themeVariable.property) || '#eeeeee').trim().toLowerCase();
+      const value = (computed.getPropertyValue(themeVariable.property) || PLACEHOLDER_COLOR).trim().toLowerCase();
       return {
         property: themeVariable.property.trim(),
         value: value,
@@ -120,3 +120,5 @@ export class ThemeSelector {
     ];
   }
 }
+
+const PLACEHOLDER_COLOR = `#ff00ff`;
diff --git a/packages/core/scripts/theme-builder/src/theme-variables.ts b/packages/core/scripts/theme-builder/src/theme-variables.ts
index efbef480dc..212f659f37 100644
--- a/packages/core/scripts/theme-builder/src/theme-variables.ts
+++ b/packages/core/scripts/theme-builder/src/theme-variables.ts
@@ -2,118 +2,118 @@
 export const THEME_VARIABLES = [
 
   {
-    property: '--primary'
+    property: '--color-primary'
   },
   {
-    property: '--primary-contrast'
+    property: '--color-primary-contrast'
   },
   {
-    property: '--primary-tint'
+    property: '--color-primary-tint'
   },
   {
-    property: '--primary-shade'
+    property: '--color-primary-shade'
   },
   {
-    property: '--secondary'
+    property: '--color-secondary'
   },
   {
-    property: '--secondary-contrast'
+    property: '--color-secondary-contrast'
   },
   {
-    property: '--secondary-tint'
+    property: '--color-secondary-tint'
   },
   {
-    property: '--secondary-shade'
+    property: '--color-secondary-shade'
   },
   {
-    property: '--tertiary'
+    property: '--color-tertiary'
   },
   {
-    property: '--tertiary-contrast'
+    property: '--color-tertiary-contrast'
   },
   {
-    property: '--tertiary-tint'
+    property: '--color-tertiary-tint'
   },
   {
-    property: '--tertiary-shade'
+    property: '--color-tertiary-shade'
   },
   {
-    property: '--success'
+    property: '--color-success'
   },
   {
-    property: '--success-contrast'
+    property: '--color-success-contrast'
   },
   {
-    property: '--success-tint'
+    property: '--color-success-tint'
   },
   {
-    property: '--success-shade'
+    property: '--color-success-shade'
   },
   {
-    property: '--warning'
+    property: '--color-warning'
   },
   {
-    property: '--warning-contrast'
+    property: '--color-warning-contrast'
   },
   {
-    property: '--warning-tint'
+    property: '--color-warning-tint'
   },
   {
-    property: '--warning-shade'
+    property: '--color-warning-shade'
   },
   {
-    property: '--danger'
+    property: '--color-danger'
   },
   {
-    property: '--danger-contrast'
+    property: '--color-danger-contrast'
   },
   {
-    property: '--danger-tint'
+    property: '--color-danger-tint'
   },
   {
-    property: '--danger-shade'
+    property: '--color-danger-shade'
   },
   {
-    property: '--light'
+    property: '--color-light'
   },
   {
-    property: '--light-contrast'
+    property: '--color-light-contrast'
   },
   {
-    property: '--light-tint'
+    property: '--color-light-tint'
   },
   {
-    property: '--light-shade'
+    property: '--color-light-shade'
   },
   {
-    property: '--medium'
+    property: '--color-medium'
   },
   {
-    property: '--medium-contrast'
+    property: '--color-medium-contrast'
   },
   {
-    property: '--medium-tint'
+    property: '--color-medium-tint'
   },
   {
-    property: '--medium-shade'
+    property: '--color-medium-shade'
   },
   {
-    property: '--dark'
+    property: '--color-dark'
   },
   {
-    property: '--dark-contrast'
+    property: '--color-dark-contrast'
   },
   {
-    property: '--dark-tint'
+    property: '--color-dark-tint'
   },
   {
-    property: '--dark-shade'
+    property: '--color-dark-shade'
   },
   {
     property: '--text-color'
   },
   {
-    property: '--text-sub-color'
+    property: '--text-color-alt'
   },
   {
     property: '--background-color'
@@ -122,10 +122,16 @@ export const THEME_VARIABLES = [
     property: '--background-color-alt'
   },
   {
-    property: '--toolbar-background'
+    property: '--toolbar-background-color'
   },
   {
-    property: '--tabbar-background'
+    property: '--tabbar-background-color'
+  },
+  {
+    property: '--tabbar-text-color'
+  },
+  {
+    property: '--tabbar-text-color-active'
   },
   {
     property: '--item-background-color'
@@ -137,10 +143,10 @@ export const THEME_VARIABLES = [
     property: '--border-color'
   },
   {
-    property: '--box-shadow'
+    property: '--backdrop-color'
   },
   {
-    property: '--backdrop'
+    property: '--box-shadow'
   },
 
 ];
diff --git a/packages/core/src/themes/css/default.css b/packages/core/src/themes/css/default.css
index 13eba19256..e50cec5eaa 100644
--- a/packages/core/src/themes/css/default.css
+++ b/packages/core/src/themes/css/default.css
@@ -2,31 +2,53 @@
 
 
 :root {
-  --primary: #3880ff;
-  --primary-contrast: #ffffff;
-  --secondary: #0CD1E8;
-  --secondary-contrast: #ffffff;
-  --tertiary: #7044FF;
-  --tertiary-contrast: #ffffff;
-  --success: #10DC60;
-  --success-contrast: #ffffff;
-  --warning: #FFCE00;
-  --warning-contrast: #ffffff;
-  --danger: #f04141;
-  --danger-contrast: #ffffff;
-  --light: #f4f5f8;
-  --light-contrast: #000000;
-  --medium: #898B93;
-  --medium-contrast: #000000;
-  --dark: #222428;
-  --dark-contrast: #ffffff;
-  --content-color: #000000;
-  --content-sub-color: #898b93;
-  --content-background: #ffffff;
-  --content-sub-background: #f4f5f8;
-  --toolbar-background: #f4f5f8;
-  --tabbar-background: #f4f5f8;
-  --item-background: #fffff;
-  --item-sub-background: #898b93;
+  --color-primary: #3880ff;
+  --color-primary-contrast: #ffffff;
+  --color-primary-tint: #ff00ff;
+  --color-primary-shade: #ff00ff;
+  --color-secondary: #0cd1e8;
+  --color-secondary-contrast: #ffffff;
+  --color-secondary-tint: #ff00ff;
+  --color-secondary-shade: #ff00ff;
+  --color-tertiary: #7044ff;
+  --color-tertiary-contrast: #ffffff;
+  --color-tertiary-tint: #ff00ff;
+  --color-tertiary-shade: #ff00ff;
+  --color-success: #10dc60;
+  --color-success-contrast: #ffffff;
+  --color-success-tint: #ff00ff;
+  --color-success-shade: #ff00ff;
+  --color-warning: #ffce00;
+  --color-warning-contrast: #ffffff;
+  --color-warning-tint: #ff00ff;
+  --color-warning-shade: #ff00ff;
+  --color-danger: #f04141;
+  --color-danger-contrast: #ffffff;
+  --color-danger-tint: #ff00ff;
+  --color-danger-shade: #ff00ff;
+  --color-light: #f4f5f8;
+  --color-light-contrast: #000000;
+  --color-light-tint: #ff00ff;
+  --color-light-shade: #ff00ff;
+  --color-medium: #898b93;
+  --color-medium-contrast: #000000;
+  --color-medium-tint: #ff00ff;
+  --color-medium-shade: #ff00ff;
+  --color-dark: #222428;
+  --color-dark-contrast: #ffffff;
+  --color-dark-tint: #ff00ff;
+  --color-dark-shade: #ff00ff;
+  --text-color: #000000;
+  --text-color-alt: #898b93;
+  --background-color: #ffffff;
+  --background-color-alt: #f4f5f8;
+  --toolbar-background-color: #f4f5f8;
+  --tabbar-background-color: #f4f5f8;
+  --tabbar-text-color: #ff00ff;
+  --tabbar-text-color-active: #ff00ff;
+  --item-background-color: #ffffff;
+  --item-background-color-alt: #898b93;
   --border-color: #c4c6ca;
+  --backdrop-color: #000000;
+  --box-shadow: #ff00ff;
 }
\ No newline at end of file
diff --git a/packages/core/src/themes/css/oceanic.css b/packages/core/src/themes/css/oceanic.css
index 4a68693466..756258dc8b 100644
--- a/packages/core/src/themes/css/oceanic.css
+++ b/packages/core/src/themes/css/oceanic.css
@@ -2,31 +2,53 @@
 
 
 :root {
-  --primary: #549EE7;
-  --primary-contrast: #ffffff;
-  --secondary: #5FB3B3;
-  --secondary-contrast: #ffffff;
-  --tertiary: #FAC863;
-  --tertiary-contrast: #ffffff;
-  --success: #90d089;
-  --success-contrast: #ffffff;
-  --warning: #F99157;
-  --warning-contrast: #ffffff;
-  --danger: #EC5f67;
-  --danger-contrast: #ffffff;
-  --light: #D8DEE9;
-  --light-contrast: #1b2b34;
-  --medium: #65737E;
-  --medium-contrast: #d8dee9;
-  --dark: #1B2B34;
-  --dark-contrast: #D8DEE9;
-  --content-color: #ffffff;
-  --content-sub-color: #a7adba;
-  --content-background: #1B2B34;
-  --content-sub-background: #343D46;
-  --toolbar-background: #343D46;
-  --tabbar-background: #343D46;
-  --item-background: #343D46;
-  --item-sub-background: #65737E;
-  --border-color: #1B2B34;
+  --color-primary: #549ee7;
+  --color-primary-contrast: #ffffff;
+  --color-primary-tint: #ff00ff;
+  --color-primary-shade: #ff00ff;
+  --color-secondary: #5fb3b3;
+  --color-secondary-contrast: #ffffff;
+  --color-secondary-tint: #ff00ff;
+  --color-secondary-shade: #ff00ff;
+  --color-tertiary: #fac863;
+  --color-tertiary-contrast: #ffffff;
+  --color-tertiary-tint: #ff00ff;
+  --color-tertiary-shade: #ff00ff;
+  --color-success: #90d089;
+  --color-success-contrast: #ffffff;
+  --color-success-tint: #ff00ff;
+  --color-success-shade: #ff00ff;
+  --color-warning: #f99157;
+  --color-warning-contrast: #ffffff;
+  --color-warning-tint: #ff00ff;
+  --color-warning-shade: #ff00ff;
+  --color-danger: #ec5f67;
+  --color-danger-contrast: #ffffff;
+  --color-danger-tint: #ff00ff;
+  --color-danger-shade: #ff00ff;
+  --color-light: #d8dee9;
+  --color-light-contrast: #1b2b34;
+  --color-light-tint: #ff00ff;
+  --color-light-shade: #ff00ff;
+  --color-medium: #65737e;
+  --color-medium-contrast: #d8dee9;
+  --color-medium-tint: #ff00ff;
+  --color-medium-shade: #ff00ff;
+  --color-dark: #1b2b34;
+  --color-dark-contrast: #d8dee9;
+  --color-dark-tint: #ff00ff;
+  --color-dark-shade: #ff00ff;
+  --text-color: #ffffff;
+  --text-color-alt: #a7adba;
+  --background-color: #1b2b34;
+  --background-color-alt: #343d46;
+  --toolbar-background-color: #343d46;
+  --tabbar-background-color: #343d46;
+  --tabbar-text-color: #ff00ff;
+  --tabbar-text-color-active: #ff00ff;
+  --item-background-color: #343d46;
+  --item-background-color-alt: #65737e;
+  --border-color: #1b2b34;
+  --backdrop-color: #ff00ff;
+  --box-shadow: #ff00ff;
 }
\ No newline at end of file