From 05bf4458a148e25a9ab1f5719f716281f41282a5 Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Thu, 30 Apr 2026 21:39:59 -0400 Subject: [PATCH 01/16] Add visual sandbox docs page Standalone /sandbox page that renders one example of every pattern from the visual refresh: typography, admonitions, link-list cards, DocCards, sidebar. Used as the integration target for issue #492 review PRs. Marked unlisted so it doesn't appear in the sidebar. Co-Authored-By: Claude Opus 4.7 --- docs/sandbox.md | 73 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 docs/sandbox.md diff --git a/docs/sandbox.md b/docs/sandbox.md new file mode 100644 index 0000000000..ecbed07109 --- /dev/null +++ b/docs/sandbox.md @@ -0,0 +1,73 @@ +--- +title: Visual sandbox +description: Reference page for reviewing the visual refresh. +unlisted: true +slug: /sandbox +--- + +# Visual sandbox + +Reference page rendering one example of every pattern from the visual refresh ([issue #492](https://github.com/openrewrite/rewrite-docs/issues/492)). Used for designer/PM review of staged PRs. + +## Typography + +# Heading 1 — page title scale + +## Heading 2 — section + +### Heading 3 — subsection + +#### Heading 4 + +Body paragraph using Inter at the docs base size. Includes an [inline link](/sandbox) and `inline code`. Set against the off-white background that runs across the site. + +## Admonitions + +:::info +For a better understanding of the permissions requested, please review our [GitHub permissions reference documentation](/sandbox). +::: + +:::tip +Run `mod recipe debug` first if you want to see the LST output before applying any change. +::: + +:::note +Running a recipe _does not_ automatically update the code in the selected repositories. You will be able to view the results and decide what you want to commit. +::: + +:::warning +Depending on what organization you ran the recipe against, you may not have access to commit code or create a PR. Please don't try and open PRs against random projects that aren't your own. +::: + +:::caution +If you are still on the legacy Neon development database, do not share your `DATABASE_URL`. It contains your database credentials. +::: + +:::danger +Force-pushing to `master` rewrites history for every collaborator. Coordinate before doing this. +::: + +## Markdown link-list cards + +Plain markdown bulleted lists where every item is just a link render as cards. This pattern shows up on recipe README pages. + +### Categories + +- [FF4j](/sandbox) +- [LaunchDarkly](/sandbox) +- [OpenFeature](/sandbox) +- [Quarkus](/sandbox) + +### Recipes + +- [Remove a String feature flag for feature key](/sandbox) +- [Remove a boolean feature flag for feature key](/sandbox) +- [Remove a double feature flag for feature key](/sandbox) + +## DocCard layout + +Generated index page cards (e.g. `/changelog`, `/recipes`, `/authoring-recipes`) are full-width and stacked vertically. See [Changelog](/changelog) for a live example. + +## Sidebar nav + +The left-hand sidebar uses bold dark text for collapsible categories, blue for the active expanded section, and regular weight for child items. From ebafd47c1010aa09597772e0801f2c48bbe5aac7 Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Thu, 30 Apr 2026 21:41:05 -0400 Subject: [PATCH 02/16] Typography refresh: Inter throughout, smaller H1 Drop Beausite Slick for Inter on H1 and markdown headings. Reduce H1 from 3.75rem/300 to 2.25rem/600 to align with the simpler typographic scale shown in design references. Refs #492 Co-Authored-By: Claude Opus 4.7 --- src/css/custom.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 6a3b48ed13..bc1a97e239 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -202,10 +202,10 @@ html[data-theme=dark] [class^=docMainContainer_] .breadcrumbs__link:hover { } [class^=docMainContainer_] h1 { - --ifm-heading-font-weight: 300; - --ifm-heading-font-family: "Beausite", sans-serif; - --ifm-h1-font-size: 3.75rem; - --ifm-leading: 1; + --ifm-heading-font-weight: 600; + --ifm-heading-font-family: "Inter", sans-serif; + --ifm-h1-font-size: 2.25rem; + --ifm-leading: 1.2; margin-bottom: 1.25rem; } @@ -241,8 +241,8 @@ html[data-theme='dark'] [class^=docMainContainer_] .card { } .markdown { - --ifm-heading-font-family: "Beausite", sans-serif; - --ifm-heading-font-weight: 300; + --ifm-heading-font-family: "Inter", sans-serif; + --ifm-heading-font-weight: 600; --ifm-link-decoration: underline; } From 7497bfffd0affd76981beaf0e38818c7fa4ee828 Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Thu, 30 Apr 2026 21:42:13 -0400 Subject: [PATCH 03/16] Card components redesign: full-width stacked, compact, subtle hover - Generated index page cards now span full width and stack vertically instead of a 2-column grid - Remove gems-bg decoration from generated index pages - Drop padding--lg from DocCard so module CSS controls padding (was blocked by a same-specificity !important tie with Infima) - Card padding 2rem -> 0.75rem 1.25rem; min-height 3.25rem; rounded 8px - Hover: light grey #F3F4F6 background instead of mint green - Title 1.25rem -> 1.0625rem; description 1rem -> 14px Inter, muted - Card vertical gap 2rem -> 1.25rem Refs #492 Co-Authored-By: Claude Opus 4.7 --- src/css/custom.css | 24 +++++++++++++----------- src/theme/DocCard/index.tsx | 2 +- src/theme/DocCard/styles.module.css | 27 ++++++++++++++++++--------- 3 files changed, 32 insertions(+), 21 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 6a3b48ed13..4f4973c0ab 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -215,25 +215,27 @@ html[data-theme=dark] [class^=docMainContainer_] .breadcrumbs__link:hover { position: relative; } -[class^=docMainContainer_] [class^=generatedIndexPage_]::before { - position: absolute; - background: url(/img/gems-bg.webp) no-repeat 0 0; - width: 1322px; - height: 1070px; - z-index: -1; - content: ''; +[class^=docMainContainer_] [class^=generatedIndexPage_] .row > .col, +[class^=docMainContainer_] [class^=generatedIndexPage_] .col--6 { + display: flex; + flex: 0 0 100% !important; + max-width: 100% !important; } -[class^=docMainContainer_] [class^=generatedIndexPage_] .row[class*=list_] > .col { - display: flex; +[class^=docMainContainer_] [class^=generatedIndexPage_] .card { + padding: 0.75rem 1.25rem !important; } [class^=docMainContainer_] [class^=generatedIndexPage_] .margin-top--lg { margin-top: 4.5rem !important; } -[class^=docMainContainer_] [class^=generatedIndexPage_] .margin-bottom--lg { - margin-bottom: 2.5rem !important; +html body .margin-bottom--lg { + margin-bottom: 1.25rem !important; +} + +html body section.row .col { + margin-bottom: 1.25rem !important; } html[data-theme='dark'] [class^=docMainContainer_] .card { diff --git a/src/theme/DocCard/index.tsx b/src/theme/DocCard/index.tsx index f27321ae15..8d69817e66 100644 --- a/src/theme/DocCard/index.tsx +++ b/src/theme/DocCard/index.tsx @@ -44,7 +44,7 @@ function CardContainer({ return ( {children} diff --git a/src/theme/DocCard/styles.module.css b/src/theme/DocCard/styles.module.css index e9d429925e..2b6bcd073a 100644 --- a/src/theme/DocCard/styles.module.css +++ b/src/theme/DocCard/styles.module.css @@ -4,15 +4,22 @@ --ifm-link-hover-decoration: none; box-shadow: none; - border: 1px solid var(--ifm-color-divider); - transition: all var(--ifm-transition-fast) ease; - transition-property: border, box-shadow; + border: 1px solid var(--ifm-color-border); + border-radius: 8px; + background-color: #fff; + transition: background-color var(--ifm-transition-fast) ease, border-color var(--ifm-transition-fast) ease; width: 100%; + min-height: 3.25rem; + display: flex; + flex-direction: column; + justify-content: center; + padding: 0.75rem 1.25rem !important; } .cardContainer:hover { - box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.15); - background-color: var(--ifm-color-mint); + box-shadow: none; + background-color: #F3F4F6; + border-color: rgba(4, 24, 52, 0.2); } .cardContainer *:last-child { @@ -21,14 +28,16 @@ .cardTitle { --ifm-heading-margin-bottom: 8px; - font-size: 1.25rem; + font-size: 1.0625rem; font-weight: 600; - line-height: 1.666; + line-height: 1.4; } .cardDescription { - color: var(--ifm-heading-color); - font-size: 1rem; + color: rgba(4, 24, 52, 0.65); + font-family: "Inter", sans-serif; + font-size: 14px; + line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; From 738c0da15fa24aedc18ff228b4d9355079f11d01 Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Thu, 30 Apr 2026 21:42:47 -0400 Subject: [PATCH 04/16] Sidebar nav refresh: bold categories, blue active state, tighter spacing - Collapsible category labels render bold/dark; the active expanded category turns blue (matches link color) - Leaf items default to regular weight; the active leaf is bold blue - Reduce per-item padding to 0.4rem and add 0.25rem top margin between items for a denser stack - Indent nested lists by 0.75rem Refs #492 Co-Authored-By: Claude Opus 4.7 --- src/css/custom.css | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index 6a3b48ed13..fb8fb78a35 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -137,6 +137,40 @@ figure figcaption { color: var(--ifm-heading-color); } +.theme-doc-sidebar-menu .menu__list-item { + margin-top: 0.25rem; +} + +.theme-doc-sidebar-menu .menu__list .menu__list { + padding-left: 0.75rem; + margin-top: 0.25rem; +} + +.theme-doc-sidebar-menu .menu__link { + padding: 0.4rem 0.5rem; + line-height: 1.5; +} + +.theme-doc-sidebar-menu .menu__link--sublist { + font-weight: 600; + color: var(--ifm-heading-color); +} + +.theme-doc-sidebar-menu .menu__list-item-collapsible:has(.menu__link--active) .menu__link--sublist, +.theme-doc-sidebar-menu .menu__link--sublist.menu__link--active { + color: var(--ifm-link-color); +} + +.theme-doc-sidebar-menu .menu__link:not(.menu__link--sublist) { + font-weight: 400; + color: var(--ifm-menu-color); +} + +.theme-doc-sidebar-menu .menu__link:not(.menu__link--sublist).menu__link--active { + font-weight: 600; + color: var(--ifm-link-color); +} + .theme-doc-sidebar-menu .menu__caret:before { background-image: url("data:image/svg+xml, %3Csvg%20width=%228%22%20height=%2213%22%20viewBox=%220%200%208%2013%22%20fill=%22none%22%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d=%22M1%2012L7%206.5L1%201%22%20stroke=%22%23415067%22%20stroke-width=%221.25%22%2F%3E%0A%3C%2Fsvg%3E%0A"); background-repeat: no-repeat; From 2f67fb23462094f3883f935a7d2926e1d30c319d Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Thu, 30 Apr 2026 21:43:15 -0400 Subject: [PATCH 05/16] Render markdown link-only lists as cards (recipe README pages) Recipe README pages (e.g. Quarkus, Docker, Apache) use plain markdown bulleted lists where each item is a link to a subcategory or recipe. Style any such list (every li contains exactly one anchor) so each item renders as a card matching DocCard styling. Refs #492 Co-Authored-By: Claude Opus 4.7 --- src/css/custom.css | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index 6a3b48ed13..9a02652fc7 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -436,3 +436,37 @@ html[data-theme='dark'] { margin: 0 calc(-1 * var(--ifm-pre-padding)); padding: 0 calc(var(--ifm-pre-padding) - 3px) 0 var(--ifm-pre-padding); } + +/* Style markdown link-only lists as cards (recipe README pages) */ +.markdown ul:has(> li > a:only-child) { + list-style: none; + padding-left: 0; +} + +.markdown ul:has(> li > a:only-child) > li { + margin: 0 0 0.5rem 0; + padding: 0; +} + +.markdown ul:has(> li > a:only-child) > li::before { + content: none; +} + +.markdown ul:has(> li > a:only-child) > li > a { + display: block; + padding: 0.75rem 1.25rem; + border: 1px solid var(--ifm-color-border); + border-radius: 8px; + background-color: #fff; + color: var(--ifm-heading-color); + font-weight: 600; + font-size: 1.0625rem; + text-decoration: none; + transition: background-color 0.15s ease, border-color 0.15s ease; +} + +.markdown ul:has(> li > a:only-child) > li > a:hover { + background-color: #F3F4F6; + border-color: rgba(4, 24, 52, 0.2); + text-decoration: none; +} From e692c310982278bc966cd36c980ede95769f6e74 Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Thu, 30 Apr 2026 21:44:01 -0400 Subject: [PATCH 06/16] Admonition restyle: Lucide icons, per-variant color schemes - Info uses Lucide Info (blue) - Tip uses Lucide Lightbulb (green) - Note uses Lucide StickyNote (neutral dark) - Warning/Caution use Lucide TriangleAlert (amber) - Danger uses Lucide OctagonAlert (red) Hide default heading text and inject icon via ::before for a tighter inline layout. Shared base rules for radius/padding/icon position; each variant only overrides colors and the SVG. Refs #492 Co-Authored-By: Claude Opus 4.7 --- src/css/custom.css | 149 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 149 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index 6a3b48ed13..035570b0a3 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -436,3 +436,152 @@ html[data-theme='dark'] { margin: 0 calc(-1 * var(--ifm-pre-padding)); padding: 0 calc(var(--ifm-pre-padding) - 3px) 0 var(--ifm-pre-padding); } + +/* Admonition base — shared layout for all variants */ +.theme-admonition { + border-radius: 10px; + padding: 1rem 1.25rem 1rem 3rem; + position: relative; +} + +.theme-admonition [class*=admonitionHeading_] { + display: none; +} + +.theme-admonition::before { + content: ''; + position: absolute; + left: 1.1rem; + top: 1.1rem; + width: 20px; + height: 20px; + background-repeat: no-repeat; + background-position: center; +} + +.theme-admonition [class*=admonitionContent_], +.theme-admonition [class*=admonitionContent_] p:last-child { + margin-bottom: 0; +} + +/* Info — Lucide Info icon, blue */ +.theme-admonition-info { + background-color: rgba(40, 58, 247, 0.05); + border: 1px solid rgba(40, 58, 247, 0.18); + color: #283AF7; +} + +.theme-admonition-info::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23283AF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); +} + +.theme-admonition-info [class*=admonitionContent_], +.theme-admonition-info [class*=admonitionContent_] p { + color: #283AF7; +} + +.theme-admonition-info a { + color: #283AF7; + text-decoration: underline; +} + +/* Tip — Lucide Lightbulb icon, green */ +.theme-admonition-tip { + background-color: rgba(21, 128, 61, 0.05); + border: 1px solid rgba(21, 128, 61, 0.2); + color: #15803D; +} + +.theme-admonition-tip::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); +} + +.theme-admonition-tip [class*=admonitionContent_], +.theme-admonition-tip [class*=admonitionContent_] p { + color: #15803D; +} + +.theme-admonition-tip a { + color: #15803D; + text-decoration: underline; +} + +/* Note — Lucide StickyNote icon, neutral gray */ +.theme-admonition-note, +.theme-admonition-secondary { + background-color: #FFFFFF; + border: 1px solid var(--ifm-color-border); + color: #041834; +} + +.theme-admonition-note::before, +.theme-admonition-secondary::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23041834' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M15 3v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E"); +} + +.theme-admonition-note [class*=admonitionContent_], +.theme-admonition-note [class*=admonitionContent_] p, +.theme-admonition-secondary [class*=admonitionContent_], +.theme-admonition-secondary [class*=admonitionContent_] p { + color: #041834; +} + +.theme-admonition-note a, +.theme-admonition-secondary a { + color: var(--ifm-link-color); + text-decoration: underline; +} + +/* Warning / Caution — Lucide TriangleAlert icon, amber */ +.theme-admonition-warning, +.theme-admonition-caution { + background-color: #FEFAE0; + border: 1px solid #F0DA8C; + color: #8A6B00; +} + +.theme-admonition-warning::before, +.theme-admonition-caution::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6B00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); +} + +.theme-admonition-warning [class*=admonitionContent_], +.theme-admonition-warning [class*=admonitionContent_] p, +.theme-admonition-caution [class*=admonitionContent_], +.theme-admonition-caution [class*=admonitionContent_] p { + color: #8A6B00; +} + +.theme-admonition-warning a, +.theme-admonition-caution a { + color: #8A6B00; + text-decoration: underline; +} + +.theme-admonition-warning code, +.theme-admonition-caution code { + background-color: rgba(138, 107, 0, 0.1); + border-color: rgba(138, 107, 0, 0.2); + color: #8A6B00; +} + +/* Danger — Lucide OctagonAlert icon, red */ +.theme-admonition-danger { + background-color: rgba(159, 7, 18, 0.05); + border: 1px solid rgba(159, 7, 18, 0.2); + color: #9F0712; +} + +.theme-admonition-danger::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239F0712' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); +} + +.theme-admonition-danger [class*=admonitionContent_], +.theme-admonition-danger [class*=admonitionContent_] p { + color: #9F0712; +} + +.theme-admonition-danger a { + color: #9F0712; + text-decoration: underline; +} From 70f74abe1ece610c008089c55a12328369c0ead5 Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Thu, 30 Apr 2026 22:01:05 -0400 Subject: [PATCH 07/16] Tighten sidebar item spacing per design review Reduce per-item padding (0.4rem -> 0.3rem) and line-height (1.5 -> 1.4), remove top margin between items, so the sidebar feels denser without items running into each other. Refs #492 Co-Authored-By: Claude Opus 4.7 --- src/css/custom.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index fb8fb78a35..f576c7ea7d 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -138,17 +138,17 @@ figure figcaption { } .theme-doc-sidebar-menu .menu__list-item { - margin-top: 0.25rem; + margin-top: 0; } .theme-doc-sidebar-menu .menu__list .menu__list { padding-left: 0.75rem; - margin-top: 0.25rem; + margin-top: 0; } .theme-doc-sidebar-menu .menu__link { - padding: 0.4rem 0.5rem; - line-height: 1.5; + padding: 0.3rem 0.5rem; + line-height: 1.4; } .theme-doc-sidebar-menu .menu__link--sublist { From be97bd6a9ba1aeb5bfca8d9ad4b41592c29d03c6 Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Thu, 30 Apr 2026 22:01:24 -0400 Subject: [PATCH 08/16] Set code font size to 13px (81.25% of 16px body) Inline code and code blocks at 15.2px feel oversized next to 16px Inter body text. Drop to 13px for a more balanced visual hierarchy. Refs #492 Co-Authored-By: Claude Opus 4.7 --- src/css/custom.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/custom.css b/src/css/custom.css index 6a3b48ed13..9d6d12cda2 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -24,7 +24,7 @@ --ifm-color-primary-lighter: #6787e7; --ifm-color-primary-lightest: #8ca4ed; --ifm-color-border: #D9D9D9; - --ifm-code-font-size: 95%; + --ifm-code-font-size: 81.25%; --ifm-color-base: rgba(4, 24, 52); --ifm-color-content: var(--ifm-color-base); --ifm-color-announcement-bar-bg: var(--ifm-color-mint); From b11af7218e567582a1fcd0db26b6338220c6d641 Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Thu, 30 Apr 2026 22:47:03 -0400 Subject: [PATCH 09/16] Soften heading weight and round video thumbnail corners - Heading rule font-weight: bold (700) -> 600 (semibold) for h1 and the markdown h2/h3/h4 to match the lighter typographic feel of the rest of the refresh - Add border-radius: 12px (with overflow: hidden) to .reactPlayer and .react-player wrappers and their inner iframe/video, so embedded YouTube videos render with rounded corners Refs #492 Co-Authored-By: Claude Opus 4.7 --- src/css/custom.css | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 6a3b48ed13..cf7111c4a3 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -103,8 +103,19 @@ figure figcaption { text-align: center; } -.reactPlayer { +.reactPlayer, +.react-player { margin: auto; + border-radius: 12px; + overflow: hidden; +} + +.reactPlayer iframe, +.reactPlayer video, +.react-player iframe, +.react-player video, +.react-player > div > iframe { + border-radius: 12px; } /* Zoomed image background */ @@ -412,7 +423,7 @@ html[data-theme='dark'] .footer .footer__bottom::before { } h1, .markdown h2, .markdown h3, .markdown h4 { - font-weight: bold; + font-weight: 600; } /* Colorblind-friendly code highlighting */ From c0b1b1f62bcf57979112a2f1a188c13b36c8926c Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Thu, 30 Apr 2026 23:01:40 -0400 Subject: [PATCH 10/16] Visual polish: neo card tokens, rounded media, sidebar active leaf - Define --neo-* design tokens (border, grey-300, card shadow, hover bg) for both light and dark mode. Cards default to transparent fill and fill in to white with a soft shadow on hover, replacing the flat grey hover with something that feels more intentional - Apply the same treatment to markdown link-list cards (recipe READMEs) - Round corners (12px) on inline images and YouTube/Vimeo iframes inside markdown content, matching the existing video player treatment - Bump the sidebar's active leaf from 600 to 700 Inter for clearer current-page emphasis Self-contained: all additions use !important / attribute selectors so the PR lands cleanly on top of the other visual-refresh PRs in any order. Refs #492 Co-Authored-By: Claude Opus 4.7 --- src/css/custom.css | 66 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index 6a3b48ed13..777e436816 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -436,3 +436,69 @@ html[data-theme='dark'] { margin: 0 calc(-1 * var(--ifm-pre-padding)); padding: 0 calc(var(--ifm-pre-padding) - 3px) 0 var(--ifm-pre-padding); } + +/* ============================================================ + * Visual polish — neo card design tokens, rounded media, + * sidebar active-leaf weight bump. + * Additive overrides; safe to land regardless of which other + * visual-refresh PRs merge first. + * ============================================================ */ + +:root { + --neo-border-card: rgba(4, 24, 52, 0.12); + --neo-grey-300: rgba(4, 24, 52, 0.25); + --neo-shadow-card: 0 1px 2px rgba(4, 24, 52, 0.06), 0 4px 12px rgba(4, 24, 52, 0.05); + --neo-card-hover-bg: #FFFFFF; +} + +html[data-theme='dark'] { + --neo-border-card: rgba(255, 255, 255, 0.1); + --neo-grey-300: rgba(255, 255, 255, 0.25); + --neo-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2); + --neo-card-hover-bg: rgba(255, 255, 255, 0.04); +} + +/* DocCard — transparent default, white on hover with shadow lift */ +[class^=cardContainer_] { + background-color: transparent !important; + border-color: var(--neo-border-card) !important; + transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease !important; +} + +[class^=cardContainer_]:hover { + background-color: var(--neo-card-hover-bg) !important; + border-color: var(--neo-grey-300) !important; + box-shadow: var(--neo-shadow-card) !important; +} + +/* Markdown link-list cards — same treatment */ +.markdown ul:has(> li > a:only-child) > li > a { + background-color: transparent !important; + border-color: var(--neo-border-card) !important; + transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease !important; +} + +.markdown ul:has(> li > a:only-child) > li > a:hover { + background-color: var(--neo-card-hover-bg) !important; + border-color: var(--neo-grey-300) !important; + box-shadow: var(--neo-shadow-card) !important; +} + +/* Rounded corners on inline media */ +.markdown img, +figure img { + border-radius: 12px; +} + +.markdown iframe[src*="youtube"], +.markdown iframe[src*="youtu.be"], +.markdown iframe[src*="vimeo"], +.markdown iframe { + border-radius: 12px; +} + +/* Sidebar active-leaf — bump to 700 Inter for stronger emphasis */ +.theme-doc-sidebar-menu .menu__link:not(.menu__link--sublist).menu__link--active { + font-weight: 700 !important; + font-family: "Inter", sans-serif !important; +} From b723b997ee5a7e664d8506ca409e75d2c8dedf93 Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Fri, 1 May 2026 08:57:20 -0400 Subject: [PATCH 11/16] Iterate on visual polish: TOC, framed media, dark-mode contrast, glass navbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Builds on top of #501. Changes accumulated during a long iteration session: - Swizzle DocCategoryGeneratedIndexPage to render an "On this page" TOC on the right rail of generated-index pages (Recipe catalog, changelog, etc.). Each card gets a slugified id; TOC entries scroll to it. Includes a Lucide menu-icon label. - Frosted-glass navbar via backdrop-filter: saturate(180%) blur(20px) with a 70%-translucent bg, light/dark variants - Tighter link-list-card targeting: scope to lists following h2#categories, h2#recipes, h2#composite-recipes (recipe README pages) instead of any link-only ul, so inline single-link bullets in body copy stay normal - Markdown vertical breathing room: paragraphs 2.5rem, h2 4rem, h3 3rem, list items 0.75rem, code blocks/blockquotes/admonitions 2.5rem - Double-border treatment on .markdown img and .markdown iframe (rounded inner + outer outline at 20px offset, --neo-double-border token) - Same treatment on video players (.reactPlayer / .react-player), with iframe outline suppressed inside so the inner rail doesn't ghost - Dark-mode contrast fixes for all admonition variants (info, tip, note, warning/caution, danger) — translucent tinted bg, lighter text, matching Lucide icons in lighter colors - Dark-mode card text color via [class*=cardDescription_] (covers hashed module-class names) and corresponding container

tag - Drop legacy --ifm-card-background-color: #fff and the white-card-on-dark heading override that fought the new transparent-card neo style - Hairline (0.5px) card borders - Subtle dark-mode card default fill (--neo-card-bg) so cards have visible shape against the dark page Refs #492 Co-Authored-By: Claude Opus 4.7 --- src/css/custom.css | 509 +++++++++++++++--- src/theme/DocCard/styles.module.css | 27 +- .../DocCategoryGeneratedIndexPage/index.tsx | 116 ++++ .../styles.module.css | 43 ++ 4 files changed, 615 insertions(+), 80 deletions(-) create mode 100644 src/theme/DocCategoryGeneratedIndexPage/index.tsx create mode 100644 src/theme/DocCategoryGeneratedIndexPage/styles.module.css diff --git a/src/css/custom.css b/src/css/custom.css index 777e436816..8a51666cd5 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -24,7 +24,7 @@ --ifm-color-primary-lighter: #6787e7; --ifm-color-primary-lightest: #8ca4ed; --ifm-color-border: #D9D9D9; - --ifm-code-font-size: 95%; + --ifm-code-font-size: 81.25%; --ifm-color-base: rgba(4, 24, 52); --ifm-color-content: var(--ifm-color-base); --ifm-color-announcement-bar-bg: var(--ifm-color-mint); @@ -53,6 +53,13 @@ --ifm-navbar-shadow: none; --ifm-toc-border-color: transparent; --ifm-section-divider-color: rgba(4, 24, 52, 0.3); + + --neo-border-card: rgba(4, 24, 52, 0.12); + --neo-grey-300: rgba(4, 24, 52, 0.25); + --neo-shadow-card: 0 1px 2px rgba(4, 24, 52, 0.06), 0 4px 12px rgba(4, 24, 52, 0.05); + --neo-card-hover-bg: #FFFFFF; + --neo-double-border: rgba(4, 24, 52, 0.08); + --neo-frame-bg: rgba(4, 24, 52, 0.03); } /* Use selector for specificity */ @@ -82,11 +89,15 @@ html[data-theme='dark'] { --ifm-link-color: #85fe99; --ifm-toc-border-color: transparent; --ifm-section-divider-color: #d9d9d9; - --ifm-card-background-color: #fff; --ifm-heading-line-height: 1.25; - .theme-code-block { - border: 1.5px solid var(--ifm-color-border); - } + + --neo-border-card: rgba(255, 255, 255, 0.14); + --neo-grey-300: rgba(255, 255, 255, 0.3); + --neo-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25); + --neo-card-hover-bg: rgba(255, 255, 255, 0.06); + --neo-card-bg: rgba(255, 255, 255, 0.025); + --neo-double-border: rgba(255, 255, 255, 0.28); + --neo-frame-bg: rgba(255, 255, 255, 0.04); } .navbar__logo img { @@ -103,8 +114,42 @@ figure figcaption { text-align: center; } -.reactPlayer { - margin: auto; +.reactPlayer, +.react-player { + margin: 3rem auto; + border-radius: 12px; + overflow: hidden; + outline: 1px solid var(--neo-double-border); + outline-offset: 14px; +} + +.reactPlayer iframe, +.reactPlayer video, +.react-player iframe, +.react-player video, +.react-player > div > iframe { + border-radius: 12px; +} + +.reactPlayer iframe, +.react-player iframe, +.reactPlayer video, +.react-player video { + outline: none !important; + border: none !important; +} + +.markdown img, +figure img { + border-radius: 12px; + outline: 1.5px solid var(--neo-double-border); + outline-offset: 18px; + border-radius: 12px; + margin: 2.5rem auto; +} + +figure { + margin: 2.5rem auto; } /* Zoomed image background */ @@ -118,6 +163,13 @@ figure figcaption { .navbar { border-bottom: 1px solid var(--ifm-section-divider-color); + background-color: rgba(248, 248, 255, 0.7); + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: saturate(180%) blur(20px); +} + +html[data-theme='dark'] .navbar { + background-color: rgba(4, 24, 52, 0.7); } .navbar .navbar__link { @@ -137,6 +189,41 @@ figure figcaption { color: var(--ifm-heading-color); } +.theme-doc-sidebar-menu .menu__list-item { + margin-top: 0; +} + +.theme-doc-sidebar-menu .menu__list .menu__list { + padding-left: 0.75rem; + margin-top: 0; +} + +.theme-doc-sidebar-menu .menu__link { + padding: 0.3rem 0.5rem; + line-height: 1.4; +} + +.theme-doc-sidebar-menu .menu__link--sublist { + font-weight: 600; + color: var(--ifm-heading-color); +} + +.theme-doc-sidebar-menu .menu__list-item-collapsible:has(.menu__link--active) .menu__link--sublist, +.theme-doc-sidebar-menu .menu__link--sublist.menu__link--active { + color: var(--ifm-link-color); +} + +.theme-doc-sidebar-menu .menu__link:not(.menu__link--sublist) { + font-weight: 400; + color: var(--ifm-menu-color); +} + +.theme-doc-sidebar-menu .menu__link:not(.menu__link--sublist).menu__link--active { + font-weight: 700; + font-family: "Inter", sans-serif; + color: var(--ifm-link-color); +} + .theme-doc-sidebar-menu .menu__caret:before { background-image: url("data:image/svg+xml, %3Csvg%20width=%228%22%20height=%2213%22%20viewBox=%220%200%208%2013%22%20fill=%22none%22%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d=%22M1%2012L7%206.5L1%201%22%20stroke=%22%23415067%22%20stroke-width=%221.25%22%2F%3E%0A%3C%2Fsvg%3E%0A"); background-repeat: no-repeat; @@ -202,10 +289,10 @@ html[data-theme=dark] [class^=docMainContainer_] .breadcrumbs__link:hover { } [class^=docMainContainer_] h1 { - --ifm-heading-font-weight: 300; - --ifm-heading-font-family: "Beausite", sans-serif; - --ifm-h1-font-size: 3.75rem; - --ifm-leading: 1; + --ifm-heading-font-weight: 600; + --ifm-heading-font-family: "Inter", sans-serif; + --ifm-h1-font-size: 2.25rem; + --ifm-leading: 1.2; margin-bottom: 1.25rem; } @@ -215,34 +302,41 @@ html[data-theme=dark] [class^=docMainContainer_] .breadcrumbs__link:hover { position: relative; } -[class^=docMainContainer_] [class^=generatedIndexPage_]::before { - position: absolute; - background: url(/img/gems-bg.webp) no-repeat 0 0; - width: 1322px; - height: 1070px; - z-index: -1; - content: ''; +[class^=docMainContainer_] [class^=generatedIndexPage_] .row > .col, +[class^=docMainContainer_] [class^=generatedIndexPage_] .col--6 { + display: flex; + flex: 0 0 100% !important; + max-width: 100% !important; } -[class^=docMainContainer_] [class^=generatedIndexPage_] .row[class*=list_] > .col { - display: flex; +[class^=docMainContainer_] [class^=generatedIndexPage_] .card { + padding: 0.75rem 1.25rem !important; } [class^=docMainContainer_] [class^=generatedIndexPage_] .margin-top--lg { margin-top: 4.5rem !important; } -[class^=docMainContainer_] [class^=generatedIndexPage_] .margin-bottom--lg { - margin-bottom: 2.5rem !important; +html body .margin-bottom--lg { + margin-bottom: 1.25rem !important; +} + +html body section.row .col { + margin-bottom: 1.25rem !important; } html[data-theme='dark'] [class^=docMainContainer_] .card { - --ifm-heading-color: #041834; + --ifm-heading-color: #fff; +} + +html[data-theme='dark'] [class*=cardDescription_], +html[data-theme='dark'] [class*=cardContainer_] p { + color: rgba(255, 255, 255, 0.7) !important; } .markdown { - --ifm-heading-font-family: "Beausite", sans-serif; - --ifm-heading-font-weight: 300; + --ifm-heading-font-family: "Inter", sans-serif; + --ifm-heading-font-weight: 600; --ifm-link-decoration: underline; } @@ -412,7 +506,7 @@ html[data-theme='dark'] .footer .footer__bottom::before { } h1, .markdown h2, .markdown h3, .markdown h4 { - font-weight: bold; + font-weight: 600; } /* Colorblind-friendly code highlighting */ @@ -437,68 +531,341 @@ html[data-theme='dark'] { padding: 0 calc(var(--ifm-pre-padding) - 3px) 0 var(--ifm-pre-padding); } +/* Style link lists on recipe README pages as cards. + * Targets only the lists that follow specific h2 anchors so it doesn't + * affect inline single-link bullets in regular doc content. */ +.markdown h2#categories + ul, +.markdown h2#recipes + ul, +.markdown h2#composite-recipes + ul { + list-style: none; + padding-left: 0; + margin-top: 1.5rem; + margin-bottom: 2rem; +} + +.markdown h2#categories + ul > li, +.markdown h2#recipes + ul > li, +.markdown h2#composite-recipes + ul > li { + margin: 0 0 1rem 0; + padding: 0; +} + +.markdown h2#categories + ul > li::before, +.markdown h2#recipes + ul > li::before, +.markdown h2#composite-recipes + ul > li::before { + content: none; +} + +.markdown h2#categories + ul > li > a, +.markdown h2#recipes + ul > li > a, +.markdown h2#composite-recipes + ul > li > a { + display: block; + padding: 0.75rem 1.25rem; + border: 0.5px solid var(--neo-border-card); + border-radius: 8px; + background-color: transparent; + color: var(--ifm-heading-color); + font-weight: 600; + font-size: 1.0625rem; + text-decoration: none; + transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; +} + +.markdown h2#categories + ul > li > a:hover, +.markdown h2#recipes + ul > li > a:hover, +.markdown h2#composite-recipes + ul > li > a:hover { + background-color: var(--neo-card-hover-bg); + border-color: var(--neo-grey-300); + box-shadow: var(--neo-shadow-card); + text-decoration: none; +} + +/* Admonition base — shared layout for all variants */ +.theme-admonition { + border-radius: 10px; + padding: 1rem 1.25rem 1rem 3rem; + position: relative; +} + +.theme-admonition [class*=admonitionHeading_] { + display: none; +} + +.theme-admonition::before { + content: ''; + position: absolute; + left: 1.1rem; + top: 1.1rem; + width: 20px; + height: 20px; + background-repeat: no-repeat; + background-position: center; +} + +.theme-admonition [class*=admonitionContent_], +.theme-admonition [class*=admonitionContent_] p:last-child { + margin-bottom: 0; +} + +/* Info — Lucide Info icon, blue */ +.theme-admonition-info { + background-color: rgba(40, 58, 247, 0.05); + border: 1px solid rgba(40, 58, 247, 0.18); + color: #283AF7; +} + +.theme-admonition-info::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23283AF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); +} + +.theme-admonition-info [class*=admonitionContent_], +.theme-admonition-info [class*=admonitionContent_] p { + color: #283AF7; +} + +.theme-admonition-info a { + color: #283AF7; + text-decoration: underline; +} + +/* Tip — Lucide Lightbulb icon, green */ +.theme-admonition-tip { + background-color: rgba(21, 128, 61, 0.05); + border: 1px solid rgba(21, 128, 61, 0.2); + color: #15803D; +} + +.theme-admonition-tip::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); +} + +.theme-admonition-tip [class*=admonitionContent_], +.theme-admonition-tip [class*=admonitionContent_] p { + color: #15803D; +} + +.theme-admonition-tip a { + color: #15803D; + text-decoration: underline; +} + +/* Note — Lucide StickyNote icon, neutral gray */ +.theme-admonition-note, +.theme-admonition-secondary { + background-color: #FFFFFF; + border: 1px solid var(--ifm-color-border); + color: #041834; +} + +.theme-admonition-note::before, +.theme-admonition-secondary::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23041834' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M15 3v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E"); +} + +.theme-admonition-note [class*=admonitionContent_], +.theme-admonition-note [class*=admonitionContent_] p, +.theme-admonition-secondary [class*=admonitionContent_], +.theme-admonition-secondary [class*=admonitionContent_] p { + color: #041834; +} + +.theme-admonition-note a, +.theme-admonition-secondary a { + color: var(--ifm-link-color); + text-decoration: underline; +} + +/* Warning / Caution — Lucide TriangleAlert icon, amber */ +.theme-admonition-warning, +.theme-admonition-caution { + background-color: #FEFAE0; + border: 1px solid #F0DA8C; + color: #8A6B00; +} + +.theme-admonition-warning::before, +.theme-admonition-caution::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6B00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); +} + +.theme-admonition-warning [class*=admonitionContent_], +.theme-admonition-warning [class*=admonitionContent_] p, +.theme-admonition-caution [class*=admonitionContent_], +.theme-admonition-caution [class*=admonitionContent_] p { + color: #8A6B00; +} + +.theme-admonition-warning a, +.theme-admonition-caution a { + color: #8A6B00; + text-decoration: underline; +} + +.theme-admonition-warning code, +.theme-admonition-caution code { + background-color: rgba(138, 107, 0, 0.1); + border-color: rgba(138, 107, 0, 0.2); + color: #8A6B00; +} + +/* Danger — Lucide OctagonAlert icon, red */ +.theme-admonition-danger { + background-color: rgba(159, 7, 18, 0.05); + border: 1px solid rgba(159, 7, 18, 0.2); + color: #9F0712; +} + +.theme-admonition-danger::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239F0712' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); +} + +.theme-admonition-danger [class*=admonitionContent_], +.theme-admonition-danger [class*=admonitionContent_] p { + color: #9F0712; +} + +.theme-admonition-danger a { + color: #9F0712; + text-decoration: underline; +} + +/* Extra vertical breathing room in markdown content */ +.markdown > p { + margin-bottom: 2.5rem; +} + +.markdown > ul, +.markdown > ol { + margin-top: 2rem; + margin-bottom: 2.5rem; +} + +.markdown > ul > li, +.markdown > ol > li { + margin-bottom: 0.75rem; +} + +.markdown h2 { + margin-top: 4rem; + margin-bottom: 1.5rem; +} + +.markdown h3 { + margin-top: 3rem; + margin-bottom: 1rem; +} + +.markdown h4 { + margin-top: 2.25rem; + margin-bottom: 0.75rem; +} + +.markdown pre, +.markdown .theme-code-block { + margin-top: 1.5rem; + margin-bottom: 1.5rem; + outline: none !important; +} + +.markdown blockquote { + margin-top: 2.5rem; + margin-bottom: 2.5rem; +} + +.theme-admonition { + margin-top: 2.5rem; + margin-bottom: 2.5rem; +} + /* ============================================================ - * Visual polish — neo card design tokens, rounded media, - * sidebar active-leaf weight bump. - * Additive overrides; safe to land regardless of which other - * visual-refresh PRs merge first. + * Dark mode adjustments for admonitions and cards * ============================================================ */ -:root { - --neo-border-card: rgba(4, 24, 52, 0.12); - --neo-grey-300: rgba(4, 24, 52, 0.25); - --neo-shadow-card: 0 1px 2px rgba(4, 24, 52, 0.06), 0 4px 12px rgba(4, 24, 52, 0.05); - --neo-card-hover-bg: #FFFFFF; +html[data-theme='dark'] .theme-admonition-info { + background-color: rgba(126, 155, 210, 0.1); + border-color: rgba(126, 155, 210, 0.3); + color: #b9c8e7; } -html[data-theme='dark'] { - --neo-border-card: rgba(255, 255, 255, 0.1); - --neo-grey-300: rgba(255, 255, 255, 0.25); - --neo-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2); - --neo-card-hover-bg: rgba(255, 255, 255, 0.04); +html[data-theme='dark'] .theme-admonition-info::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9c8e7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); } -/* DocCard — transparent default, white on hover with shadow lift */ -[class^=cardContainer_] { - background-color: transparent !important; - border-color: var(--neo-border-card) !important; - transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease !important; +html[data-theme='dark'] .theme-admonition-info, +html[data-theme='dark'] .theme-admonition-info [class*=admonitionContent_], +html[data-theme='dark'] .theme-admonition-info [class*=admonitionContent_] p, +html[data-theme='dark'] .theme-admonition-info a { + color: #b9c8e7; } -[class^=cardContainer_]:hover { - background-color: var(--neo-card-hover-bg) !important; - border-color: var(--neo-grey-300) !important; - box-shadow: var(--neo-shadow-card) !important; +html[data-theme='dark'] .theme-admonition-tip { + background-color: rgba(74, 222, 128, 0.1); + border-color: rgba(74, 222, 128, 0.3); + color: #86efac; } -/* Markdown link-list cards — same treatment */ -.markdown ul:has(> li > a:only-child) > li > a { - background-color: transparent !important; - border-color: var(--neo-border-card) !important; - transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease !important; +html[data-theme='dark'] .theme-admonition-tip::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386efac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); } -.markdown ul:has(> li > a:only-child) > li > a:hover { - background-color: var(--neo-card-hover-bg) !important; - border-color: var(--neo-grey-300) !important; - box-shadow: var(--neo-shadow-card) !important; +html[data-theme='dark'] .theme-admonition-tip [class*=admonitionContent_], +html[data-theme='dark'] .theme-admonition-tip [class*=admonitionContent_] p, +html[data-theme='dark'] .theme-admonition-tip a { + color: #86efac; } -/* Rounded corners on inline media */ -.markdown img, -figure img { - border-radius: 12px; +html[data-theme='dark'] .theme-admonition-note, +html[data-theme='dark'] .theme-admonition-secondary { + background-color: rgba(255, 255, 255, 0.04); + border-color: rgba(255, 255, 255, 0.15); + color: #fff; } -.markdown iframe[src*="youtube"], -.markdown iframe[src*="youtu.be"], -.markdown iframe[src*="vimeo"], -.markdown iframe { - border-radius: 12px; +html[data-theme='dark'] .theme-admonition-note::before, +html[data-theme='dark'] .theme-admonition-secondary::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M15 3v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E"); } -/* Sidebar active-leaf — bump to 700 Inter for stronger emphasis */ -.theme-doc-sidebar-menu .menu__link:not(.menu__link--sublist).menu__link--active { - font-weight: 700 !important; - font-family: "Inter", sans-serif !important; +html[data-theme='dark'] .theme-admonition-note [class*=admonitionContent_], +html[data-theme='dark'] .theme-admonition-note [class*=admonitionContent_] p, +html[data-theme='dark'] .theme-admonition-secondary [class*=admonitionContent_], +html[data-theme='dark'] .theme-admonition-secondary [class*=admonitionContent_] p { + color: #fff; +} + +html[data-theme='dark'] .theme-admonition-warning, +html[data-theme='dark'] .theme-admonition-caution { + background-color: rgba(252, 211, 77, 0.1); + border-color: rgba(252, 211, 77, 0.3); + color: #fcd34d; +} + +html[data-theme='dark'] .theme-admonition-warning::before, +html[data-theme='dark'] .theme-admonition-caution::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fcd34d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); +} + +html[data-theme='dark'] .theme-admonition-warning [class*=admonitionContent_], +html[data-theme='dark'] .theme-admonition-warning [class*=admonitionContent_] p, +html[data-theme='dark'] .theme-admonition-caution [class*=admonitionContent_], +html[data-theme='dark'] .theme-admonition-caution [class*=admonitionContent_] p, +html[data-theme='dark'] .theme-admonition-warning a, +html[data-theme='dark'] .theme-admonition-caution a { + color: #fcd34d; +} + +html[data-theme='dark'] .theme-admonition-danger { + background-color: rgba(248, 113, 113, 0.1); + border-color: rgba(248, 113, 113, 0.3); + color: #fca5a5; +} + +html[data-theme='dark'] .theme-admonition-danger::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); +} + +html[data-theme='dark'] .theme-admonition-danger [class*=admonitionContent_], +html[data-theme='dark'] .theme-admonition-danger [class*=admonitionContent_] p, +html[data-theme='dark'] .theme-admonition-danger a { + color: #fca5a5; } diff --git a/src/theme/DocCard/styles.module.css b/src/theme/DocCard/styles.module.css index e9d429925e..8564675924 100644 --- a/src/theme/DocCard/styles.module.css +++ b/src/theme/DocCard/styles.module.css @@ -4,15 +4,22 @@ --ifm-link-hover-decoration: none; box-shadow: none; - border: 1px solid var(--ifm-color-divider); - transition: all var(--ifm-transition-fast) ease; - transition-property: border, box-shadow; + border: 0.5px solid var(--neo-border-card); + border-radius: 8px; + background-color: var(--neo-card-bg, transparent); + transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; width: 100%; + min-height: 3.25rem; + display: flex; + flex-direction: column; + justify-content: center; + padding: 0.75rem 1.25rem !important; } .cardContainer:hover { - box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.15); - background-color: var(--ifm-color-mint); + background-color: var(--neo-card-hover-bg); + border-color: var(--neo-grey-300); + box-shadow: var(--neo-shadow-card); } .cardContainer *:last-child { @@ -21,14 +28,16 @@ .cardTitle { --ifm-heading-margin-bottom: 8px; - font-size: 1.25rem; + font-size: 1.0625rem; font-weight: 600; - line-height: 1.666; + line-height: 1.4; } .cardDescription { - color: var(--ifm-heading-color); - font-size: 1rem; + color: rgba(4, 24, 52, 0.65); + font-family: "Inter", sans-serif; + font-size: 14px; + line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; diff --git a/src/theme/DocCategoryGeneratedIndexPage/index.tsx b/src/theme/DocCategoryGeneratedIndexPage/index.tsx new file mode 100644 index 0000000000..198fb5a5ba --- /dev/null +++ b/src/theme/DocCategoryGeneratedIndexPage/index.tsx @@ -0,0 +1,116 @@ +import React, {type ReactNode} from 'react'; +import clsx from 'clsx'; +import {PageMetadata} from '@docusaurus/theme-common'; +import {useCurrentSidebarCategory} from '@docusaurus/plugin-content-docs/client'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import DocCard from '@theme/DocCard'; +import DocPaginator from '@theme/DocPaginator'; +import DocVersionBanner from '@theme/DocVersionBanner'; +import DocVersionBadge from '@theme/DocVersionBadge'; +import DocBreadcrumbs from '@theme/DocBreadcrumbs'; +import Heading from '@theme/Heading'; +import TOC from '@theme/TOC'; +import type {Props} from '@theme/DocCategoryGeneratedIndexPage'; + +import styles from './styles.module.css'; + +function slugify(input: string): string { + return input + .toLowerCase() + .replace(/[^\w\s-]/g, '') + .replace(/\s+/g, '-') + .replace(/-+/g, '-') + .replace(/^-|-$/g, ''); +} + +function DocCategoryGeneratedIndexPageMetadata({ + categoryGeneratedIndex, +}: Props): ReactNode { + return ( + + ); +} + +function DocCategoryGeneratedIndexPageContent({ + categoryGeneratedIndex, +}: Props): ReactNode { + const category = useCurrentSidebarCategory(); + const items = category.items; + + const toc = items + .filter((item: any) => Boolean(item.label)) + .map((item: any) => ({ + value: item.label, + id: slugify(item.label), + level: 2, + })); + + const showTOC = toc.length > 0; + + return ( +

+
+
+ + + +
+ + {categoryGeneratedIndex.title} + + {categoryGeneratedIndex.description && ( +

{categoryGeneratedIndex.description}

+ )} +
+
+
+ {items.map((item: any, index: number) => { + const id = item.label ? slugify(item.label) : undefined; + return ( +
+ +
+ ); + })} +
+
+
+ +
+
+
+ {showTOC && ( +
+
+
On this page
+ +
+
+ )} +
+ ); +} + +export default function DocCategoryGeneratedIndexPage(props: Props): ReactNode { + return ( + <> + + + + ); +} diff --git a/src/theme/DocCategoryGeneratedIndexPage/styles.module.css b/src/theme/DocCategoryGeneratedIndexPage/styles.module.css new file mode 100644 index 0000000000..a02de980a1 --- /dev/null +++ b/src/theme/DocCategoryGeneratedIndexPage/styles.module.css @@ -0,0 +1,43 @@ +@media (min-width: 997px) { + .generatedIndexPage { + max-width: 100%; + } +} + +.title { + margin-bottom: calc(1.25 * var(--ifm-leading)); +} + +.docItemCol { + max-width: 75% !important; +} + +.list { + /* override base row negative margin so cards align flush */ + margin: 0; +} + +.tocWrapper { + position: sticky; + top: calc(var(--ifm-navbar-height) + 1rem); +} + +.tocLabel { + font-size: 0.875rem; + font-weight: 600; + color: var(--ifm-heading-color); + margin-bottom: 0.5rem; + padding-left: 0.5rem; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.tocLabel::before { + content: ''; + width: 16px; + height: 16px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23041834' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='15' y2='12'/%3E%3Cline x1='3' y1='18' x2='18' y2='18'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-size: contain; +} From 6b478d6e51fdb05aa6105d05678e3c1b3cad1463 Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Fri, 1 May 2026 11:19:25 -0400 Subject: [PATCH 12/16] Bump page background from #F8F8FF to #FAFAFF Slightly lighter, less saturated lavender. Updates --ifm-background-color and the matching translucent navbar fill. Refs #492 Co-Authored-By: Claude Opus 4.7 --- src/css/custom.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 8a51666cd5..9fead29dfb 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -14,7 +14,7 @@ /* You can override the default Infima variables here. */ :root { - --ifm-background-color: #F8F8FF; + --ifm-background-color: #FAFAFF; --ifm-color-mint: #85FE99; --ifm-color-primary: #4169e1; --ifm-color-primary-dark: #2855dd; @@ -163,7 +163,7 @@ figure { .navbar { border-bottom: 1px solid var(--ifm-section-divider-color); - background-color: rgba(248, 248, 255, 0.7); + background-color: rgba(250, 250, 255, 0.7); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } From 8d3f505658afaa1c9437c9e5ebbb8a746b49e972 Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Tue, 12 May 2026 16:56:29 -0400 Subject: [PATCH 13/16] Restore subtle border on code blocks in dark mode The dark-mode .theme-code-block border was removed in #502 along with the wrapper-gap fix, but on dark backgrounds the code block now blends into the page and the boundary is harder to read. Add a 1px rgba(255,255,255,0.12) border back, scoped to dark mode only. Refs #492 Co-Authored-By: Claude Opus 4.7 --- src/css/custom.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index 9fead29dfb..5c361cd0f8 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -100,6 +100,10 @@ html[data-theme='dark'] { --neo-frame-bg: rgba(255, 255, 255, 0.04); } +html[data-theme='dark'] .theme-code-block { + border: 1px solid rgba(255, 255, 255, 0.12); +} + .navbar__logo img { height: 33px; } From d1389ecaa153da4e4bf81c14a62e351f15d88fe2 Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Wed, 13 May 2026 11:17:10 -0400 Subject: [PATCH 14/16] TOC: switch menu icon stroke to white in dark mode The "On this page" label icon was rendered with stroke=#041834 (dark navy), which is invisible against the dark page bg. Add a dark-mode override that swaps the SVG to white stroke. Refs #492 Co-Authored-By: Claude Opus 4.7 --- src/theme/DocCategoryGeneratedIndexPage/styles.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/theme/DocCategoryGeneratedIndexPage/styles.module.css b/src/theme/DocCategoryGeneratedIndexPage/styles.module.css index a02de980a1..71bc8cab2c 100644 --- a/src/theme/DocCategoryGeneratedIndexPage/styles.module.css +++ b/src/theme/DocCategoryGeneratedIndexPage/styles.module.css @@ -41,3 +41,7 @@ background-repeat: no-repeat; background-size: contain; } + +:global(html[data-theme='dark']) .tocLabel::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='15' y2='12'/%3E%3Cline x1='3' y1='18' x2='18' y2='18'/%3E%3C/svg%3E"); +} From 092d9ea28dff749c910cacb5b54f607ffc6067e9 Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Wed, 13 May 2026 14:01:50 -0400 Subject: [PATCH 15/16] Remove unused Beausite @font-face declaration The font was only referenced by the legacy H1 / markdown heading rules that have since been swapped to Inter. The @font-face block was still fetching the woff2 + woff files on every page load with no rule using them. Drop it. Refs #492 Co-Authored-By: Claude Opus 4.7 --- src/css/custom.css | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 9fead29dfb..8ab2ceb492 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -4,14 +4,6 @@ * work well for content-centric websites. */ -@font-face { - font-family: 'Beausite'; - src: url('https://cdn.prod.website-files.com/664e62fe66f5b31edc6c3aeb/664e7a833d9ad9fa2febd048_BeausiteSlickWeb-Light.woff2') format('woff2'), url('https://cdn.prod.website-files.com/664e62fe66f5b31edc6c3aeb/664e7a830c62d5d188a8f45a_BeausiteSlickWeb-Light.woff') format('woff'); - font-weight: 300; - font-style: normal; - font-display: swap; -} - /* You can override the default Infima variables here. */ :root { --ifm-background-color: #FAFAFF; From df3a1a8d4eab7bd7230305e6a9051e5b13a8a641 Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Fri, 22 May 2026 17:20:12 -0400 Subject: [PATCH 16/16] Code blocks: tighten inner vertical padding (scoped) Reduces padding-top/bottom on .theme-code-block code to 0.5rem. Scoped selector avoids the --ifm-pre-padding side effect that rippled into card components in the earlier attempt. --- src/css/custom.css | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 8aee62f7bf..15d564c0e3 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -16,7 +16,7 @@ --ifm-color-primary-lighter: #6787e7; --ifm-color-primary-lightest: #8ca4ed; --ifm-color-border: #D9D9D9; - --ifm-code-font-size: 81.25%; + --ifm-code-font-size: 87.5%; --ifm-color-base: rgba(4, 24, 52); --ifm-color-content: var(--ifm-color-base); --ifm-color-announcement-bar-bg: var(--ifm-color-mint); @@ -93,7 +93,16 @@ html[data-theme='dark'] { } html[data-theme='dark'] .theme-code-block { - border: 1px solid rgba(255, 255, 255, 0.12); + border: 1px solid rgba(255, 255, 255, 0.25); +} + +/* Tighten vertical padding on the inner code element so code blocks + don't feel over-padded. Scoped via .theme-code-block code so this + only applies to actual code blocks — does NOT touch cards or + anything else that reads --ifm-pre-padding. */ +.theme-code-block code { + padding-top: 0.5rem; + padding-bottom: 0.5rem; } .navbar__logo img { @@ -758,8 +767,8 @@ html[data-theme='dark'] { .markdown pre, .markdown .theme-code-block { - margin-top: 1.5rem; - margin-bottom: 1.5rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; outline: none !important; }