From 0b9500aae4a4fd181a5b93c22033713fa9e800bf Mon Sep 17 00:00:00 2001 From: Mark Backman Date: Thu, 21 May 2026 22:59:26 -0400 Subject: [PATCH] Match shopping-list client styling to the other UI demos Restyle from a bespoke dark theme to the light theme the other UI demos share: the canonical :root tokens (--border, --muted, --highlight), the #fafafa/#18181b body, the sticky white header with the light/red Connect button, the fixed bottom-right #status toast, and the amber ui-highlight-pulse keyframe. index.html drops the custom topbar wrapper for the standard
plus a standalone #status element. --- .../ui-worker/shopping-list/client/index.html | 8 +- .../ui-worker/shopping-list/client/styles.css | 201 +++++++++--------- 2 files changed, 108 insertions(+), 101 deletions(-) diff --git a/examples/multi-worker/ui-worker/shopping-list/client/index.html b/examples/multi-worker/ui-worker/shopping-list/client/index.html index 9924aefc9..71ac1d96c 100644 --- a/examples/multi-worker/ui-worker/shopping-list/client/index.html +++ b/examples/multi-worker/ui-worker/shopping-list/client/index.html @@ -7,12 +7,9 @@ -
+

🛒 Shopping list

-
- - -
+
@@ -38,6 +35,7 @@

+
diff --git a/examples/multi-worker/ui-worker/shopping-list/client/styles.css b/examples/multi-worker/ui-worker/shopping-list/client/styles.css index 24de9435e..0fcdb0210 100644 --- a/examples/multi-worker/ui-worker/shopping-list/client/styles.css +++ b/examples/multi-worker/ui-worker/shopping-list/client/styles.css @@ -1,13 +1,13 @@ :root { - --bg: #0f1115; - --panel: #181b22; - --panel-2: #1f242d; - --text: #e8ebf0; - --muted: #97a0ad; - --accent: #5b8cff; - --accent-soft: rgba(91, 140, 255, 0.18); - --done: #5fd08a; - --border: #2a2f3a; + color-scheme: light; + font-family: + system-ui, + -apple-system, + sans-serif; + --border: #d4d4d8; + --muted: #71717a; + --highlight: #fbbf24; + --done: #16a34a; } * { @@ -16,149 +16,132 @@ body { margin: 0; - font-family: - system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; - background: var(--bg); - color: var(--text); - line-height: 1.5; + background: #fafafa; + color: #18181b; } -.topbar { +header { + position: sticky; + top: 0; + z-index: 10; display: flex; align-items: center; justify-content: space-between; - padding: 16px 24px; + padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); - position: sticky; - top: 0; - background: rgba(15, 17, 21, 0.92); - backdrop-filter: blur(6px); + background: #fff; } -.topbar h1 { - font-size: 20px; +header h1 { + font-size: 1.25rem; margin: 0; } -.topbar-right { - display: flex; - align-items: center; - gap: 12px; -} - -#status { - font-size: 13px; - color: var(--muted); - transition: opacity 0.3s; -} - -#status[data-show="0"] { - opacity: 0; -} - #connect { - font-size: 14px; - padding: 8px 18px; - border-radius: 8px; - border: 1px solid var(--accent); - background: var(--accent-soft); - color: var(--text); + padding: 0.5rem 1rem; + border: 1px solid var(--border); + background: #fff; + border-radius: 6px; cursor: pointer; + font-size: 0.875rem; +} + +#connect:hover { + background: #f4f4f5; } #connect[data-state="connected"] { - border-color: var(--border); - background: transparent; - color: var(--muted); -} - -#connect:disabled { - opacity: 0.5; - cursor: default; + background: #ef4444; + color: white; + border-color: #ef4444; } main { - max-width: 560px; + max-width: 640px; margin: 0 auto; - padding: 28px 24px 80px; + padding: 1.5rem; } .hint { + font-size: 0.875rem; color: var(--muted); - font-size: 14px; - margin: 0 0 18px; + line-height: 1.5; + margin: 0 0 1.25rem; } .add-form { display: flex; - gap: 8px; - margin-bottom: 18px; + gap: 0.5rem; + margin-bottom: 1.25rem; } .add-form input { flex: 1; - font-size: 15px; - padding: 10px 12px; - border-radius: 8px; + font-size: 0.9375rem; + padding: 0.5rem 0.75rem; border: 1px solid var(--border); - background: var(--panel); - color: var(--text); + border-radius: 6px; + background: #fff; + color: inherit; } .add-form input:focus { outline: none; - border-color: var(--accent); + border-color: #a1a1aa; } .add-form button { - font-size: 14px; - padding: 0 16px; - border-radius: 8px; + padding: 0.5rem 1rem; + font-size: 0.875rem; border: 1px solid var(--border); - background: var(--panel-2); - color: var(--text); + border-radius: 6px; + background: #fff; cursor: pointer; } +.add-form button:hover { + background: #f4f4f5; +} + .list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; - gap: 8px; + gap: 0.5rem; } .item { - background: var(--panel); + background: #fff; border: 1px solid var(--border); - border-radius: 10px; + border-radius: 8px; transition: - background 0.2s, - opacity 0.2s; + opacity 0.2s, + border-color 0.2s; } .item label { display: flex; align-items: center; - gap: 12px; - padding: 12px 14px; + gap: 0.75rem; + padding: 0.75rem 0.875rem; cursor: pointer; } .item input[type="checkbox"] { - width: 20px; - height: 20px; + width: 1.15rem; + height: 1.15rem; accent-color: var(--done); cursor: pointer; } .item-text { - font-size: 16px; + font-size: 1rem; } .item.checked { - opacity: 0.55; + opacity: 0.6; } .item.checked .item-text { @@ -167,10 +150,10 @@ main { } .list-empty { + font-size: 0.875rem; color: var(--muted); - font-size: 14px; text-align: center; - padding: 32px 0; + padding: 2rem 0; } .list-empty[hidden] { @@ -179,38 +162,64 @@ main { /* New-item flash so a voice-added item is easy to spot. */ .item-flash { - animation: item-flash 1s ease-out; + animation: item-flash 1.2s ease-out; } @keyframes item-flash { 0% { - background: var(--accent-soft); - border-color: var(--accent); + background: #fffbeb; + border-color: var(--highlight); } 100% { - background: var(--panel); + background: #fff; border-color: var(--border); } } -/* Standard ``highlight`` command: a brief pulse. Duration is driven by - the server-supplied duration_ms via the --highlight-duration var. */ +/* Standard ``highlight`` command: a brief amber pulse, matching the + other UI demos. Duration is driven by the server-supplied duration_ms + via the --highlight-duration variable. */ .ui-highlight { - animation: ui-highlight var(--highlight-duration, 1500ms) ease-out; + animation: ui-highlight-pulse var(--highlight-duration, 2500ms) + cubic-bezier(0.2, 0.8, 0.2, 1); + z-index: 2; } -@keyframes ui-highlight { +@keyframes ui-highlight-pulse { 0% { transform: scale(1); - box-shadow: 0 0 0 0 var(--accent-soft); + box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); + background: #fff; + border-color: var(--border); } - 30% { - transform: scale(1.02); - box-shadow: 0 0 0 6px var(--accent-soft); - border-color: var(--accent); + 35% { + transform: scale(1.04); + box-shadow: 0 0 36px 8px rgba(251, 191, 36, 0.55); + background: #fffbeb; + border-color: var(--highlight); } 100% { transform: scale(1); - box-shadow: 0 0 0 0 rgba(91, 140, 255, 0); + box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); + background: #fff; + border-color: var(--border); } } + +#status { + position: fixed; + bottom: 1rem; + right: 1rem; + padding: 0.5rem 0.75rem; + border-radius: 6px; + font-size: 0.8125rem; + background: #18181b; + color: white; + opacity: 0; + transition: opacity 0.2s; + pointer-events: none; +} + +#status[data-show="1"] { + opacity: 1; +}