Eui/9.2.1 + better dark mode (elastic#32728)

Updates EUI and makes some dark mode adjustments.
snide · Mar 14, 2019 · 7a8a590 · 7a8a590
1 parent df37222
commit 7a8a590
Show file tree

Hide file tree

Showing 21 changed files with 435 additions and 439 deletions.
diff --git a/packages/kbn-ui-framework/dist/kui_dark.css b/packages/kbn-ui-framework/dist/kui_dark.css
diff --git a/packages/kbn-ui-framework/dist/kui_light.css b/packages/kbn-ui-framework/dist/kui_light.css
diff --git a/packages/kbn-ui-framework/src/global_styling/reset/_reset.scss b/packages/kbn-ui-framework/src/global_styling/reset/_reset.scss
@@ -1,9 +1,8 @@
 // We apply brute force focus states to anything not coming from Eui
 // which has focus states designed at the component level.
 :focus {
-  &:not([class^="eui"]),
-  {
-    @include focus;
+  &:not([class^="eui"]) {
+    @include euiFocusRing;
   }
 }
 

diff --git a/packages/kbn-ui-framework/src/kui_dark.scss b/packages/kbn-ui-framework/src/kui_dark.scss
@@ -1,6 +1,5 @@
 // EUI global scope is used for KUI variables till fully deprecated
-@import '../../../node_modules/@elastic/eui/src/themes/k6/k6_globals';
-@import '../../../node_modules/@elastic/eui/src/themes/k6/k6_colors_dark';
+@import '../../../node_modules/@elastic/eui/src/themes/eui/eui_colors_dark';
 @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';

diff --git a/packages/kbn-ui-framework/src/kui_light.scss b/packages/kbn-ui-framework/src/kui_light.scss
@@ -1,6 +1,5 @@
 // EUI global scope is used for KUI variables till fully deprecated
-@import '../../../node_modules/@elastic/eui/src/themes/k6/k6_globals';
-@import '../../../node_modules/@elastic/eui/src/themes/k6/k6_colors_light';
+@import '../../../node_modules/@elastic/eui/src/themes/eui/eui_colors_light';
 @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';

diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html b/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html
@@ -217,9 +217,8 @@
         i18n-id="kbnVislibVisTypes.controls.gaugeOptions.addRangeTitle"
         i18n-default-message="Add Range"
       ></div>
-      <div class="euiSpacer euiSpacer--s"></div>
       <div
-        class="text text-center text-info"
+        class="euiFormHelpText"
         i18n-id="kbnVislibVisTypes.controls.gaugeOptions.howToChangeColorsDescription"
         i18n-default-message="Note: colors can be changed in the legend"
       ></div>

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/clone_modal.test.js b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/clone_modal.test.js
@@ -54,14 +54,14 @@ test('renders DashboardCloneModal', () => {
 
 test('onClone', () => {
   createComponent();
-  findTestSubject(component, 'cloneConfirmButton', false).simulate('click');
+  findTestSubject(component, 'cloneConfirmButton').simulate('click');
   sinon.assert.calledWith(onClone, 'dash title');
   sinon.assert.notCalled(onClose);
 });
 
 test('onClose', () => {
   createComponent();
-  findTestSubject(component, 'cloneCancelButton', false).simulate('click');
+  findTestSubject(component, 'cloneCancelButton').simulate('click');
   sinon.assert.calledOnce(onClose);
   sinon.assert.notCalled(onClone);
 });
@@ -70,6 +70,6 @@ test('title', () => {
   createComponent();
   const event = { target: { value: 'a' } };
   component.find('input').simulate('change', event);
-  findTestSubject(component, 'cloneConfirmButton', false).simulate('click');
+  findTestSubject(component, 'cloneConfirmButton').simulate('click');
   sinon.assert.calledWith(onClone, 'a');
 });
diff --git a/...e_plugins/kibana/public/home/sample_data_resources/ecommerce/dashboard_dark.png b/...e_plugins/kibana/public/home/sample_data_resources/ecommerce/dashboard_dark.png
diff --git a/...ore_plugins/kibana/public/home/sample_data_resources/flights/dashboard_dark.png b/...ore_plugins/kibana/public/home/sample_data_resources/flights/dashboard_dark.png
diff --git a/...y/core_plugins/kibana/public/home/sample_data_resources/logs/dashboard_dark.png b/...y/core_plugins/kibana/public/home/sample_data_resources/logs/dashboard_dark.png
diff --git a/src/legacy/core_plugins/metrics/public/visualizations/components/_timeseries_chart.scss b/src/legacy/core_plugins/metrics/public/visualizations/components/_timeseries_chart.scss
@@ -1,3 +1,4 @@
+@import '@elastic/eui/src/components/tool_tip/variables';
 @import '@elastic/eui/src/components/tool_tip/mixins';
 
 .tvbVisTimeSeries {

diff --git a/src/legacy/server/sass/build.test.js b/src/legacy/server/sass/build.test.js
@@ -77,7 +77,7 @@ it('builds dark themed SASS', async () => {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  background: #191919 url(./images/img.png) url(ui/assets/favicons/favicon.ico); }
+  background: #232635 url(./images/img.png) url(ui/assets/favicons/favicon.ico); }
 /*# sourceMappingURL=... */"
 `);
 });
@@ -106,7 +106,7 @@ it('rewrites url imports', async () => {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  background: #191919 url(__REPLACE_WITH_PUBLIC_PATH__foo/bar/images/img.png) url(__REPLACE_WITH_PUBLIC_PATH__ui/favicons/favicon.ico); }
+  background: #232635 url(__REPLACE_WITH_PUBLIC_PATH__foo/bar/images/img.png) url(__REPLACE_WITH_PUBLIC_PATH__ui/favicons/favicon.ico); }
 /*# sourceMappingURL=... */"
 `);
 

diff --git a/src/legacy/ui/public/styles/bootstrap/_colors_dark.less b/src/legacy/ui/public/styles/bootstrap/_colors_dark.less
@@ -1,20 +1,20 @@
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.
-@white:                  #000;
-@blue:                   #4DA1C0;
+@white:                  #1D1E24;
+@blue:                   #1BA9F5;
 
-@brand-primary:          #F5F5F5;
-@brand-success:          #017D73;
+@brand-primary:          #F5F7FA;
+@brand-success:          #7DE2D1;
 @brand-info:             @blue;
-@brand-warning:          #C06C4C;
-@brand-danger:           #BF4D4D;
+@brand-warning:          #FF977A;
+@brand-danger:           #FF6666;
 
 @gray-base:              #FFF;
-@gray-darker:            #F5F5F5;
+@gray-darker:            #F5F7FA;
 @gray-dark:              #ababab;
-@gray5:                  #8A8A8A;
-@gray:                   #444;
-@gray-light:             darken(#444, 9%);
-@gray-lighter:           #333;
-@gray-lightest:          #242424;
+@gray5:                  #D4DAE5;
+@gray:                   #535966;
+@gray-light:             darken(#535966, 9%);
+@gray-lighter:           #343741;
+@gray-lightest:          #25262E;
diff --git a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss
@@ -1,3 +1,4 @@
+@import '@elastic/eui/src/components/tool_tip/variables';
 @import '@elastic/eui/src/components/tool_tip/mixins';
 
 .visTooltip,

diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss
@@ -30,8 +30,8 @@
 .visEditorSidebar__indexPattern {
   font-weight: $euiFontWeightBold;
   padding: $euiSizeXS $euiSizeS;
-  background-color: shade($euiColorPrimary, 60%);
-  color: $euiColorGhost;
+  background-color: shadeOrTint($euiColorPrimary, 60%, 60%);
+  color: $euiColorEmptyShade;
   line-height: $euiSizeL;
 }
 

diff --git a/src/legacy/ui/public/vis/editors/default/agg_add.html b/src/legacy/ui/public/vis/editors/default/agg_add.html
@@ -1,11 +1,11 @@
-<div ng-show="add.form">
+<div ng-show="add.form" class="form-group">
   <label
     i18n-id="common.ui.vis.editors.aggAdd.selectGroupTypeLabel"
     i18n-default-message="Select {groupNameLabel} type"
     i18n-values="{ groupNameLabel }"
   >
   </label>
-  <ul class="form-group list-group list-group-menu">
+  <ul class="list-group list-group-menu">
     <li
       tabindex="0"
       id="aggSchemaListItem-{{$index}}"

diff --git a/src/legacy/ui/ui_render/views/ui_app.pug b/src/legacy/ui/ui_render/views/ui_app.pug
@@ -10,10 +10,10 @@ block content
       width: 100%;
       height: 100%;
       margin: 0;
-      background-color: #F5F7FA;
+      background-color: #{darkMode ? '#25262E' : '#F5F7FA'};
     }
     .kibanaWelcomeView {
-      background-color: #{darkMode ? '#242424' : '#F5F7FA'};
+      background-color: #{darkMode ? '#25262E' : '#F5F7FA'};
     }
 
     .kibanaWelcomeTitle {

diff --git a/test/functional/apps/dashboard/dashboard_snapshots.js b/test/functional/apps/dashboard/dashboard_snapshots.js
@@ -29,7 +29,7 @@ export default function ({ getService, getPageObjects, updateBaselines }) {
   describe('dashboard snapshots', function describeIndexTests() {
     before(async function () {
       // We use a really small window to minimize differences across os's and browsers.
-      await browser.setWindowSize(1000, 500);
+      await browser.setWindowSize(1000, 700);
     });
 
     after(async function () {

diff --git a/test/functional/screenshots/baseline/area_chart.png b/test/functional/screenshots/baseline/area_chart.png
diff --git a/x-pack/plugins/canvas/public/components/tooltip_annotation/tooltip_annotation.scss b/x-pack/plugins/canvas/public/components/tooltip_annotation/tooltip_annotation.scss
@@ -1,3 +1,4 @@
+@import '@elastic/eui/src/components/tool_tip/variables';
 @import '@elastic/eui/src/components/tool_tip/mixins';
 
 .tooltipAnnotation {

diff --git a/yarn.lock b/yarn.lock
@@ -1060,10 +1060,17 @@
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
+<<<<<<< HEAD
 "@elastic/[email protected]":
   version "9.4.0"
   resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-9.4.0.tgz#e5f83c612674fc6f59e990f557e563be1409d25e"
   integrity sha512-cQnsU3UeQ1s6F427vY53lzlh7mvNoPmIvPL24B5jH3JYaWULhIL1xSJXJgDSOSdrdHCxkXDD9Q8Y7256x4Xf4Q==
+=======
+"@elastic/[email protected]":
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-9.2.1.tgz#3860a7219f0ee8f33ec43447edb2eda3c96a00a7"
+  integrity sha512-U92s0nh6vBS6NBiHDCq6e+49Dam8It+Iy81b2NProf1OIRk/nB0RE781x6zgUzmOFpJ1T0xiThWiiDP776v0LQ==
+>>>>>>> 3ada0259cc... Eui/9.2.1 + better dark mode (#32728)
   dependencies:
     "@types/lodash" "^4.14.116"
     "@types/numeral" "^0.0.25"