From 7534b82df50111ba2805e1d199011eb7033cd729 Mon Sep 17 00:00:00 2001 From: ErenAri Date: Fri, 19 Jun 2026 19:29:51 +0300 Subject: [PATCH] Restyle demo UI to the Carbon design tokens used by the marketing site MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The demo web app (internal/api/ui.go) had its own hand-rolled palette — ~50 one-off hex values, a different blue, an unrelated amber accent — so clicking through from the polished kernelguard.net marketing page landed in what looked like a different, less-finished product. Introduce a :root token set matched to the marketing site's IBM Carbon values (#161616 / #262626 / #393939 / #4589ff / #3ddc97) and replace every one-off hex with a semantic token (--bg/--layer/--field/--border/--fg/--primary/--success/ --danger/--warning). Add focus/hover affordances. No structural/JS changes; purely the stylesheet, so the demo now reads as the same product as the site. Co-Authored-By: Claude Opus 4.8 --- internal/api/ui.go | 356 ++++++++++++++++++++++++--------------------- 1 file changed, 194 insertions(+), 162 deletions(-) diff --git a/internal/api/ui.go b/internal/api/ui.go index d6c07571..522ab945 100644 --- a/internal/api/ui.go +++ b/internal/api/ui.go @@ -7,17 +7,44 @@ const uiHTML = ` bpfcompat UI + + button:not(.secondary):not(:disabled):hover { background: var(--primary-hover); border-color: var(--primary-hover); } + button.secondary:not(:disabled):hover { background: var(--layer-hover); border-color: var(--border-strong); } + input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: -2px; border-color: var(--primary); } + a { color: var(--primary); } +
Technical Preview — CI-first eBPF compatibility gate. Production runtime loading remains disabled in the public demo.