diff --git a/frontend/src/assets/theme.css b/frontend/src/assets/theme.css index 3a000e9..c4d7d9d 100644 --- a/frontend/src/assets/theme.css +++ b/frontend/src/assets/theme.css @@ -12,6 +12,13 @@ file used to read, and it is deliberate: the light palette was never specified by any rule, so it is recorded as a departure rather than as the default. + The -fg tokens are a badge's TEXT colour, added because the ladder used its + raw hue as text on a 12% tint of the same hue — measured 1.60-2.97:1 on the + dark palette against the kit's AA floor of 4.5. Each is the hue mixed toward + --fs-text-primary until it clears 4.5:1 worst-case over surface-raised and + surface-hover in BOTH modes. Mixing toward that token is what makes one + declaration cover both: it inverts, so the text follows the mode. + Only 12 tokens differ between modes. Everything else — spacing, type, motion, radius, and every derived colour — is stated once, because a value built with var() resolves where it is USED, not where it is written. @@ -78,10 +85,13 @@ /* priority */ --fs-priority-low: var(--fs-info); --fs-priority-low-bg: color-mix(in srgb, var(--fs-priority-low) 12%, transparent); + --fs-priority-low-fg: color-mix(in srgb, var(--fs-priority-low) 45%, var(--fs-text-primary)); /* Badge TEXT for low priority — the readable partner of the -bg tint */ --fs-priority-medium: var(--fs-warning); --fs-priority-medium-bg: color-mix(in srgb, var(--fs-priority-medium) 12%, transparent); + --fs-priority-medium-fg: color-mix(in srgb, var(--fs-priority-medium) 55%, var(--fs-text-primary)); /* Badge TEXT for medium priority */ --fs-priority-high: var(--fs-error); --fs-priority-high-bg: color-mix(in srgb, var(--fs-priority-high) 12%, transparent); + --fs-priority-high-fg: color-mix(in srgb, var(--fs-priority-high) 55%, var(--fs-text-primary)); /* Badge TEXT for high priority */ /* radius */ --fs-radius-sm: 4px; /* pills, tags, code spans */ @@ -116,12 +126,16 @@ /* status */ --fs-status-todo: var(--fs-border-color); --fs-status-todo-bg: color-mix(in srgb, var(--fs-status-todo) 12%, transparent); + --fs-status-todo-fg: color-mix(in srgb, var(--fs-status-todo) 40%, var(--fs-text-primary)); /* Badge TEXT for a not-started task */ --fs-status-in-progress: var(--fs-accent); --fs-status-in-progress-bg: color-mix(in srgb, var(--fs-status-in-progress) 12%, transparent); + --fs-status-in-progress-fg: color-mix(in srgb, var(--fs-status-in-progress) 45%, var(--fs-text-primary)); /* Badge TEXT for a task underway */ --fs-status-done: var(--fs-success); --fs-status-done-bg: color-mix(in srgb, var(--fs-status-done) 12%, transparent); + --fs-status-done-fg: color-mix(in srgb, var(--fs-status-done) 50%, var(--fs-text-primary)); /* Badge TEXT for a completed task */ --fs-overdue: var(--fs-error); --fs-status-cancelled: var(--fs-text-tertiary); /* set aside, not failed */ + --fs-status-cancelled-fg: color-mix(in srgb, var(--fs-status-cancelled) 60%, var(--fs-text-primary)); /* Badge TEXT for a cancelled task */ /* surface */ --fs-surface-page: #14171A; /* page bg, deepest surface */ diff --git a/frontend/src/components/KindBadge.vue b/frontend/src/components/KindBadge.vue new file mode 100644 index 0000000..3622a96 --- /dev/null +++ b/frontend/src/components/KindBadge.vue @@ -0,0 +1,79 @@ + + + + + diff --git a/frontend/src/components/PriorityBadge.vue b/frontend/src/components/PriorityBadge.vue index 22d732f..a370c85 100644 --- a/frontend/src/components/PriorityBadge.vue +++ b/frontend/src/components/PriorityBadge.vue @@ -3,6 +3,8 @@ import type { TaskPriority } from "@/types/task"; const props = defineProps<{ priority: TaskPriority; + /** Dense surfaces — see StatusBadge. */ + compact?: boolean; }>(); const labels: Record = { @@ -16,7 +18,7 @@ const labels: Record = {