Initial setup for Amsterdam theme (#2633)

* Add Amsterdam options to theme selector * Add simple override for panels * Add changelog, documentation and tweak color * Update pull request template to mention new theme * Clean up documentation * Fix grammer in wiki/theming.md Co-Authored-By: Caroline Horn <[email protected]> * Fix imports in amsterdam's global_styling Co-Authored-By: Caroline Horn <[email protected]> * Clean up amsterdam global_styling imports * Fix color importing issues * Fix duplicate in pull request template
elastic · Dec 16, 2019 · c7e7e94 · c7e7e94
1 parent c02628f
commit c7e7e94
Show file tree

Hide file tree

Showing 16 changed files with 230 additions and 7 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -4,7 +4,7 @@ Summarize your PR. If it includes design elements include a screenshot or gif.
 
 ### Checklist
 
-- [ ] Checked in **dark mode**
+- [ ] Check against **all themes** for compatability in both light and dark modes
 - [ ] Checked in **mobile**
 - [ ] Checked in **IE11** and **Firefox**
 - [ ] Props have proper **autodocs**

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,7 @@ No public interface changes since `17.2.1`.
 **NOTE: This release had an error in our documentation layer. Use 17.2.1 instead**
 
 - Improved a11y of `EuiNavDrawer` lock button state via `aria-pressed` ([#2643](https://github.com/elastic/eui/pull/2643))
+- Added new stylesheets for the EUI Amsterdam theme ([#2633](https://github.com/elastic/eui/pull/2633))
 - Added exports for available types related to `EuiDataGrid` ([#2640](https://github.com/elastic/eui/pull/2640))
 
 **Bug fixes**

diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js
@@ -16,6 +16,14 @@ export class GuideThemeSelector extends Component {
         text: 'Dark',
         value: 'dark',
       },
+      {
+        text: 'Amsterdam: Light',
+        value: 'amsterdam-light',
+      },
+      {
+        text: 'Amsterdam: Dark',
+        value: 'amsterdam-dark',
+      },
     ];
 
     this.state = {

diff --git a/src-docs/src/index.js b/src-docs/src/index.js
@@ -15,10 +15,13 @@ import { registerTheme } from './services';
 import Routes from './routes';
 import themeLight from './theme_light.scss';
 import themeDark from './theme_dark.scss';
+import themeAmsterdamLight from './theme_amsterdam_light.scss';
+import themeAmsterdamDark from './theme_amsterdam_dark.scss';
 
 registerTheme('light', [themeLight]);
-
 registerTheme('dark', [themeDark]);
+registerTheme('amsterdam-light', [themeAmsterdamLight]);
+registerTheme('amsterdam-dark', [themeAmsterdamDark]);
 
 // Set up app
 

diff --git a/src-docs/src/theme_amsterdam_dark.scss b/src-docs/src/theme_amsterdam_dark.scss
@@ -0,0 +1,11 @@
+// sass-lint:disable no-url-domains, no-url-protocols
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
+@import url('https://rsms.me/inter/inter-ui.css');
+
+@import '../../src/theme_amsterdam_dark';
+@import './components/guide_components';
+@import './views/suggest/global_filter_group';
+
+// Elastic charts
+@import '~@elastic/charts/dist/theme';
+@import '../../src/themes/charts/theme';
diff --git a/src-docs/src/theme_amsterdam_light.scss b/src-docs/src/theme_amsterdam_light.scss
@@ -0,0 +1,11 @@
+// sass-lint:disable no-url-domains, no-url-protocols
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
+@import url('https://rsms.me/inter/inter-ui.css');
+
+@import '../../src/theme_amsterdam_light';
+@import './components/guide_components';
+@import './views/suggest/global_filter_group';
+
+// Elastic charts
+@import '~@elastic/charts/dist/theme';
+@import '../../src/themes/charts/theme';
diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js
@@ -4,6 +4,8 @@ import { Link } from 'react-router';
 
 import lightColors from '!!sass-vars-to-js-loader!../../../../src/global_styling/variables/_colors.scss';
 import darkColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui/eui_colors_dark.scss';
+import lightAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss';
+import darkAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss';
 import { calculateContrast, rgbToHex } from '../../../../src/services';
 
 import { GuidePage } from '../../components';
@@ -152,9 +154,19 @@ export default class extends Component {
   };
 
   render() {
-    const palette =
-      this.props.selectedTheme === 'light' ? lightColors : darkColors;
     const { value } = this.state;
+    const { selectedTheme } = this.props;
+
+    let palette;
+    if (selectedTheme === 'amsterdam-dark') {
+      palette = darkAmsterdamColors;
+    } else if (selectedTheme === 'amsterdam-light') {
+      palette = { ...lightColors, ...lightAmsterdamColors };
+    } else if (selectedTheme === 'dark') {
+      palette = darkColors;
+    } else {
+      palette = lightColors;
+    }
 
     return (
       <GuidePage title="Color guidelines">

diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import lightColors from '!!sass-vars-to-js-loader?preserveKeys=true!../../../../src/global_styling/variables/_colors.scss';
 import darkColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui/eui_colors_dark.scss';
+import lightAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss';
+import darkAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss';
 import sizes from '!!sass-vars-to-js-loader?preserveKeys=true!../../../../src/global_styling/variables/_size.scss';
 import zindexs from '!!sass-vars-to-js-loader?preserveKeys=true!../../../../src/global_styling/variables/_z_index.scss';
 import animations from '!!sass-vars-to-js-loader?preserveKeys=true!../../../../src/global_styling/variables/_animations.scss';
@@ -358,7 +360,16 @@ const contrastExample = `// Make sure text passes a contrast check
 `;
 
 export const SassGuidelines = ({ selectedTheme }) => {
-  const palette = selectedTheme === 'light' ? lightColors : darkColors;
+  let palette;
+  if (selectedTheme === 'amsterdam-dark') {
+    palette = darkAmsterdamColors;
+  } else if (selectedTheme === 'amsterdam-light') {
+    palette = { ...lightColors, ...lightAmsterdamColors };
+  } else if (selectedTheme === 'dark') {
+    palette = darkColors;
+  } else {
+    palette = lightColors;
+  }
 
   return (
     <GuidePage title="Sass guidelines">

diff --git a/src/theme_amsterdam_dark.scss b/src/theme_amsterdam_dark.scss
@@ -0,0 +1,11 @@
+// These are variable overwrites used only for this theme.
+@import 'themes/eui-amsterdam/eui_amsterdam_colors_dark';
+
+// Global styling
+@import 'themes/eui-amsterdam/global_styling/index';
+
+// Components
+@import 'components/index';
+
+// Packages
+@import '../packages/index';
diff --git a/src/theme_amsterdam_light.scss b/src/theme_amsterdam_light.scss
@@ -0,0 +1,11 @@
+// This is the default theme.
+@import 'themes/eui-amsterdam/eui_amsterdam_colors_light';
+
+// Global styling
+@import 'themes/eui-amsterdam/global_styling/index';
+
+// Components
+@import 'components/index';
+
+// Packages
+@import '../packages/index';
diff --git a/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss b/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss
@@ -0,0 +1,71 @@
+// Core
+$euiColorPrimary: #238CFF;
+$euiColorSecondary: #7DE2D1;
+$euiColorAccent: #F990C0;
+$euiColorHighlight: #2E2D25;
+
+// These colors stay the same no matter the theme
+$euiColorGhost: #FFF;
+$euiColorInk: #000;
+
+// Status
+$euiColorSuccess: $euiColorSecondary;
+$euiColorWarning: #FFCE7A;
+$euiColorDanger: #F66;
+
+// Grays
+$euiColorEmptyShade: #1D1E24;
+$euiColorLightestShade: #25262E;
+$euiColorLightShade: #343741;
+$euiColorMediumShade: #535966;
+$euiColorDarkShade: #98A2B3;
+$euiColorDarkestShade: #D4DAE5;
+$euiColorFullShade: #FFF;
+
+// Variations from core
+$euiTextColor: #DFE5EF;
+$euiLinkColor: $euiColorPrimary;
+$euiFocusBackgroundColor: #232635;
+$euiShadowColor: #000;
+$euiShadowColorLarge: #000;
+
+// Visualization colors
+// Currently this is the same as light. It is required to list them for our docs to work
+
+$euiColorVis0: #00B3A4;
+$euiColorVis1: #3185FC;
+$euiColorVis2: #DB1374;
+$euiColorVis3: #490092;
+$euiColorVis4: #FEB6DB;
+$euiColorVis5: #E6C220;
+$euiColorVis6: #BFA180;
+$euiColorVis7: #F98510;
+$euiColorVis8: #461A0A;
+$euiColorVis9: #920000;
+
+$euiColorChartLines: #343741;
+$euiColorChartBand: #2A2C35;
+
+// Code
+
+$euiCodeBlockCommentColor: #656565;
+$euiCodeBlockSelectorTagColor: #C792EA;
+$euiCodeBlockStringColor: #C3E88D;
+$euiCodeBlockNumberColor: #F77669;
+$euiCodeBlockKeywordColor: #C792EA;
+$euiCodeBlockFunctionTitleColor: #75A5FF;
+$euiCodeBlockTagColor: #ABB2BF;
+$euiCodeBlockNameColor: #E06C75;
+$euiCodeBlockTypeColor: #DA4939;
+$euiCodeBlockAttributeColor: #80CBBF;
+$euiCodeBlockSymbolColor: #C792EA;
+$euiCodeBlockParamsColor: #EEFFF7;
+$euiCodeBlockMetaColor: #75A5FF;
+$euiCodeBlockTitleColor: #75A5FF;
+$euiCodeBlockSectionColor: #FFC66D;
+$euiCodeBlockAdditionBackgroundColor: #144212;
+$euiCodeBlockAdditionColor: #E6E1DC;
+$euiCodeBlockDeletionBackgroundColor: #600;
+$euiCodeBlockDeletionColor: #E6E1DC;
+$euiCodeBlockSelectorClassColor: #FFCB68;
+$euiCodeBlockSelectorIdColor: #F77669;
diff --git a/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss b/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
@@ -0,0 +1 @@
+$euiColorPrimary: #006DE4;
diff --git a/src/themes/eui-amsterdam/global_styling/index.scss b/src/themes/eui-amsterdam/global_styling/index.scss
@@ -0,0 +1,17 @@
+// Core
+
+// Functions need to be first, since we use them in our variables and mixin definitions
+@import '../../../global_styling/functions/index';
+
+// Variables come next, and are used in some mixins
+@import '../../../global_styling/variables/index';
+
+// Mixins provide generic code expansion through helpers
+@import '../../../global_styling/mixins/index';
+@import 'mixins/index';
+
+// Utility classes provide one-off selectors for common css problems
+@import '../../../global_styling/utility/index';
+
+// The reset file makes use of variables and mixins
+@import '../../../global_styling/reset/index';
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss
@@ -0,0 +1 @@
+@import 'panel';
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_panel.scss b/src/themes/eui-amsterdam/global_styling/mixins/_panel.scss
@@ -0,0 +1,51 @@
+@mixin euiPanel($selector) {
+  @if variable-exists(selector) == false {
+    @error 'A $selector must be provided to @mixin euiPanel().';
+  } @else {
+    #{$selector} {
+
+      @include euiBottomShadowSmall;
+      background-color: $euiColorEmptyShade;
+      border: none;
+      border-radius: $euiBorderRadius;
+      flex-grow: 1;
+
+      &#{$selector}--flexGrowZero {
+        flex-grow: 0;
+      }
+
+      &#{$selector}--isClickable {
+        // in case of button wrapper which inherently is inline-block and no width
+        display: block;
+        width: 100%;
+        text-align: left;
+
+        // transition the shadow
+        transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
+
+        &:hover,
+        &:focus {
+          @include euiSlightShadowHover;
+          transform: translateY(-2px);
+          cursor: pointer;
+        }
+      }
+
+      &#{$selector}--shadow {
+        @include euiBottomShadowMedium;
+
+        @if (lightness($euiTextColor) < 50) {
+          border-bottom-color: transparentize($euiShadowColor, .5);
+        } @else {
+          // Applied again here in case dark theme overrides light
+          border-bottom-color: $euiBorderColor;
+        }
+
+        &#{$selector}--isClickable:hover,
+        &#{$selector}--isClickable:focus {
+          @include euiBottomShadow($color: $euiShadowColor, $opacity: .2);
+        }
+      }
+    }
+  }
+}
diff --git a/wiki/theming.md b/wiki/theming.md
@@ -5,9 +5,12 @@ variables. Currently we maintain the following themes:
 
 * theme_light (the default EUI theme)
 * theme_dark (the same theme in dark)
+* theme_amsterdam_light (the next iteration of the EUI light theme)
+* theme_amsterdam_dark (the next iteration of the EUI dark theme)
 
-Each of these themes (outside of the default theme_light one) simply include variable
-overwrites that adjust colors and sizing to fit the needs of that theme.
+Each of these themes include variables,
+mixins, functions and other overwrites that adjust colors and sizing to fit the
+needs of that theme.
 
 ## How to create and test a theme