T-2VG3-design-language-product-hue

Status: open/ready · Impact: medium · Complexity: medium

Goal

A focused vault tints shell chrome through --d-vault-hue / --d-vault-color. Products deserve the same identity channel: a product declares a hue and its chrome takes the tint, the way a focused vault does today. This is the D-DLNG-design-language Phase 2 “theming descent” item.

Today

Location	Role today
packages/ts/ui/app/assets/css/tokens.css	Defines the vault-hue family: --d-vault-hue seeds --d-vault-color / --d-vault-fg / --d-vault-offline via hsl + color-mix. Vault-specific by name only — the mechanism is general.
solutions/determined/packages/shell/app/components/ShellVaultScopePane.vue	Paints scope-pane identity from --d-vault-color.
solutions/determined/packages/shell/app/components/ShellVaultWindowIdentity.vue	Window identity chip from the vault hue.
solutions/determined/packages/shell/app/components/VaultTreePane.vue	Tree accents from the vault hue.

Proposed

A product-level hue declaration (layer app config or appearance seam) seeds a generalized identity-hue token family. Vault-hue becomes a scoped override of that family, not a separate mechanism. The spec documents the family and the declaration path.

Approach

1. Inventory every --d-vault-* consumer; confirm the derivation chain in tokens.css.
2. Name the general family (e.g. --d-hue / --d-hue-color / --d-hue-fg) and define it in tokens.css; keep --d-vault-* as aliases scoped to vault subtrees so vault behavior is unchanged.
3. Wire the product declaration: a product sets its hue once (app config or useAppearance registration) and the layer stamps it at the root.
4. Document in design-system.md (token vocabulary + a short “product identity” section).
5. Before/after light+dark screenshots per the repo screenshot rule.

Files to touch

Location	Kind	Change
packages/ts/ui/app/assets/css/tokens.css	modify	general hue family; vault tokens become scoped aliases
packages/ts/ui/app/composables/useAppearance.ts	modify	product-hue declaration seam (if config-side proves wrong)
packages/ts/ui/docs/design-system.md	modify	token rows + product-identity section
solutions/determined/packages/shell/app/components/ShellVaultScopePane.vue	modify	consume the general family through the vault alias
solutions/determined/packages/shell/app/components/ShellVaultWindowIdentity.vue	modify	same
solutions/determined/packages/shell/app/components/VaultTreePane.vue	modify	same

Acceptance criteria

• AC-1: A product with a declared hue shows tinted chrome in light and dark; a product without one renders exactly as today.
• AC-2: Vault-focus tinting is pixel-unchanged (existing shell screenshot pairs regenerate clean).
• AC-3: design-system.md documents the family; moon run ui:check and moon run app-frame:test pass.

Out of scope

• Choosing hues for individual products (each product opts in later).

Dependencies

• none

Discovery context

• docs/planning/design-language/PLAN.md Phase 2; D-DLNG-design-language.

---

← Back to Tasks