feat: unify cream button system
This commit is contained in:
@@ -76,6 +76,43 @@ describe('unified task due display', () => {
|
||||
})
|
||||
})
|
||||
|
||||
describe('approved cream solid button system', () => {
|
||||
it('gives semantic action buttons one consistent 44px cream material contract', () => {
|
||||
expect(css).toContain(':is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button){min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 17px;border-radius:10px;font-size:13px;font-weight:700;line-height:1;white-space:nowrap;transition:transform .14s ease,background-color .14s ease,border-color .14s ease,box-shadow .14s ease,color .14s ease}')
|
||||
expect(css).toContain(':is(.primary,.primary-small){border:1px solid var(--accent);background:var(--accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 4px 10px rgba(241,90,41,.20)}')
|
||||
expect(css).toContain(':is(.soft-button,.secondary,.restore,.file-button){border:1px solid #ddd0c0;background:#fffaf3;color:#51483f;box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(83,62,42,.06)}')
|
||||
expect(css).toContain('.danger-button{border:1px solid #e2b7ac;background:#fff8f5;color:#b83c2c;box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(105,48,34,.05)}')
|
||||
})
|
||||
|
||||
it('provides restrained interaction, focus, and disabled states without resizing buttons', () => {
|
||||
expect(css).toContain(':is(.primary,.primary-small):hover:not(:disabled){background:#dd4b1e;border-color:#dd4b1e}')
|
||||
expect(css).toContain(':is(.soft-button,.secondary,.restore,.file-button):hover:not(:disabled):not(.disabled){background:#f8eddf;border-color:#d5c5b2}')
|
||||
expect(css).toContain(':is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button):active:not(:disabled):not(.disabled){transform:translateY(1px) scale(.985)}')
|
||||
expect(css).toContain(':is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button):focus-visible{outline:3px solid rgba(241,90,41,.24);outline-offset:3px}')
|
||||
expect(css).toContain(':is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button):disabled,.file-button.disabled{background:#ebe2d8;border-color:#ded3c7;color:#aaa095;box-shadow:none;cursor:not-allowed;opacity:1}')
|
||||
expect(css).toContain('main:has(>.mvp-view .settings-sections) :is(.settings-data>.settings-row:first-of-type .soft-button:disabled,.backup-preflight .danger-button:disabled,.password-form .primary-small:disabled){background:#ebe2d8;border-color:#ded3c7;color:#aaa095;box-shadow:none;opacity:1}')
|
||||
})
|
||||
|
||||
it('uses a real disabled file-picker button and keeps its input out of layout', () => {
|
||||
expect(mvpPanel).toContain('function openRestoreFilePicker()')
|
||||
expect(mvpPanel).toContain('<button type="button" class="file-button" :disabled="backupBusy" @click="openRestoreFilePicker"><ArchiveRestore />选择文件</button>')
|
||||
expect(mvpPanel).toContain('<input ref="restoreInput" class="restore-file-input" type="file" tabindex="-1" aria-hidden="true"')
|
||||
expect(css).toContain('.restore-file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}')
|
||||
expect(mvpPanel).not.toContain('<label class="file-button"')
|
||||
expect(css).not.toContain('.task-compose-sheet button:disabled{opacity:.45')
|
||||
expect(css).not.toContain('.pager button:disabled{opacity:.4')
|
||||
expect(css).not.toContain('.purge-list-dialog button:disabled{opacity:.62')
|
||||
})
|
||||
|
||||
it('keeps special-purpose controls outside the semantic action material', () => {
|
||||
expect(css).toContain('.unified-fab{display:grid;place-items:center;position:fixed;z-index:60;')
|
||||
expect(css).toContain('width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--accent)')
|
||||
expect(css).toContain('.calendar-picker__header button{width:44px;height:44px}')
|
||||
expect(css).toContain('.calendar-picker__grid button{min-height:44px}')
|
||||
expect(css).not.toContain('button:not(')
|
||||
})
|
||||
})
|
||||
|
||||
describe('mobile navigation styles', () => {
|
||||
it('renames the bottom More tab to a direct Settings tab', () => {
|
||||
expect(app).not.toContain('aria-controls="mobile-more-menu"')
|
||||
@@ -143,8 +180,8 @@ describe('approved Settings 01 paper ledger', () => {
|
||||
})
|
||||
|
||||
it('keeps controls and password errors aligned with the approved form contract', () => {
|
||||
expect(css).toContain('main:has(>.mvp-view .settings-sections) :is(.soft-button,.primary-small,.danger-button,.file-button){min-height:44px;border-radius:9px;border-color:#dcd2c4;background:#fffdf9}')
|
||||
expect(css).toContain('main:has(>.mvp-view .settings-sections) :is(.settings-data>.settings-row:first-of-type .soft-button,.backup-preflight .danger-button,.password-form .primary-small){background:#f15a29;border-color:#f15a29;color:#fff}')
|
||||
expect(css).toContain('main:has(>.mvp-view .settings-sections) :is(.soft-button,.primary-small,.danger-button,.file-button){min-height:44px;border-radius:10px}')
|
||||
expect(css).toContain('main:has(>.mvp-view .settings-sections) :is(.settings-data>.settings-row:first-of-type .soft-button,.backup-preflight .danger-button,.password-form .primary-small){background:#f15a29;border-color:#f15a29;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 4px 10px rgba(241,90,41,.20)}')
|
||||
expect(css).toContain('main:has(>.mvp-view .settings-sections) .danger-text{min-height:44px;border:0;background:transparent;color:var(--danger)}')
|
||||
expect(css).toContain('.password-form.settings-form{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px}')
|
||||
expect(css).toContain('.password-form.settings-form .inline-error{grid-column:1/-1;margin:0}')
|
||||
|
||||
Reference in New Issue
Block a user