fix(css): fix 10 design system violations in component classes

- .widget-title: font-bold -> font-semibold
- .repo-card: add shadow-sm
- .fab-menu-item: rounded-xl -> rounded-lg, shadow-md -> shadow-sm
- .p-category: hover border surface -> accent
- .widget: remove mb-4 (conflicts with space-y containers)
- Remove duplicate focus-visible system (outline vs ring)
- Remove duplicate time monospace rule
- .post-type-dropdown: prefers-color-scheme -> .dark class
- .save-later-btn/.share-post-btn: add dark mode variants

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
This commit is contained in:
Ricardo
2026-03-07 15:58:38 +01:00
parent c71a7f38a8
commit 2f442862af

View File

@@ -332,7 +332,7 @@
/* Category tags (post metadata pills) */
.p-category {
@apply inline-block px-2 py-0.5 text-xs bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 rounded border border-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-500 transition-colors;
@apply inline-block px-2 py-0.5 text-xs bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 rounded border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors;
}
/* Inline hashtags in post content — styled as subtle links, not pills */
@@ -358,7 +358,7 @@
/* GitHub components */
.repo-card {
@apply p-4 border border-surface-200 dark:border-surface-700 rounded-lg;
@apply p-4 border border-surface-200 dark:border-surface-700 rounded-lg shadow-sm;
}
.repo-meta {
@@ -391,11 +391,11 @@
/* Widget cards */
.widget {
@apply p-4 mb-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden;
@apply p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden;
}
.widget-title {
@apply font-bold text-lg mb-4;
@apply font-semibold text-lg mb-4;
}
/* Collapsible widget wrapper */
@@ -495,17 +495,6 @@
}
}
/* Focus states */
@layer base {
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
@apply outline-2 outline-offset-2 outline-accent-500;
}
}
/* Active states — subtle press feedback on buttons */
@layer base {
button:active:not(:disabled),
@@ -548,7 +537,7 @@
}
.fab-menu-item {
@apply flex items-center gap-3 px-4 py-3 rounded-xl bg-surface-50 dark:bg-surface-800 shadow-md hover:shadow-lg border border-surface-200 dark:border-surface-700 text-surface-700 dark:text-surface-200 hover:text-accent-600 dark:hover:text-accent-400 no-underline transition-all duration-150 text-sm font-medium;
@apply flex items-center gap-3 px-4 py-3 rounded-lg bg-surface-50 dark:bg-surface-800 shadow-sm border border-surface-200 dark:border-surface-700 text-surface-700 dark:text-surface-200 hover:text-accent-600 dark:hover:text-accent-400 no-underline transition-all duration-150 text-sm font-medium;
}
.fab-menu-divider {
@@ -568,13 +557,6 @@
}
}
/* Dates — monospace for technical texture (system.md: every <time> gets font-mono) */
@layer base {
time {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
}
/* Apply content-visibility to images and post items for performance */
@layer base {
/* Responsive typography */
@@ -907,6 +889,14 @@ body[data-indiekit-auth="true"] .save-later-btn:hover {
pointer-events: none;
}
.dark body[data-indiekit-auth="true"] .save-later-btn {
color: #9ca3af;
}
.dark body[data-indiekit-auth="true"] .save-later-btn:hover {
border-color: #4b5563;
color: #60a5fa;
}
/* Share Post buttons — hidden until auth confirmed */
.share-post-btn {
display: none;
@@ -931,6 +921,14 @@ body[data-indiekit-auth="true"] .share-post-btn:hover {
color: #10b981;
}
.dark body[data-indiekit-auth="true"] .share-post-btn {
color: #9ca3af;
}
.dark body[data-indiekit-auth="true"] .share-post-btn:hover {
border-color: #4b5563;
color: #10b981;
}
/* Post type dropdown */
.post-type-dropdown {
display: none;
@@ -970,17 +968,15 @@ body[data-indiekit-auth="true"] .share-post-btn:hover {
color: #10b981;
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.post-type-dropdown {
/* Dark mode — class-based (matches site's darkMode: "class" config) */
.dark .post-type-dropdown {
background: #1f2937;
border-color: #374151;
}
.post-type-dropdown-item {
.dark .post-type-dropdown-item {
color: #d1d5db;
}
.post-type-dropdown-item:hover {
.dark .post-type-dropdown-item:hover {
background: #374151;
color: #34d399;
}
}