Merge pull request #1 from johnbarrierwilson/v15.0.0

Shadows, buttons and borders revamp
elastic · Oct 18, 2019 · 2571863 · 2571863
2 parents fa562a7 + 9810ff3
commit 2571863
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 69 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "14.6.0",
+  "version": "15.0.0",
   "license": "Apache-2.0",
   "main": "lib",
   "module": "es",

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
@@ -4,10 +4,11 @@ $guideSideNavWidth: 240px;
 $guideZLevelHighest: $euiZLevel9 + 1000;
 
 .guideBody {
-  background: linear-gradient(90deg, $euiPageBackgroundColor 50%, $euiColorEmptyShade 50%);
+  background: $euiColorEmptyShade;
 }
 
 .guidePage {
+  background: $euiColorEmptyShade;
   padding: 0;
 }
 

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -6,15 +6,14 @@
 // Our base button
 .euiButton {
   @include euiButton;
-  @include euiSlightShadow;
 
   border-radius: $euiBorderRadius;
   min-width: $euiButtonMinWidth;
 
   .euiButton__content {
     @include euiButtonContent;
 
-    padding: 0 ($euiSize - $euiSizeXS);
+    padding: 0 $euiSizeM;
   }
 
   .euiButton__text {
@@ -23,6 +22,7 @@
   }
 
   &.euiButton--small {
+    border-radius: ($euiBorderRadius * .75);
     height: $euiButtonHeightSmall;
     line-height: $euiButtonHeightSmall; // prevents descenders from getting cut off
   }
@@ -33,10 +33,10 @@
     }
   }
 
-  &:hover,
-  &:active {
-    @include euiSlightShadowHover;
-  }
+  // &:hover,
+  // &:active {
+  //   @include euiSlightShadowHover;
+  // }
 
   &:enabled {
     &:hover,
@@ -68,8 +68,6 @@
 
     &:hover,
     &:focus {
-      @include euiSlightShadow;
-
       text-decoration: none;
     }
   }
@@ -100,7 +98,7 @@ $buttonTypes: (
       color: makeHighContrastColor($color, $euiColorEmptyShade);
     }
 
-    border-color: $color;
+    background-color: transparentize($color, .85);
 
     &.euiButton--fill {
       background-color: $color;
@@ -125,20 +123,9 @@ $buttonTypes: (
     }
 
     &:enabled {
-      $shadowColor: $euiShadowColor;
-      @if ($name == 'ghost') {
-        $shadowColor: $euiColorInk;
-      } @else if (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);
-
       &:hover,
       &:focus {
-        @include euiSlightShadowHover($shadowColor);
-        background-color: transparentize($color, .9);
+        background-color: transparentize($color, .7);
 
         @if ($name == 'disabled') {
           cursor: not-allowed;

diff --git a/src/components/button/_mixins.scss b/src/components/button/_mixins.scss
@@ -8,26 +8,16 @@
   height: $euiButtonHeight;
   line-height: $euiButtonHeight; // prevents descenders from getting cut off
   text-decoration: none;
-  border: solid 1px transparent;
   text-align: center;
   transition: all $euiAnimSpeedNormal $euiAnimSlightBounce;
   white-space: nowrap;
   max-width: 100%;
   vertical-align: middle;
 
-  &:hover:not(:disabled) {
-    transform: translateY(-1px);
-  }
-
-  &:hover:not(:disabled),
   &:focus {
     text-decoration: underline;
   }
 
-  &:focus {
-    animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce;
-  }
-
   &:active:not(:disabled) {
     transform: translateY(1px);
   }
@@ -65,12 +55,6 @@
   }
 }
 
-@keyframes euiButtonActive {
-  50% {
-    transform: translateY(1px);
-  }
-}
-
 // BUTTON TOGGLES
 // Pointer events and interactions are handled by the input (checkbox/radio)
 // and not the button, this mixin helps to target that element for states

diff --git a/src/components/panel/_mixins.scss b/src/components/panel/_mixins.scss
@@ -9,9 +9,8 @@
   } @else {
     .#{$selector} {
 
-      @include euiBottomShadowSmall;
+      @include euiBottomShadowMedium;
       background-color: $euiColorEmptyShade;
-      border: $euiBorderThin;
       border-radius: $euiBorderRadius;
       flex-grow: 1;
 

diff --git a/src/global_styling/mixins/_shadow.scss b/src/global_styling/mixins/_shadow.scss
@@ -3,26 +3,27 @@
 
 // sass-lint:disable no-color-literals, no-color-keywords, indentation
 
-@mixin euiSlightShadow($color: $euiShadowColor, $opacity: .3) {
-  box-shadow: 0 2px 2px -1px rgba($color, $opacity);
+@mixin euiSlightShadow($color: $euiShadowColor, $opacity: .2) {
+  box-shadow: 0 1px 1px 0 rgba($color, $opacity);
 }
 
-@mixin euiBottomShadowSmall($color: $euiShadowColor, $opacity: .3) {
+@mixin euiBottomShadowSmall($color: $euiShadowColor, $opacity: .15) {
   box-shadow:
-    0 2px 2px -1px rgba($color, $opacity),
-    0 1px 5px -2px rgba($color, $opacity);
+    0 1px 1px 0 rgba($color, $opacity),
+    0 2px 2px 0 rgba($color, $opacity);
 }
 
-@mixin euiBottomShadowMedium($color: $euiShadowColor, $opacity: .2) {
+@mixin euiBottomShadowMedium($color: $euiShadowColor, $opacity: .13) {
   box-shadow:
-    0 6px 12px -1px rgba($color, $opacity),
-    0 4px 4px -1px rgba($color, $opacity),
-    0 2px 2px 0 rgba($color, $opacity);
+    0 1px 1px 0 rgba($color, $opacity),
+    0 2px 2px 0 rgba($color, $opacity),
+    0 4px 4px 0 rgba($color, $opacity),
+    0 8px 8px 0 rgba($color, $opacity);
 }
 
 // Similar to shadow medium but wihtout the bottom depth. Useful for popovers
 // that drop UP rather than DOWN.
-@mixin euiBottomShadowFlat($color: $euiShadowColor, $opacity: .2) {
+@mixin euiBottomShadowFlat($color: $euiShadowColor, $opacity: .1) {
   box-shadow:
     0 0 12px -1px rgba($color, $opacity),
     0 0 4px -1px rgba($color, $opacity),
@@ -94,4 +95,4 @@
                   transparentize(red, 0) calc(100% - #{$hideHeight}),
                   transparentize(red, .9) 100%
                 );
-}
+}
diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
@@ -6,15 +6,13 @@
 @mixin euiFont {
   font-family: $euiFontFamily;
   font-weight: $euiFontWeightRegular;
-  letter-spacing: -.005em;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
   font-kerning: normal;
 }
 
 @mixin euiCodeFont {
   font-family: $euiCodeFontFamily;
-  letter-spacing: normal;
 }
 
 @mixin euiText {
@@ -37,19 +35,18 @@
     @include euiFontSize;
     @include lineHeightFromBaseline(3);
     font-weight: $euiFontWeightSemiBold;
-    letter-spacing: -.02em;
   } @else if $size == 's' {
     @include euiFontSizeL;
     @include lineHeightFromBaseline(4);
     font-weight: $euiFontWeightMedium;
-    letter-spacing: -.025em;
   } @else if $size == 'm' {
     @include euiFontSizeXL;
     @include lineHeightFromBaseline(5);
-    letter-spacing: -.04em;
+    font-weight: $euiFontWeightBold;
   } @else if $size == 'l' {
     @include euiFontSizeXXL;
     @include lineHeightFromBaseline(6);
+    font-weight: $euiFontWeightBold;
   } @else {
     @include fontSize($size);
     @include lineHeightFromBaseline(3);
@@ -87,14 +84,12 @@
   @include fontSize($euiFontSizeXL);
   line-height: 1.25;
   font-weight: $euiFontWeightLight; // always apply light weight to x-large type
-  letter-spacing: -.05em;
 }
 
 @mixin euiFontSizeXXL {
   @include fontSize($euiFontSizeXXL);
   line-height: 1.25;
   font-weight: $euiFontWeightLight; // always apply light weight to xx-large type
-  letter-spacing: -.03em;
 }
 
 @mixin euiTextBreakWord {
@@ -144,4 +139,3 @@
     visibility: hidden;
   }
 }
-
diff --git a/src/global_styling/variables/_borders.scss b/src/global_styling/variables/_borders.scss
@@ -4,7 +4,7 @@ $euiBorderWidthThin: 1px !default;
 $euiBorderWidthThick: 2px !default;
 
 $euiBorderColor: $euiColorLightShade !default;
-$euiBorderRadius: 4px !default;
+$euiBorderRadius: 7px !default;
 $euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default;
 $euiBorderThin: $euiBorderWidthThin solid $euiBorderColor !default;
 $euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor !default;
diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
@@ -1,7 +1,7 @@
 // Core
-$euiColorPrimary: #006BB4 !default;
-$euiColorSecondary: #017D73 !default;
-$euiColorAccent: #DD0A73 !default;
+$euiColorPrimary: #006DE4 !default;
+$euiColorSecondary: #00B1A6 !default;
+$euiColorAccent: #F71D9C !default;
 $euiColorHighlight: #FFFBF1 !default; // Not used should we deprecate?
 
 // These colors stay the same no matter the theme
@@ -10,22 +10,22 @@ $euiColorInk: #000 !default;
 
 // Status
 $euiColorSuccess: $euiColorSecondary !default;
-$euiColorDanger: #BD271E !default;
-$euiColorWarning: #F5A700 !default;
+$euiColorDanger: #D7190F !default;
+$euiColorWarning: #FFC82D !default;
 
 // Grays
 $euiColorEmptyShade: #FFF !default;
 $euiColorLightestShade: #F5F7FA !default;
 $euiColorLightShade: #D3DAE6 !default;
 $euiColorMediumShade: #98A2B3 !default;
 $euiColorDarkShade: #69707D !default;
-$euiColorDarkestShade: #343741 !default;
+$euiColorDarkestShade: #54565F !default;
 $euiColorFullShade: #000 !default;
 
 // Every color below must be based mathmatically on the set above.
 
 $euiTextColor: $euiColorDarkestShade !default;
-$euiTitleColor: shadeOrTint($euiTextColor, 50%, 0%) !default;
+$euiTitleColor: $euiColorFullShade !default;
 $euiLinkColor: $euiColorPrimary !default;
 $euiFocusBackgroundColor: tintOrShade($euiColorPrimary, 90%, 50%) !default;
 $euiPageBackgroundColor: tintOrShade($euiColorLightestShade, 50%, 30%) !default;

diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
@@ -33,7 +33,7 @@ $euiCodeFontFamily: 'Roboto Mono', Consolas, Menlo, Courier, monospace !default;
 $euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;
 
 // Font sizes -- scale is loosely based on Major Third (1.250)
-$euiTextScale:      2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default;
+$euiTextScale:      2.5, 1.75, 1.25, 1.125, 1, .875, .75 !default;
 
 $euiFontSize:       $euiSize !default; // 5th position in scale