From 8bfcf6eb7e2103a24bc912ab1746525a598d84ea Mon Sep 17 00:00:00 2001 From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com> Date: Mon, 13 Jul 2026 14:26:00 +0100 Subject: [PATCH] Portal: theme-aware code blocks and hero-navy token (#7003) # Description of Changes Makes the code-snippet boxes theme-aware (a light palette in light mode) and moves the hero navy into a design token without changing the colour itself. Part of a portal (processor) UI-consistency pass, split into small focused PRs. ## Before / after after-codeblock-light before-codeblock-light --- ## Checklist ### General - [x] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [x] I have performed a self-review of my own code - [x] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### Translations (if applicable) - [ ] I ran [`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md) ### UI Changes (if applicable) - [x] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have run `task check` to verify linters, typechecks, and tests pass - [x] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#7-testing) for more details. --- frontend/editor/src/core/tokens/tokens.css | 31 +++++++++++++++++-- frontend/editor/src/core/ui/CodeBlock.css | 3 +- .../portal/components/EditorStatusCard.css | 4 +-- .../src/portal/components/WelcomeBanner.css | 4 +-- 4 files changed, 34 insertions(+), 8 deletions(-) diff --git a/frontend/editor/src/core/tokens/tokens.css b/frontend/editor/src/core/tokens/tokens.css index 247cd22a4e..f667a93851 100644 --- a/frontend/editor/src/core/tokens/tokens.css +++ b/frontend/editor/src/core/tokens/tokens.css @@ -270,8 +270,29 @@ --grad-banner: linear-gradient(135deg, #0f172a 0%, #111827 50%, #1a1535 100%); } -/* Always-dark code palette. Not theme-switched. */ -:root { +/* Code palette — theme-aware: a light GitHub-style box in light mode, the dark + terminal palette in dark mode. (CodeBlock renders plain text, so only the + base colours are load-bearing; the syntax slots are kept for future Shiki. */ +:root, +[data-theme="light"] { + --code-bg: #f6f8fa; + --code-bg-alt: #eef1f4; + --code-bg-header: #eaeef2; + --code-text: #1f2328; + --code-dim: #656d76; + --code-muted: #8c959f; + --code-keyword: #cf222e; + --code-string: #0a3069; + --code-number: #0550ae; + --code-fn: #8250df; + --code-type: #953800; + --code-property: #0550ae; + --code-comment: #6e7781; + --code-border: #d0d7de; + /* Window-chrome traffic-light dots in the code-block header. */ + --code-dot: #d0d7de; +} +[data-theme="dark"] { --code-bg: #0f172a; --code-bg-alt: #1e293b; --code-bg-header: #1a2332; @@ -286,12 +307,16 @@ --code-property: #93c5fd; --code-comment: #475569; --code-border: #1e293b; - /* Window-chrome traffic-light dots in the code-block header. */ --code-dot: #475569; } /* Radii / typography / motion / spacing / z-index — theme-stable */ :root { + /* Home hero strip navy. Theme-stable by design — the hero keeps this deep + navy in both light and dark (it's a branded surface, like the assistant + header), so it's defined once here rather than in the light/dark blocks. */ + --color-hero-navy: #16213e; + --radius-xs: 0.1875rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; diff --git a/frontend/editor/src/core/ui/CodeBlock.css b/frontend/editor/src/core/ui/CodeBlock.css index b74a03c67f..76ebea940c 100644 --- a/frontend/editor/src/core/ui/CodeBlock.css +++ b/frontend/editor/src/core/ui/CodeBlock.css @@ -51,7 +51,8 @@ transition: background var(--motion-fast); } .sui-code__copy:hover { - background: rgba(255, 255, 255, 0.05); + /* Subtle tint that reads on both the light and dark code surfaces. */ + background: color-mix(in srgb, var(--code-text) 8%, transparent); } .sui-code__pre { margin: 0; diff --git a/frontend/editor/src/portal/components/EditorStatusCard.css b/frontend/editor/src/portal/components/EditorStatusCard.css index 83426bae91..9732ec2fb0 100644 --- a/frontend/editor/src/portal/components/EditorStatusCard.css +++ b/frontend/editor/src/portal/components/EditorStatusCard.css @@ -15,7 +15,7 @@ align-items: center; gap: 1.25rem; padding: 1rem 1.25rem; - background: #16213e; + background: var(--color-hero-navy); } .portal-editor-hero__logo { @@ -123,7 +123,7 @@ .portal-editor-hero__action .portal-editor-hero__cta.sui-btn { background: #ffffff; border-color: #ffffff; - color: #16213e; + color: var(--color-hero-navy); } .portal-editor-hero__action .portal-editor-hero__cta.sui-btn:hover { background: rgba(255, 255, 255, 0.88); diff --git a/frontend/editor/src/portal/components/WelcomeBanner.css b/frontend/editor/src/portal/components/WelcomeBanner.css index 5c63462754..57f54846eb 100644 --- a/frontend/editor/src/portal/components/WelcomeBanner.css +++ b/frontend/editor/src/portal/components/WelcomeBanner.css @@ -18,7 +18,7 @@ gap: 1rem; flex-wrap: wrap; padding: 0.875rem 1.25rem; - background: #16213e; + background: var(--color-hero-navy); } .portal-welcome__brand { @@ -90,7 +90,7 @@ .portal-welcome__header .portal-welcome__cta.sui-btn { background: #ffffff; border-color: #ffffff; - color: #16213e; + color: var(--color-hero-navy); } .portal-welcome__header .portal-welcome__cta.sui-btn:hover { background: rgba(255, 255, 255, 0.88);