From 03a21f0f88d27958b9789c871ac2a24ddb253c83 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 20 Jun 2026 03:30:03 +0000 Subject: [PATCH 1/3] Refresh docs theme styling Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com> --- docs/src/components/CustomHeader.astro | 13 +- docs/src/components/WorkflowHero.astro | 16 ++- docs/src/styles/custom.css | 180 +++++++++++++++---------- 3 files changed, 127 insertions(+), 82 deletions(-) diff --git a/docs/src/components/CustomHeader.astro b/docs/src/components/CustomHeader.astro index c7b3e2ee9a5..c5e0306b54b 100644 --- a/docs/src/components/CustomHeader.astro +++ b/docs/src/components/CustomHeader.astro @@ -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 */ @@ -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 */ @@ -114,14 +114,15 @@ 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)); + backdrop-filter: blur(16px); } .dropdown-link { @@ -135,7 +136,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); } diff --git a/docs/src/components/WorkflowHero.astro b/docs/src/components/WorkflowHero.astro index d85c0b17fa9..49f5c24db1f 100644 --- a/docs/src/components/WorkflowHero.astro +++ b/docs/src/components/WorkflowHero.astro @@ -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); 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 { @@ -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) { diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css index 0611dd7678f..ca8f9aa3484 100644 --- a/docs/src/styles/custom.css +++ b/docs/src/styles/custom.css @@ -31,10 +31,10 @@ --sl-font: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --sl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; - --sl-color-accent-low: #6639ba; - --sl-color-accent: #d896ff; - --sl-color-accent-high: #e5c7ff; - --sl-color-text-accent: #d896ff; + --sl-color-accent-low: #2f234a; + --sl-color-accent: #b694ff; + --sl-color-accent-high: #d8c4ff; + --sl-color-text-accent: #c7b2ff; --sl-color-white: #ffffff; --sl-color-gray-1: #f6f8fa; @@ -51,6 +51,16 @@ --sl-color-text: #f0f6fc; --sl-color-text-invert: #010409; --sl-color-gray-7: #010409; + + --aw-bg-page: #0d1117; + --aw-bg-subtle: #161b22; + --aw-bg-elevated: rgba(22, 27, 34, 0.88); + --aw-bg-overlay: rgba(13, 17, 23, 0.78); + --aw-border: rgba(99, 110, 123, 0.34); + --aw-border-strong: rgba(139, 148, 158, 0.42); + --aw-text-muted: #9ea7b3; + --aw-shadow: 0 18px 48px rgba(1, 4, 9, 0.22); + --aw-accent-rgb: 168, 139, 250; } /* Widen central docs content on large screens while avoiding TOC overflow on mid-width viewports. */ @@ -62,11 +72,11 @@ /* Light Theme Colors */ :root[data-theme='light'] { - --sl-color-accent-low: #5b3da3; - --sl-color-accent: #6b46c1; - --sl-color-accent-high: #5b3da3; + --sl-color-accent-low: #efe7ff; + --sl-color-accent: #8250df; + --sl-color-accent-high: #5a32a3; - --sl-color-text-accent: #5b3da3; + --sl-color-text-accent: #6f42c1; --sl-color-white: #010409; --sl-color-gray-1: #010409; @@ -83,15 +93,25 @@ --sl-color-text: #010409; --sl-color-text-invert: #ffffff; --sl-color-gray-7: #ffffff; + + --aw-bg-page: #ffffff; + --aw-bg-subtle: #f6f8fa; + --aw-bg-elevated: rgba(255, 255, 255, 0.88); + --aw-bg-overlay: rgba(246, 248, 250, 0.82); + --aw-border: rgba(208, 215, 222, 0.9); + --aw-border-strong: rgba(175, 184, 193, 0.95); + --aw-text-muted: #57606a; + --aw-shadow: 0 18px 42px rgba(31, 35, 40, 0.08); + --aw-accent-rgb: 130, 80, 223; } -/* Light Theme Body Background with Gradient */ +/* Light Theme Body Background */ :root[data-theme='light'] body { - background: linear-gradient(180deg, #f6f8fa 0%, #eef2f7 35%, #e6eaf0 65%, #f6f8fa 100%) !important; + background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%) !important; background-attachment: fixed !important; } -/* Light Theme Animated Glow Effect */ +/* Light Theme Landing Glow */ :root[data-theme='light'] body::before { content: ''; position: fixed; @@ -100,13 +120,14 @@ right: 0; bottom: 0; background: - radial-gradient(ellipse 800px 600px at 20% 30%, rgba(91, 61, 163, 0.22), transparent), - radial-gradient(ellipse 600px 800px at 80% 70%, rgba(107, 70, 193, 0.18), transparent), - radial-gradient(ellipse 1000px 400px at 50% 100%, rgba(123, 85, 214, 0.15), transparent); + radial-gradient(ellipse 900px 620px at 16% 8%, rgba(130, 80, 223, 0.16), transparent 60%), + radial-gradient(ellipse 760px 520px at 92% 20%, rgba(168, 139, 250, 0.12), transparent 62%), + linear-gradient(180deg, rgba(130, 80, 223, 0.06), transparent 38%); background-size: 100% 100%, 100% 100%, 100% 100%; z-index: 0; pointer-events: none; - animation: light-glow-move 20s ease-in-out infinite; + animation: light-glow-move 24s ease-in-out infinite; + opacity: 0; } /* Skip to Content Link - Enhanced Accessibility (WCAG 2.4.1) */ @@ -212,9 +233,8 @@ fill: #000000; } -/* Hide glow effect on pages without hero */ -:root[data-theme='light'] body:not(:has(.hero))::before { - display: none; +:root[data-theme='light'] body:has([data-slide-hero])::before { + opacity: 1; } /* Light Theme Transparent Backgrounds - Desktop only */ @@ -268,7 +288,7 @@ /* Light Theme Hero */ :root[data-theme='light'] .hero { - border-bottom: 1px solid #d0d7de; + border-bottom: 1px solid var(--aw-border); background: transparent !important; } @@ -277,7 +297,7 @@ } :root[data-theme='light'] .hero .tagline { - color: #424a53; + color: var(--aw-text-muted); } /* Light Theme Experimental Badge */ @@ -388,12 +408,12 @@ /* Dark Theme Body Background with Gradient */ body { - background: linear-gradient(180deg, #1c2128 0%, #22272e 50%, #0d1117 100%) !important; + background: linear-gradient(180deg, #0d1117 0%, #11161d 100%) !important; background-attachment: fixed !important; font-family: var(--sl-font) !important; } -/* Dark Theme Animated Glow Effect */ +/* Dark Theme Landing Glow */ body::before { content: ''; position: fixed; @@ -402,19 +422,18 @@ body::before { right: 0; bottom: 0; background: - radial-gradient(ellipse 800px 600px at 20% 30%, rgba(139, 92, 246, 0.15), transparent), - radial-gradient(ellipse 600px 800px at 80% 70%, rgba(192, 110, 255, 0.12), transparent), - radial-gradient(ellipse 1000px 400px at 50% 100%, rgba(236, 108, 185, 0.08), transparent); + radial-gradient(ellipse 880px 640px at 16% 8%, rgba(139, 92, 246, 0.2), transparent 58%), + radial-gradient(ellipse 720px 540px at 92% 18%, rgba(192, 132, 252, 0.14), transparent 62%), + linear-gradient(180deg, rgba(76, 29, 149, 0.3), transparent 42%); background-size: 100% 100%, 100% 100%, 100% 100%; z-index: 0; pointer-events: none; - animation: glow-move 20s ease-in-out infinite; - display: none; + animation: glow-move 24s ease-in-out infinite; + opacity: 0; } -/* Show glow effect only on pages with hero */ -body:has(.hero)::before { - display: block; +body:has([data-slide-hero])::before { + opacity: 1; } /* Dark Theme Transparent Backgrounds - Desktop only */ @@ -477,7 +496,7 @@ body:has(.hero)::before { .sidebar .top-level > li > a { font-weight: 600; font-size: 0.8125rem; - color: #8d96a0; + color: var(--aw-text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-radius: 0; @@ -487,13 +506,13 @@ body:has(.hero)::before { .sidebar .top-level > li > details > summary:hover, .sidebar .top-level > li > a:hover { - color: #c9d1d9; + color: #d0d7de; background: none !important; } .sidebar nav li li a { transition: color 0.15s ease, border-color 0.15s ease; - color: #8d96a0; + color: var(--aw-text-muted); font-size: 0.875rem; line-height: 1.6; border-left: 2px solid transparent; @@ -595,18 +614,15 @@ a[aria-current="page"].link:hover { /* Header Theme */ header { - background: linear-gradient(to bottom, - rgba(13, 17, 23, 0.98), - rgba(22, 27, 34, 0.97), - rgba(28, 33, 40, 0.95)); - border-bottom: 1px solid rgba(33, 38, 45, 0.15); + background: linear-gradient(to bottom, rgba(13, 17, 23, 0.92), rgba(13, 17, 23, 0.84)); + border-bottom: 1px solid var(--aw-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } :root[data-theme='light'] header { - background: linear-gradient(to bottom, rgba(246, 248, 250, 0.98), rgba(238, 242, 247, 0.95)); - border-bottom: 1px solid rgba(208, 215, 222, 0.3); + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92), rgba(246, 248, 250, 0.88)); + border-bottom: 1px solid var(--aw-border); backdrop-filter: blur(12px); } @@ -616,13 +632,13 @@ header::after { bottom: -40px; left: 0; right: 0; - background: linear-gradient(to bottom, rgba(28, 33, 40, 0.95), rgba(28, 33, 40, 0.6), transparent); + background: linear-gradient(to bottom, rgba(13, 17, 23, 0.75), rgba(13, 17, 23, 0.28), transparent); pointer-events: none; z-index: -1; } :root[data-theme='light'] header::after { - background: linear-gradient(to bottom, rgba(246, 248, 250, 0.95), rgba(246, 248, 250, 0.6), transparent); + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.72), rgba(246, 248, 250, 0.28), transparent); } /* Markdown Content Typography */ @@ -715,7 +731,7 @@ header::after { :root[data-theme='light'] .sl-markdown-content p, :root[data-theme='light'] .sl-markdown-content li { - color: #424a53; + color: var(--aw-text-muted); } /* Code Blocks */ @@ -921,16 +937,16 @@ header::after { /* Blockquotes */ .sl-markdown-content blockquote { - border-left: 4px solid #30363d; - color: #8d96a0; - background: rgba(48, 54, 61, 0.15); + border-left: 4px solid var(--aw-border-strong); + color: var(--aw-text-muted); + background: rgba(110, 118, 129, 0.1); border-radius: 0 4px 4px 0; } :root[data-theme='light'] .sl-markdown-content blockquote { - border-left-color: #d0d7de; - color: #424a53; - background: rgba(208, 215, 222, 0.15); + border-left-color: rgba(var(--aw-accent-rgb), 0.34); + color: var(--aw-text-muted); + background: rgba(208, 215, 222, 0.22); } /* Links */ @@ -1016,8 +1032,8 @@ nav a[aria-current="page"] { .sl-markdown-content button, .sl-markdown-content .button, a.button { - background: linear-gradient(180deg, #2d333b, #22272e); - border: 1px solid #444c56; + background: linear-gradient(180deg, rgba(48, 54, 61, 0.9), rgba(33, 38, 45, 0.9)); + border: 1px solid var(--aw-border-strong); color: #f0f6fc; border-radius: 6px; font-weight: 500; @@ -1027,16 +1043,38 @@ a.button { .sl-markdown-content button:hover, .sl-markdown-content .button:hover, a.button:hover { - background: linear-gradient(180deg, #373e47, #2d333b); - border-color: #768390; + background: linear-gradient(180deg, rgba(66, 74, 83, 0.95), rgba(48, 54, 61, 0.95)); + border-color: rgba(var(--aw-accent-rgb), 0.45); +} + +:root[data-theme='light'] .sl-markdown-content button, +:root[data-theme='light'] .sl-markdown-content .button, +:root[data-theme='light'] a.button { + background: linear-gradient(180deg, #f6f8fa, #eef2f6); + border-color: var(--aw-border); + color: #1f2328; +} + +:root[data-theme='light'] .sl-markdown-content button:hover, +:root[data-theme='light'] .sl-markdown-content .button:hover, +:root[data-theme='light'] a.button:hover { + background: linear-gradient(180deg, #f6f8fa, #e7ecf2); + border-color: rgba(var(--aw-accent-rgb), 0.42); } /* Cards and Panels */ .card, .panel { - background-color: #161b22; - border: 1px solid #30363d; + background-color: var(--aw-bg-elevated); + border: 1px solid var(--aw-border); border-radius: 6px; + box-shadow: var(--aw-shadow); +} + +:root[data-theme='light'] .card, +:root[data-theme='light'] .panel { + background-color: rgba(255, 255, 255, 0.88); + box-shadow: 0 10px 28px rgba(31, 35, 40, 0.06); } /* Scrollbar */ @@ -1468,11 +1506,11 @@ html { /* Hero Section */ .sl-link-button.primary { - background: rgba(139, 92, 246, 0.35) !important; - border: 1px solid rgba(139, 92, 246, 0.6) !important; + background: linear-gradient(135deg, rgba(124, 58, 237, 0.85), rgba(91, 33, 182, 0.92)) !important; + border: 1px solid rgba(196, 181, 253, 0.42) !important; color: #ffffff !important; backdrop-filter: blur(8px) !important; - box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1) !important; + box-shadow: 0 12px 30px rgba(91, 33, 182, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1) !important; font-weight: 600 !important; } @@ -1489,25 +1527,25 @@ html { } .sl-link-button.primary:hover { - background: rgba(139, 92, 246, 0.5) !important; - border-color: #8b5cf6 !important; - box-shadow: 0 6px 20px rgba(139, 92, 246, 0.35), 0 3px 8px rgba(0, 0, 0, 0.2) !important; + background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(109, 40, 217, 0.95)) !important; + border-color: rgba(221, 214, 254, 0.58) !important; + box-shadow: 0 16px 34px rgba(91, 33, 182, 0.32), 0 3px 8px rgba(0, 0, 0, 0.2) !important; color: #ffffff !important; transform: translateY(-1px) !important; } :root[data-theme='light'] .sl-link-button.primary { - background: #8b5cf6 !important; - border: 2px solid #6b46c1 !important; + background: linear-gradient(135deg, #8250df, #6f42c1) !important; + border: 1px solid rgba(111, 66, 193, 0.72) !important; color: #ffffff !important; - box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08) !important; + box-shadow: 0 12px 26px rgba(111, 66, 193, 0.22), 0 1px 3px rgba(0, 0, 0, 0.08) !important; font-weight: 600 !important; } :root[data-theme='light'] .sl-link-button.primary:hover { - background: #a78bfa !important; - border: 2px solid #7c3aed !important; - box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4), 0 2px 6px rgba(0, 0, 0, 0.1) !important; + background: linear-gradient(135deg, #8f63e6, #7847cf) !important; + border: 1px solid rgba(111, 66, 193, 0.88) !important; + box-shadow: 0 16px 32px rgba(111, 66, 193, 0.26), 0 2px 6px rgba(0, 0, 0, 0.1) !important; color: #ffffff !important; transform: translateY(-1px) !important; } @@ -1536,13 +1574,13 @@ table img[src*="badge.svg"] { /* Hero Styling */ .hero { background: transparent; - border-bottom: 1px solid #30363d; + border-bottom: 1px solid var(--aw-border); } .experimental-badge { - background: rgba(139, 92, 246, 0.12) !important; - border: 1px solid rgba(139, 92, 246, 0.4) !important; - color: #d896ff !important; + background: rgba(139, 92, 246, 0.14) !important; + border: 1px solid rgba(196, 181, 253, 0.28) !important; + color: #d8c4ff !important; } .hero h1 { From ff00ee86afa6a2c16af615d51b63af619cd4bfdb Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 20 Jun 2026 05:50:20 +0000 Subject: [PATCH 2/3] Disable off-home glow animations and align light cards with theme tokens Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com> --- docs/src/styles/custom.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css index ca8f9aa3484..eb3669a239b 100644 --- a/docs/src/styles/custom.css +++ b/docs/src/styles/custom.css @@ -126,7 +126,7 @@ background-size: 100% 100%, 100% 100%, 100% 100%; z-index: 0; pointer-events: none; - animation: light-glow-move 24s ease-in-out infinite; + animation: none; opacity: 0; } @@ -428,14 +428,19 @@ body::before { background-size: 100% 100%, 100% 100%, 100% 100%; z-index: 0; pointer-events: none; - animation: glow-move 24s ease-in-out infinite; + animation: none; opacity: 0; } body:has([data-slide-hero])::before { + animation: glow-move 24s ease-in-out infinite; opacity: 1; } +:root[data-theme='light'] body:has([data-slide-hero])::before { + animation: light-glow-move 24s ease-in-out infinite; +} + /* Dark Theme Transparent Backgrounds - Desktop only */ @media (min-width: 769px) { .page { @@ -1073,8 +1078,8 @@ a.button:hover { :root[data-theme='light'] .card, :root[data-theme='light'] .panel { - background-color: rgba(255, 255, 255, 0.88); - box-shadow: 0 10px 28px rgba(31, 35, 40, 0.06); + background-color: var(--aw-bg-elevated); + box-shadow: var(--aw-shadow); } /* Scrollbar */ From 6a1482119bceb945939b2c60cc076c3da076e961 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 20 Jun 2026 06:08:28 +0000 Subject: [PATCH 3/3] Fix docs text contrast and Safari backdrop blur support Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com> --- docs/src/components/CustomHeader.astro | 1 + docs/src/styles/custom.css | 9 +++++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/src/components/CustomHeader.astro b/docs/src/components/CustomHeader.astro index c5e0306b54b..ea1823f99e3 100644 --- a/docs/src/components/CustomHeader.astro +++ b/docs/src/components/CustomHeader.astro @@ -122,6 +122,7 @@ const base = import.meta.env.BASE_URL; max-width: calc(100vw - 2rem); z-index: 1000; box-shadow: var(--aw-shadow, 0 8px 24px rgba(0, 0, 0, 0.4)); + -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css index eb3669a239b..af309a488c5 100644 --- a/docs/src/styles/custom.css +++ b/docs/src/styles/custom.css @@ -432,6 +432,7 @@ body::before { opacity: 0; } +/* WorkflowHero exposes [data-slide-hero] as the homepage glow trigger contract. */ body:has([data-slide-hero])::before { animation: glow-move 24s ease-in-out infinite; opacity: 1; @@ -736,7 +737,7 @@ header::after { :root[data-theme='light'] .sl-markdown-content p, :root[data-theme='light'] .sl-markdown-content li { - color: var(--aw-text-muted); + color: var(--sl-color-text); } /* Code Blocks */ @@ -949,9 +950,9 @@ header::after { } :root[data-theme='light'] .sl-markdown-content blockquote { - border-left-color: rgba(var(--aw-accent-rgb), 0.34); - color: var(--aw-text-muted); - background: rgba(208, 215, 222, 0.22); + border-left-color: rgba(var(--aw-accent-rgb, 130, 80, 223), 0.34); + color: var(--sl-color-text); + background: var(--aw-bg-subtle); } /* Links */