Shield Docs

Design System

Team Intern

Architektur

Ueberblick ueber die technische Architektur des Shield Design Systems.

Monorepo-Struktur

Das Projekt nutzt pnpm Workspaces mit einer klaren Trennung zwischen packages/ (shared libraries) und apps/ (consumer apps).

  • packages/webcomponents – Stencil Web Components
  • packages/tokens – Design Tokens via Style Dictionary
  • packages/css-utils – Utility CSS Klassen
  • packages/react – React Wrapper
  • packages/angular – Angular Wrapper

Package-Abhaengigkeiten

Web Components sind die zentrale Quelle. React- und Angular-Wrapper werden daraus generiert. Tokens fliessen als CSS Custom Properties in alle Packages.

Build Pipeline

Der Build laeuft ueber pnpm Scripts. Astro generiert die statische Doku-Seite, Stencil kompiliert die Web Components, Style Dictionary baut die Tokens.