T-IKI3-dashboard-frame-prep
Status: closed/done · Impact: medium · Complexity: medium
Make sdf-nuxt able to consume @sksizer/app-frame: align its dependency versions with the frame,
add the frame + @determined/ui as deps, and override @determined/ui’s --d-* token values with
the dashboard’s palette — so the frame’s chrome renders in the dashboard’s colors. No layout swap
yet.
| Location | Role today |
|---|---|
apps/sdlc/desktop/src-nuxt/nuxt.config.ts | sdf-nuxt — extends nothing; @nuxt/ui ^4.7.1, plus @nuxt/fonts/@nuxt/icon/@nuxt/scripts. No frame, no DS layer. |
apps/sdlc/desktop/src-nuxt/app/layouts/default.vue | Hand-rolled layout with hard-coded hex (#0f1115, #3b82f6, …); no --d-* tokens. |
packages/ts/ui | @determined/ui — the shared UI layer holding the D* chrome the frame needs + the --d-* token values (@nuxt/ui ^4.9.0, tailwind ^4.3.2, vue ^3.5.35; frame sets ui.fonts:false). |
Proposed
Section titled “Proposed”sdf-nuxt bumps to the frame’s versions (@nuxt/ui ^4.9.0, tailwind ^4.3.2, vue ^3.5.35,
reconcile nuxt), reconciles its extra modules against the frame (ui.fonts:false), and depends on
@sksizer/app-frame + @determined/ui. The dashboard reuses @determined/ui’s structural D*
components and overrides only the --d-* token values with its own palette (#0f1115 →
--d-bg-base, #3b82f6 → --d-accent, …) via a CSS layer that wins over @determined/ui’s
defaults.
Approach
Section titled “Approach”- Bump
sdf-nuxtdeps to match the frame; reconcilenuxtand@nuxt/fontsvs the frame’sui.fonts:false. - Add
@sksizer/app-frame+@determined/uias workspace deps (not yet extended in the layout). - Author the dashboard’s
--d-*override values from its hex palette (a CSS layer applied after@determined/ui’s tokens).
Files to touch
Section titled “Files to touch”| Location | Kind | Change |
|---|---|---|
apps/sdlc/desktop/src-nuxt/package.json | modify | version-align; add @sksizer/app-frame + @determined/ui deps |
apps/sdlc/desktop/src-nuxt/nuxt.config.ts | modify | reconcile modules |
apps/sdlc/desktop/src-nuxt/app/assets/main.css | modify | --d-* override values from the dashboard palette |
Acceptance criteria
Section titled “Acceptance criteria”- AC-1:
sdf-nuxtbuilds on the frame’s@nuxt/ui/tailwind/vue versions with no regression. - AC-2:
@sksizer/app-frame+@determined/uiare resolvable deps ofsdf-nuxt. - AC-3: The dashboard overrides the
--d-*values with its palette (its colors win over@determined/ui’s defaults).
Out of scope
Section titled “Out of scope”- Extending the frame in the layout / rendering
DAppShell— T-W0HA-dashboard-layout-swap.