T-21FI-appframe-neutralize-tokens
Status: closed/done · Impact: medium · Complexity: large
The frame’s layout and the DAppShell / palette / menu components consume @determined/ui’s
--d-* tokens. Split the design-system dependency so the frame extends a DS layer by config,
letting each host supply its own tokens — determined keeps @determined/ui; the dashboard maps its
palette against the same contract.
| Location | Role today |
|---|---|
packages/ts/ui/app/components/DAppShell.vue | The frame body; lightly token-coupled (--d-bg-base and a few more). |
packages/ts/ui/app/assets/css/tokens.css | The --d-* token set the frame and D components consume. |
packages/ts/app-frame/nuxt.config.ts | Extends @determined/ui directly (hardcoded). |
Proposed
Section titled “Proposed”The frame extends a design-system layer by config, not hardcode: determined passes @determined/ui;
another host passes its own DS layer or token values against the frame’s documented token contract.
The DAppShell/DCommandPalette/DContextMenu/DMenu/DSidebar/DNavbar/DStatusBar
components and the token set live in a layer the frame does not hardcode.
Approach
Section titled “Approach”- Enumerate the
--d-*tokens the frame and its D components actually consume — this is the token contract. - Make the frame’s design-system
extendsconfigurable (determined supplies@determined/ui); keep determined’s rendering identical. - Document the token contract so a non-determined host can satisfy it.
Files to touch
Section titled “Files to touch”| Location | Kind | Change |
|---|---|---|
packages/ts/app-frame/nuxt.config.ts | modify | design-system layer via config, not a hardcoded @determined/ui |
packages/ts/ui/app/assets/css/tokens.css | modify | mark and document the frame token contract |
Acceptance criteria
Section titled “Acceptance criteria”- AC-1: The frame reads only a documented token contract; determined supplies it via
@determined/uiwith no visual change. - AC-2: A host can satisfy the token contract without depending on
@determined/ui.
Out of scope
Section titled “Out of scope”- The dashboard’s actual token mapping — Phase B (see the milestone).
Depends on T-4JGE-appframe-scaffold-move.