/** @type {import('tailwindcss').Config} */ export default { content: ["./index.html", "./src/**/*.{ts,tsx}"], // Umschaltbar über die Klasse `dark` am -Element; Vorgabe ist dunkel. darkMode: "class", theme: { extend: { colors: { // Die Palette wird über CSS-Variablen gespeist, damit der Wechsel // zwischen hell und dunkel ohne doppelte Klassen auskommt. ground: "rgb(var(--color-ground) / )", surface: "rgb(var(--color-surface) / )", raised: "rgb(var(--color-raised) / )", line: "rgb(var(--color-line) / )", ink: "rgb(var(--color-ink) / )", muted: "rgb(var(--color-muted) / )", faint: "rgb(var(--color-faint) / )", accent: "rgb(var(--color-accent) / )", "accent-ink": "rgb(var(--color-accent-ink) / )", positive: "rgb(var(--color-positive) / )", negative: "rgb(var(--color-negative) / )", warning: "rgb(var(--color-warning) / )", }, fontFamily: { sans: [ "Inter", "system-ui", "-apple-system", "Segoe UI", "Roboto", "Helvetica Neue", "sans-serif", ], mono: ["ui-monospace", "SFMono-Regular", "Menlo", "Consolas", "monospace"], }, borderRadius: { card: "0.875rem", }, keyframes: { "fade-in": { from: { opacity: "0" }, to: { opacity: "1" } }, "slide-up": { from: { opacity: "0", transform: "translateY(0.5rem)" }, to: { opacity: "1", transform: "translateY(0)" }, }, "slide-in-right": { from: { transform: "translateX(100%)" }, to: { transform: "translateX(0)" }, }, }, animation: { "fade-in": "fade-in 150ms ease-out", "slide-up": "slide-up 180ms ease-out", "slide-in-right": "slide-in-right 220ms cubic-bezier(0.22, 1, 0.36, 1)", }, }, }, plugins: [], };