/* ═══════════════════════════════════════════════════════════════════ FOLYO DESIGN SYSTEM — Tokens ─────────────────────────────────────────────────────────────────── Source de vérité unique pour toutes les valeurs visuelles. À charger en premier dans tout fichier HTML qui consomme le DS : ═══════════════════════════════════════════════════════════════════ */ :root { /* ─────────────────────────────────────────────────────────────── COULEURS — Surfaces sombres Du plus clair au plus sombre. Toutes les surfaces "warm" tirent vers le brun (#14100c base), c'est l'identité Folyo (carnet). ─────────────────────────────────────────────────────────────── */ --color-bg-app: #1a1a1a; /* fond global de l'app */ --color-bg-page: #111; /* couverture du carnet */ --color-bg-warm-darkest: #14100c; /* toast, surfaces les plus sombres */ --color-bg-warm-dark: #1c1913; /* dropdowns, modales */ --color-bg-warm-translucent: rgba(14,11,8,0.82); /* navbar, edit-toolbar (avec blur) */ /* ─────────────────────────────────────────────────────────────── COULEURS — Surfaces claires (papier) ─────────────────────────────────────────────────────────────── */ --color-paper: #fbf9f4; /* page intérieure du carnet */ --color-paper-warm: #f3ecd8; /* zone de prévisualisation texte */ --color-text-light: #f8f4ec; /* titres et texte primaire sur fond sombre */ --color-text-light-soft: #f0ece4; /* corps de texte, toasts */ /* ─────────────────────────────────────────────────────────────── COULEURS — Accents ─────────────────────────────────────────────────────────────── */ --color-accent-gold: #D4A800; /* couleur signature (logo, badges, taglines) */ --color-accent-gold-vivid: #FCBD0A; /* or vif — notch view-only (fond très visible) */ --color-success: #6ad48d; /* toast succès, validations */ --color-success-muted: #5a9a5a; /* vert confirm (boutons d'action positive) */ --color-error: #ff7e7e; /* toast erreur, messages d'erreur */ --color-destructive: #c0392b; /* boutons de suppression */ --color-destructive-hover: #a93226; /* hover des boutons de suppression */ /* ─────────────────────────────────────────────────────────────── COULEURS — Sur fond papier (texte sombre sur surfaces claires) Utilisées sur les pages du carnet, modales claires, inputs light. ─────────────────────────────────────────────────────────────── */ --color-on-paper: #2a2a2a; /* texte principal sur fond papier */ --color-on-paper-warm: #2a221b; /* texte warm (manifesto, signatures) */ --color-on-paper-soft: #666666; /* texte secondaire sur fond papier */ --color-on-paper-muted: #888888; /* labels, hints, texte discret */ --color-on-paper-subtle: #aaaaaa; /* texte très discret, placeholders */ --color-border-paper: #e8e8e8; /* borders et hover sur fond clair */ /* ─────────────────────────────────────────────────────────────── COULEURS — Tons chauds intermédiaires (intérieur carnet, manifesto) ─────────────────────────────────────────────────────────────── */ --color-warm-mid: #3a3530; /* borders dans contexte warm sombre */ --color-warm-light: #d8d2c5; /* texte secondaire dans contexte warm */ /* ─────────────────────────────────────────────────────────────── ÉCHELLE D'OPACITÉ SUR BLANC (alpha) 13 niveaux couvrant tous les usages réels de l'app. Règle : choisir le niveau le plus proche de l'intention visuelle. ─────────────────────────────────────────────────────────────── */ --white-04: rgba(255,255,255,0.04); /* fonds extrêmement subtils */ --white-08: rgba(255,255,255,0.08); /* borders légers (navbar, dividers) */ --white-10: rgba(255,255,255,0.10); /* hover backgrounds (boutons ghost) */ --white-12: rgba(255,255,255,0.12); /* borders standards (inputs, cartes) */ --white-16: rgba(255,255,255,0.16); /* état actif (boutons toggle) */ --white-20: rgba(255,255,255,0.20); /* hover backgrounds accentués */ --white-25: rgba(255,255,255,0.25); /* borders focus, placeholders forts */ --white-35: rgba(255,255,255,0.35); /* placeholders légers */ --white-45: rgba(255,255,255,0.45); /* texte désactivé / très secondaire */ --white-55: rgba(255,255,255,0.55); /* texte secondaire */ --white-65: rgba(255,255,255,0.65); /* texte tertiaire / sous-titres */ --white-75: rgba(255,255,255,0.75); /* texte hover, liens */ --white-100: #ffffff; /* texte primaire, boutons primary */ /* ─────────────────────────────────────────────────────────────── TYPOGRAPHIE — Familles ─────────────────────────────────────────────────────────────── */ --font-sans: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --font-script: 'Caveat', cursive; /* signatures, accents manuscrits stylés */ --font-marker: 'Permanent Marker', cursive; /* notes, titres manuscrits casual */ --font-hand: 'Patrick Hand', 'Kalam', cursive; /* texte manuscrit dans le carnet */ /* ─────────────────────────────────────────────────────────────── TYPOGRAPHIE — Tailles (échelle modulaire) base = 13px (le plus fréquent dans l'app : body, boutons, inputs) ─────────────────────────────────────────────────────────────── */ --text-2xs: 10px; /* micro-labels, compteurs, annotations */ --text-xs: 11px; /* labels uppercase, tooltips */ --text-sm: 12px; /* texte secondaire, badges, save btn */ --text-base: 13px; /* corps, boutons, inputs (DEFAULT) */ --text-md: 14px; /* logo navbar, body large */ --text-lg: 16px; /* titres de cartes */ --text-xl: 18px; /* titres de dialogues */ --text-xl-2: 20px; /* titres de modales secondaires */ --text-2xl: 22px; /* titres de modales principales */ --text-3xl: 24px; /* titres hero */ /* ─────────────────────────────────────────────────────────────── TYPOGRAPHIE — Poids ─────────────────────────────────────────────────────────────── */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* le plus utilisé pour titres et CTAs */ --weight-bold: 700; /* ─────────────────────────────────────────────────────────────── ESPACEMENTS — Échelle base 4px (multiples 4 et 8) Utiliser pour padding, margin, gap. ─────────────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; /* le plus utilisé (gap entre boutons, items) */ --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px; /* ─────────────────────────────────────────────────────────────── BORDER RADIUS Consolidé : 18 valeurs → 7 niveaux + pill + circle. Les radius asymétriques (3px 10px 10px 3px pour la reliure du carnet, 16px 16px 0 0 pour les bottom-sheets…) restent en local dans le composant — pas pertinents en token. ─────────────────────────────────────────────────────────────── */ --radius-sm: 4px; /* checkboxes, petites pastilles */ --radius-md: 6px; /* badges, save btn, swatches */ --radius-lg: 8px; /* boutons standard, inputs, cartes (DEFAULT) */ --radius-lg-2: 10px; /* cartes intermédiaires, panels secondaires */ --radius-xl: 12px; /* modales secondaires, panels */ --radius-2xl: 18px; /* modales principales */ --radius-pill: 100px; /* edit-toolbar (forme pilule) */ --radius-circle: 50%; /* avatars, icon buttons ronds */ /* ─────────────────────────────────────────────────────────────── OMBRES — Élévation Du plus subtil au plus prononcé. ─────────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.4); /* slider thumb, micro-éléments */ --shadow-md: 0 4px 16px rgba(0,0,0,0.4); /* crop toolbar, panels secondaires */ --shadow-lg: 0 4px 24px rgba(0,0,0,0.5); /* edit-toolbar (DEFAULT pour UI flottante) */ --shadow-xl: 0 10px 30px rgba(0,0,0,0.6); /* dropdowns, menus */ --shadow-2xl: 0 12px 40px rgba(0,0,0,0.55); /* modales principales (manifesto) */ /* ─────────────────────────────────────────────────────────────── GLASSMORPHISM — backdrop-filter Toujours dupliquer avec -webkit-backdrop-filter pour Safari. ─────────────────────────────────────────────────────────────── */ --blur-light: blur(6px); /* overlays légers */ --blur-md: blur(16px); /* toasts, modales standards */ --blur-strong: blur(24px) saturate(1.6); /* navbar, edit-toolbar */ /* ─────────────────────────────────────────────────────────────── Z-INDEX — Hiérarchie nommée Utiliser ces tokens plutôt que des chiffres magiques. ─────────────────────────────────────────────────────────────── */ --z-page: 1; /* contenu principal */ --z-action-bar: 199; /* barre d'action (juste sous la toolbar) */ --z-toolbar: 200; /* navbar, edit-toolbar (UI sticky) */ --z-dropdown: 300; /* dropdowns ouverts */ --z-submenu: 310; /* sous-menus (au-dessus des dropdowns) */ --z-modal: 1000; /* modales standard */ --z-above-modal: 1001; /* overlays au-dessus des modales (text-overlay) */ --z-toast: 9999; /* notifications toasts */ --z-pre-toast: 9998; /* overlays sous les toasts (notch hint) */ --z-overlay-fullscreen: 99999; /* welcome, phone-success */ --z-system: 999999; /* rotate hint, camera (couche système max) */ /* ─────────────────────────────────────────────────────────────── MOTION — Durées Consolidé : 25+ valeurs → 5 niveaux. ─────────────────────────────────────────────────────────────── */ --duration-instant: 0.10s; /* feedback immédiat (active state) */ --duration-fast: 0.15s; /* hover de boutons (DEFAULT, 40+ usages) */ --duration-base: 0.25s; /* transitions standards (modales, toasts) */ --duration-slow: 0.34s; /* expansions de toolbar, sheets */ --duration-deliberate: 0.55s; /* animations marquantes (manifesto) */ /* ─────────────────────────────────────────────────────────────── MOTION — Easings 3 courbes pour 90% des cas. Les 8 autres easings du code restent locaux aux animations spécifiques (page flip, halo, etc.). ─────────────────────────────────────────────────────────────── */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* Material standard */ --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); /* spring doux */ --ease-overshoot: cubic-bezier(0.34, 1.3, 0.64, 1); /* léger rebond */ }