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>
This commit is contained in:
Dinawo
@@ -0,0 +1,173 @@
|
||||
{
|
||||
"$schema": "https://schemas.tr.designtokens.org/format/",
|
||||
"color": {
|
||||
"neutral": {
|
||||
"0": { "$value": "#FFFFFF", "$type": "color" },
|
||||
"50": { "$value": "#F7F6FB", "$type": "color" },
|
||||
"100": { "$value": "#F0EFF9", "$type": "color" },
|
||||
"150": { "$value": "#EDEDFA", "$type": "color" },
|
||||
"200": { "$value": "#E4E3F4", "$type": "color" },
|
||||
"300": { "$value": "#C9C7E0", "$type": "color" },
|
||||
"400": { "$value": "#AAA8C9", "$type": "color" },
|
||||
"500": { "$value": "#7875A1", "$type": "color" },
|
||||
"600": { "$value": "#56557A", "$type": "color" },
|
||||
"700": { "$value": "#3B3A56", "$type": "color" },
|
||||
"800": { "$value": "#1F1E32", "$type": "color" },
|
||||
"900": { "$value": "#111120", "$type": "color" }
|
||||
},
|
||||
"synapse": {
|
||||
"50": { "$value": "#FEF0F4", "$type": "color" },
|
||||
"100": { "$value": "#FCE0EA", "$type": "color" },
|
||||
"200": { "$value": "#FAD0DF", "$type": "color" },
|
||||
"300": { "$value": "#F4A0BD", "$type": "color" },
|
||||
"400": { "$value": "#ED608E", "$type": "color" },
|
||||
"500": { "$value": "#D12B6A", "$type": "color" },
|
||||
"600": { "$value": "#BA245F", "$type": "color" },
|
||||
"700": { "$value": "#A82257", "$type": "color" },
|
||||
"800": { "$value": "#831B45", "$type": "color" },
|
||||
"900": { "$value": "#5A132F", "$type": "color" }
|
||||
},
|
||||
"rose": {
|
||||
"50": { "$value": "#FFF1F2", "$type": "color" },
|
||||
"100": { "$value": "#FFE4E6", "$type": "color" },
|
||||
"200": { "$value": "#FECDD3", "$type": "color" },
|
||||
"300": { "$value": "#FDA4AF", "$type": "color" },
|
||||
"400": { "$value": "#FB7185", "$type": "color" },
|
||||
"500": { "$value": "#E11D48", "$type": "color" },
|
||||
"600": { "$value": "#BE123C", "$type": "color" },
|
||||
"700": { "$value": "#9F1239", "$type": "color" },
|
||||
"800": { "$value": "#881337", "$type": "color" },
|
||||
"900": { "$value": "#4C0519", "$type": "color" }
|
||||
},
|
||||
"blue": {
|
||||
"50": { "$value": "#EFF6FF", "$type": "color" },
|
||||
"100": { "$value": "#DBEAFE", "$type": "color" },
|
||||
"200": { "$value": "#BFDBFE", "$type": "color" },
|
||||
"300": { "$value": "#93C5FD", "$type": "color" },
|
||||
"400": { "$value": "#60A5FA", "$type": "color" },
|
||||
"500": { "$value": "#2563EB", "$type": "color" },
|
||||
"600": { "$value": "#1D4ED8", "$type": "color" },
|
||||
"700": { "$value": "#1E40AF", "$type": "color" },
|
||||
"800": { "$value": "#1E3A8A", "$type": "color" },
|
||||
"900": { "$value": "#172554", "$type": "color" }
|
||||
},
|
||||
"violet": {
|
||||
"50": { "$value": "#F5F3FF", "$type": "color" },
|
||||
"100": { "$value": "#EDE9FE", "$type": "color" },
|
||||
"200": { "$value": "#DDD6FE", "$type": "color" },
|
||||
"300": { "$value": "#C4B5FD", "$type": "color" },
|
||||
"400": { "$value": "#A78BFA", "$type": "color" },
|
||||
"500": { "$value": "#7C3AED", "$type": "color" },
|
||||
"600": { "$value": "#6D28D9", "$type": "color" },
|
||||
"700": { "$value": "#5B21B6", "$type": "color" },
|
||||
"800": { "$value": "#4C1D95", "$type": "color" },
|
||||
"900": { "$value": "#2E1065", "$type": "color" }
|
||||
},
|
||||
"green": {
|
||||
"50": { "$value": "#ECFDF5", "$type": "color" },
|
||||
"100": { "$value": "#D1FAE5", "$type": "color" },
|
||||
"200": { "$value": "#BAEFD3", "$type": "color" },
|
||||
"300": { "$value": "#6EE7B7", "$type": "color" },
|
||||
"400": { "$value": "#34D399", "$type": "color" },
|
||||
"500": { "$value": "#0E9F6E", "$type": "color" },
|
||||
"600": { "$value": "#0B8861", "$type": "color" },
|
||||
"700": { "$value": "#086B4D", "$type": "color" },
|
||||
"800": { "$value": "#064E3B", "$type": "color" },
|
||||
"900": { "$value": "#022C22", "$type": "color" }
|
||||
},
|
||||
"amber": {
|
||||
"50": { "$value": "#FFFBEB", "$type": "color" },
|
||||
"100": { "$value": "#FEF3C7", "$type": "color" },
|
||||
"200": { "$value": "#FDE68A", "$type": "color" },
|
||||
"300": { "$value": "#FCD34D", "$type": "color" },
|
||||
"400": { "$value": "#FBBF24", "$type": "color" },
|
||||
"500": { "$value": "#D97706", "$type": "color" },
|
||||
"600": { "$value": "#B45309", "$type": "color" },
|
||||
"700": { "$value": "#92400E", "$type": "color" },
|
||||
"800": { "$value": "#78350F", "$type": "color" },
|
||||
"900": { "$value": "#451A03", "$type": "color" }
|
||||
},
|
||||
"red": {
|
||||
"50": { "$value": "#FEF2F2", "$type": "color" },
|
||||
"100": { "$value": "#FEE2E2", "$type": "color" },
|
||||
"200": { "$value": "#FECACA", "$type": "color" },
|
||||
"300": { "$value": "#FCA5A5", "$type": "color" },
|
||||
"400": { "$value": "#F87171", "$type": "color" },
|
||||
"500": { "$value": "#DC2626", "$type": "color" },
|
||||
"600": { "$value": "#B91C1C", "$type": "color" },
|
||||
"700": { "$value": "#991B1B", "$type": "color" },
|
||||
"800": { "$value": "#7F1D1D", "$type": "color" },
|
||||
"900": { "$value": "#450A0A", "$type": "color" }
|
||||
},
|
||||
"cyan": {
|
||||
"50": { "$value": "#ECFEFF", "$type": "color" },
|
||||
"100": { "$value": "#CFFAFE", "$type": "color" },
|
||||
"200": { "$value": "#A5F3FC", "$type": "color" },
|
||||
"300": { "$value": "#67E8F9", "$type": "color" },
|
||||
"400": { "$value": "#22D3EE", "$type": "color" },
|
||||
"500": { "$value": "#0891B2", "$type": "color" },
|
||||
"600": { "$value": "#0E7490", "$type": "color" },
|
||||
"700": { "$value": "#155E75", "$type": "color" },
|
||||
"800": { "$value": "#164E63", "$type": "color" },
|
||||
"900": { "$value": "#083344", "$type": "color" }
|
||||
},
|
||||
"slate": {
|
||||
"50": { "$value": "#F8FAFC", "$type": "color" },
|
||||
"100": { "$value": "#F1F5F9", "$type": "color" },
|
||||
"200": { "$value": "#E2E8F0", "$type": "color" },
|
||||
"300": { "$value": "#CBD5E1", "$type": "color" },
|
||||
"400": { "$value": "#94A3B8", "$type": "color" },
|
||||
"500": { "$value": "#475569", "$type": "color" },
|
||||
"600": { "$value": "#334155", "$type": "color" },
|
||||
"700": { "$value": "#1E293B", "$type": "color" },
|
||||
"800": { "$value": "#0F172A", "$type": "color" },
|
||||
"900": { "$value": "#020617", "$type": "color" }
|
||||
}
|
||||
},
|
||||
"spacing": {
|
||||
"0": { "$value": "0px", "$type": "dimension" },
|
||||
"1": { "$value": "4px", "$type": "dimension" },
|
||||
"2": { "$value": "8px", "$type": "dimension" },
|
||||
"3": { "$value": "12px", "$type": "dimension" },
|
||||
"4": { "$value": "16px", "$type": "dimension" },
|
||||
"5": { "$value": "20px", "$type": "dimension" },
|
||||
"6": { "$value": "24px", "$type": "dimension" },
|
||||
"7": { "$value": "32px", "$type": "dimension" },
|
||||
"8": { "$value": "40px", "$type": "dimension" },
|
||||
"9": { "$value": "48px", "$type": "dimension" },
|
||||
"10": { "$value": "64px", "$type": "dimension" },
|
||||
"11": { "$value": "80px", "$type": "dimension" },
|
||||
"12": { "$value": "120px", "$type": "dimension" }
|
||||
},
|
||||
"radius": {
|
||||
"sm": { "$value": "8px", "$type": "dimension" },
|
||||
"md": { "$value": "12px", "$type": "dimension" },
|
||||
"card": { "$value": "20px", "$type": "dimension" },
|
||||
"panel": { "$value": "24px", "$type": "dimension" },
|
||||
"icon": { "$value": "12px", "$type": "dimension" },
|
||||
"pill": { "$value": "9999px", "$type": "dimension" }
|
||||
},
|
||||
"fontSize": {
|
||||
"xs": { "$value": "11px", "$type": "dimension" },
|
||||
"sm": { "$value": "13px", "$type": "dimension" },
|
||||
"base": { "$value": "15px", "$type": "dimension" },
|
||||
"lg": { "$value": "17px", "$type": "dimension" },
|
||||
"xl": { "$value": "20px", "$type": "dimension" },
|
||||
"2xl": { "$value": "24px", "$type": "dimension" },
|
||||
"3xl": { "$value": "30px", "$type": "dimension" },
|
||||
"4xl": { "$value": "36px", "$type": "dimension" },
|
||||
"5xl": { "$value": "48px", "$type": "dimension" }
|
||||
},
|
||||
"fontWeight": {
|
||||
"regular": { "$value": 400, "$type": "fontWeight" },
|
||||
"medium": { "$value": 500, "$type": "fontWeight" },
|
||||
"semi": { "$value": 600, "$type": "fontWeight" },
|
||||
"bold": { "$value": 700, "$type": "fontWeight" },
|
||||
"extra": { "$value": 800, "$type": "fontWeight" }
|
||||
},
|
||||
"duration": {
|
||||
"fast": { "$value": "120ms", "$type": "duration" },
|
||||
"base": { "$value": "200ms", "$type": "duration" },
|
||||
"slow": { "$value": "320ms", "$type": "duration" }
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user