From a490f2ec7618e01b00fd4cba6399f3e42ed2bee8 Mon Sep 17 00:00:00 2001 From: "dave.snider@gmail.com" Date: Thu, 7 Mar 2019 12:00:20 -0800 Subject: [PATCH] Dark mode redux, fix dark mode docs (#1691) Tweaks dark mode colorscheme. --- CHANGELOG.md | 1 + src-docs/src/routes.js | 2 +- src-docs/src/views/app_view.js | 2 +- src-docs/src/views/guidelines/colors.js | 22 +- src-docs/src/views/guidelines/sass.js | 992 +++++++++++----------- src/components/form/_mixins.scss | 2 +- src/components/form/_variables.scss | 2 +- src/global_styling/variables/_colors.scss | 2 +- src/themes/eui/eui_colors_dark.scss | 56 +- 9 files changed, 554 insertions(+), 527 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 16fa05269e8..e80f819d21b 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)) 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/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..3233094ef7b 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 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,609 @@ const contrastExample = (`// Make sure text passes a contrast check } `); -export default() => ( +export const SassGuidelines = ({ + selectedTheme +}) => { - + const palette = (selectedTheme === 'light') ? lightColors : darkColors; + return ( + - -

Core variables

- + +

Core variables

+ - + - - -
- -

Sizing

- + + +
+ +

Sizing

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

Z-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(palette, color, index); })} -
- - - - -

Color

- - + + - {euiColors.map(function (color, index) { - return renderPaletteColor(color, index); - })} + - - + Going beyond the provided colors - + - 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. +

+ + - - - -

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 -

- - - - - - -

- 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. -

- + + +
+ + + $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. +

+ + - {tintOrShadeExample} + + +
+ + + $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

- - - - - -

- 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. -

- + - + + +
Light theme
+ + +
Dark theme
+ + - {contrastExample} + - + + +

Color contrast patterns

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

+ 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. +

+ - -

More on color contrast

- + - + {contrastExample} - -

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

- + +
+ This orange text now passes a contrast check! +
- - - - - 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); - })} - - -
-

Text colors

+

More on color contrast

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

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

+ - - -

Font families

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

Text colors

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

Font families

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

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

Shadows to create graceful overflows

+ -
- +

- 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. + Primarily used in modals and flyouts, the overflow shadows add a white + glow to subtly hide the content they float above.

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

Adding color to shadows

- +
+ +

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

Most shadow mixins can also accept color.

- + - + +

Adding color to shadows

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

Most shadow mixins can also accept color.

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

- 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. -

- + - -
- + Media queries and breakpoints - - -
- -

Breakpoint sizing

- + +

+ 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

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

Mixin usage

- - +
-

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\') {...}'} + - {euiAnimationSpeeds.map(function (speed, index) { - return renderAnimationSpeed(speed, index); - })} - - - -

Timing

- + + + + + + + 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

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

Timing

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

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
    • -
- + 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
    • +
+ - + - -

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/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/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 de71af5fb6a..853e201186c 100644 --- a/src/themes/eui/eui_colors_dark.scss +++ b/src/themes/eui/eui_colors_dark.scss @@ -1,29 +1,47 @@ -// Dark theme overides - -$euiColorEmptyShade: #222; -$euiColorLightestShade: #242424; -$euiColorLightShade: #333; -$euiColorMediumShade: #444; -$euiColorDarkShade: #8A8A8A; -$euiColorDarkestShade: #F5F5F5; +// Code +$euiColorPrimary: #1BA9F5; +$euiColorSecondary: #7DE2D1; +$euiColorAccent: #F990C0; +$euiColorGhost: #FFF; + +// Status +$euiColorSuccess: $euiColorSecondary; +$euiColorWarning: #FF977A; +$euiColorDanger: #F66; + +// Grays +$euiColorEmptyShade: #1D1E24; +$euiColorLightestShade: #25262E; +$euiColorLightShade: #343741; +$euiColorMediumShade: #535966; +$euiColorDarkShade: #D4DAE5; +$euiColorDarkestShade: #F5F7FA; $euiColorFullShade: #FFF; -$euiColorMediumShade: #494E51; -$euiColorPrimary: #4DA1C0; -$euiColorWarning: #C06C4C; -$euiColorDanger: #BF4D4D; -$euiTextColor: #DDD; -$euiFocusBackgroundColor: #191919; +// Variations from core + +$euiTextColor: #DFE5EF; +$euiLinkColor: $euiColorPrimary; +$euiFocusBackgroundColor: #232635; $euiShadowColor: #000; $euiShadowColorLarge: #000; -$euiModalBorderColor: $euiColorLightShade; -$euiFlyoutBorderColor: $euiColorLightShade; + +// 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; // Code -$euiCodeBlockBackgroundColor: #2B2B2D; -$euiCodeBlockColor: #CDD3D8; -$euiCodeBlockSelectedBackgroundColor: #3E4451; $euiCodeBlockCommentColor: #656565; $euiCodeBlockSelectorTagColor: #C792EA; $euiCodeBlockStringColor: #C3E88D;