creative + product coloring

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%),

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
@@ -212,8 +217,8 @@
 }
 
 @mixin euiCustomControlDisabled($type: null) {
-  border-color: $euiColorLightShade;
-  background-color: $euiColorLightShade;
+  border-color: desaturate($euiColorLightShade, 100%);
+  background-color: desaturate($euiColorLightShade, 100%);
   box-shadow: none;
   @if $type != null {
     @include euiIconBackground($type, $euiFormCustomControlDisabledIconColor);

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: desaturate($euiColorLightShade, 100%);
 
     .euiSwitch__thumb {
       @include euiCustomControlDisabled;
-      background-color: $euiColorLightestShade;
+      background-color: desaturate($euiColorLightestShade, 100%);
     }
 
     .euiSwitch__icon {

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

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);
 }

src/components/steps/_steps_horizontal.scss

@@ -14,7 +14,7 @@
   display: flex;
   align-items: stretch;
   flex-grow: 1;
-  background: transparentize($euiColorLightestShade, .5);
+  background: transparentize($euiColorLightestShade, .2);
 }
 
 // Button containing item

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%;

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;
 

src/services/color/eui_palettes.js

@@ -15,10 +15,10 @@ export const palettes = {
   },
   euiPaletteForLightBackground: {
     colors: [
-      '#0079A5',
-      '#017F75',
-      '#E5830E',
-      '#A30000',
+      '#006BB4',
+      '#017D73',
+      '#F5A700',
+      '#BD271E',
       '#DD0A73',
     ]
   },