0 ? '1px solid var(--border-1)' : 'none',
+ color: it.danger ? 'var(--err)' : 'var(--ink-1)', fontSize: 13,
+ }}>
+ {it.label}
+
+ ))}
+
+ } />
+
+
+
+
+ ← swipe-moi dans un sens ou l'autre →
+
+
+ } />
+
+
+ {/* CLAVIER VIRTUEL */}
+
+
+ Sur mobile, le clavier qui s'affiche dépend de la prop keyboard (attribut HTML inputmode).
+ Choisis le BON type pour faire gagner du temps à l'utilisateur — exemple : keyboard="numeric" pour un code OTP fait apparaître directement le pavé numérique au lieu du clavier complet.
+
+
+ {KEYBOARD_CATALOG.map((k) => (
+
+
+ {k.name}
+
+
+
{k.desc}
+
+ Usage : {k.usage}
+
+
+ ))}
+
+
+ {/* AUTOCOMPLETE */}
+
+
+ L'attribut autocomplete dit au système ce que représente le champ.
+ Sur iOS/Android, ça déclenche : remplissage automatique (nom, email, adresse), proposition du mot de passe enregistré, génération d'un nouveau mot de passe, lecture auto du code SMS reçu.
+
+
+ {AUTOCOMPLETE_CATALOG.map((a) => (
+
+ {a.name}
+ {a.usage}
+
+ ))}
+
+
+ {/* ENTER KEY HINT */}
+
+
+ La touche en bas à droite du clavier peut afficher un mot différent selon le contexte (au lieu du standard "Entrée").
+
+
+ {ENTER_HINT_CATALOG.map((e) => (
+
+ ))}
+
+
+ {/* CHEAT SHEET */}
+
+
+
+ Email
+ keyboard="email" + autocomplete="email" + autocapitalize="off"
+
+ Mot de passe
+ type="password" + autocomplete="current-password" (ou "new-password" en inscription)
+
+ Code OTP SMS
+ keyboard="numeric" + autocomplete="one-time-code" + maxLength=6
+
+ Téléphone
+ keyboard="tel" + autocomplete="tel"
+
+ Recherche
+ keyboard="search" + enterHint="search"
+
+ Prix / mesure
+ keyboard="decimal"
+
+ Adresse
+ autocomplete="address-line1", puis postal-code, country
+
+ Texte libre
+ autocapitalize="sentences" + spellCheck=true
+
+
+ );
+}
+
+/* ============================================================
+ APP ROOT
+ ============================================================ */
+function PhoneAppSaisie({ theme }) {
+ const [tab, setTab] = uDS('login');
+ const [toast, setToast] = uDS(null);
+ const [sheet, setSheet] = uDS(false);
+ const showToast = (msg) => setToast(msg);
+
+ return (
+
+
+ {tab === 'login' && setTab('profile')} showToast={showToast} />}
+ {tab === 'profile' && setSheet(true)} />}
+ {tab === 'form' &&
+
+
+
+
setSheet(false)} title="Paramètres rapides">
+
+ {}} />
+ {}} />} />
+ {}} />} />
+
+
+ { setSheet(false); setTab('login'); }} />
+
+
+
+
setToast(null)} message={toast} variant="ok" />
+
+
+
+
+ Exemple mobile · saisie login · profil · form · swipe · clavier virtuel
+
+
+
+
+
+
+ setDevice('ios')}>iOS
+ setDevice('android')}>Android
+
+
+ setTheme('dark')}>Sombre
+ setTheme('light')}>Clair
+
+
+
+ {device === 'ios' &&
}
+
+
+
↑ teste les écrans, swipe les lignes, joue avec les formulaires
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(Exemple mobile — saisie & formulaires
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/design_system/package-smartphone/examples/exemple-mobile.html b/design_system/package-smartphone/examples/exemple-mobile.html
new file mode 100644
index 0000000..d32a7d4
--- /dev/null
+++ b/design_system/package-smartphone/examples/exemple-mobile.html
@@ -0,0 +1,952 @@
+
+
+
+ Exemple mobile — mon design system
+
+
+
+
+
+
+
+
+
+
+
diff --git a/design_system/package-smartphone/examples/mobile-apps.jsx b/design_system/package-smartphone/examples/mobile-apps.jsx
new file mode 100644
index 0000000..7428f02
--- /dev/null
+++ b/design_system/package-smartphone/examples/mobile-apps.jsx
@@ -0,0 +1,659 @@
+/* ============================================================
+ mobile-apps.jsx
+ Composants pour patterns d'app courants : avatar+menu,
+ onboarding, chat, calendrier, maps, recherche+filtres,
+ scanner QR, caméra, gestion fichiers.
+ ============================================================ */
+
+const { useState: uA, useRef: rA, useEffect: eA } = React;
+
+/* ============================================================
+ Avatar — bouton rond utilisateur (initiales ou icône)
+ Nom système : Avatar
+ ============================================================ */
+function Avatar({ name = 'M', color = 'var(--accent)', size = 36, onClick, active }) {
+ const initials = name.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase();
+ return (
+ {initials}
+ );
+}
+
+/* ============================================================
+ AvatarMenu — popup descendant depuis l'avatar
+ Nom système : AvatarMenu
+ Items : [{icon, label, onClick, danger}]
+ ============================================================ */
+function AvatarMenu({ open, onClose, name, email, items = [] }) {
+ if (!open) return null;
+ return (
+
+
+
e.stopPropagation()} style={{
+ position: 'absolute', top: 56, right: 12,
+ width: 240,
+ background: 'var(--bg-3)',
+ border: '1px solid var(--border-2)',
+ borderRadius: 14,
+ overflow: 'hidden',
+ boxShadow: '0 14px 32px rgba(0,0,0,0.5)',
+ animation: 'drop-in .2s cubic-bezier(.3,.7,.3,1.2)',
+ transformOrigin: 'top right',
+ }}>
+
+
+
+
{name}
+ {email &&
{email}
}
+
+
+ {items.map((it, i) => (
+
{ onClose(); it.onClick && it.onClick(); }}
+ className="touch-press" style={{
+ width: '100%', minHeight: 44,
+ padding: '10px 14px',
+ background: 'transparent', border: 'none',
+ borderTop: i > 0 ? '1px solid var(--border-1)' : 'none',
+ color: it.danger ? 'var(--err)' : 'var(--ink-1)',
+ display: 'flex', alignItems: 'center', gap: 10,
+ fontFamily: 'var(--font-ui)', fontSize: 14, fontWeight: 500,
+ cursor: 'pointer', textAlign: 'left',
+ WebkitTapHighlightColor: 'transparent',
+ }}>
+ {it.label}
+ {!it.danger &&
+ ))}
+
+
+
+ Passer
+
+
+
+
+
+
{slides[i].title}
+
{slides[i].desc}
+
+
+
+ {slides.map((_, j) => (
+ setI(j)} style={{
+ width: i === j ? 24 : 8, height: 8, borderRadius: 4,
+ background: i === j ? 'var(--accent)' : 'var(--border-3)',
+ transition: 'width .25s, background .2s',
+ cursor: 'pointer',
+ }} />
+ ))}
+
+
isLast ? onFinish() : setI(i + 1)}>
+ {isLast ? 'Commencer' : 'Suivant'}
+
+
+
+
+
{text}
+
+ {time}
+ {me && status === 'sent' && ✓ }
+ {me && status === 'read' && ✓✓ }
+
+
+
+
+
+
+ {v ? (
+
{ onSend && onSend(v); setV(''); }}
+ className="touch-press" style={{
+ width: 36, height: 36, borderRadius: '50%',
+ background: 'var(--accent)', color: 'var(--bg-1)',
+ border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
+ cursor: 'pointer', boxShadow: '0 2px 6px var(--accent-glow)',
+ WebkitTapHighlightColor: 'transparent',
+ }}>
+ ) : (
+
+ )}
+
+
+
+ {['L', 'M', 'M', 'J', 'V', 'S', 'D'].map((d, i) => (
+
{d}
+ ))}
+ {cells.map((d, i) => {
+ const isToday = d === today.getDate() && month === today.getMonth() && year === today.getFullYear();
+ const isSel = selected && d === selected.getDate() && month === selected.getMonth() && year === selected.getFullYear();
+ const hasEvent = d && events.has(d);
+ return (
+
d && onSelect && onSelect(new Date(year, month, d))}
+ disabled={!d}
+ className="touch-press"
+ style={{
+ aspectRatio: '1',
+ background: isSel ? 'var(--accent)' : isToday ? 'var(--accent-tint)' : 'transparent',
+ color: isSel ? 'var(--bg-1)' : isToday ? 'var(--accent)' : (d ? 'var(--ink-1)' : 'transparent'),
+ border: 'none', borderRadius: 8,
+ fontFamily: 'var(--font-mono)', fontSize: 13,
+ fontWeight: isSel || isToday ? 700 : 500,
+ cursor: d ? 'pointer' : 'default',
+ position: 'relative',
+ WebkitTapHighlightColor: 'transparent',
+ }}>
+ {d}
+ {hasEvent && (
+
+ );
+ })}
+
+
+ {/* fond carte stylisé */}
+
+
+
+
+
+
+ {/* pins */}
+ {pins.map((p, i) => (
+
+
+
+ {p.label && (
+
{p.label}
+ )}
+
+ ))}
+
+ {options.map((o) => {
+ const v = typeof o === 'string' ? o : o.value;
+ const l = typeof o === 'string' ? o : o.label;
+ const ic = typeof o === 'object' ? o.icon : null;
+ const active = value.includes(v);
+ return (
+ toggle(v)} className="touch-press" style={{
+ flex: '0 0 auto',
+ padding: '6px 12px',
+ background: active ? 'var(--accent)' : 'var(--bg-3)',
+ color: active ? 'var(--bg-1)' : 'var(--ink-2)',
+ border: `1px solid ${active ? 'var(--accent)' : 'var(--border-2)'}`,
+ borderRadius: 999,
+ display: 'inline-flex', alignItems: 'center', gap: 6,
+ cursor: 'pointer',
+ fontFamily: 'var(--font-ui)', fontSize: 12, fontWeight: 600,
+ WebkitTapHighlightColor: 'transparent',
+ }}>
+ {ic &&
+ );
+ })}
+
+ );
+}
+
+/* ============================================================
+ QrScannerView — viseur scanner code-barres / QR
+ Nom système : QrScannerView
+ ============================================================ */
+function QrScannerView({ onCapture }) {
+ return (
+
+ {/* fake camera feed = grain animé */}
+
+ {/* visée centrale */}
+
+ {/* 4 coins */}
+ {[
+ { top: 0, left: 0, br: '4px 0 0 0' },
+ { top: 0, right: 0, br: '0 4px 0 0' },
+ { bottom: 0, left: 0, br: '0 0 0 4px' },
+ { bottom: 0, right: 0, br: '0 0 4px 0' },
+ ].map((c, i) => (
+
+ ))}
+ {/* ligne scan animée */}
+
+
+
+ {/* overlay assombri hors visée */}
+
+ {/* texte */}
+
Pointe vers un QR code ou code-barres
+ {/* boutons bas */}
+
+ onCapture && onCapture('demo')} className="touch-press" style={{
+ width: 70, height: 70, borderRadius: '50%',
+ background: 'var(--accent)', border: '4px solid #fff',
+ color: 'var(--bg-1)', cursor: 'pointer',
+ display: 'flex', alignItems: 'center', justifyContent: 'center',
+ boxShadow: '0 4px 12px var(--accent-glow)',
+ WebkitTapHighlightColor: 'transparent',
+ }}>
+
+
+ {/* fake scene */}
+
+ {/* règle des tiers */}
+
+ {[33.33, 66.66].map((p) => (
+
+
+
+
+ ))}
+
+ {/* top bar */}
+
+ {[
+ { icon: 'moon', label: 'Flash' },
+ { icon: 'clock', label: 'Minuteur' },
+ { icon: 'grid', label: 'Grille' },
+ ].map((b) => (
+
+ {/* mode chips */}
+
+ Vidéo
+ Photo
+ Portrait
+
+ {/* bottom controls */}
+
+
+
onShoot && onShoot()} className="touch-press" style={{
+ width: 76, height: 76, borderRadius: '50%',
+ background: '#fff', border: '4px solid rgba(255,255,255,0.4)',
+ cursor: 'pointer',
+ boxShadow: '0 0 0 4px rgba(0,0,0,0.4)',
+ WebkitTapHighlightColor: 'transparent',
+ }}/>
+
+
+ {items.map((it) => (
+
onOpen && onOpen(it)}
+ leftActions={[
+ { label: 'Suppr.', icon: 'close', color: 'var(--err)',
+ onClick: () => onAction && onAction('delete', it) },
+ ]}
+ rightActions={[
+ { label: 'Renom.', icon: 'cog', color: 'var(--info)',
+ onClick: () => onAction && onAction('rename', it) },
+ { label: 'Partag.', icon: 'download', color: 'var(--accent)',
+ onClick: () => onAction && onAction('share', it) },
+ ]}>
+
+
+
+
+
{it.name}
+
+ {it.date || ''} {it.size != null && `· ${sizeFmt(it.size)}`}
+
+
+ {it.type === 'folder' &&
}
+
+ ))}
+
+ {label && (
+
+ {label}{required && * }
+
+ )}
+ {children}
+ {(error || hint) && (
+
{error || hint}
+ )}
+
+ {icon &&
+ );
+}
+
+/* ============================================================
+ DateInput — date picker natif mobile
+ Nom système : DateInput
+ ============================================================ */
+function DateInput({ value, onChange, mode = 'date' }) {
+ // mode : 'date' | 'datetime-local' | 'time' | 'month' | 'week'
+ const icons = { date: 'clock', 'datetime-local': 'clock', time: 'clock', month: 'clock', week: 'clock' };
+ return (
+
+
+ );
+}
+
+/* ============================================================
+ Dropdown — select natif stylisé
+ Nom système : Dropdown
+ ============================================================ */
+function Dropdown({ value, onChange, options, placeholder = 'Choisir…' }) {
+ return (
+
+ onChange(e.target.value)} style={{
+ flex: 1, minWidth: 0,
+ background: 'transparent', border: 'none', outline: 'none',
+ color: value ? 'var(--ink-1)' : 'var(--ink-3)',
+ fontFamily: 'var(--font-ui)', fontSize: 15,
+ appearance: 'none', WebkitAppearance: 'none',
+ paddingRight: 24,
+ }}>
+ {placeholder}
+ {options.map((o) => (
+ typeof o === 'string'
+ ? {o}
+ : {o.label}
+ ))}
+
+
+ );
+}
+
+/* ============================================================
+ CheckboxItem — case à cocher (style iOS)
+ Nom système : CheckboxItem
+ Cas : oui/non sur une option, sélection multiple dans une liste
+ ============================================================ */
+function CheckboxItem({ checked, onChange, label, description }) {
+ return (
+
+
+ {checked &&
+
+
{label}
+ {description &&
{description}
}
+
+ );
+}
+
+/* ============================================================
+ RadioGroup — groupe d'options exclusives
+ Nom système : RadioGroup
+ ============================================================ */
+function RadioGroup({ value, onChange, options }) {
+ return (
+
+ );
+}
+
+/* ============================================================
+ MediaInsert — boutons "insérer..." pour image/vidéo/audio/GPS
+ Nom système : MediaInsert
+ Cas : ajouter une pièce jointe dans un formulaire mobile.
+ Note : utilise les API natives via
+ {items.map((it) => (
+
+ {it.label}
+ {it.hint}
+ {!it.special && (
+
+ ))}
+
+ );
+}
+
+/* ============================================================
+ AvatarLogo — gros logo rond pour écran de connexion
+ Nom système : AvatarLogo
+ ============================================================ */
+function AvatarLogo({ icon = 'server', size = 80, glow = true }) {
+ return (
+
+
+ );
+}
+
+/* ============================================================
+ BiometricButton — bouton biométrie (Face ID / Touch ID)
+ Nom système : BiometricButton
+ ============================================================ */
+function BiometricButton({ kind = 'face', label, onClick }) {
+ const lbl = label || (kind === 'face' ? 'Face ID' : 'Touch ID');
+ return (
+
+
+ );
+}
+
+Object.assign(window, {
+ FormField, TextInput, DateInput, Dropdown,
+ CheckboxItem, RadioGroup, MediaInsert,
+ AvatarLogo, BiometricButton,
+});
+
+/* ============================================================
+ CATALOGUE KEYBOARD — pour la doc
+ ============================================================ */
+const KEYBOARD_CATALOG = [
+ { name: 'text', desc: 'Clavier standard (lettres + chiffres).', usage: 'Tout texte libre, noms.' },
+ { name: 'numeric', desc: 'Pavé numérique sans signe ni virgule.', usage: 'Codes PIN, OTP, références numériques.' },
+ { name: 'decimal', desc: 'Pavé numérique avec virgule/point.', usage: 'Prix, mesures, montants.' },
+ { name: 'tel', desc: 'Pavé téléphone avec + et formats.', usage: 'Numéros de téléphone.' },
+ { name: 'email', desc: 'Clavier texte avec @ et . en accès direct.', usage: 'Adresses email.' },
+ { name: 'url', desc: 'Clavier texte avec / et .com.', usage: 'URLs, liens.' },
+ { name: 'search', desc: 'Clavier standard, touche Entrée = "Rechercher".', usage: 'Champs de recherche.' },
+ { name: 'none', desc: 'Aucun clavier (utile avec un picker custom).', usage: 'Date picker custom, sélecteur de couleur, etc.' },
+];
+
+const AUTOCOMPLETE_CATALOG = [
+ { name: 'name / given-name / family-name', usage: 'Nom complet, prénom, nom de famille' },
+ { name: 'email', usage: 'Adresse email (autoremplie depuis le compte iOS/Android)' },
+ { name: 'tel', usage: 'Numéro de téléphone' },
+ { name: 'address-line1 / postal-code / country', usage: 'Adresse postale' },
+ { name: 'current-password', usage: 'Mot de passe existant (Face ID/Touch ID propose le remplissage)' },
+ { name: 'new-password', usage: 'Nouveau mot de passe (le gestionnaire propose d\'en générer un)' },
+ { name: 'one-time-code', usage: 'Code OTP reçu par SMS (auto-lu sur iOS / Android)' },
+ { name: 'off', usage: 'Désactive complètement les suggestions' },
+];
+
+const ENTER_HINT_CATALOG = [
+ { name: 'send', usage: 'Envoyer un message (chat, email)' },
+ { name: 'search', usage: 'Rechercher (résultat affiché en bas)' },
+ { name: 'go', usage: 'Y aller (URL, action de navigation)' },
+ { name: 'done', usage: 'Terminer la saisie et fermer le clavier' },
+ { name: 'next', usage: 'Passer au champ suivant du formulaire' },
+ { name: 'previous', usage: 'Revenir au champ précédent' },
+];
+
+Object.assign(window, { KEYBOARD_CATALOG, AUTOCOMPLETE_CATALOG, ENTER_HINT_CATALOG });
diff --git a/design_system/package-smartphone/examples/mobile-gestures.jsx b/design_system/package-smartphone/examples/mobile-gestures.jsx
new file mode 100644
index 0000000..2d5b613
--- /dev/null
+++ b/design_system/package-smartphone/examples/mobile-gestures.jsx
@@ -0,0 +1,286 @@
+/* ============================================================
+ mobile-gestures.jsx
+ Détecteur de gestes nommés pour smartphone.
+ Chaque geste a un NOM SYSTÈME, et un composant de TEST.
+ ============================================================ */
+
+const { useState: uG, useRef: rG, useEffect: eG } = React;
+
+/* ============================================================
+ useGesture — hook bas niveau qui détecte les gestes
+ Renvoie : { onTouchStart, onTouchMove, onTouchEnd } à attacher
+ au composant qui doit recevoir les gestes.
+ Callbacks supportés :
+ onTap tap simple (< 200ms, ne bouge pas)
+ onDoubleTap double-tap (deux tap rapides)
+ onLongPress long press (≥ 500ms sans bouger)
+ onSwipeLeft swipe vers la gauche
+ onSwipeRight swipe vers la droite
+ onSwipeUp swipe vers le haut
+ onSwipeDown swipe vers le bas
+ onPanStart début de glisser
+ onPan cours de glisser ({dx, dy})
+ onPanEnd fin de glisser
+ onPinch pincement ({scale, dx, dy})
+ ============================================================ */
+function useGesture(handlers = {}) {
+ const state = rG({
+ sx: 0, sy: 0, st: 0,
+ lx: 0, ly: 0, lt: 0,
+ moved: false, longPressTimer: null,
+ lastTap: 0, lastTapPos: null,
+ pinching: false, startDist: 0,
+ });
+
+ const reset = () => {
+ if (state.current.longPressTimer) clearTimeout(state.current.longPressTimer);
+ };
+
+ const onTouchStart = (e) => {
+ const t = e.touches[0];
+ state.current.sx = t.clientX;
+ state.current.sy = t.clientY;
+ state.current.lx = t.clientX;
+ state.current.ly = t.clientY;
+ state.current.st = Date.now();
+ state.current.lt = Date.now();
+ state.current.moved = false;
+
+ // Pinch detection
+ if (e.touches.length === 2) {
+ const dx = e.touches[1].clientX - t.clientX;
+ const dy = e.touches[1].clientY - t.clientY;
+ state.current.startDist = Math.hypot(dx, dy);
+ state.current.pinching = true;
+ return;
+ }
+
+ // Long press
+ if (handlers.onLongPress) {
+ state.current.longPressTimer = setTimeout(() => {
+ if (!state.current.moved) {
+ handlers.onLongPress({ x: t.clientX, y: t.clientY });
+ state.current.moved = true; // empêche d'autres détections
+ }
+ }, 500);
+ }
+ handlers.onPanStart && handlers.onPanStart({ x: t.clientX, y: t.clientY });
+ };
+
+ const onTouchMove = (e) => {
+ const t = e.touches[0];
+ const dx = t.clientX - state.current.sx;
+ const dy = t.clientY - state.current.sy;
+
+ if (Math.abs(dx) > 10 || Math.abs(dy) > 10) {
+ state.current.moved = true;
+ reset();
+ }
+
+ if (state.current.pinching && e.touches.length === 2) {
+ const px = e.touches[1].clientX - t.clientX;
+ const py = e.touches[1].clientY - t.clientY;
+ const dist = Math.hypot(px, py);
+ const scale = dist / state.current.startDist;
+ handlers.onPinch && handlers.onPinch({ scale, dx, dy });
+ return;
+ }
+
+ handlers.onPan && handlers.onPan({ dx, dy, x: t.clientX, y: t.clientY });
+
+ state.current.lx = t.clientX;
+ state.current.ly = t.clientY;
+ state.current.lt = Date.now();
+ };
+
+ const onTouchEnd = (e) => {
+ reset();
+ const dx = state.current.lx - state.current.sx;
+ const dy = state.current.ly - state.current.sy;
+ const dt = Date.now() - state.current.st;
+
+ handlers.onPanEnd && handlers.onPanEnd({ dx, dy });
+
+ if (state.current.pinching) {
+ state.current.pinching = false;
+ return;
+ }
+
+ if (state.current.moved && dt < 500) {
+ const absX = Math.abs(dx), absY = Math.abs(dy);
+ if (absX > 50 || absY > 50) {
+ if (absX > absY) {
+ if (dx > 0) handlers.onSwipeRight && handlers.onSwipeRight({ dx, dt });
+ else handlers.onSwipeLeft && handlers.onSwipeLeft({ dx, dt });
+ } else {
+ if (dy > 0) handlers.onSwipeDown && handlers.onSwipeDown({ dy, dt });
+ else handlers.onSwipeUp && handlers.onSwipeUp({ dy, dt });
+ }
+ }
+ } else if (!state.current.moved && dt < 200) {
+ // Tap / DoubleTap
+ const now = Date.now();
+ const pos = { x: state.current.lx, y: state.current.ly };
+ const lp = state.current.lastTapPos;
+ if (now - state.current.lastTap < 300 && lp && Math.hypot(pos.x - lp.x, pos.y - lp.y) < 30) {
+ handlers.onDoubleTap && handlers.onDoubleTap(pos);
+ state.current.lastTap = 0;
+ } else {
+ handlers.onTap && handlers.onTap(pos);
+ state.current.lastTap = now;
+ state.current.lastTapPos = pos;
+ }
+ }
+ };
+
+ return { onTouchStart, onTouchMove, onTouchEnd };
+}
+
+/* ============================================================
+ GestureZone — zone tactile de test
+ Affiche le dernier geste détecté + un journal des gestes.
+ Toutes les actions sont nommées explicitement.
+ ============================================================ */
+function GestureZone({ label, accept = [] }) {
+ const [last, setLast] = uG(null);
+ const [log, setLog] = uG([]);
+ const [count, setCount] = uG({});
+ const [trail, setTrail] = uG(null);
+
+ const fire = (name, data) => {
+ setLast({ name, data, time: Date.now() });
+ setLog((l) => [{ name, t: new Date().toLocaleTimeString('fr-FR', { hour12: false }) }, ...l].slice(0, 5));
+ setCount((c) => ({ ...c, [name]: (c[name] || 0) + 1 }));
+ };
+
+ const hAll = {
+ onTap: () => fire('Tap'),
+ onDoubleTap: () => fire('DoubleTap'),
+ onLongPress: () => fire('LongPress'),
+ onSwipeLeft: () => fire('SwipeLeft'),
+ onSwipeRight: () => fire('SwipeRight'),
+ onSwipeUp: () => fire('SwipeUp'),
+ onSwipeDown: () => fire('SwipeDown'),
+ onPan: ({ dx, dy }) => setTrail({ dx, dy }),
+ onPanEnd: () => setTrail(null),
+ onPinch: ({ scale }) => fire('Pinch', { scale: scale.toFixed(2) }),
+ };
+ // Filtre uniquement les handlers demandés
+ const h = accept.length === 0 ? hAll : Object.fromEntries(
+ Object.entries(hAll).filter(([k]) => accept.some((n) => k.toLowerCase().includes(n.toLowerCase())))
+ );
+ const gesture = useGesture(h);
+
+ return (
+
+ {label && (
+
{label}
+ )}
+
+ {/* indicateur central */}
+
+ {last ? (
+
+ {last.name}
+ {last.data && (
+
+ {Object.entries(last.data).map(([k, v]) => `${k}: ${v}`).join(' · ')}
+
+ )}
+
+ ) : (
+
essaie un geste ici
+ )}
+
+
+ {/* trail visuel pendant le pan */}
+ {trail && (
+
+ )}
+
+ {/* Journal */}
+ {log.length > 0 && (
+
+
+ journal
+ {log.length} dernier{log.length > 1 ? 's' : ''}
+
+ {log.map((l, i) => (
+
+ {l.t} {' '}
+ {l.name}
+
+ ))}
+
+ )}
+
+ {time}
+
+ {/* signal bars */}
+
+ {[1, 2, 3, 4].map((b) => (
+
+
+
+
+
+ );
+}
+
+/* ============================================================
+ NavBar — barre de navigation en haut (titre + actions)
+ Nom système : NavBar
+ Usage : titre d'écran avec retour optionnel à gauche, actions à droite.
+ ============================================================ */
+function NavBar({ title, subtitle, onBack, right, large }) {
+ return (
+
+
+ {onBack && (
+
+
+ )}
+
+ {!large && (
+
+ {title}
+
+ )}
+
+ {right &&
{right}
}
+
+ {large && (
+
+
{title}
+ {subtitle &&
{subtitle}
}
+
+ )}
+
+ {items.map((it) => {
+ const isActive = active === it.id;
+ return (
+ onSelect(it.id)} style={{
+ flex: 1, minHeight: 50,
+ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+ gap: 3, padding: 0,
+ background: 'transparent', border: 'none',
+ color: isActive ? 'var(--accent)' : 'var(--ink-3)',
+ cursor: 'pointer',
+ transition: 'color .2s, transform .12s',
+ transform: isActive ? 'translateY(-1px)' : 'translateY(0)',
+ }}>
+ {it.label}
+
+ );
+ })}
+
+ );
+}
+
+/* ============================================================
+ ListRow — ligne d'une liste réglages (style iOS)
+ Nom système : ListRow
+ Usage : option dans une liste de réglages. ≥ 44px de hauteur.
+ ============================================================ */
+function ListRow({ icon, iconColor, label, value, right, onClick, danger }) {
+ const isInteractive = !!onClick;
+ const Tag = isInteractive ? 'button' : 'div';
+ return (
+ e.currentTarget.style.background = 'var(--bg-3)' : undefined}
+ onTouchEnd={isInteractive ? (e) => e.currentTarget.style.background = 'transparent' : undefined}>
+ {icon && (
+
+
+ )}
+ {label}
+ {value && {value} }
+ {right === undefined && onClick &&
+ );
+}
+
+/* ============================================================
+ ListSection — groupe de ListRow avec titre
+ Nom système : ListSection
+ ============================================================ */
+function ListSection({ title, hint, children }) {
+ return (
+
+ {title && (
+
{title}
+ )}
+
{children}
+ {hint && (
+
{hint}
+ )}
+
+
+
+ {title}
+ {subtitle && {subtitle} }
+ {value && (
+ {value}
+ )}
+ {badge && (
+ {badge}
+ )}
+
+ );
+}
+
+/* ============================================================
+ PrimaryButton — gros bouton plein largeur tactile
+ Nom système : PrimaryButton
+ Usage : action principale d'un écran (sauvegarder, valider).
+ ============================================================ */
+function PrimaryButton({ children, icon, onClick, variant = 'primary', size = 'lg' }) {
+ const sizes = {
+ md: { h: 44, fontSize: 14 },
+ lg: { h: 52, fontSize: 16 },
+ }[size];
+ const styles = {
+ primary: { bg: 'var(--accent)', fg: 'var(--bg-1)', bd: 'var(--accent-soft)' },
+ ghost: { bg: 'var(--bg-3)', fg: 'var(--ink-1)', bd: 'var(--border-2)' },
+ danger: { bg: 'var(--err)', fg: '#fff', bd: 'var(--err)' },
+ }[variant];
+ return (
+
+ {icon &&
+ );
+}
+
+/* ============================================================
+ SegmentedControl — sélecteur segmenté iOS-style
+ Nom système : SegmentedControl
+ Usage : 2-4 options exclusives, jamais plus.
+ ============================================================ */
+function SegmentedControl({ value, onChange, options }) {
+ return (
+
+ {options.map((o) => {
+ const v = typeof o === 'string' ? o : o.value;
+ const l = typeof o === 'string' ? o : o.label;
+ const ic = typeof o === 'string' ? null : o.icon;
+ const active = value === v;
+ return (
+ onChange(v)} style={{
+ flex: 1, minHeight: 36,
+ padding: '6px 10px',
+ background: active ? 'var(--accent)' : 'transparent',
+ color: active ? 'var(--bg-1)' : 'var(--ink-2)',
+ border: 'none', borderRadius: 6,
+ cursor: 'pointer',
+ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 5,
+ fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: 600,
+ transition: 'background .18s, color .18s, transform .12s',
+ transform: active ? 'translateY(-0.5px)' : 'translateY(0)',
+ boxShadow: active ? '0 2px 5px var(--accent-glow)' : 'none',
+ WebkitTapHighlightColor: 'transparent',
+ }}>
+ {ic &&
+ );
+ })}
+
+ );
+}
+
+/* ============================================================
+ SearchBar — champ de recherche mobile
+ Nom système : SearchBar
+ ============================================================ */
+function SearchBar({ value, onChange, placeholder = 'Rechercher' }) {
+ return (
+
+ onChange('')} style={{
+ width: 22, height: 22, borderRadius: '50%',
+ border: 'none', background: 'var(--ink-4)', color: 'var(--bg-1)',
+ display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+ cursor: 'pointer', padding: 0,
+ }}>
+ )}
+
+ );
+}
+
+Object.assign(window, {
+ StatusBar, NavBar, TabBar, ListRow, ListSection,
+ ActionCard, PrimaryButton, SegmentedControl, SearchBar,
+});
+
+/* Effets tactiles : pression au touch (pas de hover) */
+(function injectMobileFX() {
+ if (document.getElementById('mobile-fx')) return;
+ const s = document.createElement('style');
+ s.id = 'mobile-fx';
+ s.textContent = `
+ .touch-press {
+ transition: transform .08s ease-out, filter .08s, box-shadow .08s;
+ }
+ .touch-press:active {
+ transform: scale(0.97);
+ filter: brightness(0.92);
+ }
+ `;
+ document.head.appendChild(s);
+})();
diff --git a/design_system/package-smartphone/examples/mobile-sheets.jsx b/design_system/package-smartphone/examples/mobile-sheets.jsx
new file mode 100644
index 0000000..3abe582
--- /dev/null
+++ b/design_system/package-smartphone/examples/mobile-sheets.jsx
@@ -0,0 +1,390 @@
+/* ============================================================
+ mobile-sheets.jsx
+ Types de fenêtres mobiles + composants spécifiques.
+ Chaque type a un nom système ET un cas d'usage préconisé.
+ ============================================================ */
+
+const { useState: uS, useRef: rS, useEffect: eS } = React;
+
+/* ============================================================
+ BottomSheet — feuille modale qui monte du bas
+ Nom système : BottomSheet
+ Cas d'usage : action contextuelle, formulaire court, choix
+ dans une liste. À privilégier sur mobile à la
+ place d'une popup centrée (plus accessible au pouce).
+ Gestes : swipe down pour fermer.
+ ============================================================ */
+function BottomSheet({ open, onClose, title, children, footer, height = 'auto' }) {
+ const [dragY, setDragY] = uS(0);
+ const [closing, setClosing] = uS(false);
+ const startY = rS(0);
+
+ eS(() => {
+ if (open) { setDragY(0); setClosing(false); }
+ }, [open]);
+
+ if (!open && !closing) return null;
+
+ const onStart = (e) => {
+ startY.current = (e.touches ? e.touches[0].clientY : e.clientY);
+ };
+ const onMove = (e) => {
+ const y = (e.touches ? e.touches[0].clientY : e.clientY);
+ const d = Math.max(0, y - startY.current);
+ setDragY(d);
+ };
+ const onEnd = () => {
+ if (dragY > 80) {
+ setClosing(true);
+ setTimeout(() => { setClosing(false); setDragY(0); onClose(); }, 200);
+ } else {
+ setDragY(0);
+ }
+ };
+
+ return (
+
+
e.stopPropagation()} style={{
+ width: '100%',
+ maxHeight: '85%',
+ height: height === 'auto' ? 'auto' : height,
+ background: 'var(--bg-2)',
+ borderTop: '1px solid var(--border-2)',
+ borderRadius: '20px 20px 0 0',
+ boxShadow: '0 -8px 32px rgba(0,0,0,0.5)',
+ transform: `translateY(${closing ? '100%' : dragY + 'px'})`,
+ transition: closing ? 'transform .2s ease-in' : (dragY === 0 ? 'transform .3s cubic-bezier(.3,.7,.3,1.2)' : 'none'),
+ display: 'flex', flexDirection: 'column',
+ overflow: 'hidden',
+ }}>
+ {/* Drag handle */}
+
+ {title && (
+
+ )}
+
{children}
+ {footer && (
+
{footer}
+ )}
+
+
+
+
e.stopPropagation()} style={{
+ width: '100%',
+ display: 'flex', flexDirection: 'column', gap: 8,
+ animation: 'as-slide .25s cubic-bezier(.3,.7,.3,1.2)',
+ }}>
+
+ {title && (
+
{title}
+ )}
+ {actions.map((a, i) => (
+
{ onClose(); a.onClick && a.onClick(); }}
+ className="touch-press"
+ style={{
+ width: '100%', minHeight: 52,
+ background: 'transparent', border: 'none',
+ borderTop: i === 0 || (title && i === 0) ? 'none' : '1px solid var(--border-1)',
+ color: a.danger ? 'var(--err)' : 'var(--accent)',
+ fontFamily: 'var(--font-ui)', fontSize: 16, fontWeight: a.primary ? 700 : 500,
+ cursor: 'pointer',
+ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+ WebkitTapHighlightColor: 'transparent',
+ }}>
+ {a.icon &&
+ ))}
+
+
{cancelLabel}
+
+
+
+
+
+ {icon && (
+
+
+ )}
+
{title}
+ {message &&
{message}
}
+
+
+ {actions.map((a, i) => (
+ { onClose(); a.onClick && a.onClick(); }}
+ className="touch-press"
+ style={{
+ flex: 1, minHeight: 46,
+ background: 'transparent', border: 'none',
+ borderLeft: i > 0 ? '1px solid var(--border-1)' : 'none',
+ color: a.danger ? 'var(--err)' : 'var(--accent)',
+ fontFamily: 'var(--font-ui)', fontSize: 15,
+ fontWeight: a.primary ? 700 : 500,
+ cursor: 'pointer',
+ WebkitTapHighlightColor: 'transparent',
+ }}>{a.label}
+ ))}
+
+
+
+
+ {message}
+
+ );
+}
+
+/* ============================================================
+ FAB — Floating Action Button (Android Material)
+ Nom système : FAB
+ Cas d'usage : action principale unique sur un écran
+ (créer, ajouter). Toujours en bas à droite.
+ ============================================================ */
+function FAB({ icon, label, onClick }) {
+ return (
+
+
+ );
+}
+
+/* ============================================================
+ PullToRefresh — wrapper pour rafraîchir au pull-down
+ Nom système : PullToRefresh
+ Geste associé : swipe down depuis le haut du contenu.
+ ============================================================ */
+function PullToRefresh({ onRefresh, children }) {
+ const [pull, setPull] = uS(0);
+ const [refreshing, setRefreshing] = uS(false);
+ const startY = rS(0);
+ const wrap = rS();
+
+ const onStart = (e) => {
+ if (wrap.current && wrap.current.scrollTop === 0) {
+ startY.current = e.touches[0].clientY;
+ } else {
+ startY.current = null;
+ }
+ };
+ const onMove = (e) => {
+ if (startY.current == null) return;
+ const d = e.touches[0].clientY - startY.current;
+ if (d > 0) setPull(Math.min(d, 100));
+ };
+ const onEnd = async () => {
+ if (pull > 60 && !refreshing) {
+ setRefreshing(true);
+ setPull(60);
+ try { await Promise.resolve(onRefresh && onRefresh()); }
+ finally {
+ await new Promise((r) => setTimeout(r, 600));
+ setRefreshing(false);
+ setPull(0);
+ }
+ } else {
+ setPull(0);
+ }
+ startY.current = null;
+ };
+
+ return (
+
+ {/* indicateur */}
+
+
{children}
+
+ {/* Actions à GAUCHE (révélées par swipe droit) */}
+ {rightActions.length > 0 && (
+
+ {rightActions.map((a, i) => (
+ fire(a)} className="touch-press" style={{
+ width: 76,
+ background: a.color || 'var(--info)',
+ color: a.fg || '#fff',
+ border: 'none', cursor: 'pointer',
+ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4,
+ fontFamily: 'var(--font-ui)', fontSize: 12, fontWeight: 600,
+ WebkitTapHighlightColor: 'transparent',
+ }}>
+ {a.icon &&
+ ))}
+
+ )}
+ {/* Actions à DROITE (révélées par swipe gauche) */}
+ {leftActions.length > 0 && (
+
+ {leftActions.map((a, i) => (
+ fire(a)} className="touch-press" style={{
+ width: 76,
+ background: a.color || 'var(--err)',
+ color: a.fg || '#fff',
+ border: 'none', cursor: 'pointer',
+ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4,
+ fontFamily: 'var(--font-ui)', fontSize: 12, fontWeight: 600,
+ WebkitTapHighlightColor: 'transparent',
+ }}>
+ {a.icon &&
+ ))}
+
+ )}
+ {/* Ligne déplaçable */}
+
+ {children}
+
+
+ {children}
+ {show && (
+ {label}
+ )}
+
+ );
+}
+
+/* ============================================================
+ IconButton — bouton icône seul + tooltip obligatoire.
+ ============================================================ */
+function IconButton({ icon, label, onClick, active, danger, size = 34, primary }) {
+ const bg = active ? 'var(--accent-tint)'
+ : primary ? 'var(--accent)'
+ : 'var(--bg-3)';
+ const fg = active ? 'var(--accent)'
+ : primary ? 'var(--bg-1)'
+ : danger ? 'var(--err)'
+ : 'var(--ink-2)';
+ const bd = active ? 'var(--accent-soft)' : 'var(--border-2)';
+ return (
+
+
+
+
+ );
+}
+
+/* ============================================================
+ Toggle on/off — switch tactile avec glow accent quand ON
+ ============================================================ */
+function Toggle({ on, onChange, label, icon }) {
+ return (
+
+ {icon && {label} }
+ onChange(!on)} className="interactive" style={{
+ width: 42, height: 22, borderRadius: 12,
+ background: on ? 'var(--accent)' : 'var(--bg-4)',
+ border: `1px solid ${on ? 'var(--accent-soft)' : 'var(--border-2)'}`,
+ boxShadow: on ? `0 0 10px var(--accent-glow), var(--shadow-1)` : 'var(--shadow-press)',
+ position: 'relative', cursor: 'pointer', padding: 0,
+ }}>
+
+
+ );
+}
+
+/* ============================================================
+ Status LED — pastille pulsante (effet halo si critique)
+ ============================================================ */
+function StatusLed({ status = 'ok', size = 10, pulse }) {
+ const map = {
+ ok: { c: 'var(--ok)', g: 'var(--ok-glow)' },
+ warn: { c: 'var(--warn)', g: 'var(--warn-glow)' },
+ err: { c: 'var(--err)', g: 'var(--err-glow)' },
+ off: { c: 'var(--ink-4)', g: 'transparent' },
+ info: { c: 'var(--info)', g: 'var(--info-glow)' },
+ };
+ const { c, g } = map[status];
+ const id = `pulse-${status}-${size}`;
+ return (
+ <>
+ {pulse && (
+
+ )}
+
+ {(icon || label) && (
+
+ {icon && {label} }
+
+ )}
+
+
+ {value}{unit}
+
+
+ {label && (
+
+ {label}
+
+ {value}{unit}
+
+
+ )}
+
+
+ {/* Gloss interne très léger (un seul highlight haut, pas de bande inférieure) */}
+
+
+
+
+
+
+
+
+ {/* arc background */}
+
+
+
+ {value}%
+
+ {label &&
{label}
}
+
+
+
+
+
+
+
+
+
+
+ {/* tics */}
+ {Array.from({ length: 21 }).map((_, i) => {
+ const a = Math.PI - (i / 20) * Math.PI;
+ const major = i % 5 === 0;
+ const inner = major ? r + 8 : r + 11;
+ const outer = major ? r + 20 : r + 15;
+ return {v} ;
+ })}
+ {/* arc bg */}
+
+
+
+
+
e.stopPropagation()} style={{
+ width, maxWidth: '90%',
+ borderRadius: 12,
+ boxShadow: 'var(--shadow-3)',
+ animation: 'popin .25s cubic-bezier(.3,.7,.3,1.2)',
+ overflow: 'hidden',
+ }}>
+
+
{children}
+ {footer && (
+
{footer}
+ )}
+
+
+ {icon &&
+ );
+}
+
+/* ============================================================
+ TreeNav — arbre dépliable avec icône en tête (style B)
+ ============================================================ */
+function TreeNav({ groups, activeId, onSelect }) {
+ const [open, setOpen] = useState(() =>
+ Object.fromEntries(groups.map(g => [g.id, g.open !== false]))
+ );
+ return (
+
+ {groups.map(g => (
+
+
setOpen({ ...open, [g.id]: !open[g.id] })}
+ style={{
+ display: 'flex', alignItems: 'center', gap: 8,
+ padding: '7px 8px', borderRadius: 6,
+ color: 'var(--ink-2)',
+ background: 'transparent',
+ border: '1px solid transparent',
+ cursor: 'pointer',
+ }}>
+ {g.label}
+ {g.count != null && (
+
+ {g.count}
+
+ )}
+
+ {open[g.id] && (
+
+ {g.children.map(c => {
+ const active = c.id === activeId;
+ return (
+
onSelect && onSelect(c.id)}
+ style={{
+ display: 'flex', alignItems: 'center', gap: 8,
+ padding: '6px 10px', borderRadius: 6,
+ background: active ? 'var(--accent-tint)' : 'transparent',
+ color: active ? 'var(--ink-1)' : 'var(--ink-2)',
+ borderLeft: active ? '2px solid var(--accent)' : '2px solid transparent',
+ marginLeft: active ? 0 : 2,
+ fontSize: 12.5,
+ }}>
+ {c.label}
+ {c.meta && {c.meta} }
+
+ );
+ })}
+
+ )}
+
+ ))}
+
+
+ );
+}
+
+/* ============================================================
+ LineChart — grand graph multi-séries
+ ============================================================ */
+function LineChart({ series, h = 200, labels }) {
+ const w = 600;
+ const padding = { l: 36, r: 12, t: 12, b: 24 };
+ const innerW = w - padding.l - padding.r;
+ const innerH = h - padding.t - padding.b;
+ const all = series.flatMap(s => s.points);
+ const max = Math.max(...all) * 1.1;
+ const min = 0;
+ const range = max - min;
+ const ptsCount = series[0].points.length;
+ const step = innerW / (ptsCount - 1);
+ return (
+
+ {/* grid horizontal */}
+ {[0, 0.25, 0.5, 0.75, 1].map(p => {
+ const y = padding.t + innerH * p;
+ const v = Math.round(max - range * p);
+ return (
+
+ {v}
+
+ );
+ })}
+ {/* labels x */}
+ {labels && labels.map((lb, i) => (
+ i % Math.ceil(labels.length / 8) === 0 && (
+ {lb}
+ )
+ ))}
+ {/* séries */}
+ {series.map((s, si) => {
+ const path = s.points.map((p, i) =>
+ `${i === 0 ? 'M' : 'L'} ${(padding.l + i * step).toFixed(1)} ${(padding.t + innerH - ((p - min) / range) * innerH).toFixed(1)}`
+ ).join(' ');
+ const area = path + ` L ${padding.l + (ptsCount - 1) * step} ${padding.t + innerH} L ${padding.l} ${padding.t + innerH} Z`;
+ return (
+
+
+ );
+ })}
+
+ );
+}
+
+/* Expose */
+Object.assign(window, {
+ Icon, Tooltip, IconButton, Toggle, StatusLed,
+ BatteryGauge, RadialGauge, BigRadialGauge,
+ Popup, Button, TreeNav, Sparkline, LineChart,
+});
+
+/* Effets hover sur les jauges (sans effet au clic) */
+(function injectGaugeHoverStyles() {
+ if (document.getElementById('gauge-hover-styles')) return;
+ const s = document.createElement('style');
+ s.id = 'gauge-hover-styles';
+ s.textContent = `
+ .bg-hover:hover .bg-bar {
+ border-color: color-mix(in oklch, var(--accent) 60%, var(--border-3));
+ }
+ .bg-hover:hover .bg-fill {
+ box-shadow: 0 0 14px var(--bg-glow, var(--accent-glow));
+ filter: brightness(1.15);
+ }
+ .gauge-hover { transition: filter .2s; }
+ .gauge-hover:hover { filter: drop-shadow(0 0 8px var(--accent-glow)) brightness(1.08); }
+ `;
+ document.head.appendChild(s);
+})();
diff --git a/design_system/package-smartphone/tokens/tokens.css b/design_system/package-smartphone/tokens/tokens.css
new file mode 100644
index 0000000..348bfe2
--- /dev/null
+++ b/design_system/package-smartphone/tokens/tokens.css
@@ -0,0 +1,204 @@
+/* ============================================================
+ ui-tokens.css
+ Design tokens Gruvbox Seventies — dark (par défaut) + light.
+ Sombre délavé (pas noir intense) / gris clair usé (pas blanc pur).
+ ============================================================ */
+
+:root,
+[data-theme="dark"] {
+ /* Couches de fond — sombre délavé, brun-gris chaud */
+ --bg-0: #221c17; /* niveau le plus profond (rare) */
+ --bg-1: #2a231d; /* fond app */
+ --bg-2: #322a23; /* panneaux */
+ --bg-3: #3c332a; /* cartes */
+ --bg-4: #4a4035; /* hover */
+ --bg-5: #5a4f43; /* press / actif */
+
+ /* Surfaces translucides */
+ --surf-glass: rgba(50, 42, 35, 0.72);
+ --surf-glass-strong: rgba(50, 42, 35, 0.92);
+ --surf-glass-soft: rgba(50, 42, 35, 0.42);
+
+ /* Bordures */
+ --border-1: rgba(168, 153, 132, 0.18);
+ --border-2: rgba(168, 153, 132, 0.32);
+ --border-3: rgba(168, 153, 132, 0.55);
+
+ /* Texte */
+ --ink-1: #f2e5c7; /* cream principal */
+ --ink-2: #d5c4a1; /* secondaire */
+ --ink-3: #a89984; /* labels / hints */
+ --ink-4: #7c6f64; /* désactivé */
+
+ /* Accent orange seventies */
+ --accent: #fe8019;
+ --accent-soft: #d65d0e;
+ --accent-glow: rgba(254, 128, 25, 0.35);
+ --accent-tint: rgba(254, 128, 25, 0.12);
+
+ /* Statuts */
+ --ok: #4dbb26;
+ --ok-glow: rgba(77, 187, 38, 0.45);
+ --warn: #fabd2f;
+ --warn-glow: rgba(250, 189, 47, 0.45);
+ --err: #fb4934;
+ --err-glow: rgba(251, 73, 52, 0.4);
+ --info: #83a598;
+ --info-glow: rgba(131, 165, 152, 0.4);
+
+ /* Couleurs additionnelles (datavis, badges, catégories) */
+ --blue: #3db0d1;
+ --blue-glow: rgba(61, 176, 209, 0.45);
+ --purple: #c882c8;
+ --purple-glow: rgba(200, 130, 200, 0.45);
+
+ /* Ombres */
+ --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
+ --shadow-2: 0 4px 12px rgba(0,0,0,0.45);
+ --shadow-3: 0 12px 32px rgba(0,0,0,0.55);
+ --shadow-press: inset 0 2px 4px rgba(0,0,0,0.5);
+
+ /* Relief 3D pour tuiles : highlight haut + ombre bas + ombre portée */
+ --tile-3d:
+ inset 0 1px 0 rgba(255, 230, 180, 0.12),
+ inset 0 -1px 0 rgba(0, 0, 0, 0.45),
+ 0 1px 0 rgba(0, 0, 0, 0.35),
+ 0 2px 4px rgba(0, 0, 0, 0.4),
+ 0 8px 18px rgba(0, 0, 0, 0.5);
+ --tile-3d-strong:
+ inset 0 1px 0 rgba(255, 230, 180, 0.18),
+ inset 0 -2px 0 rgba(0, 0, 0, 0.55),
+ 0 1px 0 rgba(0, 0, 0, 0.4),
+ 0 4px 8px rgba(0, 0, 0, 0.5),
+ 0 14px 28px rgba(0, 0, 0, 0.55);
+
+ /* Polices */
+ --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
+ --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+ --font-terminal: 'Share Tech Mono', 'VT323', 'Courier New', monospace;
+}
+
+[data-theme="light"] {
+ /* Gris clair usé, légèrement chaud (pas blanc pur) */
+ --bg-0: #b8b2a3;
+ --bg-1: #d5d0c5;
+ --bg-2: #dcd7cc;
+ --bg-3: #e3ded3;
+ --bg-4: #ccc6b8;
+ --bg-5: #bdb6a7;
+
+ --surf-glass: rgba(220, 215, 204, 0.72);
+ --surf-glass-strong: rgba(220, 215, 204, 0.94);
+ --surf-glass-soft: rgba(220, 215, 204, 0.42);
+
+ --border-1: rgba(60, 56, 54, 0.15);
+ --border-2: rgba(60, 56, 54, 0.28);
+ --border-3: rgba(60, 56, 54, 0.5);
+
+ --ink-1: #28241f;
+ --ink-2: #3c3836;
+ --ink-3: #5a544c;
+ --ink-4: #8a8278;
+
+ --accent: #af3a03;
+ --accent-soft: #d65d0e;
+ --accent-glow: rgba(175, 58, 3, 0.28);
+ --accent-tint: rgba(175, 58, 3, 0.08);
+
+ --ok: #3c911c;
+ --ok-glow: rgba(60, 145, 28, 0.32);
+ --warn: #b57614;
+ --warn-glow: rgba(181, 118, 20, 0.35);
+ --err: #9d0006;
+ --err-glow: rgba(157, 0, 6, 0.3);
+ --info: #427b58;
+ --info-glow: rgba(66, 123, 88, 0.3);
+
+ /* Couleurs additionnelles (datavis, badges, catégories) */
+ --blue: #2d82a3;
+ --blue-glow: rgba(45, 130, 163, 0.32);
+ --purple: #8c468c;
+ --purple-glow: rgba(140, 70, 140, 0.32);
+
+ --shadow-1: 0 1px 2px rgba(40,30,20,0.12);
+ --shadow-2: 0 4px 12px rgba(40,30,20,0.15);
+ --shadow-3: 0 12px 32px rgba(40,30,20,0.2);
+ --shadow-press: inset 0 2px 4px rgba(40,30,20,0.18);
+
+ /* Relief light : highlight haut blanc cassé + ombre marquée */
+ --tile-3d:
+ inset 0 1px 0 rgba(255, 255, 255, 0.55),
+ inset 0 -1px 0 rgba(60, 50, 40, 0.18),
+ 0 1px 0 rgba(60, 50, 40, 0.1),
+ 0 2px 4px rgba(60, 50, 40, 0.12),
+ 0 8px 18px rgba(60, 50, 40, 0.18);
+ --tile-3d-strong:
+ inset 0 1px 0 rgba(255, 255, 255, 0.7),
+ inset 0 -2px 0 rgba(60, 50, 40, 0.22),
+ 0 1px 0 rgba(60, 50, 40, 0.15),
+ 0 4px 8px rgba(60, 50, 40, 0.18),
+ 0 14px 28px rgba(60, 50, 40, 0.22);
+}
+
+/* ============================================================
+ Reset minimal + base typo
+ ============================================================ */
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+
+body {
+ font-family: var(--font-ui);
+ font-size: 14px;
+ color: var(--ink-1);
+ background: var(--bg-1);
+ -webkit-font-smoothing: antialiased;
+}
+
+.mono { font-family: var(--font-mono); }
+.terminal { font-family: var(--font-terminal); letter-spacing: 0.02em; }
+.label {
+ font-family: var(--font-mono);
+ font-size: 11px;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--ink-3);
+}
+
+/* ============================================================
+ Surfaces — relief 3D marqué, AUCUN effet hover
+ ============================================================ */
+.glass {
+ background: var(--surf-glass);
+ backdrop-filter: blur(12px) saturate(140%);
+ -webkit-backdrop-filter: blur(12px) saturate(140%);
+ border: 1px solid var(--border-2);
+ box-shadow: var(--tile-3d);
+}
+.glass-strong {
+ background: var(--surf-glass-strong);
+ backdrop-filter: blur(16px) saturate(150%);
+ -webkit-backdrop-filter: blur(16px) saturate(150%);
+ border: 1px solid var(--border-3);
+ box-shadow: var(--tile-3d-strong);
+}
+
+/* Élément cliquable : pas de hover, mais réelle pression 3D au clic */
+.interactive {
+ cursor: pointer;
+ transition: transform .04s ease-out, box-shadow .04s, background .04s;
+ transform: translateY(0);
+}
+.interactive:active {
+ transform: translateY(1px);
+ box-shadow: var(--shadow-press) !important;
+ filter: brightness(0.92);
+}
+
+/* Scrollbar custom */
+*::-webkit-scrollbar { width: 8px; height: 8px; }
+*::-webkit-scrollbar-track { background: transparent; }
+*::-webkit-scrollbar-thumb {
+ background: var(--border-2);
+ border-radius: 4px;
+}
+*::-webkit-scrollbar-thumb:hover { background: var(--accent-soft); }
diff --git a/design_system/package-smartphone/tokens/tokens.gnome.css b/design_system/package-smartphone/tokens/tokens.gnome.css
new file mode 100644
index 0000000..390b806
--- /dev/null
+++ b/design_system/package-smartphone/tokens/tokens.gnome.css
@@ -0,0 +1,378 @@
+/* ============================================================
+ tokens.gnome.css — Tokens pour applications GNOME (GTK 4 / libadwaita)
+ Gruvbox seventies · v1.0
+ ============================================================
+
+ Usage dans une app GTK 4 / libadwaita :
+
+ #include
+ GtkCssProvider *provider = gtk_css_provider_new();
+ gtk_css_provider_load_from_path(provider, "tokens.gnome.css");
+ gtk_style_context_add_provider_for_display(
+ gdk_display_get_default(), GTK_STYLE_PROVIDER(provider),
+ GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
+
+ Python (PyGObject) :
+ css_provider = Gtk.CssProvider()
+ css_provider.load_from_path("tokens.gnome.css")
+ Gtk.StyleContext.add_provider_for_display(
+ Gdk.Display.get_default(), css_provider,
+ Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
+
+ GJS :
+ const provider = new Gtk.CssProvider();
+ provider.load_from_path('tokens.gnome.css');
+ Gtk.StyleContext.add_provider_for_display(
+ Gdk.Display.get_default(), provider,
+ Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+ ============================================================ */
+
+/* ============================================================
+ THÈME SOMBRE (défaut)
+ ============================================================ */
+
+/* Couches de fond (du plus profond au plus haut) */
+@define-color bg_0 #221c17;
+@define-color bg_1 #2a231d;
+@define-color bg_2 #322a23;
+@define-color bg_3 #3c332a;
+@define-color bg_4 #4a4035;
+@define-color bg_5 #5a4f43;
+
+/* Encres / texte */
+@define-color ink_1 #f2e5c7;
+@define-color ink_2 #d5c4a1;
+@define-color ink_3 #a89984;
+@define-color ink_4 #7c6f64;
+
+/* Accent orange seventies */
+@define-color accent_color #fe8019;
+@define-color accent_soft #d65d0e;
+@define-color accent_fg_color #221c17;
+
+/* Statuts */
+@define-color success_color #4dbb26;
+@define-color warning_color #fabd2f;
+@define-color error_color #fb4934;
+@define-color info_color #83a598;
+@define-color blue_color #3db0d1;
+@define-color purple_color #c882c8;
+
+/* Bordures */
+@define-color border_1 alpha(#a89984, 0.18);
+@define-color border_2 alpha(#a89984, 0.32);
+@define-color border_3 alpha(#a89984, 0.55);
+
+/* Couleurs sémantiques GNOME / libadwaita (overrides) */
+@define-color window_bg_color @bg_1;
+@define-color window_fg_color @ink_1;
+@define-color view_bg_color @bg_2;
+@define-color view_fg_color @ink_1;
+@define-color headerbar_bg_color @bg_2;
+@define-color headerbar_fg_color @ink_1;
+@define-color headerbar_border_color @border_2;
+@define-color headerbar_backdrop_color @bg_1;
+@define-color sidebar_bg_color @bg_2;
+@define-color sidebar_fg_color @ink_1;
+@define-color sidebar_backdrop_color @bg_1;
+@define-color popover_bg_color @bg_3;
+@define-color popover_fg_color @ink_1;
+@define-color card_bg_color @bg_3;
+@define-color card_fg_color @ink_1;
+@define-color shade_color alpha(black, 0.4);
+@define-color scrollbar_outline_color alpha(@ink_3, 0.3);
+
+/* ============================================================
+ COMPOSANTS GTK — habillage Gruvbox seventies
+ ============================================================ */
+
+/* Fond global */
+window {
+ background-color: @window_bg_color;
+ color: @window_fg_color;
+ font-family: 'Inter', 'Cantarell', sans-serif;
+ font-size: 14px;
+}
+
+/* HeaderBar (barre de titre) */
+headerbar {
+ background: @bg_2;
+ color: @ink_1;
+ border-bottom: 1px solid @border_2;
+ box-shadow: inset 0 1px 0 alpha(white, 0.04);
+ min-height: 48px;
+}
+
+headerbar .title {
+ font-weight: 700;
+ font-size: 15px;
+}
+headerbar .subtitle {
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 11px;
+ color: @ink_3;
+}
+
+/* Boutons — relief 3D et accent */
+button {
+ background: @bg_3;
+ color: @ink_1;
+ border: 1px solid @border_2;
+ border-radius: 8px;
+ padding: 6px 12px;
+ font-weight: 500;
+ box-shadow:
+ inset 0 1px 0 alpha(white, 0.06),
+ inset 0 -1px 0 alpha(black, 0.3),
+ 0 1px 2px alpha(black, 0.4);
+ transition: all 60ms ease;
+}
+button:active {
+ background: @bg_4;
+ box-shadow: inset 0 2px 4px alpha(black, 0.5);
+ transform: translateY(1px);
+}
+button:disabled {
+ color: @ink_4;
+ opacity: 0.6;
+}
+
+/* Bouton "suggested-action" = primary (accent orange) */
+button.suggested-action {
+ background: @accent_color;
+ color: @accent_fg_color;
+ border-color: @accent_soft;
+ box-shadow:
+ inset 0 1px 0 alpha(white, 0.2),
+ 0 2px 6px alpha(@accent_color, 0.35);
+}
+button.suggested-action:active {
+ background: @accent_soft;
+}
+
+/* Bouton "destructive-action" = danger */
+button.destructive-action {
+ background: @bg_3;
+ color: @error_color;
+ border-color: @error_color;
+}
+
+/* Bouton plat (toolbar) */
+button.flat {
+ background: transparent;
+ border-color: transparent;
+ box-shadow: none;
+}
+button.flat:hover {
+ background: @bg_3;
+}
+
+/* Champs de saisie */
+entry,
+text {
+ background: @bg_1;
+ color: @ink_1;
+ border: 1px solid @border_2;
+ border-radius: 8px;
+ padding: 8px 12px;
+ box-shadow: inset 0 1px 2px alpha(black, 0.3);
+}
+entry:focus,
+text:focus {
+ border-color: @accent_color;
+ outline: 2px solid alpha(@accent_color, 0.18);
+ outline-offset: -1px;
+}
+
+/* Listes / treeview */
+list,
+treeview {
+ background: @bg_2;
+ color: @ink_1;
+}
+list > row {
+ padding: 8px 12px;
+ border-bottom: 1px solid @border_1;
+}
+list > row:selected,
+treeview:selected {
+ background: alpha(@accent_color, 0.12);
+ color: @ink_1;
+ border-left: 3px solid @accent_color;
+}
+
+/* Switch (toggle) */
+switch {
+ background: @bg_4;
+ border: 1px solid @border_2;
+ border-radius: 12px;
+ box-shadow: inset 0 1px 2px alpha(black, 0.4);
+ min-height: 22px;
+ min-width: 42px;
+}
+switch:checked {
+ background: @accent_color;
+ border-color: @accent_soft;
+ box-shadow: 0 0 10px alpha(@accent_color, 0.35);
+}
+switch slider {
+ background: @ink_2;
+ border-radius: 50%;
+ min-width: 18px;
+ min-height: 18px;
+}
+switch:checked slider {
+ background: @accent_fg_color;
+}
+
+/* Scale (slider) */
+scale trough {
+ background: @bg_1;
+ border-radius: 4px;
+ min-height: 6px;
+}
+scale highlight {
+ background: @accent_color;
+ border-radius: 4px;
+}
+scale slider {
+ background: @ink_1;
+ border: 2px solid @accent_color;
+ border-radius: 50%;
+ min-width: 16px;
+ min-height: 16px;
+ box-shadow: 0 1px 4px alpha(black, 0.5);
+}
+
+/* Progress bar (jauge horizontale type batterie) */
+progressbar trough {
+ background: @bg_1;
+ border: 1px solid @border_2;
+ border-radius: 4px;
+ box-shadow: inset 0 1px 2px alpha(black, 0.4);
+ min-height: 12px;
+}
+progressbar progress {
+ background: @success_color;
+ border-radius: 3px;
+ box-shadow: 0 0 8px alpha(@success_color, 0.45);
+}
+
+/* Niveaux de progression sémantiques (à appliquer via add_css_class) */
+progressbar.warning progress { background: @warning_color; }
+progressbar.error progress { background: @error_color; }
+progressbar.info progress { background: @info_color; }
+
+/* Notebook / onglets */
+notebook header {
+ background: @bg_2;
+ border-bottom: 1px solid @border_2;
+}
+notebook tab {
+ padding: 8px 16px;
+ color: @ink_3;
+ border-top: 2px solid transparent;
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 12px;
+}
+notebook tab:checked {
+ color: @ink_1;
+ border-top-color: @accent_color;
+ background: @bg_3;
+}
+
+/* Popover */
+popover contents {
+ background: @bg_3;
+ color: @ink_1;
+ border: 1px solid @border_2;
+ border-radius: 10px;
+ padding: 6px;
+ box-shadow: 0 12px 32px alpha(black, 0.55);
+}
+
+/* Menubutton / dropdown */
+menubutton button {
+ padding: 4px 8px;
+}
+
+/* Status pill (badge) — à appliquer sur GtkLabel.status */
+label.status {
+ padding: 2px 8px;
+ border-radius: 999px;
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+}
+label.status.ok { background: alpha(@success_color, 0.18); color: @success_color; }
+label.status.warn { background: alpha(@warning_color, 0.18); color: @warning_color; }
+label.status.error { background: alpha(@error_color, 0.18); color: @error_color; }
+label.status.info { background: alpha(@info_color, 0.18); color: @info_color; }
+
+/* Texte monospace / terminal */
+label.mono,
+.mono {
+ font-family: 'JetBrains Mono', monospace;
+}
+label.terminal,
+.terminal {
+ font-family: 'Share Tech Mono', 'VT323', monospace;
+ letter-spacing: 0.02em;
+}
+
+/* Carte tuile (à appliquer via add_css_class("tile")) */
+.tile,
+.card {
+ background: @bg_3;
+ color: @ink_1;
+ border: 1px solid @border_2;
+ border-radius: 12px;
+ padding: 14px;
+ box-shadow:
+ inset 0 1px 0 alpha(white, 0.06),
+ inset 0 -1px 0 alpha(black, 0.4),
+ 0 2px 4px alpha(black, 0.4),
+ 0 6px 14px alpha(black, 0.45);
+}
+
+/* Scrollbar */
+scrollbar slider {
+ background: @border_2;
+ border-radius: 4px;
+ min-width: 6px;
+ min-height: 6px;
+}
+scrollbar slider:hover {
+ background: @accent_soft;
+}
+
+/* ============================================================
+ THÈME CLAIR — à charger en alternative
+ Pour appliquer le thème clair, charger ce fichier puis
+ `tokens.gnome.light.css` (à dupliquer en remplaçant
+ les @define-color des fonds et encres) OU appliquer
+ un settings GTK light :
+ g_object_set(gtk_settings, "gtk-application-prefer-dark-theme",
+ FALSE, NULL);
+ Et fournir un fichier dérivé avec les valeurs ci-dessous :
+ ============================================================ */
+/*
+ bg_0: #b8b2a3
+ bg_1: #d5d0c5
+ bg_2: #dcd7cc
+ bg_3: #e3ded3
+ bg_4: #ccc6b8
+ bg_5: #bdb6a7
+ ink_1: #28241f
+ ink_2: #3c3836
+ ink_3: #5a544c
+ ink_4: #8a8278
+ accent_color: #af3a03
+ success_color: #3c911c
+ warning_color: #b57614
+ error_color: #9d0006
+ info_color: #427b58
+ blue_color: #2d82a3
+ purple_color: #8c468c
+*/
diff --git a/design_system/package-smartphone/tokens/tokens.json b/design_system/package-smartphone/tokens/tokens.json
new file mode 100644
index 0000000..915e0bf
--- /dev/null
+++ b/design_system/package-smartphone/tokens/tokens.json
@@ -0,0 +1,136 @@
+{
+ "$schema": "design-tokens-v1",
+ "name": "mon design system — gruvbox seventies",
+ "version": "1.0.0",
+ "description": "Design system Gruvbox seventies. Orange brûlé, fond brun délavé en sombre / gris clair usé en clair. Deux thèmes dark/light parfaitement à parité.",
+ "themes": {
+ "dark": {
+ "bg": {
+ "0": { "value": "#221c17", "description": "Niveau le plus profond, rare" },
+ "1": { "value": "#2a231d", "description": "Fond application principal" },
+ "2": { "value": "#322a23", "description": "Panneaux (sidebar, headerbar)" },
+ "3": { "value": "#3c332a", "description": "Cartes, tuiles" },
+ "4": { "value": "#4a4035", "description": "Hover, état actif" },
+ "5": { "value": "#5a4f43", "description": "Press, sélection forte" }
+ },
+ "ink": {
+ "1": { "value": "#f2e5c7", "description": "Texte principal (cream)" },
+ "2": { "value": "#d5c4a1", "description": "Texte secondaire" },
+ "3": { "value": "#a89984", "description": "Labels, hints" },
+ "4": { "value": "#7c6f64", "description": "Désactivé" }
+ },
+ "accent": {
+ "primary": { "value": "#fe8019", "description": "Orange Gruvbox seventies" },
+ "soft": { "value": "#d65d0e", "description": "Orange foncé (hover, bordures)" },
+ "glow": { "value": "rgba(254, 128, 25, 0.35)" },
+ "tint": { "value": "rgba(254, 128, 25, 0.12)" }
+ },
+ "status": {
+ "ok": { "value": "#4dbb26" },
+ "warn": { "value": "#fabd2f" },
+ "err": { "value": "#fb4934" },
+ "info": { "value": "#83a598" }
+ },
+ "extra": {
+ "blue": { "value": "#3db0d1" },
+ "purple": { "value": "#c882c8" }
+ },
+ "border": {
+ "1": { "value": "rgba(168, 153, 132, 0.18)" },
+ "2": { "value": "rgba(168, 153, 132, 0.32)" },
+ "3": { "value": "rgba(168, 153, 132, 0.55)" }
+ }
+ },
+ "light": {
+ "bg": {
+ "0": { "value": "#b8b2a3", "description": "Niveau le plus profond" },
+ "1": { "value": "#d5d0c5", "description": "Fond application principal" },
+ "2": { "value": "#dcd7cc", "description": "Panneaux" },
+ "3": { "value": "#e3ded3", "description": "Cartes, tuiles" },
+ "4": { "value": "#ccc6b8", "description": "Hover" },
+ "5": { "value": "#bdb6a7", "description": "Press" }
+ },
+ "ink": {
+ "1": { "value": "#28241f", "description": "Texte principal" },
+ "2": { "value": "#3c3836", "description": "Texte secondaire" },
+ "3": { "value": "#5a544c", "description": "Labels, hints" },
+ "4": { "value": "#8a8278", "description": "Désactivé" }
+ },
+ "accent": {
+ "primary": { "value": "#af3a03", "description": "Orange brûlé (variante contrastée)" },
+ "soft": { "value": "#d65d0e" },
+ "glow": { "value": "rgba(175, 58, 3, 0.28)" },
+ "tint": { "value": "rgba(175, 58, 3, 0.08)" }
+ },
+ "status": {
+ "ok": { "value": "#3c911c" },
+ "warn": { "value": "#b57614" },
+ "err": { "value": "#9d0006" },
+ "info": { "value": "#427b58" }
+ },
+ "extra": {
+ "blue": { "value": "#2d82a3" },
+ "purple": { "value": "#8c468c" }
+ },
+ "border": {
+ "1": { "value": "rgba(60, 56, 54, 0.15)" },
+ "2": { "value": "rgba(60, 56, 54, 0.28)" },
+ "3": { "value": "rgba(60, 56, 54, 0.5)" }
+ }
+ }
+ },
+ "typography": {
+ "fonts": {
+ "ui": { "family": "Inter", "weights": [400, 500, 600, 700], "fallback": ["Cantarell", "system-ui", "sans-serif"] },
+ "mono": { "family": "JetBrains Mono", "weights": [400, 500, 600, 700], "fallback": ["ui-monospace", "monospace"] },
+ "terminal": { "family": "Share Tech Mono", "weights": [400], "fallback": ["VT323", "Courier New", "monospace"] }
+ },
+ "scale": {
+ "label": { "size": 11, "weight": 500, "transform": "uppercase", "tracking": "0.08em", "family": "mono" },
+ "caption": { "size": 12, "weight": 400, "family": "ui" },
+ "body": { "size": 14, "weight": 400, "family": "ui" },
+ "body-emph": { "size": 14, "weight": 600, "family": "ui" },
+ "title": { "size": 18, "weight": 700, "family": "ui" },
+ "h2": { "size": 22, "weight": 700, "family": "ui" },
+ "h1": { "size": 28, "weight": 700, "family": "ui" },
+ "display": { "size": 44, "weight": 700, "family": "ui" },
+ "kpi": { "size": 28, "weight": 700, "family": "mono" }
+ }
+ },
+ "radius": {
+ "xs": 3,
+ "sm": 4,
+ "md": 6,
+ "lg": 8,
+ "xl": 10,
+ "2xl": 12,
+ "pill": 999
+ },
+ "spacing": {
+ "1": 4,
+ "2": 6,
+ "3": 8,
+ "4": 10,
+ "5": 12,
+ "6": 14,
+ "7": 16,
+ "8": 18,
+ "9": 20,
+ "10": 24,
+ "12": 32,
+ "14": 40,
+ "16": 56
+ },
+ "shadows": {
+ "1": "0 1px 2px rgba(0,0,0,0.4)",
+ "2": "0 4px 12px rgba(0,0,0,0.45)",
+ "3": "0 12px 32px rgba(0,0,0,0.55)",
+ "press": "inset 0 2px 4px rgba(0,0,0,0.5)",
+ "tile3d": "inset 0 1px 0 rgba(255,230,180,0.12), inset 0 -1px 0 rgba(0,0,0,0.45), 0 1px 0 rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.4), 0 8px 18px rgba(0,0,0,0.5)"
+ },
+ "motion": {
+ "fast": "60ms ease",
+ "normal": "180ms cubic-bezier(.3,.7,.3,1.2)",
+ "slow": "400ms cubic-bezier(.3,.6,.3,1)"
+ }
+}