Hermes/multi-simadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(web): unify panel, group and state controls

Browse Source 
Standardize panel actions, group filters, segmented modes, workbench tabs, message filters, identity controls and privacy toggles on the shared button scale. Add cascade-aware tests so stale compact sizes and low-contrast states cannot return.
This commit is contained in:
chick
2026-09-08 19:58:10 +08:00
parent bfe5025943
commit 001659ed91
7 changed files with 237 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/audit/audit-page.tsx
+1 -1
View File
@@ -288,7 +288,7 @@ export function AuditPage({ dataSource, refreshSignal = 0 }: AuditPageProps) {
<h1 id="audit-title">审计</h1> <h1 id="audit-title">审计</h1>
<p>只读运维审计事件。</p> <p>只读运维审计事件。</p>
</div> </div>
<Button htmlType="button" size="small" onClick={() => setAttempt((value) => value + 1)}> <Button htmlType="button" onClick={() => setAttempt((value) => value + 1)}>
刷新审计事件 刷新审计事件
</Button> </Button>
</div> </div>
apps/web/src/fleet/fleet-page.test.tsx
+11
View File
@@ -420,6 +420,17 @@ describe('FleetPage search and filter toolbar', () => {
}); });
describe('FleetPage batch and restart actions', () => { describe('FleetPage batch and restart actions', () => {
it('keeps top-level create and batch actions on the same control scale', () => {
render(<FleetPage initialData={snapshot} />);
const create = screen.getByRole('link', { name: '添加实例' });
const batch = screen.getByRole('button', { name: '批量选择' });
expect(create.classList.contains('primary-action')).toBe(true);
expect(batch.classList.contains('animal-btn-small')).toBe(false);
expect(batch.className).toMatch(/animal-btn-middle-[A-Za-z0-9]+/);
});
it('keeps selection controls hidden until batch-selection mode is entered', () => { it('keeps selection controls hidden until batch-selection mode is entered', () => {
render(<FleetPage initialData={snapshot} />); render(<FleetPage initialData={snapshot} />);
expect(screen.queryByRole('checkbox', { name: /选择 Alpha modem/ })).toBeNull(); expect(screen.queryByRole('checkbox', { name: /选择 Alpha modem/ })).toBeNull();
apps/web/src/fleet/fleet-page.tsx
-1
View File
@@ -984,7 +984,6 @@ export function FleetPage({
) : null} ) : null}
<Button <Button
htmlType="button" htmlType="button"
size="small"
onClick={() => { onClick={() => {
if (selectionMode) setSelectedIds(new Set()); if (selectionMode) setSelectedIds(new Set());
setSelectionMode((value) => !value); setSelectionMode((value) => !value);
apps/web/src/jobs/jobs-page.tsx
+1 -2
View File
@@ -418,14 +418,13 @@ export function JobsPage({ dataSource, refreshSignal = 0 }: JobsPageProps) {
</label> </label>
<Button <Button
htmlType="button" htmlType="button"
size="small"
aria-label="刷新任务" aria-label="刷新任务"
onClick={() => setManualRefresh((value) => value + 1)} onClick={() => setManualRefresh((value) => value + 1)}
> >
刷新 刷新
</Button> </Button>
{canReconcile ? ( {canReconcile ? (
<Button htmlType="button" size="small" aria-label="对账中断任务" onClick={runReconcile}> <Button htmlType="button" aria-label="对账中断任务" onClick={runReconcile}>
{reconciling ? '对账中…' : '对账中断任务'} {reconciling ? '对账中…' : '对账中断任务'}
</Button> </Button>
) : null} ) : null}
apps/web/src/settings/instance-settings-page.tsx
+3 -1
View File
@@ -204,7 +204,9 @@ export function InstanceSettingsPage({
<Title color="app-green">实例</Title> <Title color="app-green">实例</Title>
</h1> </h1>
</div> </div>
<a href="/instances/new">添加实例</a> <a className="primary-action" href="/instances/new">
添加实例
</a>
</header> </header>
{unavailable ? ( {unavailable ? (
apps/web/src/styles.css
+124 -94
View File
@@ -376,7 +376,7 @@ code {
gap: 0.4rem; gap: 0.4rem;
padding: 0.4rem 0.7rem; padding: 0.4rem 0.7rem;
color: #aebdd0; color: #aebdd0;
border-radius: 7px; border-radius: var(--button-radius-compact);
text-decoration: none; text-decoration: none;
font-size: 0.82rem; font-size: 0.82rem;
font-weight: 700; font-weight: 700;
@@ -680,7 +680,7 @@ button.fleet-cross-health-item {
position: absolute; position: absolute;
right: 0.28rem; right: 0.28rem;
top: 50%; top: 50%;
min-height: 2rem; min-height: var(--button-height-compact);
padding: 0.25rem 0.55rem; padding: 0.25rem 0.55rem;
transform: translateY(-50%); transform: translateY(-50%);
font-size: 0.75rem; font-size: 0.75rem;
@@ -1443,12 +1443,23 @@ button.fleet-cross-health-item {
white-space: nowrap; white-space: nowrap;
} }
.maintenance-backup-actions a { .maintenance-backup-actions a {
color: var(--workbench-mint); min-height: var(--button-height-compact);
font-size: 0.78rem; display: inline-flex;
font-weight: 800; align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.7rem;
color: var(--button-secondary-text);
border: 1px solid var(--button-secondary-border);
border-radius: var(--button-radius-compact);
background: var(--button-secondary-bg);
font-size: 0.76rem;
font-weight: 750;
text-decoration: none;
} }
.maintenance-backup-actions a:hover { .maintenance-backup-actions a:hover {
text-decoration: underline; color: var(--button-secondary-hover-text);
border-color: var(--button-secondary-hover-border);
background: var(--button-secondary-hover-bg);
} }
.dense-table code { .dense-table code {
color: var(--muted); color: var(--muted);
@@ -1920,12 +1931,12 @@ button.fleet-cross-health-item {
list-style: none; list-style: none;
} }
.instance-context nav a { .instance-context nav a {
min-height: 2.4rem; min-height: var(--button-height);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 0.5rem 0.7rem; padding: 0.5rem 0.7rem;
color: #95a9be; color: #95a9be;
border-radius: 7px 7px 0 0; border-radius: var(--button-radius-compact) var(--button-radius-compact) 0 0;
text-decoration: none; text-decoration: none;
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 800; font-weight: 800;
@@ -2324,7 +2335,7 @@ dd {
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
.dense-table th button { .dense-table th button {
min-height: 1.8rem; min-height: var(--button-height-compact);
padding: 0.2rem 0.35rem; padding: 0.2rem 0.35rem;
border: 0; border: 0;
background: transparent; background: transparent;
@@ -3013,13 +3024,15 @@ a.primary-action:active {
} }
.workbench-tabs button { .workbench-tabs button {
min-height: 2.75rem; min-height: var(--button-height-large);
padding: 0 0.85rem; padding: 0 0.75rem;
border: 0; border: 0;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
border-radius: var(--button-radius-compact) var(--button-radius-compact) 0 0;
color: var(--workbench-muted); color: var(--workbench-muted);
background: transparent; background: transparent;
font: inherit; font: inherit;
font-size: 0.8rem;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
} }
@@ -3364,20 +3377,20 @@ a.icon-button:hover {
.segmented-control button { .segmented-control button {
flex: 1 1 0; flex: 1 1 0;
min-height: var(--button-height-compact); min-height: var(--button-height-compact);
padding: 0.3rem 0.5rem; padding: 0.3rem 0.7rem;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: var(--button-radius-compact); border-radius: var(--button-radius-compact);
color: var(--workbench-muted); color: var(--button-secondary-text);
background: transparent; background: transparent;
font: inherit; font: inherit;
font-size: 0.78rem; font-size: 0.76rem;
font-weight: 700; font-weight: 750;
cursor: pointer; cursor: pointer;
} }
.segmented-control button.is-active { .segmented-control button.is-active {
border-color: var(--workbench-border-strong); border-color: var(--button-secondary-border);
color: var(--workbench-text); color: var(--button-secondary-text);
background: #fff; background: var(--button-secondary-bg);
} }
.segmented-control button:focus-visible { .segmented-control button:focus-visible {
outline: 3px solid var(--button-focus-ring); outline: 3px solid var(--button-focus-ring);
@@ -3525,21 +3538,23 @@ a.icon-button:hover {
} }
.organization-add { .organization-add {
display: inline-flex; display: inline-flex;
gap: 0.3rem; gap: 0.35rem;
align-items: center; align-items: center;
min-height: 2.1rem; min-height: var(--button-height-compact);
padding: 0 0.7rem; padding: 0.3rem 0.7rem;
border: 1px solid var(--workbench-border-strong); border: 1px solid var(--workbench-border-strong);
border-radius: 999px; border-radius: var(--button-radius-compact);
color: var(--workbench-text); color: var(--button-secondary-text);
background: #fff; background: var(--button-secondary-bg);
font: inherit; font: inherit;
font-size: 0.75rem; font-size: 0.76rem;
font-weight: 700; font-weight: 750;
cursor: pointer; cursor: pointer;
} }
.organization-add:hover { .organization-add:hover {
border-color: var(--workbench-mint); color: var(--button-secondary-hover-text);
border-color: var(--button-secondary-hover-border);
background: var(--button-secondary-hover-bg);
} }
.organization-add svg { .organization-add svg {
width: 0.85rem; width: 0.85rem;
@@ -3754,16 +3769,21 @@ a.icon-button:hover {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.35rem; gap: 0.35rem;
padding: 0.3rem 0.8rem; padding: 0.3rem 0.7rem;
border: 1px solid var(--workbench-border-strong); border: 1px solid var(--button-secondary-border);
border-radius: var(--button-radius-compact); border-radius: var(--button-radius-compact);
color: var(--workbench-text); color: var(--button-secondary-text);
background: #fff; background: var(--button-secondary-bg);
font: inherit; font: inherit;
font-size: 0.75rem; font-size: 0.76rem;
font-weight: 700; font-weight: 750;
cursor: pointer; cursor: pointer;
} }
.identity-actions button:hover:not(:disabled) {
color: var(--button-secondary-hover-text);
border-color: var(--button-secondary-hover-border);
background: var(--button-secondary-hover-bg);
}
.identity-actions button:disabled { .identity-actions button:disabled {
color: var(--button-disabled-text); color: var(--button-disabled-text);
border-color: var(--button-disabled-border); border-color: var(--button-disabled-border);
@@ -4237,10 +4257,18 @@ button:not([class*='animal-']):hover:not(:disabled) {
button[type='submit']:not([class*='animal-']), button[type='submit']:not([class*='animal-']),
button.primary-action, button.primary-action,
a.primary-action { a.primary-action {
min-height: var(--button-height);
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.9rem;
color: var(--button-primary-text); color: var(--button-primary-text);
border-color: var(--button-primary-bg); border-color: var(--button-primary-bg);
border-radius: var(--button-radius); border-radius: var(--button-radius);
background: var(--button-primary-bg); background: var(--button-primary-bg);
font-size: 0.82rem;
font-weight: 750;
text-decoration: none;
box-shadow: 0 3px 0 var(--button-primary-active); box-shadow: 0 3px 0 var(--button-primary-active);
} }
@@ -4969,7 +4997,7 @@ main > section > header h1,
} }
.fleet-card-admin-actions button { .fleet-card-admin-actions button {
min-height: 2.35rem; min-height: var(--button-height-compact);
transition: transition:
transform 100ms ease-out, transform 100ms ease-out,
opacity 100ms ease-out, opacity 100ms ease-out,
@@ -5342,7 +5370,7 @@ svg {
} }
.primary-action, .primary-action,
.fleet-card-admin-actions button { .fleet-card-admin-actions button {
gap: 0.38rem; gap: 0.4rem;
} }
.primary-action svg, .primary-action svg,
.fleet-card-admin-actions button svg { .fleet-card-admin-actions button svg {
@@ -5708,11 +5736,13 @@ svg {
.fleet-group-tabs button:hover:not(:disabled) { .fleet-group-tabs button:hover:not(:disabled) {
min-height: var(--button-height-compact); min-height: var(--button-height-compact);
flex: 0 0 auto; flex: 0 0 auto;
padding: 0 0.72rem; padding: 0.3rem 0.7rem;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 8px; border-radius: var(--button-radius-compact);
color: var(--workbench-muted); color: var(--button-secondary-text);
background: transparent; background: transparent;
font-size: 0.76rem;
font-weight: 750;
box-shadow: none; box-shadow: none;
transform: none; transform: none;
transition: transition:
@@ -5722,40 +5752,42 @@ svg {
} }
.fleet-group-tabs button:hover:not(:disabled) { .fleet-group-tabs button:hover:not(:disabled) {
color: var(--workbench-text); color: var(--button-secondary-hover-text);
background: var(--workbench-surface-muted); border-color: var(--button-secondary-hover-border);
background: var(--button-secondary-hover-bg);
} }
.fleet-group-tabs button.is-active, .fleet-group-tabs button.is-active,
.fleet-group-tabs button.is-active:hover:not(:disabled) { .fleet-group-tabs button.is-active:hover:not(:disabled) {
color: #116f67; color: var(--button-primary-hover);
border-color: #b7ded4; border-color: var(--button-primary-bg);
background: var(--workbench-mint-soft); background: var(--workbench-mint-soft);
} }
.fleet-group-count { .fleet-group-count {
margin-left: 0.35rem; margin-left: 0.35rem;
padding: 0 0.32rem; padding: 0 0.32rem;
border-radius: 999px; border-radius: 999px;
color: var(--workbench-muted); color: var(--button-secondary-text);
background: var(--workbench-surface-muted); background: var(--workbench-surface-muted);
font-size: 0.68rem; font-size: 0.68rem;
font-weight: 700; font-weight: 750;
} }
.fleet-group-tabs button.is-active .fleet-group-count { .fleet-group-tabs button.is-active .fleet-group-count {
color: #116f67; color: var(--button-primary-hover);
background: #fff; background: var(--button-secondary-bg);
} }
.fleet-group-manage, .fleet-group-manage,
.fleet-group-manage:hover:not(:disabled) { .fleet-group-manage:hover:not(:disabled) {
display: inline-flex; display: inline-flex;
gap: 0.3rem; gap: 0.35rem;
align-items: center; align-items: center;
margin-left: auto; margin-left: auto;
border-style: dashed; border-style: dashed;
border-color: var(--workbench-border-strong); border-color: var(--workbench-border-strong);
color: var(--workbench-text); color: var(--button-secondary-text);
background: #fff; background: var(--button-secondary-bg);
font-size: 0.75rem; font-size: 0.76rem;
font-weight: 750;
} }
.fleet-group-manage svg { .fleet-group-manage svg {
width: 0.85rem; width: 0.85rem;
@@ -6452,11 +6484,6 @@ button.fleet-card-menu-trigger:focus-visible {
.fleet-status-summary-rail { .fleet-status-summary-rail {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
} }
.fleet-group-tabs button,
.fleet-group-tabs button:hover:not(:disabled) {
min-height: 2.75rem;
}
} }
@media (max-width: 70rem) { @media (max-width: 70rem) {
@@ -6627,16 +6654,16 @@ button.fleet-card-menu-trigger:focus-visible {
.fleet-phone-privacy-toggle:active:not(:disabled) { .fleet-phone-privacy-toggle:active:not(:disabled) {
position: relative; position: relative;
display: grid; display: grid;
width: 2.5rem; width: var(--icon-button-size);
height: 2.5rem; height: var(--icon-button-size);
min-height: 2.5rem; min-height: var(--icon-button-size);
flex: 0 0 2.5rem; flex: 0 0 var(--icon-button-size);
place-items: center; place-items: center;
padding: 0; padding: 0;
border: 1px solid var(--workbench-border); border: 1px solid var(--workbench-border);
border-radius: 8px; border-radius: var(--button-radius);
color: var(--workbench-muted); color: var(--workbench-muted);
background: #fffef9; background: var(--button-secondary-bg);
box-shadow: none; box-shadow: none;
transform: none; transform: none;
} }
@@ -6648,13 +6675,13 @@ button.fleet-card-menu-trigger:focus-visible {
} }
.fleet-phone-privacy-toggle:hover:not(:disabled) { .fleet-phone-privacy-toggle:hover:not(:disabled) {
color: var(--workbench-text); color: var(--button-secondary-hover-text);
border-color: var(--workbench-border-strong); border-color: var(--button-secondary-hover-border);
background: #fff; background: var(--button-secondary-hover-bg);
} }
.fleet-phone-privacy-toggle[aria-pressed='true'] { .fleet-phone-privacy-toggle[aria-pressed='true'] {
color: var(--workbench-mint); color: var(--button-primary-hover);
border-color: var(--workbench-mint-border); border-color: var(--workbench-mint-border);
background: var(--workbench-mint-soft); background: var(--workbench-mint-soft);
} }
@@ -6737,27 +6764,29 @@ button.fleet-card-menu-trigger:focus-visible {
padding: 0 0 0.55rem; padding: 0 0 0.55rem;
} }
.fleet-messages-filter-chip { .fleet-messages-filter-chip {
min-height: var(--button-height-compact);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.3rem; gap: 0.3rem;
padding: 0.24rem 0.6rem; padding: 0.3rem 0.7rem;
border: 1px solid var(--workbench-border); border: 1px solid var(--workbench-border);
border-radius: 999px; border-radius: 999px;
background: var(--workbench-surface); color: var(--button-secondary-text);
color: var(--workbench-muted); background: var(--button-secondary-bg);
font: inherit; font: inherit;
font-size: 0.7rem; font-size: 0.76rem;
font-weight: 750; font-weight: 750;
cursor: pointer; cursor: pointer;
} }
.fleet-messages-filter-chip:hover { .fleet-messages-filter-chip:hover {
border-color: var(--workbench-border-strong); color: var(--button-secondary-hover-text);
color: var(--workbench-text); border-color: var(--button-secondary-hover-border);
background: var(--button-secondary-hover-bg);
} }
.fleet-messages-filter-chip[aria-pressed='true'] { .fleet-messages-filter-chip[aria-pressed='true'] {
border-color: var(--workbench-mint); color: var(--button-primary-hover);
border-color: var(--button-primary-bg);
background: var(--workbench-mint-soft); background: var(--workbench-mint-soft);
color: var(--workbench-mint);
} }
.fleet-messages-layout { .fleet-messages-layout {
display: grid; display: grid;
@@ -6792,7 +6821,7 @@ button.fleet-card-menu-trigger:focus-visible {
justify-content: space-between; justify-content: space-between;
gap: 0.5rem; gap: 0.5rem;
width: 100%; width: 100%;
min-height: 2.3rem; min-height: var(--button-height-compact);
padding: 0.45rem 0.55rem; padding: 0.45rem 0.55rem;
border: 1px solid var(--workbench-border-strong); border: 1px solid var(--workbench-border-strong);
border-radius: var(--button-radius-compact); border-radius: var(--button-radius-compact);
@@ -7202,17 +7231,17 @@ button.fleet-card-menu-trigger:focus-visible {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.4rem; gap: 0.35rem;
min-height: var(--button-height-compact); min-height: var(--button-height-compact);
min-width: 8.2rem; min-width: 8.2rem;
padding: 0.4rem 0.65rem; padding: 0.3rem 0.7rem;
border: 1px solid var(--button-danger-bg); border: 1px solid var(--button-danger-bg);
border-radius: var(--button-radius-compact); border-radius: var(--button-radius-compact);
color: var(--workbench-danger); color: var(--button-danger-text);
background: var(--workbench-danger-soft); background: var(--button-danger-bg);
font: inherit; font: inherit;
font-size: 0.72rem; font-size: 0.76rem;
font-weight: 800; font-weight: 750;
cursor: pointer; cursor: pointer;
} }
.fleet-messages-delete svg { .fleet-messages-delete svg {
@@ -7421,13 +7450,13 @@ button.fleet-card-menu-trigger:focus-visible {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.35rem; gap: 0.35rem;
padding: 0.3rem 0.65rem; padding: 0.3rem 0.7rem;
border: 1px solid var(--button-primary-bg); border: 1px solid var(--button-primary-bg);
border-radius: var(--button-radius-compact); border-radius: var(--button-radius-compact);
color: var(--workbench-mint); color: var(--workbench-mint);
background: var(--workbench-mint-soft); background: var(--workbench-mint-soft);
font-size: 0.68rem; font-size: 0.76rem;
font-weight: 800; font-weight: 750;
} }
.fleet-notifications-retry-all:hover:not(:disabled) { .fleet-notifications-retry-all:hover:not(:disabled) {
border-color: var(--button-primary-hover); border-color: var(--button-primary-hover);
@@ -7521,33 +7550,34 @@ button.fleet-card-menu-trigger:focus-visible {
gap: 0.8rem; gap: 0.8rem;
} }
.fleet-switch { .fleet-switch {
min-height: 2.75rem; min-height: var(--button-height-compact);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.4rem; gap: 0.35rem;
padding: 0.45rem 0.85rem; padding: 0.3rem 0.7rem;
border: 1px solid var(--workbench-border-strong); border: 1px solid var(--workbench-border-strong);
border-radius: var(--button-radius-compact); border-radius: var(--button-radius-compact);
color: var(--workbench-muted); color: var(--button-secondary-text);
background: var(--workbench-surface-muted); background: var(--button-secondary-bg);
font: inherit; font: inherit;
font-size: 0.78rem; font-size: 0.76rem;
font-weight: 800; font-weight: 750;
letter-spacing: 0; letter-spacing: 0;
cursor: pointer; cursor: pointer;
} }
.fleet-switch:hover { .fleet-switch:hover {
border-color: var(--workbench-mint); color: var(--button-secondary-hover-text);
color: var(--workbench-text); border-color: var(--button-secondary-hover-border);
background: var(--button-secondary-hover-bg);
} }
.fleet-switch svg { .fleet-switch svg {
width: 1.05rem; width: 1.05rem;
height: 1.05rem; height: 1.05rem;
} }
.fleet-switch[aria-pressed='true'] { .fleet-switch[aria-pressed='true'] {
border-color: var(--workbench-mint); border-color: var(--button-primary-bg);
background: var(--workbench-mint-soft); background: var(--workbench-mint-soft);
color: var(--workbench-mint); color: var(--button-primary-hover);
} }
.fleet-rate-limit-grid { .fleet-rate-limit-grid {
display: grid; display: grid;
apps/web/src/ui/button-system.test.ts
+97 -14
View File
@@ -28,7 +28,7 @@ function collectRules(css: string, rules: Rule[] = []): Rule[] {
index += 1; index += 1;
continue; continue;
} }
const selector = css.slice(preludeStart, index).trim(); const prelude = css.slice(preludeStart, index).trim();
let cursor = index + 1; let cursor = index + 1;
let depth = 1; let depth = 1;
while (cursor < css.length && depth > 0) { while (cursor < css.length && depth > 0) {
@@ -37,10 +37,13 @@ function collectRules(css: string, rules: Rule[] = []): Rule[] {
cursor += 1; cursor += 1;
} }
const body = css.slice(index + 1, cursor - 1); const body = css.slice(index + 1, cursor - 1);
if (selector.startsWith('@')) { if (prelude.startsWith('@')) {
collectRules(body, rules); collectRules(body, rules);
} else if (selector) { } else if (prelude) {
rules.push({ selector, declarations: parseDeclarations(body) }); for (const selector of prelude.split(',')) {
const trimmed = selector.replace(/\s+/g, ' ').trim();
if (trimmed) rules.push({ selector: trimmed, declarations: parseDeclarations(body) });
}
} }
preludeStart = cursor; preludeStart = cursor;
index = cursor; index = cursor;
@@ -75,9 +78,8 @@ async function loadStylesheet() {
return value.replace(/var\((--[a-z0-9-]+)\)/gi, (_, name: string) => tokens[name] ?? ''); return value.replace(/var\((--[a-z0-9-]+)\)/gi, (_, name: string) => tokens[name] ?? '');
}; };
const exact = (selector: string, property: string) => const exact = (selector: string, property: string) =>
rules.filter((rule) => rule.selector.replace(/\s+/g, ' ') === selector).at(-1)?.declarations[ rules.find((rule) => rule.selector === selector && rule.declarations[property] !== undefined)
property ?.declarations[property];
];
return { rules, tokens, wins, resolve, exact }; return { rules, tokens, wins, resolve, exact };
} }
@@ -155,13 +157,14 @@ describe('button system', () => {
expect(tokens['--field-radius']).toBe('10px'); expect(tokens['--field-radius']).toBe('10px');
expect(tokens['--field-border']).toBe('var(--line-strong)'); expect(tokens['--field-border']).toBe('var(--line-strong)');
expect(tokens['--field-focus-border']).toBe('var(--button-focus-ring)'); expect(tokens['--field-focus-border']).toBe('var(--button-focus-ring)');
expect(exact('button, input, select, textarea', 'border')).toBe( for (const selector of ['button', 'input', 'select', 'textarea']) {
'1px solid var(--field-border)', expect(exact(selector, 'border')).toBe('1px solid var(--field-border)');
); expect(exact(selector, 'background')).toBe('var(--field-bg)');
expect(exact('button, input, select, textarea', 'background')).toBe('var(--field-bg)'); }
expect(exact('input:focus, select:focus, textarea:focus', 'border-color')).toBe(
'var(--field-focus-border)', for (const selector of ['input:focus', 'select:focus', 'textarea:focus']) {
); expect(exact(selector, 'border-color')).toBe('var(--field-focus-border)');
}
}); });
it('normalises semantic surfaces in notification, log and message centres', async () => { it('normalises semantic surfaces in notification, log and message centres', async () => {
@@ -252,6 +255,86 @@ describe('button system', () => {
expect(stale).toEqual([]); expect(stale).toEqual([]);
}); });
it('keeps primitive actions aligned with the standard text-button scale', async () => {
const { rules, wins } = await loadStylesheet();
const standardControls = [
'.instance-context nav a',
'.dense-table th button',
'.organization-add',
'.fleet-card-admin-actions button',
'.fleet-messages-device-item',
'.maintenance-backup-actions a',
];
const stale = rules
.filter((rule) =>
standardControls.some((selector) => rule.selector.replace(/\s+/g, ' ').includes(selector)),
)
.filter((rule) => {
const declarations = Object.values(rule.declarations).join(' ');
const sizes = [rule.declarations['min-height'], rule.declarations.height].filter(
(value): value is string => value !== undefined,
);
return (
sizes.some((value) =>
['1.8rem', '2.1rem', '2.3rem', '2.35rem', '2.4rem'].includes(value),
) || declarations.includes('border-radius: 999px')
);
})
.map((rule) => rule.selector);
expect(stale).toEqual([]);
for (const selector of [
'button.primary-action',
'a.primary-action',
"[class*='animal-btn-middle']",
]) {
expect(wins(selector, 'min-height')).toBe('var(--button-height)');
expect(wins(selector, 'padding')).toBe('0.45rem 0.9rem');
expect(wins(selector, 'font-size')).toBe('0.82rem');
}
for (const selector of ['.organization-add', '.maintenance-backup-actions a']) {
expect(wins(selector, 'min-height')).toBe('var(--button-height-compact)');
expect(wins(selector, 'padding')).toBe('0.3rem 0.7rem');
expect(wins(selector, 'font-size')).toBe('0.76rem');
expect(wins(selector, 'border-radius')).toBe('var(--button-radius-compact)');
}
});
it('keeps grouped, segmented and workbench controls on the shared scale', async () => {
const { exact, wins } = await loadStylesheet();
const compactControls = [
'.fleet-group-tabs button',
'.segmented-control button',
'.identity-actions button',
'.fleet-notifications-retry-all',
'.fleet-messages-filter-chip',
'.fleet-messages-delete',
'.fleet-switch',
];
for (const selector of compactControls) {
expect(exact(selector, 'min-height')).toBe('var(--button-height-compact)');
expect(exact(selector, 'padding')).toBe('0.3rem 0.7rem');
expect(exact(selector, 'font-size')).toBe('0.76rem');
}
// Small touch surfaces deliberately promote panel controls to the standard height.
expect(wins('.identity-actions button', 'min-height')).toBe('var(--button-height)');
expect(wins('.fleet-group-tabs button', 'border-radius')).toBe('var(--button-radius-compact)');
expect(wins('.workbench-tabs button', 'min-height')).toBe('var(--button-height-large)');
});
it('keeps privacy toggles on the shared icon-button target', async () => {
const { wins } = await loadStylesheet();
expect(wins('.fleet-phone-privacy-toggle', 'width')).toBe('var(--icon-button-size)');
expect(wins('.fleet-phone-privacy-toggle', 'height')).toBe('var(--icon-button-size)');
expect(wins('.fleet-phone-privacy-toggle', 'border-radius')).toBe('var(--button-radius)');
});
it('keeps workbench text and focus indicators on the accessible brand scale', async () => { it('keeps workbench text and focus indicators on the accessible brand scale', async () => {
const { tokens, resolve } = await loadStylesheet(); const { tokens, resolve } = await loadStylesheet();