giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

fix: design system audit — font-mono dates, focus-visible states, domain color straggler, shadow standardization

Browse Source 
P1: Global font-mono on all <time> elements via @layer base CSS rule (covers 43 dates).
P2: Focus-visible states for buttons, inputs, links via CSS (covers 177 elements, WCAG 2.4.7).
P3: listening.njk "All" tab accent-600 → purple-600 (Music domain).
P4: .post-type-dropdown custom box-shadow → shadow-sm equivalent.

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
This commit is contained in:
Ricardo
2026-03-04 17:29:50 +01:00
parent a7265bc7ce
commit c766a981c1
2 changed files with 34 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
css/tailwind.css
View File

@@ -108,6 +108,38 @@
body {
@apply bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-surface-100;
}
/* P1: Date typography — all <time> elements get monospace for technical texture */
time {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/* P2: Focus-visible states — keyboard-only focus rings for accessibility (WCAG 2.4.7) */
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
@apply outline-none ring-2 ring-amber-500/70 ring-offset-2 ring-offset-surface-50 rounded-sm;
}
.dark button:focus-visible,
.dark [role="button"]:focus-visible,
.dark summary:focus-visible {
@apply ring-offset-surface-900;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
@apply outline-none ring-2 ring-amber-500/70 border-transparent;
}
a:focus-visible {
@apply outline-none ring-2 ring-amber-500/70 ring-offset-1 ring-offset-surface-50 rounded-sm;
}
.dark a:focus-visible {
@apply ring-offset-surface-900;
}
}
/* Layout styles */
@@ -888,7 +920,7 @@ body[data-indiekit-auth="true"] .share-post-btn:hover {
background: white;
border: 1px solid #e5e7eb;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* shadow-sm */
z-index: 50;
min-width: 120px;
overflow: hidden;

2
listening.njk
View File

@@ -23,7 +23,7 @@ withSidebar: true
<div class="flex gap-2 mb-8 flex-wrap">
<button
@click="activeSource = 'all'"
:class="activeSource === 'all' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
:class="activeSource === 'all' ? 'bg-purple-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
class="px-4 py-2 rounded-full text-sm font-medium transition-colors"
>
All Sources