@opensearch-project/oui 1.20.0 → 1.21.0

package/dist/oui_theme_v9_light.json

@@ -95,9 +95,33 @@
     "ouiColorVis9": {
       "graphic": "#E7664C",
       "behindText": "#FF7E62"
+    },
+    "ouiColorVis10": {
+      "graphic": "#9C9DA0",
+      "behindText": "#9C9DA0"
+    },
+    "ouiColorVis11": {
+      "graphic": "#D74987",
+      "behindText": "#D74987"
+    },
+    "ouiColorVis12": {
+      "graphic": "#0D70CA",
+      "behindText": "#0D70CA"
+    },
+    "ouiColorVis13": {
+      "graphic": "#0C8967",
+      "behindText": "#0C8967"
+    },
+    "ouiColorVis14": {
+      "graphic": "#6E28C3",
+      "behindText": "#6E28C3"
+    },
+    "ouiColorVis15": {
+      "graphic": "#D76813",
+      "behindText": "#D76813"
     }
   },
-  "ouiPaletteColorBlindKeys": "'ouiColorVis0', 'ouiColorVis1', 'ouiColorVis2', 'ouiColorVis3', 'ouiColorVis4', 'ouiColorVis5', 'ouiColorVis6', 'ouiColorVis7', 'ouiColorVis8', 'ouiColorVis9'",
+  "ouiPaletteColorBlindKeys": "'ouiColorVis0', 'ouiColorVis1', 'ouiColorVis2', 'ouiColorVis3', 'ouiColorVis4', 'ouiColorVis5', 'ouiColorVis6', 'ouiColorVis7', 'ouiColorVis8', 'ouiColorVis9', 'ouiColorVis10', 'ouiColorVis11', 'ouiColorVis12', 'ouiColorVis13', 'ouiColorVis14', 'ouiColorVis15'",
   "ouiColorVis0": "#54B399",
   "ouiColorVis1": "#6092C0",
   "ouiColorVis2": "#D36086",
@@ -108,25 +132,31 @@
   "ouiColorVis7": "#DA8B45",
   "ouiColorVis8": "#AA6556",
   "ouiColorVis9": "#E7664C",
+  "ouiColorVis10": "#9C9DA0",
+  "ouiColorVis11": "#D74987",
+  "ouiColorVis12": "#0D70CA",
+  "ouiColorVis13": "#0C8967",
+  "ouiColorVis14": "#6E28C3",
+  "ouiColorVis15": "#D76813",
   "ouiColorChartLines": "#dcdee1",
   "ouiColorChartBand": "#E3E5E8",
   "ouiCodeBlockBackgroundColor": "#E3E5E8",
   "ouiCodeBlockColor": "#2A3947",
   "ouiCodeBlockSelectedBackgroundColor": "inherit",
-  "ouiCodeBlockCommentColor": "#5e626b",
+  "ouiCodeBlockCommentColor": "#9C9DA0",
   "ouiCodeBlockSelectorTagColor": "inherit",
-  "ouiCodeBlockStringColor": "#9c4766",
+  "ouiCodeBlockStringColor": "#D74987",
   "ouiCodeBlockTagColor": "#44678a",
-  "ouiCodeBlockNameColor": "#44678a",
-  "ouiCodeBlockNumberColor": "#336c61",
-  "ouiCodeBlockKeywordColor": "#715892",
+  "ouiCodeBlockNameColor": "#0D70CA",
+  "ouiCodeBlockNumberColor": "#0C8967",
+  "ouiCodeBlockKeywordColor": "#6E28C3",
   "ouiCodeBlockFunctionTitleColor": "inherit",
-  "ouiCodeBlockTypeColor": "#44678a",
+  "ouiCodeBlockTypeColor": "#0D70CA",
   "ouiCodeBlockAttributeColor": "inherit",
   "ouiCodeBlockSymbolColor": "#a3483a",
   "ouiCodeBlockParamsColor": "inherit",
   "ouiCodeBlockMetaColor": "#5e626b",
-  "ouiCodeBlockTitleColor": "#8a5831",
+  "ouiCodeBlockTitleColor": "#D76813",
   "ouiCodeBlockSectionColor": "#a3483a",
   "ouiCodeBlockAdditionColor": "#336c61",
   "ouiCodeBlockDeletionColor": "#b13731",
@@ -219,20 +249,20 @@
   "euiCodeBlockBackgroundColor": "#E3E5E8",
   "euiCodeBlockColor": "#2A3947",
   "euiCodeBlockSelectedBackgroundColor": "inherit",
-  "euiCodeBlockCommentColor": "#5e626b",
+  "euiCodeBlockCommentColor": "#9C9DA0",
   "euiCodeBlockSelectorTagColor": "inherit",
-  "euiCodeBlockStringColor": "#9c4766",
+  "euiCodeBlockStringColor": "#D74987",
   "euiCodeBlockTagColor": "#44678a",
-  "euiCodeBlockNameColor": "#44678a",
-  "euiCodeBlockNumberColor": "#336c61",
-  "euiCodeBlockKeywordColor": "#715892",
+  "euiCodeBlockNameColor": "#0D70CA",
+  "euiCodeBlockNumberColor": "#0C8967",
+  "euiCodeBlockKeywordColor": "#6E28C3",
   "euiCodeBlockFunctionTitleColor": "inherit",
-  "euiCodeBlockTypeColor": "#44678a",
+  "euiCodeBlockTypeColor": "#0D70CA",
   "euiCodeBlockAttributeColor": "inherit",
   "euiCodeBlockSymbolColor": "#a3483a",
   "euiCodeBlockParamsColor": "inherit",
   "euiCodeBlockMetaColor": "#5e626b",
-  "euiCodeBlockTitleColor": "#8a5831",
+  "euiCodeBlockTitleColor": "#D76813",
   "euiCodeBlockSectionColor": "#a3483a",
   "euiCodeBlockAdditionColor": "#336c61",
   "euiCodeBlockDeletionColor": "#b13731",
@@ -1373,12 +1403,36 @@
       "graphic": "#E7664C",
       "behindText": "#FF7E62"
     },
+    "ouiColorVis10": {
+      "graphic": "#9C9DA0",
+      "behindText": "#9C9DA0"
+    },
+    "ouiColorVis11": {
+      "graphic": "#D74987",
+      "behindText": "#D74987"
+    },
+    "ouiColorVis12": {
+      "graphic": "#0D70CA",
+      "behindText": "#0D70CA"
+    },
+    "ouiColorVis13": {
+      "graphic": "#0C8967",
+      "behindText": "#0C8967"
+    },
+    "ouiColorVis14": {
+      "graphic": "#6E28C3",
+      "behindText": "#6E28C3"
+    },
+    "ouiColorVis15": {
+      "graphic": "#D76813",
+      "behindText": "#D76813"
+    },
     "gray": {
       "graphic": "#5A6875",
       "behindText": "#5A6875"
     }
   },
-  "ouiTokenTypeKeys": "'ouiColorVis0', 'ouiColorVis1', 'ouiColorVis2', 'ouiColorVis3', 'ouiColorVis4', 'ouiColorVis5', 'ouiColorVis6', 'ouiColorVis7', 'ouiColorVis8', 'ouiColorVis9', 'gray'",
+  "ouiTokenTypeKeys": "'ouiColorVis0', 'ouiColorVis1', 'ouiColorVis2', 'ouiColorVis3', 'ouiColorVis4', 'ouiColorVis5', 'ouiColorVis6', 'ouiColorVis7', 'ouiColorVis8', 'ouiColorVis9', 'ouiColorVis10', 'ouiColorVis11', 'ouiColorVis12', 'ouiColorVis13', 'ouiColorVis14', 'ouiColorVis15', 'gray'",
   "euiTokenGrayColor": "#5A6875",
   "euiTokenTypes": {
     "euiColorVis0": {
@@ -1457,6 +1511,12 @@
   "ouiColorVis7_behindText": "#F5A35C",
   "ouiColorVis8_behindText": "#C47C6C",
   "ouiColorVis9_behindText": "#FF7E62",
+  "ouiColorVis10_behindText": "#9C9DA0",
+  "ouiColorVis11_behindText": "#D74987",
+  "ouiColorVis12_behindText": "#0D70CA",
+  "ouiColorVis13_behindText": "#0C8967",
+  "ouiColorVis14_behindText": "#6E28C3",
+  "ouiColorVis15_behindText": "#D76813",
   "euiColorVis0_behindText": "#6DCCB1",
   "euiColorVis1_behindText": "#79AAD9",
   "euiColorVis2_behindText": "#EE789D",

package/dist/oui_theme_v9_light.json.d.ts

@@ -97,6 +97,30 @@ declare module '@opensearch-project/oui/dist/oui_theme_v9_light.json' {
         graphic: string;
         behindText: string;
       };
+      ouiColorVis10: {
+        graphic: string;
+        behindText: string;
+      };
+      ouiColorVis11: {
+        graphic: string;
+        behindText: string;
+      };
+      ouiColorVis12: {
+        graphic: string;
+        behindText: string;
+      };
+      ouiColorVis13: {
+        graphic: string;
+        behindText: string;
+      };
+      ouiColorVis14: {
+        graphic: string;
+        behindText: string;
+      };
+      ouiColorVis15: {
+        graphic: string;
+        behindText: string;
+      };
     };
     ouiPaletteColorBlindKeys: string;
     ouiColorVis0: string;
@@ -109,6 +133,12 @@ declare module '@opensearch-project/oui/dist/oui_theme_v9_light.json' {
     ouiColorVis7: string;
     ouiColorVis8: string;
     ouiColorVis9: string;
+    ouiColorVis10: string;
+    ouiColorVis11: string;
+    ouiColorVis12: string;
+    ouiColorVis13: string;
+    ouiColorVis14: string;
+    ouiColorVis15: string;
     ouiColorChartLines: string;
     ouiColorChartBand: string;
     ouiCodeBlockBackgroundColor: string;
@@ -1374,6 +1404,30 @@ declare module '@opensearch-project/oui/dist/oui_theme_v9_light.json' {
         graphic: string;
         behindText: string;
       };
+      ouiColorVis10: {
+        graphic: string;
+        behindText: string;
+      };
+      ouiColorVis11: {
+        graphic: string;
+        behindText: string;
+      };
+      ouiColorVis12: {
+        graphic: string;
+        behindText: string;
+      };
+      ouiColorVis13: {
+        graphic: string;
+        behindText: string;
+      };
+      ouiColorVis14: {
+        graphic: string;
+        behindText: string;
+      };
+      ouiColorVis15: {
+        graphic: string;
+        behindText: string;
+      };
       gray: {
         graphic: string;
         behindText: string;
@@ -1458,6 +1512,12 @@ declare module '@opensearch-project/oui/dist/oui_theme_v9_light.json' {
     ouiColorVis7_behindText: string;
     ouiColorVis8_behindText: string;
     ouiColorVis9_behindText: string;
+    ouiColorVis10_behindText: string;
+    ouiColorVis11_behindText: string;
+    ouiColorVis12_behindText: string;
+    ouiColorVis13_behindText: string;
+    ouiColorVis14_behindText: string;
+    ouiColorVis15_behindText: string;
     euiColorVis0_behindText: string;
     euiColorVis1_behindText: string;
     euiColorVis2_behindText: string;

package/dist/oui_theme_v9_light.min.css

@@ -4584,7 +4584,7 @@ html {
 .ouiCodeBlock .token.cdata,
 .ouiCodeBlock .token.coord,
 .ouiCodeBlock .token.blockquote {
-  color: #5e626b;
+  color: #9C9DA0;
   font-style: italic;
 }
 .ouiCodeBlock .token.selector {
@@ -4596,7 +4596,7 @@ html {
 .ouiCodeBlock .token.doc-comment .token.keyword,
 .ouiCodeBlock .token.attr-value,
 .ouiCodeBlock .token.url .token.content {
-  color: #9c4766;
+  color: #D74987;
 }
 .ouiCodeBlock .token.number,
 .ouiCodeBlock .token.boolean,
@@ -4607,11 +4607,11 @@ html {
 .ouiCodeBlock .token.hexcode,
 .ouiCodeBlock .token.attr-name,
 .ouiCodeBlock .token.attr-equals {
-  color: #336c61;
+  color: #0C8967;
 }
 .ouiCodeBlock .token.atrule .token.rule,
 .ouiCodeBlock .token.keyword {
-  color: #715892;
+  color: #6E28C3;
 }
 .ouiCodeBlock .token.function {
   color: inherit;
@@ -4620,7 +4620,7 @@ html {
   color: #44678a;
 }
 .ouiCodeBlock .token.class-name {
-  color: #44678a;
+  color: #0D70CA;
 }
 .ouiCodeBlock .token.property {
   color: inherit;
@@ -4639,7 +4639,7 @@ html {
   color: #5e626b;
 }
 .ouiCodeBlock .token.title {
-  color: #8a5831;
+  color: #D76813;
 }
 .ouiCodeBlock .token.section {
   color: #a3483a;
@@ -24835,6 +24835,84 @@ button.ouiLink {
   color: #02020E;
 }
 
+.ouiToken--ouiColorVis10 {
+  color: #9C9DA0;
+}
+.ouiToken--ouiColorVis10.ouiToken--light {
+  color: #6d6e74;
+  background-color: #f2f4f6;
+  box-shadow: inset 0 0 0 1px #dfe1e3;
+}
+.ouiToken--ouiColorVis10.ouiToken--dark {
+  background-color: #9C9DA0;
+  color: #02020E;
+}
+
+.ouiToken--ouiColorVis11 {
+  color: #D74987;
+}
+.ouiToken--ouiColorVis11.ouiToken--light {
+  color: #b83f76;
+  background-color: #f8ecf3;
+  box-shadow: inset 0 0 0 1px #f1c8db;
+}
+.ouiToken--ouiColorVis11.ouiToken--dark {
+  background-color: #D74987;
+  color: #02020E;
+}
+
+.ouiToken--ouiColorVis12 {
+  color: #0D70CA;
+}
+.ouiToken--ouiColorVis12.ouiToken--light {
+  color: #0c6bc1;
+  background-color: #e4f0fa;
+  box-shadow: inset 0 0 0 1px #b4d3ef;
+}
+.ouiToken--ouiColorVis12.ouiToken--dark {
+  background-color: #0D70CA;
+  color: #FCFEFF;
+}
+
+.ouiToken--ouiColorVis13 {
+  color: #0C8967;
+}
+.ouiToken--ouiColorVis13.ouiToken--light {
+  color: #0c765b;
+  background-color: #e4f2f0;
+  box-shadow: inset 0 0 0 1px #b4dbd1;
+}
+.ouiToken--ouiColorVis13.ouiToken--dark {
+  background-color: #0C8967;
+  color: #02020E;
+}
+
+.ouiToken--ouiColorVis14 {
+  color: #6E28C3;
+}
+.ouiToken--ouiColorVis14.ouiToken--light {
+  color: #6E28C3;
+  background-color: #eee9f9;
+  box-shadow: inset 0 0 0 1px #d1beed;
+}
+.ouiToken--ouiColorVis14.ouiToken--dark {
+  background-color: #6E28C3;
+  color: #FCFEFF;
+}
+
+.ouiToken--ouiColorVis15 {
+  color: #D76813;
+}
+.ouiToken--ouiColorVis15.ouiToken--light {
+  color: #a65113;
+  background-color: #f8efe7;
+  box-shadow: inset 0 0 0 1px #f1d1b8;
+}
+.ouiToken--ouiColorVis15.ouiToken--dark {
+  background-color: #D76813;
+  color: #02020E;
+}
+
 .ouiToken--gray {
   color: #5A6875;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opensearch-project/oui",
   "description": "OpenSearch UI Component Library",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "license": "Apache-2.0",
   "main": "lib",
   "module": "es",

package/src/global_styling/variables/_colors.scss

@@ -61,49 +61,58 @@ $ouiLinkColor: $ouiColorPrimaryText !default;
 // Use map_merge($ouiColorVisColors, $yourMap) to change individual colors after importing ths file
 // The `behindText` variant is a direct copy of the hex output by the JS ouiPaletteColorBlindBehindText() function
 $ouiPaletteColorBlind: (
-  ouiColorVis0: (
-    graphic: #54B399,
+  ouiColorVis0: (graphic: #54B399,
     behindText: #6DCCB1,
   ),
-  ouiColorVis1: (
-    graphic: #6092C0,
+  ouiColorVis1: (graphic: #6092C0,
     behindText: #79AAD9,
   ),
-  ouiColorVis2: (
-    graphic: #D36086,
+  ouiColorVis2: (graphic: #D36086,
     behindText: #EE789D,
   ),
-  ouiColorVis3: (
-    graphic: #9170B8,
+  ouiColorVis3: (graphic: #9170B8,
     behindText: #A987D1,
   ),
-  ouiColorVis4: (
-    graphic: #CA8EAE,
+  ouiColorVis4: (graphic: #CA8EAE,
     behindText: #E4A6C7,
   ),
-  ouiColorVis5: (
-    graphic: #D6BF57,
+  ouiColorVis5: (graphic: #D6BF57,
     behindText: #F1D86F,
   ),
-  ouiColorVis6: (
-    graphic: #B9A888,
+  ouiColorVis6: (graphic: #B9A888,
     behindText: #D2C0A0,
   ),
-  ouiColorVis7: (
-    graphic: #DA8B45,
+  ouiColorVis7: (graphic: #DA8B45,
     behindText: #F5A35C,
   ),
-  ouiColorVis8: (
-    graphic: #AA6556,
+  ouiColorVis8: (graphic: #AA6556,
     behindText: #C47C6C,
   ),
-  ouiColorVis9: (
-    graphic: #E7664C,
+  ouiColorVis9: (graphic: #E7664C,
     behindText: #FF7E62,
-  )
-) !default;
+  ),
+  ouiColorVis10: (graphic: #9C9DA0,
+    behindText: #9C9DA0,
+  ),
+  ouiColorVis11: (graphic: #D74987,
+    behindText: #D74987,
+  ),
+  ouiColorVis12: (graphic: #0D70CA,
+    behindText: #0D70CA,
+  ),
+  ouiColorVis13: (graphic: #0C8967,
+    behindText: #0C8967,
+  ),
+  ouiColorVis14: (graphic: #6E28C3,
+    behindText: #6E28C3,
+  ),
+  ouiColorVis15: (graphic: #D76813,
+    behindText: #D76813,
+  ),
+  ) !default;
 
-$ouiPaletteColorBlindKeys: map-keys($ouiPaletteColorBlind);
+$ouiPaletteColorBlindKeys: map-keys($ouiPaletteColorBlind
+);
 
 $ouiColorVis0: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis0'), 'graphic') !default;
 $ouiColorVis1: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis1'), 'graphic') !default;
@@ -115,6 +124,12 @@ $ouiColorVis6: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis6'), 'graphic'
 $ouiColorVis7: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis7'), 'graphic') !default;
 $ouiColorVis8: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis8'), 'graphic') !default;
 $ouiColorVis9: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis9'), 'graphic') !default;
+$ouiColorVis10: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis10'), 'graphic') !default;
+$ouiColorVis11: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis11'), 'graphic') !default;
+$ouiColorVis12: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis12'), 'graphic') !default;
+$ouiColorVis13: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis13'), 'graphic') !default;
+$ouiColorVis14: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis14'), 'graphic') !default;
+$ouiColorVis15: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis15'), 'graphic') !default;
 
 // sass-lint:disable-block variable-name-format
 $ouiColorVis0_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis0'), 'behindText') !default;
@@ -127,6 +142,12 @@ $ouiColorVis6_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis6')
 $ouiColorVis7_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis7'), 'behindText') !default;
 $ouiColorVis8_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis8'), 'behindText') !default;
 $ouiColorVis9_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis9'), 'behindText') !default;
+$ouiColorVis10_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis10'), 'behindText') !default;
+$ouiColorVis11_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis11'), 'behindText') !default;
+$ouiColorVis12_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis12'), 'behindText') !default;
+$ouiColorVis13_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis13'), 'behindText') !default;
+$ouiColorVis14_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis14'), 'behindText') !default;
+$ouiColorVis15_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis15'), 'behindText') !default;
 
 // Charts
 $ouiColorChartLines: shade($ouiColorLightestShade, 3%) !default;
@@ -136,20 +157,20 @@ $ouiColorChartBand: $ouiColorLightestShade !default;
 $ouiCodeBlockBackgroundColor: $ouiColorLightestShade !default;
 $ouiCodeBlockColor: makeHighContrastColor($ouiTextColor, $ouiCodeBlockBackgroundColor) !default;
 $ouiCodeBlockSelectedBackgroundColor: inherit !default;
-$ouiCodeBlockCommentColor: makeHighContrastColor($ouiTextSubduedColor, $ouiCodeBlockBackgroundColor) !default;
+$ouiCodeBlockCommentColor: $ouiColorVis10 !default;
 $ouiCodeBlockSelectorTagColor: inherit !default;
-$ouiCodeBlockStringColor: makeHighContrastColor($ouiColorVis2, $ouiCodeBlockBackgroundColor) !default;
+$ouiCodeBlockStringColor: $ouiColorVis11 !default;
 $ouiCodeBlockTagColor: makeHighContrastColor($ouiColorVis1, $ouiCodeBlockBackgroundColor) !default;
-$ouiCodeBlockNameColor: makeHighContrastColor($ouiColorVis1, $ouiCodeBlockBackgroundColor) !default;
-$ouiCodeBlockNumberColor: makeHighContrastColor($ouiColorVis0, $ouiCodeBlockBackgroundColor) !default;
-$ouiCodeBlockKeywordColor: makeHighContrastColor($ouiColorVis3, $ouiCodeBlockBackgroundColor) !default;
+$ouiCodeBlockNameColor: $ouiColorVis12 !default;
+$ouiCodeBlockNumberColor: $ouiColorVis13 !default;
+$ouiCodeBlockKeywordColor: $ouiColorVis14 !default;
 $ouiCodeBlockFunctionTitleColor: inherit !default;
-$ouiCodeBlockTypeColor: makeHighContrastColor($ouiColorVis1, $ouiCodeBlockBackgroundColor) !default;
+$ouiCodeBlockTypeColor: $ouiColorVis12 !default;
 $ouiCodeBlockAttributeColor: inherit !default;
 $ouiCodeBlockSymbolColor: makeHighContrastColor($ouiColorVis9, $ouiCodeBlockBackgroundColor) !default;
 $ouiCodeBlockParamsColor: inherit !default;
-$ouiCodeBlockMetaColor:  makeHighContrastColor($ouiTextSubduedColor, $ouiCodeBlockBackgroundColor) !default;
-$ouiCodeBlockTitleColor: makeHighContrastColor($ouiColorVis7, $ouiCodeBlockBackgroundColor) !default;
+$ouiCodeBlockMetaColor: makeHighContrastColor($ouiTextSubduedColor, $ouiCodeBlockBackgroundColor) !default;
+$ouiCodeBlockTitleColor: $ouiColorVis15 !default;
 $ouiCodeBlockSectionColor: makeHighContrastColor($ouiColorVis9, $ouiCodeBlockBackgroundColor) !default;
 $ouiCodeBlockAdditionColor: makeHighContrastColor($ouiColorVis0, $ouiCodeBlockBackgroundColor) !default;
 $ouiCodeBlockDeletionColor: makeHighContrastColor($ouiColorDanger, $ouiCodeBlockBackgroundColor) !default;
@@ -188,48 +209,38 @@ $euiColorDisabledText: $ouiColorDisabledText;
 $euiColorSuccessText: $ouiColorSuccessText;
 $euiLinkColor: $ouiLinkColor;
 $euiPaletteColorBlind: (
-  euiColorVis0: (
-    graphic: #54B399,
+  euiColorVis0: (graphic: #54B399,
     behindText: #6DCCB1,
   ),
-  euiColorVis1: (
-    graphic: #6092C0,
+  euiColorVis1: (graphic: #6092C0,
     behindText: #79AAD9,
   ),
-  euiColorVis2: (
-    graphic: #D36086,
+  euiColorVis2: (graphic: #D36086,
     behindText: #EE789D,
   ),
-  euiColorVis3: (
-    graphic: #9170B8,
+  euiColorVis3: (graphic: #9170B8,
     behindText: #A987D1,
   ),
-  euiColorVis4: (
-    graphic: #CA8EAE,
+  euiColorVis4: (graphic: #CA8EAE,
     behindText: #E4A6C7,
   ),
-  euiColorVis5: (
-    graphic: #D6BF57,
+  euiColorVis5: (graphic: #D6BF57,
     behindText: #F1D86F,
   ),
-  euiColorVis6: (
-    graphic: #B9A888,
+  euiColorVis6: (graphic: #B9A888,
     behindText: #D2C0A0,
   ),
-  euiColorVis7: (
-    graphic: #DA8B45,
+  euiColorVis7: (graphic: #DA8B45,
     behindText: #F5A35C,
   ),
-  euiColorVis8: (
-    graphic: #AA6556,
+  euiColorVis8: (graphic: #AA6556,
     behindText: #C47C6C,
   ),
-  euiColorVis9: (
-    graphic: #E7664C,
+  euiColorVis9: (graphic: #E7664C,
     behindText: #FF7E62,
-  )
-) !default;
-$euiPaletteColorBlindKeys: map-keys($euiPaletteColorBlind);
+  )) !default;
+$euiPaletteColorBlindKeys: map-keys($euiPaletteColorBlind
+);
 $euiColorVis0: $ouiColorVis0;
 $euiColorVis1: $ouiColorVis1;
 $euiColorVis2: $ouiColorVis2;
@@ -274,4 +285,4 @@ $euiCodeBlockAdditionColor: $ouiCodeBlockAdditionColor;
 $euiCodeBlockDeletionColor: $ouiCodeBlockDeletionColor;
 $euiCodeBlockSelectorClassColor: $ouiCodeBlockSelectorClassColor;
 $euiCodeBlockSelectorIdColor: $ouiCodeBlockSelectorIdColor;
-/* End of Aliases */
+/* End of Aliases */

package/src/themes/oui/oui_colors_dark.scss

@@ -38,6 +38,15 @@ $ouiColorFullShade: #FFF;
 $ouiPageBackgroundColor: shade($ouiColorLightestShade, 45%);
 $ouiColorHighlight: #2E2D25;
 
+// CodeBlock
+$ouiCodeBlockCommentShade: #838B93;
+$ouiCodeBlockStringShade: #D0809B;
+$ouiCodeBlockNameShade: #6AB0F1;
+$ouiCodeBlockNumberShade: #10B688;
+$ouiCodeBlockKeywordShade: #B174FC;
+$ouiCodeBlockTypeShade: #6AB0F1;
+$ouiCodeBlockTitleShade: #DD8232;
+
 // Variations from core
 $ouiTextColor: #DFE5EF;
 $ouiTitleColor: $ouiTextColor;
@@ -62,8 +71,23 @@ $ouiColorChartBand: tint($ouiColorLightestShade, 2.5%);
 $ouiShadowColor: #000;
 $ouiShadowColorLarge: #000;
 
+//CodeBlock Colors
+$ouiCodeBlockCommentColor: $ouiCodeBlockCommentShade;
+$ouiCodeBlockStringColor: $ouiCodeBlockStringShade;
+$ouiCodeBlockNameColor: $ouiCodeBlockNameShade;
+$ouiCodeBlockNumberColor: $ouiCodeBlockNumberShade;
+$ouiCodeBlockKeywordColor: $ouiCodeBlockKeywordShade;
+$ouiCodeBlockTypeColor: $ouiCodeBlockTypeShade;
+$ouiCodeBlockTitleColor: $ouiCodeBlockTitleShade;
 
 /* OUI -> EUI Aliases */
+$euiCodeBlockCommentColor: $ouiCodeBlockCommentColor;
+$euiCodeBlockStringColor: $ouiCodeBlockStringColor;
+$euiCodeBlockNameColor: $ouiCodeBlockNameColor;
+$euiCodeBlockNumberColor: $ouiCodeBlockNumberColor;
+$euiCodeBlockKeywordColor: $ouiCodeBlockKeywordColor;
+$euiCodeBlockTypeColor: $ouiCodeBlockTypeColor;
+$euiCodeBlockTitleColor: $ouiCodeBlockTitleColor;
 $euiColorGhost: $ouiColorGhost;
 $euiColorInk: $ouiColorInk;
 $euiColorPrimary: $ouiColorPrimary;
@@ -97,4 +121,4 @@ $euiColorChartLines: $ouiColorChartLines;
 $euiColorChartBand: $ouiColorChartBand;
 $euiShadowColor: $ouiShadowColor;
 $euiShadowColorLarge: $ouiShadowColorLarge;
-/* End of Aliases */
+/* End of Aliases */