update a lot of change since a while

2026-01-22 10:29:36 +01:00
parent a4dcb95d83
commit e1c1475f10
78 changed files with 4200 additions and 534 deletions
--- a/design-system/tokens/_typography.scss
+++ b/design-system/tokens/_typography.scss
@@ -0,0 +1,113 @@
+:root {
+    /* Font stacks (remplace Inter si tu as une font ONDIF) */
+    --font-roboto: "Roboto Flex", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+    --font-brandon: 'Brandon Text',
+                system-ui,
+                -apple-system,
+                "Segoe UI",
+                Roboto,
+                Arial,
+                sans-serif;
+    --font-barlow: 'Barlow',
+            system-ui,
+            -apple-system,
+            "Segoe UI",
+            Roboto,
+            Arial,
+            sans-serif;
+
+    /* Font weights */
+    --fw-extralight: 200;
+    --fw-light: 300;
+    --fw-regular: 400;
+    --fw-medium: 500;
+    --fw-semibold: 600;
+    --fw-bold: 700;
+    --fw-extrabold: 800;
+    --fw-black: 900;
+
+    /* Optical size (opsz) : utile avec Roboto Flex */
+    --opsz-body: 14;
+    --opsz-title: 28;
+
+    /* Line heights */
+    --lh-tight: 1.15;
+    --lh-snug: 1.25;
+    --lh-base: 1.5;
+
+    /* Letter spacing (optionnel mais utile) */
+    --ls-tight: -0.01em;
+    --ls-normal: 0;
+    --ls-wide: 0.02em;
+
+    /* Scale (mobile-first) */
+    --fs-12: 0.75rem;   /* 12 */
+    --fs-14: 0.875rem;  /* 14 */
+    --fs-16: 1rem;      /* 16 */
+    --fs-17: 1.0625rem;      /* 17 */
+    --fs-18: 1.125rem;  /* 18 */
+    --fs-20: 1.25rem;   /* 20 */
+    --fs-23: 1.4375rem;   /* 23 */
+    --fs-24: 1.5rem;    /* 24 */
+    --fs-28: 1.75rem;   /* 28 */
+    --fs-30: 1.875rem;   /* 30 */
+    --fs-32: 2rem;      /* 32 */
+    --fs-40: 2.5rem;    /* 40 */
+
+    /* Semantic mapping (ça c’est ton “API” DS) */
+    --text-xs: var(--fs-12);
+    --text-sm: var(--fs-14);
+    --text-md: var(--fs-16);
+    --text-lg: var(--fs-18);
+
+    --title-xs: var(--fs-16);
+    --title-xs2: var(--fs-17);
+    --title-sm: var(--fs-18);
+    --title-md: var(--fs-20);
+    --title-md2: var(--fs-23);
+    --title-lg: var(--fs-24);
+    --title-lg2: var(--fs-30);
+    --title-xl: var(--fs-32);
+    --title-2xl: var(--fs-40);
+}
+
+/* Option : ajustements desktop */
+@media (max-width: 700px) {
+    :root {
+        --title-xs: var(--fs-12);
+        --title-xs2: var(--fs-14);
+        --title-sm: var(--fs-14);
+        --title-md: var(--fs-16);
+        --title-md2: var(--fs-17);
+        --title-lg: var(--fs-18);
+        --title-lg2: var(--fs-20);
+        --title-xl: var(--fs-20);
+        --title-2xl: var(--fs-24);
+    }
+}
+@media (min-width: 700px) {
+    :root {
+        --title-xs: var(--fs-14);
+        --title-xs2: var(--fs-16);
+        --title-sm: var(--fs-16);
+        --title-md: var(--fs-18);
+        --title-md2: var(--fs-20);
+        --title-lg: var(--fs-20);
+        --title-lg2: var(--fs-24);
+        --title-xl: var(--fs-24);
+        --title-2xl: var(--fs-32);
+    }
+}
+@media (min-width: 1024px) {
+    :root {
+        --title-xs: var(--fs-16);
+        --title-xs2: var(--fs-17);
+        --title-sm: var(--fs-18);
+        --title-md: var(--fs-20);
+        --title-md2: var(--fs-23);
+        --title-lg: var(--fs-24);
+        --title-lg2: var(--fs-30);
+        --title-xl: var(--fs-32);
+        --title-2xl: var(--fs-40);
+    }
+}