From 2a94e057525d5e10cc60e9251e6cb4ed4dbdcab0 Mon Sep 17 00:00:00 2001 From: tiennm99 Date: Mon, 21 Sep 2026 16:59:33 +0700 Subject: [PATCH] style(web): remap the remaining components onto the collapsed type ramp MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mechanical follow-through on the app.css ramp collapse: every var(--text-N) reference in these files moves to the step that carries the same size it did under the old nine-step scale, and the remaining 6/10/14px spacing literals become --space tokens. Accent hover/pressed tokens land on the two primary buttons here (Lobby's "Bắt đầu"/"Sẵn sàng", the chat panel's "Gửi") for the same reason the other primary buttons got them. --- .../lib/components/AttributionFooter.svelte | 2 +- web/src/lib/components/ChatPanel.svelte | 23 +++++++---- web/src/lib/components/CountdownRing.svelte | 2 +- web/src/lib/components/Lobby.svelte | 39 ++++++++++++------- web/src/lib/components/NicknameInput.svelte | 10 ++--- web/src/lib/components/RoomCodePanel.svelte | 16 ++++---- web/src/lib/components/ThemeToggle.svelte | 2 +- web/src/routes/+layout.svelte | 2 +- web/src/routes/rules/+page.svelte | 8 ++-- 9 files changed, 61 insertions(+), 43 deletions(-) diff --git a/web/src/lib/components/AttributionFooter.svelte b/web/src/lib/components/AttributionFooter.svelte index de77c5c..57dde68 100644 --- a/web/src/lib/components/AttributionFooter.svelte +++ b/web/src/lib/components/AttributionFooter.svelte @@ -37,7 +37,7 @@ padding-bottom: max(var(--space-2), env(safe-area-inset-bottom)); text-align: center; color: var(--text-muted); - font-size: var(--text-2); + font-size: var(--text-1); line-height: 1.4; } diff --git a/web/src/lib/components/ChatPanel.svelte b/web/src/lib/components/ChatPanel.svelte index df14383..71ba1ec 100644 --- a/web/src/lib/components/ChatPanel.svelte +++ b/web/src/lib/components/ChatPanel.svelte @@ -222,7 +222,7 @@ border: 0; background: none; color: var(--text-muted); - font-size: var(--text-4); + font-size: var(--text-2); font-weight: 600; /* Uppercase Vietnamese stacks a tone mark above a capital. */ line-height: 1.6; @@ -233,7 +233,7 @@ .header { width: 100%; min-height: 44px; - padding: 10px 0; + padding: var(--space-3) 0; justify-content: space-between; } @@ -276,10 +276,10 @@ display: flex; flex-wrap: wrap; align-items: baseline; - gap: 6px; + gap: var(--space-2); /* Colour is set per line, from the author's seat. Everything else about a line is the same for everybody. */ - font-size: var(--text-6); + font-size: var(--text-3); } .author { @@ -308,21 +308,30 @@ input { flex: 1; min-width: 0; - padding: 10px 12px; + padding: var(--space-3) 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); /* 16px or larger stops iOS Safari zooming the page on focus. */ - font-size: var(--text-6); + font-size: var(--text-3); } .row button { - padding: 10px 16px; + padding: var(--space-3) 16px; border: 0; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-text); font-weight: 600; + transition: background-color 150ms ease-out; + } + + .row button:hover:not(:disabled) { + background: var(--accent-hover); + } + + .row button:active:not(:disabled) { + background: var(--accent-pressed); } .row button:disabled { diff --git a/web/src/lib/components/CountdownRing.svelte b/web/src/lib/components/CountdownRing.svelte index 3c452aa..8a97b93 100644 --- a/web/src/lib/components/CountdownRing.svelte +++ b/web/src/lib/components/CountdownRing.svelte @@ -146,7 +146,7 @@ display: grid; place-items: center; color: var(--text); - font-size: 1.5rem; + font-size: var(--text-5); font-weight: 700; font-variant-numeric: tabular-nums; } diff --git a/web/src/lib/components/Lobby.svelte b/web/src/lib/components/Lobby.svelte index ab84413..13365f6 100644 --- a/web/src/lib/components/Lobby.svelte +++ b/web/src/lib/components/Lobby.svelte @@ -231,7 +231,7 @@ .count { margin: 0; color: var(--text-muted); - font-size: var(--text-4); + font-size: var(--text-2); font-weight: 600; } @@ -248,11 +248,11 @@ display: flex; flex-wrap: wrap; align-items: baseline; - gap: 10px; + gap: var(--space-3); /* A seat is a row to read, not a target to hit, so it keeps the type and gives up the padding: four of them decide whether the buttons under the list are on screen. */ - padding: var(--space-2) 14px; + padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); @@ -261,7 +261,7 @@ /* Tighter still under a finished game, where the list is competing with a result panel for the same screen. */ .compact .seat { - padding: var(--space-1) 14px; + padding: var(--space-1) var(--space-4); } /* Readiness is a tint. Being the owner is a marker down the edge: a fact @@ -294,7 +294,7 @@ border-radius: var(--radius-pill); background: var(--surface-alt); color: var(--text-muted); - font-size: var(--text-2); + font-size: var(--text-1); } /* One right-hand group, so a row keeps its shape whether or not it has a @@ -308,19 +308,19 @@ .wins { color: var(--text-muted); - font-size: var(--text-2); + font-size: var(--text-1); white-space: nowrap; } .wins strong { color: var(--text); - font-size: var(--text-5); + font-size: var(--text-2); font-variant-numeric: tabular-nums; } .state { color: var(--text-muted); - font-size: var(--text-3); + font-size: var(--text-2); } .state.offline { @@ -346,7 +346,7 @@ border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); - font-size: var(--text-6); + font-size: var(--text-3); line-height: 1; } @@ -370,7 +370,7 @@ .hint { margin: 0; color: var(--text-muted); - font-size: var(--text-5); + font-size: var(--text-2); text-align: center; } @@ -380,11 +380,11 @@ justify-content: space-between; gap: var(--space-2); margin: 0; - padding: 10px var(--space-3); + padding: var(--space-3) var(--space-3); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); - font-size: var(--text-5); + font-size: var(--text-2); } .actions { @@ -397,7 +397,7 @@ /* Still a full 44px: readying and starting are what a player came here to press. */ min-height: 44px; - padding: 10px var(--space-3); + padding: var(--space-3) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); @@ -408,6 +408,15 @@ border-color: transparent; background: var(--accent); color: var(--accent-text); + transition: background-color 150ms ease-out; + } + + .actions .primary:hover:not(:disabled) { + background: var(--accent-hover); + } + + .actions .primary:active:not(:disabled) { + background: var(--accent-pressed); } .actions .primary.on { @@ -429,7 +438,7 @@ border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); - font-size: var(--text-4); + font-size: var(--text-2); } .leave:disabled { @@ -439,7 +448,7 @@ .note { margin: 0; color: var(--text-muted); - font-size: var(--text-3); + font-size: var(--text-2); text-align: center; } diff --git a/web/src/lib/components/NicknameInput.svelte b/web/src/lib/components/NicknameInput.svelte index 01d06ce..aa7ceeb 100644 --- a/web/src/lib/components/NicknameInput.svelte +++ b/web/src/lib/components/NicknameInput.svelte @@ -29,25 +29,25 @@ .field { display: flex; flex-direction: column; - gap: 6px; + gap: var(--space-2); } label { font-weight: 600; - font-size: var(--text-5); + font-size: var(--text-2); } input { - padding: var(--space-3) 14px; + padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); - font-size: var(--text-6); + font-size: var(--text-3); } .hint { margin: 0; color: var(--text-muted); - font-size: var(--text-3); + font-size: var(--text-2); } diff --git a/web/src/lib/components/RoomCodePanel.svelte b/web/src/lib/components/RoomCodePanel.svelte index b5fe29f..5659708 100644 --- a/web/src/lib/components/RoomCodePanel.svelte +++ b/web/src/lib/components/RoomCodePanel.svelte @@ -110,7 +110,7 @@ display: flex; flex-direction: column; align-items: center; - gap: 10px; + gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); @@ -135,7 +135,7 @@ .label { margin: 0; color: var(--text-muted); - font-size: var(--text-4); + font-size: var(--text-2); } /* @@ -146,13 +146,13 @@ .code { margin: 0; font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace; - font-size: var(--text-9); + font-size: var(--text-6); font-weight: 700; letter-spacing: 0.12em; } .panel.compact .code { - font-size: var(--text-7); + font-size: var(--text-4); } .actions { @@ -164,18 +164,18 @@ .actions button { min-height: 44px; - padding: 10px var(--space-4); + padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-alt); - font-size: var(--text-4); + font-size: var(--text-2); font-weight: 600; } .failed { margin: 0; color: var(--danger); - font-size: var(--text-3); + font-size: var(--text-2); text-align: center; } @@ -187,7 +187,7 @@ margin: 0; max-width: 100%; color: var(--text-muted); - font-size: var(--text-3); + font-size: var(--text-2); } .link-label { diff --git a/web/src/lib/components/ThemeToggle.svelte b/web/src/lib/components/ThemeToggle.svelte index 38642e3..b333e26 100644 --- a/web/src/lib/components/ThemeToggle.svelte +++ b/web/src/lib/components/ThemeToggle.svelte @@ -26,7 +26,7 @@ border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); - font-size: var(--text-6); + font-size: var(--text-3); line-height: 1; } diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte index 2aec6c6..d0bac8e 100644 --- a/web/src/routes/+layout.svelte +++ b/web/src/routes/+layout.svelte @@ -71,7 +71,7 @@ .brand { color: inherit; - font-size: var(--text-7); + font-size: var(--text-4); font-weight: 700; text-decoration: none; } diff --git a/web/src/routes/rules/+page.svelte b/web/src/routes/rules/+page.svelte index 7be8f80..aee6049 100644 --- a/web/src/routes/rules/+page.svelte +++ b/web/src/routes/rules/+page.svelte @@ -106,7 +106,7 @@ h1 { margin: 0; - font-size: var(--text-8); + font-size: var(--text-5); } .intro { @@ -126,7 +126,7 @@ border-radius: var(--radius-pill); background: var(--surface-alt); color: var(--text); - font-size: var(--text-3); + font-size: var(--text-2); text-decoration: none; } @@ -141,7 +141,7 @@ h2 { margin: 0; - font-size: var(--text-7); + font-size: var(--text-4); } p { @@ -164,6 +164,6 @@ .back { align-self: flex-start; color: var(--text-muted); - font-size: var(--text-5); + font-size: var(--text-2); }