From b755f17b6aecc4be67b17008d32b472fbe875d0f Mon Sep 17 00:00:00 2001
From: Scott Anderson <scott@influxdata.com>
Date: Tue, 14 Apr 2020 14:54:03 -0600
Subject: [PATCH] WIP dark theme

---
 CONTRIBUTING.md                               |  23 ----
 assets/styles/layouts/_error-page.scss        |   6 +-
 assets/styles/layouts/_top-nav.scss           |   4 +-
 assets/styles/layouts/_ui-messages.scss       |  47 --------
 assets/styles/layouts/article/_buttons.scss   |  29 ++++-
 assets/styles/layouts/article/_cloud.scss     |   8 +-
 assets/styles/layouts/article/_note.scss      |   8 +-
 .../layouts/article/_tabbed-content.scss      | 113 ++++++++++--------
 assets/styles/layouts/article/_tables.scss    |   2 +-
 assets/styles/layouts/article/_warn.scss      |   8 +-
 assets/styles/styles-default.scss             |   1 -
 assets/styles/themes/_theme-dark.scss         |  32 +++--
 assets/styles/themes/_theme-light.scss        |  60 +++++-----
 assets/styles/tools/_color-palette.scss       |  38 +++++-
 assets/styles/tools/mixins.scss               |   4 +
 content/v2.0/example.md                       |  56 +++++++--
 content/v2.0/write-data/quick-start.md        |   4 -
 layouts/shortcodes/ui-message.html            |   8 --
 18 files changed, 239 insertions(+), 212 deletions(-)
 delete mode 100644 assets/styles/layouts/_ui-messages.scss
 delete mode 100644 layouts/shortcodes/ui-message.html

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index d744780ce..161f84eec 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -521,29 +521,6 @@ The following case insensitive values are supported:
 - settings
 - feedback
 
-### InfluxDB UI notification messages
-In some cases, documentation references a notification message that appears in
-the top-right corner of the InfluxDB UI.
-Rather than taking a screenshot of the message (that can be hard to maintain over time),
-use the `{{< ui-message >}}` shortcode.
-
-It expects two parameters:
-
-**`text`** (Required)  
-The message displayed.
-
-**`color`** (Optional)  
-Sets the background color and icons used in the message.
-The following options are available:
-
-- green _(default)_
-- blue
-- red
-
-```
-{{< ui-message color="green" text="The message displayed in the notification.">}}
-```
-
 ### Flexbox-formatted content blocks
 CSS Flexbox formatting lets you create columns in article content that adjust and
 flow based on the viewable width.
diff --git a/assets/styles/layouts/_error-page.scss b/assets/styles/layouts/_error-page.scss
index f00c90783..0aa5ddae0 100644
--- a/assets/styles/layouts/_error-page.scss
+++ b/assets/styles/layouts/_error-page.scss
@@ -61,12 +61,12 @@
       margin-right: 4px;
       padding: .75rem 1rem;
       border-radius: $radius;
-      background: $error-page-btn;
       text-align: center;
       color: $error-page-btn-text;
+      transition: background-color .2s;
+      @include gradient($grad-blue);
       &:hover {
-        background: $error-page-btn-hover;
-        color: $error-page-btn-hover-text;
+        @include gradient($grad-blue);
       }
       &.back:before {
         content: "\e90a";
diff --git a/assets/styles/layouts/_top-nav.scss b/assets/styles/layouts/_top-nav.scss
index 8aeadd6b0..156d90a83 100644
--- a/assets/styles/layouts/_top-nav.scss
+++ b/assets/styles/layouts/_top-nav.scss
@@ -42,7 +42,7 @@
     right: 3.5rem;
     color: $g20-white;
     height: 2rem;
-    background: $version-selector-top;
+    @include gradient($version-selector-gradient);
     font-weight: $medium;
     border-radius: $radius;
     overflow: hidden;
@@ -65,7 +65,7 @@
 
     &.open {
       height: auto;
-      background: linear-gradient($version-selector-top, $version-selector-bottom);
+      @include gradient($version-selector-gradient);
       &:after {
         transform: rotate(180deg);
       }
diff --git a/assets/styles/layouts/_ui-messages.scss b/assets/styles/layouts/_ui-messages.scss
deleted file mode 100644
index 076db5884..000000000
--- a/assets/styles/layouts/_ui-messages.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-.article--content {
-  .ui-message {
-    display: flex;
-    align-items: center;
-    width: 375px;
-    margin: 1rem 0 2rem;
-    padding: .85rem 0;
-    font-family: $rubik;
-    font-size: .9rem;
-    border-radius: 5px;
-    color: $g20-white;
-
-    .icon, .close {
-      width: 13%;
-      text-align: center;
-      font-family: 'icomoon';
-      font-size: 1.1rem;
-    }
-
-    .close:after {
-      content: "\e932";
-      opacity: .25;
-    }
-
-    .text {
-      width: 74%;
-      font-weight: $medium;
-    }
-
-    &.green {
-      background: linear-gradient(45deg, #34bb56, #00a3fe);
-      .icon:before { content: ""; }
-    }
-
-    &.blue {
-      background: linear-gradient(45deg, rgb(190, 46, 228), rgb(0, 163, 255));
-      .icon:before { content: "\e935"; }
-    }
-
-    &.red {
-      background: linear-gradient(45deg, rgb(220, 78, 88), rgb(142, 31, 195));
-      .icon:before { content: "\e920"; }
-    }
-
-
-  }
-}
diff --git a/assets/styles/layouts/article/_buttons.scss b/assets/styles/layouts/article/_buttons.scss
index 74047082e..bebd3046c 100644
--- a/assets/styles/layouts/article/_buttons.scss
+++ b/assets/styles/layouts/article/_buttons.scss
@@ -1,22 +1,43 @@
 /////////////////////////////////// Buttons //////////////////////////////////
 
 a.btn {
+  position: relative;
   display: inline-block;
-  margin: .5rem 0 1rem;
+  margin: .5rem .25rem .5rem 0;
   padding: .5rem 1rem;
-  background: $article-btn;
   color: $article-btn-text;
   border-radius: $radius;
   font-size: .95rem;
+  z-index: 1;
+  @include gradient($grad-blue);
+
+  &:after {
+    content: "";
+    position: absolute;
+    display: block;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: $radius;
+    @include gradient($grad-blue-light);
+    opacity: 0;
+    transition: opacity .2s;
+    z-index: -1;
+  }
 
   &:hover {
-    background: $article-btn-hover;
-    color: $article-btn-text-hover;
+    cursor: pointer;
+
+    &:after {
+      opacity: 1;
+    }
   }
 
   &.download:before {
     content: "\e91c";
     font-family: "icomoon";
     margin-right: .5rem;
+    font-size: 1.1rem;
   }
 }
diff --git a/assets/styles/layouts/article/_cloud.scss b/assets/styles/layouts/article/_cloud.scss
index 593a5c631..043c35a90 100644
--- a/assets/styles/layouts/article/_cloud.scss
+++ b/assets/styles/layouts/article/_cloud.scss
@@ -69,7 +69,7 @@
     color: $article-cloud-text;
     box-shadow: 1px 3px 10px $article-cloud-shadow;
     thead{
-      background: $article-cloud-table-header;
+      @include gradient($article-cloud-table-header);
     }
     tr:nth-child(even) td {
       background: $article-cloud-table-row-alt;
@@ -81,7 +81,11 @@
   }
   .code-tabs-wrapper .code-tabs a {
     background: transparent;
-    &.is-active {background: $article-cloud-code-bg}
+    color: rgba($article-cloud-text, .5);
+    &:hover { color: rgba($article-cloud-text, 1); }
+    &.is-active {
+      color: rgba($article-cloud-text, 1);
+      background: $article-cloud-code-bg};
   }
 
   &.flex {
diff --git a/assets/styles/layouts/article/_note.scss b/assets/styles/layouts/article/_note.scss
index 1bcf3d716..597e94ac5 100644
--- a/assets/styles/layouts/article/_note.scss
+++ b/assets/styles/layouts/article/_note.scss
@@ -36,7 +36,7 @@
     color: $article-note-text;
     box-shadow: 1px 3px 10px $article-note-shadow;
     thead{
-      background: $article-note-table-header;
+      @include gradient($article-note-table-header);
     }
     tr:nth-child(even) td {
       background: $article-note-table-row-alt;
@@ -48,6 +48,10 @@
   }
   .code-tabs-wrapper .code-tabs a {
     background: transparent;
-    &.is-active {background: $article-note-code-bg}
+    color: rgba($article-note-text, .5);
+    &:hover { color: rgba($article-note-text, 1); }
+    &.is-active {
+      color: rgba($article-note-text, 1);
+      background: $article-note-code-bg};
   }
 }
diff --git a/assets/styles/layouts/article/_tabbed-content.scss b/assets/styles/layouts/article/_tabbed-content.scss
index 9e27ba96e..257c4404c 100644
--- a/assets/styles/layouts/article/_tabbed-content.scss
+++ b/assets/styles/layouts/article/_tabbed-content.scss
@@ -1,14 +1,9 @@
 /////////////////////////////// Tabbed Content ///////////////////////////////
 
-.tabs-wrapper {
-  margin: 2.5rem 0 .5rem;
-}
+.tabs-wrapper { margin: 2.5rem 0 .5rem; }
+.code-tabs-wrapper { margin: 1.5rem 0 .5rem; }
 
-.code-tabs-wrapper {
-  margin: 1.5rem 0 .5rem;
-}
-
-.tabs, .code-tabs {
+.tabs {
   p {
     display: flex;
     flex-wrap: wrap;
@@ -16,70 +11,90 @@
   a {
     flex-grow: 1;
     margin: 2px;
+    position: relative;
     font-size: 0.875rem;
     font-weight: $medium;
-    color: $article-tab-text;
     padding: .35rem .75rem;
     display: inline-block;
     text-align: center;
+    color: $article-tab-text;
     border-radius: $radius;
     background-color: $article-tab-bg;
     transition: background-color .2s, color .2s;
+    z-index: 1;
+
+    &:after {
+      content: "";
+      position: absolute;
+      display: block;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: $radius;
+      @include gradient($grad-blue);
+      opacity: 0;
+      transition: opacity .2s;
+      z-index: -1;
+    }
 
     &:hover {
       color: $article-tab-active-text;
-      background: $article-tab-active-bg;
+      &:after {
+        opacity: 1;
+      }
     }
     &.is-active {
       color: $article-tab-active-text;
-      background: $article-tab-active-bg;
+      &:after {
+        opacity: 1;
+        @include gradient($grad-blue)
+      }
     }
   }
 }
 
+.code-tabs {
+  p {
+    margin: 0;
+    text-align: right;
+    display: block;
+  }
+  a {
+    padding: .1rem .75rem;
+    margin: 0;
+    border-radius: $radius $radius 0 0;
+    display: inline-block;
+    font-size: 0.875rem;
+    background: $article-bg;
+    color: rgba($article-tab-code-text, .5);
+    &:hover {
+     color: $article-tab-code-text;
+    }
+    &.is-active {
+     background-color: $article-code-bg;
+     color: $article-tab-code-text;
+    }
+  }
+}
+
+.code-tab-content {
+  padding: 0;
+  pre {
+    margin: 0 0 3rem;
+    border-radius: $radius 0 $radius $radius;
+  }
+}
+
 .tab-content, .code-tabs-content {
   margin: .75rem 0 3rem;
   width: 100%;
 
   & > * {
-    width: 100% !important;
-    margin-left: 0 !important;
+    width: 100%;
+    margin-left: 0;
   }
 }
 
-.tab-content:not(:first-of-type),
-.code-tab-content:not(:first-of-type) {
-  display: none;
-}
-
-.code-tabs-wrapper {
-  .code-tabs {
-    p {
-      margin: 0;
-      text-align: right;
-      display: block;
-    }
-    a {
-      padding: .1rem .75rem;
-      margin: 0;
-      border-radius: $radius $radius 0 0;
-      display: inline-block;
-      background: $article-bg;
-      color: rgba($article-tab-code-text, .5);
-      &:hover {
-       color: $article-tab-code-text;
-      }
-      &.is-active {
-       background-color: $article-code-bg;
-       color: $article-tab-code-text;
-      }
-    }
-  }
-  .code-tab-content {
-    padding: 0;
-    pre {
-      margin: 0 0 3rem;
-      border-radius: $radius 0 $radius $radius;
-    }
-  }
-}
+.tab-content:not(:first-of-type) { display: none; }
+.code-tab-content:not(:first-of-type) { display: none; }
diff --git a/assets/styles/layouts/article/_tables.scss b/assets/styles/layouts/article/_tables.scss
index 333009384..dfdecbb19 100644
--- a/assets/styles/layouts/article/_tables.scss
+++ b/assets/styles/layouts/article/_tables.scss
@@ -15,7 +15,7 @@ table {
     padding: .85rem 1.25rem;
   }
   thead {
-    background: linear-gradient(to right, $article-table-header-left, $article-table-header-right);
+    @include gradient($article-table-header, 90deg);
     background-attachment: fixed;
   }
 
diff --git a/assets/styles/layouts/article/_warn.scss b/assets/styles/layouts/article/_warn.scss
index 1aae7f237..e0c3fa99a 100644
--- a/assets/styles/layouts/article/_warn.scss
+++ b/assets/styles/layouts/article/_warn.scss
@@ -36,7 +36,7 @@
     color: $article-warn-text;
     box-shadow: 1px 3px 10px $article-warn-shadow;
     thead{
-      background: $article-warn-table-header;
+      @include gradient($article-warn-table-header);
     }
     tr:nth-child(even) td {
       background: $article-warn-table-row-alt;
@@ -48,6 +48,10 @@
   }
   .code-tabs-wrapper .code-tabs a {
     background: transparent;
-    &.is-active {background: $article-warn-code-bg}
+    color: rgba($article-warn-text, .5);
+    &:hover { color: rgba($article-warn-text, 1); }
+    &.is-active {
+      color: rgba($article-warn-text, 1);
+      background: $article-warn-code-bg};
   }
 }
diff --git a/assets/styles/styles-default.scss b/assets/styles/styles-default.scss
index ac37b1ae0..0773c2d24 100644
--- a/assets/styles/styles-default.scss
+++ b/assets/styles/styles-default.scss
@@ -18,7 +18,6 @@
         "layouts/content-wrapper",
         "layouts/article",
         "layouts/inline-icons",
-        "layouts/ui-messages",
         "layouts/syntax-highlighting",
         "layouts/algolia-search-overrides",
         "layouts/landing",
diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss
index 04888ebf6..8cabd2900 100644
--- a/assets/styles/themes/_theme-dark.scss
+++ b/assets/styles/themes/_theme-dark.scss
@@ -19,8 +19,7 @@ $body-bg: $g0-obsidian;
 // TopNav Colors
 $topnav-link: $g20-white;
 $topnav-link-hover: $b-pool;
-$version-selector-top: $b-pool;
-$version-selector-bottom: $br-galaxy;
+$version-selector-gradient: $grad-miyazakisky;
 $theme-switch-light: inline-block;
 $theme-switch-dark: none;
 
@@ -33,7 +32,7 @@ $sidebar-search-text: $g20-white;
 // Left Navigation
 $nav-category: $b-pool;
 $nav-category-hover: $g20-white;
-$nav-item: $g16-pearl;
+$nav-item: $g15-platinum;
 $nav-item-hover: $b-pool;
 $nav-border: $g5-pepper;
 $nav-toggle: $g16-pearl;
@@ -45,7 +44,7 @@ $nav-active: $br-chartreuse;
 $article-bg: $g1-raven;
 $article-heading: $g20-white;
 $article-heading-alt: $g19-ghost;
-$article-text: $g16-pearl;
+$article-text: $g15-platinum;
 $article-bold: $g19-ghost;
 $article-link: $b-pool;
 $article-link-hover: $g20-white;
@@ -54,7 +53,7 @@ $article-shadow: $g0-obsidian;
 
 // Article Code
 $article-code: $cp-munchkin;
-$article-code-bg: $code-dark-bg;
+$article-code-bg: $g0-obsidian;
 $article-code-shadow: $g0-obsidian;
 $article-code-accent1: $np-smokey;
 $article-code-accent2: $b-pool;
@@ -64,13 +63,12 @@ $article-code-accent5: #ff6db0;
 $article-code-accent6: $b-pool;
 $article-code-accent7: #e90;
 $article-code-select: $b-pool;
-$article-code-link: $b-dodger;
+$article-code-link: $b-pool;
 $article-code-link-hover: $g20-white;
 $article-code-scrollbar: $g3-castle;
 
 // Article Tables
-$article-table-header-left: $br-pulsar;
-$article-table-header-right: $b-pool;
+$article-table-header: $grad-gundampilot;
 $article-table-row-alt: $g3-castle;
 $article-table-scrollbar: $g0-obsidian;
 
@@ -80,7 +78,7 @@ $article-note-heading: $g20-white;
 $article-note-text: $gr-honeydew;
 $article-note-link: $gr-wasabi;
 $article-note-link-hover: $g20-white;
-$article-note-table-header: $gr-viridian;
+$article-note-table-header: $grad-green-dark;
 $article-note-table-row-alt: #1a3c34;
 $article-note-table-scrollbar: #162627;
 $article-note-shadow: $g0-obsidian;
@@ -100,9 +98,9 @@ $article-warn-heading: $g20-white;
 $article-warn-text: $r-tungsten;
 $article-warn-link: $r-marmelade;
 $article-warn-link-hover: $g20-white;
-$article-warn-table-header: rgba($r-dreamsicle, .9);
+$article-warn-table-header: $grad-red;
 $article-warn-table-row-alt: #4a2a2a;
-$article-warn-table-scrollbar: #2a2025;
+$article-warn-table-scrollbar: #1f181b;
 $article-warn-shadow: $g0-obsidian;
 $article-warn-code: #ec6e6e;
 $article-warn-code-bg: $g0-obsidian;
@@ -120,7 +118,7 @@ $article-cloud-heading: $g20-white;
 $article-cloud-text: $b-fleur;
 $article-cloud-link: $b-hawkeye;
 $article-cloud-link-hover: $g20-white;
-$article-cloud-table-header: $b-pool;
+$article-cloud-table-header: $grad-blue-dark;
 $article-cloud-table-row-alt: #1b3a58;
 $article-cloud-table-scrollbar: #192a3a;
 $article-cloud-shadow: $g0-obsidian;
@@ -159,20 +157,20 @@ $article-nav-icon-bg: $g5-pepper;
 $article-nav-acct-bg: $g3-castle;
 
 // Error Page Colors
-$error-page-btn: $b-dodger;
+$error-page-btn: $b-pool;
 $error-page-btn-text: $g20-white;
 $error-page-btn-hover: $g20-white;
-$error-page-btn-hover-text: $b-dodger;
+$error-page-btn-hover-text: $b-pool;
 
 // Landing Page colors
 $landing-lg-gradient-left: $wp-violentdark;
 $landing-lg-gradient-right: $cp-minsk;
 $landing-sm-bg: $cp-victoria;
 $landing-sm-bg-alt: $cp-victoria;
-$landing-sm-bg-hover: $b-dodger;
+$landing-sm-bg-hover: $b-pool;
 $landing-btn-text: $g20-white;
-$landing-btn-bg: $b-dodger;
-$landing-btn-text-hover: $b-dodger;
+$landing-btn-bg: $b-pool;
+$landing-btn-text-hover: $b-pool;
 $landing-btn-bg-hover: $g20-white;
 $landing-artwork-color: $cp-minsk;
 
diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss
index e7949ad14..a2dfc3b8d 100644
--- a/assets/styles/themes/_theme-light.scss
+++ b/assets/styles/themes/_theme-light.scss
@@ -19,37 +19,36 @@ $radius: 3px !default;
 
 // TopNav Colors
 $topnav-link: $g8-storm !default;
-$topnav-link-hover: $b-dodger !default;
-$version-selector-top: $b-pool !default;
-$version-selector-bottom: $br-galaxy !default;
+$topnav-link-hover: $b-pool !default;
+$version-selector-gradient: $grad-pastelgothic !default;
 $theme-switch-light: none !default;
 $theme-switch-dark: inline-block !default;
 
 // Search
 $sidebar-search-bg: $g20-white !default;
 $sidebar-search-shadow: $g14-chromium !default;
-$sidebar-search-highlight: $b-dodger !default;
+$sidebar-search-highlight: $b-pool !default;
 $sidebar-search-text: $g8-storm !default;
 
 // Left Navigation
-$nav-category: $b-dodger !default;
-$nav-category-hover: $cp-purple !default;
-$nav-item: $np-rum !default;
-$nav-item-hover: $cp-purple !default;
+$nav-category: $b-pool !default;
+$nav-category-hover: $br-magenta !default;
+$nav-item: $g9-mountain !default;
+$nav-item-hover: $br-magenta !default;
 $nav-border: $g14-chromium !default;
 $nav-toggle: $g20-white !default;
 $nav-toggle-hover: $g20-white !default;
-$nav-toggle-bg-hover: $br-galaxy !default;
-$nav-active: $m-magenta !default;
+$nav-toggle-bg-hover: $br-magenta !default;
+$nav-active: $br-magenta !default;
 
 // Article Content
 $article-bg: $g20-white !default;
-$article-heading: $cp-marguerite !default;
-$article-heading-alt: $g7-graphite !default;
-$article-text: $g8-storm !default;
-$article-bold: $g8-storm !default;
-$article-link: $b-dodger !default;
-$article-link-hover: $cp-purple !default;
+$article-heading: $br-pulsar !default;
+$article-heading-alt: $g5-pepper !default;
+$article-text: $g6-smoke !default;
+$article-bold: $g5-pepper !default;
+$article-link: $b-pool !default;
+$article-link-hover: $br-magenta !default;
 $article-shadow: #c8cdd0 !default;
 $article-hr: $g15-platinum !default;
 
@@ -58,11 +57,11 @@ $article-code: $cp-marguerite !default;
 $article-code-bg: $cp-titan !default;
 $article-code-shadow: $g20-white !default;
 $article-code-accent1: $cp-melrose !default;
-$article-code-accent2: $b-dodger !default;
+$article-code-accent2: $b-pool !default;
 $article-code-accent3: #12A290 !default;
-$article-code-accent4: $o-ruby !default;
+$article-code-accent4: $r-ruby !default;
 $article-code-accent5: #e24bbb !default;
-$article-code-accent6: $b-dodger !default;
+$article-code-accent6: $b-pool !default;
 $article-code-accent7: #e90 !default;
 $article-code-select:  $b-pool !default;
 $article-code-link: $cp-marguerite !default;
@@ -70,8 +69,7 @@ $article-code-link-hover: $cp-marguerite !default;
 $article-code-scrollbar: $cp-periwinkle !default;
 
 // Article Tables
-$article-table-header-left: $cp-marguerite !default;
-$article-table-header-right: $b-laser !default;
+$article-table-header: $grad-miyazakisky !default;
 $article-table-row-alt: #F6F7F8 !default;
 $article-table-scrollbar: $g14-chromium !default;
 
@@ -81,7 +79,7 @@ $article-note-heading: $gr-emerald !default;
 $article-note-text: $gr-emerald !default;
 $article-note-link: $gr-emerald !default;
 $article-note-link-hover: $cp-purple !default;
-$article-note-table-header: $gr-viridian !default;
+$article-note-table-header: $grad-green-dark !default;
 $article-note-table-row-alt: #d6f5e9 !default;
 $article-note-table-scrollbar: #87DABE !default;
 $article-note-shadow: #8CB7AB !default;
@@ -101,7 +99,7 @@ $article-warn-heading: $o-fire !default;
 $article-warn-text: $o-curacao !default;
 $article-warn-link: $o-curacao !default;
 $article-warn-link-hover: $cp-purple !default;
-$article-warn-table-header: $r-dreamsicle !default;
+$article-warn-table-header: $grad-red !default;
 $article-warn-table-row-alt: #ffe6df !default;
 $article-warn-table-scrollbar: #FFB1B1 !default;
 $article-warn-shadow: #b98a7d !default;
@@ -121,7 +119,7 @@ $article-cloud-heading: $b-eastern !default;
 $article-cloud-text: $b-curious !default;
 $article-cloud-link: $b-curious !default;
 $article-cloud-link-hover: $cp-purple !default;
-$article-cloud-table-header: $b-curious !default;
+$article-cloud-table-header: $grad-blue !default;
 $article-cloud-table-row-alt: $b-hawkeye !default;
 $article-cloud-table-scrollbar: $b-malibu !default;
 $article-cloud-shadow: #6EB8E4 !default;
@@ -139,7 +137,7 @@ $article-cloud-code-scrollbar: $b-malibu !default;
 $article-enterprise-base: $br-galaxy !default;
 $article-enterprise-text: $cp-purple !default;
 $article-enterprise-link: $cp-purple !default;
-$article-enterprise-link-hover: $b-dodger !default;
+$article-enterprise-link-hover: $b-pool !default;
 
 // Article Tabs for tabbed content
 $article-tab-text: $g8-storm !default;
@@ -152,7 +150,7 @@ $article-tab-code-text: $cp-marguerite !default;
 // Article page buttons
 $article-btn: $b-pool !default;
 $article-btn-text: $g20-white !default;
-$article-btn-hover: $b-dodger !default;
+$article-btn-hover: $b-pool !default;
 $article-btn-text-hover: $g20-white !default;
 
 // Article UI nav icons
@@ -160,7 +158,7 @@ $article-nav-icon-bg: $g6-smoke !default;
 $article-nav-acct-bg: $g5-pepper !default;
 
 // Error Page Colors
-$error-page-btn: $b-dodger !default;
+$error-page-btn: $b-pool !default;
 $error-page-btn-text: $g20-white !default;
 $error-page-btn-hover: $b-pool !default;
 $error-page-btn-hover-text: $g20-white !default;
@@ -170,10 +168,10 @@ $landing-lg-gradient-left: $cp-jakarta !default;
 $landing-lg-gradient-right: $wp-heart !default;
 $landing-sm-bg: $wp-seance !default;
 $landing-sm-bg-alt: $wp-jagger !default;
-$landing-sm-bg-hover: $b-dodger !default;
+$landing-sm-bg-hover: $b-pool !default;
 $landing-btn-text: $g20-white !default;
-$landing-btn-bg: $b-dodger !default;
-$landing-btn-text-hover: $b-dodger !default;
+$landing-btn-bg: $b-pool !default;
+$landing-btn-text-hover: $b-pool !default;
 $landing-btn-bg-hover: $g20-white !default;
 $landing-artwork-color: rgba($g20-white, .15) !default;
 
@@ -190,7 +188,7 @@ $svg-table-row-alt1: $b-laser !default;
 $svg-table-row-alt2: $br-galaxy !default;
 $svg-table-code: $cp-marguerite !default;
 $svg-table-code-bg: $cp-titan !default;
-$svg-table-code-operator: $b-dodger !default;
+$svg-table-code-operator: $b-pool !default;
 $svg-table-code-string: #12A290 !default;
 
 $svg-geo-s2-cell: $b-malibu !default;
diff --git a/assets/styles/tools/_color-palette.scss b/assets/styles/tools/_color-palette.scss
index 7e37077ba..f4fb2d8d3 100644
--- a/assets/styles/tools/_color-palette.scss
+++ b/assets/styles/tools/_color-palette.scss
@@ -82,8 +82,40 @@ $r-flan:        #FFF7F4;
 
 // Code
 $cp-munchkin:   #B7B8FF;
-$code-dark-bg:    $g0-obsidian;
-$code-dark-scroll:#2f2f50;
+$cp-marguerite: #736ECD;
+$cp-titan:      #EDEDFF;
+
+
+/////////////////////////////////// Gradients //////////////////////////////////
+
+$grad-grey-light:   $g13-mist, $g18-cloud;
+$grad-grey:         $g10-wolf, $g13-mist;
+$grad-grey-dark:    $g3-castle, $g6-smoke;
+
+$grad-blue-light:   $b-pool, $b-hydrogen;
+$grad-blue:         $b-ocean, $b-pool;
+$grad-blue-dark:    $b-sapphire, $b-ocean;
+
+$grad-purple-light: $p-comet, $p-moonstone;
+$grad-purple:       $p-star, $p-comet;
+$grad-purple-dark:  $p-void, $p-amethyst;
+
+$grad-green-light:  $gr-honeydew, $gr-krypton;
+$grad-green:        $gr-rainforest, $gr-honeydew;
+$grad-green-dark:   $gr-emerald, $gr-viridian;
+
+$grad-yellow-light: $y-thunder, $y-sulfur;
+$grad-yellow:       $y-pineapple, $y-thunder;
+$grad-yellow-dark:  $y-topaz, $y-tiger;
+
+$grad-red-light:    $r-dreamsicle, $r-tungsten;
+$grad-red:          $r-curacao, $r-dreamsicle;
+$grad-red-dark:     $r-ruby, $r-fire;
+
+$grad-gundampilot:  $p-amethyst, $b-ocean;
+$grad-miyazakisky:  $p-star, $b-pool;
+$grad-pastelgothic: $p-comet, $b-laser;
+$grad-garageband:   $b-pool, $gr-rainforest;
 
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -114,14 +146,12 @@ $cp-jakarta:      #322368;
 $cp-minsk:        #423681;
 $cp-victoria:     #52499A;
 $cp-blueviolet:   #625CB3;
-$cp-marguerite:   #736ECD;
 $cp-purple:       #8381E6;
 //
 $cp-melrose:      #A5A6FF;
 //
 $cp-periwinkle:   #C9CAFF;
 $cp-coolfog:      #DBDBFF;
-$cp-titan:        #EDEDFF;
 
 // Neutral Purples
 $np-deepnight:    #13002d; // Brand color
diff --git a/assets/styles/tools/mixins.scss b/assets/styles/tools/mixins.scss
index e402d0daa..fd587900f 100644
--- a/assets/styles/tools/mixins.scss
+++ b/assets/styles/tools/mixins.scss
@@ -14,3 +14,7 @@
     border-radius: 6px;
   }
 }
+
+@mixin gradient($colors, $deg: 45deg) {
+  background: linear-gradient($deg, $colors);
+}
diff --git a/content/v2.0/example.md b/content/v2.0/example.md
index b220a71da..20c959901 100644
--- a/content/v2.0/example.md
+++ b/content/v2.0/example.md
@@ -441,20 +441,36 @@ This is **bold**. This is _italic_.
     Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
     Etiam tristique nisi et tristique auctor.
 
+{{< code-tabs-wrapper >}}
+{{% code-tabs %}}
+[tab1](#)
+[tab2](#)
+{{% /code-tabs %}}
+{{% code-tab-content %}}
 ```js
 // This is a code block inside of a blockquote
 cpu = from(bucket:"example-bucket")
   |> range(start:-30m)
   |> filter(fn:(r) => r._measurement == "cpu" and r._field == "someReallyLongFieldName")
 ```
+{{% /code-tab-content %}}
+{{% code-tab-content %}}
+```js
+// This is a code block inside of a blockquote
+cpu = from(bucket:"my-bucket")
+  |> range(start:-30m)
+  |> filter(fn:(r) => r._measurement == "cpu")
+```
+{{% /code-tab-content %}}
+{{< /code-tabs-wrapper >}}
 
 ###### This is a table in a blockquote
-| Column 1 | Column 2  | Column 3 | Column 4 |
-| -------- | --------  | -------- | -------- |
-| Row 1.1  | `Row 1.2` | Row 1.3  | Row 1.4  |
-| Row 2.1  | `Row 2.2` | Row 2.3  | Row 2.4  |
-| Row 3.1  | `Row 3.2` | Row 3.3  | Row 3.4  |
-| Row 4.1  | `Row 4.2` | Row 4.3  | Row 4.4  |
+| Column 1 | Column 2  | Column 3 | Column 4 | Column 1 | Column 2  | Column 3 | Column 4 |
+| -------- | --------  | -------- | -------- | -------- | --------  | -------- | -------- |
+| Row 1.1  | `Row 1.2` | Row 1.3  | Row 1.4  | Row 1.1  | `Row 1.2` | Row 1.3  | Row 1.4  |
+| Row 2.1  | `Row 2.2` | Row 2.3  | Row 2.4  | Row 2.1  | `Row 2.2` | Row 2.3  | Row 2.4  |
+| Row 3.1  | `Row 3.2` | Row 3.3  | Row 3.4  | Row 3.1  | `Row 3.2` | Row 3.3  | Row 3.4  |
+| Row 4.1  | `Row 4.2` | Row 4.3  | Row 4.4  | Row 4.1  | `Row 4.2` | Row 4.3  | Row 4.4  |
 
 {{% /warn %}}
 
@@ -549,20 +565,36 @@ This is **bold**. This is _italic_.
     Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
     Etiam tristique nisi et tristique auctor.
 
+{{< code-tabs-wrapper >}}
+{{% code-tabs %}}
+[tab1](#)
+[tab2](#)
+{{% /code-tabs %}}
+{{% code-tab-content %}}
 ```js
 // This is a code block inside of a blockquote
 cpu = from(bucket:"example-bucket")
   |> range(start:-30m)
   |> filter(fn:(r) => r._measurement == "cpu" and r._field == "someReallyLongFieldName")
 ```
+{{% /code-tab-content %}}
+{{% code-tab-content %}}
+```js
+// This is a code block inside of a blockquote
+cpu = from(bucket:"my-bucket")
+  |> range(start:-30m)
+  |> filter(fn:(r) => r._measurement == "cpu")
+```
+{{% /code-tab-content %}}
+{{< /code-tabs-wrapper >}}
 
 ###### This is a table in a blockquote
-| Column 1 | Column 2  | Column 3 | Column 4 |
-| -------- | --------  | -------- | -------- |
-| Row 1.1  | `Row 1.2` | Row 1.3  | Row 1.4  |
-| Row 2.1  | `Row 2.2` | Row 2.3  | Row 2.4  |
-| Row 3.1  | `Row 3.2` | Row 3.3  | Row 3.4  |
-| Row 4.1  | `Row 4.2` | Row 4.3  | Row 4.4  |
+| Column 1 | Column 2  | Column 3 | Column 4 | Column 1 | Column 2  | Column 3 | Column 4 |
+| -------- | --------  | -------- | -------- | -------- | --------  | -------- | -------- |
+| Row 1.1  | `Row 1.2` | Row 1.3  | Row 1.4  | Row 1.1  | `Row 1.2` | Row 1.3  | Row 1.4  |
+| Row 2.1  | `Row 2.2` | Row 2.3  | Row 2.4  | Row 2.1  | `Row 2.2` | Row 2.3  | Row 2.4  |
+| Row 3.1  | `Row 3.2` | Row 3.3  | Row 3.4  | Row 3.1  | `Row 3.2` | Row 3.3  | Row 3.4  |
+| Row 4.1  | `Row 4.2` | Row 4.3  | Row 4.4  | Row 4.1  | `Row 4.2` | Row 4.3  | Row 4.4  |
 
 {{% /cloud-msg %}}
 
diff --git a/content/v2.0/write-data/quick-start.md b/content/v2.0/write-data/quick-start.md
index 6082d267f..e161de899 100644
--- a/content/v2.0/write-data/quick-start.md
+++ b/content/v2.0/write-data/quick-start.md
@@ -31,10 +31,6 @@ metrics in the [Prometheus data format](https://prometheus.io/docs/instrumenting
 The scraper stores the scraped metrics in the bucket created during the
 [initial setup process](/v2.0/get-started/#set-up-influxdb).
 
-The following message briefly appears in the UI:
-
-{{< ui-message text="Scraper was created successfully" >}}
-
 {{% note %}}
 Quick Start is only available in the last step of the setup process.
 If you missed the Quick Start option, you can [manually create a scraper](/v2.0/write-data/scrape-data)
diff --git a/layouts/shortcodes/ui-message.html b/layouts/shortcodes/ui-message.html
deleted file mode 100644
index 175a44eef..000000000
--- a/layouts/shortcodes/ui-message.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{{ $text := .Get "text" }}
-{{ $color := .Get "color" | default "green" }}
-
-<div class="ui-message {{ $color }}">
-  <div class="icon"></div>
-  <div class="text">{{ $text }}</div>
-  <div class="close"></div>
-</div>