From 2a457ff570c454749633101526709836cf8bdc2f Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Thu, 19 Nov 2020 11:01:27 -0500
Subject: [PATCH] Updating Amsterdam colors to match brand (#4284)
* Updating Amsterdam colors to match brand
* Updated dark colors too
* Adding text button style to docs
* Fixing text-selection and focus backgrounds
* Style all disabled EuiButtons the same (non-fill)
---
CHANGELOG.md | 5 +++-
.../guide_page/guide_page_chrome.js | 2 +-
src-docs/src/views/button/button.js | 26 +++++++++++++++++
src-docs/src/views/guidelines/sass.js | 2 +-
src/global_styling/functions/_colors.scss | 5 ++++
src/global_styling/variables/_buttons.scss | 2 +-
src/global_styling/variables/_colors.scss | 23 ++++++++-------
.../eui_amsterdam_colors_dark.scss | 23 +++++++++++++--
.../eui_amsterdam_colors_light.scss | 23 +++++++++++----
.../global_styling/reset/_reset.scss | 5 ++++
.../global_styling/variables/_buttons.scss | 3 +-
.../global_styling/variables/_states.scss | 2 +-
.../eui-amsterdam/overrides/_button.scss | 18 ++++++++----
src/themes/eui/eui_colors_dark.scss | 28 +++++++++++--------
14 files changed, 126 insertions(+), 41 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4d7b091a12c..82891d41227 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,9 @@
## [`master`](https://github.com/elastic/eui/tree/master)
-No public interface changes since `30.4.0`.
+**Theme: Amsterdam**
+
+- Unify colors with the Elastic brand ([#4284](https://github.com/elastic/eui/pull/4284))
+- Created one consistent look for disabled `EuiButton` ([#4284](https://github.com/elastic/eui/pull/v))
## [`30.4.0`](https://github.com/elastic/eui/tree/v30.4.0)
diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
index 387ac075f74..0674e84113b 100644
--- a/src-docs/src/components/guide_page/guide_page_chrome.js
+++ b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -27,7 +27,7 @@ export function scrollToSelector(selector, attempts = 5) {
const element = document.querySelector(selector);
if (element) {
- scrollTo(element.offsetTop - 20);
+ scrollTo(element.offsetTop - 120); // Offset affords for the sticky contrast slider
} else if (attempts > 0) {
setTimeout(scrollToSelector.bind(null, selector, attempts - 1), 250);
}
diff --git a/src-docs/src/views/button/button.js b/src-docs/src/views/button/button.js
index f688e43d022..a36cf1fedf5 100644
--- a/src-docs/src/views/button/button.js
+++ b/src-docs/src/views/button/button.js
@@ -110,6 +110,32 @@ export default () => (
+
+
+ {}}>
+ Text
+
+
+
+
+ {}}>
+ Filled
+
+
+
+
+ {}}>
+ Small
+
+
+
+
+ {}}>
+ Small and filled
+
+
+
+
{}}>
diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js
index 814526d7a6e..096ec9f3cef 100644
--- a/src-docs/src/views/guidelines/sass.js
+++ b/src-docs/src/views/guidelines/sass.js
@@ -454,7 +454,7 @@ export const SassGuidelines = ({ selectedTheme }) => {
For example, depending upon what theme you use{' '}
- $EuiColorPrimary will be a different hex value.
+ $euiColorPrimary will be a different hex value.
diff --git a/src/global_styling/functions/_colors.scss b/src/global_styling/functions/_colors.scss
index f650f4261af..8d14ac63c75 100644
--- a/src/global_styling/functions/_colors.scss
+++ b/src/global_styling/functions/_colors.scss
@@ -128,3 +128,8 @@
@function makeGraphicContrastColor($color, $background: $euiPageBackgroundColor) {
@return makeHighContrastColor($color, $background, 3);
}
+
+// Disabled content only needs a contrast of at least 2 because there is no interaction available
+@function makeDisabledContrastColor($color, $background: $euiPageBackgroundColor) {
+ @return makeHighContrastColor($color, $background, 2);
+}
diff --git a/src/global_styling/variables/_buttons.scss b/src/global_styling/variables/_buttons.scss
index df81cccad48..c425e7083c8 100644
--- a/src/global_styling/variables/_buttons.scss
+++ b/src/global_styling/variables/_buttons.scss
@@ -3,7 +3,7 @@ $euiButtonHeightSmall: $euiSizeXL !default;
$euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 70%) !default;
// Only increase the contrast of background color to text to 2.0 for disabled
-$euiButtonColorDisabledText: makeHighContrastColor($euiButtonColorDisabled, $euiPageBackgroundColor, 2) !default;
+$euiButtonColorDisabledText: makeDisabledContrastColor($euiButtonColorDisabled) !default;
$euiButtonColorGhostDisabled: lightOrDarkTheme($euiColorDarkShade, $euiColorLightShade) !default;
// Modifier naming and colors.
diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
index 9406d931723..48d06ae5bc6 100644
--- a/src/global_styling/variables/_colors.scss
+++ b/src/global_styling/variables/_colors.scss
@@ -1,20 +1,19 @@
// This extra import allows any variables that are created via functions to work when loaded into JS
@import '../functions/index';
+// These colors stay the same no matter the theme
+$euiColorGhost: #FFF !default;
+$euiColorInk: #000 !default;
+
// Core
$euiColorPrimary: #006BB4 !default;
$euiColorSecondary: #017D73 !default;
$euiColorAccent: #DD0A73 !default;
-$euiColorHighlight: #FFFCDD !default;
-
-// These colors stay the same no matter the theme
-$euiColorGhost: #FFF !default;
-$euiColorInk: #000 !default;
// Status
$euiColorSuccess: $euiColorSecondary !default;
-$euiColorDanger: #BD271E !default;
$euiColorWarning: #F5A700 !default;
+$euiColorDanger: #BD271E !default;
// Grays
$euiColorEmptyShade: #FFF !default;
@@ -25,12 +24,15 @@ $euiColorDarkShade: #69707D !default;
$euiColorDarkestShade: #343741 !default;
$euiColorFullShade: #000 !default;
+// Backgrounds
+$euiPageBackgroundColor: tint($euiColorLightestShade, 50%) !default;
+$euiColorHighlight: #FFFCDD !default;
+
// Every color below must be based mathematically on the set above and in a particular order.
$euiTextColor: $euiColorDarkestShade !default;
-$euiPageBackgroundColor: tintOrShade($euiColorLightestShade, 50%, 30%) !default;
+$euiTitleColor: shade($euiTextColor, 50%) !default;
$euiTextSubduedColor: makeHighContrastColor($euiColorMediumShade) !default;
-$euiTitleColor: shadeOrTint($euiTextColor, 50%, 0%) !default;
-$euiLinkColor: $euiColorPrimary !default;
+$euiColorDisabled: tint($euiTextColor, 70%) !default;
// Contrasty text variants
$euiColorPrimaryText: makeHighContrastColor($euiColorPrimary) !default;
@@ -38,7 +40,9 @@ $euiColorSecondaryText: makeHighContrastColor($euiColorSecondary) !default;
$euiColorAccentText: makeHighContrastColor($euiColorAccent) !default;
$euiColorWarningText: makeHighContrastColor($euiColorWarning) !default;
$euiColorDangerText: makeHighContrastColor($euiColorDanger) !default;
+$euiColorDisabledText: makeDisabledContrastColor($euiColorDisabled) !default;
$euiColorSuccessText: $euiColorSecondaryText !default;
+$euiLinkColor: $euiColorPrimaryText !default;
// Visualization colors
@@ -117,7 +121,6 @@ $euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9')
$euiColorChartLines: shade($euiColorLightestShade, 3%) !default;
$euiColorChartBand: $euiColorLightestShade !default;
-
// Code
$euiCodeBlockBackgroundColor: $euiColorLightestShade !default;
$euiCodeBlockColor: makeHighContrastColor($euiTextColor, $euiCodeBlockBackgroundColor) !default;
diff --git a/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss b/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss
index 916e2ebe5ee..ce70734a842 100644
--- a/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss
+++ b/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss
@@ -1,10 +1,27 @@
@import '../eui/eui_colors_dark.scss';
// Core
-$euiColorPrimary: #238CFF;
+$euiColorPrimary: #36A2EF;
+$euiColorSecondary: #7DDED8;
+$euiColorAccent: #F68FBE;
+
+// Status
+$euiColorSuccess: $euiColorSecondary;
+$euiColorWarning: #F3D371;
+$euiColorDanger: #F86B63;
+$euiColorDisabled: #515761;
+
+// Grays are the same
+
+// Backgrounds
+$euiColorHighlight: #2E2D25;
// Contrasty text variants
$euiColorPrimaryText: makeHighContrastColor($euiColorPrimary);
-
+$euiColorSecondaryText: makeHighContrastColor($euiColorSecondary);
+$euiColorAccentText: makeHighContrastColor($euiColorAccent);
+$euiColorWarningText: makeHighContrastColor($euiColorWarning);
+$euiColorDangerText: makeHighContrastColor($euiColorDanger);
+$euiColorDisabledText: makeDisabledContrastColor($euiColorDisabled);
+$euiColorSuccessText: $euiColorSecondaryText;
$euiLinkColor: $euiColorPrimaryText;
-$euiFocusBackgroundColor: transparentize($euiColorPrimary, .8);
diff --git a/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss b/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
index 2dfaf359712..76e646aeba1 100644
--- a/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
+++ b/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
@@ -1,15 +1,28 @@
// This extra import allows any variables that are created via functions to work when loaded into JS
@import '../../global_styling/variables/colors';
-$euiColorPrimary: #006DE4;
-$euiColorSecondary: #00BFB3;
-$euiColorAccent: #FC358E;
+// Core
+$euiColorPrimary: #07C;
+$euiColorSecondary: #00BFB3;
+$euiColorAccent: #F04E98;
+
+// Status
$euiColorSuccess: $euiColorSecondary;
+$euiColorWarning: #FEC514;
+$euiColorDisabled: #ABB4C4;
+
+// Grays are the same
+
+// Backgrounds
+$euiPageBackgroundColor: tint($euiColorLightestShade, 50%);
+$euiColorHighlight: tint($euiColorWarning, 90%);
// Contrasty text variants
+$euiTextSubduedColor: $euiColorDarkShade;
$euiColorPrimaryText: makeHighContrastColor($euiColorPrimary);
$euiColorSecondaryText: makeHighContrastColor($euiColorSecondary);
$euiColorAccentText: makeHighContrastColor($euiColorAccent);
-
+$euiColorWarningText: makeHighContrastColor($euiColorWarning);
+$euiColorDisabledText: makeDisabledContrastColor($euiColorDisabled);
+$euiColorSuccessText: $euiColorSecondaryText;
$euiLinkColor: $euiColorPrimaryText;
-$euiFocusBackgroundColor: transparentize($euiColorPrimary, .8);
diff --git a/src/themes/eui-amsterdam/global_styling/reset/_reset.scss b/src/themes/eui-amsterdam/global_styling/reset/_reset.scss
index 429a797a9da..c0f8eebc7ee 100644
--- a/src/themes/eui-amsterdam/global_styling/reset/_reset.scss
+++ b/src/themes/eui-amsterdam/global_styling/reset/_reset.scss
@@ -88,6 +88,11 @@ body {
}
}
+// Dark mode's highlighted doesn't work well so lets just set it the same as our focus background
+::selection {
+ background: $euiFocusBackgroundColor;
+}
+
a {
text-decoration: none;
color: $euiColorPrimary;
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss b/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss
index 9b8ef04141b..941f092f878 100644
--- a/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss
+++ b/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss
@@ -1,2 +1,3 @@
-$euiButtonColorDisabled: tintOrShade($euiTextColor, 75%, 70%);
+$euiButtonColorDisabled: $euiColorDisabled;
+$euiButtonColorDisabledText: $euiColorDisabledText;
$euiButtonDefaultTransparency: .8;
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_states.scss b/src/themes/eui-amsterdam/global_styling/variables/_states.scss
index 1a5af550cda..b1276193260 100644
--- a/src/themes/eui-amsterdam/global_styling/variables/_states.scss
+++ b/src/themes/eui-amsterdam/global_styling/variables/_states.scss
@@ -6,5 +6,5 @@ $euiFocusRingAnimStartSize: 2px;
$euiFocusRingSize: 2px;
// Transparency
-$euiFocusTransparency: .9;
+$euiFocusTransparency: lightOrDarkTheme(.9, .7);
$euiFocusBackgroundColor: transparentize($euiColorPrimary, $euiFocusTransparency);
diff --git a/src/themes/eui-amsterdam/overrides/_button.scss b/src/themes/eui-amsterdam/overrides/_button.scss
index f894c3886c3..6154eebfea8 100644
--- a/src/themes/eui-amsterdam/overrides/_button.scss
+++ b/src/themes/eui-amsterdam/overrides/_button.scss
@@ -9,10 +9,13 @@
// Added exclusion of the `ghost` type of button
// so as not to override those specific styles from default theme
// And the only style that needs to change is the non-filled version
- &.euiButton-isDisabled:not(.euiButton--ghost):not(.euiButton--fill) {
- $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiButtonColorDisabled, 70%);
- background-color: transparentize($euiButtonColorDisabled, .7);
- color: makeHighContrastColor($euiButtonColorDisabled, $backgroundColorSimulated, 2);
+ &.euiButton-isDisabled:not(.euiButton--ghost) {
+ &,
+ &:hover {
+ $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiButtonColorDisabled, 90%);
+ background-color: transparentize($euiButtonColorDisabled, .9);
+ color: makeDisabledContrastColor($euiButtonColorDisabled, $backgroundColorSimulated);
+ }
}
}
@@ -51,9 +54,12 @@
}
// Fix ghost/disabled look specifically
-.euiButton.euiButton-isDisabled.euiButton--ghost:not(.euiButton--fill) {
+.euiButton.euiButton-isDisabled.euiButton--ghost,
+// adding fill type to override default theme
+.euiButton.euiButton-isDisabled.euiButton--ghost.euiButton--fill {
&,
&:focus {
- background-color: transparentize($euiButtonColorGhostDisabled, .7);
+ color: $euiButtonColorGhostDisabled;
+ background-color: transparentize($euiButtonColorGhostDisabled, .9);
}
}
diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/eui/eui_colors_dark.scss
index eb7a1ca7198..eae11a64edb 100644
--- a/src/themes/eui/eui_colors_dark.scss
+++ b/src/themes/eui/eui_colors_dark.scss
@@ -1,14 +1,13 @@
@import '../../global_styling/functions/index';
+// These colors stay the same no matter the theme
+$euiColorGhost: #FFF;
+$euiColorInk: #000;
+
// Core
$euiColorPrimary: #1BA9F5;
$euiColorSecondary: #7DE2D1;
$euiColorAccent: #F990C0;
-$euiColorHighlight: #2E2D25;
-
-// These colors stay the same no matter the theme
-$euiColorGhost: #FFF;
-$euiColorInk: #000;
// Status
$euiColorSuccess: $euiColorSecondary;
@@ -24,23 +23,30 @@ $euiColorDarkShade: #98A2B3;
$euiColorDarkestShade: #D4DAE5;
$euiColorFullShade: #FFF;
+// Backgrounds
+$euiPageBackgroundColor: shade($euiColorLightestShade, 30%);
+$euiColorHighlight: #2E2D25;
+
// Variations from core
$euiTextColor: #DFE5EF;
-$euiLinkColor: $euiColorPrimary;
-$euiShadowColor: #000;
-$euiShadowColorLarge: #000;
-$euiPageBackgroundColor: shade($euiColorLightestShade, 30%);
-$euiTextSubduedColor: makeHighContrastColor($euiColorMediumShade);
$euiTitleColor: $euiTextColor;
+$euiTextSubduedColor: makeHighContrastColor($euiColorMediumShade);
+$euiColorDisabled: shade($euiTextColor, 70%);
// Contrasty text variants
$euiColorPrimaryText: makeHighContrastColor($euiColorPrimary);
$euiColorSecondaryText: makeHighContrastColor($euiColorSecondary);
$euiColorAccentText: makeHighContrastColor($euiColorAccent);
$euiColorWarningText: makeHighContrastColor($euiColorWarning);
-$euiColorDangerText: makeHighContrastColor($euiColorDanger, $euiColorLightShade);
+$euiColorDangerText: makeHighContrastColor($euiColorDanger);
+$euiColorDisabledText: makeDisabledContrastColor($euiColorDisabled);
$euiColorSuccessText: $euiColorSecondaryText;
+$euiLinkColor: $euiColorPrimaryText;
// Charts
$euiColorChartLines: $euiColorLightShade;
$euiColorChartBand: tint($euiColorLightestShade, 2.5%);
+
+// Shadows
+$euiShadowColor: #000;
+$euiShadowColorLarge: #000;