/* Generated by packages/ika-ui/build.py — edit packages/ika-ui/src/, not this file. */ /* IKALOGIC design tokens — the one place the toolbox's colours, spacing and elevation are defined. These values are not new: they are the palette that had been copy-pasted into ikalogic-inventory/app/static/css/app.css and ikalogic-progantt/frontend/src/styles.css, plus the neutrals progantt had already settled on. Collecting them here is the whole point — change a colour once and every tool follows. Contains custom properties only, no component styles, so it is safe to load before anything else (including Pico) in any app. */ :root { /* ---- Brand ------------------------------------------------------------ */ /* Coral is the IKALOGIC accent and belongs to the brand, not to any one tool. It is used for the logo lockup, focus rings and destructive actions. Each tool gets its own accent (--ika-tool) from the registry instead, so the two never compete. */ --ika-coral: #ee5454; --ika-coral-hover: #d83b3b; --ika-coral-soft: #fdeaea; --ika-slate: #2b3b4b; /* Per-tool accent. The top bar sets this from the registry; the fallback is the brand coral so a page without a top bar still looks intentional. */ --ika-tool: var(--ika-coral); --ika-tool-soft: var(--ika-coral-soft); /* ---- Neutrals --------------------------------------------------------- */ --ika-ink: #1f2937; --ika-ink-soft: #374151; --ika-muted: #6b7280; --ika-line: #e2e6eb; --ika-line-strong: #cbd2da; --ika-bg: #f6f7f9; --ika-panel: #ffffff; --ika-panel-alt: #fafbfc; --ika-hover: #f0f2f5; /* flat hover wash, from progantt's bar */ /* ---- Status ----------------------------------------------------------- */ --ika-ok: #22c55e; --ika-ok-soft: #e9f7ec; --ika-warn: #eab308; --ika-warn-soft: #fdf6e3; --ika-danger: #ee5454; --ika-danger-soft: #fdeaea; --ika-info: #3b82f6; --ika-info-soft: #e8f1fd; /* ---- Typography ------------------------------------------------------- */ --ika-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --ika-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --ika-text-xs: 0.72rem; --ika-text-sm: 0.82rem; --ika-text-base: 0.94rem; --ika-text-lg: 1.1rem; /* ---- Space, shape, elevation ------------------------------------------ */ --ika-space-1: 0.25rem; --ika-space-2: 0.5rem; --ika-space-3: 0.75rem; --ika-space-4: 1rem; --ika-space-5: 1.5rem; --ika-space-6: 2rem; --ika-radius-sm: 5px; --ika-radius: 8px; --ika-radius-lg: 12px; --ika-radius-pill: 999px; --ika-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --ika-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); --ika-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16); /* ---- Chrome ----------------------------------------------------------- */ --ika-topbar-height: 3.25rem; --ika-topbar-bg: var(--ika-panel); --ika-focus-ring: 0 0 0 3px rgba(238, 84, 84, 0.35); } /* Dark theme. Applied when the OS asks for it, unless a page has explicitly pinned itself light via data-theme="light" (Pico's convention, which the Jinja apps already set on ). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ika-ink: #e5e7eb; --ika-ink-soft: #cbd5e1; --ika-muted: #9099a8; --ika-line: #2c3542; --ika-line-strong: #3d4757; --ika-bg: #161b22; --ika-panel: #1c222b; --ika-panel-alt: #222933; --ika-hover: #2a323d; --ika-slate: #cbd5e1; --ika-coral-soft: #3a2224; --ika-ok-soft: #16301f; --ika-warn-soft: #322a12; --ika-danger-soft: #3a2224; --ika-info-soft: #16253d; --ika-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ika-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); --ika-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); } } /* Same values, but forced — for an explicit in-app dark toggle. */ :root[data-theme="dark"] { --ika-ink: #e5e7eb; --ika-ink-soft: #cbd5e1; --ika-muted: #9099a8; --ika-line: #2c3542; --ika-line-strong: #3d4757; --ika-bg: #161b22; --ika-panel: #1c222b; --ika-panel-alt: #222933; --ika-hover: #2a323d; --ika-slate: #cbd5e1; --ika-coral-soft: #3a2224; --ika-ok-soft: #16301f; --ika-warn-soft: #322a12; --ika-danger-soft: #3a2224; --ika-info-soft: #16253d; --ika-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ika-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); --ika-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); } /* Pico ↔ IKALOGIC token bridge. Load AFTER pico.min.css and tokens.css in the Jinja apps (inventory, agents, id, and anything from templates/new-tool). It teaches Pico the toolbox palette rather than restyling Pico's components, so upgrading Pico stays uneventful. */ :root { --pico-font-family: var(--ika-font); --pico-border-radius: var(--ika-radius); --pico-spacing: var(--ika-space-4); } /* Headings take the slate logo ink — this is what the inventory and progantt stylesheets were each doing on their own. */ :root:not([data-theme="dark"]), [data-theme="light"] { --pico-h1-color: var(--ika-slate); --pico-h2-color: var(--ika-slate); --pico-h3-color: var(--ika-slate); --pico-h4-color: var(--ika-slate); --pico-h5-color: var(--ika-slate); --pico-h6-color: var(--ika-slate); } /* Deliberately no mapping of Pico's primary onto the tool's accent. Doing that repainted every button once the top bar had fetched its context, which reads as a page changing its mind. Each tool keeps its own palette; the bar carries the tool's colour. */ /* Pico's
sits directly under the sticky top bar. */ body > main.container { padding-top: var(--ika-space-5); } /* Small utilities the Jinja templates already reach for. */ .muted { color: var(--ika-muted); } .btn-sm { padding: var(--ika-space-1) var(--ika-space-3); font-size: var(--ika-text-sm); } .nowrap { white-space: nowrap; } .right { text-align: right; } .num { text-align: right; font-variant-numeric: tabular-nums; } /* Before the browser upgrades the custom element there is no bar, and the app nav sits in the page as plain links. Hold its space and keep it invisible for that moment, so the page does not jump when the bar arrives. :defined only matches once the component has registered. */ ika-topbar:not(:defined) { display: block; min-height: 3.1rem; visibility: hidden; }