DukeInc/Kez
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(kez-chat/web): @theme block was being dropped — theme never applied

Browse Source 
The deployed redesign rendered dark-bg but unstyled, low-contrast text
because none of the --color-* tokens or token utilities were in the
output CSS. Two compounding causes, both fixed:

1. A CSS @import url(google-fonts) AFTER @import "tailwindcss" becomes a
   misplaced import once Tailwind inlines itself; Lightning CSS drops it
   and everything after — including @theme. Fonts now load via <link> in
   index.html.
2. A box-drawing-unicode comment immediately before @theme stopped
   Tailwind v4 from transforming the block. Replaced with plain ASCII.

CSS 21.8KB → 26.3KB; tokens + utilities now present; theme applies.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Jason Tudisco 2026-05-27 22:06:55 -06:00
parent a9ef611622
commit 7bbe336f6b
2 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
kez-chat/web/index.html
View File

@ -7,6 +7,12 @@
<title>kez-chat</title> <title>kez-chat</title>
<meta name="description" content="End-to-end encrypted chat on top of KEZ — portable cross-app identity." /> <meta name="description" content="End-to-end encrypted chat on top of KEZ — portable cross-app identity." />
<!-- Fonts: Inter (UI) + JetBrains Mono (keys/handles/wordmark). Loaded
here, not via CSS @import — see app.css note. -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap" />
<!-- Browser tab + Android Chrome favicon --> <!-- Browser tab + Android Chrome favicon -->
<link rel="icon" href="/favicon.ico" sizes="48x48" /> <link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" type="image/svg+xml" href="/kez-icon.svg" /> <link rel="icon" type="image/svg+xml" href="/kez-icon.svg" />

15
kez-chat/web/src/app.css
View File

@ -1,13 +1,12 @@
@import "tailwindcss"; @import "tailwindcss";
/* Fonts: Inter (UI) + JetBrains Mono (keys/handles/wordmark). */ /* KEZ design tokens (see DESIGN.md). Dark-first, "muted tactical terminal."
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap"); Tailwind v4 turns each --color-* into bg-/text-/border- utilities, each
--font-* into font-*, each --radius-* into rounded-*.
/* ─────────────────────────────────────────────────────────────────────────── NOTE: keep this @theme block free of fancy unicode comments and do NOT
KEZ design tokens — see DESIGN.md. Dark-first, "muted tactical terminal." put a CSS `@import url()` before it — either one stops Tailwind from
Tailwind v4 turns each --color-* into bg-*/text-*/border-* utilities, transforming @theme, and Lightning CSS then drops the whole block.
each --font-* into font-*, each --radius-* into rounded-*. Fonts load via <link> in index.html for that reason. */
─────────────────────────────────────────────────────────────────────────── */
@theme { @theme {
/* Elevation ramp (neutral near-black) */ /* Elevation ramp (neutral near-black) */
--color-bg: #0b0c0e; --color-bg: #0b0c0e;