Dashboard LESS to SASS (#22017)

.browserslistrc

@@ -1,2 +1,3 @@
 last 2 versions
-> 5%
+> 5%
+Safari 7

src/core_plugins/kibana/public/dashboard/_dashboard_app.scss

@@ -0,0 +1,25 @@
+.dshAppContainer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: $euiColorEmptyShade;
+}
+
+.dshAppContainer--withMargins {
+  background-color: $euiColorLightestShade;
+}
+
+.dshStartScreen {
+  text-align: center;
+  margin: $euiSize auto;
+  max-width: 800px;
+  width: 100%;
+  background: $euiColorEmptyShade;
+  padding: $euiSizeXXL;
+  border-radius: $euiBorderRadius;
+}
+
+.dshSaveModal,
+.dshCloneModal {
+  max-width: 450px;
+}

src/core_plugins/kibana/public/dashboard/_hacks.scss

@@ -0,0 +1,235 @@
+// ANGULAR SELECTOR HACKS
+
+/**
+ * Mimics EuiPageBackground
+ */
+dashboard-listing {
+  background-color: $euiColorLightestShade;
+  min-height: 100vh;
+}
+
+/**
+ * Needs to correspond with the react root nested inside angular.
+ */
+ dashboard-viewport-provider {
+  flex: 1;
+  display: flex;
+  [data-reactroot] {
+    flex: 1;
+  }
+}
+
+
+// Dark theme bootstrap
+// Yes, this is a hack because bootstrap will be removed and everything must move to EUI theming
+// Can't reliably remove all/any of these because of embeddables
+
+.tab-dashboard.theme-dark {
+  @import './../../../../../node_modules/@elastic/eui/src/themes/k6/k6_colors_dark';
+
+  // /src/ui/public/styles/bootstrap/scaffolding.less
+  a {
+    color: $euiColorPrimary;
+
+    &:hover,
+    &:focus {
+      color: darken($euiColorPrimary, 10%);
+    }
+  }
+
+  // /src/ui/public/styles/bootstrap/forms.less
+  // Updated to match EUI dark theme
+  .form-control {
+    color: $euiTextColor;
+    background-color: tintOrShade($euiColorLightestShade, 60%, 25%);
+    border-color: transparentize($euiColorFullShade, .9);
+    &[disabled],
+    &[readonly],
+    fieldset[disabled] & {
+      background-color: darken($euiColorLightestShade, 2%);
+    }
+  }
+
+  // /src/ui/public/styles/bootstrap/tables.less
+  // Updated to match EUI dark theme
+  .table {
+    // Cells
+    > thead,
+    > tbody,
+    > tfoot {
+      > tr {
+        > th,
+        > td {
+          border-top-color: $euiColorLightShade;
+        }
+      }
+    }
+    // Bottom align for column headings
+    > thead > tr > th {
+      border-bottom-color: $euiColorLightShade;
+    }
+    // Account for multiple tbody instances
+    > tbody + tbody {
+      border-top-color: $euiColorLightShade;
+    }
+
+    // Nesting
+    .table {
+      background-color: transparent;
+    }
+  }
+
+  table {
+    th {
+      i.fa-sort {
+        color: $euiColorMediumShade;
+      }
+
+      button.fa-sort-asc,
+      button.fa-sort-down,
+      i.fa-sort-asc,
+      i.fa-sort-down {
+        color: $euiTextColor;
+      }
+
+      button.fa-sort-desc,
+      button.fa-sort-up,
+      i.fa-sort-desc,
+      i.fa-sort-up {
+        color: $euiTextColor;
+      }
+    }
+  }
+
+
+  // /src/ui/public/styles/bootstrap/list-group.less
+  .list-group-item {
+    background-color: $euiColorLightShade;
+    border-color: $euiColorDarkShade;
+    &:nth-child(even) {
+      background-color: $euiColorMediumShade;
+    }
+  }
+
+  a.list-group-item,
+  button.list-group-item {
+    color: $euiColorMediumShade;
+
+    .list-group-item-heading {
+      color: $euiColorLightShade;
+    }
+
+    // Hover state
+    &:hover,
+    &:focus {
+      color: $euiColorMediumShade;
+      background-color: $euiColorDarkestShade;
+    }
+  }
+
+  .panel {
+    > .panel-body + .table,
+    > .panel-body + .table-responsive,
+    > .table + .panel-body,
+    > .table-responsive + .panel-body {
+      border-top-color: $euiColorMediumShade;
+    }
+  }
+
+  .panel-group {
+    .panel-heading {
+      + .panel-collapse > .panel-body,
+      + .panel-collapse > .list-group {
+        border-top-color: $euiColorEmptyShade;
+      }
+    }
+
+    .panel-footer {
+      border-top: 0;
+      + .panel-collapse .panel-body {
+        border-bottom-color: $euiColorEmptyShade;
+      }
+    }
+  }
+
+  .panel-default {
+    & > .panel-heading {
+      color: $euiColorPrimary;
+      background-color: $euiColorEmptyShade;
+      border-color: $euiColorLightShade;
+
+      + .panel-collapse > .panel-body {
+        border-top-color: $euiColorLightShade;
+      }
+      .badge {
+        color: $euiColorEmptyShade;
+        background-color: $euiColorPrimary;
+      }
+    }
+    & > .panel-footer {
+      + .panel-collapse > .panel-body {
+        border-bottom-color: $euiColorLightShade;
+      }
+    }
+  }
+
+  // /src/ui/public/styles/bootstrap/navs.less
+  .nav {
+    > li {
+      > a {
+        &:hover,
+        &:focus {
+          background-color: $euiColorDarkShade;
+        }
+      }
+    }
+  }
+
+  .nav-tabs {
+    border-bottom-color: $euiColorMediumShade;
+    > li {
+      > a {
+        &:hover {
+          border-color: $euiColorDarkShade;
+        }
+      }
+
+      &.active > a {
+        &,
+        &:hover,
+        &:focus {
+          color: $euiColorFullShade;
+          background-color: $euiColorMediumShade;
+          border: 0 none transparent;
+        }
+      }
+    }
+  }
+
+  // SASSTODO: WAIT FOR DISCOVER SASS
+  .discover-table-row {
+    .docTableRowFilterButton {
+      background-color: $euiColorEmptyShade;
+    }
+  }
+
+  // SASSTODO: Wait for EUI conversion to remove
+  // react-input-range
+  // Updated to match EUI dark theme
+  .input-range__track {
+    background-color: $euiColorDarkShade;
+  }
+
+  .input-range__slider {
+    background: $euiColorLightestShade;
+    border-color: $euiColorDarkShade;
+  }
+
+  .input-range__track--active {
+    background: $euiColorPrimary;
+  }
+
+  .input-range__label {
+    color: $euiTextColor;
+  }
+}

src/core_plugins/kibana/public/dashboard/_index.scss

@@ -0,0 +1,43 @@
+// External libraries
+// SASSTODO: Change from relative path once node-sass includes node_modules in includePaths
+@import './../../../../../node_modules/react-grid-layout/css/styles';
+@import './../../../../../node_modules/react-resizable/css/styles';
+
+// Temporary hacks
+@import 'hacks';
+
+// Prefix all styles with "dsh" to avoid conflicts.
+// Examples
+//   dshChart
+//   dshChart__legend
+//   dshChart__legend--small
+//   dshChart__legend-isLoading
+
+/**
+  * 1. Don't duplicate styles in dark mode
+  */
+.tab-dashboard.theme-light { /* 1 */
+  @import 'dashboard_app';
+  @import 'grid/index';
+  @import 'panel/index';
+  @import 'viewport/index';
+}
+
+// Imports outside of .tab-dashboard selector don't change between light/dark modes
+@import 'components/index';
+
+// Must be outside of theme selector because it lives in a portal
+@import 'panel/panel_header/panel_options_menu_form';
+
+// DARK THEME
+// EUI global scope -- dark
+@import './../../../../../node_modules/@elastic/eui/src/themes/k6/k6_colors_dark';
+
+.tab-dashboard.theme-dark {
+  background-color: $euiColorEmptyShade;
+
+  @import 'dashboard_app';
+  @import 'grid/index';
+  @import 'panel/index';
+  @import 'viewport/index';
+}

src/core_plugins/kibana/public/dashboard/components/__snapshots__/exit_full_screen_button.test.js.snap

@@ -9,11 +9,11 @@ exports[`is rendered 1`] = `
     In full screen mode, press ESC to exit.
   </p>
   <div
-    class="exitFullScreenButton"
+    class="dshExitFullScreenButton"
   >
     <button
       aria-label="Exit full screen mode"
-      class="kuiButton exitFullScreenMode"
+      class="kuiButton dshExitFullScreenButton__mode"
       type="hollow"
     >
       <span
@@ -21,14 +21,14 @@ exports[`is rendered 1`] = `
       >
         <span>
           <span
-            class="exitFullScreenModeLogo"
+            class="dshExitFullScreenButton__logo"
             data-test-subj="exitFullScreenModeLogo"
           />
           <span
-            class="exitFullScreenModeText"
+            class="dshExitFullScreenButton__text"
             data-test-subj="exitFullScreenModeText"
           >
-            Exit full screen
+            Exit full screen 
             <span
               class="kuiIcon fa fa-angle-left"
             />

src/core_plugins/kibana/public/dashboard/components/_exit_full_screen_button.scss

@@ -0,0 +1,72 @@
+.dshExitFullScreenButton {
+  text-align: center;
+  width: 100%;
+  height: 0;
+  bottom: 0;
+  position: absolute;
+}
+
+/**
+ * 1. override the z-index: 1 applied to all non-eui elements that are in :focus via kui
+ *      - see packages/kbn-ui-framework/src/global_styling/reset/_reset.scss
+ */
+
+.dshExitFullScreenButton__mode {
+  height: $euiSizeXXL;
+  left: 0;
+  bottom: 0;
+  position: fixed;
+  display: block;
+  padding: 0;
+  border: none;
+  background: none;
+  z-index: 5;
+
+  &:hover,
+  &:focus {
+    transition: all $euiAnimSpeedExtraSlow $euiAnimSlightResistance;
+    z-index: 10 !important; /* 1. */
+
+    .dshExitFullScreenButton__text {
+      transition: all $euiAnimSpeedNormal $euiAnimSlightResistance;
+      transform: translateX(-$euiSize);
+    }
+  }
+}
+
+.dshExitFullScreenButton__logo {
+  display: block;
+  background-color: shadeOrTint($euiColorPrimary, 25%, 25%);
+  height: $euiSizeXXL;
+  // SASSTODO: wait until bundler can inject file names into SASS
+  // background-image: url("../../../../../ui/images/kibana.svg");
+
+  // These numbers are very specific to the Kibana logo size
+  width: 92px;
+  background-position: 8px 5px;
+  background-size: 72px 30px;
+  background-repeat: no-repeat;
+
+  z-index: $euiZLevel1;
+}
+
+/**
+ * 1. Calc made to allow caret in text to peek out / animate.
+ */
+
+.dshExitFullScreenButton__text {
+  background: $euiColorPrimary;
+  color: $euiColorEmptyShade;
+  line-height: $euiSizeXXL;
+  display: inline-block;
+  height: $euiSizeXXL;
+  position: absolute;
+  left: calc(100% + #{$euiSize});  // 1
+  top: 0px;
+  bottom: 0px;
+  white-space: nowrap;
+  padding: 0px $euiSizeS 0px $euiSizeM;
+  transition: all .2s ease;
+  transform: translateX(-100%);
+  z-index: -1;
+}

src/core_plugins/kibana/public/dashboard/components/_index.scss

@@ -0,0 +1 @@
+@import 'exit_full_screen_button';

src/core_plugins/kibana/public/dashboard/components/exit_full_screen_button.js

@@ -57,18 +57,17 @@ export class ExitFullScreenButton extends PureComponent {
           </p>
         </EuiScreenReaderOnly>
         <div
-          className="exitFullScreenButton"
+          className="dshExitFullScreenButton"
         >
           <KuiButton
             type="hollow"
             aria-label="Exit full screen mode"
-            className="exitFullScreenMode"
+            className="dshExitFullScreenButton__mode"
             onClick={this.props.onExitFullScreenMode}
           >
-            <span className="exitFullScreenModeLogo" data-test-subj="exitFullScreenModeLogo"/>
-            <span className="exitFullScreenModeText" data-test-subj="exitFullScreenModeText">
-              Exit full screen
-              <span className="kuiIcon fa fa-angle-left"/>
+            <span className="dshExitFullScreenButton__logo" data-test-subj="exitFullScreenModeLogo"/>
+            <span className="dshExitFullScreenButton__text" data-test-subj="exitFullScreenModeText">
+              Exit full screen <span className="kuiIcon fa fa-angle-left"/>
             </span>
           </KuiButton>
         </div>

src/core_plugins/kibana/public/dashboard/dashboard_app.html

@@ -1,6 +1,6 @@
 <dashboard-app
-  class="app-container dashboard-container"
-  ng-class="{'dashboard-container-with-margins': model.useMargins}"
+  class="app-container dshAppContainer"
+  ng-class="{'dshAppContainer--withMargins': model.useMargins}"
 >
   <!-- Local nav. -->
   <kbn-top-nav name="dashboard" config="topNavMenu">
@@ -44,7 +44,7 @@
 
   <div
     ng-show="getShouldShowEditHelp()"
-    class="text-center start-screen"
+    class="dshStartScreen"
   >
     <h2 class="kuiTitle kuiVerticalRhythm">
       This dashboard is empty. Let&rsquo;s fill it up!
@@ -55,7 +55,7 @@
     </p>
   </div>
 
-  <div ng-show="getShouldShowViewHelp()" class="text-center start-screen">
+  <div ng-show="getShouldShowViewHelp()" class="dshStartScreen">
     <h2 class="kuiTitle kuiVerticalRhythm">
       This dashboard is empty. Let&rsquo;s fill it up!
     </h2>

src/core_plugins/kibana/public/dashboard/grid/_dashboard_grid.scss

@@ -0,0 +1,99 @@
+// SASSTODO: Can't find this selector, but could break something if removed
+.react-grid-layout .gs-w {
+  z-index: auto;
+}
+
+/**
+ * 1. Due to https://github.com/STRML/react-grid-layout/issues/240 we have to manually hide the resizable
+ * element.
+ */
+.dshLayout--viewing {
+  .react-resizable-handle {
+    display: none; /* 1 */
+  }
+}
+
+/**
+ * 1. If we don't give the resizable handler a larger z index value the layout will hide it.
+ */
+.dshLayout--editing {
+  .react-resizable-handle {
+    z-index: $euiZLevel1; /* 1 */
+    right: $euiSizeXS;
+    bottom: $euiSizeXS;
+  }
+}
+
+/**
+ * 1. Need to override the react grid layout height when a single panel is expanded. Important is required because
+ * otherwise the height is set inline.
+ */
+ .dshLayout-isMaximizedPanel {
+  height: 100% !important; /* 1. */
+  width: 100%;
+  position: absolute;
+}
+
+/**
+ * .dshLayout-withMargins only affects the panel styles themselves, see ../panel
+ */
+
+/**
+ * When a single panel is expanded, all the other panels are hidden in the grid.
+ */
+.dshDashboardGrid__item--hidden {
+  display: none;
+}
+
+/**
+ * 1. We need to mark this as important because react grid layout sets the width and height of the panels inline.
+ */
+.dshDashboardGrid__item--expanded {
+  height: 100% !important; /* 1 */
+  width: 100% !important; /* 1 */
+  top: 0 !important; /* 1 */
+  left: 0 !important; /* 1 */
+}
+
+// REACT-GRID
+
+.react-grid-layout .dshPanel {
+  overflow: visible;
+}
+
+.react-grid-item {
+  /**
+   * Disable transitions from the library on each grid element.
+   */
+   transition: none;
+  /**
+    * Copy over and overwrite the fill color with EUI color mixin (for theming)
+    */
+  > .react-resizable-handle {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpolygon fill='#{hexToRGB($euiColorDarkShade)}' points='6 6 0 6 0 4.2 4 4.2 4.2 4.2 4.2 0 6 0' /%3E%3C/svg%3E%0A");
+  }
+
+  /**
+   * Dragged/Resized panels in dashboard should always appear above other panels
+   * and above the placeholder
+   */
+  &.resizing,
+  &.react-draggable-dragging {
+    z-index: $euiZLevel2 !important;
+  }
+
+  &.react-draggable-dragging {
+    @include euiBottomShadowLarge;
+    border-radius: $euiBorderRadius; // keeps shadow within bounds
+  }
+
+  /**
+   * Overwrites red coloring that comes from this library by default.
+   */
+  &.react-grid-placeholder {
+    border-radius: $euiBorderRadius;
+    background: $euiColorPrimary;
+  }
+}
+
+

src/core_plugins/kibana/public/dashboard/grid/_index.scss

@@ -0,0 +1 @@
+@import './dashboard_grid';

src/core_plugins/kibana/public/dashboard/grid/dashboard_grid.js

@@ -65,10 +65,10 @@ function ResponsiveGrid({
   // grid to re-render so it'll show a grid with a width of 0.
   lastValidGridSize = size.width > 0 ? size.width : lastValidGridSize;
   const classes = classNames({
-    'layout-view': isViewMode,
-    'layout-edit': !isViewMode,
-    'layout-maximized-panel': maximizedPanelId !== undefined,
-    'layout-with-margins': useMargins,
+    'dshLayout--viewing': isViewMode,
+    'dshLayout--editing': !isViewMode,
+    'dshLayout-isMaximizedPanel': maximizedPanelId !== undefined,
+    'dshLayout-withMargins': useMargins,
   });
 
   const MARGINS = useMargins ? 8 : 0;
@@ -86,7 +86,9 @@ function ResponsiveGrid({
       margin={[MARGINS, MARGINS]}
       cols={DASHBOARD_GRID_COLUMN_COUNT}
       rowHeight={DASHBOARD_GRID_HEIGHT}
-      draggableHandle={isViewMode ? '.doesnt-exist' : '.panel-title'}
+      // Pass the named classes of what should get the dragging handle
+      // (.doesnt-exist literally doesnt exist)
+      draggableHandle={isViewMode ? '.doesnt-exist' : '.dshPanel__title'}
       layout={layout}
       onLayoutChange={onLayoutChange}
       measureBeforeMount={false}
@@ -213,8 +215,8 @@ export class DashboardGrid extends React.Component {
       const expandPanel = maximizedPanelId !== undefined && maximizedPanelId === panel.panelIndex;
       const hidePanel = maximizedPanelId !== undefined && maximizedPanelId !== panel.panelIndex;
       const classes = classNames({
-        'grid-item--expanded': expandPanel,
-        'grid-item--hidden': hidePanel,
+        'dshDashboardGrid__item--expanded': expandPanel,
+        'dshDashboardGrid__item--hidden': hidePanel,
       });
       return (
         <div

src/core_plugins/kibana/public/dashboard/listing/__snapshots__/dashboard_listing.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`after fetch hideWriteControls 1`] = `
 <EuiPage
-  className="dashboardLandingPage"
+  className="dshDashboardListing__page"
   data-test-subj="dashboardLandingPage"
   restrictWidth={true}
 >
@@ -32,7 +32,7 @@ exports[`after fetch hideWriteControls 1`] = `
 
 exports[`after fetch initialFilter 1`] = `
 <EuiPage
-  className="dashboardLandingPage"
+  className="dshDashboardListing__page"
   data-test-subj="dashboardLandingPage"
   restrictWidth={true}
 >
@@ -184,7 +184,7 @@ exports[`after fetch initialFilter 1`] = `
 
 exports[`after fetch renders call to action when no dashboards exist 1`] = `
 <EuiPage
-  className="dashboardLandingPage"
+  className="dshDashboardListing__page"
   data-test-subj="dashboardLandingPage"
   restrictWidth={true}
 >
@@ -244,7 +244,7 @@ exports[`after fetch renders call to action when no dashboards exist 1`] = `
 
 exports[`after fetch renders table rows 1`] = `
 <EuiPage
-  className="dashboardLandingPage"
+  className="dshDashboardListing__page"
   data-test-subj="dashboardLandingPage"
   restrictWidth={true}
 >
@@ -396,7 +396,7 @@ exports[`after fetch renders table rows 1`] = `
 
 exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
 <EuiPage
-  className="dashboardLandingPage"
+  className="dshDashboardListing__page"
   data-test-subj="dashboardLandingPage"
   restrictWidth={true}
 >
@@ -579,7 +579,7 @@ exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
 
 exports[`renders empty page in before initial fetch to avoid flickering 1`] = `
 <EuiPage
-  className="dashboardLandingPage"
+  className="dshDashboardListing__page"
   data-test-subj="dashboardLandingPage"
   restrictWidth={true}
 >

src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js

@@ -326,7 +326,6 @@ export class DashboardListing extends React.Component {
         sortable: true,
         render: (field, record) => (
           <EuiLink
-            className="dashboardLink"
             href={`#${createDashboardEditUrl(record.id)}`}
             data-test-subj={`dashboardListingTitleLink-${record.title.split(' ').join('-')}`}
           >
@@ -462,7 +461,7 @@ export class DashboardListing extends React.Component {
 
   render() {
     return (
-      <EuiPage data-test-subj="dashboardLandingPage" className="dashboardLandingPage" restrictWidth>
+      <EuiPage data-test-subj="dashboardLandingPage" className="dshDashboardListing__page" restrictWidth>
         <EuiPageBody>
           {this.renderPageContent()}
         </EuiPageBody>

src/core_plugins/kibana/public/dashboard/panel/__snapshots__/dashboard_panel.test.js.snap

@@ -2,29 +2,29 @@
 
 exports[`DashboardPanel matches snapshot 1`] = `
 <div
-  class="dashboard-panel"
+  class="dshPanel"
 >
   <div
-    class="panel panel-default panel--edit-mode"
+    class="dshPanel__panel dshPanel__panel--editing"
     data-test-subj="dashboardPanel"
   >
     <div
-      class="panel-heading"
+      class="dshPanel__header"
       data-test-subj="dashboardPanelHeading-myembeddabletitle"
     >
       <span
         aria-label="Dashboard panel: my embeddable title"
-        class="panel-title"
+        class="dshPanel__title"
         data-test-subj="dashboardPanelTitle"
         title="my embeddable title"
       >
         my embeddable title
       </span>
       <div
-        class="kuiMicroButtonGroup"
+        class="dshPanel__headerButtonGroup"
       >
         <div
-          class="euiPopover euiPopover--anchorDownRight euiPopover--withTitle dashboardPanelPopOver"
+          class="euiPopover euiPopover--anchorDownRight euiPopover--withTitle dshPanel_optionsMenuPopover"
           id="dashboardPanelContextMenu"
         >
           <div

src/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss

@@ -0,0 +1,176 @@
+.dshPanel {
+  z-index: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+
+  // SASSTODO: The inheritence factor stemming from embeddables makes this class hard to change
+  .panel-content {
+    display: flex;
+    flex: 1 1 100%;
+    height: auto;
+    z-index: 1;
+  }
+
+  // SASSTODO: Pretty sure this doesn't do anything since the flex-basis 100%,
+  // but it MIGHT be fixing IE
+  .panel-content--fullWidth {
+    width: 100%;
+  }
+
+  /**
+   * 1. We want the doc-table-container to scroll only when embedded in a dashboard panel
+   * 2. Fix overflow of vis's specifically for inside dashboard panels, lets the panel decide the overflow
+   */
+  .doc-table-container {
+    flex: 1 1 0; /* 1 */
+    overflow: auto; /* 1 */
+  }
+
+  .visualization .vis-container {
+    overflow: visible; /* 2 */
+  }
+}
+
+// CONTENT
+
+.dshPanel__panel {
+  background-color: $euiColorEmptyShade;
+  border: 1px solid $euiColorEmptyShade;
+  overflow: hidden;
+
+  // maintain the 100% height of the panel
+  height: 100%;
+  flex: 1;
+
+  // flex layout allows us to define the visualize element as "fill available space"
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.dshPanel__panel--editing {
+  // SASSTOD: Change this back $euiBorderColor, when EUI adds !default to borders
+  border-color: $euiColorLightShade;
+
+  &:hover {
+    border-color: $euiColorPrimary;
+  }
+}
+
+// Adjust borders/margin/etc... for spaced out panels
+.dshLayout-withMargins {
+  .dshPanel__panel {
+    @include euiBottomShadowSmall;
+    // SASSTOD: Change this back $euiBorderColor, when EUI adds !default to borders
+    border-color: $euiColorLightShade;
+    border-radius: $euiBorderRadius;
+  }
+
+  .dshPanel__panel--editing {
+    transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
+
+    &:hover,
+    &:focus {
+      border-color: $euiColorPrimary;
+      @include euiSlightShadowHover;
+    }
+  }
+}
+
+
+// HEADER
+
+.dshPanel__header {
+  padding: $euiSizeS;
+  flex: 0 0 auto;
+  white-space: nowrap;
+  display: flex;
+  border: none;
+  transition: background-color $euiAnimSpeedFast $euiAnimSlightResistance;
+
+  // Add a rounded corner to stay within the bordered panel
+  .dshLayout-withMargins & {
+    border-top-left-radius: $euiBorderRadius - 1px;
+    border-top-right-radius: $euiBorderRadius - 1px;
+  }
+}
+
+.dshPanel__title {
+  font-size: inherit;
+  color: $euiColorDarkShade;
+  transition: color $euiAnimSpeedFast $euiAnimSlightResistance;
+  flex: 1 1 auto;
+  @include truncate;
+
+  // flexbox fix for IE10
+  // http://stackoverflow.com/questions/22008135/internet-explorer-10-does-not-apply-flexbox-on-inline-elements
+  display: inline-block;
+}
+
+.dshPanel__panel--editing:hover {
+  .dshPanel__header {
+    background-color: rgba($euiColorFullShade,.05) !important;
+    cursor: move;
+  }
+
+  .dshPanel__title:hover {
+    color: $euiColorPrimary;
+  }
+}
+
+/**
+  * 1. Use opacity to make this element accessible to screen readers and keyboard.
+  * 2. Show on focus to enable keyboard accessibility.
+  */
+.dshPanel__header--floater {
+  opacity: 0; /* 1 */
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  background-color: $euiColorEmptyShade;
+  z-index: $euiZLevel1;
+  transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;
+
+  &:focus { /* 2 */
+    opacity: 1;
+  }
+}
+
+.dshPanel:hover .dshPanel__header--floater {
+  opacity: 1;
+}
+
+// OPTIONS MENU
+
+/**
+  * 1. Use opacity to make this element accessible to screen readers and keyboard.
+  * 2. Show on focus to enable keyboard accessibility.
+  */
+.dshPanel_optionsMenuButton {
+  opacity: 0; /* 1 */
+
+  &:focus { /* 2 */
+    opacity: 1;
+  }
+}
+
+.dshPanel:hover .dshPanel_optionsMenuButton {
+  opacity: 1;
+}
+
+// ERROR
+
+.dshPanel__error {
+  text-align: center;
+  justify-content: center;
+  flex-direction: column;
+  overflow: auto;
+
+  .fa-exclamation-triangle {
+    font-size: $euiFontSizeXL;
+    color: $euiColorDanger;
+  }
+}

src/core_plugins/kibana/public/dashboard/panel/_index.scss

@@ -0,0 +1 @@
+@import "./dashboard_panel";

src/core_plugins/kibana/public/dashboard/panel/dashboard_panel.js

@@ -125,12 +125,12 @@ export class DashboardPanel extends React.Component {
 
   render() {
     const { viewOnlyMode, panel } = this.props;
-    const classes = classNames('panel panel-default', this.props.className, {
-      'panel--edit-mode': !viewOnlyMode
+    const classes = classNames('dshPanel__panel', this.props.className, {
+      'dshPanel__panel--editing': !viewOnlyMode
     });
     return (
       <div
-        className="dashboard-panel"
+        className="dshPanel"
         onFocus={this.onFocus}
         onBlur={this.onBlur}
       >

src/core_plugins/kibana/public/dashboard/panel/panel_error.js

@@ -22,7 +22,7 @@ import PropTypes from 'prop-types';
 
 export function PanelError({ error }) {
   return (
-    <div className="load-error">
+    <div className="dshPanel__error panel-content">
       <span aria-hidden="true" className="kuiIcon fa-exclamation-triangle"/>
       <span>{error}</span>
     </div>

src/core_plugins/kibana/public/dashboard/panel/panel_header/_panel_options_menu_form.scss

@@ -0,0 +1,3 @@
+.dshPanel__optionsMenuForm {
+  padding: $euiSize;
+}

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header.tsx

@@ -39,8 +39,8 @@ export function PanelHeader({
 }: PanelHeaderProps) {
   if (isViewOnlyMode && (!title || hidePanelTitles)) {
     return (
-      <div className="panel-heading-floater">
-        <div className="kuiMicroButtonGroup">
+      <div className="dshPanel__header--floater">
+        <div className="dshPanel__headerButtonGroup">
           <PanelOptionsMenuContainer panelId={panelId} embeddable={embeddable} />
         </div>
       </div>
@@ -49,19 +49,19 @@ export function PanelHeader({
 
   return (
     <div
-      className="panel-heading"
+      className="dshPanel__header"
       data-test-subj={`dashboardPanelHeading-${(title || '').replace(/\s/g, '')}`}
     >
       <span
         data-test-subj="dashboardPanelTitle"
-        className="panel-title"
+        className="dshPanel__title"
         title={title}
         aria-label={`Dashboard panel: ${title}`}
       >
         {hidePanelTitles ? '' : title}
       </span>
 
-      <div className="kuiMicroButtonGroup">
+      <div className="dshPanel__headerButtonGroup">
         <PanelOptionsMenuContainer panelId={panelId} embeddable={embeddable} />
       </div>
     </div>

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu.tsx

@@ -45,7 +45,7 @@ export function PanelOptionsMenu({
     <EuiButtonIcon
       iconType={isViewMode ? 'boxesHorizontal' : 'gear'}
       color="text"
-      className={isViewMode && !isPopoverOpen ? 'viewModeOpenContextMenuIcon' : ''}
+      className={isViewMode && !isPopoverOpen ? 'dshPanel_optionsMenuButton' : ''}
       aria-label="Panel options"
       data-test-subj="dashboardPanelToggleMenuIcon"
       onClick={toggleContextMenu}
@@ -55,7 +55,7 @@ export function PanelOptionsMenu({
   return (
     <EuiPopover
       id="dashboardPanelContextMenu"
-      className="dashboardPanelPopOver"
+      className="dshPanel_optionsMenuPopover"
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closeContextMenu}

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu_form.tsx

@@ -45,10 +45,7 @@ export function PanelOptionsMenuForm({
   }
 
   return (
-    <div
-      className="dashboardPanelMenuOptionsForm"
-      data-test-subj="dashboardPanelTitleInputMenuItem"
-    >
+    <div className="dshPanel__optionsMenuForm" data-test-subj="dashboardPanelTitleInputMenuItem">
       <EuiFormRow label="Panel title">
         <EuiFieldText
           id="panelTitleInput"

src/core_plugins/kibana/public/dashboard/styles/index.less

@@ -1,450 +1,4 @@
-@import (reference) "~ui/styles/variables";
-@import (reference) "~ui/styles/mixins";
-@import "~ui/styles/local_search.less";
-@import "~react-grid-layout/css/styles.css";
-@import "~react-resizable/css/styles.css";
-
-.exitFullScreenButton {
-  text-align: center;
-  width: 100%;
-  height: 0;
-  bottom: 0;
-  position: absolute;
-}
-
-.layout-edit {
-  /**
-   * 1. If we don't give the resizable handler a larger z index value the spy toggle will take over the mouse hover.
-   */
-  .react-resizable-handle {
-    z-index: 10; /* 1 */
-    right: 4px;
-    bottom: 4px;
-  }
-}
-
-.euiContextMenuItem {
-  display: block;
-}
-
-.layout-view {
-  /**
-   * 1. Due to https://github.com/STRML/react-grid-layout/issues/240 we have to manually hide the resizable
-   * element.
-   */
-  .react-resizable-handle {
-    display: none; /* 1. */
-  }
-}
-
-/**
- * 1. Need to override the react grid layout height when a single panel is expanded. Important is required because
- * otherwise the height is set inline.
- */
-.layout-maximized-panel {
-  height: 100% !important; /* 1. */
-  width: 100%;
-  position: absolute;
-}
-
-.exitFullScreenMode {
-  height: 40px;
-  left: 0px;
-  bottom: 0px;
-  position: fixed;
-  display: block;
-  padding: 0;
-  border: none;
-  background: none;
-  z-index: 5;
-}
-
-/**
- * 1. override the z-index: 1 applied to all non-eui elements that are in :focus via kui
- *      - see packages/kbn-ui-framework/src/global_styling/reset/_reset.scss
- */
-.exitFullScreenMode:hover,
-.exitFullScreenMode:focus {
-  transition: all .5s ease;
-  z-index: 10 !important; /* 1. */
-
-  .exitFullScreenModeText {
-    visibility: visible;
-    opacity: 1;
-    transition: all .2s ease;
-    transform: translateX(-14px);
-  }
-}
-
-.exitFullScreenModeLogo {
-  display: block;
-  background-color: #005571;
-  width: 92px;
-  height: 40px;
+// SASSTODO: wait until bundler can inject file names into SASS
+.dshExitFullScreenButton__logo {
   background-image: url("~ui/images/kibana.svg");
-  background-position: 8px 5px;
-  background-size: 72px 30px;
-  background-repeat: no-repeat;
-  z-index: 50;
-}
-
-/**
- * 1. Calc made to allow caret in text to peek out / animate.
- */
-
-.exitFullScreenModeText {
-  background: @globalColorBlue;
-  color: tint(@globalColorBlue, 70%);
-  line-height: 40px;
-  display: inline-block;
-  height: 40px;
-  position: absolute;
-  left: calc(100% + 14px);  // 1
-  top: 0px;
-  bottom: 0px;
-  white-space: nowrap;
-  padding: 0px 4px 0px 10px;
-  transition: all .2s ease;
-  transform: translateX(-100%);
-  z-index: -1;
-}
-
-.tab-dashboard {
-  background-color: @dashboard-bg;
-}
-
-
-.dashboardModal {
-  width: 450px;
-}
-
-.dashboard-grid {
-  display: block;
-  margin: 0;
-  padding: 5px;
-  z-index: @dashboardGridDepth;
-}
-
-.start-screen {
-  margin: 20px auto;
-  max-width: 800px;
-  width: 100%;
-  background: #FFF;
-  padding: 40px;
-  border-radius: 4px;
-}
-
-/**.
- * 1. We need this so the panel menu pop up shows up outside the boundaries of a panel.
- */
-.react-grid-layout {
-  background-color: @dashboard-bg;
-
-  .dashboard-panel {
-    overflow: visible; /* 1. */
-  }
-
-  .gs-w {
-    z-index: auto;
-  }
-}
-
-.panel {
-  border: solid 1px transparent;
-}
-
-/**
- * 1. For expanded panel mode, we want to hide the grid, but keep it rendered so it doesn't cause all visualizations
- * to re-render once the panel is minimized, which is a time consuming operation.
- */
-.panel--hidden-mode {
-  display: none; /* 1. */
-}
-
-.panel--expanded-mode {
-  height: 100%;
-  width: 100%;
-}
-
-.panel--edit-mode {
-  border-color: @globalColorLightGray;
-
-  &:hover {
-    border-color: @globalColorBlue;
-
-    .panel-title:hover {
-      color: @globalColorBlue;
-    }
-
-    .panel-heading {
-      background-color: rgba(0,0,0,.05) !important;
-    }
-  }
-
-  .panel-heading {
-    cursor: move;
-  }
-}
-
-.dashboard-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.dashboard-container-with-margins {
-  background-color: @dashboard-bg-with-margins;
-}
-
-/**
- * Needs to correspond with the react root nested inside angular.
- */
-dashboard-viewport-provider {
-  flex: 1;
-  display: flex;
-  [data-reactroot] {
-    flex: 1;
-  }
-}
-
-/**
- * Disable transitions from the library on each grid element.
- */
-.react-grid-item {
-  transition: none;
-}
-
-/**
- * Dragged panels in dashboard should always appear above other panels.
- */
-.react-grid-item.react-draggable-dragging {
-  z-index: @dashboardDraggingGridDepth !important;
-}
-
-/**
- * Overwrites red coloring that comes from this library by default.
- */
-.react-grid-item.react-grid-placeholder {
-  border-radius: 4px;
-  background: @globalColorBlue;
-}
-
-/**
- * When a single panel is expanded, all the other panels are hidden in the grid.
- */
-.grid-item--hidden {
-  display: none;
-}
-
-/**
- * We need to mark this as important because react grid layout sets the width and height of the panels inline.
- */
-.grid-item--expanded {
-  height: 100% !important; /* 1. */
-  width: 100% !important; /* 1. */
-  top: 0 !important; /* 1. */
-  left: 0 !important; /* 1. */
-}
-
-/**
- * 1. Fix Firefox bug where a value of overflow: hidden will prevent scrolling in a panel where the spy panel does
- * not have enough room.
- */
-.dashboard-panel {
-  z-index: auto;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  background: @dashboard-panel-bg;
-  color: @dashboard-panel-color;
-  padding: 0;
-  overflow: visible; /* 1 */
-
-  position: relative;
-
-  .panel {
-    margin: 0;
-    // maintain the 100% height of the panel
-    height: 100%;
-    flex: 1;
-
-    // flex layout allows us to define the visualize element as "fill available space"
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-
-    .panel-heading {
-      padding: 8px;
-      flex: 0 0 auto;
-      white-space: nowrap;
-      display: flex;
-      border-top-right-radius: 0;
-      border-top-left-radius: 0;
-      background-color: @white;
-      border: none;
-
-      /**
-       * 1. Required to get the pop up component arrow to line up with the menu icon.
-       */
-      .panel-dropdown:hover {
-        color: @globalColorBlue;
-      }
-
-      .kuiPopover__body {
-        z-index: 25;
-      }
-
-      .panel-title {
-        font-size: inherit;
-
-        // flexbox fix for IE10
-        // http://stackoverflow.com/questions/22008135/internet-explorer-10-does-not-apply-flexbox-on-inline-elements
-        display: inline-block;
-
-        .ellipsis();
-        flex: 1 1 auto;
-
-        i {
-          opacity: 0.3;
-          font-size: 1.2em;
-          margin-right: 4px;
-        }
-      }
-
-      .panel-move:hover {
-        cursor: move;
-      }
-    }
-
-    /**
-     * 1. Use opacity to make this element accessible to screen readers and keyboard.
-     * 2. Show on focus to enable keyboard accessibility.
-     */
-    .panel-heading-floater {
-      opacity: 0; /* 1 */
-      position: absolute;
-      right: 1px;
-      top: 1px;
-      background-color: @dashboard-panel-bg;
-      z-index: 5;
-      &:focus {
-        opacity: 1; /* 2 */
-      }
-    }
-
-    /**
-     * 1. Use opacity to make this element accessible to screen readers and keyboard.
-     * 2. Show on focus to enable keyboard accessibility.
-     */
-    .viewModeOpenContextMenuIcon {
-      opacity: 0; /* 1 */
-      &:focus {
-        opacity: 1; /* 2 */
-      }
-    }
-
-    &:hover {
-      .panel-heading-floater {
-        opacity: 1;
-      }
-      .viewModeOpenContextMenuIcon {
-        opacity: 1;
-      }
-    }
-
-    .load-error {
-      text-align: center;
-      font-size: 1em;
-      display: flex;
-      flex: 1 0 auto;
-      justify-content: center;
-      flex-direction: column;
-
-      .fa-exclamation-triangle {
-        font-size: 2em;
-        color: @dashboard-panel-load-error-color;
-      }
-    }
-
-    /**
-     * 1. For tile maps, this is necessary to get the panel pop over to show up. Otherwise the tilemap ends up having
-     * a bigger z-index than the pop over.
-     */
-    .panel-content {
-      display: flex;
-      flex: 1 1 100%;
-      height: auto;
-      z-index: 1; /* 1. */
-    }
-
-    .panel-content--fullWidth {
-      width: 100%;
-    }
-  }
-
-  /**
-   * 1. We want the doc-table-container to scroll only when embedded in a dashboard panel
-   */
-  .doc-table-container {
-    flex: 1 1 0; /* 1 */
-    overflow: auto; /* 1 */
-  }
-}
-
-/**
- * The dashboard background color is the same as the panel color by default. When the user wants to use margins, we
- * need to give a different background color so the panels are distinguishable from the background.
- */
-.layout-with-margins {
-  background-color: @dashboard-bg-with-margins;
-  .panel-heading {
-    border-top-left-radius: 4px !important;
-    border-top-right-radius: 4px !important;
-  }
-
-  .panel-content {
-    background-color: @panel-bg-with-margins;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-  }
-
-  .panel {
-    border: 1px solid #D9D9D9;
-    border-radius: 4px;
-    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
-  }
-
-  .panel--edit-mode:hover {
-    border-color: @globalColorBlue;
-    box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.1);
-  }
-}
-
-.dashboard-viewport {
-  width: 100%;
-  background-color: @dashboard-bg;
-}
-.dashboard-viewport-with-margins {
-  width: 100%;
-  background-color: @dashboard-bg-with-margins;
-}
-
-.dashboardPanelMenuOptionsForm {
-  padding: 16px;
-  input {
-    width: 100%;
-    display: block;
-  }
-}
-
-// Mimics EuiPageBackground
-dashboard-listing {
-  background-color: @globalColorLightestGray;
-  min-height: 100vh;
-}
-
-.dashboardLandingPage {
-  background: @globalColorLightestGray;
 }

src/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/add_panel.test.js.snap

@@ -2,7 +2,6 @@
 
 exports[`render 1`] = `
 <EuiFlyout
-  className="addPanelFlyout"
   closeButtonAriaLabel="Closes this dialog"
   data-test-subj="dashboardAddPanel"
   hideCloseButton={false}

src/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/clone_modal.test.js.snap

@@ -3,7 +3,7 @@
 exports[`renders DashboardCloneModal 1`] = `
 <EuiOverlayMask>
   <EuiModal
-    className="dashboardModal"
+    className="dshCloneModal"
     data-test-subj="dashboardCloneModal"
     onClose={[Function]}
   >

src/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/save_modal.test.js.snap

@@ -3,7 +3,7 @@
 exports[`renders DashboardSaveModal 1`] = `
 <EuiOverlayMask>
   <EuiModal
-    className="dashboardModal"
+    className="dshSaveModal"
     data-test-subj="dashboardSaveModal"
     onClose={[Function]}
   >

src/core_plugins/kibana/public/dashboard/top_nav/add_panel.js

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import './add_panel.less';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { toastNotifications } from 'ui/notify';
@@ -128,7 +127,6 @@ export class DashboardAddPanel extends React.Component {
     return (
       <EuiFlyout
         ownFocus
-        className="addPanelFlyout"
         onClose={this.props.onClose}
         size="s"
         data-test-subj="dashboardAddPanel"

src/core_plugins/kibana/public/dashboard/top_nav/add_panel.less

@@ -1,3 +0,0 @@
-.addPanelFlyout {
-  width: 33vw;
-}

src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.js

@@ -108,7 +108,7 @@ export class DashboardCloneModal extends React.Component {
       <EuiOverlayMask>
         <EuiModal
           data-test-subj="dashboardCloneModal"
-          className="dashboardModal"
+          className="dshCloneModal"
           onClose={this.props.onClose}
         >
           <EuiModalHeader>

src/core_plugins/kibana/public/dashboard/top_nav/save_modal.js

@@ -157,7 +157,7 @@ export class DashboardSaveModal extends React.Component {
       <EuiOverlayMask>
         <EuiModal
           data-test-subj="dashboardSaveModal"
-          className="dashboardModal"
+          className="dshSaveModal"
           onClose={this.props.onClose}
         >
           <EuiModalHeader>

src/core_plugins/kibana/public/dashboard/viewport/_dashboard_viewport.scss

@@ -0,0 +1,9 @@
+.dshDashboardViewport {
+  width: 100%;
+  background-color: $euiColorEmptyShade;
+}
+
+.dshDashboardViewport-withMargins {
+  width: 100%;
+  background-color: $euiColorLightestShade;
+}

src/core_plugins/kibana/public/dashboard/viewport/_index.scss

@@ -0,0 +1 @@
+@import './dashboard_viewport';

src/core_plugins/kibana/public/dashboard/viewport/dashboard_viewport.js

@@ -38,7 +38,7 @@ export function DashboardViewport({
       data-shared-items-container
       data-title={title}
       data-description={description}
-      className={useMargins ? 'dashboard-viewport-with-margins' : 'dashboard-viewport'}
+      className={useMargins ? 'dshDashboardViewport-withMargins' : 'dshDashboardViewport'}
     >
       { isFullScreenMode && <ExitFullScreenButton onExitFullScreenMode={onExitFullScreenMode} /> }
       <DashboardGrid

src/core_plugins/kibana/public/index.scss

@@ -1,5 +1,7 @@
-// Import the EUI global scope so we can use EUI constants
-@import '../../../../src/ui/public/styles/_styling_constants';
+@import '../../../../src/ui/public/styles/styling_constants';
+
+// Dashboard styles
+@import './dashboard/index';
 
 // Discover styles
-@import 'discover/index';
+@import 'discover/index';

src/core_plugins/metrics/public/less/misc.less

@@ -79,16 +79,15 @@
   }
 }
 
+/**
+  * 1. The absolute positioning broke reports and was fighting with display: flex,
+  *    setting the flex-basis to 100% fixed the issue the abs positioning was trying to fix
+  */
 .dashboard__visualization {
   display: flex;
   flex-direction: column;
-  flex: 1 0 auto;
+  flex: 1 1 100%; /* 1 */
   padding: 10px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
 }
 
 .dashboard__visualization-title {

src/core_plugins/tile_map/public/styles/_tilemap.less

@@ -200,3 +200,95 @@ img.leaflet-tile {
 img.leaflet-tile.filters-off {
   filter: none;
 }
+
+// SASSTODO: Make sure these colors convert to theme variables
+.tab-dashboard.theme-dark {
+  @tilemap-border:                              @gray13;
+  @tilemap-legend-base-bg:                      @gray3;
+  @tilemap-legend-bg:                           fade(@tilemap-legend-base-bg, 100%);
+  @tilemap-color:                               @gray12;
+  @tilemap-legend-i-border:                     @gray9;
+  @tilemap-legend-i-bg:                         @gray10;
+  @tilemap-info-base-bg:                        @white;
+  @tilemap-info-bg:                             fade(@tilemap-info-base-bg, 92%);
+  @tilemap-info-header-color:                   @gray4;
+  @tilemap-leaflet-control-bg:                  @white;
+  @tilemap-leaflet-control-outline:             @black;
+  @tilemap-leaflet-control-color:               @black;
+  @tilemap-leaflet-control-draw-action-bg:      @gray11;
+  @tilemap-leaflet-container-bg:                @body-bg;
+  @tilemap-leaflet-popup-border:                @gray9;
+  @tilemap-leaflet-footer-bg:                   fade(@gray3, 80%);
+  @tilemap-leaflet-footer-color:                @gray12;
+  @tilemap-filter:                              invert(1) brightness(1.75) grayscale(1) contrast(1);
+
+  .tilemap {
+    border-color: @tilemap-border;
+  }
+
+  .tilemap-legend {
+    background: @tilemap-legend-base-bg;
+    background: @tilemap-legend-bg;
+    color: @tilemap-color;
+  }
+
+  .tilemap-legend i {
+    border-color: @tilemap-legend-i-border;
+    background: @tilemap-legend-i-bg;
+  }
+
+  .tilemap-info {
+    background: @tilemap-info-base-bg;
+    background: fade(@tilemap-info-bg, 92%);
+  }
+
+  .tilemap-info h2 {
+    color: @tilemap-info-header-color;
+  }
+
+  .leaflet-control-fit {
+    background: @tilemap-leaflet-control-bg;
+    outline: 1px @tilemap-leaflet-control-outline;
+  }
+
+  .leaflet-container {
+    background: @tilemap-leaflet-container-bg !important;
+  }
+
+  .leaflet-popup-content-wrapper {
+    background: fadeout(@gray4, 7%) !important;
+    color: @gray14 !important;
+  }
+
+  .leaflet-popup-content {
+    table {
+      thead tr {
+        border-bottom-color: @tilemap-leaflet-popup-border;
+      }
+
+      tbody tr {
+        border-top-color: @tilemap-leaflet-popup-border;
+      }
+    }
+  }
+
+  img.leaflet-tile {
+    filter: @tilemap-filter;
+  }
+
+  .leaflet-control-attribution {
+    background-color: @tilemap-leaflet-footer-bg !important;
+    color: @tilemap-leaflet-footer-color !important;
+  }
+
+  .leaflet-left {
+    .leaflet-control,
+    .leaflet-draw-actions {
+      a,
+      a:hover {
+        color: @white;
+        background-color: @gray7;
+      }
+    }
+  }
+}

src/dev/precommit_hook/casing_check_config.js

@@ -193,8 +193,6 @@ export const TEMPORARILY_IGNORED_PATHS = [
   'src/ui/public/styles/bootstrap/mixins/vendor-prefixes.less',
   'src/ui/public/styles/bootstrap/progress-bars.less',
   'src/ui/public/styles/bootstrap/responsive-utilities.less',
-  'src/ui/public/styles/dark-theme.less',
-  'src/ui/public/styles/dark-variables.less',
   'src/ui/public/styles/fonts/glyphicons-halflings-regular.eot',
   'src/ui/public/styles/fonts/glyphicons-halflings-regular.svg',
   'src/ui/public/styles/fonts/glyphicons-halflings-regular.ttf',

src/ui/public/agg_table/agg_table.less

@@ -41,3 +41,16 @@ kbn-agg-table-group {
       padding: 0;
     }
   }
+
+// SASSTODO: Make sure these colors convert to theme variables
+.tab-dashboard.theme-dark {
+  .agg-table-paginated {
+    tr:hover td {
+      background-color: lighten(@gray6, 4%);
+
+      .table-cell-filter {
+        background-color: lighten(@gray6, 4%);
+      }
+    }
+  }
+}

src/ui/public/filter_bar/filter_bar.less

@@ -211,3 +211,49 @@ filter-bar {
     font-size: 0.9em;
     background: @filter-bar-bar-condensed-bg;
   }
+
+// SASSTODO: Make sure these colors convert to theme variables
+.tab-dashboard.theme-dark {
+  @filter-bar-confirm-bg:                       @gray3;
+  @filter-bar-confirm-filter-color:             @gray3;
+  @filter-bar-confirm-border:                   @black;
+  @filter-bar-confirm-filter-bg:                @gray12;
+  @filter-bar-bar-bg:                           @gray3;
+  @filter-bar-bar-border:                       @black;
+  @filter-bar-bar-condensed-bg:                 darken(@filter-bar-bar-bg, 5%);
+  @filter-bar-bar-filter-bg:                    desaturate(@brand-success, 30%);
+  @filter-bar-bar-filter-color:                 @white;
+  @filter-bar-bar-filter-negate-bg:             desaturate(@brand-success, 30%);
+
+  .filter-bar-confirm {
+    background: @filter-bar-confirm-bg;
+    border-bottom-color: @filter-bar-confirm-border;
+
+    .filter {
+      background-color: @filter-bar-confirm-filter-bg;
+      color: @filter-bar-confirm-filter-color;
+    }
+  }
+
+  .filter-bar {
+    background: @filter-bar-bar-bg;
+    border-bottom-color: @filter-bar-bar-border;
+
+    .filter {
+      background-color: @filter-bar-bar-filter-bg;
+      color: @filter-bar-bar-filter-color;
+
+      &.negate {
+        background-color: @filter-bar-bar-filter-negate-bg;
+      }
+
+      a {
+        color: @filter-bar-bar-filter-color;
+      }
+    }
+  }
+
+    .filter-bar-condensed {
+      background: @filter-bar-bar-condensed-bg;
+    }
+}

src/ui/public/markdown/github_markdown.less

@@ -553,3 +553,42 @@
   margin: 0 0.2em 0.25em -1.6em;
   vertical-align: middle;
 }
+
+// SASSTODO: Make sure these colors convert to theme variables
+.theme-dark {
+  .markdown-body {
+    color: #cecece;
+  }
+
+  .markdown-body code {
+    color: #ffffff;
+    background-color: #5f5f5f;
+  }
+
+  .markdown-body pre {
+    background-color: #5f5f5f;
+    border: none;
+  }
+
+  .markdown-body table {
+    border-left: 1px solid @gray6;
+  }
+
+  .markdown-body table th,
+  .markdown-body table td {
+    border-top: 1px solid @gray6;
+    border-bottom: 1px solid @gray6;
+
+    &:last-child {
+      border-right: 1px solid @gray6;
+    }
+  }
+
+  .markdown-body table tr {
+    border-top: 1px solid @gray6;
+  }
+
+  .markdown-body blockquote {
+    color: #8d8d8d;
+  }
+}

src/ui/public/styles/_styling_constants.scss

@@ -4,3 +4,10 @@
 @import '../../../../node_modules/@elastic/eui/src/global_styling/functions/index';
 @import '../../../../node_modules/@elastic/eui/src/global_styling/variables/index';
 @import '../../../../node_modules/@elastic/eui/src/global_styling/mixins/index';
+
+// EUI TODO: Add this
+@mixin truncate($style: ellipsis) {
+  white-space: nowrap;
+  text-overflow: $style;
+  overflow: hidden;
+}

src/ui/public/styles/base.less

@@ -147,6 +147,14 @@ notifications {
   }
 }
 
+// SASSTODO: Make sure these colors convert to theme variables
+.tab-dashboard.theme-dark {
+  .kibana-nav-actions .active {
+    background-color: @gray3;
+    color: @white;
+  }
+}
+
 //== Nav tweaks
 .nav-condensed > li > a {
   padding-top: 2px;

src/ui/public/styles/config.less

@@ -11,3 +11,14 @@
     padding: 10px;
   }
 }
+
+// SASSTODO: Make sure these colors convert to theme variables
+.tab-dashboard.theme-dark {
+  .config {
+    border-bottom: 0 none transparent;
+
+    .container-fluid {
+      background-color: @gray3;
+    }
+  }
+}

src/ui/public/styles/dark-theme.less

@@ -1,667 +0,0 @@
-@import "~ui/styles/dark-variables.less";
-@import "~ui/styles/bootstrap/mixins.less";
-
-.tab-dashboard.theme-dark {
-  color: @text-color;
-  background-color: @dashboard-bg;
-
-// /src/ui/public/styles/bootstrap/scaffolding.less
-  a {
-    color: @link-color;
-
-    &:hover,
-    &:focus {
-      color: @link-hover-color;
-    }
-  }
-
-  .exitFullScreenMode {
-    background-color: @globalColorDarkestGray;
-  }
-
-// /src/ui/public/styles/bootstrap/forms.less
-  .form-control {
-    color: @input-color;
-    background-color: @input-bg;
-    border-color: @input-border;
-    &[disabled],
-    &[readonly],
-    fieldset[disabled] & {
-      background-color: @input-bg-disabled;
-    }
-  }
-
-
-// /src/ui/public/styles/bootstrap/panels.less
-  .panel {
-    background-color: @panel-bg;
-  }
-
-
-// /src/ui/public/styles/bootstrap/tables.less
-  .table {
-    // Cells
-    > thead,
-    > tbody,
-    > tfoot {
-      > tr {
-        > th,
-        > td {
-          border-top-color: @table-border-color;
-        }
-      }
-    }
-    // Bottom align for column headings
-    > thead > tr > th {
-      border-bottom-color: @table-border-color;
-    }
-    // Account for multiple tbody instances
-    > tbody + tbody {
-      border-top-color: @table-border-color;
-    }
-
-    // Nesting
-    .table {
-      background-color: @table-nested-bg;
-    }
-  }
-
-  table {
-    th {
-      i.fa-sort {
-        color: @table-sort-color;
-      }
-
-      button.fa-sort-asc,
-      button.fa-sort-down,
-      i.fa-sort-asc,
-      i.fa-sort-down {
-        color: @table-sort-asc-color;
-      }
-
-      button.fa-sort-desc,
-      button.fa-sort-up,
-      i.fa-sort-desc,
-      i.fa-sort-up {
-        color: @table-sort-desc-color;
-      }
-    }
-  }
-
-
-// /src/ui/public/styles/bootstrap/list-group.less
-  .list-group-item {
-    background-color: @list-group-bg;
-    border: 1px solid @gray7;
-    &:nth-child(even) {
-      background-color: @gray4;
-    }
-  }
-
-  .list-group-item--noBorder {
-    border-top: 0;
-  }
-
-  a.list-group-item,
-  button.list-group-item {
-    color: @list-group-link-color;
-
-    .list-group-item-heading {
-      color: @list-group-link-heading-color;
-    }
-
-    // Hover state
-    &:hover,
-    &:focus {
-      color: @list-group-link-hover-color;
-      background-color: @list-group-hover-bg;
-    }
-  }
-  .panel {
-    > .panel-body + .table,
-    > .panel-body + .table-responsive,
-    > .table + .panel-body,
-    > .table-responsive + .panel-body {
-      border-top-color:@table-border-color;
-    }
-  }
-
-  .panel-group {
-    .panel-heading {
-      + .panel-collapse > .panel-body,
-      + .panel-collapse > .list-group {
-        border-top-color: @panel-inner-border;
-      }
-    }
-
-    .panel-footer {
-      border-top: 0;
-      + .panel-collapse .panel-body {
-        border-bottom-color: @panel-inner-border;
-      }
-    }
-  }
-
-  .panel--edit-mode {
-    border-color: #222;
-  }
-
-  .panel--edit-mode:hover {
-    border-color: @globalColorBlue;
-  }
-
-  .panel-default {
-    & > .panel-heading {
-      color: @panel-default-text;
-      background-color: @panel-default-heading-bg;
-      border-color: @panel-default-border;
-
-      + .panel-collapse > .panel-body {
-        border-top-color: @panel-default-border;
-      }
-      .badge {
-        color: @panel-default-heading-bg;
-        background-color: @panel-default-text;
-      }
-    }
-    & > .panel-footer {
-      + .panel-collapse > .panel-body {
-        border-bottom-color: @panel-default-border;
-      }
-    }
-  }
-
-
-// /src/ui/public/styles/bootstrap/navs.less
-  .nav {
-    > li {
-      > a {
-        &:hover,
-        &:focus {
-          background-color: @nav-link-hover-bg;
-        }
-      }
-    }
-  }
-
-
-// /src/ui/public/styles/bootstrap/navs.less
-  .nav-tabs {
-    border-bottom: 1px solid @gray4;
-    > li {
-      margin-bottom: -2px;
-      > a {
-        &:hover {
-          border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
-        }
-      }
-
-      &.active > a {
-        &,
-        &:hover,
-        &:focus {
-          color: @white;
-          background-color: @gray4;
-          border: 0 none transparent;
-        }
-      }
-    }
-  }
-
-
-// /src/ui/public/styles/navbar.less
-  navbar {
-    color: @navbar-default-color;
-    background-color: @navbar-default-bg;
-    border-color: @navbar-default-border;
-    button {
-      color: @white;
-      background-color: transparent;
-    }
-  }
-
-
-// /src/ui/public/styles/base.less
-  saved-object-finder {
-    .list-group-item {
-      a {
-        i {
-          color: @saved-object-finder-icon-color !important;
-        }
-
-        color: @saved-object-finder-link-color !important;
-      }
-    }
-  }
-
-  saved-object-finder, paginated-selectable-list {
-    ul.li-striped {
-      li {
-        border: none;
-      }
-    }
-  }
-
-  .cell-hover {
-    background-color: @table-cell-hover-bg;
-
-    .table-cell-filter {
-      background-color: @table-cell-hover-bg;
-    }
-  }
-
-
-// /src/ui/public/styles/spinner.less
-  .spinner > div {
-    background-color: @spinner-bg;
-  }
-
-
-// /src/ui/public/agg_table/agg_table.less
-  .agg-table-paginated {
-    tr:hover td {
-      background-color: @table-row-hover-bg;
-
-      .table-cell-filter {
-        background-color: @table-row-hover-bg;
-      }
-    }
-  }
-
-  .discover-table-row {
-    .docTableRowFilterButton {
-      background-color: @panel-bg;
-    }
-  }
-
-// /src/ui/public/vislib/styles/_svg.less
-  .axis {
-    line, path {
-      stroke: @svg-axis-color;
-    }
-  }
-
-  .tick text {
-    fill: @svg-tick-text-color;
-  }
-
-  .chart-label {
-    fill: @svg-tick-text-color;
-  }
-
-  .brush .extent {
-    stroke: @svg-brush-color;
-  }
-
-  .endzone {
-    fill: @svg-endzone-bg;
-    //opacity: 1;
-  }
-
-
-// /src/ui/public/vislib/styles/_legend.less
-  .legend {
-    background-color: @dashboard-panel-bg;
-  }
-
-  .legend-col-wrapper {
-
-    .legend-ul {
-      border-left-color: @sidebar-bg;
-      color: @legend-item-color;
-    }
-
-  }
-
-  .legend-value-title {
-    padding: 3px;
-
-    &:hover {
-      background-color: @sidebar-hover-bg;
-    }
-  }
-
-  .legend-value-full {
-    background-color: @gray3;
-  }
-
-  .legend-value-details {
-    border-bottom: 1px solid @sidebar-bg;
-  }
-
-
-
-// /src/ui/public/vislib/styles/_layout.less
-  .y-axis-title text, .x-axis-title text {
-    fill: @vis-axis-title-color;
-  }
-
-  .chart-title text {
-    fill: @vis-chart-title-color;
-  }
-
-
-// /src/ui/public/vislib/styles/_tilemap.less
-  .tilemap {
-    border-color: @tilemap-border;
-  }
-
-  .tilemap-legend {
-    background: @tilemap-legend-base-bg;
-    background: @tilemap-legend-bg;
-    color: @tilemap-color;
-  }
-
-  .tilemap-legend i {
-    border-color: @tilemap-legend-i-border;
-    background: @tilemap-legend-i-bg;
-  }
-
-  .tilemap-info {
-    background: @tilemap-info-base-bg;
-    background: fade(@tilemap-info-bg, 92%);
-  }
-
-  .tilemap-info h2 {
-    color: @tilemap-info-header-color;
-  }
-
-  .leaflet-control-fit {
-    background: @tilemap-leaflet-control-bg;
-    outline: 1px @tilemap-leaflet-control-outline;
-  }
-
-  .leaflet-container {
-    background: @tilemap-leaflet-container-bg !important;
-  }
-
-  .leaflet-popup-content-wrapper {
-    background: @tooltip-bg !important;
-    color: @tooltip-color !important;
-  }
-
-  .leaflet-popup-content {
-    table {
-      thead tr {
-        border-bottom-color: @tilemap-leaflet-popup-border;
-      }
-
-      tbody tr {
-        border-top-color: @tilemap-leaflet-popup-border;
-      }
-    }
-  }
-
-  img.leaflet-tile {
-    filter: @tilemap-filter;
-  }
-
-  .leaflet-control-attribution {
-    background-color: @tilemap-leaflet-footer-bg !important;
-    color: @tilemap-leaflet-footer-color !important;
-  }
-
-  .leaflet-left {
-    .leaflet-control,
-    .leaflet-draw-actions {
-      a,
-      a:hover {
-        color: @dark-button-font;
-        background-color: @dark-button-bg;
-      }
-    }
-  }
-
-
-// /src/ui/public/filter_bar/filter_bar.less
-  .filter-bar-confirm {
-    background: @filter-bar-confirm-bg;
-    border-bottom-color: @filter-bar-confirm-border;
-
-    .filter {
-      background-color: @filter-bar-confirm-filter-bg;
-      color: @filter-bar-confirm-filter-color;
-    }
-  }
-
-  .filter-bar {
-    background: @filter-bar-bar-bg;
-    border-bottom-color: @filter-bar-bar-border;
-
-    .filter {
-      background-color: @filter-bar-bar-filter-bg;
-      color: @filter-bar-bar-filter-color;
-
-      &.negate {
-        background-color: @filter-bar-bar-filter-negate-bg;
-      }
-
-      a {
-        color: @filter-bar-bar-filter-color;
-      }
-    }
-  }
-
-    .filter-bar-condensed {
-      background: @filter-bar-bar-condensed-bg;
-    }
-
-
-// /src/ui/public/styles/config.less
-  .config {
-    border-bottom: 0 none transparent;
-
-    .container-fluid {
-      background-color: @config-bg;
-    }
-  }
-
-
-// /src/ui/public/styles/list-group-menu.less
-  .list-group-menu {
-    &.select-mode a{
-       color: @list-group-menu-item-select-color;
-    }
-
-    .list-group-menu-item {
-      color: @list-group-menu-item-color;
-
-      &.active {
-        background-color: @list-group-menu-item-active-bg;
-      }
-      &:hover {
-        background-color: @gray2;
-      }
-      li {
-        color: @list-group-menu-item-color;
-      }
-    }
-  }
-
-
-// /src/ui/public/styles/input.less
-  select {
-    color: @input-color;
-    background-color: @input-bg;
-  }
-
-
-// /src/ui/public/styles/pagination.less
-  paginate {
-    paginate-controls {
-      .pagination-other-pages-list {
-        > li {
-          a {
-            background-color: @dark-button-bg;
-            color: @white;
-          }
-          &.active a {
-            color: @paginate-page-link-active-color;
-          }
-        }
-      }
-    }
-  }
-
-
-// /src/core_plugins/kibana/public/dashboard/styles/main.less
-  .start-screen {
-    background-color: @dashboard-bg-with-margins;
-  }
-
-  .react-grid-layout {
-    background-color: @dashboard-bg;
-  }
-
-  .dashboard-panel {
-    background: @dashboard-panel-bg;
-    color: @dashboard-panel-color;
-
-    .panel {
-
-      .panel-heading {
-        a {
-          color: @dashboard-panel-heading-link-color;
-          &:hover {
-            color: @dashboard-panel-heading-link-hover-color;
-          }
-        }
-        span.panel-title {
-          color: @dashboard-panel-heading-link-color;
-        }
-        i {
-          color: @dashboard-panel-heading-link-color;
-          opacity: 1;
-        }
-      }
-
-
-      .load-error {
-        .fa-exclamation-triangle {
-          color: @dashboard-panel-load-error-color;
-        }
-      }
-    }
-  }
-
-  saved-object-finder .form-group span {
-    background-color: @input-bg;
-    color: @dark-button-font;
-  }
-  saved-object-finder .paginate-heading {
-    color: @text-color;
-  }
-  .kibana-nav-actions .active {
-    background-color: @config-bg;
-    color: @dark-button-font;
-  }
-
-  .truncate-by-height:before {
-    background: linear-gradient(to bottom, transparent 0%, @dashboard-bg 100%) !important;
-  }
-
-  kbn-table, .kbn-table, tbody[kbn-rows] {
-    dl.source {
-      dt {
-        background: #5f5f5f;
-        color: #ffffff;
-      }
-    }
-  }
-
-  .slice {
-    stroke: @panel-bg;
-  }
-}
-
-// react-input-range
-.theme-dark {
-  .input-range__track {
-    background-color: #cecece;
-  }
-
-  .input-range__slider {
-    background: #444444;
-    border: 1px solid #444444;
-  }
-
-  .input-range__track--active {
-    background: #444444;
-  }
-
-  .input-range__label {
-    color: #cecece;
-  }
-}
-
-.theme-dark {
-  .markdown-body {
-    color: @text-color;
-  }
-
-  .markdown-body code {
-    color: #ffffff;
-    background-color: #5f5f5f;
-  }
-
-  .markdown-body pre {
-    background-color: #5f5f5f;
-    border: none;
-  }
-
-  .markdown-body table {
-    border-left: 1px solid @table-border-color;
-  }
-
-  .markdown-body table th,
-  .markdown-body table td {
-    border-top: 1px solid @table-border-color;
-    border-bottom: 1px solid @table-border-color;
-
-    &:last-child {
-      border-right: 1px solid @table-border-color;
-    }
-  }
-
-  .markdown-body table tr {
-    border-top: 1px solid @table-border-color;
-  }
-
-  .markdown-body blockquote {
-    color: @dimmed-text-color;
-  }
-
-  /**
- * The dashboard background color is the same as the panel color by default. When the user wants to use margins, we
- * need to give a different background color so the panels are distinguishable from the background.
- */
-  .layout-with-margins {
-    background-color: @dashboard-bg-with-margins;
-    .panel-default {
-      & > .panel-heading {
-        background-color: @panel-bg-with-margins;
-      }
-    }
-    .panel-content {
-      background-color: @panel-bg-with-margins;
-    }
-    .panel {
-      background-color: @panel-bg-with-margins;
-      border: 1px solid #444444;
-    }
-  }
-  .dashboard-viewport {
-    background-color: @dashboard-bg;
-  }
-  .dashboard-viewport-with-margins {
-    background-color: @dashboard-bg-with-margins;
-  }
-
-  .dashboard-container-with-margins {
-    background-color: @dashboard-bg-with-margins;
-  }
-
-  .react-grid-item > .react-resizable-handle {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpolygon fill='%23EFEEEE' points='6 6 0 6 0 4.2 4 4.2 4.2 4.2 4.2 0 6 0' opacity='.302'/%3E%3C/svg%3E%0A");
-  }
-}

src/ui/public/styles/dark-variables.less

@@ -1,153 +0,0 @@
-@import "~ui/styles/variables/colors.less";
-
-@brand-primary:                               @gray14;
-@brand-info:                                  #6482e5;
-
-@body-bg:                                     @gray3;
-@text-color:                                  #cecece;
-@dimmed-text-color:                           #8d8d8d;
-
-@link-color:                                  #b7e2ea;
-@link-hover-color:                            lighten(@link-color, 10%);
-
-@btn-default-color:                           @white;
-@btn-default-bg:                              @gray7;
-@btn-default-border:                          @btn-default-bg;
-
-@btn-primary-color:                           @white;
-@btn-primary-bg:                              @gray7;
-@btn-primary-border:                          @btn-primary-bg;
-
-@btn-success-bg:                              @brand-success;
-@btn-danger-bg:                               @brand-danger;
-
-@input-bg:                                    @gray4;
-@input-bg-disabled:                           @gray3;
-
-@input-color:                                 @text-color;
-@input-border:                                @gray6;
-
-@well-bg:                                     @gray4;
-
-@action-add:                                  desaturate(@btn-success-bg, 30%);
-@action-remove:                               desaturate(@btn-danger-bg, 30%);
-
-
-@table-border-color:                          #5c5c5c;
-@table-cell-hover-bg:                         transparent;
-@table-cell-hover-hover-bg:                   @gray6;
-@table-row-hover-bg:                          lighten(@gray6, 4%);
-@table-nested-bg:                             transparent;
-
-@table-sort-color:                            @gray6;
-@table-sort-asc-color:                        @gray11;
-@table-sort-desc-color:                       @gray11;
-
-
-@nav-link-hover-bg:                           @gray6;
-@nav-tabs-active-link-hover-bg:               @navbar-default-bg;
-
-@nav-tabs-border-color:                       @gray6;
-@nav-tabs-link-hover-border-color:            @gray7;
-@nav-tabs-active-link-hover-border-color:     @gray7;
-
-@nav-tabs-active-link-hover-color:            @brand-primary;
-
-@paginate-page-link-active-color:             @gray9;
-
-@dashboard-bg:                                #272727;
-@dashboard-bg-with-margins:                   @dashboard-bg;
-@panel-bg-with-margins:                       #222;
-@panel-bg:                                    @dashboard-bg;
-@panel-inner-border:                          @dashboard-bg;
-
-@panel-default-text:                          @brand-primary;
-@panel-default-border:                        #8d8d8d;
-@panel-default-heading-bg:                    @dashboard-bg;
-
-@dashboard-panel-bg:                          @dashboard-bg;
-@dashboard-panel-color:                       @text-color;
-@dashboard-panel-heading-link-color:          #a6a6a6;
-@dashboard-panel-heading-link-hover-color:    #a6a6a6;
-@dashboard-panel-load-error-color:            @btn-danger-bg;
-
-@collapser-bg:                                @panel-bg;
-@collapser-border:                            #5c5c5c;
-@collapser-color:                             @gray8;
-@collapser-hover-bg:                          @gray6;
-@collapser-hover-color:                       @gray3;
-
-@svg-axis-color:                              @gray8;
-@svg-tick-text-color:                         @gray10;
-@svg-brush-color:                             @white;
-@svg-endzone-bg:                              @white;
-@vis-axis-title-color:                        @gray10;
-@vis-chart-title-color:                       @gray10;
-
-@tilemap-border:                              @gray13;
-@tilemap-legend-base-bg:                      @gray3;
-@tilemap-legend-bg:                           fade(@tilemap-legend-base-bg, 100%);
-@tilemap-color:                               @gray12;
-@tilemap-legend-i-border:                     @gray9;
-@tilemap-legend-i-bg:                         @gray10;
-@tilemap-info-base-bg:                        @white;
-@tilemap-info-bg:                             fade(@tilemap-info-base-bg, 92%);
-@tilemap-info-header-color:                   @gray4;
-@tilemap-leaflet-control-bg:                  @white;
-@tilemap-leaflet-control-outline:             @black;
-@tilemap-leaflet-control-color:               @black;
-@tilemap-leaflet-control-draw-action-bg:      @gray11;
-@tilemap-leaflet-container-bg:                @body-bg;
-@tilemap-leaflet-popup-border:                @gray9;
-@tilemap-leaflet-footer-bg:                   fade(@gray3, 80%);
-@tilemap-leaflet-footer-color:                @gray12;
-@tilemap-filter:                              invert(1) brightness(1.75) grayscale(1) contrast(1);
-
-@tooltip-bg:                                  fadeout(@gray4, 7%);
-@tooltip-color:                               @gray14;
-
-@filter-bar-confirm-bg:                       @gray3;
-@filter-bar-confirm-filter-color:             @gray3;
-@filter-bar-confirm-border:                   @black;
-@filter-bar-confirm-filter-bg:                @gray12;
-@filter-bar-bar-bg:                           @gray3;
-@filter-bar-bar-border:                       @black;
-@filter-bar-bar-condensed-bg:                 darken(@filter-bar-bar-bg, 5%);
-@filter-bar-bar-filter-bg:                    @action-add;
-@filter-bar-bar-filter-color:                 @white;
-@filter-bar-bar-filter-negate-bg:             @action-remove;
-
-@legend-item-color:                           @gray10;
-
-@config-border:                               @gray4;
-@config-bg:                                   @body-bg;
-
-@saved-object-finder-link-color:              @text-color;
-@saved-object-finder-icon-color:              darken(@saved-object-finder-link-color, 10%);
-
-@list-group-bg:                               @gray3;
-@list-group-border:                           @gray7;
-@list-group-hover-bg:                         @gray14;
-@list-group-link-color:                       @gray5;
-@list-group-link-hover-color:                 @list-group-link-color;
-@list-group-link-heading-color:               @gray3;
-@list-group-menu-item-color:                  @text-color;
-@list-group-menu-item-select-color:           @link-color;
-@list-group-menu-item-active-bg:              @well-bg;
-@list-group-menu-item-hover-bg:               @well-bg;
-
-@component-active-color:                      @gray5;
-@component-active-bg:                         @gray9;
-
-@navbar-default-color:                        @white;
-@navbar-default-bg:                           #454545;
-@navbar-default-border:                       darken(@navbar-default-bg, 10%);
-
-@spinner-bg:                                  @white;
-
-@sidebar-bg:                                  @btn-default-bg;
-@sidebar-hover-bg:                            darken(@btn-default-bg, 5%);
-@sidebar-hover-color:                         @text-color;
-
-@dark-button-bg:                              @gray7;
-@dark-button-font:                            @white;

src/ui/public/styles/input.less

@@ -13,3 +13,10 @@ select {
   background-color: @input-bg;
 }
 
+// SASSTODO: Make sure these colors convert to theme variables
+.tab-dashboard.theme-dark {
+  select {
+    color: #cecece;
+    background-color: @gray4;
+  }
+}

src/ui/public/styles/list-group-menu.less

@@ -23,3 +23,31 @@
     }
   }
 }
+
+// SASSTODO: Make sure these colors convert to theme variables
+.tab-dashboard.theme-dark {
+  @list-group-menu-item-color:                  #cecece;
+  @list-group-menu-item-select-color:           #b7e2ea;
+  @list-group-menu-item-active-bg:              @gray4;
+  @list-group-menu-item-hover-bg:               @gray4;
+
+  .list-group-menu {
+    &.select-mode a{
+        color: @list-group-menu-item-select-color;
+    }
+
+    .list-group-menu-item {
+      color: @list-group-menu-item-color;
+
+      &.active {
+        background-color: @list-group-menu-item-active-bg;
+      }
+      &:hover {
+        background-color: @gray2;
+      }
+      li {
+        color: @list-group-menu-item-color;
+      }
+    }
+  }
+}

src/ui/public/styles/navbar.less

@@ -98,3 +98,16 @@ navbar {
     }
   }
 }
+
+// SASSTODO: Make sure these colors convert to theme variables
+.tab-dashboard.theme-dark {
+  navbar {
+    color: @white;
+    background-color: #454545;
+    border-color: darken(#454545, 10%);
+    button {
+      color: @white;
+      background-color: transparent;
+    }
+  }
+}

src/ui/public/styles/pagination.less

@@ -57,3 +57,22 @@ paginate {
     }
   }
 }
+
+// SASSTODO: Make sure these colors convert to theme variables
+.tab-dashboard.theme-dark {
+  paginate {
+    paginate-controls {
+      .pagination-other-pages-list {
+        > li {
+          a {
+            background-color: @gray7;
+            color: @white;
+          }
+          &.active a {
+            color: @gray9;
+          }
+        }
+      }
+    }
+  }
+}

src/ui/public/styles/spinner.less

@@ -4,3 +4,10 @@
   opacity: 0;
   transition-delay: 0.25s;
 }
+
+// SASSTODO: Make sure these colors convert to theme variables
+.tab-dashboard.theme-dark {
+  .spinner > div {
+    background-color: #fff;
+  }
+}

src/ui/public/styles/table.less

@@ -68,3 +68,19 @@ table {
     }
   }
 }
+
+// SASSTODO: Make sure these colors convert to theme variables
+.tab-dashboard.theme-dark {
+  kbn-table, .kbn-table, tbody[kbn-rows] {
+    dl.source {
+      dt {
+        background: #5f5f5f;
+        color: #ffffff;
+      }
+    }
+  }
+
+  .slice {
+    stroke: #272727;
+  }
+}

src/ui/public/vislib/styles/_layout.less

@@ -259,3 +259,14 @@
   font-size: 130%;
   font-weight: normal;
 }
+
+// SASSTODO: Make sure these colors convert to theme variables
+.tab-dashboard.theme-dark {
+  .y-axis-title text, .x-axis-title text {
+    fill: @gray10;
+  }
+
+  .chart-title text {
+    fill: @gray10;
+  }
+}

src/ui/public/vislib/styles/_legend.less

@@ -118,3 +118,35 @@ visualize-legend {
       font-size: 18px
     }
   }
+
+// SASSTODO: Make sure these colors convert to theme variables
+.tab-dashboard.theme-dark {
+  .legend {
+    background-color: #272727;
+  }
+
+  .legend-col-wrapper {
+
+    .legend-ul {
+      border-left-color: @gray7;
+      color: @gray10;
+    }
+
+  }
+
+  .legend-value-title {
+    padding: 3px;
+
+    &:hover {
+      background-color: darken(@gray7, 5%);
+    }
+  }
+
+  .legend-value-full {
+    background-color: @gray3;
+  }
+
+  .legend-value-details {
+    border-bottom: 1px solid @gray7;
+  }
+}

src/ui/public/vislib/styles/_svg.less

@@ -87,3 +87,28 @@
   fill: @svg-endzone-bg;
   pointer-events: none;
 }
+
+// SASSTODO: Make sure these colors convert to theme variables
+.tab-dashboard.theme-dark {
+  .axis {
+    line, path {
+      stroke: @gray8;
+    }
+  }
+
+  .tick text {
+    fill: @gray10;
+  }
+
+  .chart-label {
+    fill: @gray10;
+  }
+
+  .brush .extent {
+    stroke: @white;
+  }
+
+  .endzone {
+    fill: @white;
+  }
+}

src/ui/ui_apps/ui_app.js

@@ -121,7 +121,7 @@ export class UiApp {
     // replace the extension of relativePath to be .css
     relativePath = relativePath.slice(0, -path.extname(relativePath).length) + '.css';
 
-    return `plugins/${this.getId()}/${relativePath}`;
+    return `plugins/${plugin.id}/${relativePath}`;
   }
 
   _getPlugin() {

test/functional/page_objects/dashboard_page.js

@@ -403,7 +403,7 @@ export function DashboardPageProvider({ getService, getPageObjects }) {
     }
 
     async getCountOfDashboardsInListingTable() {
-      const dashboardTitles = await find.allByCssSelector('.dashboardLink');
+      const dashboardTitles = await find.allByCssSelector('[data-test-subj^="dashboardListingTitleLink"]');
       return dashboardTitles.length;
     }
 

x-pack/plugins/dashboard_mode/index.js

@@ -40,6 +40,7 @@ export function dashboardMode(kibana) {
         hidden: true,
         description: 'view dashboards',
         main: 'plugins/dashboard_mode/dashboard_viewer',
+        styleSheetPath: `${__dirname}/public/index.scss`,
         links: [
           {
             id: 'kibana:dashboard',

x-pack/plugins/dashboard_mode/public/index.scss

@@ -0,0 +1,3 @@
+@import '../../../../src/ui/public/styles/styling_constants';
+
+@import '../../../../src/core_plugins/kibana/public/dashboard/index';

x-pack/plugins/reporting/export_types/printable_pdf/server/lib/layouts/preserve_layout.css

@@ -107,7 +107,7 @@ visualize-app .vis-editor-canvas {
 *  Dashboard tweaks
 */
 
-.dashboard-panel .panel-heading .kuiMicroButtonGroup {
+.dshPanel__headerButtonGroup {
   /* hide the panel heading with the controls in it like expand */
   display: none !important;
 }

x-pack/plugins/reporting/export_types/printable_pdf/server/lib/layouts/print.css

@@ -106,7 +106,7 @@ visualize-app .vis-editor-canvas {
 *  Dashboard tweaks
 */
 
-.dashboard-panel .panel-heading {
+.dshPanel__header {
   /* hide the panel heading with the controls in it like expand */
   display: none !important;
 }