Draft

novamera-theme — Design System

Clientnovameraactive

Shared React component library and CSS token package (@propel-ai/novamera.theme) used across all Novamera frontend applications. Published to GitHub Packages under the @propel-ai scope.

flowchart LR
    THEME["@propel-ai/novamera.theme
(npm · GitHub Packages)"] --> FE1[fe-sim] THEME --> FE2[fe-datahub] THEME --> FE3[fe-gpr-dashboard] THEME --> FE4[fe-borehole-labelling] style THEME fill:#EDEDFF,stroke:#3B54F7

Components: Button, Card, Badge, Input, Modal, DataGrid (via @tanstack/react-table), Menu, Tooltip (via @tippyjs/react).

CSS layers:

@import '@propel-ai/novamera.theme/css/theme';   /* full bundle */
/* or granularly: reset · variables · base · components */
  • Peer deps: React 18/19, Zustand 4/5, @tanstack/react-table ^8, @tippyjs/react ^4.
  • Tailwind v4: CSS files wrapped in @layer base for correct ordering.
  • Install: add @propel-ai:registry=https://npm.pkg.github.com to .npmrc, then npm install @propel-ai/novamera.theme.