Roche frontend: RDS + DTA colours

Conventions for a React + Vite + TypeScript UI at Roche.

RDS via a single barrel (src/rds.tsx)

Import every design-system primitive through one file that re-wraps @rds/react-components, keeping app-facing signatures stable. Nothing else in the app imports RDS directly — so you can start on local fallback primitives and swap in real RDS later by editing only this one file.

// src/rds.tsx — wrap, don't leak RDS types into the app
export function Button({ children, onClick, variant = "primary", disabled }) { ... }
export function Drawer({ open, title, onClose, children, size = "m" }) { ... } // size: s|m|l
export function MultiSelect({ label, options, selected, onChange }) { ... }     // string[] in/out
// Chip, Tooltip, Tabs, Spinner, Select, RocheLogo …

• Keep app contracts primitive (string[], not RdsSelectOption[]); convert at the boundary.
• RdsDrawer sizes are s | m | l only (no xl).

Installing real RDS (Artifactory, on VPN)

Put the token in your user-level ~/.npmrc (not the project .npmrc):

//eu.repository.roche.com/artifactory/api/npm/rds-general-npm-all-v/:_authToken=<TOKEN>

Then npm install @rds/core @rds/react-components, and import @rds/react-components/style.css once in main.tsx. Fallback registry: GitLab Package Registry (code.roche.com).

DTA (therapeutic-area) colour palette

DTA_CODE from the portfolio (see [[roche-portfolio-data]]) drives colour. Molecule/ modality badges take the project’s DTA colour (tint background + solid text) — they do NOT get an independent palette. Canonical values:

Helpers to mirror: dtaSolid(code), dtaTint(code), dtaIcon(code) (icon/text colour — white only for IMM), dtaName(code); all normalise with trim+uppercase and fall back to the Other entry. Source of truth: pat-e2e-report-automation/backend/app/reports/colors.py and frontend/src/lib/chartTheme.ts.

Vite deploy note

For Posit Connect, set base: "./" and a relative API base — see [[deploy-posit-connect]].

Reference implementation

bar-dashboard/frontend/src/rds.tsx (barrel) and frontend/src/theme/dta.ts (palette).