Amsterdam: better code block contrast (#4272)

Improves the contrast of code blocks in EUI's Amsterdam theme:

* Changed the inline code color to our brand pink. Lots of trial and error here. It felt like it needed to be something that wouldn't be confused for a button / link. Purple felt like it stood out without being overpowering. The browns were an OK alternative.
* Increased the font-weight of code to 500, from 400. Because code already comes in at smaller 90% sizing, the extra weight makes them stand out a bit here.

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 - Unify focus states by leaning into `outline` and restricting to keyboard navigation ([#4242](https://github.com/elastic/eui/pull/4242))
 - Removed faux border from `EuiAvatar` ([#4255](https://github.com/elastic/eui/pull/4255))
+- Changed the color and font-weight of inline code block ([#4272](https://github.com/elastic/eui/pull/4272))
 
 ## [`30.3.0`](https://github.com/elastic/eui/tree/v30.3.0)
 

src/components/code/_code_block.scss

@@ -24,7 +24,7 @@
     @include euiCodeFont;
     display: block;
     line-height: $euiLineHeight;
-    font-weight: $euiFontWeightRegular;
+    font-weight: $euiCodeFontWeightRegular;
     font-size: inherit;
   }
 
@@ -180,7 +180,7 @@
 
   .hljs-selector-tag {
     color: $euiCodeBlockSelectorTagColor;
-    font-weight: bold;
+    font-weight: $euiCodeFontWeightBold;
   }
 
   .hljs-string,
@@ -274,7 +274,7 @@
   }
 
   .hljs-strong {
-    font-weight: bold;
+    font-weight: $euiCodeFontWeightBold;
   }
 
   .hljs-link {

src/global_styling/variables/_typography.scss

@@ -48,11 +48,13 @@ $euiLineHeight:     1.5 !default;
 $euiBodyLineHeight: 1 !default;
 
 // Font weights
-$euiFontWeightLight:    300 !default;
-$euiFontWeightRegular:  400 !default;
-$euiFontWeightMedium:   500 !default;
-$euiFontWeightSemiBold: 600 !default;
-$euiFontWeightBold:     700 !default;
+$euiFontWeightLight:        300 !default;
+$euiFontWeightRegular:      400 !default;
+$euiFontWeightMedium:       500 !default;
+$euiFontWeightSemiBold:     600 !default;
+$euiFontWeightBold:         700 !default;
+$euiCodeFontWeightRegular:  400 !default;
+$euiCodeFontWeightBold:     700 !default;
 
 // Titles map
 // Lists all the properties per EuiTitle size that then gets looped through to create the selectors.

src/themes/eui-amsterdam/global_styling/variables/_typography.scss

@@ -16,6 +16,9 @@ $euiFontSizeXXL:  floor($euiFontSize * 2.43); // 34px // h1
 
 $euiBodyLineHeight: 1.142857143; // 16px from a 14px base font size to ensure it aligns to our 16px grid
 
+$euiCodeFontWeightRegular: 400;
+$euiCodeFontWeightBold: 700;
+
 // Use 8px increments for base gridline
 @function lineHeightFromBaseline($multiplier: 3) {
   @return convertToRem(($euiSize/2)*$multiplier);

src/themes/eui-amsterdam/overrides/_code_block.scss

@@ -0,0 +1,8 @@
+.euiCodeBlock.euiCodeBlock--inline {
+  border-radius: $euiBorderRadiusSmall;
+  color: makeHighContrastColor($euiColorVis3, $euiCodeBlockBackgroundColor);
+
+  .euiCodeBlock__code {
+    font-weight: $euiCodeFontWeightBold;
+  }
+}

src/themes/eui-amsterdam/overrides/_index.scss

@@ -3,7 +3,7 @@
 @import 'button_empty';
 @import 'button_group';
 @import 'call_out';
-@import 'code';
+@import 'code_block';
 @import 'context_menu';
 @import 'filter_group';
 @import 'form_control_layout';