From 87b41612376daceb050c15b4a25c637caa84ceb0 Mon Sep 17 00:00:00 2001 From: Chris Cowan Date: Tue, 22 Jan 2019 12:59:20 -0700 Subject: [PATCH 1/2] Adding support for Dark Mode --- x-pack/plugins/infra/public/apps/start_app.tsx | 10 ++++++++-- .../components/logging/log_minimap/density_chart.tsx | 10 ++++++++-- .../components/logging/log_minimap/time_ruler.tsx | 5 +++-- .../logging/log_text_stream/item_date_field.tsx | 12 +++++++++--- .../logging/log_text_stream/item_message_field.tsx | 7 +++++-- .../infra/public/components/metrics/side_nav.tsx | 1 - .../plugins/infra/public/components/waffle/index.tsx | 2 +- .../adapters/framework/kibana_framework_adapter.ts | 6 ++++++ x-pack/plugins/infra/public/lib/lib.ts | 1 + 9 files changed, 41 insertions(+), 13 deletions(-) diff --git a/x-pack/plugins/infra/public/apps/start_app.tsx b/x-pack/plugins/infra/public/apps/start_app.tsx index 3ef74b66df874..4227f58dd6342 100644 --- a/x-pack/plugins/infra/public/apps/start_app.tsx +++ b/x-pack/plugins/infra/public/apps/start_app.tsx @@ -15,7 +15,8 @@ import { ThemeProvider } from 'styled-components'; // TODO use theme provided from parentApp when kibana supports it import { EuiErrorBoundary } from '@elastic/eui'; -import euiVars from '@elastic/eui/dist/eui_theme_k6_light.json'; +import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; +import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { I18nProvider } from '@kbn/i18n/react'; import { InfraFrontendLibs } from '../lib/lib'; import { PageRouter } from '../routes'; @@ -36,7 +37,12 @@ export async function startApp(libs: InfraFrontendLibs) { - + ({ + eui: libs.framework.darkMode ? euiDarkVars : euiLightVars, + darkMode: libs.framework.darkMode, + })} + > diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/density_chart.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/density_chart.tsx index bf524678e7f2b..12819370fb632 100644 --- a/x-pack/plugins/infra/public/components/logging/log_minimap/density_chart.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_minimap/density_chart.tsx @@ -56,9 +56,15 @@ export const DensityChart: React.SFC = ({ }; const PositiveAreaPath = styled.path` - fill: ${props => props.theme.eui.euiColorLightShade}; + fill: ${props => + props.theme.darkMode + ? props.theme.eui.euiColorMediumShade + : props.theme.eui.euiColorLightShade}; `; const NegativeAreaPath = styled.path` - fill: ${props => props.theme.eui.euiColorLightestShade}; + fill: ${props => + props.theme.darkMode + ? props.theme.eui.euiColorLightShade + : props.theme.eui.euiColorLightestShade}; `; diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx index 0577dba01e09b..9e0479eb6476e 100644 --- a/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx @@ -46,11 +46,12 @@ TimeRuler.displayName = 'TimeRuler'; const TimeRulerTickLabel = styled.text` font-size: ${props => props.theme.eui.euiFontSizeXs}; line-height: ${props => props.theme.eui.euiLineHeight}; - color: ${props => props.theme.eui.euiTextColor}; + fill: ${props => props.theme.eui.textColors.subdued}; `; const TimeRulerGridLine = styled.line` - stroke: ${props => props.theme.eui.euiColorMediumShade}; + stroke: ${props => + props.theme.darkMode ? props.theme.eui.euiColorDarkShade : props.theme.eui.euiColorMediumShade}; stroke-dasharray: 2, 2; stroke-opacity: 0.5; stroke-width: 1px; diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/item_date_field.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/item_date_field.tsx index 82f8057b08fce..f75056e23aef0 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_stream/item_date_field.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/item_date_field.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { darken } from 'polished'; +import { darken, transparentize } from 'polished'; import * as React from 'react'; import { css } from 'styled-components'; @@ -45,8 +45,14 @@ const highlightedFieldStyle = css` `; const hoveredFieldStyle = css` - background-color: ${props => darken(0.05, props.theme.eui.euiColorHighlight)}; - border-color: ${props => darken(0.2, props.theme.eui.euiColorHighlight)}; + background-color: ${props => + props.theme.darkMode + ? transparentize(0.9, darken(0.05, props.theme.eui.euiColorHighlight)) + : darken(0.05, props.theme.eui.euiColorHighlight)}; + border-color: ${props => + props.theme.darkMode + ? transparentize(0.7, darken(0.2, props.theme.eui.euiColorHighlight)) + : darken(0.2, props.theme.eui.euiColorHighlight)}; color: ${props => props.theme.eui.euiColorFullShade}; `; diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/item_message_field.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/item_message_field.tsx index 1c411adaf4e1c..77ef813261818 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_stream/item_message_field.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/item_message_field.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { darken } from 'polished'; +import { darken, transparentize } from 'polished'; import * as React from 'react'; import styled, { css } from 'styled-components'; @@ -73,7 +73,10 @@ const highlightedFieldStyle = css` `; const hoveredFieldStyle = css` - background-color: ${props => darken(0.05, props.theme.eui.euiColorHighlight)}; + background-color: ${props => + props.theme.darkMode + ? transparentize(0.9, darken(0.05, props.theme.eui.euiColorHighlight)) + : darken(0.05, props.theme.eui.euiColorHighlight)}; `; const wrappedFieldStyle = css` diff --git a/x-pack/plugins/infra/public/components/metrics/side_nav.tsx b/x-pack/plugins/infra/public/components/metrics/side_nav.tsx index 76f4a0ddb0d5d..94a954a719bd8 100644 --- a/x-pack/plugins/infra/public/components/metrics/side_nav.tsx +++ b/x-pack/plugins/infra/public/components/metrics/side_nav.tsx @@ -77,7 +77,6 @@ const SideNavContainer = styled.div` position: fixed; z-index: 1; height: 88vh; - background-color: #f5f5f5; padding-left: 16px; margin-left: -16px; overflow-y: auto; diff --git a/x-pack/plugins/infra/public/components/waffle/index.tsx b/x-pack/plugins/infra/public/components/waffle/index.tsx index 37decfa498e28..d38301f6eb1f8 100644 --- a/x-pack/plugins/infra/public/components/waffle/index.tsx +++ b/x-pack/plugins/infra/public/components/waffle/index.tsx @@ -93,7 +93,7 @@ const calculateBoundsFromMap = (map: InfraWaffleData): InfraWaffleMapBounds => { if (values.length === 1) { values.unshift(0); } - return { min: min(values), max: max(values) }; + return { min: min(values) || 0, max: max(values) || 0 }; }; export const Waffle = injectI18n( diff --git a/x-pack/plugins/infra/public/lib/adapters/framework/kibana_framework_adapter.ts b/x-pack/plugins/infra/public/lib/adapters/framework/kibana_framework_adapter.ts index d8f62a10856ee..5d26268cf0500 100644 --- a/x-pack/plugins/infra/public/lib/adapters/framework/kibana_framework_adapter.ts +++ b/x-pack/plugins/infra/public/lib/adapters/framework/kibana_framework_adapter.ts @@ -26,6 +26,7 @@ export class InfraKibanaFrameworkAdapter implements InfraFrameworkAdapter { public appState: object; public dateFormat?: string; public kbnVersion?: string; + public darkMode?: boolean; public scaledDateFormat?: string; public timezone?: string; @@ -132,6 +133,11 @@ export class InfraKibanaFrameworkAdapter implements InfraFrameworkAdapter { this.timezone = Private(this.timezoneProvider)(); this.kbnVersion = kbnVersion; this.dateFormat = config.get('dateFormat'); + try { + this.darkMode = config.get('theme:darkMode'); + } catch (e) { + this.darkMode = false; + } this.scaledDateFormat = config.get('dateFormat:scaled'); }); diff --git a/x-pack/plugins/infra/public/lib/lib.ts b/x-pack/plugins/infra/public/lib/lib.ts index 9d215247d1163..35c58c7576158 100644 --- a/x-pack/plugins/infra/public/lib/lib.ts +++ b/x-pack/plugins/infra/public/lib/lib.ts @@ -36,6 +36,7 @@ export interface InfraFrameworkAdapter { kbnVersion?: string; scaledDateFormat?: string; timezone?: string; + darkMode?: boolean; // Methods setUISettings(key: string, value: any): void; From dc57839b3e26dc2b1db3846db0e47db06a795398 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Felix=20St=C3=BCrmer?= Date: Tue, 29 Jan 2019 15:43:53 +0100 Subject: [PATCH 2/2] Use transparentize for suggestion icon bg color --- .../public/components/autocomplete_field/suggestion_item.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx index 09112ede6fa11..69c02e1c7f7d7 100644 --- a/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx +++ b/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx @@ -5,7 +5,7 @@ */ import { EuiIcon } from '@elastic/eui'; -import { tint } from 'polished'; +import { transparentize } from 'polished'; import React from 'react'; import styled from 'styled-components'; @@ -66,7 +66,8 @@ const SuggestionItemField = styled.div` `; const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: string }>` - background-color: ${props => tint(0.1, getEuiIconColor(props.theme, props.suggestionType))}; + background-color: ${props => + transparentize(0.9, getEuiIconColor(props.theme, props.suggestionType))}; color: ${props => getEuiIconColor(props.theme, props.suggestionType)}; flex: 0 0 auto; justify-content: center;