From 822b65462d6596d056abdb57165ca2cdd7300fa4 Mon Sep 17 00:00:00 2001
From: Gabor PEK <gabor.pek@avatao.com>
Date: Fri, 9 Mar 2018 18:14:40 +0100
Subject: [PATCH] Cleanup variables in Shadow DOM

---
 src/app/dashboard/dashboard.component.html |   2 +-
 src/app/dashboard/dashboard.component.scss |  17 +-
 src/app/header/header.component.html       |   8 +-
 src/app/header/header.component.scss       |  42 +---
 src/app/messages/messages.component.html   |   6 +-
 src/app/messages/messages.component.scss   | 142 +-------------
 src/app/terminal/terminal.component.scss   | 217 ---------------------
 src/app/webide/webide.component.html       |   8 +-
 src/app/webide/webide.component.scss       | 134 +------------
 9 files changed, 33 insertions(+), 543 deletions(-)

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 77a906f..8522578 100755
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,5 +1,5 @@
 <app-header></app-header>
-<div class="tao-grid-main-components">
+<div class="tfw-grid-main-components">
   <div class="tfw-messages"><app-messages></app-messages></div>
   <div class="tfw-web tao-grid-top-left"><app-login></app-login></div>
   <div class="tfw-webide"><app-webide></app-webide></div>
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
index 202ae6b..54934be 100755
--- a/src/app/dashboard/dashboard.component.scss
+++ b/src/app/dashboard/dashboard.component.scss
@@ -1,6 +1,3 @@
-//
-// Variables
-//
 $space: 24px;
 
 $tao-plum-900: #272F4C;
@@ -8,17 +5,13 @@ $tao-gray-50:  #FAFAFA;
 
 $tao-navbar-height: 67px;
 
-
-//
-// Layouts
-//
-$layout-template: "raw";  // Change this to switch template
+$layout-template: "default";  // Change this to switch template
 
 $default-layout: (
   'messages': (1, 2, 1, 4),
   'webide': (4, -1, 1, -1),
-  'terminal':  (1, 4, 4, -1),
-  'web':  (2, 4, 1, 4)
+  'terminal': (1, 4, 4, -1),
+  'web': (2, 4, 1, 4)
 );
 
 $raw-layout: (
@@ -34,7 +27,6 @@ $layout: (
 );
 
 @mixin position-grid-items($map, $sel) {
-
   $sel: if($sel == '' and &, &, $sel);
   @debug $sel;
 
@@ -55,8 +47,7 @@ $layout: (
   }
 }
 
-.tao-grid-main-components {
-
+.tfw-grid-main-components {
   overflow-y: hidden;
   display: grid;
   padding-top: $tao-navbar-height;
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index bb24607..51cec9c 100755
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,11 +1,11 @@
-<nav class="navbar navbar-default navbar-expand-md navbar-light tao-navbar fixed-top">
-  <div class="tao-grid-navbar">
+<nav class="navbar navbar-default navbar-expand-md navbar-light tfw-navbar fixed-top">
+  <div class="tfw-grid-navbar">
 <!--    <ul class="navbar-nav tao-grid-center-right">
       <li class="nav-item tao-header-title">an</li>
     </ul>-->
-    <img src="images/avatao_logo.svg" routerLink="/" class="tao-grid-center-left tao-company-logo" alt="">
+    <img src="images/avatao_logo.svg" routerLink="/" class="tao-grid-center-left tfw-company-logo" alt="">
     <ul class="navbar-nav">
-      <li class="nav-item tao-header-title">Tutorials</li>
+      <li class="nav-item tfw-header-title">Tutorials</li>
     </ul>
   </div>
 </nav>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 6732de0..81d80bb 100755
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,24 +1,3 @@
-// Variables
-
-//
-// Spaces
-//
-$space: 24px;
-
-$sxlarge: 9 * $space;
-$xxxlarge: 6 * $space;
-$xxlarge: 4 * $space;
-$xlarge: 2 * $space;
-$large: 1.5 * $space;
-$medium: $space;
-$small: 0.75 * $space;
-$tiny: 0.5 * $space;
-$hair: 0.25 * $space;
-$nano: 0.125 * $space;
-
-//
-// Misc
-//
 $tao-blue-500: #277EEC;
 $font-size-base: 14px;
 $font-size-h3: floor(($font-size-base * 1.3));
@@ -27,15 +6,12 @@ $tao-navbar-height: 67px;
 
 $company-logo-width: 130px;
 
-//
-// Classes
-//
-.tao-header-title {
+.tfw-header-title {
   color: $tao-blue-500;
   font-size: $font-size-h3;
 }
 
-.tao-navbar {
+.tfw-navbar {
   background-color: rgba(255, 255, 255, 0.96);
   min-height: $tao-navbar-height;
   box-shadow: 0px 1px 6px 0px #888;
@@ -43,37 +19,37 @@ $company-logo-width: 130px;
   border: 1px solid #e7e7e7;
 }
 
-.tao-grid-navbar {
+.tfw-grid-navbar {
   display: grid;
   grid-template-columns: $company-logo-width 1fr;
   grid-column-gap: 8px;
   width: 100%;
 }
 
-.tao-company-logo {
+.tfw-company-logo {
   display: block;
   width: $company-logo-width;
 }
 
-.tao-company-logo-mobile {
+.tfw-company-logo-mobile {
   display: none;
   width: 130px;
 }
 
 @media (max-width: 767px) {
-  .tao-grid-navbar {
+  .tfw-grid-navbar {
     grid-template-columns: 1fr;
   }
 
-  .tao-company-logo {
+  .tfw-company-logo {
     display: none;
   }
 
-  .tao-company-logo-mobile {
+  .tfw-company-logo-mobile {
     display: block;
   }
 
-  .tao-navbar-links {
+  .tfw-navbar-links {
     justify-self: left !important;
   }
 }
diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html
index c29dd33..0be46f1 100755
--- a/src/app/messages/messages.component.html
+++ b/src/app/messages/messages.component.html
@@ -1,7 +1,7 @@
-<div class="tao-messages-main">
+<div class="tfw-messages-main">
   <h5>Instructions</h5>
-  <div class="tao-grid-message" *ngFor="let message of messages.slice().reverse()">
-    <div class="tao-grid-message-header">
+  <div class="tfw-grid-message" *ngFor="let message of messages.slice().reverse()">
+    <div class="tfw-grid-message-header">
       <img class="tao-grid-center-left" src="images/avataobot.svg"/>
       <div class="tao-grid-center-left originator">{{message.originator}}</div>
       <div class="timestamp tao-grid-center-right">{{message.timestamp | date:'HH:mm:ss'}}</div>
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss
index c76d449..90c889f 100755
--- a/src/app/messages/messages.component.scss
+++ b/src/app/messages/messages.component.scss
@@ -1,156 +1,20 @@
-//
-// Spaces
-//
-
 $space: 24px;
 
-$sxlarge: 9 * $space;
-$xxxlarge: 6 * $space;
-$xxlarge: 4 * $space;
-$xlarge: 2 * $space;
-$large: 1.5 * $space;
-$medium: $space;
 $small: 0.75 * $space;
 $tiny: 0.5 * $space;
 $hair: 0.25 * $space;
-$nano: 0.125 * $space;
 
 
-// Color system
-
-// Tao blue palette
-$tao-blue-50:  #F2F7FE;
-$tao-blue-100: #C9DFFA;
-$tao-blue-200: #A0C6F7;
-$tao-blue-300: #77AEF3;
-$tao-blue-400: #4E95EF;
 $tao-blue-500: #277EEC;
-$tao-blue-600: #2170B7;
-$tao-blue-700: #195684;
-$tao-blue-800: #103B5B;
-$tao-blue-900: #081A2B;
-
-// Tao sky palette
-$tao-sky-50:  #F1FAFD;
-$tao-sky-100: #C5E9F5;
-$tao-sky-200: #9AD8EE;
-$tao-sky-300: #6EC7E6;
-$tao-sky-400: #42B7DF;
-$tao-sky-500: #19A7D8;
-$tao-sky-600: #0E8BA8;
-$tao-sky-700: #04647A;
-$tao-sky-800: #004251;
-$tao-sky-900: #002028;
-
-// Tao phtalo palette
-$tao-phtalo-50:  #F2FBFC;
-$tao-phtalo-100: #C8EDF1;
-$tao-phtalo-200: #9FDFE6;
-$tao-phtalo-300: #75D1DB;
-$tao-phtalo-400: #4CC3D0;
-$tao-phtalo-500: #24B6C6;
-$tao-phtalo-600: #16989E;
-$tao-phtalo-700: #0C7575;
-$tao-phtalo-800: #034C4F;
-$tao-phtalo-900: #002426;
-
-// Tao turqoise palette
-$tao-turqoise-50:  #F1FBFB;
-$tao-turqoise-100: #C3EFEF;
-$tao-turqoise-200: #96E3E3;
-$tao-turqoise-300: #68D7D7;
-$tao-turqoise-400: #3BCBCB;
-$tao-turqoise-500: #10BFBF;
-$tao-turqoise-600: #079995;
-$tao-turqoise-700: #00726F;
-$tao-turqoise-800: #004C4A;
-$tao-turqoise-900: #002625;
-
-// Tao bright green palette
-$tao-bright-green-50:  #effbf7;
-$tao-bright-green-100: #c5f2e4;
-$tao-bright-green-200: #a0ead3;
-$tao-bright-green-300: #7ae2c2;
-$tao-bright-green-400: #55d9b0;
-$tao-bright-green-500: #2fd19f;
-$tao-bright-green-600: #2ab587;
-$tao-bright-green-700: #248e63;
-$tao-bright-green-800: #1c6844;
-$tao-bright-green-900: #114431;
-
-// Tao warm yellow palette
-$tao-warm-yellow-50:  #FFF8EB;
-$tao-warm-yellow-100: #FFEDCE;
-$tao-warm-yellow-200: #FFE0A9;
-$tao-warm-yellow-300: #FFD283;
-$tao-warm-yellow-400: #FFC55E;
-$tao-warm-yellow-500: #FFB83B;
-$tao-warm-yellow-600: #E59C3C;
-$tao-warm-yellow-700: #CC8B36;
-$tao-warm-yellow-800: #B2762F;
-$tao-warm-yellow-900: #996526;
-
-// Tao plum palette
-$tao-plum-50:  #F6F8FD;
-$tao-plum-100: #DADFF8;
-$tao-plum-200: #BEC7F3;
-$tao-plum-300: #A2AFED;
-$tao-plum-400: #8797E8;
-$tao-plum-500: #6C80E3;
-$tao-plum-600: #5E77BF;
-$tao-plum-700: #4B5E99;
-$tao-plum-800: #384672;
-$tao-plum-900: #272F4C;
-
-// Tao pink palette
-$tao-pink-50:  #FFF0F7;
-$tao-pink-100: #FFBFDF;
-$tao-pink-200: #FF8FC6;
-$tao-pink-300: #FF5EAE;
-$tao-pink-400: #FF2E95;
-$tao-pink-500: #FF007E;
-$tao-pink-600: #D8007C;
-$tao-pink-700: #B20066;
-$tao-pink-800: #8C0050;
-$tao-pink-900: #66003A;
-
-// Tao red palette
-$tao-red-50:  #FFF5F5;
-$tao-red-100: #FFD4D4;
-$tao-red-200: #FFB3B3;
-$tao-red-300: #FF9292;
-$tao-red-400: #FF7171;
-$tao-red-500: #FF5252;
-$tao-red-600: #E54848;
-$tao-red-700: #CC3636;
-$tao-red-800: #B22424;
-$tao-red-900: #991919;
-
-// Tao gray palette
-$tao-gray-50:  #FAFAFA;
 $tao-gray-100: #F2F2F2;
-$tao-gray-200: #D6D6D6;
-$tao-gray-300: #A0A0A0;
-$tao-gray-400: #777777;
-$tao-gray-500: #555555;
-$tao-gray-600: #323232;
-$tao-gray-700: #232323;
-$tao-gray-800: #0C0C0C;
-$tao-gray-900: #000000;
 
-// Panel border radius
-$tao-panel-border-radius:	     14px;
 $tao-panel-border-radius-sm:	 8px;
-$tao-input-border-radius:	     6px;
 
-$font-size-nano:          11px;
 $font-size-tiny:          12px;
-$font-size-small:         13px;
 $font-size-base:          14px;
 
 
-.tao-messages-main {
-
+.tfw-messages-main {
   max-height: 50vmin;
   overflow-y: scroll;
 
@@ -161,7 +25,7 @@ $font-size-base:          14px;
   }
 }
 
-.tao-grid-message {
+.tfw-grid-message {
   display: grid;
   grid-template-rows: 1fr auto;
   grid-row-gap: $hair;
@@ -174,7 +38,7 @@ $font-size-base:          14px;
   margin-bottom: $hair;
 }
 
-.tao-grid-message-header {
+.tfw-grid-message-header {
   display: grid;
   grid-template-columns: 1fr 5fr 8fr;
   grid-column-gap: 4px;
diff --git a/src/app/terminal/terminal.component.scss b/src/app/terminal/terminal.component.scss
index 5a774d9..e69de29 100644
--- a/src/app/terminal/terminal.component.scss
+++ b/src/app/terminal/terminal.component.scss
@@ -1,217 +0,0 @@
-// Tao blue palette
-$tao-blue-50:  #F2F7FE;
-$tao-blue-100: #C9DFFA;
-$tao-blue-200: #A0C6F7;
-$tao-blue-300: #77AEF3;
-$tao-blue-400: #4E95EF;
-$tao-blue-500: #277EEC;
-$tao-blue-600: #2170B7;
-$tao-blue-700: #195684;
-$tao-blue-800: #103B5B;
-$tao-blue-900: #081A2B;
-
-// Tao sky palette
-$tao-sky-50:  #F1FAFD;
-$tao-sky-100: #C5E9F5;
-$tao-sky-200: #9AD8EE;
-$tao-sky-300: #6EC7E6;
-$tao-sky-400: #42B7DF;
-$tao-sky-500: #19A7D8;
-$tao-sky-600: #0E8BA8;
-$tao-sky-700: #04647A;
-$tao-sky-800: #004251;
-$tao-sky-900: #002028;
-
-// Tao phtalo palette
-$tao-phtalo-50:  #F2FBFC;
-$tao-phtalo-100: #C8EDF1;
-$tao-phtalo-200: #9FDFE6;
-$tao-phtalo-300: #75D1DB;
-$tao-phtalo-400: #4CC3D0;
-$tao-phtalo-500: #24B6C6;
-$tao-phtalo-600: #16989E;
-$tao-phtalo-700: #0C7575;
-$tao-phtalo-800: #034C4F;
-$tao-phtalo-900: #002426;
-
-// Tao turqoise palette
-$tao-turqoise-50:  #F1FBFB;
-$tao-turqoise-100: #C3EFEF;
-$tao-turqoise-200: #96E3E3;
-$tao-turqoise-300: #68D7D7;
-$tao-turqoise-400: #3BCBCB;
-$tao-turqoise-500: #10BFBF;
-$tao-turqoise-600: #079995;
-$tao-turqoise-700: #00726F;
-$tao-turqoise-800: #004C4A;
-$tao-turqoise-900: #002625;
-
-// Tao bright green palette
-$tao-bright-green-50:  #effbf7;
-$tao-bright-green-100: #c5f2e4;
-$tao-bright-green-200: #a0ead3;
-$tao-bright-green-300: #7ae2c2;
-$tao-bright-green-400: #55d9b0;
-$tao-bright-green-500: #2fd19f;
-$tao-bright-green-600: #2ab587;
-$tao-bright-green-700: #248e63;
-$tao-bright-green-800: #1c6844;
-$tao-bright-green-900: #114431;
-
-// Tao warm yellow palette
-$tao-warm-yellow-50:  #FFF8EB;
-$tao-warm-yellow-100: #FFEDCE;
-$tao-warm-yellow-200: #FFE0A9;
-$tao-warm-yellow-300: #FFD283;
-$tao-warm-yellow-400: #FFC55E;
-$tao-warm-yellow-500: #FFB83B;
-$tao-warm-yellow-600: #E59C3C;
-$tao-warm-yellow-700: #CC8B36;
-$tao-warm-yellow-800: #B2762F;
-$tao-warm-yellow-900: #996526;
-
-// Tao plum palette
-$tao-plum-50:  #F6F8FD;
-$tao-plum-100: #DADFF8;
-$tao-plum-200: #BEC7F3;
-$tao-plum-300: #A2AFED;
-$tao-plum-400: #8797E8;
-$tao-plum-500: #6C80E3;
-$tao-plum-600: #5E77BF;
-$tao-plum-700: #4B5E99;
-$tao-plum-800: #384672;
-$tao-plum-900: #272F4C;
-
-// Tao pink palette
-$tao-pink-50:  #FFF0F7;
-$tao-pink-100: #FFBFDF;
-$tao-pink-200: #FF8FC6;
-$tao-pink-300: #FF5EAE;
-$tao-pink-400: #FF2E95;
-$tao-pink-500: #FF007E;
-$tao-pink-600: #D8007C;
-$tao-pink-700: #B20066;
-$tao-pink-800: #8C0050;
-$tao-pink-900: #66003A;
-
-// Tao red palette
-$tao-red-50:  #FFF5F5;
-$tao-red-100: #FFD4D4;
-$tao-red-200: #FFB3B3;
-$tao-red-300: #FF9292;
-$tao-red-400: #FF7171;
-$tao-red-500: #FF5252;
-$tao-red-600: #E54848;
-$tao-red-700: #CC3636;
-$tao-red-800: #B22424;
-$tao-red-900: #991919;
-
-// Tao gray palette
-$tao-gray-50:  #FAFAFA;
-$tao-gray-100: #F2F2F2;
-$tao-gray-200: #D6D6D6;
-$tao-gray-300: #A0A0A0;
-$tao-gray-400: #777777;
-$tao-gray-500: #555555;
-$tao-gray-600: #323232;
-$tao-gray-700: #232323;
-$tao-gray-800: #0C0C0C;
-$tao-gray-900: #000000;
-
-.xterm {
-  font-family: courier-new, courier, monospace;
-  font-feature-settings: "liga" 0;
-  position: relative;
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.xterm.focus,
-.xterm:focus {
-  outline: none;
-}
-
-.xterm .xterm-helpers {
-  position: absolute;
-  top: 0;
-  /**
-   * The z-index of the helpers must be higher than the canvases in order for
-   * IMEs to appear on top.
-   */
-  z-index: 10;
-}
-
-.xterm .xterm-helper-textarea {
-  /*
-   * HACK: to fix IE's blinking cursor
-   * Move textarea out of the screen to the far left, so that the cursor is not visible.
-   */
-  position: absolute;
-  opacity: 0;
-  left: -9999em;
-  top: 0;
-  width: 0;
-  height: 0;
-  z-index: -10;
-  /** Prevent wrapping so the IME appears against the textarea at the correct position */
-  white-space: nowrap;
-  overflow: hidden;
-  resize: none;
-}
-
-.xterm .composition-view {
-  /* TODO: Composition position got messed up somewhere */
-  background: $tao-blue-800;
-  color: #FFF;
-  display: none;
-  position: absolute;
-  white-space: nowrap;
-  z-index: 1;
-}
-
-.xterm .composition-view.active {
-  display: block;
-}
-
-.xterm .xterm-viewport {
-  /* On OS X this is required in order for the scroll bar to appear fully opaque */
-  background-color: $tao-blue-800;
-  overflow-y: scroll;
-  cursor: default;
-  position: absolute;
-  right: 0;
-  left: 0;
-  top: 0;
-  bottom: 0;
-}
-
-.xterm .xterm-screen {
-  position: relative;
-}
-
-.xterm .xterm-screen canvas {
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-.xterm .xterm-scroll-area {
-  visibility: hidden;
-}
-
-.xterm .xterm-char-measure-element {
-  display: inline-block;
-  visibility: hidden;
-  position: absolute;
-  left: -9999em;
-}
-
-.xterm.enable-mouse-events {
-  /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
-  cursor: default;
-}
-
-.xterm:not(.enable-mouse-events) {
-  cursor: text;
-}
diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html
index 9f7a03c..6bbb1b3 100644
--- a/src/app/webide/webide.component.html
+++ b/src/app/webide/webide.component.html
@@ -1,7 +1,7 @@
-<div class="tao-grid-container">
+<div class="tfw-grid-container">
   <div class="btn-group btn-group-sm flex-wrap tao-grid-center-left">
     <button *ngFor="let file of files"
-            class="btn tao-tab-btn"
+            class="btn tfw-tab-btn"
             (click)="tabSwitchButtonHandler(file)"
             [class.active]="filename === file"
             [class.disabled]="filename === file"
@@ -11,9 +11,9 @@
     </button>
   </div>
 
-  <div class="btn-group-sm tao-deploy-btn-group">
+  <div class="btn-group-sm tfw-deploy-btn-group">
     <button type="submit"
-            class="btn tao-deploy-btn tao-grid-top-center"
+            class="btn tfw-deploy-btn tao-grid-top-center"
             (click)="sendCodeIfDirty(); deployCode()"
             [disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
             [class.deployed]="deployButtonState === 'DEPLOYED'"
diff --git a/src/app/webide/webide.component.scss b/src/app/webide/webide.component.scss
index 4575000..c8501b2 100644
--- a/src/app/webide/webide.component.scss
+++ b/src/app/webide/webide.component.scss
@@ -1,142 +1,18 @@
-//
-// Spaces
-//
-
 $space: 24px;
-
-$sxlarge: 9 * $space;
-$xxxlarge: 6 * $space;
-$xxlarge: 4 * $space;
-$xlarge: 2 * $space;
-$large: 1.5 * $space;
-$medium: $space;
 $small: 0.75 * $space;
-$tiny: 0.5 * $space;
-$hair: 0.25 * $space;
-$nano: 0.125 * $space;
 
-
-// Tao blue palette
-$tao-blue-50:  #F2F7FE;
-$tao-blue-100: #C9DFFA;
-$tao-blue-200: #A0C6F7;
-$tao-blue-300: #77AEF3;
-$tao-blue-400: #4E95EF;
-$tao-blue-500: #277EEC;
-$tao-blue-600: #2170B7;
-$tao-blue-700: #195684;
-$tao-blue-800: #103B5B;
-$tao-blue-900: #081A2B;
-
-// Tao sky palette
-$tao-sky-50:  #F1FAFD;
-$tao-sky-100: #C5E9F5;
-$tao-sky-200: #9AD8EE;
-$tao-sky-300: #6EC7E6;
-$tao-sky-400: #42B7DF;
-$tao-sky-500: #19A7D8;
-$tao-sky-600: #0E8BA8;
-$tao-sky-700: #04647A;
-$tao-sky-800: #004251;
-$tao-sky-900: #002028;
-
-// Tao phtalo palette
-$tao-phtalo-50:  #F2FBFC;
-$tao-phtalo-100: #C8EDF1;
-$tao-phtalo-200: #9FDFE6;
-$tao-phtalo-300: #75D1DB;
-$tao-phtalo-400: #4CC3D0;
-$tao-phtalo-500: #24B6C6;
-$tao-phtalo-600: #16989E;
-$tao-phtalo-700: #0C7575;
-$tao-phtalo-800: #034C4F;
-$tao-phtalo-900: #002426;
-
-// Tao turqoise palette
-$tao-turqoise-50:  #F1FBFB;
-$tao-turqoise-100: #C3EFEF;
-$tao-turqoise-200: #96E3E3;
-$tao-turqoise-300: #68D7D7;
-$tao-turqoise-400: #3BCBCB;
-$tao-turqoise-500: #10BFBF;
-$tao-turqoise-600: #079995;
-$tao-turqoise-700: #00726F;
-$tao-turqoise-800: #004C4A;
-$tao-turqoise-900: #002625;
-
-// Tao bright green palette
-$tao-bright-green-50:  #effbf7;
 $tao-bright-green-100: #c5f2e4;
 $tao-bright-green-200: #a0ead3;
-$tao-bright-green-300: #7ae2c2;
-$tao-bright-green-400: #55d9b0;
-$tao-bright-green-500: #2fd19f;
-$tao-bright-green-600: #2ab587;
-$tao-bright-green-700: #248e63;
-$tao-bright-green-800: #1c6844;
-$tao-bright-green-900: #114431;
 
-// Tao warm yellow palette
-$tao-warm-yellow-50:  #FFF8EB;
-$tao-warm-yellow-100: #FFEDCE;
 $tao-warm-yellow-200: #FFE0A9;
-$tao-warm-yellow-300: #FFD283;
-$tao-warm-yellow-400: #FFC55E;
-$tao-warm-yellow-500: #FFB83B;
 $tao-warm-yellow-600: #E59C3C;
-$tao-warm-yellow-700: #CC8B36;
-$tao-warm-yellow-800: #B2762F;
-$tao-warm-yellow-900: #996526;
 
-// Tao plum palette
-$tao-plum-50:  #F6F8FD;
-$tao-plum-100: #DADFF8;
 $tao-plum-200: #BEC7F3;
-$tao-plum-300: #A2AFED;
-$tao-plum-400: #8797E8;
-$tao-plum-500: #6C80E3;
-$tao-plum-600: #5E77BF;
-$tao-plum-700: #4B5E99;
-$tao-plum-800: #384672;
 $tao-plum-900: #272F4C;
-
-// Tao pink palette
-$tao-pink-50:  #FFF0F7;
-$tao-pink-100: #FFBFDF;
-$tao-pink-200: #FF8FC6;
-$tao-pink-300: #FF5EAE;
-$tao-pink-400: #FF2E95;
-$tao-pink-500: #FF007E;
-$tao-pink-600: #D8007C;
-$tao-pink-700: #B20066;
-$tao-pink-800: #8C0050;
-$tao-pink-900: #66003A;
-
-// Tao red palette
-$tao-red-50:  #FFF5F5;
-$tao-red-100: #FFD4D4;
-$tao-red-200: #FFB3B3;
-$tao-red-300: #FF9292;
-$tao-red-400: #FF7171;
 $tao-red-500: #FF5252;
-$tao-red-600: #E54848;
-$tao-red-700: #CC3636;
-$tao-red-800: #B22424;
-$tao-red-900: #991919;
 
-// Tao gray palette
-$tao-gray-50:  #FAFAFA;
-$tao-gray-100: #F2F2F2;
-$tao-gray-200: #D6D6D6;
-$tao-gray-300: #A0A0A0;
-$tao-gray-400: #777777;
-$tao-gray-500: #555555;
-$tao-gray-600: #323232;
-$tao-gray-700: #232323;
-$tao-gray-800: #0C0C0C;
-$tao-gray-900: #000000;
 
-.tao-grid-container {
+.tfw-grid-container {
   display: grid;
   grid-template-columns: 8fr 1fr;
 }
@@ -150,7 +26,7 @@ $tao-gray-900: #000000;
   padding-left: 34px;
 }
 
-.tao-tab-btn {
+.tfw-tab-btn {
   background-color: white;
   border: 1px solid $tao-plum-900;
   border-left: 0;
@@ -159,7 +35,7 @@ $tao-gray-900: #000000;
   padding: 5px 19px;
   z-index: 200;
 
-  .tao-tab-btn-saved,
+  .tfw-tab-btn-saved,
   .active,
   .disabled,
   &:disabled {
@@ -168,10 +44,10 @@ $tao-gray-900: #000000;
   }
 }
 
-.tao-deploy-btn-group {
+.tfw-deploy-btn-group {
   margin: $small;
 
-  .tao-deploy-btn {
+  .tfw-deploy-btn {
     background: $tao-bright-green-200;
     border-radius: 100px;
     padding: 6px 19px;