knacky/mimic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(design): refresh tailwind tokens for brutalist terminal aesthetic

Browse Source
This commit is contained in:
Knacky
2026-06-09 18:38:43 +02:00
parent 6c05cc2e11
commit 64da94f10d
2 changed files with 66 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/styles/index.css
View File

@@ -19,9 +19,11 @@
--color-ink-on: #ffffff;
--color-charcoal: #3d3d3d;
--color-graphite: #636363;
/* DESIGN.md: body line-height 1.4 when substituting Inter */
font-size: 16.5px;
/* Semantic status tokens — WCAG AA on canvas and slab surfaces */
--color-success: #16a34a;
--color-success-soft: #dcfce7;
--color-warn: #d97706;
--color-warn-soft: #fef3c7;
}
/* Dark mode overrides */
@@ -38,6 +40,11 @@
--color-ink-on: #111827;
--color-charcoal: #d1d5db;
--color-graphite: #9ca3af;
/* Semantic status tokens — dark variants, WCAG AA on #111827 slab */
--color-success: #22c55e;
--color-success-soft: #14532d;
--color-warn: #f59e0b;
--color-warn-soft: #78350f;
}
html,
@@ -48,6 +55,8 @@
body {
@apply bg-canvas text-ink font-sans antialiased;
font-size: 16px;
line-height: 1.4;
font-feature-settings: 'cv11', 'ss01';
}
@@ -57,19 +66,20 @@
h4,
h5,
h6 {
line-height: 1;
line-height: 1.1;
font-weight: 500;
}
}
@layer components {
/*
* DESIGN.md component recipes.
* Buttons stay sharp (rounded-md = 4px); cards stay soft (rounded-xl = 16px).
* Terminal-SOC brutalist component recipes.
* border-radius: 0 everywhere except .badge-pill-* (status pills only).
* No transition-* on any interactive surface.
*/
.btn-primary {
@apply inline-flex items-center justify-center gap-xs bg-primary 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-primary text-white uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
}
.btn-primary:hover {
@apply bg-primary-deep;
@@ -78,19 +88,19 @@
@apply bg-steel cursor-not-allowed;
}
/* btn-ink uses fixed dark slab so it doesn't invert in dark mode */
/* btn-ink: fixed dark slab — does not invert in dark mode */
.btn-ink {
@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;
@apply inline-flex items-center justify-center gap-xs bg-slab text-slab-text uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
}
.btn-ink:hover {
@apply bg-paper;
@apply opacity-80;
}
.btn-ink:disabled {
@apply bg-steel cursor-not-allowed;
}
.btn-outline {
@apply inline-flex items-center justify-center gap-xs bg-canvas text-primary border border-primary 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-canvas text-primary border border-primary uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
}
.btn-outline:hover {
@apply bg-primary-soft;
@@ -100,37 +110,41 @@
}
.btn-outline-ink {
@apply inline-flex items-center justify-center gap-xs bg-canvas text-ink border border-ink 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-canvas text-ink border border-ink uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
}
.btn-outline-ink:hover {
@apply bg-cloud;
}
.btn-text-link {
@apply inline-flex items-center gap-xxs text-primary font-medium text-[16px] leading-[1.38] underline-offset-2 hover:underline;
@apply inline-flex items-center gap-xxs text-primary font-medium text-[16px] leading-[1.4] underline-offset-2 hover:underline;
}
.text-input {
@apply block w-full bg-canvas text-ink rounded-md border border-steel px-md py-sm h-11 text-[16px] leading-[1.38] focus:outline-none focus:border-ink;
@apply block w-full bg-canvas text-ink rounded-none border border-steel px-md py-sm h-11 text-[16px] leading-[1.4] focus:outline-none focus:border-primary;
}
/* Panel / card — hairline border, no shadow, no radius */
.card-product {
@apply bg-canvas rounded-xl p-xl shadow-soft-lift;
}
.dark .card-product {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
@apply bg-paper border border-hairline rounded-none p-md;
}
/* Fixed-color modal backdrop — must not use themed ink (inverts in dark mode) */
/* Fixed modal backdrop — must not use themed ink (inverts in dark mode) */
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.6);
}
/* Status pill badges — ONLY surfaces with rounded-pill */
.badge-pill-ink {
@apply inline-flex items-center bg-ink text-white rounded-lg px-3 py-[6px] text-[14px] leading-[1.3] font-medium;
@apply inline-flex items-center bg-ink text-white rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium;
}
.badge-pill-outline {
@apply inline-flex items-center bg-canvas text-ink border border-ink rounded-lg px-3 py-[6px] text-[14px] leading-[1.3] font-medium;
@apply inline-flex items-center bg-canvas text-ink border border-ink rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium;
}
/* MITRE technique tags — angular, not pills */
.tag-mitre {
@apply inline-flex items-center bg-cloud text-ink border border-hairline rounded-none px-2 py-[2px] font-mono text-[12px] leading-[1.33];
}
}