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

@@ -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)
 

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);
   }

src-docs/src/views/button/button.js

@@ -110,6 +110,32 @@ export default () => (
       </EuiFlexItem>
     </EuiFlexGroup>
 
+    <EuiFlexGroup gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButton color="text" onClick={() => {}}>
+          Text
+        </EuiButton>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiButton color="text" fill onClick={() => {}}>
+          Filled
+        </EuiButton>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiButton color="text" size="s" onClick={() => {}}>
+          Small
+        </EuiButton>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiButton color="text" size="s" fill onClick={() => {}}>
+          Small and filled
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+
     <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
         <EuiButton isDisabled onClick={() => {}}>

src-docs/src/views/guidelines/sass.js

@@ -454,7 +454,7 @@ export const SassGuidelines = ({ selectedTheme }) => {
             </p>
             <p>
               For example, depending upon what theme you use{' '}
-              <EuiCode>$EuiColorPrimary</EuiCode> will be a different hex value.
+              <EuiCode>$euiColorPrimary</EuiCode> will be a different hex value.
             </p>
           </EuiText>
           <EuiSpacer />

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);
+}

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.

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,20 +24,25 @@ $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;
 $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;

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);

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);

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;

src/themes/eui-amsterdam/global_styling/variables/_buttons.scss

@@ -1,2 +1,3 @@
-$euiButtonColorDisabled: tintOrShade($euiTextColor, 75%, 70%);
+$euiButtonColorDisabled: $euiColorDisabled;
+$euiButtonColorDisabledText: $euiColorDisabledText;
 $euiButtonDefaultTransparency: .8;

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);

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);
   }
 }

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;