RGM Design System

Design system partage entre retail-webapp, nvcwebapp et les futures apps OA Data.

La source visuelle principale est le preset shadcn applique au projet. Les composants React sont exposes progressivement au-dessus de cette base.

Scripts

npm install
npm run storybook
npm run test
npm run build

Utilisation future dans une app

import "rgm-design-system/styles.css";

Puis les composants seront importes depuis le package :

import { Button } from "rgm-design-system";

Regle de base

Les composants doivent utiliser les variables et classes du preset (--background, --foreground, --primary, --border, etc.) plutot qu'une couche de tokens custom.

Couches d'overlay

styles.css expose une echelle commune pour tous les overlays :

• --layer-drawer: 40
• --layer-modal: 60
• --layer-popover: 80
• --layer-tooltip: 90
• --layer-toast: 100

Les composants partages appliquent ces variables automatiquement. Les apps consommatrices ne doivent pas ajouter de correctifs de z-index pour ouvrir un modal depuis un drawer.

Skills Codex du projet

Les workflows et regles de collaboration du projet sont documentes dans skills/. Le skill de contexte principal est skills/rgm-design-system-context/SKILL.md.