diff --git a/CHANGELOG.md b/CHANGELOG.md index a74ae27f3d9..317da3ba8ba 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) @@ -14,8 +15,10 @@ No public interface changes since `9.1.0`. - Added `.eui-fullWidth` utility class ([#1665](https://github.com/elastic/eui/pull/1665)) - Added `EuiPopoverFooter` and converted `EuiPopoverTitle` to TS ([#1666](https://github.com/elastic/eui/pull/1666)) - Converted `EuiLoadingSpinner`, `EuiLoadingKibana`, and `EuiLoadingChart` to TS ([#1683](https://github.com/elastic/eui/pull/1683)) -- Added button to `EuiSuperDatePicker`'s “Now” tab to trigger the "now" time selection ([#1620](https://github.com/elastic/eui/pull/1620)) +**Bug fixes** + +- Added button to `EuiSuperDatePicker`'s “Now” tab to trigger the "now" time selection ([#1620](https://github.com/elastic/eui/pull/1620)) - 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)) - Fixed IE11 rendering issue in `EuiLoadingKibana` ([#1683](https://github.com/elastic/eui/pull/1683)) 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/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..07a3587de04 100644 --- a/src/components/bottom_bar/_bottom_bar.scss +++ b/src/components/bottom_bar/_bottom_bar.scss @@ -1,5 +1,6 @@ .euiBottomBar { - background: tintOrShade($euiColorFullShade, 25%, 90%); + @include euiBottomShadowFlat($euiShadowColorLarge); + background: tintOrShade($euiColorFullShade, 25%, 100%); color: $euiColorEmptyShade; position: fixed; bottom: 0; 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/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', 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..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 @@ -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