export declare const UI_TOKENS_STYLE_ID = "bpmnkit-ui-tokens-v1"; export declare const UI_COMPONENTS_STYLE_ID = "bpmnkit-ui-components-v1"; /** * CSS custom properties — light theme by default, dark override via * `[data-theme="dark"]` on any ancestor element (e.g. the app root). * * Nav variables use a fixed dark palette independent of the main theme, * matching the pattern used by VS Code, GitHub, and similar apps. */ export declare const UI_TOKENS_CSS = "\n:root {\n --bpmnkit-bg: #f4f4f8;\n --bpmnkit-surface: #ffffff;\n --bpmnkit-surface-2: #eeeef8;\n --bpmnkit-border: #d0d0e8;\n --bpmnkit-fg: #1a1a2e;\n --bpmnkit-fg-muted: #6666a0;\n --bpmnkit-font: system-ui, -apple-system, sans-serif;\n --bpmnkit-font-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', monospace;\n --bpmnkit-accent: #1a56db;\n --bpmnkit-accent-bright: #3b82f6;\n --bpmnkit-accent-subtle: rgba(26, 86, 219, 0.12);\n --bpmnkit-accent-fg: #ffffff;\n --bpmnkit-teal: #0d9488;\n --bpmnkit-success: #16a34a;\n --bpmnkit-warn: #d97706;\n --bpmnkit-danger: #dc2626;\n --bpmnkit-panel-bg: rgba(255, 255, 255, 0.92);\n --bpmnkit-panel-border: rgba(0, 0, 0, 0.08);\n --bpmnkit-radius: 6px;\n --bpmnkit-radius-sm: 4px;\n --bpmnkit-radius-lg: 10px;\n /* Nav sidebar \u2014 always dark-navy regardless of theme */\n --bpmnkit-nav-bg: #1a1a2e;\n --bpmnkit-nav-fg: #9090b4;\n --bpmnkit-nav-fg-active: #ffffff;\n --bpmnkit-nav-width: 220px;\n --bpmnkit-header-height: 52px;\n}\n\n[data-theme=\"dark\"] {\n --bpmnkit-bg: #0d0d16;\n --bpmnkit-surface: #161626;\n --bpmnkit-surface-2: #1e1e2e;\n --bpmnkit-border: #2a2a42;\n --bpmnkit-fg: #cdd6f4;\n --bpmnkit-fg-muted: #8888a8;\n --bpmnkit-accent: #6b9df7;\n --bpmnkit-accent-bright: #89b4fa;\n --bpmnkit-accent-subtle: rgba(107, 157, 247, 0.15);\n --bpmnkit-teal: #2dd4bf;\n --bpmnkit-success: #22c55e;\n --bpmnkit-warn: #f59e0b;\n --bpmnkit-danger: #f87171;\n --bpmnkit-panel-bg: rgba(13, 13, 22, 0.92);\n --bpmnkit-panel-border: rgba(255, 255, 255, 0.08);\n --bpmnkit-nav-bg: #0a0a14;\n --bpmnkit-nav-fg: #8888a8;\n}\n\n[data-theme=\"neon\"] {\n --bpmnkit-bg: oklch(11% 0.025 270);\n --bpmnkit-surface: oklch(15% 0.025 270);\n --bpmnkit-surface-2: oklch(19% 0.03 270);\n --bpmnkit-border: oklch(65% 0.24 280 / 0.18);\n --bpmnkit-fg: oklch(88% 0.02 270);\n --bpmnkit-fg-muted: oklch(60% 0.04 270);\n --bpmnkit-accent: oklch(65% 0.22 280);\n --bpmnkit-accent-bright: oklch(76% 0.16 280);\n --bpmnkit-accent-subtle: oklch(65% 0.22 280 / 0.15);\n --bpmnkit-accent-fg: oklch(95% 0.01 270);\n --bpmnkit-teal: oklch(72% 0.18 185);\n --bpmnkit-success: oklch(72% 0.18 145);\n --bpmnkit-warn: oklch(75% 0.17 75);\n --bpmnkit-danger: oklch(65% 0.22 25);\n --bpmnkit-panel-bg: oklch(13% 0.03 270 / 0.96);\n --bpmnkit-panel-border: oklch(65% 0.24 280 / 0.18);\n --bpmnkit-nav-bg: oklch(8% 0.025 270);\n --bpmnkit-nav-fg: oklch(55% 0.06 270);\n}\n"; /** CSS for shared components: badge, card, table, theme-switcher. */ export declare const UI_COMPONENTS_CSS = "\n/* \u2500\u2500 Badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-badge {\n display: inline-block;\n padding: 2px 7px;\n border-radius: var(--bpmnkit-radius-sm, 4px);\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.04em;\n background: var(--bpmnkit-surface-2);\n color: var(--bpmnkit-fg-muted);\n text-transform: uppercase;\n white-space: nowrap;\n font-family: var(--bpmnkit-font, system-ui, sans-serif);\n}\n.bpmnkit-badge--active { background: rgba(34,197,94,0.15); color: #22c55e; }\n.bpmnkit-badge--completed { background: rgba(99,102,241,0.15); color: #a5b4fc; }\n.bpmnkit-badge--terminated { background: rgba(239,68,68,0.15); color: #f87171; }\n.bpmnkit-badge--failed { background: rgba(239,68,68,0.15); color: #f87171; }\n.bpmnkit-badge--error_thrown { background: rgba(239,68,68,0.15); color: #f87171; }\n.bpmnkit-badge--created { background: rgba(76,142,247,0.15); color: #93c5fd; }\n.bpmnkit-badge--resolved { background: rgba(34,197,94,0.15); color: #86efac; }\n.bpmnkit-badge--pending { background: rgba(245,158,11,0.18); color: #fbbf24; }\n.bpmnkit-badge--migrated { background: rgba(139,92,246,0.15); color: #c4b5fd; }\n.bpmnkit-badge--timed_out { background: rgba(245,158,11,0.18); color: #fbbf24; }\n.bpmnkit-badge--retries_updated { background: rgba(76,142,247,0.15); color: #93c5fd; }\n.bpmnkit-badge--tenant { background: rgba(255,255,255,0.06); color: var(--bpmnkit-fg-muted); font-weight: 400; }\n.bpmnkit-badge--incident-dot { background: rgba(245,158,11,0.18); color: var(--bpmnkit-warn); margin-left: 6px; padding: 2px 5px; }\n.bpmnkit-badge-wrap { display: flex; align-items: center; }\n\n/* \u2500\u2500 Stats card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-card {\n background: var(--bpmnkit-surface);\n border: 1px solid var(--bpmnkit-border);\n border-radius: var(--bpmnkit-radius-lg, 10px);\n padding: 20px 18px;\n transition: border-color 0.15s;\n}\n.bpmnkit-card--clickable { cursor: pointer; }\n.bpmnkit-card--clickable:hover { border-color: var(--bpmnkit-accent); }\n.bpmnkit-card--warn .bpmnkit-card-value { color: var(--bpmnkit-warn); }\n.bpmnkit-card-value {\n font-size: 28px;\n font-weight: 700;\n line-height: 1;\n color: var(--bpmnkit-accent);\n margin-bottom: 6px;\n}\n.bpmnkit-card-label {\n font-size: 12px;\n color: var(--bpmnkit-fg-muted);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n/* \u2500\u2500 Data table \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-table-wrap {\n background: var(--bpmnkit-surface);\n border: 1px solid var(--bpmnkit-border);\n border-radius: var(--bpmnkit-radius, 6px);\n overflow: hidden;\n}\n.bpmnkit-table-header {\n display: flex;\n background: var(--bpmnkit-surface-2);\n border-bottom: 1px solid var(--bpmnkit-border);\n}\n.bpmnkit-table-th {\n padding: 9px 14px;\n font-size: 11px;\n font-weight: 600;\n color: var(--bpmnkit-fg-muted);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.bpmnkit-table-th[style*=\"width\"] { flex: none; }\n.bpmnkit-table-body {\n overflow-y: auto;\n}\n.bpmnkit-table-row {\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--bpmnkit-border);\n transition: background 0.1s;\n}\n.bpmnkit-table-row:last-child { border-bottom: none; }\n.bpmnkit-table-row--clickable { cursor: pointer; }\n.bpmnkit-table-row--clickable:hover { background: var(--bpmnkit-surface-2); }\n.bpmnkit-table-td {\n padding: 7px 14px;\n font-size: 13px;\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.bpmnkit-table-td[style*=\"width\"] { flex: none; }\n.bpmnkit-table-empty {\n padding: 28px 20px;\n text-align: center;\n color: var(--bpmnkit-fg-muted);\n font-size: 13px;\n}\n\n/* \u2500\u2500 Theme switcher button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-theme-btn {\n display: flex; align-items: center; justify-content: center;\n width: 32px; height: 32px;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--bpmnkit-radius, 6px);\n color: var(--bpmnkit-fg-muted, #6666a0);\n cursor: pointer;\n padding: 0; flex-shrink: 0;\n transition: background 0.1s, color 0.1s, border-color 0.1s;\n}\n.bpmnkit-theme-btn:hover {\n background: var(--bpmnkit-surface-2);\n color: var(--bpmnkit-fg);\n border-color: var(--bpmnkit-border);\n}\n.bpmnkit-theme-btn svg { width: 15px; height: 15px; pointer-events: none; }\n\n/* \u2500\u2500 Theme dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-theme-dropdown {\n position: fixed;\n display: flex; flex-direction: column;\n gap: 1px; padding: 4px;\n background: var(--bpmnkit-panel-bg, rgba(255, 255, 255, 0.92));\n border: 1px solid var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08));\n border-radius: var(--bpmnkit-radius-lg, 10px);\n box-shadow: 0 6px 24px rgba(0,0,0,0.15);\n z-index: 10000; min-width: 140px;\n backdrop-filter: blur(12px);\n}\n.bpmnkit-theme-dropdown[data-theme=\"dark\"] {\n box-shadow: 0 6px 24px rgba(0,0,0,0.5);\n}\n.bpmnkit-theme-dropdown[data-theme=\"neon\"] {\n box-shadow: 0 6px 24px oklch(0% 0 0 / 0.6), 0 0 0 1px oklch(65% 0.28 280 / 0.1);\n}\n.bpmnkit-theme-item {\n display: flex; align-items: center; gap: 8px;\n padding: 7px 10px;\n border: none; background: transparent;\n color: var(--bpmnkit-fg, #1a1a2e);\n cursor: pointer;\n border-radius: calc(var(--bpmnkit-radius, 6px) - 2px);\n font-size: 12px; text-align: left; width: 100%;\n font-family: var(--bpmnkit-font, system-ui, sans-serif);\n transition: background 0.1s;\n}\n.bpmnkit-theme-item:hover { background: var(--bpmnkit-surface-2); }\n.bpmnkit-theme-dropdown[data-theme=\"dark\"] .bpmnkit-theme-item { color: rgba(255,255,255,0.75); }\n.bpmnkit-theme-dropdown[data-theme=\"dark\"] .bpmnkit-theme-item:hover { background: rgba(255,255,255,0.08); }\n.bpmnkit-theme-dropdown[data-theme=\"neon\"] .bpmnkit-theme-item { color: oklch(73% 0.16 280); }\n.bpmnkit-theme-dropdown[data-theme=\"neon\"] .bpmnkit-theme-item:hover { background: oklch(65% 0.28 280 / 0.1); }\n.bpmnkit-theme-item-check {\n width: 12px; height: 12px; flex-shrink: 0;\n color: var(--bpmnkit-accent, #1a56db);\n display: flex; align-items: center;\n}\n.bpmnkit-theme-dropdown[data-theme=\"dark\"] .bpmnkit-theme-item-check { color: var(--bpmnkit-accent, #6b9df7); }\n.bpmnkit-theme-dropdown[data-theme=\"neon\"] .bpmnkit-theme-item-check { color: oklch(72% 0.18 185); }\n.bpmnkit-theme-item-icon {\n width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7;\n display: flex; align-items: center;\n}\n.bpmnkit-theme-item-check svg,\n.bpmnkit-theme-item-icon svg { width: 100%; height: 100%; }\n"; export declare function injectUiTokens(): void; export declare function injectUiComponents(): void; /** Injects all shared UI styles (tokens + components). */ export declare function injectUiStyles(): void; //# sourceMappingURL=css.d.ts.map