/*! * pyir Design-Tokens * Author: Maik Haring / maikharing.com * Version: 2.0.0 * * Einzige Quelle der Wahrheit für Farben, Radien, Schatten, Typografie. * Aktiviert wird ein Schema über das Attribut data-py-scheme am -Element, * der Hell-/Dunkel-Modus über data-py-mode ("light" | "dark" | "auto"). */ /* ── Schema-unabhängige Tokens ─────────────────────────────────── */ :root { --py-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --py-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --py-fs-xs: 11px; --py-fs-sm: 12.5px; --py-fs-md: 14px; --py-fs-lg: 16px; --py-fs-xl: 20px; --py-fs-2xl: 26px; --py-fs-3xl: 32px; --py-r-xs: 6px; --py-r-sm: 9px; --py-r-md: 12px; --py-r-lg: 16px; --py-r-xl: 22px; --py-r-pill: 999px; --py-sp-1: 4px; --py-sp-2: 8px; --py-sp-3: 12px; --py-sp-4: 16px; --py-sp-5: 22px; --py-sp-6: 30px; --py-sp-7: 44px; --py-sidebar-w: 244px; --py-sidebar-w-collapsed: 68px; --py-topbar-h: 60px; --py-content-max: 1440px; --py-ease: cubic-bezier(.4, 0, .2, 1); --py-dur: .18s; /* Statusfarben — Basis (hell) */ --py-ok: #137839; --py-warn: #aa4f09; --py-danger: #b91c1c; --py-info: #1d4ed8; --py-neutral: #5b6b7f; --py-ok-soft: color-mix(in srgb, var(--py-ok) 12%, transparent); --py-warn-soft: color-mix(in srgb, var(--py-warn) 13%, transparent); --py-danger-soft: color-mix(in srgb, var(--py-danger) 12%, transparent); --py-info-soft: color-mix(in srgb, var(--py-info) 11%, transparent); --py-neutral-soft: color-mix(in srgb, var(--py-neutral) 12%, transparent); --py-shadow-1: 0 1px 2px rgba(15, 25, 30, .06), 0 1px 1px rgba(15, 25, 30, .04); --py-shadow-2: 0 4px 14px rgba(15, 25, 30, .08), 0 1px 3px rgba(15, 25, 30, .05); --py-shadow-3: 0 18px 48px rgba(15, 25, 30, .16), 0 4px 12px rgba(15, 25, 30, .08); --py-ring: 0 0 0 3px color-mix(in srgb, var(--py-brand) 28%, transparent); /* Prioritäten / Diagrammfarben */ --py-prio-kritisch: #b91c1c; --py-prio-hoch: #c2410c; --py-prio-mittel: #b45309; --py-prio-niedrig: #4d7c0f; --py-chart-1: var(--py-brand); --py-chart-2: var(--py-accent); --py-chart-3: #7c3aed; --py-chart-4: #0891b2; --py-chart-5: #db2777; } /* ── Schema 1: Nordisch (Standard) ─────────────────────────────── */ :root, [data-py-scheme="nordisch"] { --py-brand: #0f4c5c; --py-brand-hover: #12606f; --py-brand-active: #0a3945; --py-brand-fg: #ffffff; --py-brand-soft: color-mix(in srgb, var(--py-brand) 10%, transparent); --py-accent: #0894a3; --py-accent-hover: #0aa4b5; --py-accent-fg: #101418; --py-accent-soft: color-mix(in srgb, var(--py-accent) 12%, transparent); --py-bg: #f4f7f8; --py-surface: #ffffff; --py-surface-2: #eef2f4; --py-surface-3: #e4eaed; --py-border: #dbe3e7; --py-border-strong: #c2ced4; --py-border-input: #8b9398; --py-text: #0f2229; --py-text-dim: #55686f; --py-text-mute: #627076; --py-nav-bg: #0d3f4c; --py-nav-bg-2: #0a323d; --py-nav-text: #cfe1e6; --py-nav-text-dim: #8fb0b9; --py-nav-active-bg: rgba(255, 255, 255, .12); --py-nav-active-text: #ffffff; --py-nav-border: rgba(255, 255, 255, .09); } /* ── Schema 2: Graphit ─────────────────────────────────────────── */ [data-py-scheme="graphit"] { --py-brand: #263447; --py-brand-hover: #32435a; --py-brand-active: #1a2533; --py-brand-fg: #ffffff; --py-brand-soft: color-mix(in srgb, var(--py-brand) 9%, transparent); --py-accent: #b45309; --py-accent-hover: #9a4507; --py-accent-fg: #ffffff; --py-accent-soft: color-mix(in srgb, var(--py-accent) 12%, transparent); --py-bg: #f6f7f9; --py-surface: #ffffff; --py-surface-2: #edeff3; --py-surface-3: #e3e6ec; --py-border: #dde1e8; --py-border-strong: #c4cad5; --py-border-input: #90949e; --py-text: #121821; --py-text-dim: #57616f; --py-text-mute: #666d78; --py-nav-bg: #1b2432; --py-nav-bg-2: #141b26; --py-nav-text: #d3d9e2; --py-nav-text-dim: #96a0af; --py-nav-active-bg: rgba(255, 255, 255, .11); --py-nav-active-text: #ffffff; --py-nav-border: rgba(255, 255, 255, .08); } /* ── Schema 3: Salbei (maikharing.com) ─────────────────────────── */ [data-py-scheme="salbei"] { --py-brand: #5f7a05; --py-brand-hover: #4f6604; --py-brand-active: #3d5003; --py-brand-fg: #ffffff; --py-brand-soft: color-mix(in srgb, var(--py-brand) 11%, transparent); --py-accent: #a3792f; --py-accent-hover: #b88b3a; --py-accent-fg: #101418; --py-accent-soft: color-mix(in srgb, var(--py-accent) 13%, transparent); --py-bg: #f7f7f1; --py-surface: #ffffff; --py-surface-2: #f0f1e7; --py-surface-3: #e7e9db; --py-border: #e0e2d2; --py-border-strong: #c7cab4; --py-border-input: #929486; --py-text: #1b1f14; --py-text-dim: #5e654c; --py-text-mute: #696e58; --py-nav-bg: #2c3319; --py-nav-bg-2: #222812; --py-nav-text: #dde2cd; --py-nav-text-dim: #a7b092; --py-nav-active-bg: rgba(255, 255, 255, .13); --py-nav-active-text: #ffffff; --py-nav-border: rgba(255, 255, 255, .09); } /* ── Dunkelmodus ───────────────────────────────────────────────── */ /* Explizit gewählt */ [data-py-mode="dark"] { color-scheme: dark; } [data-py-mode="light"] { color-scheme: light; } [data-py-mode="dark"], [data-py-mode="dark"][data-py-scheme="nordisch"] { --py-brand: #2c93a8; --py-brand-hover: #38a6bb; --py-brand-active: #3aa0b4; --py-brand-fg: #06181d; --py-accent: #3ab5c2; --py-accent-hover: #4cc6d2; --py-accent-fg: #06181d; --py-bg: #0a1418; --py-surface: #101e24; --py-surface-2: #16272f; --py-surface-3: #1d323b; --py-border: #223841; --py-border-strong: #325059; --py-border-input: #546e75; --py-text: #e4eef1; --py-text-dim: #93a9b1; --py-text-mute: #7c9095; --py-nav-bg: #0c1a20; --py-nav-bg-2: #08141a; --py-nav-text: #c2d6dc; --py-nav-text-dim: #7d959d; --py-nav-active-bg: rgba(255, 255, 255, .1); --py-nav-active-text: #ffffff; --py-nav-border: rgba(255, 255, 255, .07); } [data-py-mode="dark"][data-py-scheme="graphit"] { --py-brand: #7c95b8; --py-brand-hover: #8fa6c6; --py-brand-active: #6a83a5; --py-brand-fg: #0b1017; --py-accent: #f0a32c; --py-accent-hover: #f7b449; --py-accent-fg: #14100a; --py-bg: #0c1117; --py-surface: #141b23; --py-surface-2: #1b232d; --py-surface-3: #232c38; --py-border: #28323f; --py-border-strong: #3a4655; --py-border-input: #606a76; --py-text: #e7ecf2; --py-text-dim: #97a2b2; --py-text-mute: #7f8b99; --py-nav-bg: #10161e; --py-nav-bg-2: #0b1016; --py-nav-text: #c8d0dc; --py-nav-text-dim: #828d9c; } [data-py-mode="dark"][data-py-scheme="salbei"] { --py-brand: #a3c22e; --py-brand-hover: #b3d139; --py-brand-active: #8ba725; --py-brand-fg: #10140a; --py-accent: #d8b471; --py-accent-hover: #e3c384; --py-accent-fg: #17120a; --py-bg: #10130c; --py-surface: #181c12; --py-surface-2: #20251a; --py-surface-3: #2a3021; --py-border: #313826; --py-border-strong: #465034; --py-border-input: #656e56; --py-text: #eaeee0; --py-text-dim: #a2a98d; --py-text-mute: #878e71; --py-nav-bg: #161a10; --py-nav-bg-2: #10130b; --py-nav-text: #d5dbc4; --py-nav-text-dim: #949c80; } /* Statusfarben & Schatten im Dunkelmodus aufhellen */ [data-py-mode="dark"] { --py-ok: #4ade80; --py-warn: #fbbf24; --py-danger: #f87171; --py-info: #7dabff; --py-neutral: #94a3b8; --py-prio-kritisch: #f87171; --py-prio-hoch: #fb923c; --py-prio-mittel: #fbbf24; --py-prio-niedrig: #a3e635; --py-shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --py-shadow-2: 0 4px 16px rgba(0, 0, 0, .5); --py-shadow-3: 0 20px 52px rgba(0, 0, 0, .62); } /* Automatik: Systemeinstellung folgt */ @media (prefers-color-scheme: dark) { [data-py-mode="auto"] { color-scheme: dark; } [data-py-mode="auto"], [data-py-mode="auto"][data-py-scheme="nordisch"] { --py-brand: #2c93a8; --py-brand-hover: #38a6bb; --py-brand-active: #3aa0b4; --py-brand-fg: #06181d; --py-accent: #3ab5c2; --py-accent-hover: #4cc6d2; --py-accent-fg: #06181d; --py-bg: #0a1418; --py-surface: #101e24; --py-surface-2: #16272f; --py-surface-3: #1d323b; --py-border: #223841; --py-border-strong: #325059; --py-border-input: #546e75; --py-text: #e4eef1; --py-text-dim: #93a9b1; --py-text-mute: #7c9095; --py-nav-bg: #0c1a20; --py-nav-bg-2: #08141a; --py-nav-text: #c2d6dc; --py-nav-text-dim: #7d959d; --py-nav-active-bg: rgba(255,255,255,.1); --py-nav-active-text: #fff; --py-nav-border: rgba(255,255,255,.07); } [data-py-mode="auto"][data-py-scheme="graphit"] { --py-brand: #7c95b8; --py-brand-hover: #8fa6c6; --py-brand-active: #6a83a5; --py-brand-fg: #0b1017; --py-accent: #f0a32c; --py-accent-hover: #f7b449; --py-accent-fg: #14100a; --py-bg: #0c1117; --py-surface: #141b23; --py-surface-2: #1b232d; --py-surface-3: #232c38; --py-border: #28323f; --py-border-strong: #3a4655; --py-border-input: #606a76; --py-text: #e7ecf2; --py-text-dim: #97a2b2; --py-text-mute: #7f8b99; --py-nav-bg: #10161e; --py-nav-bg-2: #0b1016; --py-nav-text: #c8d0dc; --py-nav-text-dim: #828d9c; } [data-py-mode="auto"][data-py-scheme="salbei"] { --py-brand: #a3c22e; --py-brand-hover: #b3d139; --py-brand-active: #8ba725; --py-brand-fg: #10140a; --py-accent: #d8b471; --py-accent-hover: #e3c384; --py-accent-fg: #17120a; --py-bg: #10130c; --py-surface: #181c12; --py-surface-2: #20251a; --py-surface-3: #2a3021; --py-border: #313826; --py-border-strong: #465034; --py-border-input: #656e56; --py-text: #eaeee0; --py-text-dim: #a2a98d; --py-text-mute: #878e71; --py-nav-bg: #161a10; --py-nav-bg-2: #10130b; --py-nav-text: #d5dbc4; --py-nav-text-dim: #949c80; } [data-py-mode="auto"] { --py-ok: #4ade80; --py-warn: #fbbf24; --py-danger: #f87171; --py-info: #7dabff; --py-neutral: #94a3b8; --py-prio-kritisch: #f87171; --py-prio-hoch: #fb923c; --py-prio-mittel: #fbbf24; --py-prio-niedrig: #a3e635; --py-shadow-1: 0 1px 2px rgba(0,0,0,.5); --py-shadow-2: 0 4px 16px rgba(0,0,0,.5); --py-shadow-3: 0 20px 52px rgba(0,0,0,.62); } } /* Reduzierte Bewegung respektieren */ @media (prefers-reduced-motion: reduce) { :root { --py-dur: .001s; } * { animation-duration: .001s !important; transition-duration: .001s !important; } }