Concerts

design-system/primitives/DsHeading.vue

@@ -7,7 +7,8 @@
       `ds-heading--${resolvedsize}`,
       `ds-heading--${resolvedWeight}`,
       `ds-heading--${resolvedspacing}`, //margin-bottom
-      `ds-heading--${tone}`
+      `ds-heading--${tone}`,
+      `ds-heading--${textcase}`
     ]"
   >
     <slot />
@@ -21,6 +22,7 @@
     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
+    textcase: { type: String, default: 'default' }, // uppercase
   })
 
   const resolvedWeight = computed(() => {
@@ -133,7 +135,8 @@
     &--bleu_fonce { color: var(--c-bleu_fonce); }
     &--bleu_clair { color: var(--c-bleu_clair); }
 
-    
+    // CASE
+    &--uppercase {text-transform: uppercase;}
 
     &--info { color: var(--c-info); }
 

design-system/primitives/DsMedia.vue

@@ -25,6 +25,7 @@
   overflow: hidden;
   &--16-9 { aspect-ratio: 16 / 9; }
   &--4-3 { aspect-ratio: 4 / 3; }
+  &--3-4 { aspect-ratio: 3 / 4; }
   &--square { aspect-ratio: 1 / 1; }
 
   .ds-media__img {

design-system/primitives/DsText.vue

@@ -100,6 +100,7 @@
     &--space-20 { margin-bottom: var(--sp-20); }
     &--space-16 { margin-bottom: var(--sp-16); }
     &--space-6 { margin-bottom: var(--sp-6); }
+    &--space-0 { margin-bottom: 0px; }
 
     &--default { color: var(--c-text, #111); }
     &--muted { color: var(--c-text-muted, #555); }

design-system/tokens/_colors.scss

@@ -4,6 +4,7 @@
     --c-surface: #ffffff;
     --c-text-muted: #555;
     --c-text-invert: #fff;
+    --c-text-black-soft: #595959;
 
     /* Marque / accent (ex: rouge ONDIF) */
     //--c-brand_rouge: #E30613;

design-system/tokens/_typography.scss

@@ -69,8 +69,14 @@
     --title-lg2: var(--fs-30);
     --title-xl: var(--fs-32);
     --title-2xl: var(--fs-40);
+
+    /* ICONES PUCE LISTE */
+    --strapi-li-icon: url('/icons/list-bullet.svg');
+    --strapi-li-icon-nested: url('/icons/list-bullet-nested.svg');
+
 }
 
+
 /* Option : ajustements desktop */
 @media (max-width: 700px) {
     :root {