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/primitives/DsText.vue
+++ b/design-system/primitives/DsText.vue
@@ -0,0 +1,127 @@
+<template>
+  <component
+    :is="as"
+    :class="[
+      'ds-text',
+      `ds-text--${props.font}`,
+      `ds-text--${props.size || resolvedsize}`,
+      `ds-text--${props.weight || resolvedWeight}`, //si la classe weight n'est pas donné dans la classe on prend la mapping par défaut
+      `ds-text--${props.spacing || resolvedspacing}`,
+      `ds-text--${props.tone}`,
+      props.clamp ? `ds-text--clamp_${props.clamp}` : '',
+    ]"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup>
+  import { computed } from 'vue'
+
+  const props = defineProps({
+    as: { type: String, default: 'p' },                 // p/span/div
+    font: { type: String, default: 'roboto' },        // barlow | brandon
+    size: { type: String, default: '' },              // xs/sm/md/lg
+    spacing: { type: String, default: '' },
+    tone: { type: String, default: 'default' },         // default/muted/invert
+    weight: { type: String, default: 'regular' },       // regular/medium
+    clamp: { type: Number, default: undefined },                // nombre de lignes du contenu
+  })
+
+  const resolvedsize = computed(() => {
+    switch (props.as) {
+      case 'p':
+        return 'md'
+      default:
+        return 'md'
+    }
+  })
+
+  const resolvedWeight = computed(() => {
+    switch (props.as) {
+      case 'p':
+        return 'regular'
+      default:
+        return 'regular'
+    }
+  })
+
+  const resolvedspacing = computed(() => {
+    switch (props.as) {
+      case 'p':
+        return 'space-6'
+      case 'ul':
+        return 'space-6'
+      case 'ol':
+        return 'space-6'
+      case 'li':
+        return 'space-6'
+      case 'pre':
+        return 'space-6'
+      case 'blockquote':
+        return 'space-6'
+      default:
+        return 'space-6'
+    }
+  })
+
+</script>
+
+<style lang="scss">
+  .ds-text {
+    &--roboto { font-family: var(--font-roboto); }
+    &--barlow { font-family: var(--font-barlow); }
+    &--brandon { font-family: var(--font-brandon); }
+
+    font-optical-sizing: auto; /* laisser le navigateur gérer opsz */
+    font-variation-settings: "opsz" var(--opsz-title); /* optionnel pour le forcer */
+
+    line-height: var(--lh-base);
+    letter-spacing: var(--ls-normal);
+    margin: 0;
+
+    &--xs { font-size: var(--text-xs); }
+    &--sm { font-size: var(--text-sm); }
+    &--md { font-size: var(--text-md); }
+    &--lg { font-size: var(--text-lg); }
+
+    &--light { font-weight: var(--fw-light); } 
+    &--regular { font-weight: var(--fw-regular); }  
+    &--medium { font-weight: var(--fw-medium); }  
+    &--semibold { font-weight: var(--fw-semibold); }
+    &--bold { font-weight: var(--fw-bold); }
+    &--extrabold { font-weight: var(--fw-extrabold); }
+    &--black { font-weight: var(--fw-black); }
+
+    &--space-48 { margin-bottom: var(--sp-48); }
+    &--space-40 { margin-bottom: var(--sp-40); }
+    &--space-32 { margin-bottom: var(--sp-32); }
+    &--space-24 { margin-bottom: var(--sp-24); }
+    &--space-20 { margin-bottom: var(--sp-20); }
+    &--space-16 { margin-bottom: var(--sp-16); }
+    &--space-6 { margin-bottom: var(--sp-6); }
+
+    &--default { color: var(--c-text, #111); }
+    &--muted { color: var(--c-text-muted, #555); }
+    &--invert { color: var(--c-text-invert, #fff); }
+    &--brand_rouge { color: var(--c-brand_rouge); }
+    &--brand_rouge-weak { color: var(--c-brand_rouge-weak); }
+    &--success { color: var(--c-success); }
+    &--warning { color: var(--c-warning); }
+    &--danger { color: var(--c-danger); }
+    &--bleu_fonce { color: var(--c-bleu_fonce); }
+    &--bleu_clair { color: var(--c-bleu_clair); }
+
+    // clampé sur 2 lignes pour les cartes (résumé, programme, etc.).
+    // Si ça dépasse, ça coupe proprement. Pour du texte de description qui doit tenir dans un cadre, mais qui a été écrit trop long, pour ne pas casser le design du site, on va limiter l'affichage à 2 lignes. c'est pour des espace réduit. Pour ne pas casser le design de la page. J'ai presque écrit 2 lignes, je vais bientôt être censurée.
+    &--clamp_3 {
+      display: -webkit-box;
+      line-clamp: 3;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+  }
+</style>
+