From ff4447e373079a66b86d9adb26fc9a6e92e1687b Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Tue, 12 May 2020 19:12:40 -0700 Subject: [PATCH] [Amsterdam] Updating shadows (#3428) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Working on shadows. * Fixing a missing px unit on small shadows. * Fixing a unitless value on large shadows. * Code refactor - Removed modal override and changed the default theme usage since it wasn’t really changing the opacity noticeabley anyway - Moved warning messages to each mixin … sigh - Made the docs layout look more Amsterdamy * Removing the largest value from large shadows. * Adding missing semicolons * Update src/themes/eui-amsterdam/global_styling/mixins/_shadow.scss Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: cchaos Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- .../guide_components_amsterdam.scss | 8 ++ src-docs/src/theme_amsterdam_dark.scss | 1 + src-docs/src/theme_amsterdam_light.scss | 1 + src-docs/src/views/guidelines/index.scss | 3 +- src-docs/src/views/guidelines/sass.js | 2 +- src/components/modal/_modal.scss | 2 +- .../global_styling/functions/_index.scss | 1 + .../global_styling/functions/_shadows.scss | 10 ++ .../eui-amsterdam/global_styling/index.scss | 1 + .../global_styling/mixins/_index.scss | 1 + .../global_styling/mixins/_panel.scss | 2 +- .../global_styling/mixins/_shadow.scss | 105 ++++++++++++++++++ .../global_styling/variables/_index.scss | 1 + .../global_styling/variables/_shadows.scss | 2 + 14 files changed, 136 insertions(+), 4 deletions(-) create mode 100644 src-docs/src/components/guide_components_amsterdam.scss create mode 100644 src/themes/eui-amsterdam/global_styling/functions/_index.scss create mode 100644 src/themes/eui-amsterdam/global_styling/functions/_shadows.scss create mode 100644 src/themes/eui-amsterdam/global_styling/mixins/_shadow.scss create mode 100644 src/themes/eui-amsterdam/global_styling/variables/_shadows.scss diff --git a/src-docs/src/components/guide_components_amsterdam.scss b/src-docs/src/components/guide_components_amsterdam.scss new file mode 100644 index 00000000000..af6938d7a60 --- /dev/null +++ b/src-docs/src/components/guide_components_amsterdam.scss @@ -0,0 +1,8 @@ +.guide { + background: $euiPageBackgroundColor; +} + +.guidePageContent { + @include euiBottomShadowFlat; + border-left: none; +} diff --git a/src-docs/src/theme_amsterdam_dark.scss b/src-docs/src/theme_amsterdam_dark.scss index 9d601757801..bca96ca7d2f 100644 --- a/src-docs/src/theme_amsterdam_dark.scss +++ b/src-docs/src/theme_amsterdam_dark.scss @@ -3,6 +3,7 @@ @import '../../src/theme_amsterdam_dark'; @import './components/guide_components'; +@import './components/guide_components_amsterdam'; @import './views/suggest/global_filter_group'; // Elastic charts diff --git a/src-docs/src/theme_amsterdam_light.scss b/src-docs/src/theme_amsterdam_light.scss index 73cf6abaa18..ddca6a7aa43 100644 --- a/src-docs/src/theme_amsterdam_light.scss +++ b/src-docs/src/theme_amsterdam_light.scss @@ -3,6 +3,7 @@ @import '../../src/theme_amsterdam_light'; @import './components/guide_components'; +@import './components/guide_components_amsterdam'; @import './views/suggest/global_filter_group'; // Elastic charts diff --git a/src-docs/src/views/guidelines/index.scss b/src-docs/src/views/guidelines/index.scss index 6e2985f08a0..7a38c15974a 100644 --- a/src-docs/src/views/guidelines/index.scss +++ b/src-docs/src/views/guidelines/index.scss @@ -144,8 +144,9 @@ } .guideSass__shadow { - padding: $euiSize; + padding: $euiSizeXXL; background: $euiColorEmptyShade; + border-radius: $euiBorderRadius; & + .guideSass__shadow { margin-top: $euiSizeXL; diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js index 76885721ac6..2d4ddadc752 100644 --- a/src-docs/src/views/guidelines/sass.js +++ b/src-docs/src/views/guidelines/sass.js @@ -49,10 +49,10 @@ const euiFontSizes = [ ]; const euiShadows = [ + 'euiBottomShadowFlat', 'euiSlightShadow', 'euiBottomShadowSmall', 'euiBottomShadowMedium', - 'euiBottomShadowFlat', 'euiBottomShadow', 'euiBottomShadowLarge', ]; diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss index 16d73ba4676..1c1921295bc 100644 --- a/src/components/modal/_modal.scss +++ b/src/components/modal/_modal.scss @@ -122,7 +122,7 @@ border: none; &.euiModal--confirmation { - @include euiBottomShadowLarge($euiShadowColorLarge, .1, false, true); + @include euiBottomShadowLarge($euiShadowColorLarge, $reverse: true); top: auto; } diff --git a/src/themes/eui-amsterdam/global_styling/functions/_index.scss b/src/themes/eui-amsterdam/global_styling/functions/_index.scss new file mode 100644 index 00000000000..b1df7c8d07d --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/functions/_index.scss @@ -0,0 +1 @@ +@import './shadows'; diff --git a/src/themes/eui-amsterdam/global_styling/functions/_shadows.scss b/src/themes/eui-amsterdam/global_styling/functions/_shadows.scss new file mode 100644 index 00000000000..e4581508a39 --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/functions/_shadows.scss @@ -0,0 +1,10 @@ +// Use a function to determine shadow opacity based +// on either a light or dark theme. We use a multiplier +// of 1 for light themes and 2.5 for dark themes +@function shadowOpacity($opacity) { + @if (lightness($euiTextColor) < 50) { + @return $opacity * 1; + } @else { + @return $opacity * 2.5; + } +} diff --git a/src/themes/eui-amsterdam/global_styling/index.scss b/src/themes/eui-amsterdam/global_styling/index.scss index cb9a09de94d..524a8b4f8e2 100644 --- a/src/themes/eui-amsterdam/global_styling/index.scss +++ b/src/themes/eui-amsterdam/global_styling/index.scss @@ -2,6 +2,7 @@ // Functions need to be first, since we use them in our variables and mixin definitions @import '../../../global_styling/functions/index'; +@import 'functions/index'; // Variables come next, and are used in some mixins @import '../../../global_styling/variables/index'; diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss index 7f441a58f79..014a7b652f5 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss +++ b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss @@ -1,2 +1,3 @@ @import 'button'; @import 'panel'; +@import 'shadow'; \ No newline at end of file diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_panel.scss b/src/themes/eui-amsterdam/global_styling/mixins/_panel.scss index fd11002d11a..0a83a70acf0 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_panel.scss +++ b/src/themes/eui-amsterdam/global_styling/mixins/_panel.scss @@ -43,7 +43,7 @@ &#{$selector}--isClickable:hover, &#{$selector}--isClickable:focus { - @include euiBottomShadow($color: $euiShadowColor, $opacity: .2); + @include euiBottomShadow($color: $euiShadowColor); } } } diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_shadow.scss b/src/themes/eui-amsterdam/global_styling/mixins/_shadow.scss new file mode 100644 index 00000000000..e64f6670ef0 --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/mixins/_shadow.scss @@ -0,0 +1,105 @@ +// Opacity variables are included to prevent breaks in downstream +// components. However they need to be removed prior to 8.0 and +// all components that use them must be updated. + +// This file uses RGBA literal values responsibly +// This file uses off-pattern indedentation to be more readible + +// sass-lint:disable no-color-literals, no-color-keywords, indentation, quotes + +@mixin euiSlightShadow($color: $euiShadowColor, $opacity: 0) { + box-shadow: + 0 .8px .8px rgba($color, shadowOpacity(.04)), + 0 2.3px 2px rgba($color, shadowOpacity(.03)); +} + +@mixin euiBottomShadowSmall($color: $euiShadowColor, $opacity: 0) { + box-shadow: + 0 .7px 1.4px rgba($color, shadowOpacity(.07)), + 0 1.9px 4px rgba($color, shadowOpacity(.05)), + 0 4.5px 10px rgba($color, shadowOpacity(.05)), + 0 15px 32px rgba($color, shadowOpacity(.04)); + + @if ($opacity > 0) { + @warn 'The $opacity variable of euiBottomShadowSmall() will be depricated in a future version of EUI.'; + } +} + +@mixin euiBottomShadowMedium($color: $euiShadowColor, $opacity: 0) { + box-shadow: + 0 .9px 4px -1px rgba($color, shadowOpacity(.08)), + 0 2.6px 8px -1px rgba($color, shadowOpacity(.06)), + 0 5.7px 12px -1px rgba($color, shadowOpacity(.05)), + 0 15px 15px -1px rgba($color, shadowOpacity(.04)); + + @if ($opacity > 0) { + @warn 'The $opacity variable of euiBottomShadowMedium() will be depricated in a future version of EUI.'; + } +} + +// Similar to shadow medium but wihtout the bottom depth. Useful for popovers +// that drop UP rather than DOWN. +@mixin euiBottomShadowFlat($color: $euiShadowColor, $opacity: 0) { + box-shadow: + 0 0 .8px rgba($color, shadowOpacity(.06)), + 0 0 2px rgba($color, shadowOpacity(.04)), + 0 0 5px rgba($color, shadowOpacity(.04)), + 0 0 17px rgba($color, shadowOpacity(.03)); + + @if ($opacity > 0) { + @warn 'The $opacity variable of euiBottomShadowFlat() will be depricated in a future version of EUI.'; + } +} + +// 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: 0, + $adjustBorders: false // Deprecated in Amsterdam but left for BWC +) { + box-shadow: + 0 1px 5px rgba($color, shadowOpacity(.1)), + 0 3.6px 13px rgba($color, shadowOpacity(.07)), + 0 8.4px 23px rgba($color, shadowOpacity(.06)), + 0 23px 35px rgba($color, shadowOpacity(.05)); + + @if ($opacity > 0) { + @warn 'The $opacity variable of euiBottomShadow() will be depricated in a future version of EUI.'; + } +} + +@mixin euiBottomShadowLarge( + $color: $euiShadowColorLarge, + $opacity: 0, + $adjustBorders: false, // Deprecated in Amsterdam but left for BWC + $reverse: false +) { + @if ($reverse) { + box-shadow: + 0 2.7px -9px rgba($color, shadowOpacity(.13)), + 0 9.4px -24px rgba($color, shadowOpacity(.09)), + 0 21.8px -43px rgba($color, shadowOpacity(.08)); + } @else { + box-shadow: + 0 2.7px 9px rgba($color, shadowOpacity(.13)), + 0 9.4px 24px rgba($color, shadowOpacity(.09)), + 0 21.8px 43px rgba($color, shadowOpacity(.08)); + } + + @if ($opacity > 0) { + @warn 'The $opacity variable of euiBottomShadowLarge() will be depricated in a future version of EUI.'; + } +} + +@mixin euiSlightShadowHover($color: $euiShadowColor, $opacity: 0) { + box-shadow: + 0 1px 5px rgba($color, shadowOpacity(.1)), + 0 3.6px 13px rgba($color, shadowOpacity(.07)), + 0 8.4px 23px rgba($color, shadowOpacity(.06)), + 0 23px 35px rgba($color, shadowOpacity(.05)); + + @if ($opacity > 0) { + @warn 'The $opacity variable of euiSlightShadowHover() will be depricated in a future version of EUI.'; + } +} diff --git a/src/themes/eui-amsterdam/global_styling/variables/_index.scss b/src/themes/eui-amsterdam/global_styling/variables/_index.scss index d8e6fea9de2..0ca92c83c0b 100644 --- a/src/themes/eui-amsterdam/global_styling/variables/_index.scss +++ b/src/themes/eui-amsterdam/global_styling/variables/_index.scss @@ -1,3 +1,4 @@ @import 'buttons'; @import 'borders'; @import 'typography'; +@import 'shadows'; diff --git a/src/themes/eui-amsterdam/global_styling/variables/_shadows.scss b/src/themes/eui-amsterdam/global_styling/variables/_shadows.scss new file mode 100644 index 00000000000..73869a37cac --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/variables/_shadows.scss @@ -0,0 +1,2 @@ +$euiShadowColor: $euiColorInk; +$euiShadowColorLarge: $euiColorInk;