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>
124 lines
5.2 KiB
CSS
124 lines
5.2 KiB
CSS
/* ════════════════════════════════════════════════════════════════
|
|
FeatureCard — icône + titre + description + lien.
|
|
Variant `glow` ajoute un border-gradient animé au hover (Vercel-style).
|
|
════════════════════════════════════════════════════════════════ */
|
|
|
|
.mmg-feature-card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--mmg-space-3);
|
|
padding: var(--mmg-space-6);
|
|
background: var(--mmg-color-bg-surface);
|
|
border: 1px solid var(--mmg-color-border);
|
|
border-radius: var(--mmg-radius-card);
|
|
isolation: isolate;
|
|
transition:
|
|
transform var(--mmg-duration-base) var(--mmg-ease-emphasis),
|
|
border-color var(--mmg-duration-base) var(--mmg-ease-default);
|
|
}
|
|
.mmg-feature-card:hover {
|
|
transform: translateY(-2px);
|
|
border-color: var(--mmg-color-border-strong);
|
|
}
|
|
|
|
/* — Icon coloré ——————————————————————————————— */
|
|
.mmg-feature-card__icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 14px;
|
|
margin-bottom: var(--mmg-space-2);
|
|
}
|
|
.mmg-feature-card__icon--brand { background: var(--mmg-color-accent-soft); color: var(--mmg-color-accent); }
|
|
.mmg-feature-card__icon--blue { background: var(--mmg-color-blue-100); color: var(--mmg-color-blue-600); }
|
|
.mmg-feature-card__icon--green { background: var(--mmg-color-green-100); color: var(--mmg-color-green-600); }
|
|
.mmg-feature-card__icon--amber { background: var(--mmg-color-amber-100); color: var(--mmg-color-amber-600); }
|
|
.mmg-feature-card__icon--violet { background: var(--mmg-color-violet-100); color: var(--mmg-color-violet-600); }
|
|
.mmg-feature-card__icon--neutral { background: var(--mmg-color-bg-muted); color: var(--mmg-color-text-secondary); }
|
|
|
|
[data-mmg-theme="dark"] .mmg-feature-card__icon--blue { background: rgba(96, 165, 250, 0.16); color: var(--mmg-color-blue-d-300); }
|
|
[data-mmg-theme="dark"] .mmg-feature-card__icon--green { background: rgba(52, 211, 153, 0.16); color: var(--mmg-color-green-d-300); }
|
|
[data-mmg-theme="dark"] .mmg-feature-card__icon--amber { background: rgba(251, 191, 36, 0.16); color: var(--mmg-color-amber-d-300); }
|
|
[data-mmg-theme="dark"] .mmg-feature-card__icon--violet { background: rgba(167, 139, 250, 0.16); color: var(--mmg-color-violet-d-300); }
|
|
|
|
.mmg-feature-card__title {
|
|
margin: 0;
|
|
font-size: var(--mmg-font-size-lg);
|
|
font-weight: var(--mmg-font-weight-bold);
|
|
letter-spacing: -0.01em;
|
|
color: var(--mmg-color-text-primary);
|
|
}
|
|
.mmg-feature-card__desc {
|
|
margin: 0;
|
|
font-size: var(--mmg-font-size-sm);
|
|
line-height: 1.55;
|
|
color: var(--mmg-color-text-tertiary);
|
|
}
|
|
.mmg-feature-card__link {
|
|
margin-top: auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: var(--mmg-font-size-sm);
|
|
font-weight: var(--mmg-font-weight-semi);
|
|
color: var(--mmg-color-accent);
|
|
text-decoration: none;
|
|
transition: gap var(--mmg-duration-fast) var(--mmg-ease-emphasis);
|
|
}
|
|
.mmg-feature-card__link:hover {
|
|
gap: 8px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* — Variant glow : hover propre (border accent + ombre teintée + lift) ——
|
|
L'ancienne version utilisait un conic-gradient masqué qui produisait
|
|
un effet fragmenté/coupé selon les browsers (mask-composite: exclude
|
|
pas toujours fiable, animation de rotation visible derrière le bord
|
|
arrondi). Cette version : bordure accent franche, ombre teintée à 3
|
|
niveaux, halo radial subtil interne, micro-lift de l'icône. Sobre,
|
|
universel, pas de transform: rotate qui peut "déborder". */
|
|
.mmg-feature-card--glow {
|
|
transition:
|
|
transform var(--mmg-duration-base) var(--mmg-ease-emphasis),
|
|
border-color var(--mmg-duration-base) var(--mmg-ease-default),
|
|
box-shadow var(--mmg-duration-base) var(--mmg-ease-default);
|
|
}
|
|
.mmg-feature-card--glow:hover {
|
|
transform: translateY(-3px);
|
|
border-color: var(--mmg-color-accent);
|
|
box-shadow:
|
|
0 0 0 1px var(--mmg-color-accent),
|
|
0 12px 40px -10px color-mix(in srgb, var(--mmg-color-accent) 38%, transparent),
|
|
0 4px 12px -4px color-mix(in srgb, var(--mmg-color-accent) 22%, transparent);
|
|
}
|
|
.mmg-feature-card--glow .mmg-feature-card__icon {
|
|
transition: transform var(--mmg-duration-base) var(--mmg-ease-emphasis);
|
|
}
|
|
.mmg-feature-card--glow:hover .mmg-feature-card__icon {
|
|
transform: scale(1.06);
|
|
}
|
|
/* Halo radial interne très subtil — donne de la profondeur sans alourdir */
|
|
.mmg-feature-card--glow::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
background: radial-gradient(circle at 50% 0%,
|
|
color-mix(in srgb, var(--mmg-color-accent) 8%, transparent) 0%,
|
|
transparent 60%);
|
|
opacity: 0;
|
|
transition: opacity var(--mmg-duration-base) var(--mmg-ease-default);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
.mmg-feature-card--glow:hover::after { opacity: 1; }
|
|
.mmg-feature-card--glow > * { position: relative; z-index: 1; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.mmg-feature-card--glow:hover { transform: none; }
|
|
.mmg-feature-card--glow:hover .mmg-feature-card__icon { transform: none; }
|
|
}
|