@sharma-divyansh/design-system

Angular 21 design system ported from the eClinicalWorks Figma library.

Install

npm install @sharma-divyansh/design-system

Peer deps: @angular/{common,core,forms} >= 21, rxjs >= 7, tslib >= 2.3.

Usage

import { ButtonComponent, AIChatFieldComponent } from "@sharma-divyansh/design-system";

@Component({
  standalone: true,
  imports: [ButtonComponent, AIChatFieldComponent],
  template: `
    <ecw-button variant="primary">Save</ecw-button>
    <ecw-ai-chat-field (submitted)="onAsk($event)" />
  `,
})
export class DemoComponent { onAsk(q: string) {} }

Global styles

Import the token sheet once in your app's global stylesheet:

@import "@sharma-divyansh/design-system/styles/tokens";

This provides every CSS custom property (color, spacing, radius, typography, shadow) the components rely on, plus the fluid root font-size clamp (12 → 24 px from 1600 → 4K).

Assets

The AIChatbot loader animation ships in @sharma-divyansh/design-system/assets/ai-loader.gif. Wire it into your app's angular.json so it's served at /assets/ai-loader.gif:

"assets": [
  {
    "glob": "**/*",
    "input": "node_modules/@sharma-divyansh/design-system/assets",
    "output": "assets"
  }
]

Icons

Components use Google Material Symbols (Rounded, filled). Add the font in your index.html:

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0..1,0&display=block" />