Increase contrast for EuiCodeBlock colors (#3309)

* Increase contrast for EuiCodeBlock colors * add CL * Update CHANGELOG.md Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * update changelog * Improving colors and examples * Adding more colors * remove unused classname * Addition and deletion shadow position * Separate tag and name classes * Improving html example * Removing unecessary empty space * Color blind palette Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co> Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
elastic · May 28, 2020 · a3c80cc · a3c80cc
1 parent fd3dd84
commit a3c80cc
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 57 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@
 - Fixed `EuiSuperSelect` not rendering full width when `isOpen` is `true` ([#3495](https://github.com/elastic/eui/pull/3495))
 - Fixed `EuiBasicTable` shows no items if all items of last page is deleted  ([#3422](https://github.com/elastic/eui/pull/3422))
 - Fixed TypeScript module name in generated `eui_charts_theme.d.ts` file  ([#3492](https://github.com/elastic/eui/pull/3492))
+- Fixed code highlight color contrast in `EuiCodeBlock` ([#3309](https://github.com/elastic/eui/pull/3309))
 
 **Deprecations**
 
@@ -142,6 +143,7 @@
 
 - Fixed `EuiProgress` `max` property to allow `undefined` ([#3198](https://github.com/elastic/eui/pull/3198))
 
+
 ## [`22.5.0`](https://github.com/elastic/eui/tree/v22.5.0)
 
 - Added `forceState` prop to control `EuiAccordion` state from outside ([#3240](https://github.com/elastic/eui/pull/3240))

diff --git a/src-docs/src/views/code/code_block.js b/src-docs/src/views/code/code_block.js
@@ -2,13 +2,11 @@ import React from 'react';
 
 import { EuiCodeBlock, EuiSpacer } from '../../../../src/components';
 
-const htmlCode = `<!--I'm an example of HTML-->
-<div>
-  <h1>Title</h1>
-</div>
-`;
+const htmlCode = require('!!raw-loader!./code_examples/example.html');
 
-const jsCode = require('!!raw-loader!./code_block');
+const jsCode = require('!!raw-loader!./code_examples/example.js');
+
+const sqlCode = require('!!raw-loader!./code_examples/example.sql');
 
 export default () => (
   <div>
@@ -20,12 +18,20 @@ export default () => (
       language="js"
       fontSize="m"
       paddingSize="m"
-      color="dark"
       overflowHeight={300}
       isCopyable>
       {jsCode}
     </EuiCodeBlock>
 
     <EuiSpacer />
+
+    <EuiCodeBlock
+      language="sql"
+      fontSize="m"
+      paddingSize="m"
+      overflowHeight={300}
+      isCopyable>
+      {sqlCode}
+    </EuiCodeBlock>
   </div>
 );
diff --git a/src-docs/src/views/code/code_examples/example.html b/src-docs/src/views/code/code_examples/example.html
@@ -0,0 +1,5 @@
+<!--I'm an example of HTML-->
+<div>
+  <h1>My First Heading</h1>
+  <p>My first paragraph.</p>
+</div>
diff --git a/src-docs/src/views/code/code_examples/example.js b/src-docs/src/views/code/code_examples/example.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default () => (
+  <div className="MyComponent">
+    <h1>Hello world!</h1>
+  </div>
+);
diff --git a/src-docs/src/views/code/code_examples/example.sql b/src-docs/src/views/code/code_examples/example.sql
@@ -0,0 +1,12 @@
+CREATE TABLE "topic" (
+    "id" serial NOT NULL PRIMARY KEY,
+    "forum_id" integer NOT NULL,
+    "subject" varchar(255) NOT NULL
+);
+ALTER TABLE "topic"
+ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id")
+REFERENCES "forum" ("id");
+
+-- Initials
+insert into "topic" ("forum_id", "subject")
+values (2, 'D''artagnian');
diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
@@ -179,7 +179,6 @@
 
   .hljs-keyword {
     color: $euiCodeBlockKeywordColor;
-    font-weight: bold;
   }
 
   .hljs-function > .hljs-title {
@@ -227,18 +226,18 @@
     color: $euiCodeBlockSectionColor;
   }
 
+  .hljs-addition,
+  .hljs-deletion {
+    padding-left: $euiSizeXS;
+    margin-left: -$euiSizeXS;
+  }
+
   .hljs-addition {
-    background-color: $euiCodeBlockAdditionBackgroundColor;
-    color: $euiCodeBlockAdditionColor;
-    display: inline-block;
-    width: 100%;
+    box-shadow: -$euiSizeXS 0 $euiCodeBlockAdditionColor;
   }
 
   .hljs-deletion {
-    background-color: $euiCodeBlockDeletionBackgroundColor;
-    color: $euiCodeBlockDeletionColor;
-    display: inline-block;
-    width: 100%;
+    box-shadow: -$euiSizeXS 0 $euiCodeBlockDeletionColor;
   }
 
   .hljs-selector-class {

diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
@@ -118,30 +118,27 @@ $euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9')
 $euiColorChartLines: shade($euiColorLightestShade, 3%) !default;
 $euiColorChartBand: $euiColorLightestShade !default;
 
+
 // Code
 $euiCodeBlockBackgroundColor: $euiColorLightestShade !default;
-$euiCodeBlockColor: $euiTextColor !default;
+$euiCodeBlockColor: makeHighContrastColor($euiTextColor, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockSelectedBackgroundColor: inherit !default;
-$euiCodeBlockCommentColor: #998 !default;
+$euiCodeBlockCommentColor: makeHighContrastColor($euiTextSubduedColor, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockSelectorTagColor: inherit !default;
-$euiCodeBlockStringColor: #DD0A73 !default;
-$euiCodeBlockNumberColor: #00A69B !default;
-$euiCodeBlockKeywordColor: #333 !default;
+$euiCodeBlockStringColor: makeHighContrastColor($euiColorVis2, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockTagColor: makeHighContrastColor($euiColorVis1, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockNameColor: makeHighContrastColor($euiColorVis1, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockNumberColor: makeHighContrastColor($euiColorVis0, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockKeywordColor: makeHighContrastColor($euiColorVis3, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockFunctionTitleColor: inherit !default;
-$euiCodeBlockTagColor: #0079A5 !default;
-$euiCodeBlockNameColor: inherit !default;
-$euiCodeBlockTypeColor: #0079A5 !default;
+$euiCodeBlockTypeColor: makeHighContrastColor($euiColorVis1, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockAttributeColor: inherit !default;
-$euiCodeBlockSymbolColor: #990073 !default;
+$euiCodeBlockSymbolColor: makeHighContrastColor($euiColorVis9, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockParamsColor: inherit !default;
-$euiCodeBlockMetaColor: #999 !default;
-$euiCodeBlockTitleColor: #900 !default;
-$euiCodeBlockRegexpColor: #009926 !default;
-$euiCodeBlockBuiltInColor: #0086B3 !default;
-$euiCodeBlockSectionColor: #FFC66D !default;
-$euiCodeBlockAdditionBackgroundColor: #DFD !default;
-$euiCodeBlockAdditionColor: inherit !default;
-$euiCodeBlockDeletionBackgroundColor: #FDD !default;
-$euiCodeBlockDeletionColor: inherit !default;
+$euiCodeBlockMetaColor:  makeHighContrastColor($euiTextSubduedColor, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockTitleColor: makeHighContrastColor($euiColorVis7, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockSectionColor: makeHighContrastColor($euiColorVis9, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockAdditionColor: makeHighContrastColor($euiColorVis0, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockDeletionColor: makeHighContrastColor($euiColorDanger, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockSelectorClassColor: inherit !default;
 $euiCodeBlockSelectorIdColor: inherit !default;
diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/eui/eui_colors_dark.scss
@@ -45,26 +45,3 @@ $euiColorSuccessText: $euiColorSecondaryText;
 // Charts
 $euiColorChartLines: $euiColorLightShade;
 $euiColorChartBand: tint($euiColorLightestShade, 2.5%);
-
-// 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;