Capablio

Handbook

Capablio → Forge KS token map

Baseline for enterprise UI migration (Phase 0).

Updated

CSS variable mapping

Capablio (styles.css) Forge (forge-theme.css)
--bg --forge-bg
--bg-elevated --forge-surface
--bg-card --forge-surface-2
--border --forge-border
--text --forge-text
--text-muted --forge-text-2
--accent --forge-cyan
--accent-dim --forge-cyan-dim
--positive --forge-emerald
--font --font-body / Bootstrap body

Console class inventory

Class Purpose
.cap-app-shell Full-viewport shell (body on consoles)
.cap-top-band Brand, tenant, user meta
.cap-app-grid Sidebar + workspace grid (hash Cap)
.forge-sidebar Tier-grouped left nav (nav-tier-accordion)
.cap-workspace Main column (fs-main-aligned spacing)
.cap-page-header Breadcrumb + title + actions
.cap-panel Matte content panels (data-fs-pack="enterprise")
.cap-dash-card End-user home dashboard cards
.cap-table / .data-table Tables
.cap-status / .status-badge Lifecycle pills
.btn / .btn.primary Actions

Vendored CSS (sync script)

Load order on all /app consoles:

  1. forge-theme.css (light theme + forge-theme, no @import)
  2. forge-capablio-app-shell.css
  3. forge-capablio-console.css
  4. forgesdlc-pack-enterprise.css
  5. styles.css (app-specific only)

Run ./scripts/sync-capablio-ks-static.sh after bumping kitchensink.

Verify commands

cd workbench/feedback-360
./scripts/sync-capablio-ks-static.sh
.venv/bin/python forge360/scripts/e2e_serve.py   # port FORGE360_E2E_PORT (default 8920)
npx playwright test e2e/capablio-wiki.spec.mjs

UX fixture audit (live e2e + KS website auditor, authenticated consoles):

./scripts/run-capablio-ux-audit.sh

See capablio-ux-fixture.md — local fixture uses the same forge360/ui/static/ tree as production.

Surfaces

  • /app/ — forge360/ui/static/index.html
  • /app/admin/ — admin console
  • /app/operator/ — platform operator
  • Report wiki — report/wiki/*.html via render_html.py
  • Subject report — report/360-report.html