From 62b9d6d991ba901e075cbba8ed37d6f759a0d755 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Mon, 13 Apr 2020 17:03:52 -0500
Subject: [PATCH 01/12] Increase contrast for EuiCodeBlock colors

---
 src/components/code/_code_block.scss      | 15 ++++++++-----
 src/global_styling/variables/_colors.scss | 27 ++++++++++-------------
 src/themes/eui/eui_colors_dark.scss       |  1 -
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
index 276434be20c..514cd73ba9b 100644
--- a/src/components/code/_code_block.scss
+++ b/src/components/code/_code_block.scss
@@ -227,18 +227,21 @@
     color: $euiCodeBlockSectionColor;
   }
 
-  .hljs-addition {
-    background-color: $euiCodeBlockAdditionBackgroundColor;
-    color: $euiCodeBlockAdditionColor;
+  .hljs-addition,
+  .hljs-deletion {
     display: inline-block;
+    padding-left: $euiSizeXS;
     width: 100%;
   }
 
+  .hljs-addition {
+    border-left: $euiBorderWidthThick solid $euiCodeBlockAdditionBorderColor;
+    color: $euiCodeBlockAdditionColor;
+  }
+
   .hljs-deletion {
-    background-color: $euiCodeBlockDeletionBackgroundColor;
+    border-left: $euiBorderWidthThick solid $euiCodeBlockDeletionBorderColor;
     color: $euiCodeBlockDeletionColor;
-    display: inline-block;
-    width: 100%;
   }
 
   .hljs-selector-class {
diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
index 2dadfb22eaa..0d5a6c2dd52 100644
--- a/src/global_styling/variables/_colors.scss
+++ b/src/global_styling/variables/_colors.scss
@@ -122,26 +122,23 @@ $euiColorChartBand: $euiColorLightestShade !default;
 $euiCodeBlockBackgroundColor: $euiColorLightestShade !default;
 $euiCodeBlockColor: $euiTextColor !default;
 $euiCodeBlockSelectedBackgroundColor: inherit !default;
-$euiCodeBlockCommentColor: #998 !default;
+$euiCodeBlockCommentColor: $euiTextSubduedColor !default;
 $euiCodeBlockSelectorTagColor: inherit !default;
-$euiCodeBlockStringColor: #DD0A73 !default;
-$euiCodeBlockNumberColor: #00A69B !default;
-$euiCodeBlockKeywordColor: #333 !default;
+$euiCodeBlockStringColor: makeHighContrastColor($euiColorAccentText, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockNumberColor: makeHighContrastColor($euiColorSecondaryText, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockKeywordColor: inherit !default;
 $euiCodeBlockFunctionTitleColor: inherit !default;
-$euiCodeBlockTagColor: #0079A5 !default;
-$euiCodeBlockNameColor: inherit !default;
-$euiCodeBlockTypeColor: #0079A5 !default;
+$euiCodeBlockTagColor: makeHighContrastColor($euiColorPrimaryText, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockTypeColor: makeHighContrastColor($euiColorPrimaryText, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockAttributeColor: inherit !default;
-$euiCodeBlockSymbolColor: #990073 !default;
+$euiCodeBlockSymbolColor: makeHighContrastColor($euiColorAccentText, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockParamsColor: inherit !default;
-$euiCodeBlockMetaColor: #999 !default;
-$euiCodeBlockTitleColor: #900 !default;
-$euiCodeBlockRegexpColor: #009926 !default;
-$euiCodeBlockBuiltInColor: #0086B3 !default;
-$euiCodeBlockSectionColor: #FFC66D !default;
-$euiCodeBlockAdditionBackgroundColor: #DFD !default;
+$euiCodeBlockMetaColor: $euiTextSubduedColor !default;
+$euiCodeBlockTitleColor: $euiColorDangerText !default;
+$euiCodeBlockSectionColor: makeHighContrastColor($euiColorWarningText, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockAdditionBorderColor: $euiColorSecondary !default;
 $euiCodeBlockAdditionColor: inherit !default;
-$euiCodeBlockDeletionBackgroundColor: #FDD !default;
+$euiCodeBlockDeletionBorderColor: $euiColorDanger !default;
 $euiCodeBlockDeletionColor: inherit !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
index e4dfee78d4c..1f4f1b22a69 100644
--- a/src/themes/eui/eui_colors_dark.scss
+++ b/src/themes/eui/eui_colors_dark.scss
@@ -54,7 +54,6 @@ $euiCodeBlockNumberColor: #F77669;
 $euiCodeBlockKeywordColor: #C792EA;
 $euiCodeBlockFunctionTitleColor: #75A5FF;
 $euiCodeBlockTagColor: #ABB2BF;
-$euiCodeBlockNameColor: #E06C75;
 $euiCodeBlockTypeColor: #DA4939;
 $euiCodeBlockAttributeColor: #80CBBF;
 $euiCodeBlockSymbolColor: #C792EA;

From 9f08b6ea13bf1249b4e9fb60334c0fe18b6d1464 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Mon, 13 Apr 2020 17:24:35 -0500
Subject: [PATCH 02/12] add CL

---
 CHANGELOG.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6fdb3b08e22..ee5ca47b951 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `22.5.0`.
+**Bug Fixes**
+
+- Fixed code-related color variables to attain proper contrast levels in `EuiCodeBlock` ([#3309](https://github.com/elastic/eui/pull/3309))
 
 ## [`22.5.0`](https://github.com/elastic/eui/tree/v22.5.0)
 

From 23fdc84361f730c132c68452ce32ecc2e16a8cd5 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Mon, 25 May 2020 15:27:38 +0100
Subject: [PATCH 03/12] Update CHANGELOG.md

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e7f9dcc18da..84045f0d9a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@
 
 **Bug Fixes**
 
-- Fixed code-related color variables to attain proper contrast levels in `EuiCodeBlock` ([#3309](https://github.com/elastic/eui/pull/3309))
+- Fixed code highlight color contrast in `EuiCodeBlock` ([#3309](https://github.com/elastic/eui/pull/3309))
 
 ## [`22.5.0`](https://github.com/elastic/eui/tree/v22.5.0)
 

From abb089374caf098eb77fc5acec8570ede4759f18 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Mon, 25 May 2020 16:00:17 +0100
Subject: [PATCH 04/12] update changelog

---
 CHANGELOG.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f4eab14cc97..301ce8e1f87 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,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**
 
@@ -137,9 +138,6 @@
 
 - Fixed `EuiProgress` `max` property to allow `undefined` ([#3198](https://github.com/elastic/eui/pull/3198))
 
-**Bug Fixes**
-
-- Fixed code highlight color contrast in `EuiCodeBlock` ([#3309](https://github.com/elastic/eui/pull/3309))
 
 ## [`22.5.0`](https://github.com/elastic/eui/tree/v22.5.0)
 

From c4e579bd12ad5fa747925b0a8c5983775698d17a Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 26 May 2020 16:54:41 +0100
Subject: [PATCH 05/12] Improving colors and examples

---
 src-docs/src/views/code/code_block.js         | 20 +++++++++++------
 .../src/views/code/code_examples/example.html |  5 +++++
 .../src/views/code/code_examples/example.js   |  7 ++++++
 .../src/views/code/code_examples/example.sql  | 12 ++++++++++
 src/components/code/_code_block.scss          | 18 +++++----------
 src/global_styling/variables/_colors.scss     | 21 +++++++++---------
 src/themes/eui/eui_colors_dark.scss           | 22 -------------------
 7 files changed, 53 insertions(+), 52 deletions(-)
 create mode 100644 src-docs/src/views/code/code_examples/example.html
 create mode 100644 src-docs/src/views/code/code_examples/example.js
 create mode 100644 src-docs/src/views/code/code_examples/example.sql

diff --git a/src-docs/src/views/code/code_block.js b/src-docs/src/views/code/code_block.js
index 7462d5972a8..5aff52ee7df 100644
--- 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 cCode = 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>
+      {cCode}
+    </EuiCodeBlock>
   </div>
 );
diff --git a/src-docs/src/views/code/code_examples/example.html b/src-docs/src/views/code/code_examples/example.html
new file mode 100644
index 00000000000..36f4efccf8a
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..29e367cbfbd
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..458461f113a
--- /dev/null
+++ 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');
\ No newline at end of file
diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
index 514cd73ba9b..30b1789e309 100644
--- a/src/components/code/_code_block.scss
+++ b/src/components/code/_code_block.scss
@@ -186,14 +186,11 @@
     color: $euiCodeBlockFunctionTitleColor;
   }
 
-  .hljs-tag {
+  .hljs-tag,
+  .hljs-name  {
     color: $euiCodeBlockTagColor;
   }
 
-  .hljs-name {
-    color: euiCodeBlockNameColor;
-  }
-
   .hljs-type,
   .hljs-class .hljs-title {
     color: $euiCodeBlockTypeColor;
@@ -229,19 +226,16 @@
 
   .hljs-addition,
   .hljs-deletion {
-    display: inline-block;
-    padding-left: $euiSizeXS;
-    width: 100%;
+    padding-left: $euiSizeS;
+    margin-left: -$euiSizeS;
   }
 
   .hljs-addition {
-    border-left: $euiBorderWidthThick solid $euiCodeBlockAdditionBorderColor;
-    color: $euiCodeBlockAdditionColor;
+    box-shadow: -$euiSizeXS 0 $euiCodeBlockAdditionColor;
   }
 
   .hljs-deletion {
-    border-left: $euiBorderWidthThick solid $euiCodeBlockDeletionBorderColor;
-    color: $euiCodeBlockDeletionColor;
+    box-shadow: -$euiSizeXS 0 $euiCodeBlockDeletionColor;
   }
 
   .hljs-selector-class {
diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
index 0d5a6c2dd52..7abec01c8be 100644
--- a/src/global_styling/variables/_colors.scss
+++ b/src/global_styling/variables/_colors.scss
@@ -120,25 +120,24 @@ $euiColorChartBand: $euiColorLightestShade !default;
 
 // Code
 $euiCodeBlockBackgroundColor: $euiColorLightestShade !default;
-$euiCodeBlockColor: $euiTextColor !default;
+$euiCodeBlockColor: makeHighContrastColor($euiTextColor, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockSelectedBackgroundColor: inherit !default;
-$euiCodeBlockCommentColor: $euiTextSubduedColor !default;
+$euiCodeBlockCommentColor: makeHighContrastColor($euiTextSubduedColor, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockSelectorTagColor: inherit !default;
 $euiCodeBlockStringColor: makeHighContrastColor($euiColorAccentText, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockNumberColor: makeHighContrastColor($euiColorSecondaryText, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockTagColor: makeHighContrastColor($euiColorPrimary, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockNameColor: makeHighContrastColor($euiColorPrimary, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockNumberColor: makeHighContrastColor($euiColorSecondary, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockKeywordColor: inherit !default;
 $euiCodeBlockFunctionTitleColor: inherit !default;
-$euiCodeBlockTagColor: makeHighContrastColor($euiColorPrimaryText, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockTypeColor: makeHighContrastColor($euiColorPrimaryText, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockAttributeColor: inherit !default;
-$euiCodeBlockSymbolColor: makeHighContrastColor($euiColorAccentText, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockSymbolColor: makeHighContrastColor($euiColorWarning, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockParamsColor: inherit !default;
-$euiCodeBlockMetaColor: $euiTextSubduedColor !default;
-$euiCodeBlockTitleColor: $euiColorDangerText !default;
+$euiCodeBlockMetaColor:  makeHighContrastColor($euiTextSubduedColor, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockTitleColor: makeHighContrastColor($euiColorDangerText, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockSectionColor: makeHighContrastColor($euiColorWarningText, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockAdditionBorderColor: $euiColorSecondary !default;
-$euiCodeBlockAdditionColor: inherit !default;
-$euiCodeBlockDeletionBorderColor: $euiColorDanger !default;
-$euiCodeBlockDeletionColor: inherit !default;
+$euiCodeBlockAdditionColor: makeHighContrastColor($euiColorSecondary, $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
index 1f4f1b22a69..02cb1b51b48 100644
--- a/src/themes/eui/eui_colors_dark.scss
+++ b/src/themes/eui/eui_colors_dark.scss
@@ -45,25 +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;
-$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;

From ea410f283571e8c01c1010eee0b51a22e87f39ac Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 26 May 2020 18:31:43 +0100
Subject: [PATCH 06/12] Adding more colors

---
 src-docs/src/views/code/code_block.js     | 5 +++--
 src/components/code/_code_block.scss      | 1 -
 src/global_styling/variables/_colors.scss | 7 +++++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src-docs/src/views/code/code_block.js b/src-docs/src/views/code/code_block.js
index 5aff52ee7df..e630c0c30b2 100644
--- a/src-docs/src/views/code/code_block.js
+++ b/src-docs/src/views/code/code_block.js
@@ -6,7 +6,7 @@ const htmlCode = require('!!raw-loader!./code_examples/example.html');
 
 const jsCode = require('!!raw-loader!./code_examples/example.js');
 
-const cCode = require('!!raw-loader!./code_examples/example.sql');
+const sqlCode = require('!!raw-loader!./code_examples/example.sql');
 
 export default () => (
   <div>
@@ -26,12 +26,13 @@ export default () => (
     <EuiSpacer />
 
     <EuiCodeBlock
+      className="hljs-addition"
       language="sql"
       fontSize="m"
       paddingSize="m"
       overflowHeight={300}
       isCopyable>
-      {cCode}
+      {sqlCode}
     </EuiCodeBlock>
   </div>
 );
diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
index 30b1789e309..bb3d5b6553f 100644
--- 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 {
diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
index 7abec01c8be..4f9eb85070a 100644
--- a/src/global_styling/variables/_colors.scss
+++ b/src/global_styling/variables/_colors.scss
@@ -118,7 +118,10 @@ $euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9')
 $euiColorChartLines: shade($euiColorLightestShade, 3%) !default;
 $euiColorChartBand: $euiColorLightestShade !default;
 
+
 // Code
+$euiCodeBlockPurple: #6F42C1;
+$euiCodeBlockOrange: #E36209;
 $euiCodeBlockBackgroundColor: $euiColorLightestShade !default;
 $euiCodeBlockColor: makeHighContrastColor($euiTextColor, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockSelectedBackgroundColor: inherit !default;
@@ -128,11 +131,11 @@ $euiCodeBlockStringColor: makeHighContrastColor($euiColorAccentText, $euiCodeBlo
 $euiCodeBlockTagColor: makeHighContrastColor($euiColorPrimary, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockNameColor: makeHighContrastColor($euiColorPrimary, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockNumberColor: makeHighContrastColor($euiColorSecondary, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockKeywordColor: inherit !default;
+$euiCodeBlockKeywordColor: makeHighContrastColor($euiCodeBlockPurple, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockFunctionTitleColor: inherit !default;
 $euiCodeBlockTypeColor: makeHighContrastColor($euiColorPrimaryText, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockAttributeColor: inherit !default;
-$euiCodeBlockSymbolColor: makeHighContrastColor($euiColorWarning, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockSymbolColor: makeHighContrastColor($euiCodeBlockOrange, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockParamsColor: inherit !default;
 $euiCodeBlockMetaColor:  makeHighContrastColor($euiTextSubduedColor, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockTitleColor: makeHighContrastColor($euiColorDangerText, $euiCodeBlockBackgroundColor) !default;

From a20f66a2cceea9df0a6a952a93ba292b7516916e Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 26 May 2020 18:32:52 +0100
Subject: [PATCH 07/12] remove unused classname

---
 src-docs/src/views/code/code_block.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src-docs/src/views/code/code_block.js b/src-docs/src/views/code/code_block.js
index e630c0c30b2..50e90c811ed 100644
--- a/src-docs/src/views/code/code_block.js
+++ b/src-docs/src/views/code/code_block.js
@@ -26,7 +26,6 @@ export default () => (
     <EuiSpacer />
 
     <EuiCodeBlock
-      className="hljs-addition"
       language="sql"
       fontSize="m"
       paddingSize="m"

From 2d60eba9c64879ae31fc58cb4dd71f1dd339ee06 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 27 May 2020 13:40:56 +0100
Subject: [PATCH 08/12] Addition and deletion shadow position

---
 src/components/code/_code_block.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
index bb3d5b6553f..7d1ba31660d 100644
--- a/src/components/code/_code_block.scss
+++ b/src/components/code/_code_block.scss
@@ -225,8 +225,8 @@
 
   .hljs-addition,
   .hljs-deletion {
-    padding-left: $euiSizeS;
-    margin-left: -$euiSizeS;
+    padding-left: $euiSizeXS;
+    margin-left: -$euiSizeXS;
   }
 
   .hljs-addition {

From 1ada3d699f3a1996e43b28a15e7ea7adba3007b6 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 27 May 2020 16:00:22 +0100
Subject: [PATCH 09/12] Separate tag and name classes

---
 src/components/code/_code_block.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
index 7d1ba31660d..c5a60ac6f65 100644
--- a/src/components/code/_code_block.scss
+++ b/src/components/code/_code_block.scss
@@ -185,11 +185,14 @@
     color: $euiCodeBlockFunctionTitleColor;
   }
 
-  .hljs-tag,
-  .hljs-name  {
+  .hljs-tag {
     color: $euiCodeBlockTagColor;
   }
 
+  .hljs-name  {
+    color: euiCodeBlockNameColor;
+  }
+
   .hljs-type,
   .hljs-class .hljs-title {
     color: $euiCodeBlockTypeColor;

From 508a2200f1cd2e3a43418dc8f696ccad9dfabaf3 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 27 May 2020 16:03:04 +0100
Subject: [PATCH 10/12] Improving html example

---
 src-docs/src/views/code/code_examples/example.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/code/code_examples/example.html b/src-docs/src/views/code/code_examples/example.html
index 36f4efccf8a..1fb2dfd3acc 100644
--- a/src-docs/src/views/code/code_examples/example.html
+++ b/src-docs/src/views/code/code_examples/example.html
@@ -2,4 +2,4 @@
 <div>
   <h1>My First Heading</h1>
   <p>My first paragraph.</p>
-</div>;
+</div>
\ No newline at end of file

From bb61da9b1e038bcf9f99d3bd574497a152740760 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 27 May 2020 16:49:06 +0100
Subject: [PATCH 11/12] Removing unecessary empty space

---
 src/components/code/_code_block.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
index c5a60ac6f65..3b68a7edb7d 100644
--- a/src/components/code/_code_block.scss
+++ b/src/components/code/_code_block.scss
@@ -189,7 +189,7 @@
     color: $euiCodeBlockTagColor;
   }
 
-  .hljs-name  {
+  .hljs-name {
     color: euiCodeBlockNameColor;
   }
 

From f8dcf159b25ef88759c91176f6ef2c49411188c4 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 28 May 2020 17:00:50 +0100
Subject: [PATCH 12/12] Color blind palette

---
 src/global_styling/variables/_colors.scss | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
index 4f9eb85070a..4a3433dc70a 100644
--- a/src/global_styling/variables/_colors.scss
+++ b/src/global_styling/variables/_colors.scss
@@ -120,27 +120,25 @@ $euiColorChartBand: $euiColorLightestShade !default;
 
 
 // Code
-$euiCodeBlockPurple: #6F42C1;
-$euiCodeBlockOrange: #E36209;
 $euiCodeBlockBackgroundColor: $euiColorLightestShade !default;
 $euiCodeBlockColor: makeHighContrastColor($euiTextColor, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockSelectedBackgroundColor: inherit !default;
 $euiCodeBlockCommentColor: makeHighContrastColor($euiTextSubduedColor, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockSelectorTagColor: inherit !default;
-$euiCodeBlockStringColor: makeHighContrastColor($euiColorAccentText, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockTagColor: makeHighContrastColor($euiColorPrimary, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockNameColor: makeHighContrastColor($euiColorPrimary, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockNumberColor: makeHighContrastColor($euiColorSecondary, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockKeywordColor: makeHighContrastColor($euiCodeBlockPurple, $euiCodeBlockBackgroundColor) !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;
-$euiCodeBlockTypeColor: makeHighContrastColor($euiColorPrimaryText, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockTypeColor: makeHighContrastColor($euiColorVis1, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockAttributeColor: inherit !default;
-$euiCodeBlockSymbolColor: makeHighContrastColor($euiCodeBlockOrange, $euiCodeBlockBackgroundColor) !default;
+$euiCodeBlockSymbolColor: makeHighContrastColor($euiColorVis9, $euiCodeBlockBackgroundColor) !default;
 $euiCodeBlockParamsColor: inherit !default;
 $euiCodeBlockMetaColor:  makeHighContrastColor($euiTextSubduedColor, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockTitleColor: makeHighContrastColor($euiColorDangerText, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockSectionColor: makeHighContrastColor($euiColorWarningText, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockAdditionColor: makeHighContrastColor($euiColorSecondary, $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;