Skip to content

style: header design improvements #29123

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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MohamedH1998 merged 6 commits into from
Mar 20, 2026
+377 −112
Merged

style: header design improvements #29123

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
994f855
style: header design tweaks
MohamedH1998 Mar 19, 2026
282b4e6
Merge branch 'production' into style/header-improvements
MohamedH1998 Mar 19, 2026
b97cbfc
Merge branch 'style/sidebar-improvements' into style/header-improvements
MohamedH1998 Mar 19, 2026
053fbf7
Merge branch 'style/sidebar-improvements' into style/header-improvements
MohamedH1998 Mar 19, 2026
c4af90d
fix: align vertically
MohamedH1998 Mar 19, 2026
f2f478c
style: toc design improvements (#29124)
MohamedH1998 Mar 20, 2026
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
16 changes: 8 additions & 8 deletions src/components/HeaderDropdowns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
const { refs, floatingStyles, context } = useFloating({
open: isOpen,
onOpenChange: setIsOpen,
middleware: [shift(), offset(5)],
middleware: [shift(), offset(8)],
whileElementsMounted: autoUpdate,
});

Expand All @@ -51,23 +51,23 @@ function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
<button
ref={refs.setReference}
{...getReferenceProps()}
className="hover:bg-cl1-white dark:hover:bg-cl1-gray-0 flex cursor-pointer items-center justify-center gap-2 rounded-sm bg-transparent p-2 font-medium hover:shadow-md"
className="flex h-9 cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-transparent px-3 text-sm font-medium text-[var(--color-header-text)] transition-colors duration-150 hover:bg-[var(--color-header-fill)] hover:text-[var(--color-header-hover-text)]"
>
{label}
<PiCaretDownBold />
<PiCaretDownBold className="size-2.5 text-[var(--color-header-text-subtle)]" />
</button>
{isOpen && (
<ul
ref={refs.setFloating}
style={floatingStyles}
{...getFloatingProps()}
className="border-cl1-gray-8 bg-cl1-white dark:border-cl1-gray-1 dark:bg-cl1-gray-0 max-w-80 min-w-60 list-none rounded-sm border pl-0 shadow-md"
className="max-w-64 min-w-44 list-none rounded-lg border border-[var(--color-header-overlay-line)] bg-[var(--color-header-overlay-bg)] p-1 shadow-[0_4px_16px_var(--color-header-overlay-shadow)]"
>
{pages.map((page) => (
<li key={page.href}>
<li key={page.href} className="list-none">
<a
href={page.href}
className="8 hover:bg-cl1-gray-9 dark:hover:bg-cl1-gray-1 block p-3 text-black no-underline"
className="block rounded-md px-2.5 py-1.5 text-sm text-[var(--color-header-text)] no-underline transition-colors duration-150 hover:bg-[var(--color-header-fill)] hover:text-[var(--color-header-hover-text)]"
target={page.href.startsWith("https") ? "_blank" : undefined}
>
{page.label}
Expand All @@ -82,12 +82,12 @@ function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {

export default function HeaderDropdownsComponent() {
return (
<div className="flex gap-2 leading-6 text-nowrap">
<div className="flex items-center gap-0.5 text-nowrap">
{links.map(({ label, href }) => (
<a
key={href}
href={href}
className="hover:bg-cl1-white dark:hover:bg-cl1-gray-0 flex items-center justify-center rounded-sm p-2 font-medium text-black no-underline hover:shadow-md"
className="flex h-9 items-center justify-center rounded-lg px-3 text-sm font-medium text-[var(--color-header-text)] no-underline transition-colors duration-150 hover:bg-[var(--color-header-fill)] hover:text-[var(--color-header-hover-text)]"
>
{label}
</a>
Expand Down
25 changes: 14 additions & 11 deletions src/components/changelog/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ const products = directory.filter(
);

const filteredGroups = groups.filter((group) => {
const groupProducts = directoryByGroup.find(([name]) => name === group)?.[1] ?? [];
const groupProducts =
directoryByGroup.find(([name]) => name === group)?.[1] ?? [];
return groupProducts.some((p) => changelogProductIds.includes(p.id));
});

Expand All @@ -43,16 +44,18 @@ const currentPath = Astro.url.pathname;
icon="right-caret"
/>
</div>
{showProductSelect && (
<div class="not-content">
<ProductSelect
client:load
products={products}
groups={filteredGroups}
currentPath={currentPath}
/>
</div>
)}
{
showProductSelect && (
<div class="not-content">
<ProductSelect
client:load
products={products}
groups={filteredGroups}
currentPath={currentPath}
/>
</div>
)
}
</div>
<Image
src={HeroImage}
Expand Down
99 changes: 85 additions & 14 deletions src/components/overrides/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,21 @@ import AgentDirective from "../AgentDirective.astro";

<AgentDirective />

<div class="flex h-full items-center justify-between gap-4">
<SiteTitle />
<div class="flex gap-8">
<div class="header-inner">
<div class="header-start">
<SiteTitle />
</div>
<div class="header-end">
<div id="docsearch">
<DocSearch />
</div>
<div id="right-group" class="hidden h-10 flex-wrap gap-x-2 overflow-hidden">
<div id="right-group">
<HeaderDropdowns client:idle />
<div class="header-divider" role="separator"></div>
<a
id="header-login-button"
href="https://dash.cloudflare.com/"
class="bg-cl1-brand-orange text-cl1-black mr-2 flex items-center justify-center rounded-sm px-6 font-medium no-underline"
class="header-login"
>
Log in
</a>
Expand All @@ -32,51 +35,119 @@ import AgentDirective from "../AgentDirective.astro";
</div>

<style>
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
gap: 1rem;
}

.header-start {
display: flex;
align-items: center;
flex-shrink: 0;
}

.header-end {
display: flex;
align-items: center;
gap: 0.5rem;
}

.header-divider {
width: 1px;
height: 1rem;
background-color: var(--color-header-line);
margin-inline: 0.375rem;
flex-shrink: 0;
}

.header-login {
display: flex;
align-items: center;
justify-content: center;
height: 2.25rem;
padding: 0 1.25rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1;
white-space: nowrap;
text-decoration: none;
color: var(--color-header-btn-text);
background-color: var(--color-header-btn-bg);
}

:global(.site-title) {
gap: 0.5rem;
min-width: fit-content;
overflow: none;
overflow: visible;
}

:global(.site-title span) {
color: var(--sl-color-white);
color: var(--color-cl1-black);
font-weight: 600;
letter-spacing: -0.01em;
}

:global(.site-title img) {
height: 1.25rem;
:root[data-theme="dark"] :global(.site-title span) {
color: var(--color-cl1-white);
}

#social-icons {
--sl-icon-color: var(--sl-color-white);
:global(.site-title img) {
height: 1.25rem;
}

:global(starlight-theme-select > label > select) {
line-height: 1.25rem;
margin: 1px 1px;
margin: 1px;
color: var(--color-header-text-subtle);
}

:global(
starlight-theme-select > label > select:focus,
starlight-theme-select > label > select:focus-visible
) {
margin: 1px 1px;
margin: 1px;
outline-offset: -4px;
}

:global(starlight-theme-select > label > .label-icon) {
left: 8%;
color: var(--color-header-text-subtle);
}

:global(starlight-theme-select > label > .caret) {
left: 75%;
}

#right-group {
display: none;
align-items: center;
gap: 0.25rem;
}

@media screen and (min-width: 800px) {
#right-group {
display: flex;
}

#docsearch {
width: 20rem;
width: 18rem;
}

#docsearch :global(.DocSearch-Button) {
height: 2.25rem;
border-color: var(--color-header-line);
color: var(--color-header-text-subtle);
transition: color 150ms, background-color 150ms, border-color 150ms;
}

#docsearch :global(.DocSearch-Button:hover) {
border-color: var(--color-header-line);
background-color: var(--color-header-fill);
color: var(--color-header-hover-text);
}
}
</style>
Expand Down
2 changes: 1 addition & 1 deletion src/components/overrides/Sidebar.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
aria-label="Search sidebar navigation"
autocomplete="off"
spellcheck="false"
class="box-border min-h-[2.125rem] w-full cursor-pointer rounded-lg border border-neutral-200 bg-transparent px-3 pr-10 text-sm text-neutral-950 placeholder-neutral-400 outline-2 outline-offset-2 outline-transparent transition-colors duration-150 hover:border-neutral-950 focus:cursor-text focus-visible:outline-blue-500 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder-neutral-500 dark:hover:border-neutral-100 dark:focus-visible:outline-blue-400"
class="box-border min-h-[2.125rem] w-full rounded-lg border border-neutral-200 bg-transparent px-3 pr-10 text-sm text-neutral-950 placeholder-[var(--color-cl1-gray-4)] outline-2 outline-offset-2 outline-transparent transition-colors duration-150 focus-visible:outline-blue-500 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder-[var(--color-cl1-gray-6)] dark:focus-visible:outline-blue-400"
/>
<div class="sidebar-search-icon"></div>
</div>
Expand Down
29 changes: 29 additions & 0 deletions src/styles/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,17 @@
}

:root {
/* Kumo header tokens — light mode */
--color-header-text: var(--color-cl1-gray-4);
--color-header-text-subtle: var(--color-cl1-gray-4);
--color-header-hover-text: var(--color-cl1-black);
--color-header-line: rgb(0 0 0 / 0.12);
--color-header-fill: rgb(0 0 0 / 0.05);
--color-header-overlay-bg: var(--sl-color-bg);
--color-header-overlay-line: rgb(0 0 0 / 0.08);
--color-header-overlay-shadow: rgb(0 0 0 / 0.12);
--color-header-btn-bg: var(--color-cl1-brand-orange);
--color-header-btn-text: var(--color-cl1-black);
--blue-accent-200: rgb(15, 0, 107);
--blue-accent-600: rgb(46, 105, 255);
--blue-accent-900: rgb(62, 116, 255);
Expand All @@ -171,5 +182,23 @@
--tw-accent-200: var(--orange-accent-200);
--tw-accent-600: var(--orange-accent-600);
--tw-accent-900: var(--orange-accent-900);

/* Kumo header tokens — dark mode */
--color-header-text: var(--color-cl1-gray-7);
--color-header-text-subtle: var(--color-cl1-gray-6);
--color-header-hover-text: var(--color-cl1-white);
--color-header-line: rgb(255 255 255 / 0.1);
--color-header-fill: rgb(255 255 255 / 0.07);
--color-header-overlay-bg: var(--sl-color-bg);
--color-header-overlay-line: rgb(255 255 255 / 0.08);
--color-header-overlay-shadow: rgb(0 0 0 / 0.4);
--color-header-btn-bg: var(--color-cl1-brand-orange);
--color-header-btn-text: var(--color-cl1-black);
}

/* Override Starlight's restrictive right-sidebar TOC container width */
.right-sidebar-panel .sl-container {
width: 100%;
max-width: 18rem;
}
}
Loading