Dinawo
62317f2ad7
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>
52 lines
2.0 KiB
CSS
52 lines
2.0 KiB
CSS
/* ════════════════════════════════════════════════════════════════
|
|
HoverCard — preview riche au survol (Radix UI HoverCard).
|
|
Plus large que Tooltip, contenu structuré, animation douce.
|
|
════════════════════════════════════════════════════════════════ */
|
|
|
|
.mmg-hover-card {
|
|
z-index: var(--mmg-z-tooltip);
|
|
width: 320px;
|
|
max-width: calc(100vw - 32px);
|
|
padding: var(--mmg-space-4);
|
|
background: var(--mmg-color-bg-surface);
|
|
border: 1px solid var(--mmg-color-border);
|
|
border-radius: 14px;
|
|
box-shadow:
|
|
0 1px 1px rgba(0, 0, 0, 0.04),
|
|
0 12px 32px -6px rgba(15, 15, 30, 0.16),
|
|
0 4px 8px -2px rgba(15, 15, 30, 0.08);
|
|
font-size: var(--mmg-font-size-sm);
|
|
color: var(--mmg-color-text-primary);
|
|
animation: mmg-hover-card-in 220ms var(--mmg-ease-emphasis);
|
|
}
|
|
.mmg-hover-card[data-state="closed"] {
|
|
animation: mmg-hover-card-out 160ms var(--mmg-ease-default);
|
|
}
|
|
[data-mmg-theme="dark"] .mmg-hover-card {
|
|
background: color-mix(in srgb, var(--mmg-color-bg-raised) 92%, transparent);
|
|
backdrop-filter: blur(12px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(12px) saturate(140%);
|
|
box-shadow:
|
|
0 1px 0 rgba(255, 255, 255, 0.04) inset,
|
|
0 12px 32px -6px rgba(0, 0, 0, 0.55),
|
|
0 4px 8px -2px rgba(0, 0, 0, 0.40);
|
|
}
|
|
|
|
.mmg-hover-card__arrow {
|
|
fill: var(--mmg-color-bg-surface);
|
|
filter: drop-shadow(0 -1px 0 var(--mmg-color-border));
|
|
}
|
|
[data-mmg-theme="dark"] .mmg-hover-card__arrow {
|
|
fill: var(--mmg-color-bg-raised);
|
|
}
|
|
|
|
@keyframes mmg-hover-card-in {
|
|
from { opacity: 0; transform: translateY(-4px) scale(0.98); }
|
|
}
|
|
@keyframes mmg-hover-card-out {
|
|
to { opacity: 0; transform: translateY(-4px) scale(0.98); }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.mmg-hover-card { animation: none !important; }
|
|
}
|