CremaUIStudio/arcadia-admin
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

ai: scope console theme to content wrapper, fix font loading

Browse Source 
Two bugs in the previous /ai redesign:

1. theme="console" on AppShell put the entire shell (sidebar, appbar,
   appbar dropdowns, the lot) inside [data-theme="console"], so the
   console palette + JetBrains Mono override leaked into the sidebar
   and made light mode look broken on /ai. Scoped now: the AppShell
   stays in skyrise (so light/dark toggle keeps working everywhere),
   and only the route content area gets data-theme="console" via an
   inner wrapper.

2. The Google Fonts @import inside console.css was being silently
   dropped because @import rules must precede all other rules in the
   final bundle, and skyrise's content lands first. Moved JetBrains
   Mono + Newsreader into app.css's top-level @import url() alongside
   the existing Inter/Instrument Sans/Geist Mono families.

Atmosphere ::before was also position: fixed, which painted the grain
overlay across the whole viewport (including the sidebar) regardless
of where data-theme lived. Now position: absolute on the wrapper, with
isolation: isolate to keep z-index local.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
jules
2026-05-02 19:39:51 +10:00
parent 4f699bb90e
commit 066a16bb8b
3 changed files with 31 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/themes/console.css
View File

@@ -11,7 +11,9 @@
* with skyrise / vibespace tokens.
* ============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&display=swap");
/* Fonts (JetBrains Mono + Newsreader) are loaded by app.css's top-level
* @import url() — keep this file free of @import statements so it can sit
* inside the bundle without violating "@import before any rule". */
[data-theme="console"] {
/* ── Palette ─────────────────────────────────────────────────────────── */
@@ -90,10 +92,17 @@
var(--console-ink);
}
/* Wrapper must be a positioning context so the grain overlay (and any
* other absolutely-positioned atmosphere) doesn't escape to the viewport. */
[data-theme="console"] {
position: relative;
isolation: isolate;
}
/* Grain — single SVG turbulence, low opacity. Doesn't ship as an asset. */
[data-theme="console"]::before {
content: "";
position: fixed;
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.035;