diff --git a/components/ui-theme/GAPS.md b/components/ui-theme/GAPS.md new file mode 100644 index 0000000..c2d94e3 --- /dev/null +++ b/components/ui-theme/GAPS.md @@ -0,0 +1,90 @@ +# UI Theme β€” gaps & adoption backlog + +Divergence of each project from [`spec/SPEC.md`](spec/SPEC.md), and the ordered backlog to +reach adoption of the `ZB.MOM.WW.Theme` shared RCL. Status legend: β›” gap Β· 🟑 partial Β· βœ… matches. + +--- + +## Divergence vs spec + +### Β§1 Design tokens β€” `theme.css` + +| Item | OtOpcUa | MxAccessGateway | ScadaBridge | +|---|---|---|---| +| Tokens identical to canonical | βœ… identical | βœ… identical | βœ… identical | +| File maintained in one place (RCL) | β›” own copy | β›” own copy | β›” own copy | +| Font path `url('../fonts/…')` | β›” `url('fonts/…')` β€” **latent 404** | 🟑 `url('/fonts/…')` β€” absolute, not portable | βœ… `url('../fonts/…')` β€” correct | +| IBM Plex fonts in one place | β›” own `wwwroot/fonts/` | β›” own `wwwroot/fonts/` | β›” own `wwwroot/fonts/` | + +β†’ **Gap T1:** All three apps maintain a copy of `theme.css` β€” the single-source guarantee + is broken today. Any token change must be applied in four places (three apps + the RCL) + once the RCL exists. +β†’ **Gap T2:** OtOpcUa `url('fonts/…')` is a latent 404 masked by system-font fallback. + Adoption fixes it automatically. +β†’ **Gap T3:** Each app vendors fonts β€” 3Γ— duplication. The RCL eliminates it. + +### Β§2 Typography + +All three apps reference IBM Plex via the token stacks. No typography divergence β€” the +token values are identical. Gap is delivery (T3 above). + +### Β§3 Canonical side-rail layout + +| Item | OtOpcUa | MxAccessGateway | ScadaBridge | +|---|---|---|---| +| `.app-shell` root element | βœ… `div.app-shell` | β›” `div.d-flex …` (no `.app-shell`) | β›” `div.d-flex …` (no `.app-shell`) | +| Rail CSS class | βœ… `.side-rail` | β›” `.sidebar` | β›” `.sidebar` | +| Nav item CSS class | βœ… `.rail-link` | β›” `.nav-link` | β›” `.nav-link` | +| Nav item element | βœ… `` (NavLink) | β›” `
  • ` inside `