Skip to content

Refresh docs site theme toward neutral GitHub-style surfaces #40422

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
pelikhan merged 3 commits into from
Jun 20, 2026
+134 −82
Merged

Refresh docs site theme toward neutral GitHub-style surfaces #40422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03a21f0
Refresh docs theme styling
Copilot Jun 20, 2026
ff00ee8
Disable off-home glow animations and align light cards with theme tokens
Copilot Jun 20, 2026
6a14821
Fix docs text contrast and Safari backdrop blur support
Copilot Jun 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
14 changes: 8 additions & 6 deletions docs/src/components/CustomHeader.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const base = import.meta.env.BASE_URL;

.header-link:hover {
color: var(--sl-color-text-accent);
background-color: rgba(110, 118, 129, 0.1);
background-color: rgba(var(--aw-accent-rgb, 130, 80, 223), 0.12);
}

/* Tablet navigation wrapper — hidden by default; shown via global CSS at 769–900px */
Expand All @@ -79,7 +79,7 @@ const base = import.meta.env.BASE_URL;
}

.hamburger-btn:hover {
background-color: rgba(110, 118, 129, 0.1);
background-color: rgba(var(--aw-accent-rgb, 130, 80, 223), 0.12);
}

/* Three-line hamburger icon built with CSS pseudo-elements */
Expand Down Expand Up @@ -114,14 +114,16 @@ const base = import.meta.env.BASE_URL;
position: fixed;
top: 3.5rem;
right: 1rem;
background: var(--sl-color-bg-nav, #161b22);
border: 1px solid rgba(48, 54, 61, 0.8);
background: var(--aw-bg-elevated, rgba(22, 27, 34, 0.92));
border: 1px solid var(--aw-border, rgba(99, 110, 123, 0.34));
border-radius: 8px;
padding: 0.5rem 0;
min-width: 180px;
max-width: calc(100vw - 2rem);
z-index: 1000;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
box-shadow: var(--aw-shadow, 0 8px 24px rgba(0, 0, 0, 0.4));
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
Comment thread
pelikhan marked this conversation as resolved.

@github-actions github-actions Bot Jun 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing -webkit-backdrop-filter: The new dropdown uses backdrop-filter: blur(16px) alone, but the header in custom.css still pairs it with -webkit-backdrop-filter: blur(12px) for consistency across older Safari/WebKit.

💡 Suggested fix

Add the vendor-prefixed form to match the codebase convention:

-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);

While current Safari (18+) supports the unprefixed form, iOS Safari 15/16 which still has noticeable usage, required the prefix. Since the header already uses the paired form, the inconsistency here is the main concern.

Copilot AI Jun 20, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 6a14821: added -webkit-backdrop-filter: blur(16px) to match the unprefixed backdrop-filter rule.

}

.dropdown-link {
Expand All @@ -135,7 +137,7 @@ const base = import.meta.env.BASE_URL;
}

.dropdown-link:hover {
background-color: rgba(110, 118, 129, 0.1);
background-color: rgba(var(--aw-accent-rgb, 130, 80, 223), 0.12);
color: var(--sl-color-text-accent);
}
</style>
Expand Down
16 changes: 11 additions & 5 deletions docs/src/components/WorkflowHero.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,18 +215,20 @@ function unmountFromHero() {
.workflow-hero__feature {
position: relative;
max-width: 52rem;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid rgba(196, 181, 253, 0.22);
Comment thread
pelikhan marked this conversation as resolved.
border-radius: 1.25rem;
overflow: hidden;
background: rgba(255, 255, 255, 0.03);
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
background:
linear-gradient(135deg, rgba(91, 33, 182, 0.28), rgba(17, 24, 39, 0.55)),
rgba(255, 255, 255, 0.03);
box-shadow: 0 24px 56px rgba(15, 23, 42, 0.28);
}

.workflow-hero__frame-wrap {
position: relative;
overflow: hidden;
padding: 0.5rem;
background: rgba(255, 255, 255, 0.02);
background: rgba(255, 255, 255, 0.04);
}

.workflow-hero__slides {
Expand Down Expand Up @@ -296,8 +298,12 @@ function unmountFromHero() {
}

:global([data-theme='light']) .workflow-hero__feature {
background: rgba(255, 255, 255, 0.82);
background:
linear-gradient(135deg, rgba(130, 80, 223, 0.22), rgba(245, 243, 255, 0.94)),
rgba(255, 255, 255, 0.82);
color: var(--sl-color-black);
border-color: rgba(130, 80, 223, 0.24);
box-shadow: 0 24px 50px rgba(111, 66, 193, 0.14);
}

@media (prefers-reduced-motion: reduce) {
Expand Down
Loading
Loading