Add defaults to borders and adjust shadows (#1079)

elastic · Aug 2, 2018 · d4d5baf · d4d5baf
1 parent cc594a6
commit d4d5baf
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 46 deletions.
diff --git a/src-docs/src/views/button/button_toggle.js b/src-docs/src/views/button/button_toggle.js
@@ -38,6 +38,7 @@ export default class extends Component {
           label="Toggle Me"
           iconType={this.state.toggle0On ? 'check' : 'cross'}
           onChange={this.onToggle0Change}
+          isSelected={this.state.toggle0On}
         />
 
         &emsp;
@@ -46,6 +47,7 @@ export default class extends Component {
           label={this.state.toggle1On ? 'I\'m a filled toggle' : 'I\'m a primary toggle'}
           fill={this.state.toggle1On}
           onChange={this.onToggle1Change}
+          isSelected={this.state.toggle1On}
         />
 
         &emsp;
@@ -54,6 +56,7 @@ export default class extends Component {
           label="Toggle Me"
           iconType={this.state.toggle4On ? 'eye' : 'eyeClosed'}
           onChange={this.onToggle4Change}
+          isSelected={this.state.toggle4On}
           isEmpty
           isIconOnly
         />
@@ -68,6 +71,7 @@ export default class extends Component {
           isDisabled
           label="Can't toggle this"
           fill={this.state.toggle2On}
+          isSelected={this.state.toggle2On}
         />
 
         &emsp;
@@ -76,6 +80,7 @@ export default class extends Component {
           isDisabled
           label="Can't toggle this either"
           fill={this.state.toggle3On}
+          isSelected={this.state.toggle3On}
         />
       </div>
     );

diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss
@@ -1,12 +1,10 @@
-$euiFlyoutBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // match shadow
-
 .euiFlyout {
-  @include euiBottomShadowLarge;
+  border-left: $euiBorderThin;
+  @include euiBottomShadowLarge($adjustBorders: true);
   position: fixed;
   top: 0;
   bottom: 0;
   right: 0;
-  border-left: 1px solid $euiFlyoutBorderColor;
   z-index: $euiZModal;
   background: $euiColorEmptyShade;
   animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance;

diff --git a/src/components/form/range/_range.scss b/src/components/form/range/_range.scss
@@ -308,7 +308,7 @@ $euiRange__levelColors: (
     }
 
     ~ .euiRange__valueWrapper .euiRange__value {
-      @include euiBottomShadow;
+      @include euiBottomShadowMedium;
 
       &.euiRange__value--right {
         transform: translateX(0) translateY(-50%) scale(1.1);

diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
@@ -1,18 +1,15 @@
-$euiModalBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // match shadow
-
 /**
  * 1. Fix IE overflow issue (min-height) by adding a separate wrapper for the
  *    flex display. https://github.com/philipwalton/flexbugs#flexbug-3
  */
 
 .euiModal {
-  @include euiBottomShadowLarge;
+  border: $euiBorderThin;
+  @include euiBottomShadowLarge($adjustBorders: true);
   display: flex; /* 1 */
 
   position: relative;
   background-color: $euiColorEmptyShade;
-  border: 1px solid $euiModalBorderColor;
-  border-top-color: tintOrShade($euiModalBorderColor, 50%, 0%);
   border-radius: $euiBorderRadius;
   z-index: $euiZModal;
   min-width: 50%;

diff --git a/src/components/panel/_mixins.scss b/src/components/panel/_mixins.scss
@@ -37,14 +37,18 @@
       }
 
       &.#{$selector}--shadow {
+        @include euiBottomShadowMedium;
+
         @if (lightness($euiTextColor) < 50) {
-          border-bottom-color: rgba($euiShadowColor, .6);
+          border-bottom-color: rgba($euiShadowColor, .5);
+        } @else {
+          // Applied again here in case dark theme overrides light
+          border-bottom-color: $euiBorderColor;
         }
-        @include euiBottomShadowMedium;
 
         &.#{$selector}--isClickable:hover,
         &.#{$selector}--isClickable:focus {
-          @include euiBottomShadow;
+          @include euiBottomShadow($color: $euiShadowColor, $opacity: .2);
         }
       }
     }

diff --git a/src/components/popover/__snapshots__/popover.test.js.snap b/src/components/popover/__snapshots__/popover.test.js.snap
@@ -94,7 +94,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
     <div>
       <div
         aria-live="assertive"
-        class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel euiPopover__panel-bottom euiPopover__panel-isOpen"
+        class="euiPanel euiPanel--paddingMedium euiPopover__panel euiPopover__panel-bottom euiPopover__panel-isOpen"
         style="top: 16px; left: -22px; z-index: 0;"
       >
         <div
@@ -121,7 +121,7 @@ exports[`EuiPopover props ownFocus defaults to false 1`] = `
     <div>
       <div
         aria-live="assertive"
-        class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel euiPopover__panel-bottom euiPopover__panel-isOpen"
+        class="euiPanel euiPanel--paddingMedium euiPopover__panel euiPopover__panel-bottom euiPopover__panel-isOpen"
         style="top: 16px; left: -22px; z-index: 0;"
       >
         <div
@@ -154,7 +154,7 @@ exports[`EuiPopover props ownFocus renders true 1`] = `
       </p>
       <div
         aria-live="off"
-        class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel euiPopover__panel-bottom euiPopover__panel-isOpen"
+        class="euiPanel euiPanel--paddingMedium euiPopover__panel euiPopover__panel-bottom euiPopover__panel-isOpen"
         style="top: 16px; left: -22px; z-index: 0;"
         tabindex="0"
       >
@@ -182,7 +182,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
     <div>
       <div
         aria-live="assertive"
-        class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel euiPopover__panel-bottom euiPopover__panel-isOpen test"
+        class="euiPanel euiPanel--paddingMedium euiPopover__panel euiPopover__panel-bottom euiPopover__panel-isOpen test"
         style="top: 16px; left: -22px; z-index: 0;"
       >
         <div
@@ -209,7 +209,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
     <div>
       <div
         aria-live="assertive"
-        class="euiPanel euiPanel--paddingSmall euiPanel--shadow euiPopover__panel euiPopover__panel-bottom euiPopover__panel-isOpen"
+        class="euiPanel euiPanel--paddingSmall euiPopover__panel euiPopover__panel-bottom euiPopover__panel-isOpen"
         style="top: 16px; left: -22px; z-index: 0;"
       >
         <div

diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss
@@ -34,6 +34,7 @@
   opacity: 0; /* 2 */
   visibility: hidden; /* 2 */
   transform: translateY(0) translateX(0) translateZ(0); /* 2 */
+  @include euiBottomShadow($adjustBorders: true);
 
   &.euiPopover__panel-isOpen {
     opacity: 1;

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
@@ -359,7 +359,6 @@ export class EuiPopover extends Component {
               className={panelClasses}
               paddingSize={panelPaddingSize}
               tabIndex={tabIndex}
-              hasShadow
               aria-live={ariaLive}
               style={this.state.popoverStyles}
             >

diff --git a/src/components/toast/_toast.scss b/src/components/toast/_toast.scss
@@ -1,13 +1,10 @@
 .euiToast {
-  @include euiBottomShadowLarge;
+  border: $euiBorderThin;
+  @include euiBottomShadowLarge($adjustBorders: true);
 
   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/components/tool_tip/_tool_tip.scss b/src/components/tool_tip/_tool_tip.scss
@@ -3,7 +3,7 @@
  */
 
 .euiToolTip {
-  @include euiBottomShadow;
+  @include euiBottomShadow($color: $euiShadowColor);
   @include euiFontSizeS();
 
   position: absolute; /* 1 */

diff --git a/src/global_styling/mixins/_shadow.scss b/src/global_styling/mixins/_shadow.scss
@@ -1,6 +1,3 @@
-$euiShadowColor: $euiColorMediumShade !default;
-$euiShadowColorLarge: $euiColorSlightHue !default;
-
 @mixin euiSlightShadow($color: $euiShadowColor, $opacity: .3) {
   box-shadow: 0 2px 2px -1px rgba($color, $opacity);
 }
@@ -27,22 +24,38 @@ $euiShadowColorLarge: $euiColorSlightHue !default;
     0 0px 2px 0 rgba($color, $opacity);
 }
 
-@mixin euiBottomShadow($color: $euiShadowColor, $opacity: .2) {
+// adjustBorder allows the border color to match the drop shadow better so that there's better
+// distinction between element bounds and the shadow (crisper borders)
+@mixin euiBottomShadow($color: $euiShadowColorLarge, $opacity: .1, $adjustBorders: false) {
   box-shadow:
     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);
+
+  // Never adjust borders if the border color is already on the dark side (dark theme)
+  @if ($adjustBorders and not (lightness($euiBorderColor) < 50)) {
+    border-color: tint($color, 75%);
+    border-top-color: tint($color, 80%);
+    border-bottom-color: tint($color, 55%);
+  }
 }
 
-@mixin euiBottomShadowLarge($color: $euiShadowColorLarge, $opacity: .2) {
+@mixin euiBottomShadowLarge($color: $euiShadowColorLarge, $opacity: .1, $adjustBorders: false) {
   box-shadow:
-    0 64px 64px 0 rgba($color, $opacity),
-    0 32px 32px 0 rgba($color, $opacity),
+    0 40px 64px 0 rgba($color, $opacity),
+    0 24px 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);
+
+  // Never adjust borders if the border color is already on the dark side (dark theme)
+  @if ($adjustBorders and not (lightness($euiBorderColor) < 50)) {
+    border-color: tint($color, 70%);
+    border-top-color: tint($color, 85%);
+    border-bottom-color: tint($color, 55%);
+  }
 }
 
 @mixin euiSlightShadowHover($color: $euiShadowColor, $opacity: .3) {
@@ -55,6 +68,8 @@ $euiShadowColorLarge: $euiColorSlightHue !default;
   @include euiSlightShadowHover($color, $opacity);
 }
 
+// Overflow shadows are useful when a middle element scrolls independently from
+// any top and/or bottom elements
 @mixin euiOverflowShadowTop {
   box-shadow: 0 ($euiSize *-1) $euiSize (-$euiSize / 2) $euiColorEmptyShade;
   z-index: 2;

diff --git a/src/global_styling/variables/_animations.scss b/src/global_styling/variables/_animations.scss
@@ -1,13 +1,13 @@
 // Animations
 
-$euiAnimSlightBounce: cubic-bezier(0.34,1.61,0.7,1);
-$euiAnimSlightResistance: cubic-bezier(0.694, 0.0482, 0.335, 1);
+$euiAnimSlightBounce: cubic-bezier(0.34,1.61,0.7,1) !default;
+$euiAnimSlightResistance: cubic-bezier(0.694, 0.0482, 0.335, 1) !default;
 
-$euiAnimSpeedExtraFast: 90ms;
-$euiAnimSpeedFast: 150ms;
-$euiAnimSpeedNormal: 250ms;
-$euiAnimSpeedSlow: 350ms;
-$euiAnimSpeedExtraSlow: 500ms;
+$euiAnimSpeedExtraFast: 90ms !default;
+$euiAnimSpeedFast: 150ms !default;
+$euiAnimSpeedNormal: 250ms !default;
+$euiAnimSpeedSlow: 350ms !default;
+$euiAnimSpeedExtraSlow: 500ms !default;
 
 @keyframes euiAnimFadeIn {
   0% {

diff --git a/src/global_styling/variables/_borders.scss b/src/global_styling/variables/_borders.scss
@@ -1,10 +1,10 @@
 // Borders
 
-$euiBorderWidthThin: 1px;
-$euiBorderWidthThick: 2px;
+$euiBorderWidthThin: 1px !default;
+$euiBorderWidthThick: 2px !default;
 
-$euiBorderColor: $euiColorLightShade;
-$euiBorderRadius: 4px;
-$euiBorderThick: $euiBorderWidthThick solid $euiBorderColor;
-$euiBorderThin: $euiBorderWidthThin solid $euiBorderColor;
-$euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor;
+$euiBorderColor: $euiColorLightShade !default;
+$euiBorderRadius: 4px !default;
+$euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default;
+$euiBorderThin: $euiBorderWidthThin solid $euiBorderColor !default;
+$euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor !default;
diff --git a/src/global_styling/variables/_shadows.scss b/src/global_styling/variables/_shadows.scss
@@ -1 +1,4 @@
 // Shadows
+// Transparency only affects the use of variable this outside of the shadow mixins (borders)
+$euiShadowColor: $euiColorMediumShade !default;
+$euiShadowColorLarge: shade(saturate($euiColorSlightHue, 25%), 50%) !default;