/* ============================================================================ LIFE AND LEARNING — DESIGN SYSTEM FOUNDATIONS ============================================================================ Version : 0.1.0 Auteur : Zalihata Ahamada Source : Figma "Life and Learning Design System" — Foundations Ce fichier expose tous les tokens du DS sous forme de variables CSS. Il sert de base à toutes les pages (page Quedarte, futur site Wagtail, etc.). STRUCTURE --------- 1. Primitives — valeurs brutes (couleurs, tailles, etc.) 2. Semantic — Surface — fonds 3. Semantic — Text — couleurs de texte 4. Semantic — Border — couleurs de bordures 5. Semantic — Action — boutons (Primary / Secondary / Ghost / Danger) 6. Semantic — Feedback — états de feedback (success / warning / error) 7. Semantic — State — focus, disabled 8. Semantic — Input — états de formulaires 9. Radius 10. Spacing 11. Shadow 12. Typography — fonts, échelles desktop & mobile 13. Reset & base 14. Utilities accessibilité CONVENTION ---------- - Utiliser TOUJOURS les tokens sémantiques dans les composants. - N'utiliser les primitives qu'en dernier recours, jamais directement dans le code des pages. - Exemple : ✅ background: var(--surface-default); ❌ background: var(--neutral-white); ============================================================================ */ /* ============================================================================ 1. PRIMITIVES ============================================================================ */ :root { /* --- Brand / Turquoise ------------------------------------------------- */ --brand-turquoise-100: #D8EFFB; --brand-turquoise-200: #B1DFF7; --brand-turquoise-300: #8BD0F3; --brand-turquoise-500: #64C0EF; --brand-turquoise-700: #1A7FA8; /* --- Brand / Green ----------------------------------------------------- */ --brand-green-100: #D3F1E4; --brand-green-200: #A7E4C9; --brand-green-300: #7CD6AF; --brand-green-500: #50C994; --brand-green-700: #2A8A5E; /* --- Brand / Gradient -------------------------------------------------- */ --brand-gradient-start: #64C0EF; /* = turquoise-500 */ --brand-gradient-end: #50C994; /* = green-500 */ --brand-gradient: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end)); /* --- Neutral ----------------------------------------------------------- */ --neutral-black: #000000; --neutral-white: #FFFFFF; --neutral-grey-900: #28374B; --neutral-grey-700: #5E6978; --neutral-grey-500: #939BA5; --neutral-grey-300: #C9CDD2; /* --- Semantic / Yellow ------------------------------------------------- */ --semantic-yellow-100: #FFF4CE; --semantic-yellow-200: #FFE99D; --semantic-yellow-300: #FFDE6D; --semantic-yellow-500: #FFD33C; /* --- Semantic / Orange ------------------------------------------------- */ --semantic-orange-100: #FEE4D5; --semantic-orange-200: #FCCAAB; --semantic-orange-300: #FBAF82; --semantic-orange-500: #FA9558; /* --- Semantic / Error -------------------------------------------------- */ --semantic-error-400: #FD4F4F; --semantic-error-500: #FD2727; --semantic-error-600: #D41E1E; /* ========================================================================== 2. SEMANTIC — SURFACE Fonds par défaut, sobre, ou accentué. ========================================================================== */ --surface-default: var(--neutral-white); --surface-subtle: var(--brand-turquoise-100); --surface-emphasis: var(--neutral-grey-900); /* ========================================================================== 3. SEMANTIC — TEXT ========================================================================== */ --text-primary: var(--neutral-grey-900); --text-secondary: var(--neutral-grey-700); --text-subtle: var(--neutral-grey-500); --text-inverse: var(--neutral-white); --text-brand: var(--brand-turquoise-500); /* ========================================================================== 4. SEMANTIC — BORDER ========================================================================== */ --border-default: var(--neutral-grey-300); --border-subtle: var(--neutral-grey-500); --border-brand: var(--brand-turquoise-500); /* ========================================================================== 5. SEMANTIC — ACTION Tokens pour les 4 variantes de bouton du DS. ========================================================================== */ /* --- Action / Primary -------------------------------------------------- */ --action-primary-bg: var(--brand-turquoise-500); --action-primary-bg-hover: var(--brand-turquoise-300); --action-primary-text: var(--neutral-grey-900); /* --- Action / Secondary (outline) -------------------------------------- */ --action-secondary-bg: var(--neutral-white); --action-secondary-bg-hover: var(--brand-turquoise-100); --action-secondary-text: var(--brand-turquoise-500); --action-secondary-border: var(--brand-turquoise-500); /* --- Action / Ghost ---------------------------------------------------- */ --action-ghost-text: var(--brand-turquoise-500); --action-ghost-bg-hover: var(--brand-turquoise-100); /* --- Action / Danger --------------------------------------------------- */ --action-danger-bg: var(--semantic-error-500); --action-danger-bg-hover: var(--semantic-error-400); --action-danger-text: var(--neutral-white); /* ========================================================================== 6. SEMANTIC — FEEDBACK ========================================================================== */ --feedback-error: var(--semantic-error-600); --feedback-warning: var(--semantic-orange-500); --feedback-caution: var(--semantic-yellow-500); --feedback-success: var(--brand-green-500); /* ========================================================================== 7. SEMANTIC — STATE ========================================================================== */ --state-disabled-opacity: 0.4; /* 40% */ --state-focus-outline-width: 3px; --state-focus-outline: var(--brand-turquoise-500); --state-focus-outline-danger: var(--semantic-error-500); /* ========================================================================== 8. SEMANTIC — INPUT 11 tokens dédiés aux états de formulaires. ========================================================================== */ --input-background: var(--neutral-white); --input-background-disabled: var(--neutral-grey-300); --input-border-default: var(--neutral-grey-500); --input-border-hover: var(--neutral-grey-700); --input-border-focus: var(--brand-turquoise-500); --input-border-error: var(--semantic-error-600); --input-text-placeholder: var(--neutral-grey-700); --input-text-value: var(--neutral-grey-900); --input-label: var(--neutral-grey-900); --input-helper: var(--neutral-grey-700); --input-error-text: var(--semantic-error-600); /* ========================================================================== 9. RADIUS ========================================================================== */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ========================================================================== 10. SPACING Échelle 4-based. ========================================================================== */ --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-6: 24px; --spacing-8: 32px; --spacing-12: 48px; --spacing-16: 64px; /* ========================================================================== 11. SHADOW Shadows assemblés à partir des tokens primitifs Figma (x, y, blur). Couleur par défaut : noir à faible opacité (peut être ajustée). ========================================================================== */ --shadow-sm: 1px 5px 10px rgba(40, 55, 75, 0.06); --shadow-md: 5px 10px 20px rgba(40, 55, 75, 0.10); --shadow-lg: 2px 10px 20px rgba(40, 55, 75, 0.12); --shadow-xl: 1px 5px 14px rgba(40, 55, 75, 0.16); /* ========================================================================== 12. TYPOGRAPHY ========================================================================== */ /* --- Font families ----------------------------------------------------- */ --font-display: 'Poppins', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* --- Font weights ------------------------------------------------------ */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --- Heading sizes — DESKTOP ------------------------------------------- */ --h1-size: 56px; --h2-size: 48px; --h3-size: 40px; --h4-size: 32px; --h5-size: 24px; --h6-size: 20px; /* --- Heading line-heights --------------------------------------------- */ --h1-line: 120%; --h2-line: 120%; --h3-line: 120%; --h4-line: 130%; --h5-line: 140%; --h6-line: 140%; /* --- Body sizes (Inter) ----------------------------------------------- */ --body-large-size: 18px; --body-medium-size: 16px; --body-small-size: 14px; --body-tiny-size: 12px; --body-line: 150%; } /* --- Heading sizes — MOBILE ------------------------------------------- */ @media (max-width: 768px) { :root { --h1-size: 40px; --h2-size: 36px; --h3-size: 32px; --h4-size: 24px; --h5-size: 20px; --h6-size: 18px; } } /* ============================================================================ 13. RESET & BASE Reset minimal éco-design. ============================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--body-medium-size); line-height: var(--body-line); color: var(--text-primary); background-color: var(--surface-default); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video, picture { max-width: 100%; display: block; height: auto; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } a { color: inherit; text-decoration: none; } input, textarea, select { font-family: inherit; font-size: inherit; } /* --- Headings ---------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-primary); font-weight: var(--weight-bold); letter-spacing: -0.02em; } h1 { font-size: var(--h1-size); line-height: var(--h1-line); } h2 { font-size: var(--h2-size); line-height: var(--h2-line); } h3 { font-size: var(--h3-size); line-height: var(--h3-line); } h4 { font-size: var(--h4-size); line-height: var(--h4-line); } h5 { font-size: var(--h5-size); line-height: var(--h5-line); } h6 { font-size: var(--h6-size); line-height: var(--h6-line); } /* ============================================================================ 14. UTILITIES — ACCESSIBILITÉ ============================================================================ */ /* --- Focus visible : règle DS (3px turquoise-500) ----------------------- */ *:focus-visible { outline: var(--state-focus-outline-width) solid var(--state-focus-outline); outline-offset: 3px; border-radius: var(--radius-sm); } /* --- Focus visible variante danger (formulaires en erreur) -------------- */ .is-danger:focus-visible, [aria-invalid="true"]:focus-visible { outline-color: var(--state-focus-outline-danger); } /* --- Élément masqué visuellement mais lu par les lecteurs d'écran ------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Respect prefers-reduced-motion ------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --- État disabled générique ------------------------------------------- */ [disabled], .is-disabled { opacity: var(--state-disabled-opacity); pointer-events: none; cursor: not-allowed; } /* ============================================================================ 15. BRAND ASSETS — Logo Sitgesmorzart ============================================================================ Logo S calligraphique manuscrit (Posca) de Guillaume. 6 variantes de couleur disponibles, chacune fournie en pack complet (favicon + icons + logo header + Stripe). USAGE PAR CONTEXTE ------------------ Favicon (onglet navigateur, défaut) → A · noir/transparent (21:1 ✅ AAA) Favicon avec fond explicite blanc → B · noir/blanc (21:1 ✅ AAA) Logo header sur fond blanc → A · noir/transparent (21:1 ✅ AAA) OU G · turquoise-700/blanc (4.52:1 ✅ AA) Logo sur surface-subtle (turq-100) → H · grey-900/turq-100 (10.16:1 ✅ AAA) Logo sur fond brand foncé (turq-700) → E · blanc/turq-700 (4.52:1 ✅ AA) Image Stripe / OG cover / brand pop → C · noir/turq-500 (10.33:1 ✅ AAA) ❌ NE PAS UTILISER POUR USAGE FONCTIONNEL — contraste sous 3:1 - Blanc / turquoise-500 (2.03:1) - Blanc / gradient (2.03-2.07:1) Ces variantes restent acceptables pour usage purement décoratif grand format (hero, marketing) mais jamais pour favicon ni élément cliquable. STATUT WCAG / RGAA ------------------ Les logos sont strictement exemptés du critère de contraste WCAG 1.4.3. MAIS : un favicon a une fonction d'identification (élément fonctionnel), et notre engagement RGAA / éco-conception nous impose de viser ≥ 3:1 minimum partout, et 4.5:1 pour cohérence avec le reste de l'UI. → Les 6 variantes ci-dessus respectent toutes ce seuil. FICHIERS -------- Chaque variante est dans un dossier dédié avec : - favicon.ico (multi-résolution 16/32/48) - favicon-{16,32,48,64,96}.png - icon-{180,192,512}.png (Apple touch / Android / PWA) - logo-header-{80,160,240}.png (1×, 2×, 3× retina, ratio naturel ~0.88) - stripe-icon-512.png (carré 512 pour dashboard Stripe) PRÉSERVATION DE L'AUTHENTICITÉ ------------------------------ Le tracé Posca conserve volontairement ses bavures et irrégularités. Pas de version vectorisée SVG : la vectorisation lisserait le tracé et ferait perdre la signature manuelle, qui est le sens même du choix de ce logo (vs un logo généré). ============================================================================ */ /* ============================================================================ FIN — foundations.css ============================================================================ */