diff --git a/extension/src/popup/styles.css b/extension/src/popup/styles.css index 897ceb9..7ebfa71 100644 --- a/extension/src/popup/styles.css +++ b/extension/src/popup/styles.css @@ -1508,3 +1508,45 @@ textarea { 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 6px 18px rgba(0, 0, 0, 0.35); } + +/* Phase 2B: button hierarchy. Existing .btn class kept for backwards + compatibility; .btn-primary and .btn-secondary express clearer intent + and are used in updated views. */ +.btn-primary { + background: var(--gold-base); + color: var(--bg-page); + border: none; + padding: 9px 14px; + font-size: 12px; + font-weight: 600; + border-radius: 6px; + font-family: inherit; + cursor: pointer; + letter-spacing: 0.3px; + display: inline-flex; + align-items: center; + gap: 8px; + transition: background-color 0.15s; +} +.btn-primary:hover { background: var(--gold-stroke); } +.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } +.btn-primary:focus-visible { + outline: none; + box-shadow: var(--focus-ring); +} + +.btn-secondary { + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.06); + color: var(--text-muted); + padding: 6px 12px; + font-size: 11px; + border-radius: 5px; + font-family: inherit; + cursor: pointer; +} +.btn-secondary:hover { border-color: rgba(255, 255, 255, 0.12); color: var(--text); } +.btn-secondary:focus-visible { + outline: none; + box-shadow: var(--focus-ring); +} diff --git a/extension/src/vault/vault.css b/extension/src/vault/vault.css index 2d63e40..08de923 100644 --- a/extension/src/vault/vault.css +++ b/extension/src/vault/vault.css @@ -1538,3 +1538,45 @@ textarea { 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 6px 18px rgba(0, 0, 0, 0.35); } + +/* Phase 2B: button hierarchy. Existing .btn class kept for backwards + compatibility; .btn-primary and .btn-secondary express clearer intent + and are used in updated views. */ +.btn-primary { + background: var(--gold-base); + color: var(--bg-page); + border: none; + padding: 9px 14px; + font-size: 12px; + font-weight: 600; + border-radius: 6px; + font-family: inherit; + cursor: pointer; + letter-spacing: 0.3px; + display: inline-flex; + align-items: center; + gap: 8px; + transition: background-color 0.15s; +} +.btn-primary:hover { background: var(--gold-stroke); } +.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } +.btn-primary:focus-visible { + outline: none; + box-shadow: var(--focus-ring); +} + +.btn-secondary { + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.06); + color: var(--text-muted); + padding: 6px 12px; + font-size: 11px; + border-radius: 5px; + font-family: inherit; + cursor: pointer; +} +.btn-secondary:hover { border-color: rgba(255, 255, 255, 0.12); color: var(--text); } +.btn-secondary:focus-visible { + outline: none; + box-shadow: var(--focus-ring); +}