Skip to content

Fix note admonition and linked inline-code contrast/consistency #3371

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
annakudelska wants to merge 1 commit into
base: repo/summer-2026-redesign-all-components
Choose a base branch
from
Open

Fix note admonition and linked inline-code contrast/consistency #3371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 24 additions & 4 deletions docusaurus/src/scss/admonition.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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);
}
Expand Down
23 changes: 22 additions & 1 deletion docusaurus/src/scss/code.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
}
}

Expand Down