update a lot of change since a while

design-system/primitives/DsHeading.vue

@@ -0,0 +1,143 @@
+<template>
+  <component
+    :is="as"
+    :class="[
+      'ds-heading',
+      `ds-heading--${font}`,
+      `ds-heading--${resolvedsize}`,
+      `ds-heading--${resolvedWeight}`,
+      `ds-heading--${resolvedspacing}`, //margin-bottom
+      `ds-heading--${tone}`
+    ]"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup>
+  import { computed } from 'vue'
+
+  const props = defineProps({
+    as: { type: String, default: 'h2' },               // h1/h2/h3/p/span...
+    font: { type: String, default: 'roboto' },        // barlow | brandon
+    tone: { type: String, default: 'default' },        // default/muted/invert
+  })
+
+  const resolvedWeight = computed(() => {
+    switch (props.as) {
+      case 'h1':
+        return 'extrabold'
+      case 'h2':
+        return 'bold'
+      case 'h3':
+        return 'semibold'
+      case 'h4':
+        return 'black'
+      case 'h5':
+        return 'medium'
+      case 'h6':
+        return 'extralight'
+      default:
+        return 'semibold'
+    }
+  })
+
+  const resolvedsize = computed(() => {
+    switch (props.as) {
+      case 'h1':
+        return '2xl'
+      case 'h2':
+        return 'xl'
+      case 'h3':
+        return 'lg'
+      case 'h4':
+        return 'lg2'
+      case 'h5':
+        return 'md2'
+      case 'h6':
+        return 'xs2'
+      default:
+        return 'semibold'
+    }
+  })
+
+  // Margin-bottom
+  const resolvedspacing = computed(() => {
+    switch (props.as) {
+      case 'h1':
+        return 'space-6'
+      case 'h2':
+        return 'space-6'
+      case 'h3':
+        return 'space-6'
+      case 'h4':
+        return 'space-6'
+      case 'h5':
+        return 'space-6'
+      case 'h6':
+        return 'space-6'
+      default:
+        return 'space-6'
+    }
+  })
+
+</script>
+
+<style lang="scss">
+  .ds-heading {
+    &--roboto { font-family: var(--font-roboto); }
+    &--barlow { font-family: var(--font-barlow); }
+    &--brandon { font-family: var(--font-brandon); }
+    line-height: var(--lh-tight);
+    letter-spacing: var(--ls-tight);
+    margin: 0;
+    font-optical-sizing: auto; /* laisser le navigateur gérer opsz */
+    font-variation-settings: "opsz" var(--opsz-title); /* optionnel pour le forcer */
+
+    &--xs { font-size: var(--title-xs); }
+    &--xs2 { font-size: var(--title-xs2); }
+    &--sm { font-size: var(--title-sm); }
+    &--md { font-size: var(--title-md); }
+    &--md2 { font-size: var(--title-md2); }
+    &--lg { font-size: var(--title-lg); }
+    &--lg2 { font-size: var(--title-lg2); }
+    &--xl { font-size: var(--title-xl); }
+    &--2xl { font-size: var(--title-2xl); }
+
+    &--extralight { font-weight: var(--fw-extralight); } 
+    &--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); }
+
+    //TONE
+    &--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); }
+
+    
+
+    &--info { color: var(--c-info); }
+
+
+
+  }
+</style>