From c7e7e9428021d1e25cbdcdd48dafea7cbd5cf546 Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Mon, 16 Dec 2019 16:56:27 -0600 Subject: [PATCH] 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 <549577+cchaos@users.noreply.github.com> * Fix imports in amsterdam's global_styling Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> * Clean up amsterdam global_styling imports * Fix color importing issues * Fix duplicate in pull request template --- .github/pull_request_template.md | 2 +- CHANGELOG.md | 1 + .../guide_theme_selector.js | 8 +++ src-docs/src/index.js | 5 +- src-docs/src/theme_amsterdam_dark.scss | 11 +++ src-docs/src/theme_amsterdam_light.scss | 11 +++ src-docs/src/views/guidelines/colors.js | 16 ++++- src-docs/src/views/guidelines/sass.js | 13 +++- src/theme_amsterdam_dark.scss | 11 +++ src/theme_amsterdam_light.scss | 11 +++ .../eui_amsterdam_colors_dark.scss | 71 +++++++++++++++++++ .../eui_amsterdam_colors_light.scss | 1 + .../eui-amsterdam/global_styling/index.scss | 17 +++++ .../global_styling/mixins/_index.scss | 1 + .../global_styling/mixins/_panel.scss | 51 +++++++++++++ wiki/theming.md | 7 +- 16 files changed, 230 insertions(+), 7 deletions(-) create mode 100644 src-docs/src/theme_amsterdam_dark.scss create mode 100644 src-docs/src/theme_amsterdam_light.scss create mode 100644 src/theme_amsterdam_dark.scss create mode 100644 src/theme_amsterdam_light.scss create mode 100644 src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss create mode 100644 src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss create mode 100644 src/themes/eui-amsterdam/global_styling/index.scss create mode 100644 src/themes/eui-amsterdam/global_styling/mixins/_index.scss create mode 100644 src/themes/eui-amsterdam/global_styling/mixins/_panel.scss diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 196e7290d7f..ad464bb4c98 100644 --- 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 index 048796477e4..ff52e7fcb9f 100644 --- 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 index 1daf8058f15..968fa2673fa 100644 --- 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 index 3d2ce04c289..34590ed2164 100644 --- 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 new file mode 100644 index 00000000000..cb6f21c0804 --- /dev/null +++ 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 new file mode 100644 index 00000000000..60cb7e6156d --- /dev/null +++ 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 index ae5e9f98100..090d47c65d6 100644 --- 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 ( diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js index 3bbfd73934e..cc7006f20ac 100644 --- 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 ( diff --git a/src/theme_amsterdam_dark.scss b/src/theme_amsterdam_dark.scss new file mode 100644 index 00000000000..47c18df4ea0 --- /dev/null +++ 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 new file mode 100644 index 00000000000..48b987006b3 --- /dev/null +++ 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 new file mode 100644 index 00000000000..baa4ff495cf --- /dev/null +++ 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 new file mode 100644 index 00000000000..9d400244f7a --- /dev/null +++ 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 new file mode 100644 index 00000000000..0c105e46862 --- /dev/null +++ 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 new file mode 100644 index 00000000000..a5b58fb8b6e --- /dev/null +++ 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 new file mode 100644 index 00000000000..fd11002d11a --- /dev/null +++ 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 index 905609571f7..5f479a4d75b 100644 --- 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