From 9ca275bbd5958069fb9ad7ddf7cbe5dfa23a48a5 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 7 Mar 2019 22:59:24 -0500 Subject: [PATCH 1/5] A few more dark mode fixes --- .../badge/notification_badge/_notification_badge.scss | 2 +- src/components/bottom_bar/_bottom_bar.scss | 1 + src/components/call_out/_mixins.scss | 2 +- src/components/loading/_loading_chart.scss | 6 +++--- src/components/side_nav/_side_nav_item.scss | 3 +-- src/components/tool_tip/_mixins.scss | 2 +- src/components/tool_tip/_tool_tip.scss | 2 +- src/components/tool_tip/_variables.scss | 2 ++ src/themes/eui/eui_colors_dark.scss | 4 ++-- 9 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/badge/notification_badge/_notification_badge.scss b/src/components/badge/notification_badge/_notification_badge.scss index 598ac182b64..d31f1accfc3 100644 --- a/src/components/badge/notification_badge/_notification_badge.scss +++ b/src/components/badge/notification_badge/_notification_badge.scss @@ -3,7 +3,7 @@ display: inline-block; border-radius: $euiBorderRadius; background: $euiColorAccent; - color: lightOrDarkTheme($euiColorEmptyShade, $euiColorFullShade); + color: $euiColorEmptyShade; font-size: $euiFontSizeXS; font-weight: $euiFontWeightMedium; line-height: $euiSize; diff --git a/src/components/bottom_bar/_bottom_bar.scss b/src/components/bottom_bar/_bottom_bar.scss index 296420603bb..b7852bec877 100644 --- a/src/components/bottom_bar/_bottom_bar.scss +++ b/src/components/bottom_bar/_bottom_bar.scss @@ -1,4 +1,5 @@ .euiBottomBar { + @include euiBottomShadowFlat($euiShadowColorLarge); background: tintOrShade($euiColorFullShade, 25%, 90%); color: $euiColorEmptyShade; position: fixed; diff --git a/src/components/call_out/_mixins.scss b/src/components/call_out/_mixins.scss index d1d792a26fc..10b644a3d8e 100644 --- a/src/components/call_out/_mixins.scss +++ b/src/components/call_out/_mixins.scss @@ -2,7 +2,7 @@ @if (map-has-key($euiCallOutTypes, $type)) { $color: map-get($euiCallOutTypes, $type); $backgroundColor: tintOrShade($color, 90%, 70%); - $foregroundColor: makeHighContrastColor($color, $backgroundColor); + $foregroundColor: shadeOrTint(makeHighContrastColor($color, $backgroundColor), 0, 20%); @if ($returnBackgroundOrForeground == 'background') { @return $backgroundColor; diff --git a/src/components/loading/_loading_chart.scss b/src/components/loading/_loading_chart.scss index 3e5f28f949a..380638279b2 100644 --- a/src/components/loading/_loading_chart.scss +++ b/src/components/loading/_loading_chart.scss @@ -41,15 +41,15 @@ } &:nth-child(2) { - background-color: darken($euiColorLightShade, 4%); + background-color: shadeOrTint($euiColorLightShade, 4%, 4%); } &:nth-child(3) { - background-color: darken($euiColorLightShade, 8%); + background-color: shadeOrTint($euiColorLightShade, 8%, 8%); } &:nth-child(4) { - background-color: darken($euiColorLightShade, 12%); + background-color: shadeOrTint($euiColorLightShade, 12%, 12%); } } } diff --git a/src/components/side_nav/_side_nav_item.scss b/src/components/side_nav/_side_nav_item.scss index feaa56bfa61..437a8325d14 100644 --- a/src/components/side_nav/_side_nav_item.scss +++ b/src/components/side_nav/_side_nav_item.scss @@ -11,7 +11,7 @@ color: $euiColorFullShade; /* 2 */ &.euiSideNavItemButton--isClickable { - &:hover { + &:hover .euiSideNavItemButton__label { text-decoration: underline; } @@ -19,7 +19,6 @@ &:focus { // sass-lint:disable-block no-important background-color: $euiFocusBackgroundColor !important; - color: $euiColorPrimary !important; } } diff --git a/src/components/tool_tip/_mixins.scss b/src/components/tool_tip/_mixins.scss index 1600e4b361e..420044cc514 100644 --- a/src/components/tool_tip/_mixins.scss +++ b/src/components/tool_tip/_mixins.scss @@ -1,7 +1,7 @@ @mixin euiToolTipStyle($size: null) { @include euiBottomShadow($color: #000); border-radius: $euiBorderRadius; - background-color: tintOrShade($euiColorFullShade, 25%, 90%); + background-color: $euiTooltipBackgroundColor; color: $euiColorGhost; z-index: $euiZLevel9; max-width: 256px; diff --git a/src/components/tool_tip/_tool_tip.scss b/src/components/tool_tip/_tool_tip.scss index 833088108db..4b817432b50 100644 --- a/src/components/tool_tip/_tool_tip.scss +++ b/src/components/tool_tip/_tool_tip.scss @@ -23,7 +23,7 @@ position: absolute; transform-origin: center; border-radius: 2px; - background-color: tintOrShade($euiColorFullShade, 25%, 90%); + background-color: $euiTooltipBackgroundColor; width: $arrowSize; height: $arrowSize; diff --git a/src/components/tool_tip/_variables.scss b/src/components/tool_tip/_variables.scss index 300f5678a58..75dcdadd2e7 100644 --- a/src/components/tool_tip/_variables.scss +++ b/src/components/tool_tip/_variables.scss @@ -1,3 +1,5 @@ +$euiTooltipBackgroundColor: tintOrShade($euiColorFullShade, 25%, 100%); + $euiTooltipAnimations: ( top: euiToolTipTop, left: euiToolTipBottom, diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/eui/eui_colors_dark.scss index 853e201186c..3fe85fdf563 100644 --- a/src/themes/eui/eui_colors_dark.scss +++ b/src/themes/eui/eui_colors_dark.scss @@ -14,8 +14,8 @@ $euiColorEmptyShade: #1D1E24; $euiColorLightestShade: #25262E; $euiColorLightShade: #343741; $euiColorMediumShade: #535966; -$euiColorDarkShade: #D4DAE5; -$euiColorDarkestShade: #F5F7FA; +$euiColorDarkShade: #98A2B3; +$euiColorDarkestShade: #D4DAE5; $euiColorFullShade: #FFF; // Variations from core From 9071117cab37f46a17b60bf035bbfd74ceffe3e2 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 7 Mar 2019 23:19:24 -0500 Subject: [PATCH 2/5] cl --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c6640fbc95f..d02167d1082 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `9.1.0`. +- Adjusted the dark theme palette a bit more and adjusted a few components ([#1700](https://github.com/elastic/eui/pull/1700)) + ## [`9.1.0`](https://github.com/elastic/eui/tree/v9.1.0) @@ -18,7 +19,6 @@ No public interface changes since `9.1.0`. **Bug fixes** - Fixed IE11 rendering issue in `EuiLoadingKibana` ([#1683](https://github.com/elastic/eui/pull/1683)) - - Fixed floating point arithmetic bug in `EuiRangeTrack`'s value validation ([#1687](https://github.com/elastic/eui/pull/1687)) - Fixed `EuiComboBox` `activeOptonIndex` error with empty search results ([#1695](https://github.com/elastic/eui/pull/1695)) From 9021570d4c89b063aa55b52b2d76b0430312b88c Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 8 Mar 2019 09:55:25 -0600 Subject: [PATCH 3/5] fix EuiStat subdued color --- src/components/stat/stat.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/stat/stat.js b/src/components/stat/stat.js index 363bcb92c7f..eb84d6f9017 100644 --- a/src/components/stat/stat.js +++ b/src/components/stat/stat.js @@ -7,7 +7,7 @@ import { EuiTitle, TITLE_SIZES } from '../title/title'; const colorToClassNameMap = { default: null, - subdued: 'euiStat__title--dark', + subdued: 'euiStat__title--subdued', primary: 'euiStat__title--primary', secondary: 'euiStat__title--secondary', danger: 'euiStat__title--danger', From e386a89cc032246c2c3149bdfb059208b77d4157 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 8 Mar 2019 11:36:46 -0500 Subject: [PATCH 4/5] Making bottom bar black in dark theme --- src/components/bottom_bar/_bottom_bar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/bottom_bar/_bottom_bar.scss b/src/components/bottom_bar/_bottom_bar.scss index b7852bec877..07a3587de04 100644 --- a/src/components/bottom_bar/_bottom_bar.scss +++ b/src/components/bottom_bar/_bottom_bar.scss @@ -1,6 +1,6 @@ .euiBottomBar { @include euiBottomShadowFlat($euiShadowColorLarge); - background: tintOrShade($euiColorFullShade, 25%, 90%); + background: tintOrShade($euiColorFullShade, 25%, 100%); color: $euiColorEmptyShade; position: fixed; bottom: 0; From f7fd6da079d4b8755c8da34d7fd3b93f3a098a61 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 8 Mar 2019 09:23:31 -0800 Subject: [PATCH 5/5] adjust badge coloring, switch warning color --- src/components/badge/_badge.scss | 10 +++++----- src/themes/eui/eui_colors_dark.scss | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss index f2cd4ed31db..3e8bdb3c170 100644 --- a/src/components/badge/_badge.scss +++ b/src/components/badge/_badge.scss @@ -62,11 +62,11 @@ // Modifier naming and colors. $badgeTypes: ( default: $euiColorLightShade, - primary: lighten(desaturate($euiColorPrimary, 30%), 30%), - secondary: lighten(desaturate($euiColorSecondary, 40%), 40%), - warning: lighten(desaturate($euiColorWarning, 30%), 20%), - danger: lighten(desaturate($euiColorDanger, 0%), 30%), - accent: lighten(desaturate($euiColorAccent, 40%), 40%), + primary: tintOrShade(desaturate($euiColorPrimary, 30%), 30%, 10%), + secondary: tintOrShade(desaturate($euiColorSecondary, 40%), 40%, 0%), + warning: tintOrShade(desaturate($euiColorWarning, 30%), 20%, 0%), + danger: tintOrShade(desaturate($euiColorDanger, 0%), 30%, 10%), + accent: tintOrShade(desaturate($euiColorAccent, 40%), 40%, 0%), ); @each $name, $color in $badgeTypes { diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/eui/eui_colors_dark.scss index 3fe85fdf563..caa396563a4 100644 --- a/src/themes/eui/eui_colors_dark.scss +++ b/src/themes/eui/eui_colors_dark.scss @@ -6,7 +6,7 @@ $euiColorGhost: #FFF; // Status $euiColorSuccess: $euiColorSecondary; -$euiColorWarning: #FF977A; +$euiColorWarning: #FFCE7A; $euiColorDanger: #F66; // Grays