Highlight inline code

CHANGELOG-WIP.md

@@ -2,6 +2,7 @@
 
 ### Content Management
 - “Related To”, “Not Related To”, “Author”, and relational field condition rules now allow multiple elements to be specified. ([#16121](https://github.com/craftcms/cms/discussions/16121))
+- Improved the styling of inline code fragments. ([#16141](https://github.com/craftcms/cms/pull/16141))
 
 ### Accessibility
 - Improved the accessibility of Checkboxes and Radio Buttons fields that allow custom options. ([#16080](https://github.com/craftcms/cms/pull/16080))

src/web/assets/cp/src/css/_main.scss

@@ -823,6 +823,26 @@ code,
   &.smalltext {
     font-size: 0.8em !important;
   }
+
+  .instructions &,
+  .pane &,
+  .note & {
+    background-color: var(--gray-100);
+    padding-block: 0.0625em;
+    padding-inline: 0.25em;
+    border-radius: var(--small-border-radius);
+    border: 1px solid var(--hairline-color);
+  }
+
+  .warning & {
+    background-color: var(--warning-background);
+    border-color: var(--warning-border-color);
+  }
+
+  .tip & {
+    background-color: var(--notice-background);
+    border-color: var(--notice-border-color);
+  }
 }
 
 .code {

src/web/assets/cp/src/css/_variables.scss

@@ -47,8 +47,12 @@
   --error-color-rgb: 216 31 35;
   --error-color: rgb(var(--error-color-rgb));
   --warning-color: var(--amber-700);
+  --warning-background: var(--amber-100);
+  --warning-border-color: var(--amber-300);
   --success-color: var(--teal-700);
   --notice-color: var(--sky-700);
+  --notice-background: var(--sky-100);
+  --notice-border-color: var(--sky-300);
 
   // status colors
   --enabled-color: var(--teal-550);