[Visual Refresh][EuiCode] Update background color

packages/eui-theme-borealis/changelogs/upcoming/8813.md

@@ -0,0 +1,2 @@
+- Added new component token `components.forms.codeInlineBackground`
+

packages/eui-theme-borealis/src/variables/_components.ts

@@ -73,6 +73,7 @@ const component_colors: _EuiThemeComponentColors = {
     ([textParagraph]) => textParagraph,
     ['colors.textParagraph']
   ),
+  codeInlineBackground: SEMANTIC_COLORS.shade15,
   codeInlineColor: SEMANTIC_COLORS.assistance100,
   codeCommentColor: computed(
     ([textSubdued]) => textSubdued,
@@ -363,6 +364,7 @@ export const components: _EuiThemeComponents = {
 
     buttonGroupFocusColor: SEMANTIC_COLORS.plainLight,
 
+    codeInlineBackground: SEMANTIC_COLORS.shade135,
     codeInlineColor: SEMANTIC_COLORS.assistance60,
     codeStringColor: SEMANTIC_COLORS.accent60,
     codeTagColor: SEMANTIC_COLORS.primary60,

packages/eui-theme-common/changelogs/upcoming/8813.md

@@ -0,0 +1,2 @@
+- Added type for `components.forms.codeInlineBackground`
+

packages/eui-theme-common/src/global_styling/variables/components.ts

@@ -32,6 +32,7 @@ export type _EuiThemeComponentColors = {
   codeBackground: ColorModeSwitch;
   codeBackgroundSelected: ColorModeSwitch;
   codeColor: ColorModeSwitch;
+  codeInlineBackground: ColorModeSwitch;
   codeInlineColor: ColorModeSwitch;
   codeCommentColor: ColorModeSwitch;
   codeSelectorColor: ColorModeSwitch;

packages/eui/changelogs/upcoming/8813.md

@@ -0,0 +1,3 @@
+- Added new component token `components.forms.codeInlineBackground`
+- Updated background color for `EuiCode` to use `components.forms.codeInlineBackground`
+

packages/eui/src/components/code/code.styles.ts

@@ -26,7 +26,7 @@ export const euiCodeStyles = (euiThemeContext: UseEuiTheme) => {
       font-family: ${euiTheme.font.familyCode};
       font-size: 0.9em; /* 1 */
       ${logicalShorthandCSS('padding', '0.2em 0.5em')} /* 1 */
-      background-color: ${codeSyntaxVariables.backgroundColor};
+      background-color: ${codeSyntaxVariables.inlineBackgroundColor};
       ${highContrastModeStyles(euiThemeContext, {
         forced: `
           border: ${euiTheme.border.thin};

packages/eui/src/components/code/code_syntax.styles.ts

@@ -25,6 +25,7 @@ export const euiCodeSyntaxVariables = (euiThemeContext: UseEuiTheme) => {
   return {
     backgroundColor,
     color,
+    inlineBackgroundColor: euiTheme.components.codeInlineBackground,
     inlineCodeColor: euiTheme.components.codeInlineColor,
     selectedBackgroundColor: euiTheme.components.codeBackgroundSelected,
     commentColor: euiTheme.components.codeCommentColor,

packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts

@@ -78,6 +78,10 @@ const component_colors: _EuiThemeComponentColors = {
     ([lightestShade, text]) => makeHighContrastColor(text)(lightestShade),
     ['colors.lightestShade', 'colors.text']
   ),
+  codeInlineBackground: computed(
+    ([lightestShade]) => lightestShade,
+    ['colors.lightestShade']
+  ),
   codeInlineColor: computed(
     ([lightestShade]) =>
       makeHighContrastColor(colorVis.euiColorVis3)(lightestShade),