@opensearch-project/oui 1.20.0 → 1.21.0

package/src/themes/oui-next/global_styling/variables/_colors.scss

@@ -61,49 +61,57 @@ $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 +123,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 +141,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 +156,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 +208,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 +284,4 @@ $euiCodeBlockAdditionColor: $ouiCodeBlockAdditionColor;
 $euiCodeBlockDeletionColor: $ouiCodeBlockDeletionColor;
 $euiCodeBlockSelectorClassColor: $ouiCodeBlockSelectorClassColor;
 $euiCodeBlockSelectorIdColor: $ouiCodeBlockSelectorIdColor;
-/* End of Aliases */
+/* End of Aliases */

package/src/themes/oui-next/oui_next_colors_dark.scss

@@ -38,6 +38,15 @@ $ouiColorFullShade: #FCFEFF;
 $ouiPageBackgroundColor: #172430;
 $ouiColorHighlight: #2E2D25;
 
+// CodeBlock
+$ouiCodeBlockCommentShade: #838B93;
+$ouiCodeBlockStringShade: #D0809B;
+$ouiCodeBlockNameShade: #6AB0F1;
+$ouiCodeBlockNumberShade: #10B688;
+$ouiCodeBlockKeywordShade: #B174FC;
+$ouiCodeBlockTypeShade: #6AB0F1;
+$ouiCodeBlockTitleShade: #DD8232;
+
 // Variations from core
 $ouiTextColor: #DFE5EF;
 $ouiTitleColor: $ouiTextColor;
@@ -64,8 +73,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;

package/src/themes/v9/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/v9/v9_colors_dark.scss

@@ -38,6 +38,15 @@ $ouiColorFullShade: #FCFEFF;
 $ouiPageBackgroundColor: #02020E;
 $ouiColorHighlight: #3D2C0D;
 
+// CodeBlock
+$ouiCodeBlockCommentShade: #838B93;
+$ouiCodeBlockStringShade: #D0809B;
+$ouiCodeBlockNameShade: #6AB0F1;
+$ouiCodeBlockNumberShade: #10B688;
+$ouiCodeBlockKeywordShade: #B174FC;
+$ouiCodeBlockTypeShade: #6AB0F1;
+$ouiCodeBlockTitleShade: #DD8232;
+
 // Variations from core
 $ouiTextColor: $ouiColorDarkShade;
 $ouiTitleColor: #C6C9CE;
@@ -67,8 +76,23 @@ $ouiCodeBlockBackgroundColor: $ouiColorLightestShade;
 $ouiShadowColor: #000;
 $ouiShadowColorLarge: $ouiShadowColor;
 
+//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;