fix(frontend): post-code-review NITs — btn-ink uses @apply bg-slab, unify New engagement label

- btn-ink: replace inline background-color #111827 with @apply bg-slab (and add
  slab-hover token #1f2937 for the hover state) so the token system is consistent
- EngagementsListPage: header button "+ New" → "+ New engagement" to match
  empty-state CTA label

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Knacky
2026-05-27 20:39:01 +02:00
parent 9964d058f4
commit fc530af78b
3 changed files with 4 additions and 4 deletions

View File

@@ -42,7 +42,7 @@ export function EngagementsListPage(): JSX.Element {
</div> </div>
{canEditEngagements ? ( {canEditEngagements ? (
<Link to="/engagements/new" className="btn-primary"> <Link to="/engagements/new" className="btn-primary">
<Plus size={14} aria-hidden /> New <Plus size={14} aria-hidden /> New engagement
</Link> </Link>
) : null} ) : null}
</header> </header>

View File

@@ -80,11 +80,10 @@
/* btn-ink uses fixed dark slab so it doesn't invert in dark mode */ /* btn-ink uses fixed dark slab so it doesn't invert in dark mode */
.btn-ink { .btn-ink {
@apply inline-flex items-center justify-center gap-xs text-white uppercase tracking-[0.7px] font-semibold text-[14px] leading-[1.4] rounded-md px-xl py-sm h-11 transition-colors; @apply inline-flex items-center justify-center gap-xs bg-slab text-white uppercase tracking-[0.7px] font-semibold text-[14px] leading-[1.4] rounded-md px-xl py-sm h-11 transition-colors;
background-color: #111827;
} }
.btn-ink:hover { .btn-ink:hover {
background-color: #1f2937; @apply bg-slab-hover;
} }
.btn-ink:disabled { .btn-ink:disabled {
@apply bg-steel cursor-not-allowed; @apply bg-steel cursor-not-allowed;

View File

@@ -36,6 +36,7 @@ const config: Config = {
graphite: 'var(--color-graphite)', graphite: 'var(--color-graphite)',
// Fixed dark slab — never inverts in dark mode (utility strip, footer, dark bands) // Fixed dark slab — never inverts in dark mode (utility strip, footer, dark bands)
slab: '#111827', slab: '#111827',
'slab-hover': '#1f2937',
'slab-text': '#f9fafb', 'slab-text': '#f9fafb',
'slab-muted': '#6b7280', 'slab-muted': '#6b7280',
// Semantic / decorative — fixed (not themeable) // Semantic / decorative — fixed (not themeable)