Buttons: one definition, aligned to the design system — plus local prior-art recall #94

Merged
bvandeusen merged 12 commits from dev into main 2026-08-02 18:50:04 -04:00
17 changed files with 25 additions and 25 deletions
Showing only changes of commit f491b6d7b9 - Show all commits
+2 -2
View File
@@ -344,7 +344,7 @@
} }
.btn-generate { .btn-generate {
padding: 0.4rem 0.9rem; padding: 0.4rem 0.9rem;
background: var(--color-primary); background: var(--color-action-primary);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
@@ -547,7 +547,7 @@
z-index: 100; z-index: 100;
transform: translateX(-50%); transform: translateX(-50%);
padding: 0.3rem 0.75rem; padding: 0.3rem 0.75rem;
background: var(--color-primary); background: var(--color-action-primary);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
+1 -1
View File
@@ -395,7 +395,7 @@ onMounted(loadVersions);
.btn-restore { .btn-restore {
padding: 0.45rem 1rem; padding: 0.45rem 1rem;
background: var(--color-primary); background: var(--color-action-primary);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
+1 -1
View File
@@ -311,7 +311,7 @@ onMounted(loadLogs);
.btn-log-save { .btn-log-save {
margin-left: auto; margin-left: auto;
padding: 0.3rem 0.75rem; padding: 0.3rem 0.75rem;
background: var(--color-primary); background: var(--color-action-primary);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
@@ -236,7 +236,7 @@ function restore() {
.vh-btn-back:hover { border-color: var(--color-primary); color: var(--color-primary); } .vh-btn-back:hover { border-color: var(--color-primary); color: var(--color-primary); }
.vh-btn-restore { .vh-btn-restore {
background: var(--color-primary); background: var(--color-action-primary);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
padding: 0.25rem 0.6rem; padding: 0.25rem 0.6rem;
@@ -670,7 +670,7 @@ defineExpose({ reload: loadProjectNotes });
.new-note-input:focus { outline: none; } .new-note-input:focus { outline: none; }
.btn-confirm { .btn-confirm {
background: var(--color-primary); background: var(--color-action-primary);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
border: none; border: none;
border-radius: 4px; border-radius: 4px;
@@ -397,7 +397,7 @@ defineExpose({ reload: loadAll });
.task-add-input:focus { outline: none; border-color: var(--color-primary); } .task-add-input:focus { outline: none; border-color: var(--color-primary); }
.btn-add { .btn-add {
background: var(--color-primary); background: var(--color-action-primary);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
border: none; border: none;
border-radius: 5px; border-radius: 5px;
+1 -1
View File
@@ -140,7 +140,7 @@ async function handleSubmit() {
.btn-submit { .btn-submit {
width: 100%; width: 100%;
padding: 0.6rem; padding: 0.6rem;
background: var(--color-primary); background: var(--color-action-primary);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
+1 -1
View File
@@ -179,7 +179,7 @@ function loginWithOAuth() {
.btn-submit { .btn-submit {
width: 100%; width: 100%;
padding: 0.6rem; padding: 0.6rem;
background: var(--color-primary); background: var(--color-action-primary);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
+1 -1
View File
@@ -748,7 +748,7 @@ onUnmounted(() => assist.clearSelection());
cursor: pointer; cursor: pointer;
font-family: inherit; font-family: inherit;
} }
.btn-link-all:hover { background: var(--color-primary); color: var(--fs-text-on-action); } .btn-link-all:hover { background: var(--color-action-primary); color: var(--fs-text-on-action); }
.link-suggest-list { .link-suggest-list {
display: flex; display: flex;
+4 -4
View File
@@ -326,8 +326,8 @@ function overallPct(project: Project): { total: number; pct: number } {
.empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.3; } .empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.3; }
.empty-title { font-size: 1rem; font-weight: 500; color: var(--color-text-secondary); margin: 0 0 0.35rem; } .empty-title { font-size: 1rem; font-weight: 500; color: var(--color-text-secondary); margin: 0 0 0.35rem; }
.empty-sub { font-size: 0.85rem; margin: 0 0 1rem; } .empty-sub { font-size: 0.85rem; margin: 0 0 1rem; }
.empty-action { display: inline-block; padding: 0.4rem 1rem; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); color: var(--color-primary); background: none; cursor: pointer; font-size: 0.85rem; transition: background 0.15s, color 0.15s; } .empty-action { display: inline-block; padding: 0.4rem 1rem; border: 1px solid var(--color-action-primary); border-radius: var(--radius-sm); color: var(--color-action-primary); background: none; cursor: pointer; font-size: 0.85rem; transition: background 0.15s, color 0.15s; }
.empty-action:hover { background: var(--color-primary); color: var(--fs-text-on-action); } .empty-action:hover { background: var(--color-action-primary); color: var(--fs-text-on-action); }
.skeleton-card { .skeleton-card {
height: 140px; height: 140px;
@@ -578,8 +578,8 @@ function overallPct(project: Project): { total: number; pct: number } {
background: var(--color-bg); background: var(--color-bg);
} }
.modal-btn-primary { .modal-btn-primary {
background: var(--color-primary); background: var(--color-action-primary);
border-color: var(--color-primary); border-color: var(--color-action-primary);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
} }
.modal-btn-primary:hover:not(:disabled) { .modal-btn-primary:hover:not(:disabled) {
+2 -2
View File
@@ -1224,7 +1224,7 @@ async function confirmDelete() {
cursor: pointer; cursor: pointer;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
} }
.ms-plan-actions .btn-primary { background: var(--color-primary); color: var(--fs-text-on-action); border-color: var(--color-primary); } .ms-plan-actions .btn-primary { background: var(--color-action-primary); color: var(--fs-text-on-action); border-color: var(--color-action-primary); }
.ms-plan-actions .btn-primary:disabled { opacity: 0.6; cursor: default; } .ms-plan-actions .btn-primary:disabled { opacity: 0.6; cursor: default; }
.ms-plan-actions .btn-secondary { background: var(--color-bg-card); color: var(--color-text); } .ms-plan-actions .btn-secondary { background: var(--color-bg-card); color: var(--color-text); }
@@ -1393,7 +1393,7 @@ async function confirmDelete() {
line-height: 1; line-height: 1;
} }
.task-card:hover .task-advance-btn { opacity: 1; } .task-card:hover .task-advance-btn { opacity: 1; }
.task-advance-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--fs-text-on-action); } .task-advance-btn:hover { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--fs-text-on-action); }
.task-advance-btn--done:hover { background: var(--color-success, #22c55e); border-color: var(--color-success, #22c55e); color: var(--fs-text-on-action); } .task-advance-btn--done:hover { background: var(--color-success, #22c55e); border-color: var(--color-success, #22c55e); color: var(--fs-text-on-action); }
.task-advance-btn:disabled { opacity: 0.4; cursor: default; } .task-advance-btn:disabled { opacity: 0.4; cursor: default; }
+1 -1
View File
@@ -250,7 +250,7 @@ async function handleSubmit() {
.btn-submit { .btn-submit {
width: 100%; width: 100%;
padding: 0.6rem; padding: 0.6rem;
background: var(--color-primary); background: var(--color-action-primary);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
+1 -1
View File
@@ -219,7 +219,7 @@ async function handleSubmit() {
.btn-submit { .btn-submit {
width: 100%; width: 100%;
padding: 0.6rem; padding: 0.6rem;
background: var(--color-primary); background: var(--color-action-primary);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
+1 -1
View File
@@ -198,7 +198,7 @@ async function handleSubmit() {
.btn-submit { .btn-submit {
width: 100%; width: 100%;
padding: 0.6rem; padding: 0.6rem;
background: var(--color-primary); background: var(--color-action-primary);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
+3 -3
View File
@@ -654,16 +654,16 @@ function usageTitle(s: SnippetListItem): string {
.empty-action { .empty-action {
display: inline-block; display: inline-block;
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
border: 1px solid var(--color-primary); border: 1px solid var(--color-action-primary);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
color: var(--color-primary); color: var(--color-action-primary);
background: none; background: none;
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.85rem;
transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s;
} }
.empty-action:hover { .empty-action:hover {
background: var(--color-primary); background: var(--color-action-primary);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
} }
+1 -1
View File
@@ -970,7 +970,7 @@ useEditorGuards(dirty, save);
.subtask-input:focus { outline: none; border-color: var(--color-primary); } .subtask-input:focus { outline: none; border-color: var(--color-primary); }
.btn-subtask-confirm { .btn-subtask-confirm {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
background: var(--color-primary); background: var(--color-action-primary);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
+2 -2
View File
@@ -330,7 +330,7 @@ function formatDate(iso: string): string {
} }
.btn-invite { .btn-invite {
padding: 0.45rem 1rem; padding: 0.45rem 1rem;
background: var(--color-primary); background: var(--color-action-primary);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
@@ -394,7 +394,7 @@ function formatDate(iso: string): string {
cursor: default; cursor: default;
} }
.btn-toggle-open { .btn-toggle-open {
background: var(--color-primary); background: var(--color-action-primary);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
} }
.btn-toggle-open:hover:not(:disabled) { .btn-toggle-open:hover:not(:disabled) {