yolo/arr
3
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): one control geometry for buttons and chips

Browse Source 
Buttons, chips, toggles and the search input converge on --control-h
2rem with --text-xs shared, and .control becomes an inline-flex so
anchor text centres in the title-detail action bar. Chip colour is
untouched (#165 owns it). Verified in agent-browser at 1440px, 46rem
and 40rem; the release deck keeps its column widths and does not
scroll horizontally.
This commit is contained in:
Miguel Palhas
2026-08-24 12:11:08 +01:00
parent 2495895717
commit 1a4394cf0d
2 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.impeccable/design.json
+3 -3
View File
@@ -123,7 +123,7 @@
},
"scale": {
"displayName": "Type scale",
"purpose": "Seven fixed steps as tokens: --text-2xs 0.6875rem (micro-labels), --text-xs 0.75rem (details, chips), --text-sm 0.8125rem (readouts, controls), --text-base 1rem (body), --text-md 1.0625rem (module names), --text-lg 1.3125rem (master module), --text-xl 1.625rem (wordmark). Components never carry a literal font-size."
"purpose": "Seven fixed steps as tokens: --text-2xs 0.6875rem (micro-labels), --text-xs 0.75rem (details, chips, controls), --text-sm 0.8125rem (readouts), --text-base 1rem (body), --text-md 1.0625rem (module names), --text-lg 1.3125rem (master module), --text-xl 1.625rem (wordmark). Components never carry a literal font-size. One control geometry: buttons and chips share --control-h 2rem and --text-xs, so a season line reads as one system."
}
},
"shadows": [
@@ -189,7 +189,7 @@
"refersTo": "ground",
"description": "The §9.3 column unit: a small machined panel holding one mono value (score, resolution, source, HDR, audio, size, seeders). Fixed rhythm so columns align; never a soft pill.",
"html": "<span class=\"chip readout\">2160p</span>",
"css": ".chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 1.375rem; padding: 0 var(--space-2); background: var(--panel-raised); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-readout); font-size: var(--text-xs); color: var(--ink-muted); }"
"css": ".chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-h); padding: 0 var(--space-2); background: var(--panel-raised); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-readout); font-size: var(--text-xs); color: var(--ink-muted); }"
},
{
"name": "Verdict chip",
@@ -229,7 +229,7 @@
"refersTo": "accent",
"description": "The interactive element: mono uppercase, phosphor-cyan text, panel ground, ≥44px hit target. Cyan belongs to interaction only — never to status.",
"html": "<button type=\"button\" class=\"control\">probe</button>",
"css": ".control { min-height: 2.75rem; padding: 0 var(--space-4); font-family: var(--font-readout); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); background: var(--panel-raised); border: 1px solid var(--line-strong); border-radius: var(--radius); }"
"css": ".control { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); padding: 0 var(--space-4); font-family: var(--font-readout); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); background: var(--panel-raised); border: 1px solid var(--line-strong); border-radius: var(--radius); }"
},
{
"name": "Rail",
web/src/style.css
+10 -8
View File
@@ -94,6 +94,7 @@
--space-12: 3rem;
--radius: 4px;
--control-h: 2rem;
--ease-out: cubic-bezier(0.25, 1, 0.5, 1);
}
@@ -442,10 +443,13 @@ body {
/* ---- controls -------------------------------------------------------- */
.control {
min-height: 2.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--control-h);
padding: 0 var(--space-4);
font-family: var(--font-readout);
font-size: var(--text-sm);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
@@ -497,7 +501,7 @@ body {
.search-input {
width: 100%;
min-height: 2.75rem;
min-height: var(--control-h);
padding: 0 var(--space-8) 0 var(--space-3);
color: var(--ink);
background: var(--ground);
@@ -634,7 +638,7 @@ body {
display: inline-flex;
align-items: center;
gap: var(--space-1);
min-height: 1.375rem;
min-height: var(--control-h);
padding: 0 var(--space-2);
background: var(--panel-raised);
border: 1px solid var(--line);
@@ -996,7 +1000,7 @@ body {
.bucket-toggle {
margin-left: auto;
min-height: 2.75rem;
min-height: var(--control-h);
padding: 0 var(--space-2);
font-size: var(--text-xs);
text-transform: uppercase;
@@ -1175,7 +1179,7 @@ body {
}
.view-btn {
min-height: 1.75rem;
min-height: var(--control-h);
padding: 0 var(--space-2);
font-family: var(--font-readout);
font-size: var(--text-xs);
@@ -1373,7 +1377,6 @@ body {
/* the tracked toggle reads as the rule it is; pressed = on */
.season-line .control,
.ep-actions .control {
min-height: 2.25rem;
padding: 0 var(--space-3);
}
@@ -1654,7 +1657,6 @@ body {
}
.movie-controls .control {
min-height: 2.25rem;
padding: 0 var(--space-3);
}