From 282540549ffd65706fdb92f0a1a53db279042fab Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Sun, 12 Nov 2017 18:07:23 -0800
Subject: [PATCH 1/7] Add K6 overrides to light theme.

---
 src/global_styling/k6/_colors.scss            |  1 +
 src/global_styling/k6/_index.scss             |  6 ++++++
 src/global_styling/k6/_size.scss              |  7 +++++++
 src/global_styling/k6/_typography.scss        |  7 +++++++
 src/global_styling/theme_light_variables.scss |  3 +++
 src/global_styling/variables/_size.scss       | 16 ++++++++--------
 src/global_styling/variables/_typography.scss | 16 ++++++++--------
 7 files changed, 40 insertions(+), 16 deletions(-)
 create mode 100644 src/global_styling/k6/_colors.scss
 create mode 100644 src/global_styling/k6/_index.scss
 create mode 100644 src/global_styling/k6/_size.scss
 create mode 100644 src/global_styling/k6/_typography.scss

diff --git a/src/global_styling/k6/_colors.scss b/src/global_styling/k6/_colors.scss
new file mode 100644
index 00000000000..20accdc4926
--- /dev/null
+++ b/src/global_styling/k6/_colors.scss
@@ -0,0 +1 @@
+$euiTextColor: #2D2D2D;
diff --git a/src/global_styling/k6/_index.scss b/src/global_styling/k6/_index.scss
new file mode 100644
index 00000000000..0a49db677d8
--- /dev/null
+++ b/src/global_styling/k6/_index.scss
@@ -0,0 +1,6 @@
+@import 'size';
+@import 'colors';
+@import 'typography';
+// @import 'borders';
+// @import 'shadows';
+// @import 'z_index';
diff --git a/src/global_styling/k6/_size.scss b/src/global_styling/k6/_size.scss
new file mode 100644
index 00000000000..af769bf620f
--- /dev/null
+++ b/src/global_styling/k6/_size.scss
@@ -0,0 +1,7 @@
+$euiSizeXS:   4px;
+$euiSizeS:    8px;
+$euiSizeM:    11px;
+$euiSize:     14px;
+$euiSizeL:    18px;
+$euiSizeXL:   22px;
+$euiSizeXXL:  26px;
diff --git a/src/global_styling/k6/_typography.scss b/src/global_styling/k6/_typography.scss
new file mode 100644
index 00000000000..e1ae0be179f
--- /dev/null
+++ b/src/global_styling/k6/_typography.scss
@@ -0,0 +1,7 @@
+$euiFontSizeXS:     10px;
+$euiFontSizeS:      12px;
+$euiFontSizeM:      14px;
+$euiFontSize:       14px;
+$euiFontSizeL:      18px;
+$euiFontSizeXL:     22px;
+$euiFontSizeXXL:    28px;
diff --git a/src/global_styling/theme_light_variables.scss b/src/global_styling/theme_light_variables.scss
index 2869d11f876..e2cb9e7e2c4 100644
--- a/src/global_styling/theme_light_variables.scss
+++ b/src/global_styling/theme_light_variables.scss
@@ -1,2 +1,5 @@
+// K6 custom values
+@import 'k6/index';
+
 // Configuration
 @import 'variables/index';
diff --git a/src/global_styling/variables/_size.scss b/src/global_styling/variables/_size.scss
index 150b66eea1c..b8ae115dea5 100644
--- a/src/global_styling/variables/_size.scss
+++ b/src/global_styling/variables/_size.scss
@@ -1,10 +1,10 @@
-$euiSize:     16px;
+$euiSize:     16px !default;
 
-$euiSizeXS:   $euiSize * .25;
-$euiSizeS:    $euiSize * .5;
-$euiSizeM:    $euiSize * .75;
-$euiSizeL:    $euiSize * 1.5;
-$euiSizeXL:   $euiSize * 2;
-$euiSizeXXL:  $euiSize * 2.5;
+$euiSizeXS:   $euiSize * .25 !default;
+$euiSizeS:    $euiSize * .5 !default;
+$euiSizeM:    $euiSize * .75 !default;
+$euiSizeL:    $euiSize * 1.5 !default;
+$euiSizeXL:   $euiSize * 2 !default;
+$euiSizeXXL:  $euiSize * 2.5 !default;
 
-$euiButtonMinWidth: $euiSize * 7;
+$euiButtonMinWidth: $euiSize * 7 !default;
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
index 42eeff66edd..2670dec3dc5 100644
--- a/src/global_styling/variables/_typography.scss
+++ b/src/global_styling/variables/_typography.scss
@@ -23,14 +23,14 @@ $euiCodeFontFamily: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courie
 
 // Font sizes
 
-$euiFontSize:       $euiSize;
-
-$euiFontSizeXS:     $euiFontSize * .75;
-$euiFontSizeS:      $euiFontSize * .875;
-$euiFontSizeM:      $euiFontSize;
-$euiFontSizeL:      $euiFontSize * 1.5;
-$euiFontSizeXL:     $euiFontSize * 2;
-$euiFontSizeXXL:    $euiFontSize * 3;
+$euiFontSize:       $euiSize !default;
+
+$euiFontSizeXS:     $euiFontSize * .75 !default;
+$euiFontSizeS:      $euiFontSize * .875 !default;
+$euiFontSizeM:      $euiFontSize !default;
+$euiFontSizeL:      $euiFontSize * 1.5 !default;
+$euiFontSizeXL:     $euiFontSize * 2 !default;
+$euiFontSizeXXL:    $euiFontSize * 3 !default;
 
 // Line height
 

From 512973d6a4890ad56c595542ab8a29c659ffa469 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 17 Nov 2017 14:01:19 -0800
Subject: [PATCH 2/7] Remove font-size mixin from Table.

---
 src/components/table/_table.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
index 97c2209b62b..ebbb38fa5e3 100644
--- a/src/components/table/_table.scss
+++ b/src/components/table/_table.scss
@@ -3,8 +3,6 @@
  * specifying a column width, e.g. the checkbox column.
  */
 .euiTable {
-  @include euiFontSizeS;
-
   width: 100%;
   border: none;
   border-collapse: collapse;
@@ -38,8 +36,6 @@
 }
 
 .euiTableHeaderButton {
-  @include euiFontSizeS;
-
   color: inherit;
   width: 100%;
 

From 809d0723567cc96a3d236e8101f91208be6603bc Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 20 Nov 2017 21:46:21 -0800
Subject: [PATCH 3/7] Remove Table overrides and make FontSizeM and FontSizeS
 both equal 14px.

---
 src/components/table/_table.scss       | 4 ++++
 src/global_styling/k6/_typography.scss | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
index ebbb38fa5e3..97c2209b62b 100644
--- a/src/components/table/_table.scss
+++ b/src/components/table/_table.scss
@@ -3,6 +3,8 @@
  * specifying a column width, e.g. the checkbox column.
  */
 .euiTable {
+  @include euiFontSizeS;
+
   width: 100%;
   border: none;
   border-collapse: collapse;
@@ -36,6 +38,8 @@
 }
 
 .euiTableHeaderButton {
+  @include euiFontSizeS;
+
   color: inherit;
   width: 100%;
 
diff --git a/src/global_styling/k6/_typography.scss b/src/global_styling/k6/_typography.scss
index e1ae0be179f..b7fa0353165 100644
--- a/src/global_styling/k6/_typography.scss
+++ b/src/global_styling/k6/_typography.scss
@@ -1,5 +1,5 @@
-$euiFontSizeXS:     10px;
-$euiFontSizeS:      12px;
+$euiFontSizeXS:     12px;
+$euiFontSizeS:      14px;
 $euiFontSizeM:      14px;
 $euiFontSize:       14px;
 $euiFontSizeL:      18px;

From 810d9b724368831603fe44d5be91caeab312e6f5 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 20 Nov 2017 21:52:37 -0800
Subject: [PATCH 4/7] Extract typography mixins into the mixins directory. Make
 headings bold.

---
 src/global_styling/k6/_typography.scss        |  3 +
 src/global_styling/mixins/_index.scss         |  1 +
 src/global_styling/mixins/_typography.scss    | 58 +++++++++++++++++
 src/global_styling/variables/_typography.scss | 64 +------------------
 4 files changed, 65 insertions(+), 61 deletions(-)
 create mode 100644 src/global_styling/mixins/_typography.scss

diff --git a/src/global_styling/k6/_typography.scss b/src/global_styling/k6/_typography.scss
index b7fa0353165..50c72558ed6 100644
--- a/src/global_styling/k6/_typography.scss
+++ b/src/global_styling/k6/_typography.scss
@@ -5,3 +5,6 @@ $euiFontSize:       14px;
 $euiFontSizeL:      18px;
 $euiFontSizeXL:     22px;
 $euiFontSizeXXL:    28px;
+
+// Make titles bold.
+$euiFontWeightLight: 500;
diff --git a/src/global_styling/mixins/_index.scss b/src/global_styling/mixins/_index.scss
index 0d92a58e5d6..169cfa6d37e 100644
--- a/src/global_styling/mixins/_index.scss
+++ b/src/global_styling/mixins/_index.scss
@@ -2,4 +2,5 @@
 @import 'responsive';
 @import 'shadow';
 @import 'size';
+@import 'typography';
 @import 'helpers';
diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
new file mode 100644
index 00000000000..352783e35d9
--- /dev/null
+++ b/src/global_styling/mixins/_typography.scss
@@ -0,0 +1,58 @@
+
+// Our base fonts
+
+@mixin euiFont {
+  font-family: $euiFontFamily;
+  font-weight: $euiFontWeightRegular;
+}
+
+@mixin euiCodeFont {
+  font-family: $euiCodeFontFamily;
+}
+
+@mixin euiTitle {
+  color: $euiTitleColor;
+  font-weight: $euiFontWeightLight;
+}
+
+@mixin euiText {
+  color: $euiTextColor;
+  font-weight: $euiFontWeightRegular;
+}
+
+// Font sizing extends, using rem mixin
+
+@mixin euiFontSize {
+  @include fontSize($euiFontSize);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeXS {
+  @include fontSize($euiFontSizeXS);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeS {
+  @include fontSize($euiFontSizeS);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeM {
+  @include fontSize($euiFontSizeM);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeL {
+  @include fontSize($euiFontSizeL);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeXL {
+  @include fontSize($euiFontSizeXL);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeXXL {
+  @include fontSize($euiFontSizeXXL);
+  line-height: $euiLineHeight;
+}
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
index 2670dec3dc5..ce88c042208 100644
--- a/src/global_styling/variables/_typography.scss
+++ b/src/global_styling/variables/_typography.scss
@@ -39,64 +39,6 @@ $euiLineHeight:     1.5;
 
 // Font weights
 
-$euiFontWeightLight:    300;
-$euiFontWeightRegular:  400;
-$euiFontWeightMedium:   500;
-
-// Our base fonts
-
-@mixin euiFont {
-  font-family: $euiFontFamily;
-  font-weight: $euiFontWeightRegular;
-}
-
-@mixin euiCodeFont {
-  font-family: $euiCodeFontFamily;
-}
-
-@mixin euiTitle {
-  color: $euiTitleColor;
-  font-weight: $euiFontWeightLight;
-}
-
-@mixin euiText {
-  color: $euiTextColor;
-  font-weight: $euiFontWeightRegular;
-}
-
-// Font sizing extends, using rem mixin
-
-@mixin euiFontSize {
-  @include fontSize($euiFontSize);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeXS {
-  @include fontSize($euiFontSizeXS);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeS {
-  @include fontSize($euiFontSizeS);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeM {
-  @include fontSize($euiFontSizeM);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeL {
-  @include fontSize($euiFontSizeL);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeXL {
-  @include fontSize($euiFontSizeXL);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeXXL {
-  @include fontSize($euiFontSizeXXL);
-  line-height: $euiLineHeight;
-}
+$euiFontWeightLight:    300 !default;
+$euiFontWeightRegular:  400 !default;
+$euiFontWeightMedium:   500 !default;

From fae0978b01a92ccd43667e9aac7030061abbe63c Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 1 Dec 2017 16:19:25 -0800
Subject: [PATCH 5/7] Add theme selector to sidenav.

---
 src-docs/src/actions/theme_actions.js         |  5 +-
 .../guide_page/guide_page_chrome.js           | 62 ++++++++++++++++---
 src-docs/src/index.js                         |  5 ++
 src-docs/src/store/reducers/theme_reducer.js  |  2 +-
 src-docs/src/theme_k6.scss                    |  3 +
 src-docs/src/views/app_view.js                | 25 +++++---
 src/global_styling/theme_k6_variables.scss    |  5 ++
 src/global_styling/theme_light_variables.scss |  3 -
 src/theme_k6.scss                             |  8 +++
 9 files changed, 94 insertions(+), 24 deletions(-)
 create mode 100644 src-docs/src/theme_k6.scss
 create mode 100644 src/global_styling/theme_k6_variables.scss
 create mode 100644 src/theme_k6.scss

diff --git a/src-docs/src/actions/theme_actions.js b/src-docs/src/actions/theme_actions.js
index 60b8fec4b79..3cc334cc2e3 100644
--- a/src-docs/src/actions/theme_actions.js
+++ b/src-docs/src/actions/theme_actions.js
@@ -1,5 +1,8 @@
 import ActionTypes from './action_types';
 
-export const toggleTheme = () => ({
+export const toggleTheme = theme => ({
   type: ActionTypes.TOGGLE_THEME,
+  data: {
+    theme,
+  },
 });
diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
index a7248fb3f71..6e6424a5b4c 100644
--- a/src-docs/src/components/guide_page/guide_page_chrome.js
+++ b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -8,10 +8,13 @@ import {
 
 import {
   EuiButtonEmpty,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
   EuiFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
+  EuiPopover,
   EuiSideNav,
   EuiSpacer,
 } from '../../../../src/components';
@@ -23,6 +26,7 @@ export class GuidePageChrome extends Component {
     this.state = {
       search: '',
       isSideNavOpenOnMobile: false,
+      isThemePopoverOpen: false,
     };
   }
 
@@ -49,6 +53,18 @@ export class GuidePageChrome extends Component {
     this.scrollTo($(`#${id}`).offset().top - 20);
   };
 
+  onThemeButtonClick = () => {
+    this.setState({
+      isThemePopoverOpen: !this.state.isThemePopoverOpen,
+    });
+  };
+
+  closeThemePopover = () => {
+    this.setState({
+      isThemePopoverOpen: false,
+    });
+  };
+
   renderIdentity() {
     const homeLink = (
       <Link
@@ -59,6 +75,28 @@ export class GuidePageChrome extends Component {
       </Link>
     );
 
+    const themeButton = (
+      <EuiButtonEmpty
+        size="s"
+        color="text"
+        iconType="arrowDown"
+        iconSide="right"
+        onClick={this.onThemeButtonClick}
+      >
+        Theme
+      </EuiButtonEmpty>
+    );
+
+    const themeOptions = ['Light', 'Dark', 'K6'].map(option => (
+      <EuiContextMenuItem
+        key={option}
+        icon={option.toLowerCase() === this.props.selectedTheme ? 'check' : 'empty'}
+        onClick={() => { this.closeThemePopover(); this.props.onToggleTheme(option.toLowerCase()); }}
+      >
+        {`${option}`}
+      </EuiContextMenuItem>
+    ));
+
     return (
       <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
         <EuiFlexItem grow={false}>
@@ -66,16 +104,19 @@ export class GuidePageChrome extends Component {
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            size="xs"
-            onClick={this.props.onToggleTheme}
-            className="euiLink"
-            iconSide="right"
-            color="text"
-            iconType="invert"
+          <EuiPopover
+            id="pageChromeThemePopover"
+            button={themeButton}
+            isOpen={this.state.isThemePopoverOpen}
+            closePopover={this.closeThemePopover}
+            panelPaddingSize="none"
+            withTitle
+            anchorPosition="downRight"
           >
-              Flip theme
-          </EuiButtonEmpty>
+            <EuiContextMenuPanel
+              items={themeOptions}
+            />
+          </EuiPopover>
         </EuiFlexItem>
       </EuiFlexGroup>
     );
@@ -203,6 +244,9 @@ export class GuidePageChrome extends Component {
 
 GuidePageChrome.propTypes = {
   currentRouteName: PropTypes.string.isRequired,
+  onToggleTheme: PropTypes.func.isRequired,
+  selectedTheme: PropTypes.string.isRequired,
+  guidelines: PropTypes.array.isRequired,
   components: PropTypes.array.isRequired,
   sandboxes: PropTypes.array.isRequired,
 };
diff --git a/src-docs/src/index.js b/src-docs/src/index.js
index 9d344cc2fe8..83d318a4c58 100644
--- a/src-docs/src/index.js
+++ b/src-docs/src/index.js
@@ -20,6 +20,7 @@ import {
 
 import themeLight from './theme_light.scss';
 import themeDark from './theme_dark.scss';
+import themeK6 from './theme_k6.scss';
 
 registerTheme('light', [
   themeLight
@@ -29,6 +30,10 @@ registerTheme('dark', [
   themeDark
 ]);
 
+registerTheme('k6', [
+  themeK6
+]);
+
 // Set up app
 
 const store = configureStore();
diff --git a/src-docs/src/store/reducers/theme_reducer.js b/src-docs/src/store/reducers/theme_reducer.js
index 13301c95c73..b19ad3d4a2e 100644
--- a/src-docs/src/store/reducers/theme_reducer.js
+++ b/src-docs/src/store/reducers/theme_reducer.js
@@ -8,7 +8,7 @@ export default function sectionsReducer(state = defaultState, action) {
   switch (action.type) {
     case ActionTypes.TOGGLE_THEME: {
       return {
-        theme: (state.theme === 'light') ? 'dark' : 'light',
+        theme: action.data.theme,
       };
     }
 
diff --git a/src-docs/src/theme_k6.scss b/src-docs/src/theme_k6.scss
new file mode 100644
index 00000000000..7dca2418675
--- /dev/null
+++ b/src-docs/src/theme_k6.scss
@@ -0,0 +1,3 @@
+@import "../../src/theme_k6";
+@import "./components/guide_components";
+
diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js
index 7948bd51db3..eb4eb55ba05 100644
--- a/src-docs/src/views/app_view.js
+++ b/src-docs/src/views/app_view.js
@@ -57,10 +57,18 @@ export class AppView extends Component {
   }
 
   renderContent() {
-    if (this.props.isSandbox) {
+    const {
+      children,
+      currentRoute,
+      isSandbox,
+      toggleTheme,
+      theme,
+    } = this.props;
+
+    if (isSandbox) {
       return (
         <div className="guideSandbox">
-          {this.props.children}
+          {children}
         </div>
       );
     } else {
@@ -69,9 +77,9 @@ export class AppView extends Component {
           <EuiPageBody>
             <EuiPageSideBar>
               <GuidePageChrome
-                currentRouteName={this.props.currentRoute.name}
-                onToggleTheme={this.props.toggleTheme}
-                routes={this.props.routes}
+                currentRouteName={currentRoute.name}
+                onToggleTheme={toggleTheme}
+                selectedTheme={theme}
                 guidelines={Routes.guidelines}
                 components={Routes.components}
                 sandboxes={Routes.sandboxes}
@@ -80,7 +88,7 @@ export class AppView extends Component {
 
             <EuiPageContent>
               <EuiPageContentBody>
-                {this.props.children}
+                {children}
               </EuiPageContentBody>
             </EuiPageContent>
           </EuiPageBody>
@@ -101,14 +109,11 @@ export class AppView extends Component {
 AppView.propTypes = {
   children: PropTypes.any,
   currentRoute: PropTypes.object.isRequired,
-  sections: PropTypes.array,
   isSandbox: PropTypes.bool,
-  toggleTheme: PropTypes.func.isRequired,
   theme: PropTypes.string.isRequired,
-  sections: PropTypes.array.isRequired,
+  toggleTheme: PropTypes.func.isRequired,
 };
 
 AppView.defaultProps = {
   currentRoute: {},
-  sections: [],
 };
diff --git a/src/global_styling/theme_k6_variables.scss b/src/global_styling/theme_k6_variables.scss
new file mode 100644
index 00000000000..e2cb9e7e2c4
--- /dev/null
+++ b/src/global_styling/theme_k6_variables.scss
@@ -0,0 +1,5 @@
+// K6 custom values
+@import 'k6/index';
+
+// Configuration
+@import 'variables/index';
diff --git a/src/global_styling/theme_light_variables.scss b/src/global_styling/theme_light_variables.scss
index e2cb9e7e2c4..2869d11f876 100644
--- a/src/global_styling/theme_light_variables.scss
+++ b/src/global_styling/theme_light_variables.scss
@@ -1,5 +1,2 @@
-// K6 custom values
-@import 'k6/index';
-
 // Configuration
 @import 'variables/index';
diff --git a/src/theme_k6.scss b/src/theme_k6.scss
new file mode 100644
index 00000000000..34406790c30
--- /dev/null
+++ b/src/theme_k6.scss
@@ -0,0 +1,8 @@
+// Variables
+@import 'global_styling/theme_k6_variables';
+
+// Global styling
+@import 'global_styling/core';
+
+// Components
+@import 'components/index';

From c9a85094dbe6612a3c5640281c1aae67d05fbea1 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 1 Dec 2017 16:53:46 -0800
Subject: [PATCH 6/7] Add K6 dark theme.

---
 .../guide_page/guide_page_chrome.js           | 35 ++++++++++++++-----
 src-docs/src/index.js                         |  5 +++
 src-docs/src/theme_k6.scss                    |  1 -
 src-docs/src/theme_k6_dark.scss               |  2 ++
 src/global_styling/k6/_colors.scss            |  1 -
 src/global_styling/k6/_index.scss             |  1 -
 .../theme_k6_dark_variables.scss              | 20 +++++++++++
 src/global_styling/theme_k6_variables.scss    |  2 ++
 src/theme_k6_dark.scss                        |  8 +++++
 9 files changed, 63 insertions(+), 12 deletions(-)
 create mode 100644 src-docs/src/theme_k6_dark.scss
 delete mode 100644 src/global_styling/k6/_colors.scss
 create mode 100644 src/global_styling/theme_k6_dark_variables.scss
 create mode 100644 src/theme_k6_dark.scss

diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
index 6e6424a5b4c..35c42df85a7 100644
--- a/src-docs/src/components/guide_page/guide_page_chrome.js
+++ b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -87,15 +87,31 @@ export class GuidePageChrome extends Component {
       </EuiButtonEmpty>
     );
 
-    const themeOptions = ['Light', 'Dark', 'K6'].map(option => (
-      <EuiContextMenuItem
-        key={option}
-        icon={option.toLowerCase() === this.props.selectedTheme ? 'check' : 'empty'}
-        onClick={() => { this.closeThemePopover(); this.props.onToggleTheme(option.toLowerCase()); }}
-      >
-        {`${option}`}
-      </EuiContextMenuItem>
-    ));
+    const themeOptions = [{
+      name: 'Light',
+      value: 'light',
+    }, {
+      name: 'Dark',
+      value: 'dark',
+    }, {
+      name: 'K6',
+      value: 'k6',
+    }, {
+      name: 'K6 dark',
+      value: 'k6_dark',
+    }].map(option => {
+      const { name, value } = option;
+
+      return (
+        <EuiContextMenuItem
+          key={value}
+          icon={value === this.props.selectedTheme ? 'check' : 'empty'}
+          onClick={() => { this.closeThemePopover(); this.props.onToggleTheme(value); }}
+        >
+          {`${name}`}
+        </EuiContextMenuItem>
+      );
+    });
 
     return (
       <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
@@ -114,6 +130,7 @@ export class GuidePageChrome extends Component {
             anchorPosition="downRight"
           >
             <EuiContextMenuPanel
+              style={{ width: '120px' }}
               items={themeOptions}
             />
           </EuiPopover>
diff --git a/src-docs/src/index.js b/src-docs/src/index.js
index 83d318a4c58..b113be93e1b 100644
--- a/src-docs/src/index.js
+++ b/src-docs/src/index.js
@@ -21,6 +21,7 @@ import {
 import themeLight from './theme_light.scss';
 import themeDark from './theme_dark.scss';
 import themeK6 from './theme_k6.scss';
+import themeK6Dark from './theme_k6_dark.scss';
 
 registerTheme('light', [
   themeLight
@@ -34,6 +35,10 @@ registerTheme('k6', [
   themeK6
 ]);
 
+registerTheme('k6_dark', [
+  themeK6Dark
+]);
+
 // Set up app
 
 const store = configureStore();
diff --git a/src-docs/src/theme_k6.scss b/src-docs/src/theme_k6.scss
index 7dca2418675..9e621328816 100644
--- a/src-docs/src/theme_k6.scss
+++ b/src-docs/src/theme_k6.scss
@@ -1,3 +1,2 @@
 @import "../../src/theme_k6";
 @import "./components/guide_components";
-
diff --git a/src-docs/src/theme_k6_dark.scss b/src-docs/src/theme_k6_dark.scss
new file mode 100644
index 00000000000..c42c1f6f630
--- /dev/null
+++ b/src-docs/src/theme_k6_dark.scss
@@ -0,0 +1,2 @@
+@import "../../src/theme_k6_dark";
+@import "./components/guide_components";
diff --git a/src/global_styling/k6/_colors.scss b/src/global_styling/k6/_colors.scss
deleted file mode 100644
index 20accdc4926..00000000000
--- a/src/global_styling/k6/_colors.scss
+++ /dev/null
@@ -1 +0,0 @@
-$euiTextColor: #2D2D2D;
diff --git a/src/global_styling/k6/_index.scss b/src/global_styling/k6/_index.scss
index 0a49db677d8..c0e897f9ad8 100644
--- a/src/global_styling/k6/_index.scss
+++ b/src/global_styling/k6/_index.scss
@@ -1,5 +1,4 @@
 @import 'size';
-@import 'colors';
 @import 'typography';
 // @import 'borders';
 // @import 'shadows';
diff --git a/src/global_styling/theme_k6_dark_variables.scss b/src/global_styling/theme_k6_dark_variables.scss
new file mode 100644
index 00000000000..4fbaccba1e9
--- /dev/null
+++ b/src/global_styling/theme_k6_dark_variables.scss
@@ -0,0 +1,20 @@
+// Dark theme overides
+
+$euiColorEmptyShade: #222;
+$euiColorLightestShade: #272727;
+$euiColorLightShade: #333;
+$euiColorMediumShade: #444;
+$euiColorDarkShade: #D9D9D9;
+$euiColorDarkestShade: #F5F5F5;
+$euiColorFullShade: #FFF;
+$euiColorPrimary: #4da1c0;
+$euiColorDanger: #bf4d4d;
+$euiTextColor: #DDD;
+
+$euiFocusBackgroundColor: #191919;
+
+// K6 custom values
+@import 'k6/index';
+
+// Configuration
+@import 'variables/index';
diff --git a/src/global_styling/theme_k6_variables.scss b/src/global_styling/theme_k6_variables.scss
index e2cb9e7e2c4..226126dd830 100644
--- a/src/global_styling/theme_k6_variables.scss
+++ b/src/global_styling/theme_k6_variables.scss
@@ -1,3 +1,5 @@
+$euiTextColor: #2D2D2D;
+
 // K6 custom values
 @import 'k6/index';
 
diff --git a/src/theme_k6_dark.scss b/src/theme_k6_dark.scss
new file mode 100644
index 00000000000..9008ed60b0b
--- /dev/null
+++ b/src/theme_k6_dark.scss
@@ -0,0 +1,8 @@
+// Variables
+@import 'global_styling/theme_k6_dark_variables';
+
+// Global styling
+@import 'global_styling/core';
+
+// Components
+@import 'components/index';

From d998f1e02e3e5f2781e30b6dab3b37db2032379b Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 1 Dec 2017 17:07:45 -0800
Subject: [PATCH 7/7] Extract GuideThemeSelector and use it in
 GuideSandboxChrome.

---
 .../guide_page/guide_page_chrome.js           | 77 ++-------------
 .../guide_sandbox/guide_sandbox_chrome.js     | 24 +++--
 .../components/guide_section/guide_section.js |  2 +
 .../guide_section/guide_section_container.js  |  2 +
 .../guide_theme_selector.js                   | 93 +++++++++++++++++++
 .../components/guide_theme_selector/index.js  |  1 +
 6 files changed, 120 insertions(+), 79 deletions(-)
 create mode 100644 src-docs/src/components/guide_theme_selector/guide_theme_selector.js
 create mode 100644 src-docs/src/components/guide_theme_selector/index.js

diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
index 35c42df85a7..741448d6572 100644
--- a/src-docs/src/components/guide_page/guide_page_chrome.js
+++ b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -7,18 +7,18 @@ import {
 } from 'react-router';
 
 import {
-  EuiButtonEmpty,
-  EuiContextMenuItem,
-  EuiContextMenuPanel,
   EuiFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
-  EuiPopover,
   EuiSideNav,
   EuiSpacer,
 } from '../../../../src/components';
 
+import {
+  GuideThemeSelector,
+} from '../guide_theme_selector';
+
 export class GuidePageChrome extends Component {
   constructor(props) {
     super(props);
@@ -26,7 +26,6 @@ export class GuidePageChrome extends Component {
     this.state = {
       search: '',
       isSideNavOpenOnMobile: false,
-      isThemePopoverOpen: false,
     };
   }
 
@@ -53,18 +52,6 @@ export class GuidePageChrome extends Component {
     this.scrollTo($(`#${id}`).offset().top - 20);
   };
 
-  onThemeButtonClick = () => {
-    this.setState({
-      isThemePopoverOpen: !this.state.isThemePopoverOpen,
-    });
-  };
-
-  closeThemePopover = () => {
-    this.setState({
-      isThemePopoverOpen: false,
-    });
-  };
-
   renderIdentity() {
     const homeLink = (
       <Link
@@ -75,44 +62,6 @@ export class GuidePageChrome extends Component {
       </Link>
     );
 
-    const themeButton = (
-      <EuiButtonEmpty
-        size="s"
-        color="text"
-        iconType="arrowDown"
-        iconSide="right"
-        onClick={this.onThemeButtonClick}
-      >
-        Theme
-      </EuiButtonEmpty>
-    );
-
-    const themeOptions = [{
-      name: 'Light',
-      value: 'light',
-    }, {
-      name: 'Dark',
-      value: 'dark',
-    }, {
-      name: 'K6',
-      value: 'k6',
-    }, {
-      name: 'K6 dark',
-      value: 'k6_dark',
-    }].map(option => {
-      const { name, value } = option;
-
-      return (
-        <EuiContextMenuItem
-          key={value}
-          icon={value === this.props.selectedTheme ? 'check' : 'empty'}
-          onClick={() => { this.closeThemePopover(); this.props.onToggleTheme(value); }}
-        >
-          {`${name}`}
-        </EuiContextMenuItem>
-      );
-    });
-
     return (
       <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
         <EuiFlexItem grow={false}>
@@ -120,20 +69,10 @@ export class GuidePageChrome extends Component {
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <EuiPopover
-            id="pageChromeThemePopover"
-            button={themeButton}
-            isOpen={this.state.isThemePopoverOpen}
-            closePopover={this.closeThemePopover}
-            panelPaddingSize="none"
-            withTitle
-            anchorPosition="downRight"
-          >
-            <EuiContextMenuPanel
-              style={{ width: '120px' }}
-              items={themeOptions}
-            />
-          </EuiPopover>
+          <GuideThemeSelector
+            onToggleTheme={this.props.onToggleTheme}
+            selectedTheme={this.props.selectedTheme}
+          />
         </EuiFlexItem>
       </EuiFlexGroup>
     );
diff --git a/src-docs/src/components/guide_sandbox/guide_sandbox_chrome.js b/src-docs/src/components/guide_sandbox/guide_sandbox_chrome.js
index cf70bd9b88f..496b5485d97 100644
--- a/src-docs/src/components/guide_sandbox/guide_sandbox_chrome.js
+++ b/src-docs/src/components/guide_sandbox/guide_sandbox_chrome.js
@@ -5,20 +5,25 @@ import {
   Link,
 } from 'react-router';
 
-import {
-  GuideSandboxChromeToggle,
-} from './guide_sandbox_chrome_toggle';
-
 import {
   EuiIcon,
   EuiFlexGroup,
   EuiFlexItem,
 } from '../../../../src/components';
 
+import {
+  GuideThemeSelector,
+} from '../guide_theme_selector';
+
+import {
+  GuideSandboxChromeToggle,
+} from './guide_sandbox_chrome_toggle';
+
 export const GuideSandboxChrome = ({
   isVisible,
   onToggleTheme,
   onToggleSandboxChrome,
+  selectedTheme,
 }) => {
   const toggle = <GuideSandboxChromeToggle onClick={onToggleSandboxChrome} />;
 
@@ -36,12 +41,10 @@ export const GuideSandboxChrome = ({
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <button
-            onClick={onToggleTheme}
-            className="guideSandboxChrome__link"
-          >
-            Theme
-          </button>
+          <GuideThemeSelector
+            onToggleTheme={onToggleTheme}
+            selectedTheme={selectedTheme}
+          />
         </EuiFlexItem>
       </EuiFlexGroup>
 
@@ -54,5 +57,6 @@ GuideSandboxChrome.propTypes = {
   routes: PropTypes.array.isRequired,
   onToggleTheme: PropTypes.func.isRequired,
   onToggleSandboxChrome: PropTypes.func.isRequired,
+  selectedTheme: PropTypes.string.isRequired,
   isVisible: PropTypes.bool,
 };
diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js
index 21d4928781a..f2d9c9fefd1 100644
--- a/src-docs/src/components/guide_section/guide_section.js
+++ b/src-docs/src/components/guide_section/guide_section.js
@@ -75,6 +75,7 @@ export class GuideSection extends Component {
           routes={Routes.getAppRoutes()}
           onToggleTheme={this.props.toggleTheme}
           onToggleSandboxChrome={this.onToggleSandboxChrome}
+          selectedTheme={this.props.theme}
           isVisible={this.state.sandbox.isChromeVisible}
         />
       );
@@ -156,4 +157,5 @@ GuideSection.propTypes = {
   children: PropTypes.any,
   isSandbox: PropTypes.bool,
   toggleTheme: PropTypes.func.isRequired,
+  theme: PropTypes.string.isRequired,
 };
diff --git a/src-docs/src/components/guide_section/guide_section_container.js b/src-docs/src/components/guide_section/guide_section_container.js
index 730c8f5f50e..91d3f9c724a 100644
--- a/src-docs/src/components/guide_section/guide_section_container.js
+++ b/src-docs/src/components/guide_section/guide_section_container.js
@@ -4,6 +4,7 @@ import { GuideSection } from './guide_section';
 
 import {
   getIsSandbox,
+  getTheme,
 } from '../../store';
 
 import {
@@ -13,6 +14,7 @@ import {
 function mapStateToProps(state) {
   return {
     isSandbox: getIsSandbox(state),
+    theme: getTheme(state),
   };
 }
 
diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js
new file mode 100644
index 00000000000..ed097911056
--- /dev/null
+++ b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js
@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  EuiButtonEmpty,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiPopover,
+} from '../../../../src/components';
+
+export class GuideThemeSelector extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isThemePopoverOpen: false,
+    };
+  }
+
+  onThemeButtonClick = () => {
+    this.setState({
+      isThemePopoverOpen: !this.state.isThemePopoverOpen,
+    });
+  };
+
+  closeThemePopover = () => {
+    this.setState({
+      isThemePopoverOpen: false,
+    });
+  };
+
+  render() {
+    const themeButton = (
+      <EuiButtonEmpty
+        size="s"
+        color="text"
+        iconType="arrowDown"
+        iconSide="right"
+        onClick={this.onThemeButtonClick}
+      >
+        Theme
+      </EuiButtonEmpty>
+    );
+
+    const themeOptions = [{
+      name: 'Light',
+      value: 'light',
+    }, {
+      name: 'Dark',
+      value: 'dark',
+    }, {
+      name: 'K6',
+      value: 'k6',
+    }, {
+      name: 'K6 dark',
+      value: 'k6_dark',
+    }].map(option => {
+      const { name, value } = option;
+
+      return (
+        <EuiContextMenuItem
+          key={value}
+          icon={value === this.props.selectedTheme ? 'check' : 'empty'}
+          onClick={() => { this.closeThemePopover(); this.props.onToggleTheme(value); }}
+        >
+          {`${name}`}
+        </EuiContextMenuItem>
+      );
+    });
+
+    return (
+      <EuiPopover
+        id="pageChromeThemePopover"
+        button={themeButton}
+        isOpen={this.state.isThemePopoverOpen}
+        closePopover={this.closeThemePopover}
+        panelPaddingSize="none"
+        withTitle
+        anchorPosition="downRight"
+      >
+        <EuiContextMenuPanel
+          style={{ width: '120px' }}
+          items={themeOptions}
+        />
+      </EuiPopover>
+    );
+  }
+}
+
+GuideThemeSelector.propTypes = {
+  onToggleTheme: PropTypes.func.isRequired,
+  selectedTheme: PropTypes.string.isRequired,
+};
diff --git a/src-docs/src/components/guide_theme_selector/index.js b/src-docs/src/components/guide_theme_selector/index.js
new file mode 100644
index 00000000000..f295f9e31b7
--- /dev/null
+++ b/src-docs/src/components/guide_theme_selector/index.js
@@ -0,0 +1 @@
+export { GuideThemeSelector } from './guide_theme_selector';