dtoro/micronomicon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: styles

Browse Source
This commit is contained in:
authentik Default Admin
2026-04-01 16:03:55 +02:00
parent 0642d0f894
commit a0a5f18128
8 changed files with 198 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/package-lock.json generated
View File

@@ -1,11 +1,11 @@
{ {
"name": "frontend", "name": "micronomicon",
"version": "0.0.0", "version": "0.0.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "frontend", "name": "micronomicon",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@base-ui/react": "^1.3.0", "@base-ui/react": "^1.3.0",
@@ -18,6 +18,7 @@
"@codemirror/view": "^6.40.0", "@codemirror/view": "^6.40.0",
"@dagrejs/dagre": "^3.0.0", "@dagrejs/dagre": "^3.0.0",
"@fontsource-variable/geist": "^5.2.8", "@fontsource-variable/geist": "^5.2.8",
"@fontsource-variable/jetbrains-mono": "^5.2.8",
"@tailwindcss/vite": "^4.2.2", "@tailwindcss/vite": "^4.2.2",
"@xyflow/react": "^12.10.2", "@xyflow/react": "^12.10.2",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
@@ -1077,6 +1078,15 @@
"url": "https://github.com/sponsors/ayuhito" "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": { "node_modules/@hono/node-server": {
"version": "1.19.12", "version": "1.19.12",
"resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.12.tgz", "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.12.tgz",

1
frontend/package.json
View File

@@ -20,6 +20,7 @@
"@codemirror/view": "^6.40.0", "@codemirror/view": "^6.40.0",
"@dagrejs/dagre": "^3.0.0", "@dagrejs/dagre": "^3.0.0",
"@fontsource-variable/geist": "^5.2.8", "@fontsource-variable/geist": "^5.2.8",
"@fontsource-variable/jetbrains-mono": "^5.2.8",
"@tailwindcss/vite": "^4.2.2", "@tailwindcss/vite": "^4.2.2",
"@xyflow/react": "^12.10.2", "@xyflow/react": "^12.10.2",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",

8
frontend/src/components/editor/PreviewPane.tsx
View File

@@ -42,7 +42,7 @@ export default function PreviewPane() {
</span> </span>
)} )}
</span> </span>
<div className="flex gap-0.5 bg-muted rounded-md p-0.5"> <div className="flex gap-1">
{tabs {tabs
.filter((t) => t.show) .filter((t) => t.show)
.map((tab) => ( .map((tab) => (
@@ -50,10 +50,10 @@ export default function PreviewPane() {
key={tab.value} key={tab.value}
onClick={() => setPreviewMode(tab.value)} onClick={() => setPreviewMode(tab.value)}
className={cn( 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 previewMode === tab.value
? "bg-background text-foreground shadow-sm" ? "bg-background text-foreground border-border"
: "text-muted-foreground hover:text-foreground", : "text-muted-foreground hover:text-foreground border-transparent",
)} )}
> >
{tab.label} {tab.label}

8
frontend/src/components/editor/ToolBar.tsx
View File

@@ -1,5 +1,5 @@
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import { BookOpen, ImagePlus } from "lucide-react"; import { BookOpen, Upload } from "lucide-react";
import { toast } from "sonner"; import { toast } from "sonner";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@@ -55,7 +55,7 @@ export default function ToolBar({
<PopoverTrigger <PopoverTrigger
render={ render={
<button <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" title="Insert example template"
> >
<BookOpen className="h-3.5 w-3.5" /> <BookOpen className="h-3.5 w-3.5" />
@@ -152,10 +152,10 @@ function UploadImageButton({ onUploaded }: { onUploaded: (path: string) => void
<button <button
onClick={() => fileRef.current?.click()} onClick={() => fileRef.current?.click()}
disabled={uploading} 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" 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> <span>{uploading ? "Uploading…" : "Image"}</span>
</button> </button>
</> </>

4
frontend/src/components/shared/NavBar.tsx
View File

@@ -43,7 +43,9 @@ export default function NavBar() {
return ( return (
<nav className="flex items-center gap-1 px-4 h-12 border-b bg-card shrink-0"> <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}> <NavLink to="/" end className={navLink}>
Dashboard Dashboard

1
frontend/src/components/ui/button.tsx
View File

@@ -49,6 +49,7 @@ function Button({
return ( return (
<ButtonPrimitive <ButtonPrimitive
data-slot="button" data-slot="button"
data-variant={variant}
className={cn(buttonVariants({ variant, size, className }))} className={cn(buttonVariants({ variant, size, className }))}
{...props} {...props}
/> />

2
frontend/src/components/ui/table.tsx
View File

@@ -31,7 +31,7 @@ function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
return ( return (
<tbody <tbody
data-slot="table-body" data-slot="table-body"
className={cn("[&_tr:last-child]:border-0", className)} className={cn("", className)}
{...props} {...props}
/> />
) )

261
frontend/src/index.css
View File

@@ -1,13 +1,14 @@
@import "tailwindcss"; @import "tailwindcss";
@import "tw-animate-css"; @import "tw-animate-css";
@import "shadcn/tailwind.css"; @import "shadcn/tailwind.css";
@import "@fontsource-variable/geist"; @import "@fontsource-variable/jetbrains-mono";
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
@theme inline { @theme inline {
--font-heading: var(--font-sans); --font-heading: var(--font-mono);
--font-sans: 'Geist Variable', sans-serif; --font-sans: 'JetBrains Mono Variable', 'Courier New', monospace;
--font-mono: 'JetBrains Mono Variable', 'Courier New', monospace;
--color-sidebar-ring: var(--sidebar-ring); --color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border); --color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -39,122 +40,204 @@
--color-card: var(--card); --color-card: var(--card);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--color-background: var(--background); --color-background: var(--background);
--radius-sm: calc(var(--radius) * 0.6); --radius-sm: 0px;
--radius-md: calc(var(--radius) * 0.8); --radius-md: 0px;
--radius-lg: var(--radius); --radius-lg: 0px;
--radius-xl: calc(var(--radius) * 1.4); --radius-xl: 0px;
--radius-2xl: calc(var(--radius) * 1.8); --radius-2xl: 0px;
--radius-3xl: calc(var(--radius) * 2.2); --radius-3xl: 0px;
--radius-4xl: calc(var(--radius) * 2.6); --radius-4xl: 0px;
} }
/* ── Terracotta Light Theme ── */
:root { :root {
--background: oklch(1 0 0); --background: oklch(0.94 0.02 55);
--foreground: oklch(0.145 0 0); --foreground: oklch(0.18 0.03 45);
--card: oklch(1 0 0); --card: oklch(0.91 0.025 55);
--card-foreground: oklch(0.145 0 0); --card-foreground: oklch(0.18 0.03 45);
--popover: oklch(1 0 0); --popover: oklch(0.91 0.025 55);
--popover-foreground: oklch(0.145 0 0); --popover-foreground: oklch(0.18 0.03 45);
--primary: oklch(0.205 0 0); --primary: oklch(0.55 0.14 45);
--primary-foreground: oklch(0.985 0 0); --primary-foreground: oklch(0.95 0.02 55);
--secondary: oklch(0.97 0 0); --secondary: oklch(0.86 0.03 55);
--secondary-foreground: oklch(0.205 0 0); --secondary-foreground: oklch(0.18 0.03 45);
--muted: oklch(0.97 0 0); --muted: oklch(0.86 0.025 55);
--muted-foreground: oklch(0.556 0 0); --muted-foreground: oklch(0.45 0.04 45);
--accent: oklch(0.97 0 0); --accent: oklch(0.84 0.035 55);
--accent-foreground: oklch(0.205 0 0); --accent-foreground: oklch(0.18 0.03 45);
--destructive: oklch(0.577 0.245 27.325); --destructive: oklch(0.5 0.2 25);
--border: oklch(0.922 0 0); --border: oklch(0.6 0.08 45);
--input: oklch(0.922 0 0); --input: oklch(0.78 0.04 55);
--ring: oklch(0.708 0 0); --ring: oklch(0.55 0.14 45);
--chart-1: oklch(0.87 0 0); --chart-1: oklch(0.55 0.14 45);
--chart-2: oklch(0.556 0 0); --chart-2: oklch(0.65 0.1 70);
--chart-3: oklch(0.439 0 0); --chart-3: oklch(0.5 0.08 30);
--chart-4: oklch(0.371 0 0); --chart-4: oklch(0.6 0.06 90);
--chart-5: oklch(0.269 0 0); --chart-5: oklch(0.4 0.04 45);
--radius: 0.625rem; --radius: 0px;
--sidebar: oklch(0.985 0 0); --sidebar: oklch(0.90 0.025 55);
--sidebar-foreground: oklch(0.145 0 0); --sidebar-foreground: oklch(0.18 0.03 45);
--sidebar-primary: oklch(0.205 0 0); --sidebar-primary: oklch(0.55 0.14 45);
--sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-primary-foreground: oklch(0.95 0.02 55);
--sidebar-accent: oklch(0.97 0 0); --sidebar-accent: oklch(0.84 0.035 55);
--sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-accent-foreground: oklch(0.18 0.03 45);
--sidebar-border: oklch(0.922 0 0); --sidebar-border: oklch(0.6 0.08 45);
--sidebar-ring: oklch(0.708 0 0); --sidebar-ring: oklch(0.55 0.14 45);
} }
/* ── Black-Figure Dark Theme (primary) ──
Inspired by Greek pottery: black ground, terracotta figures, gold accents
*/
.dark { .dark {
--background: oklch(0.145 0 0); --background: oklch(0.12 0.015 45);
--foreground: oklch(0.985 0 0); --foreground: oklch(0.72 0.08 55);
--card: oklch(0.205 0 0); --card: oklch(0.16 0.02 45);
--card-foreground: oklch(0.985 0 0); --card-foreground: oklch(0.72 0.08 55);
--popover: oklch(0.205 0 0); --popover: oklch(0.16 0.02 45);
--popover-foreground: oklch(0.985 0 0); --popover-foreground: oklch(0.72 0.08 55);
--primary: oklch(0.922 0 0); --primary: oklch(0.7 0.13 55);
--primary-foreground: oklch(0.205 0 0); --primary-foreground: oklch(0.12 0.015 45);
--secondary: oklch(0.269 0 0); --secondary: oklch(0.22 0.025 45);
--secondary-foreground: oklch(0.985 0 0); --secondary-foreground: oklch(0.7 0.08 55);
--muted: oklch(0.269 0 0); --muted: oklch(0.22 0.02 45);
--muted-foreground: oklch(0.708 0 0); --muted-foreground: oklch(0.5 0.05 55);
--accent: oklch(0.269 0 0); --accent: oklch(0.24 0.03 45);
--accent-foreground: oklch(0.985 0 0); --accent-foreground: oklch(0.72 0.08 55);
--destructive: oklch(0.704 0.191 22.216); --destructive: oklch(0.55 0.18 25);
--border: oklch(1 0 0 / 10%); --border: oklch(0.38 0.06 45);
--input: oklch(1 0 0 / 15%); --input: oklch(0.26 0.03 45);
--ring: oklch(0.556 0 0); --ring: oklch(0.7 0.13 55);
--chart-1: oklch(0.87 0 0); --chart-1: oklch(0.7 0.13 55);
--chart-2: oklch(0.556 0 0); --chart-2: oklch(0.65 0.1 70);
--chart-3: oklch(0.439 0 0); --chart-3: oklch(0.55 0.08 30);
--chart-4: oklch(0.371 0 0); --chart-4: oklch(0.6 0.06 90);
--chart-5: oklch(0.269 0 0); --chart-5: oklch(0.45 0.04 45);
--sidebar: oklch(0.205 0 0); --sidebar: oklch(0.14 0.018 45);
--sidebar-foreground: oklch(0.985 0 0); --sidebar-foreground: oklch(0.72 0.08 55);
--sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary: oklch(0.7 0.13 55);
--sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-primary-foreground: oklch(0.12 0.015 45);
--sidebar-accent: oklch(0.269 0 0); --sidebar-accent: oklch(0.24 0.03 45);
--sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-accent-foreground: oklch(0.72 0.08 55);
--sidebar-border: oklch(1 0 0 / 10%); --sidebar-border: oklch(0.38 0.06 45);
--sidebar-ring: oklch(0.556 0 0); --sidebar-ring: oklch(0.7 0.13 55);
} }
@layer base { @layer base {
* { * {
@apply border-border outline-ring/50; @apply border-border outline-ring/50;
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} font-size: 13px;
letter-spacing: -0.01em;
}
html { html {
@apply font-sans; @apply font-mono;
} }
/* Dark-mode scrollbars */ /* Terracotta scrollbars */
* { * {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: oklch(0.35 0 0) transparent; scrollbar-color: oklch(0.35 0.05 45) transparent;
} }
*::-webkit-scrollbar { *::-webkit-scrollbar {
width: 6px; width: 5px;
height: 6px; height: 5px;
} }
*::-webkit-scrollbar-track { *::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
background: oklch(0.35 0 0); background: oklch(0.35 0.05 45);
border-radius: 3px; border-radius: 0;
} }
*::-webkit-scrollbar-thumb:hover { *::-webkit-scrollbar-thumb:hover {
background: oklch(0.45 0 0); background: oklch(0.5 0.08 55);
} }
*::-webkit-scrollbar-corner { *::-webkit-scrollbar-corner {
background: transparent; background: transparent;
} }
.dark *::-webkit-scrollbar-thumb { /* Terracotta cursor */
background: oklch(0.3 0 0); .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);
}
}