Changing up the look of shadows

- Slight difference on small shadows - Button shadows now get a tint of the button’s main color - Small overlaying comps have slightly dark shadows but the also not bleed horizontally (not just below) - Large overlaying comps (like Modals) have much more pronounced shadows. - Had to add some new variables pertaining to shadows for better theming control.
elastic · Mar 30, 2018 · 1c1f588 · 1c1f588
1 parent d59b6b8
commit 1c1f588
Show file tree

Hide file tree

Showing 16 changed files with 91 additions and 28 deletions.
diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js
@@ -30,6 +30,7 @@ const allowedColors = [
   'euiColorDarkShade',
   'euiColorDarkestShade',
   'euiColorFullShade',
+  'euiColorSlightHue',
   'euiColorPrimary',
   'euiColorSecondary',
   'euiColorWarning',

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -33,7 +33,7 @@
   }
 
   &:active {
-    @include euiSlightShadowActive;
+    @include euiSlightShadowHover;
   }
 
   &:hover, &:focus {
@@ -62,6 +62,7 @@
 
     &:hover, &:focus {
       text-decoration: none;
+      box-shadow: none;
     }
   }
 }
@@ -81,6 +82,17 @@ $buttonTypes: (
     color: $color;
     border-color: $color;
 
+    $shadowColor: $euiShadowColor;
+
+    @if ($name == 'ghost') {
+      $shadowColor: #000;
+    } @elseif (lightness($euiTextColor) < 50) {
+      // Only if this is the light theme do we use the button variant color to colorize the shadow
+      $shadowColor: desaturate($color, 60%);
+    }
+
+    @include euiSlightShadow($shadowColor);
+
     &.euiButton--fill {
       background-color: $color;
       border-color: $color;
@@ -107,10 +119,15 @@ $buttonTypes: (
 
     &:hover, &:focus {
       background-color: transparentize($color, .9);
+      @include euiSlightShadowHover($shadowColor);
 
       @if ($name == 'disabled') {
         cursor: not-allowed;
       }
     }
+
+    &:disabled {
+      box-shadow: none;
+    }
   }
 }
diff --git a/src/components/button/_index.scss b/src/components/button/_index.scss
@@ -28,7 +28,7 @@ $euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 70%);
     animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce;
   }
 
-  &:active {
+  &:active:not(:disabled) {
     transform: translateY(1px);
   }
 }

diff --git a/src/components/context_menu/_context_menu_panel.scss b/src/components/context_menu/_context_menu_panel.scss
@@ -3,7 +3,6 @@
 .euiContextMenuPanel {
   width: 100%;
   visibility: visible;
-  background-color: $euiColorEmptyShade;
 
   &.euiContextMenuPanel-txInLeft {
     pointer-events: none;

diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss
@@ -1,16 +1,18 @@
+$euiFlyoutBorderColor: tintOrShade($euiShadowColorLarge, 40%, 0%) !default; // match shadow
+
 .euiFlyout {
+  @include euiBottomShadowLarge;
   position: fixed;
   top: 0;
   bottom: 0;
   right: 0;
-  border-left: $euiBorderThin;
+  border-left: 1px solid $euiFlyoutBorderColor;
   z-index: $euiZModal;
   background: $euiColorEmptyShade;
   animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance;
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  box-shadow: -$euiSizeS $euiSizeXS $euiSizeM 0px rgba(0,0,0,.05);
 }
 
 /**

diff --git a/src/components/form/_index.scss b/src/components/form/_index.scss
@@ -36,14 +36,14 @@ $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 4
 
 @mixin euiFormControlDefaultShadow {
   box-shadow:
-    0 2px 2px -1px rgba(0, 0, 0, 0.1),
+    0 2px 2px -1px rgba($euiShadowColor, 0.2),
     0 0 0 1px transparentize($euiColorFullShade, .92),
     inset #{-$euiFormMaxWidth} 0 0 0 $euiFormBackgroundColor;
 }
 
 @mixin euiFormControlInvalidStyle {
   box-shadow:
-    0 $euiSizeXS $euiSizeXS (-$euiSizeXS / 2) rgba(0, 0, 0, 0.1),
+    0 $euiSizeXS $euiSizeXS (-$euiSizeXS / 2) rgba($euiShadowColor, 0.2),
     0 0 0 1px transparentize($euiColorFullShade, .84),
     inset 0 0 0 0 $euiColorEmptyShade,
     inset 0 (-$euiSizeXS / 2) 0 0 $euiColorDanger;
@@ -52,7 +52,7 @@ $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 4
 @mixin euiFormControlFocusStyle {
   background: tintOrShade($euiColorEmptyShade, 0%, 20%);
   box-shadow:
-    0 4px 4px -2px rgba(0, 0, 0, 0.1),
+    0 4px 4px -2px rgba($euiShadowColor, 0.2),
     0 0 0 1px transparentize($euiColorFullShade, .84),
     inset 0 0 0 0 tintOrShade($euiColorEmptyShade, 0%, 20%),
     inset 0 -2px 0 0 $euiColorPrimary;
@@ -114,7 +114,7 @@ $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 4
 
   border: 1px solid shadeOrTint($euiColorLightestShade, 18%, 30%);
   background: $euiColorEmptyShade no-repeat center;
-  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
+  @include euiSlightShadow;
 
   @if $type == 'round' {
     border-radius: $size;

diff --git a/src/components/key_pad_menu/_key_pad_menu.scss b/src/components/key_pad_menu/_key_pad_menu.scss
@@ -28,6 +28,7 @@
 
   &:hover, &:focus {
     border-color: $euiBorderColor;
+    @include euiSlightShadowHover;
 
     .euiKeyPadMenuItem__icon {
       transform: translateY(0);

diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
@@ -1,12 +1,15 @@
+$euiModalBorderColor: tintOrShade($euiShadowColorLarge, 40%, 0%) !default; // match shadow
+
 .euiModal {
-  @include euiBottomShadow;
+  @include euiBottomShadowLarge;
 
   display: flex;
   flex-direction: column;
   max-height: 75vh; // We overflow the modal body based off this
   position: relative;
   background-color: $euiColorEmptyShade;
-  border: $euiBorderThin;
+  border: 1px solid $euiModalBorderColor;
+  border-top-color: tintOrShade($euiModalBorderColor, 50%, 0%);
   border-radius: $euiBorderRadius;
   z-index: $euiZModal;
   min-width: 50%;
@@ -91,7 +94,7 @@
     bottom: 0;
     top: 0;
     border-radius: 0;
-    box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, 0.1);
+    box-shadow: none;
     border: none;
   }
 

diff --git a/src/components/panel/_mixins.scss b/src/components/panel/_mixins.scss
@@ -25,7 +25,6 @@
         text-align: left;
 
         // transition the shadow
-        @include euiSlightShadow;
         transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
 
         &:hover,
@@ -40,6 +39,9 @@
         &,
         &:hover,
         &:focus {
+          @if (lightness($euiTextColor) < 50) {
+            border-bottom-color: rgba($euiShadowColor, .6);
+          }
           @include euiBottomShadow;
         }
       }

diff --git a/src/components/panel/_variables.scss b/src/components/panel/_variables.scss
@@ -6,4 +6,6 @@ $euiPanelPaddingModifiers: (
   "paddingSmall": $euiSizeS,
   "paddingMedium": $euiSize,
   "paddingLarge": $euiSizeL
-) !default;
+) !default;
+
+$euiPanelBorderColor: tintOrShade($euiShadowColor, 40%, 0%) !default; // match shadow
diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss
@@ -78,6 +78,7 @@
   @include createStepsNumber;
   position: relative; /* 2 */
   z-index: $euiZLevel1; /* 2 */
+  transition: all $euiAnimSpeedFast ease-in-out;
 
   // if it contains an icon, it needs to shift up a couple px
   > .euiIcon {
@@ -121,7 +122,7 @@
 // Selected state
 .euiStepHorizontal-isSelected {
   .euiStepHorizontal__number {
-    @include euiBottomShadowMedium;
+    @include euiSlightShadow(desaturate($euiColorPrimary, 20%));
   }
 
   &::before {

diff --git a/src/components/toast/_toast.scss b/src/components/toast/_toast.scss
@@ -1,10 +1,13 @@
 .euiToast {
-  @include euiBottomShadow;
+  @include euiBottomShadowLarge;
 
   position: relative;
   padding: $euiSize;
   background-color: $euiColorEmptyShade;
   border: $euiBorderThin;
+  @if (lightness($euiTextColor) < 50) {
+    border-bottom-color: rgba($euiShadowColor, .6);
+  }
   width: 100%;
 
   &:hover .euiToast__closeButton,

diff --git a/src/global_styling/mixins/_shadow.scss b/src/global_styling/mixins/_shadow.scss
@@ -1,28 +1,50 @@
-@mixin euiBottomShadow {
-  box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
+$euiShadowColor: $euiColorMediumShade !default;
+$euiShadowColorLarge: $euiColorSlightHue !default;
+
+
+@mixin euiSlightShadow($color: $euiShadowColor, $opacity: .3) {
+  box-shadow: 0 2px 2px -1px rgba($color, $opacity);
 }
 
-@mixin euiBottomShadowSmall {
-  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
+@mixin euiBottomShadowSmall($color: $euiShadowColor, $opacity: .2) {
+  box-shadow:
+    0 2px 2px -1px rgba($color, $opacity),
+    0 3px 3px -2px rgba($color, $opacity);
 }
 
-@mixin euiBottomShadowMedium {
-  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2);
+@mixin euiBottomShadowMedium($color: $euiShadowColor, $opacity: .2) {
+  box-shadow:
+    0 6px 12px 0 rgba($color, $opacity),
+    0 4px 4px 0 rgba($color, $opacity),
+    0 2px 2px 0 rgba($color, $opacity);
 }
 
-@mixin euiSlightShadow {
+@mixin euiBottomShadow($color: $euiShadowColor, $opacity: .2) {
   box-shadow:
-    0 2px 2px -1px rgba(0, 0, 0, 0.15),
+    0 12px 24px 0 rgba($color, $opacity),
+    0 6px 12px 0 rgba($color, $opacity),
+    0 4px 4px 0 rgba($color, $opacity),
+    0 2px 2px 0 rgba($color, $opacity);
 }
 
-@mixin euiSlightShadowHover {
+@mixin euiBottomShadowLarge($color: $euiShadowColorLarge, $opacity: .2) {
   box-shadow:
-    0 4px 4px -2px rgba(0, 0, 0, 0.1),
+    0 64px 64px 0 rgba($color, $opacity),
+    0 32px 32px 0 rgba($color, $opacity),
+    0 16px 16px 0 rgba($color, $opacity),
+    0 8px 8px 0 rgba($color, $opacity),
+    0 4px 4px 0 rgba($color, $opacity),
+    0 2px 2px 0 rgba($color, $opacity);
 }
 
-@mixin euiSlightShadowActive {
+@mixin euiSlightShadowHover($color: $euiShadowColor, $opacity: .3) {
   box-shadow:
-    0 1px 1px 0px rgba(0, 0, 0, 0.2),
+    0 4px 8px 0px rgba($color, $opacity/2),
+    0 2px 2px -1px rgba($color, $opacity);
+}
+
+@mixin euiSlightShadowActive($color: $euiShadowColor, $opacity: .3) {
+  @include euiSlightShadowHover($color, $opacity);
 }
 
 @mixin euiOverflowShadowTop {

diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
@@ -47,6 +47,7 @@ $euiColorMediumShade: #999 !default;
 $euiColorDarkShade: #666 !default;
 $euiColorDarkestShade: #3F3F3F !default;
 $euiColorFullShade: #000 !default;
+$euiColorSlightHue: #909AA1 !default;
 
 // Every color below must be based mathmatically on the set above.
 

diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/eui/eui_colors_dark.scss
@@ -7,12 +7,17 @@ $euiColorMediumShade: #444;
 $euiColorDarkShade: #D9D9D9;
 $euiColorDarkestShade: #F5F5F5;
 $euiColorFullShade: #FFF;
+$euiColorSlightHue: #494E51;
 $euiColorPrimary: #4da1c0;
 $euiColorWarning: #e45c29;
 $euiColorDanger: #bf4d4d;
 $euiTextColor: #DDD;
 
 $euiFocusBackgroundColor: #191919;
+$euiShadowColor: #000;
+$euiShadowColorLarge: #000;
+$euiModalBorderColor: $euiColorLightShade;
+$euiFlyoutBorderColor: $euiColorLightShade;
 
 // Code
 

diff --git a/src/themes/k6/k6_colors_dark.scss b/src/themes/k6/k6_colors_dark.scss
@@ -12,6 +12,10 @@ $euiColorDanger: #bf4d4d;
 $euiTextColor: #DDD;
 
 $euiFocusBackgroundColor: #191919;
+$euiShadowColor: #000;
+$euiShadowColorLarge: #000;
+$euiModalBorderColor: $euiColorLightShade;
+$euiFlyoutBorderColor: $euiColorLightShade;
 
 // Code