From 76454af5d5c2f58862649fe543c68a68ddfb2550 Mon Sep 17 00:00:00 2001
From: Anka Kudelska <anna.kudelska@strapi.io>
Date: Tue, 4 Aug 2026 13:55:49 +0200
Subject: [PATCH] Fix note admonition and linked inline-code
 contrast/consistency

- note admonition: rework background/border/inline-code colors in both
  light and dark mode so text meets WCAG AA (4.5:1) against their
  backgrounds
- all inline code wrapped in a link: prepend a link icon (Phosphor),
  reduce font-weight from bold to regular, and normalize the border
  width to 1px to match admonition borders (previously 1.6px via
  Infima's default)
---
 docusaurus/src/scss/admonition.scss | 28 ++++++++++++++++++++++++----
 docusaurus/src/scss/code.scss       | 23 ++++++++++++++++++++++-
 2 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/docusaurus/src/scss/admonition.scss b/docusaurus/src/scss/admonition.scss
index c6249707d4..003b23b2cd 100644
--- a/docusaurus/src/scss/admonition.scss
+++ b/docusaurus/src/scss/admonition.scss
@@ -102,14 +102,20 @@
   }
 
   &--note {
-    --custom-admonition-background-color: var(--strapi-primary-100);
+    --custom-admonition-background-color: rgba(240, 240, 255, 0.6); // primary-100 @ 60%
     --custom-admonition-border-color: var(--strapi-primary-200);
-    --custom-admonition-code-background-color: var(--strapi-primary-200);
+    --custom-admonition-code-background-color: var(--strapi-primary-100);
     --custom-admonition-code-color: var(--strapi-primary-600);
     --custom-admonition-heading-color: var(--strapi-primary-600);
 
     --custom-selection-background-color: var(--strapi-primary-700);
     --custom-selection-color: var(--strapi-secondary-100);
+
+    h1, h2, h3, li, p, table {
+      code, a code {
+        --custom-code-border-color: var(--strapi-primary-200);
+      }
+    }
   }
 
   &--tip,
@@ -223,8 +229,11 @@
     }
 
     &--note {
-      --custom-admonition-code-color: var(--strapi-secondary-500);
-      --custom-admonition-heading-color: var(--strapi-secondary-500);
+      --custom-admonition-background-color: rgba(39, 31, 224, 0.06); // primary-700 @ 6%
+      --custom-admonition-border-color: rgba(123, 121, 255, 0.12); // primary-500 @ 12%
+      --custom-admonition-code-background-color: rgba(123, 121, 255, 0.06); // primary-500 @ 6%
+      --custom-admonition-code-color: var(--strapi-primary-500);
+      --custom-admonition-heading-color: var(--strapi-primary-500);
     }
 
     &--tip,
@@ -268,6 +277,17 @@
       --custom-code-color: var(--custom-admonition-code-color);
     }
 
+    // code.scss's dark-mode `pre code, code` rule forces a grey
+    // `neutral-600` border via `!important`, which otherwise beats every
+    // declaration above regardless of specificity/order. Match it with
+    // `!important` here, on a more specific selector, to actually apply
+    // this admonition's own border color to its inline code.
+    &--note {
+      code, a code {
+        --custom-code-border-color: rgba(123, 121, 255, 0.2) !important; // primary-500 @ 20%
+      }
+    }
+
     .strapi-iqb {
       --strapi-iqb-background-color: var(--strapi-neutral-0);
     }
diff --git a/docusaurus/src/scss/code.scss b/docusaurus/src/scss/code.scss
index a5f8e0d7dc..fa1d23d12a 100644
--- a/docusaurus/src/scss/code.scss
+++ b/docusaurus/src/scss/code.scss
@@ -54,6 +54,10 @@ pre {
 h1, h2, h3, li, p, table {
   code {
     background-color: var(--custom-code-background-color);
+    // Infima's base `code` rule sets `border: 0.1rem solid ...` (1.6px at
+    // the default 16px root font size); override the width so inline code
+    // matches the 1px admonition border.
+    border-width: 1px;
     border-color: var(--custom-code-border-color);
     color: var(--custom-code-color);
     padding: 2px 4px;
@@ -64,7 +68,24 @@ h1, h2, h3, li, p, table {
     --custom-code-border-color: var(--strapi-primary-200);
     --custom-code-color: var(--ifm-link-color);
 
-    font-weight: var(--ifm-font-weight-bold);
+    font-weight: 400;
+
+    // Flags the inline code itself as a link. Uses the Phosphor "link"
+    // glyph directly (font already loaded site-wide) rather than the
+    // <Icon> component, since this needs to apply to every `a code`
+    // occurrence in existing content, not just newly authored pages.
+    // Inherits `color` from the code element, so it matches automatically
+    // in every admonition variant and in both light/dark mode.
+    &::before {
+      content: "\e2e2";
+      font-family: "Phosphor-Bold";
+      font-weight: normal;
+      margin-right: 4px;
+      // Nudges the glyph down without affecting layout: relative offsets
+      // don't take up space, so the code box's height stays unchanged.
+      position: relative;
+      top: 1px;
+    }
   }
 }