diff --git a/CHANGELOG.md b/CHANGELOG.md index a337955a8295..2e573a020fac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `5.6.0`. +- Adjust EUI coloring to better match brand guidelines from Creative Services ([#1356](https://github.com/elastic/eui/pull/1356)) ## [`5.6.0`](https://github.com/elastic/eui/tree/v5.6.0) diff --git a/src-docs/src/images/buttons.svg b/src-docs/src/images/buttons.svg index ac57300b143a..474783ef3c76 100644 --- a/src-docs/src/images/buttons.svg +++ b/src-docs/src/images/buttons.svg @@ -1,4 +1,4 @@ - + @@ -9,10 +9,11 @@ - + + - + diff --git a/src-docs/src/images/cards.svg b/src-docs/src/images/cards.svg index abd9e1892a2b..8cf509397497 100644 --- a/src-docs/src/images/cards.svg +++ b/src-docs/src/images/cards.svg @@ -1,26 +1,27 @@ - + + - - - - + + + + - - - - - + + + + + - - - - + + + + diff --git a/src-docs/src/images/flexgrid.svg b/src-docs/src/images/flexgrid.svg index b88f07fa6ef0..3b3cf7e06112 100644 --- a/src-docs/src/images/flexgrid.svg +++ b/src-docs/src/images/flexgrid.svg @@ -1,6 +1,7 @@ - + - + + diff --git a/src-docs/src/images/forms.svg b/src-docs/src/images/forms.svg index 01637fbb6c62..79838a5aa610 100644 --- a/src-docs/src/images/forms.svg +++ b/src-docs/src/images/forms.svg @@ -1,16 +1,17 @@ - + + - - + + - + diff --git a/src-docs/src/images/icons.jpg b/src-docs/src/images/icons.jpg index 76107d838e06..6b642e0711d7 100644 Binary files a/src-docs/src/images/icons.jpg and b/src-docs/src/images/icons.jpg differ diff --git a/src-docs/src/images/tables.svg b/src-docs/src/images/tables.svg index 4065715b32bf..9b2743152fc3 100644 --- a/src-docs/src/images/tables.svg +++ b/src-docs/src/images/tables.svg @@ -1,14 +1,15 @@ - + - - + + + - + - + @@ -26,7 +27,7 @@ - + diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss index b0cb41da1461..da58302a2195 100644 --- a/src/components/badge/_badge.scss +++ b/src/components/badge/_badge.scss @@ -62,7 +62,7 @@ // Modifier naming and colors. $badgeTypes: ( default: $euiColorLightShade, - primary: lighten(desaturate($euiColorPrimary, 40%), 40%), + primary: lighten(desaturate($euiColorPrimary, 30%), 30%), secondary: lighten(desaturate($euiColorSecondary, 40%), 40%), warning: lighten(desaturate($euiColorWarning, 30%), 20%), danger: lighten(desaturate($euiColorDanger, 40%), 40%), diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss index f5ecd320de91..e81e33ea8fe4 100644 --- a/src/components/form/_mixins.scss +++ b/src/components/form/_mixins.scss @@ -18,8 +18,13 @@ font-family: $euiFontFamily; line-height: 1em; // fixes text alignment in IE color: $euiTextColor; + + &::placeholder { + color: $euiColorDarkShade; + } } + @mixin euiFormControlSize( $height: $euiFormControlHeight, $includeAlternates: false diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss index 11345d9a3e88..cea8270aa94b 100644 --- a/src/components/form/switch/_switch.scss +++ b/src/components/form/switch/_switch.scss @@ -100,11 +100,11 @@ .euiSwitch__input:disabled ~ .euiSwitch__body, .euiSwitch__input:checked:disabled ~ .euiSwitch__body { - background: $euiColorLightShade; + background-color: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)); .euiSwitch__thumb { @include euiCustomControlDisabled; - background-color: $euiColorLightestShade; + background-color: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)); } .euiSwitch__icon { diff --git a/src/components/popover/_mixins.scss b/src/components/popover/_mixins.scss index cd2c9109f185..4344d0acbfc8 100644 --- a/src/components/popover/_mixins.scss +++ b/src/components/popover/_mixins.scss @@ -1,7 +1,8 @@ @mixin euiPopoverTitle { - @include euiTitle('xs'); - background-color: $euiColorLightestShade; + @include euiTitle('xxs'); padding: $euiSizeM; + text-transform: uppercase; + border-bottom: $euiBorderThin; // Subtract 1px from the border radius since it's inside another container that also has the border radius // -- makes for better rounded corners diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss index 8ee8e319b7c8..8fd8dc1e30c1 100644 --- a/src/components/popover/_popover.scss +++ b/src/components/popover/_popover.scss @@ -140,22 +140,6 @@ } } -.euiPopover__panel.euiPopover__panel-withTitle { - .euiPopover__panelArrow { - &.euiPopover__panelArrow--bottom:after { - border-bottom-color: $euiColorLightestShade; - } - - &.euiPopover__panelArrow--right:after { - border-right-color: $euiColorLightestShade; - } - - &.euiPopover__panelArrow--left:after { - border-left-color: $euiColorLightestShade; - } - } -} - .euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--top { transform: translateY($euiPopoverTranslateDistance) translateZ(0); } diff --git a/src/components/steps/_sub_steps.scss b/src/components/steps/_sub_steps.scss index 5b143fbdad1a..97829c3ec598 100644 --- a/src/components/steps/_sub_steps.scss +++ b/src/components/steps/_sub_steps.scss @@ -1,6 +1,6 @@ .euiSubSteps { padding: $euiSize; - background-color: tintOrShade(tint($euiColorPrimary, 55%), 83%, 78%); + background-color: $euiColorLightestShade; margin-bottom: $euiSize; > *:last-child { diff --git a/src/components/steps/_variables.scss b/src/components/steps/_variables.scss index af63cf1334c9..56c90fb4d3e1 100644 --- a/src/components/steps/_variables.scss +++ b/src/components/steps/_variables.scss @@ -5,6 +5,6 @@ $euiStepNumberMargin: $euiSize !default; $euiStepStatusColorsToFade: ( warning: $euiColorWarning, danger: $euiColorDanger, - disabled: $euiColorLightShade, - incomplete: $euiColorLightShade, + disabled: lightOrDarkTheme($euiColorDarkShade, $euiColorLightShade), + incomplete: lightOrDarkTheme($euiColorDarkShade, $euiColorLightShade), ) !default; diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss index 84cfa3441d44..9a4026cb8a89 100644 --- a/src/components/tabs/_tabs.scss +++ b/src/components/tabs/_tabs.scss @@ -2,11 +2,21 @@ @include euiScrollBar; display: flex; - border-bottom: $euiBorderThin; + position: relative; max-width: 100%; overflow-x: auto; overflow-y: hidden; // don't scroll vertically when scrolling horizontally + &:before { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background-color: $euiColorLightShade; + content: ''; + } + // Changing height of scrollbar so it sits flush with border // sass-lint:disable no-vendor-prefixes &::-webkit-scrollbar { @@ -46,6 +56,16 @@ &:focus { background-color: $euiFocusBackgroundColor; text-decoration: underline; + + &:before { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background-color: $euiColorLightShade; + content: ''; + } } &.euiTab-isDisabled { @@ -64,7 +84,7 @@ &:after { position: absolute; - bottom: -1px; + bottom: 0; left: 0; content: ' '; width: 100%; diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss index 9fb1a760d78d..27e0e26abc4e 100644 --- a/src/global_styling/variables/_colors.scss +++ b/src/global_styling/variables/_colors.scss @@ -1,23 +1,23 @@ // Core -$euiColorPrimary: #0079A5 !default; -$euiColorSecondary: #017F75 !default; +$euiColorPrimary: #006BB4 !default; +$euiColorSecondary: #017D73 !default; $euiColorAccent: #DD0A73 !default; $euiColorHighlight: #FFFBF1 !default; $euiColorGhost: #FFF !default; // Status $euiColorSuccess: $euiColorSecondary !default; -$euiColorDanger: #A30000 !default; -$euiColorWarning: #E5830E !default; +$euiColorDanger: #BD271E !default; +$euiColorWarning: #F5A700 !default; // Grays $euiColorEmptyShade: #FFF !default; -$euiColorLightestShade: #F5F5F5 !default; -$euiColorLightShade: #D9D9D9 !default; -$euiColorMediumShade: #999 !default; -$euiColorDarkShade: #666 !default; -$euiColorDarkestShade: #3F3F3F !default; +$euiColorLightestShade: #F5F7FA !default; +$euiColorLightShade: #D3DAE6 !default; +$euiColorMediumShade: #98A2B3 !default; +$euiColorDarkShade: #69707D !default; +$euiColorDarkestShade: #343741 !default; $euiColorFullShade: #000 !default; $euiColorSlightHue: #909AA1 !default; diff --git a/src/services/color/eui_palettes.js b/src/services/color/eui_palettes.js index 732a3091c4cd..d13597ccba4e 100644 --- a/src/services/color/eui_palettes.js +++ b/src/services/color/eui_palettes.js @@ -15,10 +15,10 @@ export const palettes = { }, euiPaletteForLightBackground: { colors: [ - '#0079A5', - '#017F75', - '#E5830E', - '#A30000', + '#006BB4', + '#017D73', + '#F5A700', + '#BD271E', '#DD0A73', ] },