From 2849b477afe318cf63db8b083d1f462d0f2d91ae Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Mon, 1 Jun 2026 10:56:31 +0100 Subject: [PATCH 01/12] Change product switcher to neutral background with colored icon chip Updates the sidebar product switcher from a full component-colored background to a neutral background with only the icon chip showing the component color. This provides a cleaner, less visually heavy appearance while still maintaining component identification. Changes: - Neutral semi-transparent background instead of full component color - Icon chip now displays the component color - Updated hover and active states for both light and dark themes - Improved text contrast in both themes Co-Authored-By: Claude Opus 4.5 --- src/css/product-switcher.css | 70 +++++++++++++++++++++++++----------- 1 file changed, 50 insertions(+), 20 deletions(-) diff --git a/src/css/product-switcher.css b/src/css/product-switcher.css index 4fee9e43..4ade5309 100644 --- a/src/css/product-switcher.css +++ b/src/css/product-switcher.css @@ -15,25 +15,40 @@ gap: 10px; width: 100%; padding: 10px 14px; - background: var(--component-color, #4f46e5); - border: none; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; cursor: pointer; - transition: background 0.15s, filter 0.15s; + transition: background 0.15s, border-color 0.15s; text-align: left; } .sb-product-switch:hover { - filter: brightness(1.1); + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.12); } .sb-product-switch.is-open { - filter: brightness(1.15); + background: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.15); } -/* Small color indicator chip - hidden when button has full color bg */ +/* Color indicator icon with component color background */ .sb-product-chip { - display: none; + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + background: var(--component-color, #4f46e5); + border-radius: 6px; + flex-shrink: 0; +} + +.sb-product-chip svg { + width: 16px; + height: 16px; + color: #fff; } .sb-product-name { @@ -42,7 +57,7 @@ align-items: flex-start; gap: 1px; font-size: calc(14 / var(--rem-base) * 1rem); - color: #fff; + color: #e8eef6; font-weight: 500; flex: 1; letter-spacing: -0.01em; @@ -59,7 +74,7 @@ .sb-product-parent-label { font-size: calc(12 / var(--rem-base) * 1rem); font-weight: 500; - color: rgba(255, 255, 255, 0.6); + color: #9aa8bc; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.3; @@ -67,7 +82,7 @@ .sb-product-child-label { font-size: calc(16 / var(--rem-base) * 1rem); - color: #fff; + color: #e8eef6; line-height: 1.2; } @@ -124,38 +139,53 @@ color: #fff; } -/* Light theme overrides - same solid color, white text */ +/* Light theme overrides - neutral background with colored icon chip */ .sidebar[data-theme="light"] .sb-product-switch { - background: var(--component-color, #4f46e5); + background: rgba(0, 0, 0, 0.04); + border-color: rgba(0, 0, 0, 0.08); } .sidebar[data-theme="light"] .sb-product-switch:hover { - filter: brightness(1.1); + background: rgba(0, 0, 0, 0.06); + border-color: rgba(0, 0, 0, 0.12); +} + +.sidebar[data-theme="light"] .sb-product-switch.is-open { + background: rgba(0, 0, 0, 0.08); + border-color: rgba(0, 0, 0, 0.15); } .sidebar[data-theme="light"] .sb-product-name { - color: #fff; + color: var(--grey-900-new, var(--grey-900, #181818)); +} + +.sidebar[data-theme="light"] .sb-product-parent-label { + color: var(--grey-500-new, var(--grey-500, #79797d)); +} + +.sidebar[data-theme="light"] .sb-product-child-label { + color: var(--grey-900-new, var(--grey-900, #181818)); } .sidebar[data-theme="light"] .sb-product-section { - color: rgba(255, 255, 255, 0.7); + color: var(--grey-500-new, var(--grey-500, #79797d)); } .sidebar[data-theme="light"] .sb-product-title { - color: #fff; + color: var(--grey-900-new, var(--grey-900, #181818)); } .sidebar[data-theme="light"] .sb-product-caret { - color: rgba(255, 255, 255, 0.7); + color: var(--grey-500-new, var(--grey-500, #79797d)); } .sidebar[data-theme="light"] .sb-product-caret.rot { - color: #fff; + color: var(--grey-900-new, var(--grey-900, #181818)); } .sidebar[data-theme="light"] .sb-product-version { - background: rgba(255, 255, 255, 0.15); - color: #fff; + background: color-mix(in oklab, var(--component-color, #4f46e5) 15%, transparent); + color: var(--grey-700-new, var(--grey-700, #505053)); } /* Dropdown menu */ From a8d08307e757ff2a8f8be3e7f7031a134f72e9fe Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Mon, 1 Jun 2026 13:17:15 +0100 Subject: [PATCH 02/12] Add icons to product switcher chips Add inline SVG icons to all product chip elements: - Agentic Data Plane: brain/AI icon - Data Platform: database icon - Cloud: cloud icon - Self-Managed: server icon - Streaming: waveform icon - Connect: connector icon - Generic/Labs: book icon Icons appear in both the current product button and the dropdown menu options. Co-Authored-By: Claude Opus 4.5 --- src/partials/product-switcher.hbs | 52 +++++++++++++++++++++++-------- 1 file changed, 39 insertions(+), 13 deletions(-) diff --git a/src/partials/product-switcher.hbs b/src/partials/product-switcher.hbs index 1e82632d..262628cb 100644 --- a/src/partials/product-switcher.hbs +++ b/src/partials/product-switcher.hbs @@ -48,17 +48,23 @@ > {{!-- For Labs pages, show "Product Docs" instead of "Labs" --}} {{#if (eq page.component.name 'labs')}} - + + + View Product Docs {{else if (eq page.attributes.role 'home')}} {{!-- Home page: show ADP as current product --}} - + + + Agentic Data Plane {{else if (eq page.component.name 'cloud-data-platform')}} {{!-- Cloud pages: show hierarchy "Data Platform > Cloud" --}} {{#with (find-component site 'cloud-data-platform')}} {{#with (get-component-header-data this)}} - + + + {{/with}} {{/with}} @@ -77,7 +83,9 @@ {{!-- Self-Managed pages (Streaming, Connect, Self-Managed home): show hierarchy "Data Platform > Self-Managed" --}} {{#with (find-component site 'self-managed')}} {{#with (get-component-header-data this)}} - + + + {{/with}} {{/with}} @@ -96,7 +104,9 @@ {{!-- Data Platform landing: show "Data Platform" --}} {{#with (find-component site 'data-platform')}} {{#with (get-component-header-data this)}} - + + + {{this.title}} {{/with}} {{/with}} @@ -104,12 +114,16 @@ {{!-- Other components: show their product name --}} {{#with page.component}} {{#with (get-header-data @root.page)}} - + + + {{#if this.title}}{{{this.title}}}{{else}}{{{../title}}}{{/if}} {{else}} - + + + {{{this.title}}} {{/with}} {{/with}} @@ -135,7 +149,9 @@ data-product-url="{{{relativize ../url}}}" style="--product-color: {{#if this.color}}{{this.color}}{{else}}#ea580c{{/if}};" > - + + + Agentic Data Plane {{#if this.description}} @@ -166,7 +182,9 @@ data-product-url="{{{relativize ../url}}}" style="--product-color: {{this.color}};" > - + + + {{this.title}} {{this.description}} @@ -191,7 +209,9 @@ data-product-url="{{{relativize ../url}}}" style="--product-color: {{this.color}};" > - + + + {{this.title}} {{this.description}} @@ -217,7 +237,9 @@ data-product-url="{{{relativize ../url}}}" style="--product-color: {{this.color}};" > - + + + {{this.title}} {{this.description}} @@ -240,7 +262,9 @@ data-product-url="{{{relativize ../url}}}" style="--product-color: {{this.color}};" > - + + + {{this.title}} {{this.description}} @@ -265,7 +289,9 @@ data-product-url="{{{relativize ../url}}}" style="--product-color: {{this.color}};" > - + + + {{this.title}} {{this.description}} From d4757e29ccd6638b5e36526d89f920d2dd8ec30b Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Mon, 1 Jun 2026 13:20:02 +0100 Subject: [PATCH 03/12] Fix nav collapse toggle visibility on mobile Move the .sb-collapse-toggle override from desktop-only media query to a global rule so the sidebar collapse button is visible on all screen sizes, not just desktop. Co-Authored-By: Claude Opus 4.5 --- src/css/nav.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/css/nav.css b/src/css/nav.css index 446fd47a..ced5ae9b 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -179,6 +179,11 @@ html .nav-container.is-active { border-top: 1px solid var(--nav-border-color); } +/* Sidebar footer collapse button - always visible (overrides .nav-collapse display:none) */ +.sb-footer .sb-collapse-toggle.nav-collapse { + display: flex; +} + .nav-collapse:hover { opacity: 1; } @@ -228,11 +233,6 @@ html .nav-container.is-active { .nav-collapse { display: none; } - - /* Override for sidebar footer collapse button - keep it visible */ - .sb-footer .sb-collapse-toggle { - display: inline-grid; - } } .nav-container.is-active { From dcf602e827656e2b979e64dfebbefafb0f5e6214 Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Mon, 1 Jun 2026 13:20:48 +0100 Subject: [PATCH 04/12] Fix missing space before 'Let us know' link in search results Add explicit space between "?" and the link to prevent HTML whitespace collapsing from removing the space. Co-Authored-By: Claude Opus 4.5 --- src/partials/algolia-script.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/partials/algolia-script.hbs b/src/partials/algolia-script.hbs index 1025266a..b2610ff7 100644 --- a/src/partials/algolia-script.hbs +++ b/src/partials/algolia-script.hbs @@ -766,7 +766,7 @@ function initAlgolia() { return html`
No results for ${state.query}

- Believe this query should return results? + Believe this query should return results?${' '} Let us know . From 049f720151d171905c09cbae0457ec0be97825b7 Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Mon, 1 Jun 2026 13:21:31 +0100 Subject: [PATCH 05/12] Fix back-to-top button overlapping pagination Next button Increase bottom position of back-to-top button from 24px to 100px to prevent it from overlapping the pagination Next button at the bottom of pages. Add mobile media query with 120px bottom position for extra clearance on smaller screens. Co-Authored-By: Claude Opus 4.5 --- src/css/doc.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/css/doc.css b/src/css/doc.css index e47486a1..aa768a74 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -1765,7 +1765,7 @@ details[open] > summary { .back-to-top { /* Use fixed positioning to prevent layout shift when shown/hidden */ position: fixed; - bottom: 24px; + bottom: 100px; /* Increased to avoid overlapping pagination Next button */ right: 24px; z-index: 100; display: flex; @@ -1778,6 +1778,14 @@ details[open] > summary { transition: opacity 0.2s ease, visibility 0.2s ease; } +/* On mobile, position back-to-top even higher to clear pagination */ +@media screen and (max-width: 768px) { + .back-to-top { + bottom: 120px; + right: 16px; + } +} + .doc .button-bar { display: flex; gap: 10px; From 13ae8e6ce90daa1cd7c1b708046bf1ef216a8e94 Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Mon, 1 Jun 2026 13:28:52 +0100 Subject: [PATCH 06/12] Remove icons from dropdown menu chips, keep color-only The 10x10px dropdown menu chips are too small for icons. Color-only chips provide cleaner UX in the dropdown list. Icons remain in the main button chip (28x28px) where they have adequate space to render clearly. Co-Authored-By: Claude Opus 4.5 --- src/partials/product-switcher.hbs | 24 ++++++------------------ 1 file changed, 6 insertions(+), 18 deletions(-) diff --git a/src/partials/product-switcher.hbs b/src/partials/product-switcher.hbs index 262628cb..e0d9817c 100644 --- a/src/partials/product-switcher.hbs +++ b/src/partials/product-switcher.hbs @@ -149,9 +149,7 @@ data-product-url="{{{relativize ../url}}}" style="--product-color: {{#if this.color}}{{this.color}}{{else}}#ea580c{{/if}};" > - - - + Agentic Data Plane {{#if this.description}} @@ -182,9 +180,7 @@ data-product-url="{{{relativize ../url}}}" style="--product-color: {{this.color}};" > - - - + {{this.title}} {{this.description}} @@ -209,9 +205,7 @@ data-product-url="{{{relativize ../url}}}" style="--product-color: {{this.color}};" > - - - + {{this.title}} {{this.description}} @@ -237,9 +231,7 @@ data-product-url="{{{relativize ../url}}}" style="--product-color: {{this.color}};" > - - - + {{this.title}} {{this.description}} @@ -262,9 +254,7 @@ data-product-url="{{{relativize ../url}}}" style="--product-color: {{this.color}};" > - - - + {{this.title}} {{this.description}} @@ -289,9 +279,7 @@ data-product-url="{{{relativize ../url}}}" style="--product-color: {{this.color}};" > - - - + {{this.title}} {{this.description}} From 535b13e2bf843fab6d27b9f8ba0e5f5c94cd64dc Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Mon, 1 Jun 2026 13:29:06 +0100 Subject: [PATCH 07/12] Add margin-left to cloud link icon Co-Authored-By: Claude Opus 4.5 --- src/css/header.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/css/header.css b/src/css/header.css index 0f529831..354e30d9 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -1063,6 +1063,7 @@ html[data-theme="dark"] .tb-link:hover { /* Log into Cloud link styling */ .tb-link-cloud svg { flex-shrink: 0; + margin-left: 5px; } /* Top nav dropdown (Ask a Human) */ From 50f95565cbd5a18ac9755e59bcb398ae9f8578c6 Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Mon, 1 Jun 2026 13:39:15 +0100 Subject: [PATCH 08/12] Change ADP icon from brain to sparkles Sparkles is the more universally recognized AI indicator icon. Co-Authored-By: Claude Opus 4.5 --- src/partials/product-switcher.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/partials/product-switcher.hbs b/src/partials/product-switcher.hbs index e0d9817c..4c5ef79b 100644 --- a/src/partials/product-switcher.hbs +++ b/src/partials/product-switcher.hbs @@ -55,7 +55,7 @@ {{else if (eq page.attributes.role 'home')}} {{!-- Home page: show ADP as current product --}} - + Agentic Data Plane {{else if (eq page.component.name 'cloud-data-platform')}} From 18631e501466f6957337383f4303243cccc2fc36 Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Mon, 1 Jun 2026 14:18:37 +0100 Subject: [PATCH 09/12] Add ADP-specific condition to show sparkles icon When page.component.name is 'agentic-data-plane', display the sparkles icon instead of falling through to the generic book icon. Co-Authored-By: Claude Opus 4.5 --- src/partials/product-switcher.hbs | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/partials/product-switcher.hbs b/src/partials/product-switcher.hbs index 4c5ef79b..40c2f131 100644 --- a/src/partials/product-switcher.hbs +++ b/src/partials/product-switcher.hbs @@ -110,6 +110,16 @@ {{this.title}} {{/with}} {{/with}} + {{else if (eq page.component.name 'agentic-data-plane')}} + {{!-- ADP pages: show sparkles icon --}} + {{#with (find-component site 'agentic-data-plane')}} + {{#with (get-component-header-data this)}} + + + + {{this.title}} + {{/with}} + {{/with}} {{else}} {{!-- Other components: show their product name --}} {{#with page.component}} From d372ba3029a6fef1eb590d7c27790266af2425e3 Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Mon, 1 Jun 2026 14:20:36 +0100 Subject: [PATCH 10/12] Add missing parent components to preview UI model Add data-platform and self-managed components so the product switcher can properly display the hierarchy in preview mode. Set page component to ADP for testing the sparkles icon. Co-Authored-By: Claude Opus 4.5 --- preview-src/ui-model.yml | 45 +++++++++++++++++++++++++++++++++++----- 1 file changed, 40 insertions(+), 5 deletions(-) diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml index 66591c9c..4ae8e338 100644 --- a/preview-src/ui-model.yml +++ b/preview-src/ui-model.yml @@ -5,12 +5,13 @@ site: homeUrl: &home_url /streaming/24.3/index.html components: # Agentic Data Plane component - - name: agentic-data-plane + - &adp_component + name: agentic-data-plane title: Agentic Data Plane - url: '#' + url: /agentic-data-plane/1.0/index.html versions: - &latest_version_adp - url: '#' + url: /agentic-data-plane/1.0/index.html version: '1.0' displayVersion: '1.0' asciidoc: @@ -21,6 +22,40 @@ site: color: '#7C3AED' order: 1 latestVersion: *latest_version_adp + # Data Platform umbrella component + - name: data-platform + title: Data Platform + url: '#' + versions: + - &latest_version_dp + url: '#' + version: '1.0' + displayVersion: '1.0' + asciidoc: + attributes: + component-metadata: + title: Data Platform + description: The streaming foundation for everything you build. + color: '#5239CC' + order: 2 + latestVersion: *latest_version_dp + # Self-Managed component - parent for Streaming and Connect + - name: self-managed + title: Self-Managed + url: '#' + versions: + - &latest_version_sm + url: '#' + version: '1.0' + displayVersion: '1.0' + asciidoc: + attributes: + component-metadata: + title: Self-Managed + description: Run Redpanda on your own infrastructure. + color: '#9F1239' + order: 1 + latestVersion: *latest_version_sm # Streaming component - under Data Platform (formerly Self-Managed/ROOT) - &component name: streaming @@ -103,8 +138,8 @@ page: url: *home_url home: true title: Brand’s Hardware & Software Requirements - component: *component - componentVersion: *component_version + component: *adp_component + componentVersion: *latest_version_adp version: '24.3' displayVersion: '24.3' module: ROOT From 2784411e929ad479e1d932625d15a964274e4295 Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Mon, 1 Jun 2026 14:26:51 +0100 Subject: [PATCH 11/12] Match platform indicator font size to nav items Changed .platform-indicator-mobile from 18px to 15px to maintain visual consistency with other navigation elements. Co-Authored-By: Claude Opus 4.5 --- src/css/header.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/header.css b/src/css/header.css index 354e30d9..f847d391 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -685,7 +685,7 @@ html[data-theme="dark"] .tb-overflow-divider { align-items: center; margin-left: 8px; color: var(--grey-600-new, #52525b); - font-size: calc(18 / var(--rem-base) * 1rem); + font-size: calc(15 / var(--rem-base) * 1rem); font-weight: 500; order: 1; flex: 1 1 auto; From a47db72f8237ccc5f30fe83b42e8ae0239c15847 Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Tue, 2 Jun 2026 16:22:23 +0100 Subject: [PATCH 12/12] Fix SVG sizing for dropdown product chips The global .sb-product-chip svg rule sets 16px sizing, but dropdown chips are smaller (10/8/6px). This adds scoped overrides to keep SVG icons proportional within the smaller chip containers. Addresses CodeRabbit review comment about SVG sizing conflict. Co-Authored-By: Claude Opus 4.5 --- src/css/product-switcher.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/css/product-switcher.css b/src/css/product-switcher.css index 4ade5309..4ad394fc 100644 --- a/src/css/product-switcher.css +++ b/src/css/product-switcher.css @@ -51,6 +51,22 @@ color: #fff; } +/* Scale SVG icons proportionally for smaller dropdown chips */ +.sb-product-opt .sb-product-chip svg { + width: 6px; + height: 6px; +} + +.sb-product-opt.sb-product-child .sb-product-chip svg { + width: 5px; + height: 5px; +} + +.sb-product-opt.sb-product-grandchild .sb-product-chip svg { + width: 4px; + height: 4px; +} + .sb-product-name { display: flex; flex-direction: column;