Dark mode fixes for Visualize charts, TSVB, and Timelion (elastic#30478)

* Some quicky changes

* Fixes dark vs light coloring for TSVB charts

* Fix coloring of tooltips and annotations for TSVB

* Fix up TSVB Markdown

No uses the same base styles as Visualize and Canvas

* More fiddling with spacing around filter bar

* Fixing dark mode grid and

removing hard-coded hex values where possible and adding an alpha channel to those that can’t

* more tweaks

* removing more `reversed` props

* Skip dark mode test for now

Since `.reverse` doesn’t exist unless bg is opposite of theme

* SASS linter enabled for TSVB

* Fix chrome path

* Enable sass-lint on Timelion

* Enable sass-lint on vislib

* Fix more spacing with query bar and enable sass-lint

* temp var name update

* A frew more files linted

* missed a few more hardcoded colors

* Addressed PR comments

* Changing #rrggbbaa to rgba()

For IE

.sass-lint.yml

@@ -1,5 +1,9 @@
 files:
   include:
+    - 'src/legacy/core_plugins/metrics/**/*.s+(a|c)ss'
+    - 'src/legacy/core_plugins/timelion/**/*.s+(a|c)ss'
+    - 'src/legacy/ui/public/query_bar/**/*.s+(a|c)ss'
+    - 'src/legacy/ui/public/vislib/**/*.s+(a|c)ss'
     - 'x-pack/plugins/rollup/**/*.s+(a|c)ss'
     - 'x-pack/plugins/security/**/*.s+(a|c)ss'
 rules:

src/legacy/core_plugins/console/public/_app.scss

@@ -48,7 +48,7 @@
 }
 
 .conApp__resizer {
-  @include kibana-resizer;
+  @include kbnResizer;
 }
 
 // SASSTODO: This component seems to not be used anymore?

src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js

@@ -34,9 +34,6 @@ export default function PointSeriesVisType(Private, i18n) {
         type: 'area',
         grid: {
           categoryLines: false,
-          style: {
-            color: '#eee'
-          }
         },
         categoryAxes: [
           {

src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.js

@@ -61,7 +61,7 @@ export default function GaugeVisType(Private, i18n) {
           scale: {
             show: true,
             labels: false,
-            color: '#333',
+            color: 'rgba(105,112,125,0.2)',
           },
           type: 'meter',
           style: {
@@ -70,7 +70,7 @@ export default function GaugeVisType(Private, i18n) {
             mask: false,
             bgMask: false,
             maskBars: 50,
-            bgFill: '#eee',
+            bgFill: 'rgba(105,112,125,0.2)',
             bgColor: true,
             subText: '',
             fontSize: 60,

src/legacy/core_plugins/kbn_vislib_vis_types/public/goal.js

@@ -60,12 +60,12 @@ export default function GoalVisType(Private, i18n) {
           scale: {
             show: false,
             labels: false,
-            color: '#333',
+            color: 'rgba(105,112,125,0.2)',
             width: 2
           },
           type: 'meter',
           style: {
-            bgFill: '#000',
+            bgFill: 'rgba(105,112,125,0.2)',
             bgColor: false,
             labelColor: false,
             subText: '',

src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.js

@@ -56,7 +56,7 @@ export default function HeatmapVisType(Private, i18n) {
             show: false,
             rotate: 0,
             overwriteColor: false,
-            color: '#555',
+            color: 'black',
           }
         }]
       },

src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js

@@ -36,9 +36,6 @@ export default function PointSeriesVisType(Private, i18n) {
         type: 'histogram',
         grid: {
           categoryLines: false,
-          style: {
-            color: '#eee'
-          }
         },
         categoryAxes: [
           {

src/legacy/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js

@@ -36,9 +36,6 @@ export default function PointSeriesVisType(Private, i18n) {
         type: 'histogram',
         grid: {
           categoryLines: false,
-          style: {
-            color: '#eee'
-          }
         },
         categoryAxes: [
           {

src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js

@@ -34,9 +34,6 @@ export default function PointSeriesVisType(Private, i18n) {
         type: 'line',
         grid: {
           categoryLines: false,
-          style: {
-            color: '#eee'
-          }
         },
         categoryAxes: [
           {

src/legacy/core_plugins/metrics/common/set_is_reversed.js

@@ -0,0 +1,71 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import color from 'color';
+import chrome from '../../../ui/public/chrome';
+const IS_DARK_THEME = chrome.getUiSettingsClient().get('theme:darkMode');
+
+/**
+ * Returns true if the color that is passed has low luminosity
+ */
+const isColorDark = (c) => {
+  return color(c).luminosity() < 0.45;
+};
+
+/**
+ * Checks to see if the `currentTheme` is dark in luminosity.
+ * Defaults to checking `theme:darkMode`.
+ */
+export const isThemeDark = (currentTheme) => {
+  let themeIsDark = currentTheme || IS_DARK_THEME;
+
+  // If passing a string, check the luminosity
+  if (typeof currentTheme === 'string') {
+    themeIsDark = isColorDark(currentTheme);
+  }
+
+  return themeIsDark;
+};
+
+/**
+ * Checks to find if the ultimate `backgroundColor` is dark.
+ * Defaults to returning if the `currentTheme` is dark.
+ */
+export const isBackgroundDark = (backgroundColor, currentTheme) => {
+  const themeIsDark = isThemeDark(currentTheme);
+
+  // If a background color doesn't exist or it inherits, pass back if it's a darktheme
+  if (backgroundColor === undefined || backgroundColor === 'inherit') {
+    return themeIsDark;
+  }
+
+  // Otherwise return if the background color has low luminosity
+  return isColorDark(backgroundColor);
+};
+
+/**
+ * Checks to see if `backgroundColor` is the the same lightness spectrum as `currentTheme`.
+ */
+export const isBackgroundInverted = (backgroundColor, currentTheme) => {
+  const backgroundIsDark = isBackgroundDark(backgroundColor, currentTheme);
+  const themeIsDark = isThemeDark(currentTheme);
+  return backgroundIsDark !== themeIsDark;
+};
+
+

src/legacy/core_plugins/metrics/public/_mixins.scss

@@ -1,14 +1,8 @@
 @import 'node_modules/@elastic/eui/src/components/form/variables';
 @import 'node_modules/@elastic/eui/src/components/form/mixins';
 
-@mixin tvbEditor__repeatingRow {
+@mixin tvbEditorRepeatingRow {
   background-color: $euiColorLightestShade;
   padding: $euiSizeS;
   margin-bottom: $euiSizeS;
 }
-
-// SASSTODO: These need to be converted to EUI,
-// but they have type errors
-@mixin tvbEditor__input {
-  @include euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: false);
-}

src/legacy/core_plugins/metrics/public/_ui_sortable.scss

@@ -11,7 +11,7 @@
 
     &:before,
     &:after {
-      content: " ";
+      content: '';
       display: table;
     }
 
@@ -29,7 +29,7 @@
 
       &.visible {
         display: block;
-        opacity: 0.5;
+        opacity: .5;
         z-index: -1;
       }
     }

src/legacy/core_plugins/metrics/public/_variables.scss

@@ -1,11 +1,11 @@
-$tvbLineColor: transparentize($euiColorFullShade,0.8);
-$tvbLineColorReversed: transparentize($euiColorEmptyShade,0.6);
+$tvbLineColor: transparentize($euiColorFullShade, .8);
+$tvbLineColorReversed: transparentize($euiColorEmptyShade, .6);
 
-$tvbTextColor: transparentize($euiColorFullShade,0.6);
-$tvbTextColorReversed: transparentize($euiColorEmptyShade,0.4);
+$tvbTextColor: transparentize($euiColorFullShade, .6);
+$tvbTextColorReversed: transparentize($euiColorEmptyShade, .4);
 
-$tvbValueColor: transparentize($euiColorFullShade,0.3);
-$tvbValueColorReversed: transparentize($euiColorEmptyShade,0.2);
+$tvbValueColor: transparentize($euiColorFullShade, .3);
+$tvbValueColorReversed: transparentize($euiColorEmptyShade, .2);
 
-$tvbHoverBackgroundColor: transparentize($euiColorFullShade,0.9);
-$tvbHoverBackgroundColorReversed: transparentize($euiColorEmptyShade,0.9);
+$tvbHoverBackgroundColor: transparentize($euiColorFullShade, .9);
+$tvbHoverBackgroundColorReversed: transparentize($euiColorEmptyShade, .9);

src/legacy/core_plugins/metrics/public/components/_color_picker.scss

@@ -10,6 +10,8 @@
 
 .tvbColorPicker__swatch-empty,
 .tvbColorPicker__swatch {
+  // SASSTODO: Replace with EUI component
+  // sass-lint:disable-block placeholder-in-extend
   @extend .euiColorPicker__swatch;
 }
 
@@ -37,8 +39,8 @@
 
 .tvbColorPicker__cover {
   position: fixed;
-  top: 0px;
-  right: 0px;
-  left: 0px;
-  bottom: 0px;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
 }

src/legacy/core_plugins/metrics/public/components/_color_rules.scss

@@ -1,3 +1,3 @@
 .tvbColorRules__rule {
-  @include tvbEditor__repeatingRow;
+  @include tvbEditorRepeatingRow;
 }