feat: styles

2026-04-01 16:03:55 +02:00
parent 0642d0f894
commit a0a5f18128
8 changed files with 198 additions and 101 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "frontend",
+  "name": "micronomicon",
  "version": "0.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "frontend",
+      "name": "micronomicon",
      "version": "0.0.0",
      "dependencies": {
        "@base-ui/react": "^1.3.0",
@@ -18,6 +18,7 @@
        "@codemirror/view": "^6.40.0",
        "@dagrejs/dagre": "^3.0.0",
        "@fontsource-variable/geist": "^5.2.8",
+        "@fontsource-variable/jetbrains-mono": "^5.2.8",
        "@tailwindcss/vite": "^4.2.2",
        "@xyflow/react": "^12.10.2",
        "class-variance-authority": "^0.7.1",
@@ -1077,6 +1078,15 @@
        "url": "https://github.com/sponsors/ayuhito"
      }
    },
+    "node_modules/@fontsource-variable/jetbrains-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+      "integrity": "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
    "node_modules/@hono/node-server": {
      "version": "1.19.12",
      "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.12.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
    "@codemirror/view": "^6.40.0",
    "@dagrejs/dagre": "^3.0.0",
    "@fontsource-variable/geist": "^5.2.8",
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
    "@tailwindcss/vite": "^4.2.2",
    "@xyflow/react": "^12.10.2",
    "class-variance-authority": "^0.7.1",
--- a/frontend/src/components/editor/PreviewPane.tsx
+++ b/frontend/src/components/editor/PreviewPane.tsx
@@ -42,7 +42,7 @@ export default function PreviewPane() {
            </span>
          )}
        </span>
-        <div className="flex gap-0.5 bg-muted rounded-md p-0.5">
+        <div className="flex gap-1">
          {tabs
            .filter((t) => t.show)
            .map((tab) => (
@@ -50,10 +50,10 @@ export default function PreviewPane() {
                key={tab.value}
                onClick={() => setPreviewMode(tab.value)}
                className={cn(
-                  "text-xs px-2 py-0.5 rounded transition-colors",
+                  "text-xs px-2 py-0.5 uppercase tracking-wider transition-all border-2",
                  previewMode === tab.value
-                    ? "bg-background text-foreground shadow-sm"
-                    : "text-muted-foreground hover:text-foreground",
+                    ? "bg-background text-foreground border-border"
+                    : "text-muted-foreground hover:text-foreground border-transparent",
                )}
              >
                {tab.label}
--- a/frontend/src/components/editor/ToolBar.tsx
+++ b/frontend/src/components/editor/ToolBar.tsx
@@ -1,5 +1,5 @@
 import { useRef, useState } from "react";
-import { BookOpen, ImagePlus } from "lucide-react";
+import { BookOpen, Upload } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -55,7 +55,7 @@ export default function ToolBar({
        <PopoverTrigger
          render={
            <button
-              className="inline-flex items-center justify-center gap-1.5 rounded-md text-xs font-medium h-8 px-3 border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors"
+              className="inline-flex items-center justify-center gap-1.5 text-xs font-medium h-8 px-3 border-2 border-border bg-background hover:bg-accent hover:text-accent-foreground transition-all uppercase tracking-wider "
              title="Insert example template"
            >
              <BookOpen className="h-3.5 w-3.5" />
@@ -152,10 +152,10 @@ function UploadImageButton({ onUploaded }: { onUploaded: (path: string) => void
      <button
        onClick={() => fileRef.current?.click()}
        disabled={uploading}
-        className="inline-flex items-center justify-center gap-1.5 rounded-md text-xs font-medium h-8 px-3 border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors disabled:opacity-50"
+        className="inline-flex items-center justify-center gap-1.5 text-xs font-medium h-8 px-3 border-2 border-border bg-background hover:bg-accent hover:text-accent-foreground transition-all uppercase tracking-wider  disabled:opacity-50"
        title="Upload image for embedding"
      >
-        <ImagePlus className="h-3.5 w-3.5" />
+        <Upload className="h-3.5 w-3.5" />
        <span>{uploading ? "Uploading…" : "Image"}</span>
      </button>
    </>
--- a/frontend/src/components/shared/NavBar.tsx
+++ b/frontend/src/components/shared/NavBar.tsx
@@ -43,7 +43,9 @@ export default function NavBar() {

  return (
    <nav className="flex items-center gap-1 px-4 h-12 border-b bg-card shrink-0">
-      <span className="font-bold mr-6 text-foreground">Micronomicon</span>
+      <span className="mr-6 text-primary font-bold tracking-widest" title="Micronomicon"
+        style={{ fontVariantLigatures: "none" }}
+      >╠═ MICRONOMICON ═╣</span>

      <NavLink to="/" end className={navLink}>
        Dashboard
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -49,6 +49,7 @@ function Button({
  return (
    <ButtonPrimitive
      data-slot="button"
+      data-variant={variant}
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
--- a/frontend/src/components/ui/table.tsx
+++ b/frontend/src/components/ui/table.tsx
@@ -31,7 +31,7 @@ function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
  return (
    <tbody
      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
+      className={cn("", className)}
      {...props}
    />
  )
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,13 +1,14 @@
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
-@import "@fontsource-variable/geist";
+@import "@fontsource-variable/jetbrains-mono";

@custom-variant dark (&:is(.dark *));

@theme inline {
-    --font-heading: var(--font-sans);
-    --font-sans: 'Geist Variable', sans-serif;
+    --font-heading: var(--font-mono);
+    --font-sans: 'JetBrains Mono Variable', 'Courier New', monospace;
+    --font-mono: 'JetBrains Mono Variable', 'Courier New', monospace;
    --color-sidebar-ring: var(--sidebar-ring);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -39,122 +40,204 @@
    --color-card: var(--card);
    --color-foreground: var(--foreground);
    --color-background: var(--background);
-    --radius-sm: calc(var(--radius) * 0.6);
-    --radius-md: calc(var(--radius) * 0.8);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) * 1.4);
-    --radius-2xl: calc(var(--radius) * 1.8);
-    --radius-3xl: calc(var(--radius) * 2.2);
-    --radius-4xl: calc(var(--radius) * 2.6);
+    --radius-sm: 0px;
+    --radius-md: 0px;
+    --radius-lg: 0px;
+    --radius-xl: 0px;
+    --radius-2xl: 0px;
+    --radius-3xl: 0px;
+    --radius-4xl: 0px;
 }

+/* ── Terracotta Light Theme ── */
 :root {
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
-    --radius: 0.625rem;
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
+    --background: oklch(0.94 0.02 55);
+    --foreground: oklch(0.18 0.03 45);
+    --card: oklch(0.91 0.025 55);
+    --card-foreground: oklch(0.18 0.03 45);
+    --popover: oklch(0.91 0.025 55);
+    --popover-foreground: oklch(0.18 0.03 45);
+    --primary: oklch(0.55 0.14 45);
+    --primary-foreground: oklch(0.95 0.02 55);
+    --secondary: oklch(0.86 0.03 55);
+    --secondary-foreground: oklch(0.18 0.03 45);
+    --muted: oklch(0.86 0.025 55);
+    --muted-foreground: oklch(0.45 0.04 45);
+    --accent: oklch(0.84 0.035 55);
+    --accent-foreground: oklch(0.18 0.03 45);
+    --destructive: oklch(0.5 0.2 25);
+    --border: oklch(0.6 0.08 45);
+    --input: oklch(0.78 0.04 55);
+    --ring: oklch(0.55 0.14 45);
+    --chart-1: oklch(0.55 0.14 45);
+    --chart-2: oklch(0.65 0.1 70);
+    --chart-3: oklch(0.5 0.08 30);
+    --chart-4: oklch(0.6 0.06 90);
+    --chart-5: oklch(0.4 0.04 45);
+    --radius: 0px;
+    --sidebar: oklch(0.90 0.025 55);
+    --sidebar-foreground: oklch(0.18 0.03 45);
+    --sidebar-primary: oklch(0.55 0.14 45);
+    --sidebar-primary-foreground: oklch(0.95 0.02 55);
+    --sidebar-accent: oklch(0.84 0.035 55);
+    --sidebar-accent-foreground: oklch(0.18 0.03 45);
+    --sidebar-border: oklch(0.6 0.08 45);
+    --sidebar-ring: oklch(0.55 0.14 45);
 }

+/* ── Black-Figure Dark Theme (primary) ──
+   Inspired by Greek pottery: black ground, terracotta figures, gold accents
+*/
 .dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
+    --background: oklch(0.12 0.015 45);
+    --foreground: oklch(0.72 0.08 55);
+    --card: oklch(0.16 0.02 45);
+    --card-foreground: oklch(0.72 0.08 55);
+    --popover: oklch(0.16 0.02 45);
+    --popover-foreground: oklch(0.72 0.08 55);
+    --primary: oklch(0.7 0.13 55);
+    --primary-foreground: oklch(0.12 0.015 45);
+    --secondary: oklch(0.22 0.025 45);
+    --secondary-foreground: oklch(0.7 0.08 55);
+    --muted: oklch(0.22 0.02 45);
+    --muted-foreground: oklch(0.5 0.05 55);
+    --accent: oklch(0.24 0.03 45);
+    --accent-foreground: oklch(0.72 0.08 55);
+    --destructive: oklch(0.55 0.18 25);
+    --border: oklch(0.38 0.06 45);
+    --input: oklch(0.26 0.03 45);
+    --ring: oklch(0.7 0.13 55);
+    --chart-1: oklch(0.7 0.13 55);
+    --chart-2: oklch(0.65 0.1 70);
+    --chart-3: oklch(0.55 0.08 30);
+    --chart-4: oklch(0.6 0.06 90);
+    --chart-5: oklch(0.45 0.04 45);
+    --sidebar: oklch(0.14 0.018 45);
+    --sidebar-foreground: oklch(0.72 0.08 55);
+    --sidebar-primary: oklch(0.7 0.13 55);
+    --sidebar-primary-foreground: oklch(0.12 0.015 45);
+    --sidebar-accent: oklch(0.24 0.03 45);
+    --sidebar-accent-foreground: oklch(0.72 0.08 55);
+    --sidebar-border: oklch(0.38 0.06 45);
+    --sidebar-ring: oklch(0.7 0.13 55);
 }

@layer base {
  * {
    @apply border-border outline-ring/50;
-    }
+  }
  body {
    @apply bg-background text-foreground;
-    }
+    font-size: 13px;
+    letter-spacing: -0.01em;
+  }
  html {
-    @apply font-sans;
-    }
+    @apply font-mono;
+  }

-  /* Dark-mode scrollbars */
+  /* Terracotta scrollbars */
  * {
    scrollbar-width: thin;
-    scrollbar-color: oklch(0.35 0 0) transparent;
+    scrollbar-color: oklch(0.35 0.05 45) transparent;
  }
  *::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+    width: 5px;
+    height: 5px;
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }
  *::-webkit-scrollbar-thumb {
-    background: oklch(0.35 0 0);
-    border-radius: 3px;
+    background: oklch(0.35 0.05 45);
+    border-radius: 0;
  }
  *::-webkit-scrollbar-thumb:hover {
-    background: oklch(0.45 0 0);
+    background: oklch(0.5 0.08 55);
  }
  *::-webkit-scrollbar-corner {
    background: transparent;
  }

-  .dark *::-webkit-scrollbar-thumb {
-    background: oklch(0.3 0 0);
+  /* Terracotta cursor */
+  .cm-cursor {
+    border-left-color: oklch(0.7 0.13 55) !important;
  }
-  .dark *::-webkit-scrollbar-thumb:hover {
-    background: oklch(0.4 0 0);
+
+  /* Bold console aesthetic */
+  button, [role="button"], [data-slot="button"] {
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-size: 11px;
+    cursor: pointer;
  }
-}
+
+  /* Ensure all interactive elements have pointer cursor */
+  a, [role="link"], [role="tab"], [role="option"],
+  [data-slot="popover-trigger"], [data-slot="toggle-group-item"],
+  [data-slot="alert-dialog-action"], [data-slot="alert-dialog-cancel"],
+  .cm-tooltip-autocomplete [role="option"] {
+    cursor: pointer;
+  }
+
+  nav {
+    border-bottom-width: 3px;
+  }
+
+  /* ── Dithered offset shadow ──
+     Simulates a stippled/dot-matrix shadow using multiple box-shadow
+     dots at alternating positions. Works even with overflow:auto.
+  */
+
+  /* Panels and containers — checkerboard dot shadow */
+  [data-slot="table-container"],
+  [data-slot="alert-dialog-content"],
+  [data-slot="popover-content"],
+  [data-slot="card"],
+  .panel-shadow {
+    border: 2px solid var(--border);
+    box-shadow:
+      3px 3px 0 0 var(--border),
+      5px 3px 0 0 transparent,
+      7px 3px 0 0 var(--border),
+      4px 4px 0 0 transparent,
+      6px 4px 0 0 var(--border),
+      3px 5px 0 0 var(--border),
+      5px 5px 0 0 transparent,
+      7px 5px 0 0 var(--border),
+      4px 6px 0 0 var(--border),
+      6px 6px 0 0 transparent;
+  }
+
+  /* Primary (default) buttons only — dithered shadow */
+  button[data-slot="button"][data-variant="default"] {
+    border: 2px solid var(--border);
+    box-shadow:
+      2px 2px 0 0 var(--border),
+      4px 2px 0 0 transparent,
+      6px 2px 0 0 var(--border),
+      3px 3px 0 0 transparent,
+      5px 3px 0 0 var(--border),
+      2px 4px 0 0 var(--border),
+      4px 4px 0 0 transparent,
+      6px 4px 0 0 var(--border);
+    transition: box-shadow 0.1s, transform 0.1s;
+  }
+  button[data-slot="button"][data-variant="default"]:active {
+    box-shadow: none;
+    transform: translate(2px, 2px);
+  }
+
+  /* All other buttons — no shadow */
+  button[data-slot="button"][data-variant="outline"],
+  button[data-slot="button"][data-variant="secondary"],
+  button[data-slot="button"][data-variant="ghost"],
+  button[data-slot="button"][data-variant="link"],
+  button[data-slot="button"][data-variant="destructive"] {
+    box-shadow: none !important;
+  }
+
+  /* Input fields */
+  input[data-slot="input"] {
+    border: 2px solid var(--border);
+  }
+}