use gray bg highlighting for inline code in HTML content blocks

Author: haschek

CHANGELOG.md

@@ -28,13 +28,15 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<ColorField />`
     -   input component for colors
     -   uses a subset from the configured color palette by default, but it also allows to enter custom colors
+-   `<MultiSuggestField />`
+    -   `MultiSuggestFieldSelectionProps` provides `newlyRemoved` for callbacks set when removing a selected item
+-   `<HtmlContentClock />`
+    -   inline `code` uses same gray background highlighting like code blocks
 -   CSS custom properties
     -   beside the color palette we now mirror the most important layout configuration variables as CSS custom properties
 -   new icons:
     -   `state-confirmed-all`
     -   `state-declined-all`
--   `<MultiSuggestField />`
-    -   `MultiSuggestFieldSelectionProps` provides `newlyRemoved` for callbacks set when removing a selected item
 
 ### Fixed
 

src/cmem/markdown/Markdown.stories.tsx

@@ -36,15 +36,15 @@ This is a paragraph.
     * another line
 3. third item
 
-This is a paragraph with a [text link](http://example.com/) and a footnote reference [^1].
+This is a paragraph with a [text link](http://example.com/), some \`inline code\`, and a footnote reference [^1].
 
 ## Headline level 2
 ### Headline level 3
 #### Headline level 4
 ##### Headline level 5
 ###### Headline level 6
 
-    This is a code block. 
+    This is a code block.
 
 \`\`\`
 another code block

src/components/Typography/typography.scss

@@ -13,20 +13,26 @@ html {
 
 body {
     font-family: $eccgui-font-family-default;
-    font-weight: $eccgui-font-weight-regular;
-    text-rendering: optimizelegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+
     // User-facing text may contain Unicode symbols (e.g. "★") that fall outside the primary font stack.
     // Browsers pick different system fallback fonts for such characters, causing glyphs to render at
     // different optical sizes (smaller in Firefox). font-size-adjust normalises the fallback font size
     // by matching the primary font's x-height, reducing the visual size discrepancy across browsers.
     font-size-adjust: from-font;
+    font-weight: $eccgui-font-weight-regular;
+    text-rendering: optimizelegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 code {
     font-family: $eccgui-font-family-monospace;
     font-size: 0.9em;
+
+    .#{$eccgui}-typography__contentblock &,
+    &.#{$eccgui}-typography__text {
+        background-color: $eccgui-color-workspace-background;
+    }
 }
 
 strong {