feat(oberflaeche): Grundlayout, Navigation und Farbschema

Deutsche Oberfläche, Hell und Dunkel über next-themes, Navigation mit Rollenfilter und die shadcn-Primitiven, die M1 braucht. Der Farbschema-Knopf kommt ohne Effekt und ohne Zustand aus: welches Symbol gilt, entscheidet die dark-Klasse und damit CSS. next-themes setzt sie schon vor der Hydratation, deshalb blitzt nichts auf — und die React-Compiler-Regel gegen setState im Effekt bleibt eingehalten. Farben als OKLCH, damit Hell und Dunkel dieselbe wahrgenommene Helligkeit halten. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-10 13:02:34 +02:00
parent 19ca0826e6
commit 4ff67c15c2
13 changed files with 505 additions and 0 deletions
@@ -0,0 +1,47 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const knopfStile = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0",
+  {
+    variants: {
+      art: {
+        betont: 'bg-betont text-betont-vordergrund hover:bg-betont/90',
+        umriss: 'border border-rand bg-karte hover:bg-gedaempft',
+        leise: 'hover:bg-gedaempft',
+        gefahr: 'bg-gefahr text-gefahr-vordergrund hover:bg-gefahr/90',
+        verweis: 'text-betont underline-offset-4 hover:underline',
+      },
+      groesse: {
+        normal: 'h-9 px-4 py-2',
+        klein: 'h-8 rounded-md px-3 text-xs',
+        gross: 'h-11 rounded-md px-6',
+        quadrat: 'size-9',
+      },
+    },
+    defaultVariants: {
+      art: 'betont',
+      groesse: 'normal',
+    },
+  },
+)
+
+export type KnopfEigenschaften = React.ComponentProps<'button'> &
+  VariantProps<typeof knopfStile> & {
+    /** Rendert stattdessen das Kindelement, z. B. einen Link. */
+    alsKind?: boolean
+  }
+
+function Button({
+  className,
+  art,
+  groesse,
+  alsKind = false,
+  ...rest
+}: KnopfEigenschaften) {
+  const Element = alsKind ? Slot : 'button'
+  return <Element className={cn(knopfStile({ art, groesse }), className)} {...rest} />
+}
+
+export { Button, knopfStile }