chore: initial DSMMG v0.2 — refonte architecturale complète

Mise en place du Design System ManageMate Group v0.2 — refonte du système de tokens (préfixe --mmg-color-*), 9 presets accent user-themable validés WCAG AA, overlays Radix UI + Floating UI, Storybook 8 + Vitest + axe-core en CI, doc Astro Starlight, DESIGN.md (format google-labs-code) et exports tokens DTCG/CSS/ TS/Figma/Tailwind v3 et v4. - 4 packages monorepo pnpm : @managemate/{tokens,css,react,icons} - 62 composants React headless-first (Sheet, HoverCard, ContextMenu, Slider, ToggleGroup, AvatarGroup, UserCard, ProfileHeader, MetricCard, PricingCard, FeatureCard, Text/Display/Eyebrow/Lead…) - Lint contraste WCAG : 37/37 paires AA, branché CI - Toast pile Sonner-style avec ResizeObserver - Theming user (9 presets) sans casser sémantique fixe - Identité Synapse (rose #D12B6A) préservée Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-04 22:07:57 +02:00
parent 5e019857fc
commit 62317f2ad7
172 changed files with 31397 additions and 1 deletions
@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Tokens/Colors",
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Tokens couleur DSMMG. Les sémantiques se réfèrent aux primitives — c'est ce que les composants consomment. L'accent est user-themable via `[data-mmg-accent]`.",
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const Swatch = ({ name, css }: { name: string; css: string }) => (
+  <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+    <div
+      style={{
+        width: "100%",
+        height: 56,
+        borderRadius: 8,
+        background: `var(${css})`,
+        border: "1px solid var(--mmg-color-border)",
+      }}
+    />
+    <div style={{ fontSize: 11, fontFamily: "var(--mmg-font-mono)", color: "var(--mmg-color-text-tertiary)" }}>
+      {css}
+    </div>
+    <div style={{ fontSize: 13, fontWeight: 600 }}>{name}</div>
+  </div>
+);
+
+const Grid = ({ children }: { children: React.ReactNode }) => (
+  <div
+    style={{
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+      gap: 16,
+      marginBottom: 32,
+    }}
+  >
+    {children}
+  </div>
+);
+
+export const Surfaces: Story = {
+  render: () => (
+    <Grid>
+      <Swatch name="page" css="--mmg-color-bg-page" />
+      <Swatch name="surface" css="--mmg-color-bg-surface" />
+      <Swatch name="raised" css="--mmg-color-bg-raised" />
+      <Swatch name="muted" css="--mmg-color-bg-muted" />
+      <Swatch name="subtle" css="--mmg-color-bg-subtle" />
+    </Grid>
+  ),
+};
+
+export const Borders: Story = {
+  render: () => (
+    <Grid>
+      <Swatch name="border" css="--mmg-color-border" />
+      <Swatch name="border-soft" css="--mmg-color-border-soft" />
+      <Swatch name="border-strong" css="--mmg-color-border-strong" />
+    </Grid>
+  ),
+};
+
+export const Text: Story = {
+  render: () => (
+    <Grid>
+      <Swatch name="text-primary" css="--mmg-color-text-primary" />
+      <Swatch name="text-secondary" css="--mmg-color-text-secondary" />
+      <Swatch name="text-tertiary" css="--mmg-color-text-tertiary" />
+      <Swatch name="text-quaternary" css="--mmg-color-text-quaternary" />
+    </Grid>
+  ),
+};
+
+export const Accent: Story = {
+  render: () => (
+    <Grid>
+      <Swatch name="accent" css="--mmg-color-accent" />
+      <Swatch name="accent-hover" css="--mmg-color-accent-hover" />
+      <Swatch name="accent-active" css="--mmg-color-accent-active" />
+      <Swatch name="accent-soft" css="--mmg-color-accent-soft" />
+      <Swatch name="accent-border" css="--mmg-color-accent-border" />
+      <Swatch name="accent-strong" css="--mmg-color-accent-strong" />
+      <Swatch name="accent-on" css="--mmg-color-accent-on" />
+    </Grid>
+  ),
+};
+
+export const Semantic: Story = {
+  render: () => (
+    <>
+      <h3>Success</h3>
+      <Grid>
+        <Swatch name="success" css="--mmg-color-success" />
+        <Swatch name="success-soft" css="--mmg-color-success-soft" />
+        <Swatch name="success-border" css="--mmg-color-success-border" />
+        <Swatch name="success-strong" css="--mmg-color-success-strong" />
+      </Grid>
+      <h3>Warning</h3>
+      <Grid>
+        <Swatch name="warning" css="--mmg-color-warning" />
+        <Swatch name="warning-soft" css="--mmg-color-warning-soft" />
+        <Swatch name="warning-border" css="--mmg-color-warning-border" />
+        <Swatch name="warning-strong" css="--mmg-color-warning-strong" />
+      </Grid>
+      <h3>Danger</h3>
+      <Grid>
+        <Swatch name="danger" css="--mmg-color-danger" />
+        <Swatch name="danger-soft" css="--mmg-color-danger-soft" />
+        <Swatch name="danger-border" css="--mmg-color-danger-border" />
+        <Swatch name="danger-strong" css="--mmg-color-danger-strong" />
+      </Grid>
+      <h3>Info</h3>
+      <Grid>
+        <Swatch name="info" css="--mmg-color-info" />
+        <Swatch name="info-soft" css="--mmg-color-info-soft" />
+        <Swatch name="info-border" css="--mmg-color-info-border" />
+        <Swatch name="info-strong" css="--mmg-color-info-strong" />
+      </Grid>
+    </>
+  ),
+};
+
+const palette = (name: string, label: string) => {
+  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+  return (
+    <>
+      <h3>{label}</h3>
+      <Grid>
+        {shades.map((s) => (
+          <Swatch key={s} name={`${name}-${s}`} css={`--mmg-color-${name}-${s}`} />
+        ))}
+      </Grid>
+    </>
+  );
+};
+
+export const Palettes: Story = {
+  render: () => (
+    <>
+      {palette("synapse", "Synapse (default)")}
+      {palette("rose", "Rose")}
+      {palette("blue", "Blue")}
+      {palette("violet", "Violet")}
+      {palette("green", "Green")}
+      {palette("amber", "Amber")}
+      {palette("red", "Red")}
+      {palette("cyan", "Cyan")}
+      {palette("slate", "Slate")}
+    </>
+  ),
+};