From e152d53a270b63fad934c42c65f96be91593543e Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 6 Mar 2019 20:17:57 -0800 Subject: [PATCH 1/7] dark mode redux --- src/components/form/_mixins.scss | 2 +- src/components/form/_variables.scss | 2 +- src/themes/eui/eui_colors_dark.scss | 27 +++++++++++---------------- 3 files changed, 13 insertions(+), 18 deletions(-) diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss index 3a04ac29c22..2260edfdbc9 100644 --- a/src/components/form/_mixins.scss +++ b/src/components/form/_mixins.scss @@ -101,7 +101,7 @@ @mixin euiFormControlFocusStyle($borderOnly: false) { // sass-lint:disable-block indentation, empty-args - background-color: tintOrShade($euiColorEmptyShade, 0%, 50%); + background-color: tintOrShade($euiColorEmptyShade, 0%, 40%); background-image: euiFormControlGradient(); background-size: 100% 100%; /* 3 */ diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss index 8291ada09aa..deebeac4b08 100644 --- a/src/components/form/_variables.scss +++ b/src/components/form/_variables.scss @@ -14,7 +14,7 @@ $euiSwitchThumbSize: $euiSwitchHeight !default; $euiSwitchIconHeight: $euiSize !default; // Coloring -$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%) !default; +$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default; $euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default; $euiFormBorderColor: transparentize($euiColorFullShade, .9) !default; $euiFormBorderDisabledColor: transparentize($euiColorFullShade, .92) !default; diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/eui/eui_colors_dark.scss index de71af5fb6a..d21464897e6 100644 --- a/src/themes/eui/eui_colors_dark.scss +++ b/src/themes/eui/eui_colors_dark.scss @@ -1,29 +1,24 @@ // Dark theme overides -$euiColorEmptyShade: #222; -$euiColorLightestShade: #242424; -$euiColorLightShade: #333; -$euiColorMediumShade: #444; -$euiColorDarkShade: #8A8A8A; -$euiColorDarkestShade: #F5F5F5; +$euiColorEmptyShade: #1D1E24; +$euiColorLightestShade: #25262E; +$euiColorLightShade: #343741; +$euiColorMediumShade: #535966; +$euiColorDarkShade: #D4DAE5; +$euiColorDarkestShade: #F5F7FA; $euiColorFullShade: #FFF; -$euiColorMediumShade: #494E51; -$euiColorPrimary: #4DA1C0; -$euiColorWarning: #C06C4C; -$euiColorDanger: #BF4D4D; +$euiColorPrimary: #1BA9F5; +$euiColorSecondary: #7DE2D1; +$euiColorWarning: #FF977A; +$euiColorDanger: #F990C0; $euiTextColor: #DDD; -$euiFocusBackgroundColor: #191919; +$euiFocusBackgroundColor: #232635; $euiShadowColor: #000; $euiShadowColorLarge: #000; -$euiModalBorderColor: $euiColorLightShade; -$euiFlyoutBorderColor: $euiColorLightShade; // Code -$euiCodeBlockBackgroundColor: #2B2B2D; -$euiCodeBlockColor: #CDD3D8; -$euiCodeBlockSelectedBackgroundColor: #3E4451; $euiCodeBlockCommentColor: #656565; $euiCodeBlockSelectorTagColor: #C792EA; $euiCodeBlockStringColor: #C3E88D; From a2facecb1ccf0c396ac90ccbe19c0b5e2330f2a2 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 6 Mar 2019 21:24:49 -0800 Subject: [PATCH 2/7] tsass and color pages are aware of theme --- src-docs/src/views/app_view.js | 2 +- src-docs/src/views/guidelines/colors.js | 22 +- src-docs/src/views/guidelines/sass.js | 991 ++++++++++++------------ src/themes/eui/eui_colors_dark.scss | 19 +- 4 files changed, 532 insertions(+), 502 deletions(-) diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js index 5d44884d7a8..094f21d07c5 100644 --- a/src-docs/src/views/app_view.js +++ b/src-docs/src/views/app_view.js @@ -80,7 +80,7 @@ export class AppView extends Component {
- {children} + {React.cloneElement(children, { selectedTheme: theme })}
diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js index 2474516e2d7..b984ee4feb6 100644 --- a/src-docs/src/views/guidelines/colors.js +++ b/src-docs/src/views/guidelines/colors.js @@ -5,6 +5,7 @@ import { } 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 { calculateContrast, rgbToHex } from '../../../../src/services'; import { @@ -60,14 +61,14 @@ const ratingAA = AA; const ratingAA18 = AA18; -function renderPaletteColor(color, index) { +function renderPaletteColor(palette, color, index) { return ( {(copy) => ( - + )} @@ -78,13 +79,13 @@ function renderPaletteColor(color, index) { -

{rgbToHex(lightColors[color].rgba).toUpperCase()}

+

{rgbToHex(palette[color].rgba).toUpperCase()}

- rgb({lightColors[color].r}, {lightColors[color].g}, {lightColors[color].b}) + rgb({palette[color].r}, {palette[color].g}, {palette[color].b})

@@ -146,6 +147,7 @@ export default class extends Component { }; render() { + const palette = (this.props.selectedTheme === 'light') ? lightColors : darkColors; const { value } = this.state; return ( @@ -167,7 +169,7 @@ export default class extends Component { {allowedColors.map(function (color, index) { - return renderPaletteColor(color, index); + return renderPaletteColor(palette, color, index); })} @@ -230,8 +232,8 @@ export default class extends Component { {allowedColors.map(function (color2, index) { const contrast = ( calculateContrast( - [lightColors[color].r, lightColors[color].g, lightColors[color].b], - [lightColors[color2].r, lightColors[color2].g, lightColors[color2].b], + [palette[color].r, palette[color].g, palette[color].b], + [palette[color2].r, palette[color2].g, palette[color2].b], ) ); @@ -275,8 +277,8 @@ color: $${color2};`

{visColors.map(function (color, index) { - return renderPaletteColor(color, index); + return renderPaletteColor(palette, color, index); })} diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js index c25a394dcc7..341b0718885 100644 --- a/src-docs/src/views/guidelines/sass.js +++ b/src-docs/src/views/guidelines/sass.js @@ -1,5 +1,6 @@ -import React from 'react'; +import React, { Component } 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 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'; @@ -116,7 +117,7 @@ const euiOverFlowShadows = [ const euiBreakPoints = Object.getOwnPropertyNames(breakpoints.euiBreakpoints); -function renderPaletteColor(color) { +function renderPaletteColor(palette, color) { let optionalDefault; if (color === 'euiTextColor') { optionalDefault = ( @@ -129,7 +130,7 @@ function renderPaletteColor(color) { return ( -

+
${color} @@ -331,604 +332,614 @@ const contrastExample = (`// Make sure text passes a contrast check } `); -export default() => ( +export default class extends Component { + constructor(props) { + super(props); + } - + render() { + const palette = (this.props.selectedTheme === 'light') ? lightColors : darkColors; - -

Core variables

- + return ( + - - - -
- -

Sizing

- + +

Core variables

+ - + - {euiSizes.map(function (size, index) { - return renderSize(size, index); - })} + + +
+ +

Sizing

+ - + - -

Z-index

- + {euiSizes.map(function (size, index) { + return renderSize(size, index); + })} - + - {euiLevels.map(function (level, index) { - return renderLevel(level, index); - })} -
+ +

Z-index

+ - - - -

Color

- + - + {euiLevels.map(function (level, index) { + return renderLevel(level, index); + })} +
- {euiColors.map(function (color, index) { - return renderPaletteColor(color, index); - })} - - - + + + +

Color

+ - + - Going beyond the provided colors + {euiColors.map(function (color, index) { + return renderPaletteColor(palette, color, index); + })} - + + - - - -

Theming patterns

- + - - -

- Often you need to go beyond the provided color set. When doing so always use - color functions to modify the base set. Here are some examples. -

- - + Going beyond the provided colors - - -
- - - $euiCodeDanger - - - - - -
- - - tint($euiCodeDanger, 30%) - - - - - -
- - - shade($euiCodeDanger, 30%) - - + - - -

- Remember that EUI provides dark and light mode theming support. Sometimes the traditional - color functions don't give enough flexibility for both modes. -

-

- For example, depending upon what theme you use $EuiColorPrimary will be a different - hex value. -

- - + + + +

Theming patterns

+ - - -
- - - $euiColorPrimary - - - + +

- is #0079A5 in the light theme + Often you need to go beyond the provided color set. When doing so always use + color functions to modify the base set. Here are some examples.

- - - - - -
- - - $euiColorPrimary - - - + + + + +
+ + + $euiCodeDanger + + + + + +
+ + + tint($euiCodeDanger, 30%) + + + + + +
+ + + shade($euiCodeDanger, 30%) + + + + + +

+ Remember that EUI provides dark and light mode theming support. Sometimes the traditional + color functions don't give enough flexibility for both modes. +

- is #4da1c0 in the dark theme + For example, depending upon what theme you use $EuiColorPrimary will be a different + hex value. +

+ + + + + +
+ + + $euiColorPrimary + + + +

+ is #0079A5 in the light theme +

+ + + + + + +
+ + + $euiColorPrimary + + + +

+ is #4da1c0 in the dark theme +

+ + + + + + +

+ Taking the default primary color above we want to tint the color + in the light mode, but shade it in the dark mode. This makes the + background color more subtle in both use cases.

- - - - -

- Taking the default primary color above we want to tint the color - in the light mode, but shade it in the dark mode. This makes the - background color more subtle in both use cases. -

- + - + {tintOrShadeExample} - {tintOrShadeExample} + - + + +
Light theme
+ + +
Dark theme
+ + - - -
Light theme
- - -
Dark theme
 - - + + +

Color contrast patterns

+ - - -

Color contrast patterns

- + - + +

+ EUI provides some nifty color functions for auto-adjusting color to pass AA contrast checks. + Often this is needed when using the base colors on top of each other. Here is an example + similar to our callouts with a pesky orange. +

+ - -

- EUI provides some nifty color functions for auto-adjusting color to pass AA contrast checks. - Often this is needed when using the base colors on top of each other. Here is an example - similar to our callouts with a pesky orange. -

- + - + {contrastExample} - {contrastExample} + - +
+ This orange text now passes a contrast check! +
-
- This orange text now passes a contrast check! -
+ - + +

More on color contrast

+ - -

More on color contrast

- + - + +

+ Consult the larger color guidelines page + for a better explanation about passing color contrast. +

+ - + + + + + + Typography + +

- Consult the larger color guidelines page - for a better explanation about passing color contrast. + View the variable + {' '} and mixins + {' '}Sass code for typography. + For most of your components we recommend using EuiText or + {' '}EuiTitle instead of these Sass variables.

- - - - - Typography - - -

- View the variable - {' '} and mixins - {' '}Sass code for typography. - For most of your components we recommend using EuiText or - {' '}EuiTitle instead of these Sass variables. -

- - - - - It is more common to use these as a mixin (e.g. @include euiFontSizeS;) - to automatically apply line-height as well as size. - - } - /> - - - - - -

Text sizes

- + + It is more common to use these as a mixin (e.g. @include euiFontSizeS;) + to automatically apply line-height as well as size. + + } + /> - {euiFontSizes.map(function (size, index) { - return renderFontSize(size, index); - })} - - -
- -

Text colors

- + + + +

Text sizes

+ + + + {euiFontSizes.map(function (size, index) { + return renderFontSize(size, index); + })} + + +
+ +

Text colors

+ + + + + {euiTextColors.map(function (color, index) { + return renderPaletteColor(palette, color, index); + })} + + + + +

Font families

+ + + + + + + Abc + + + @include euiFont; + + + + + + Abc + + + @include euiCodeFont; + + +
+ + - + - {euiTextColors.map(function (color, index) { - return renderPaletteColor(color, index); - })} + Borders - - - -

Font families

- - - - - - - Abc - - - @include euiFont; - - - - - - Abc - - - @include euiCodeFont; - - -
- - + - + +

EUI provides some helper variables for setting common border types.

+ - Borders + - + + {euiBorders.map(function (border, index) { + return renderBorder(border, index); + })} + - -

EUI provides some helper variables for setting common border types.

- + - + +

In addition, you can utilize $euiBorderRadius to round the corners.

+ - - {euiBorders.map(function (border, index) { - return renderBorder(border, index); - })} - + - + + + + {borderRadiusExample} + + + - -

In addition, you can utilize $euiBorderRadius to round the corners.

- + Shadow and Depth - + + - - - - {borderRadiusExample} - - - + +

Use mixins for shadows

+ - Shadow and Depth + +

+ View the Sass code for shadow mixins. +

+ - - + - -

Use mixins for shadows

- + {euiShadows.map(function (shadow, index) { + return renderShadow(shadow, index); + })} + + - -

- View the Sass code for shadow mixins. -

- + +

Shadows to create graceful overflows

+ - + +

+ Primarily used in modals and flyouts, the overflow shadows add a white + glow to subtly hide the content they float above. +

+ - {euiShadows.map(function (shadow, index) { - return renderShadow(shadow, index); - })} - - + + +
+ +

+ Minima reprehenderit aperiam at in ea. Veniam nihil quod tempore. + Dolores sit quo expedita voluptate libero. + Consequuntur atque nulla atque nemo tenetur numquam. + Assumenda aspernatur qui aut sit. Aliquam doloribus iure sint id. + Possimus dolor qui soluta cum id tempore ea illum. + Facilis voluptatem aut aut ut similique ut. + Sed repellendus commodi iure officiis exercitationem praesentium + dolor. Ratione non ut nulla accusamus et. Optio laboriosam id + incidunt. Ipsam voluptate ab quia necessitatibus sequi earum + voluptate. Porro tempore et veritatis quo omnis. Eaque ut libero + tempore sit placeat maxime laudantium. + Mollitia tempore minus qui autem modi adipisci ad. Iste reprehenderit + accusamus voluptatem velit. Quidem delectus eos veritatis et vitae + et nisi. Doloribus ut corrupti voluptates qui exercitationem dolores. +

+ + {euiOverFlowShadows.map(function (shadow, index) { + return renderShadow(shadow, index); + })} +
+ + + + +

Adding color to shadows

+ + + +

Most shadow mixins can also accept color.

+ - -

Shadows to create graceful overflows

- + + +
+ + @include euiBottomShadowLarge(desaturate($euiColorPrimary, 30%)); + +
+ + + + - + Media queries and breakpoints + + +

+ View the Sass code for media queries. +

- Primarily used in modals and flyouts, the overflow shadows add a white - glow to subtly hide the content they float above. + Breakpoints in EUI are provided through the use of a Sass + mixin @include euiBreakpoint() that + accepts an array of sizes.

- -
- -

- Minima reprehenderit aperiam at in ea. Veniam nihil quod tempore. - Dolores sit quo expedita voluptate libero. - Consequuntur atque nulla atque nemo tenetur numquam. - Assumenda aspernatur qui aut sit. Aliquam doloribus iure sint id. - Possimus dolor qui soluta cum id tempore ea illum. - Facilis voluptatem aut aut ut similique ut. - Sed repellendus commodi iure officiis exercitationem praesentium - dolor. Ratione non ut nulla accusamus et. Optio laboriosam id - incidunt. Ipsam voluptate ab quia necessitatibus sequi earum - voluptate. Porro tempore et veritatis quo omnis. Eaque ut libero - tempore sit placeat maxime laudantium. - Mollitia tempore minus qui autem modi adipisci ad. Iste reprehenderit - accusamus voluptatem velit. Quidem delectus eos veritatis et vitae - et nisi. Doloribus ut corrupti voluptates qui exercitationem dolores. -

- - {euiOverFlowShadows.map(function (shadow, index) { - return renderShadow(shadow, index); - })} -
- - - - -

Adding color to shadows

- - - -

Most shadow mixins can also accept color.

- - +
-
- - @include euiBottomShadowLarge(desaturate($euiColorPrimary, 30%)); - -
- - - - + + +
+ +

Breakpoint sizing

+ - Media queries and breakpoints + - -

- View the Sass code for media queries. -

-

- Breakpoints in EUI are provided through the use of a Sass - mixin @include euiBreakpoint() that - accepts an array of sizes. -

- + {euiBreakPoints.map(function (size, index) { + return renderBreakpoint(size, index); + })} - -
- - - -
- -

Breakpoint sizing

- +
- + + + +

Mixin usage

+ - {euiBreakPoints.map(function (size, index) { - return renderBreakpoint(size, index); - })} + +

Target mobile devices only

 + + {'@include euiBreakpoint(\'xs\',\'s\') {...}'} + -
+ - - - -

Mixin usage

- +

Target mobile and tablets

 + + {'@include euiBreakpoint(\'xs\', \'s\', \'m\') {...}'} + - + -

Target mobile devices only

 - - {'@include euiBreakpoint(\'xs\',\'s\') {...}'} - +

Target tablets only

 + + {'@include euiBreakpoint(\'m\') {...}'} + - + -

Target mobile and tablets

 - - {'@include euiBreakpoint(\'xs\', \'s\', \'m\') {...}'} - +

Target very wide displays only

 + + {'@include euiBreakpoint(\'xl\') {...}'} + - + + + -

Target tablets only

 - - {'@include euiBreakpoint(\'m\') {...}'} - + + Animation + +

+ View the Sass code for animation. +

+

+ EUI utilizes the following constants to maintain a similar 'bounce' to its animations. + That said, animations are tricky, and if they aren't working for your specific application + this is the one place where we think it's OK to come up with your own rules. +

+ + + + +

Speed

+ -

Target very wide displays only

 - - {'@include euiBreakpoint(\'xl\') {...}'} - + - - - - - - - Animation - -

- View the Sass code for animation. -

-

- EUI utilizes the following constants to maintain a similar 'bounce' to its animations. - That said, animations are tricky, and if they aren't working for your specific application - this is the one place where we think it's OK to come up with your own rules. -

- - - - - -

Speed

- - - - - {euiAnimationSpeeds.map(function (speed, index) { - return renderAnimationSpeed(speed, index); - })} - - - -

Timing

- + {euiAnimationSpeeds.map(function (speed, index) { + return renderAnimationSpeed(speed, index); + })} + + + +

Timing

+ - + - {euiAnimationTimings.map(function (speed, index) { - return renderAnimationTiming(speed, index); - })} - - + {euiAnimationTimings.map(function (speed, index) { + return renderAnimationTiming(speed, index); + })} + + - + - Sass best practices + Sass best practices - + - - - -

Component based naming

-

- EUI is written in a BEMish style with the addition of verb states (ex: *-isLoading). - Below is an example of proper formatting. -

- - - {bemExample} - - - -

Writing Sass the EUI way

-

- In general, when writing new SCSS in a project that installs EUI as a dependency - try to follow these best practices: -

- - - -
    -
  • Utilize color variables and functions rather than hard-coded values
    • -
  • Utilize the sizing variables for padding and margins
    • -
  • Utilize the animation variables for animations when possible
    • -
  • Utilize the responsive mixins for all screen width calculations
    • -
  • Utilize the typography mixins and variables for all font family, weight, and sizing
    • -
  • Utilize the shadow mixins and z-index variables to manage depth
    • -
  • Utilize the border and border-radius variable to handle border usage
    • -
  • Minimize your overwrites and try to make new Sass additive in nature
    • -
- + + + +

Component based naming

+

+ EUI is written in a BEMish style with the addition of verb states (ex: *-isLoading). + Below is an example of proper formatting. +

+ + + {bemExample} + + + +

Writing Sass the EUI way

+

+ In general, when writing new SCSS in a project that installs EUI as a dependency + try to follow these best practices: +

+ + + +
    +
  • Utilize color variables and functions rather than hard-coded values
    • +
  • Utilize the sizing variables for padding and margins
    • +
  • Utilize the animation variables for animations when possible
    • +
  • Utilize the responsive mixins for all screen width calculations
    • +
  • Utilize the typography mixins and variables for all font family, weight, and sizing
    • +
  • Utilize the shadow mixins and z-index variables to manage depth
    • +
  • Utilize the border and border-radius variable to handle border usage
    • +
  • Minimize your overwrites and try to make new Sass additive in nature
    • +
+ - + - -

Importing EUI global Sass

- + +

Importing EUI global Sass

+ - + - -

- Most EUI based projects should already import the EUI global - scope. For example, Kibana has its own - liner that will give you everything on this page. -

- - - - {importKibanaExample} - - - -

- If you want to construct your own import, you would just need to - import the following core files into a fresh Sass project. -

- + +

+ Most EUI based projects should already import the EUI global + scope. For example, Kibana has its own + liner that will give you everything on this page. +

+ + + + {importKibanaExample} + + + +

+ If you want to construct your own import, you would just need to + import the following core files into a fresh Sass project. +

+ - + - - {importOutsideExample} - + + {importOutsideExample} + - - + + - -); + + ); + } +} diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/eui/eui_colors_dark.scss index d21464897e6..32a35034edf 100644 --- a/src/themes/eui/eui_colors_dark.scss +++ b/src/themes/eui/eui_colors_dark.scss @@ -10,13 +10,30 @@ $euiColorFullShade: #FFF; $euiColorPrimary: #1BA9F5; $euiColorSecondary: #7DE2D1; $euiColorWarning: #FF977A; -$euiColorDanger: #F990C0; +$euiColorAccent: #F990C0; +$euiColorDanger: #F66; +$euiColorSuccess: $euiColorSecondary; +$euiColorGhost: #FFF; $euiTextColor: #DDD; +$euiLinkColor: $euiColorPrimary; $euiFocusBackgroundColor: #232635; $euiShadowColor: #000; $euiShadowColorLarge: #000; +// Visualization colors + +$euiColorVis0: #00B3A4 !default; +$euiColorVis1: #3185FC !default; +$euiColorVis2: #DB1374 !default; +$euiColorVis3: #490092 !default; +$euiColorVis4: #FEB6DB !default; +$euiColorVis5: #E6C220 !default; +$euiColorVis6: #BFA180 !default; +$euiColorVis7: #F98510 !default; +$euiColorVis8: #461A0A !default; +$euiColorVis9: #920000 !default; + // Code $euiCodeBlockCommentColor: #656565; From 4cb94bf28fdb30e4fb1529ec30b2a6b978d830a7 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 6 Mar 2019 21:36:19 -0800 Subject: [PATCH 3/7] remove default --- src/themes/eui/eui_colors_dark.scss | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/eui/eui_colors_dark.scss index 32a35034edf..5f0788cf40a 100644 --- a/src/themes/eui/eui_colors_dark.scss +++ b/src/themes/eui/eui_colors_dark.scss @@ -23,16 +23,16 @@ $euiShadowColorLarge: #000; // Visualization colors -$euiColorVis0: #00B3A4 !default; -$euiColorVis1: #3185FC !default; -$euiColorVis2: #DB1374 !default; -$euiColorVis3: #490092 !default; -$euiColorVis4: #FEB6DB !default; -$euiColorVis5: #E6C220 !default; -$euiColorVis6: #BFA180 !default; -$euiColorVis7: #F98510 !default; -$euiColorVis8: #461A0A !default; -$euiColorVis9: #920000 !default; +$euiColorVis0: #00B3A4; +$euiColorVis1: #3185FC; +$euiColorVis2: #DB1374; +$euiColorVis3: #490092; +$euiColorVis4: #FEB6DB; +$euiColorVis5: #E6C220; +$euiColorVis6: #BFA180; +$euiColorVis7: #F98510; +$euiColorVis8: #461A0A; +$euiColorVis9: #920000; // Code From 13b4e5c355caf9d9d2a1b4259517b1b74bda9374 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 6 Mar 2019 21:55:17 -0800 Subject: [PATCH 4/7] adjustments --- src/global_styling/variables/_colors.scss | 2 +- src/themes/eui/eui_colors_dark.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss index 6b3bce9441a..99ec08a50d3 100644 --- a/src/global_styling/variables/_colors.scss +++ b/src/global_styling/variables/_colors.scss @@ -26,7 +26,7 @@ $euiTextColor: $euiColorDarkestShade !default; $euiTitleColor: shadeOrTint($euiTextColor, 50%, 0%) !default; $euiLinkColor: $euiColorPrimary !default; $euiFocusBackgroundColor: tintOrShade($euiColorPrimary, 90%, 50%) !default; -$euiPageBackgroundColor: tintOrShade($euiColorLightestShade, 50%, 25%) !default; +$euiPageBackgroundColor: tintOrShade($euiColorLightestShade, 50%, 30%) !default; // Visualization colors diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/eui/eui_colors_dark.scss index 5f0788cf40a..068225667be 100644 --- a/src/themes/eui/eui_colors_dark.scss +++ b/src/themes/eui/eui_colors_dark.scss @@ -14,7 +14,7 @@ $euiColorAccent: #F990C0; $euiColorDanger: #F66; $euiColorSuccess: $euiColorSecondary; $euiColorGhost: #FFF; -$euiTextColor: #DDD; +$euiTextColor: #DFE5EF; $euiLinkColor: $euiColorPrimary; $euiFocusBackgroundColor: #232635; From f0653271a1684f63b8c9612dbe158ca83ed2caee Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 7 Mar 2019 09:55:45 -0800 Subject: [PATCH 5/7] organize the dark theme scss file --- src/themes/eui/eui_colors_dark.scss | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/eui/eui_colors_dark.scss index 068225667be..853e201186c 100644 --- a/src/themes/eui/eui_colors_dark.scss +++ b/src/themes/eui/eui_colors_dark.scss @@ -1,5 +1,15 @@ -// Dark theme overides +// Code +$euiColorPrimary: #1BA9F5; +$euiColorSecondary: #7DE2D1; +$euiColorAccent: #F990C0; +$euiColorGhost: #FFF; +// Status +$euiColorSuccess: $euiColorSecondary; +$euiColorWarning: #FF977A; +$euiColorDanger: #F66; + +// Grays $euiColorEmptyShade: #1D1E24; $euiColorLightestShade: #25262E; $euiColorLightShade: #343741; @@ -7,21 +17,17 @@ $euiColorMediumShade: #535966; $euiColorDarkShade: #D4DAE5; $euiColorDarkestShade: #F5F7FA; $euiColorFullShade: #FFF; -$euiColorPrimary: #1BA9F5; -$euiColorSecondary: #7DE2D1; -$euiColorWarning: #FF977A; -$euiColorAccent: #F990C0; -$euiColorDanger: #F66; -$euiColorSuccess: $euiColorSecondary; -$euiColorGhost: #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; From 0103ea3abbec646e4e6eaa9a309e1c656ab9e5ce Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 7 Mar 2019 10:18:15 -0800 Subject: [PATCH 6/7] guidelines are stateless --- src-docs/src/routes.js | 2 +- src-docs/src/views/guidelines/sass.js | 1017 ++++++++++++------------- 2 files changed, 507 insertions(+), 512 deletions(-) diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index bbaf7fe1e6b..1477b59fa4e 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -25,7 +25,7 @@ import ColorGuidelines import ModalGuidelines from './views/guidelines/modals'; -import SassGuidelines +import { SassGuidelines } from './views/guidelines/sass'; import TextScales diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js index 341b0718885..3233094ef7b 100644 --- a/src-docs/src/views/guidelines/sass.js +++ b/src-docs/src/views/guidelines/sass.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +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 sizes from '!!sass-vars-to-js-loader?preserveKeys=true!../../../../src/global_styling/variables/_size.scss'; @@ -332,614 +332,609 @@ const contrastExample = (`// Make sure text passes a contrast check } `); -export default class extends Component { - constructor(props) { - super(props); - } - - render() { - - const palette = (this.props.selectedTheme === 'light') ? lightColors : darkColors; - - return ( - +export const SassGuidelines = ({ + selectedTheme +}) => { + const palette = (selectedTheme === 'light') ? lightColors : darkColors; - -

Core variables

- - - - - - -
- -

Sizing

- + return ( + - + +

Core variables

+ - {euiSizes.map(function (size, index) { - return renderSize(size, index); - })} + - + + +
+ +

Sizing

+ - -

Z-index

- + - + {euiSizes.map(function (size, index) { + return renderSize(size, index); + })} - {euiLevels.map(function (level, index) { - return renderLevel(level, index); - })} -
+ - - -

Color

+

Z-index

 - {euiColors.map(function (color, index) { - return renderPaletteColor(palette, color, index); + {euiLevels.map(function (level, index) { + return renderLevel(level, index); })} +
- - + + + +

Color

+ - + - Going beyond the provided colors + {euiColors.map(function (color, index) { + return renderPaletteColor(palette, color, index); + })} - + + + + + + Going beyond the provided colors + + + + + + +

Theming patterns

+ + + + +

+ Often you need to go beyond the provided color set. When doing so always use + color functions to modify the base set. Here are some examples. +

+ + + + + +
+ + + $euiCodeDanger + + + + + +
+ + + tint($euiCodeDanger, 30%) + + + + + +
+ + + shade($euiCodeDanger, 30%) + + + + + +

+ Remember that EUI provides dark and light mode theming support. Sometimes the traditional + color functions don't give enough flexibility for both modes. +

+

+ For example, depending upon what theme you use $EuiColorPrimary will be a different + hex value. +

+ + + + + +
+ + + $euiColorPrimary + + + +

+ is #0079A5 in the light theme +

+ + + + + + +
+ + + $euiColorPrimary + + + +

+ is #4da1c0 in the dark theme +

+ + + - - - -

Theming patterns

- + + +

+ Taking the default primary color above we want to tint the color + in the light mode, but shade it in the dark mode. This makes the + background color more subtle in both use cases. +

+ - - -

- Often you need to go beyond the provided color set. When doing so always use - color functions to modify the base set. Here are some examples. -

- - + - - -
- - - $euiCodeDanger - - - - - -
- - - tint($euiCodeDanger, 30%) - - - - - -
- - - shade($euiCodeDanger, 30%) - - + {tintOrShadeExample} - - -

- Remember that EUI provides dark and light mode theming support. Sometimes the traditional - color functions don't give enough flexibility for both modes. -

-

- For example, depending upon what theme you use $EuiColorPrimary will be a different - hex value. -

- - + - - -
- - - $euiColorPrimary - - - -

- is #0079A5 in the light theme -

- - - - - - -
- - - $euiColorPrimary - - - -

- is #4da1c0 in the dark theme -

- - - - - - -

- Taking the default primary color above we want to tint the color - in the light mode, but shade it in the dark mode. This makes the - background color more subtle in both use cases. -

- + + +
Light theme
+ + +
Dark theme
+ + - + - {tintOrShadeExample} + + +

Color contrast patterns

+ - + - - -
Light theme
- - -
Dark theme
- - + +

+ EUI provides some nifty color functions for auto-adjusting color to pass AA contrast checks. + Often this is needed when using the base colors on top of each other. Here is an example + similar to our callouts with a pesky orange. +

+ - + - - -

Color contrast patterns

- + {contrastExample} - + - -

- EUI provides some nifty color functions for auto-adjusting color to pass AA contrast checks. - Often this is needed when using the base colors on top of each other. Here is an example - similar to our callouts with a pesky orange. -

- +
+ This orange text now passes a contrast check! +
- + - {contrastExample} + +

More on color contrast

+ - + -
- This orange text now passes a contrast check! -
+ +

+ Consult the larger color guidelines page + for a better explanation about passing color contrast. +

+ - + + + + + Typography + + +

+ View the variable + {' '} and mixins + {' '}Sass code for typography. + For most of your components we recommend using EuiText or + {' '}EuiTitle instead of these Sass variables. +

+ + + + + It is more common to use these as a mixin (e.g. @include euiFontSizeS;) + to automatically apply line-height as well as size. + + } + /> + + + + + +

Text sizes

+ + + + {euiFontSizes.map(function (size, index) { + return renderFontSize(size, index); + })} + + +
-

More on color contrast

+

Text colors

 - -

- Consult the larger color guidelines page - for a better explanation about passing color contrast. -

- - + {euiTextColors.map(function (color, index) { + return renderPaletteColor(palette, color, index); + })} - - - - Typography - - -

- View the variable - {' '} and mixins - {' '}Sass code for typography. - For most of your components we recommend using EuiText or - {' '}EuiTitle instead of these Sass variables. -

- - - - It is more common to use these as a mixin (e.g. @include euiFontSizeS;) - to automatically apply line-height as well as size. - - } - /> - - - - - -

Text sizes

+ +

Font families

 - {euiFontSizes.map(function (size, index) { - return renderFontSize(size, index); - })} - - -
- -

Text colors

- - - - - {euiTextColors.map(function (color, index) { - return renderPaletteColor(palette, color, index); - })} - - - - -

Font families

- - - - - - - Abc - - - @include euiFont; - - - - - - Abc - - - @include euiCodeFont; - - -
- - - - - - Borders - - - - -

EUI provides some helper variables for setting common border types.

- - - - - {euiBorders.map(function (border, index) { - return renderBorder(border, index); - })} - + + + Abc + + + @include euiFont; + + - + + + Abc + + + @include euiCodeFont; + + +
+ + - -

In addition, you can utilize $euiBorderRadius to round the corners.

- + - + Borders - - - - {borderRadiusExample} - - - + - Shadow and Depth + +

EUI provides some helper variables for setting common border types.

+ - - + - -

Use mixins for shadows

- + + {euiBorders.map(function (border, index) { + return renderBorder(border, index); + })} + - -

- View the Sass code for shadow mixins. -

- + - + +

In addition, you can utilize $euiBorderRadius to round the corners.

+ - {euiShadows.map(function (shadow, index) { - return renderShadow(shadow, index); - })} - - + - -

Shadows to create graceful overflows

- + + + + {borderRadiusExample} + + + - -

- Primarily used in modals and flyouts, the overflow shadows add a white - glow to subtly hide the content they float above. -

- + Shadow and Depth - + + -
- -

- Minima reprehenderit aperiam at in ea. Veniam nihil quod tempore. - Dolores sit quo expedita voluptate libero. - Consequuntur atque nulla atque nemo tenetur numquam. - Assumenda aspernatur qui aut sit. Aliquam doloribus iure sint id. - Possimus dolor qui soluta cum id tempore ea illum. - Facilis voluptatem aut aut ut similique ut. - Sed repellendus commodi iure officiis exercitationem praesentium - dolor. Ratione non ut nulla accusamus et. Optio laboriosam id - incidunt. Ipsam voluptate ab quia necessitatibus sequi earum - voluptate. Porro tempore et veritatis quo omnis. Eaque ut libero - tempore sit placeat maxime laudantium. - Mollitia tempore minus qui autem modi adipisci ad. Iste reprehenderit - accusamus voluptatem velit. Quidem delectus eos veritatis et vitae - et nisi. Doloribus ut corrupti voluptates qui exercitationem dolores. -

- - {euiOverFlowShadows.map(function (shadow, index) { - return renderShadow(shadow, index); - })} -
+ +

Use mixins for shadows

+ - + +

+ View the Sass code for shadow mixins. +

+ - -

Adding color to shadows

- + - -

Most shadow mixins can also accept color.

- + {euiShadows.map(function (shadow, index) { + return renderShadow(shadow, index); + })} + + - + +

Shadows to create graceful overflows

+ -
- - @include euiBottomShadowLarge(desaturate($euiColorPrimary, 30%)); - -
- - - - - - Media queries and breakpoints - - -

- View the Sass code for media queries. -

-

- Breakpoints in EUI are provided through the use of a Sass - mixin @include euiBreakpoint() that - accepts an array of sizes. -

- + +

+ Primarily used in modals and flyouts, the overflow shadows add a white + glow to subtly hide the content they float above. +

+ - -
- + - - -
- -

Breakpoint sizing

- +
+ +

+ Minima reprehenderit aperiam at in ea. Veniam nihil quod tempore. + Dolores sit quo expedita voluptate libero. + Consequuntur atque nulla atque nemo tenetur numquam. + Assumenda aspernatur qui aut sit. Aliquam doloribus iure sint id. + Possimus dolor qui soluta cum id tempore ea illum. + Facilis voluptatem aut aut ut similique ut. + Sed repellendus commodi iure officiis exercitationem praesentium + dolor. Ratione non ut nulla accusamus et. Optio laboriosam id + incidunt. Ipsam voluptate ab quia necessitatibus sequi earum + voluptate. Porro tempore et veritatis quo omnis. Eaque ut libero + tempore sit placeat maxime laudantium. + Mollitia tempore minus qui autem modi adipisci ad. Iste reprehenderit + accusamus voluptatem velit. Quidem delectus eos veritatis et vitae + et nisi. Doloribus ut corrupti voluptates qui exercitationem dolores. +

+ + {euiOverFlowShadows.map(function (shadow, index) { + return renderShadow(shadow, index); + })} +
- + - {euiBreakPoints.map(function (size, index) { - return renderBreakpoint(size, index); - })} + +

Adding color to shadows

+ + +

Most shadow mixins can also accept color.

+ -
+ - - +
+ + @include euiBottomShadowLarge(desaturate($euiColorPrimary, 30%)); + +
+ + + + + + Media queries and breakpoints + + +

+ View the Sass code for media queries. +

+

+ Breakpoints in EUI are provided through the use of a Sass + mixin @include euiBreakpoint() that + accepts an array of sizes. +

+ + + +
+ + + + +
-

Mixin usage

+

Breakpoint sizing

 -

Target mobile devices only

 - - {'@include euiBreakpoint(\'xs\',\'s\') {...}'} - - - - -

Target mobile and tablets

 - - {'@include euiBreakpoint(\'xs\', \'s\', \'m\') {...}'} - - - + {euiBreakPoints.map(function (size, index) { + return renderBreakpoint(size, index); + })} -

Target tablets only

 - - {'@include euiBreakpoint(\'m\') {...}'} - - +
-

Target very wide displays only

 - - {'@include euiBreakpoint(\'xl\') {...}'} - + + + +

Mixin usage

+ - - - - - - - Animation - -

- View the Sass code for animation. -

-

- EUI utilizes the following constants to maintain a similar 'bounce' to its animations. - That said, animations are tricky, and if they aren't working for your specific application - this is the one place where we think it's OK to come up with your own rules. -

- - - - - -

Speed

- + - +

Target mobile devices only

 + + {'@include euiBreakpoint(\'xs\',\'s\') {...}'} + - {euiAnimationSpeeds.map(function (speed, index) { - return renderAnimationSpeed(speed, index); - })} - - - -

Timing

- + - +

Target mobile and tablets

 + + {'@include euiBreakpoint(\'xs\', \'s\', \'m\') {...}'} + - {euiAnimationTimings.map(function (speed, index) { - return renderAnimationTiming(speed, index); - })} - - + - +

Target tablets only

 + + {'@include euiBreakpoint(\'m\') {...}'} + - Sass best practices + - +

Target very wide displays only

 + + {'@include euiBreakpoint(\'xl\') {...}'} + - - - -

Component based naming

-

- EUI is written in a BEMish style with the addition of verb states (ex: *-isLoading). - Below is an example of proper formatting. -

- - - {bemExample} - - - -

Writing Sass the EUI way

-

- In general, when writing new SCSS in a project that installs EUI as a dependency - try to follow these best practices: -

- - - -
    -
  • Utilize color variables and functions rather than hard-coded values
    • -
  • Utilize the sizing variables for padding and margins
    • -
  • Utilize the animation variables for animations when possible
    • -
  • Utilize the responsive mixins for all screen width calculations
    • -
  • Utilize the typography mixins and variables for all font family, weight, and sizing
    • -
  • Utilize the shadow mixins and z-index variables to manage depth
    • -
  • Utilize the border and border-radius variable to handle border usage
    • -
  • Minimize your overwrites and try to make new Sass additive in nature
    • -
- + + + + + + + Animation + +

+ View the Sass code for animation. +

+

+ EUI utilizes the following constants to maintain a similar 'bounce' to its animations. + That said, animations are tricky, and if they aren't working for your specific application + this is the one place where we think it's OK to come up with your own rules. +

+ + + + + +

Speed

+ + + + + {euiAnimationSpeeds.map(function (speed, index) { + return renderAnimationSpeed(speed, index); + })} + + + +

Timing

+ - + - -

Importing EUI global Sass

- + {euiAnimationTimings.map(function (speed, index) { + return renderAnimationTiming(speed, index); + })} + + - + - -

- Most EUI based projects should already import the EUI global - scope. For example, Kibana has its own - liner that will give you everything on this page. -

- - - - {importKibanaExample} - - - -

- If you want to construct your own import, you would just need to - import the following core files into a fresh Sass project. -

- + Sass best practices - + - - {importOutsideExample} - + + + +

Component based naming

+

+ EUI is written in a BEMish style with the addition of verb states (ex: *-isLoading). + Below is an example of proper formatting. +

+ + + {bemExample} + + + +

Writing Sass the EUI way

+

+ In general, when writing new SCSS in a project that installs EUI as a dependency + try to follow these best practices: +

+ + + +
    +
  • Utilize color variables and functions rather than hard-coded values
    • +
  • Utilize the sizing variables for padding and margins
    • +
  • Utilize the animation variables for animations when possible
    • +
  • Utilize the responsive mixins for all screen width calculations
    • +
  • Utilize the typography mixins and variables for all font family, weight, and sizing
    • +
  • Utilize the shadow mixins and z-index variables to manage depth
    • +
  • Utilize the border and border-radius variable to handle border usage
    • +
  • Minimize your overwrites and try to make new Sass additive in nature
    • +
+ + + + + +

Importing EUI global Sass

+ + + + + +

+ Most EUI based projects should already import the EUI global + scope. For example, Kibana has its own + liner that will give you everything on this page. +

+ + + + {importKibanaExample} + + + +

+ If you want to construct your own import, you would just need to + import the following core files into a fresh Sass project. +

+ + + + + + {importOutsideExample} + - - + + - - ); - } -} + + ); +}; From 82c3a4425812d8d0784d2493b8f3280da66ee594 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 7 Mar 2019 10:25:00 -0800 Subject: [PATCH 7/7] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e762277fb48..597ae1ee439 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Adjusted the dark theme palette to have a slight blue titn ([#1691](https://github.com/elastic/eui/pull/1691)) - Added `repositionOnScroll` property to the `EuiPopoverProps` type definition ([#1628](https://github.com/elastic/eui/pull/1628)) - Added support to `findTestSubject` for an optional `matcher` argument, which defaults to `~=`, enabling it to identify an element based on one of multiple space-separated values within its `data-test-subj` attribute ([#1587](https://github.com/elastic/eui/pull/1587)) - Converted `EuiFlexGrid`, `EuiFlexGroup`, `EuiFlexItem`, `EuiDescriptionList`, `EuiDescriptionListTitle`, and `EuiDescriptionListDescription` to TypeScript ([#1365](https://github.com/elastic/eui/pull/1365))