@trilogy-ds/styles 4.19.0 → 4.20.0-beta.2

package/framework/src/base/_helpers.scss

@@ -438,11 +438,16 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex';
 }
 
 // Radius
-$radius-list: ['radius-large', 'radius-medium', 'radius-small', 'radius'];
+$radius-list: (
+  'radius-large': 'radius-lg',
+  'radius-medium': 'radius-md',
+  'radius-small': 'radius-sm',
+  'radius': 'radius-sm',
+);
 
-@each $label in $radius-list {
+@each $label, $radius in $radius-list {
   .has-border-#{$label} {
-    border-radius: var(--#{$label});
+    border-radius: var(--#{$radius});
   }
 }
 
@@ -873,3 +878,21 @@ $align-values: (
   -webkit-box-orient: vertical;
   display: -webkit-box;
 }
+
+$spacings-values: (
+  'none',
+  'xxs',
+  'xs',
+  'sm',
+  'md',
+  'lg',
+  'xl',
+  'xxl',
+  'xxxl'
+);
+
+@each $spacing in $spacings-values {
+  .padding-#{$spacing} {
+    padding: var(--spacing-#{$spacing}) !important;
+  }
+}

package/framework/src/components/_accordion.scss

@@ -19,7 +19,7 @@
     background-color: getColor('background');
     font-size: $size-normal;
     border: 1px solid #{getColor('stroke-fade')};
-    border-radius: var(--radius);
+    border-radius: var(--radius-md);
     margin: 8px 0;
     min-height: 56px;
     max-height: max-content;
@@ -66,7 +66,7 @@
     }
 
     .accordion-header {
-        border-radius: var(--radius);
+      border-radius: var(--radius-md);
       transition: margin 300ms ease-out;
 
       &:focus-visible{
@@ -123,7 +123,7 @@
         overflow-y: hidden;
 
         .accordion-content {
-          border-radius: var(--radius);
+          border-radius: var(--radius-md);
           margin-bottom: 10px;
 
           @include mobile() {

package/framework/src/components/_autocomplete.scss

@@ -17,7 +17,7 @@
         display: block;
         border: var(--border);
         padding: calc($spacing-1 + 1px) calc($spacing-2 + 2px);
-        border-radius: 4px;
+        border-radius: var(--radius-md);
         max-height: 220px;
         overflow-y: auto;
         background-color: getColor('background');

package/framework/src/components/_badge.scss

@@ -45,7 +45,7 @@
 
 .badge {
   display: inline-flex;
-  border-radius: 9999px;
+  border-radius: var(--radius-full);
   color: getColor('background');
   background: getColor('main');
   font-size: $text-10;
@@ -82,6 +82,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
 }

package/framework/src/components/_box.scss

@@ -10,6 +10,23 @@
 
 $highlighted-border-width: 4px;
 
+$radius-values: (
+  'xs',
+  'sm',
+  'md',
+  'lg',
+);
+
+$padding-values: (
+  'xxs',
+  'xs',
+  'sm',
+  'md',
+  'lg',
+  'xl',
+  'xxl',
+  'xxxl'
+);
 
 a.box {
   cursor: pointer;
@@ -23,15 +40,29 @@ a.box {
 }
 
 .box {
+  --box-radius: var(--radius-lg);
+
   background-color: getColor('background');
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-  border-radius: var(--radius);
+  border-radius: var(--box-radius);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   position: relative;
   padding: var(--padding-box);
 
+  @each $padding in $padding-values {
+    &.padding-#{$padding} {
+     --padding-box: var(--spacing-#{$padding});
+    }
+  }
+
+  @each $radius in $radius-values {
+    &.radius-#{$radius} {
+      --box-radius: var(--radius-#{$radius});
+    }
+  }
+
   &.is-active {
     outline: var(--border-active);
   }
@@ -65,8 +96,8 @@ a.box {
 
   &.is-highlighted {
     border-left: $highlighted-border-width solid transparent;
-    border-top-left-radius: $highlighted-border-width;
-    border-bottom-left-radius: $highlighted-border-width;
+    border-top-left-radius: calc(var(--box-radius) + 3px);
+    border-bottom-left-radius: calc(var(--box-radius) + 3px);
     border-left-color: getColor('main');
     @each $name, $pair in $colors-brand-functionnal {
       $color: getColor($name);
@@ -77,23 +108,8 @@ a.box {
         border-left-width: $highlighted-border-width;
       }
     }
-    > .box-content {
-      &:first-child {
-        border-top-left-radius: 0;
-      }
-
-      &:last-child {
-        border-bottom-left-radius: 0;
-      }
-    }
-    > .box-footer {
-      border-bottom-left-radius: 0;
-    }
-
     > .box-header {
       margin-left: calc(var(--padding-box) * -1 - $highlighted-border-width);
-      border-radius: $highlighted-border-width var(--radius) 0 0;
-
     }
   }
 
@@ -113,7 +129,7 @@ a.box {
     flex-direction: column;
     align-items: center;
     font-weight: $weight-semibold;
-    border-radius: var(--radius) var(--radius) 0 0;
+    border-radius: var(--box-radius) var(--box-radius) 0 0;
     height: 40px;
 
     @include tablet {
@@ -144,14 +160,14 @@ a.box {
 
     &:first-child {
       margin-top: calc(var(--padding-box) * -1);
-      border-top-left-radius: var(--radius);
-      border-top-right-radius: var(--radius);
+      border-top-left-radius: var(--box-radius);
+      border-top-right-radius: var(--box-radius);
     }
 
     &:last-child {
       margin-bottom: calc(var(--padding-box) * -1);
-      border-bottom-left-radius: var(--radius);
-      border-bottom-right-radius: var(--radius);
+      border-bottom-left-radius: var(--box-radius);
+      border-bottom-right-radius: var(--box-radius);
     }
 
     > .is-unboxed {
@@ -169,8 +185,8 @@ a.box {
     margin-right: calc(var(--padding-box) * -1);
     margin-bottom: calc(var(--padding-box) * -1);
     padding: var(--padding-box);
-    border-bottom-left-radius: var(--radius);
-    border-bottom-right-radius: var(--radius);
+    border-bottom-left-radius: var(--box-radius);
+    border-bottom-right-radius: var(--box-radius);
   }
 
   .box-footer:not(.is-borderless):not([class*="has-background"])::before {

package/framework/src/components/_button.scss

@@ -25,7 +25,7 @@ $button-border-width: 2px !default;
 
   background-color: white;
   border-width: $button-border-width;
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   justify-content: center;
   text-align: center;

package/framework/src/components/_calendar.scss

@@ -2,7 +2,7 @@
   border-collapse: separate;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
   padding: 24px;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   border-spacing: 0 8px;
   background-color: getColor('background');
 
@@ -54,7 +54,7 @@
     padding-bottom: 16px;
     button {
       text-align: center;
-      border-radius: 4px;
+      border-radius: var(--radius-sm);
       width: 36px;
       height: 36px;
       i {
@@ -82,7 +82,7 @@
       display: block;
       width: 36px;
       height: 36px;
-      border-radius: 4px;
+      border-radius: var(--radius-sm);
     }
   }
 
@@ -96,7 +96,7 @@
     }
     button {
       padding: 2px 6px;
-      border-radius: 4px;
+      border-radius: var(--radius-sm);
     }
   }
 

package/framework/src/components/_card.scss

@@ -7,15 +7,33 @@ $basis-values: (
 
 
 .card {
+  --card-radius: var(--radius-lg);
+
   max-width: 100%;
   display: flex;
-  border-radius: var(--radius);
+  border-radius: var(--card-radius);
   overflow: hidden;
   flex-direction: column;
   position: relative;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
   background-color: getColor('background');
 
+  &.radius-xs {
+    --card-radius: var(--radius-xs);
+  }
+
+  &.radius-sm {
+    --card-radius: var(--radius-sm);
+  }
+
+  &.radius-md {
+    --card-radius: var(--radius-md);
+  }
+
+  &.radius-lg {
+    --card-radius: var(--radius-lg);
+  }
+
   &:not(.is-reversed) .card-image {
     order: 1;
   }
@@ -205,7 +223,7 @@ $basis-values: (
     background: transparent;
 
     .card-image .image img {
-      border-radius: var(--radius);
+      border-radius: var(--card-radius);
     }
 
     .card-content {

package/framework/src/components/_checkbox.scss

@@ -49,7 +49,7 @@
   .checkbox-container {
     &:before,
     &:after {
-      border-radius: var(--radius-small);
+      border-radius: var(--radius-xs);
     }
   }
 }

package/framework/src/components/_chips.scss

@@ -40,7 +40,7 @@
   .chips {
     align-items: center;
     background-color: white;
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     color: getColor('font');
     display: inline-flex;
     font-size: $size-normal;

package/framework/src/components/_container.scss

@@ -51,6 +51,21 @@
     max-width: 960px;
     margin: auto;
   }
+
+  &.size-sm {
+    max-width: 960px;
+    margin: auto;
+  }
+
+  &.size-md {
+    max-width: 1120px;
+    margin: auto;
+  }
+
+  &.size-lg {
+    max-width: 1340px;
+    margin: auto;
+  }
 }
 
 main,

package/framework/src/components/_countdown.scss

@@ -1,6 +1,6 @@
 .countdown {
   background-color: var(--color-accent-fade);
-  border-radius: var(--radius);
+  border-radius: var(--radius-md);
   display: inline-flex;
   padding: $spacing-2;
   color: getColor('font');
@@ -35,7 +35,7 @@
 
   &.is-small {
     padding: $spacing-2 $spacing-1;
-    border-radius: var(--radius);
+    border-radius: var(--radius-sm);
 
     .count {
       font-size: $text-12;

package/framework/src/components/_divider.scss

@@ -4,6 +4,7 @@
   height: 1px;
   background-color: getColor('neutral');
   border: 1px solid #{getColor('stroke-fade')};
+  border-radius: var(--radius-full);
 }
 
 .divider {

package/framework/src/components/_dropdown.scss

@@ -1,7 +1,6 @@
 @use 'sass:math';
 @import "../utilities/spacing";
 
-$dropdown-border-radius: var(--radius-small);
 $dropdown-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 $dropdown-item-padding-vertical: 12px;
 $dropdown-item-padding-horizontal: 16px;
@@ -42,7 +41,7 @@ $dropdown-item-padding-horizontal: 16px;
   display: none;
   margin-top: 15px;
   background-color: getColor('background');
-  border-radius: $dropdown-border-radius;
+  border-radius: var(--radius-md);
   box-shadow: $dropdown-shadow;
   overflow: hidden;
   max-height: 300px;
@@ -92,7 +91,7 @@ $dropdown-item-padding-horizontal: 16px;
   cursor: pointer;
   transition: background-color 0.2s ease;
   border: none;
-  border-radius: $dropdown-border-radius;
+  border-radius: var(--radius-sm);
   background: none;
   width: 100%;
   text-align: left;

package/framework/src/components/_fab.scss

@@ -1,6 +1,6 @@
 .fab {
   background-color: getColor('font');
-  border-radius: 16px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   height: 56px;
   padding: $spacing-4;

package/framework/src/components/_icon.scss

@@ -8,19 +8,19 @@ $icon-dimensions-default: 15px;
 
 $size: (
   'smaller': (
-    container: 20px, icon:16px, radius: var(--radius-small)
+    container: 20px, icon:16px, radius: var(--radius-sm)
   ),
   'small': (
-    container: 32px, icon: 20px, radius: var(--radius-small)
+    container: 32px, icon: 20px, radius: var(--radius-sm)
   ),
   'medium': (
-    container: 48px, icon: 32px, radius: var(--radius-medium)
+    container: 48px, icon: 32px, radius: var(--radius-md)
   ),
   'large': (
-    container: 66px, icon: 44px, radius: var(--radius-medium)
+    container: 66px, icon: 44px, radius: var(--radius-md)
   ),
   'huge': (
-    container: 99px, icon: 66px, radius: var(--radius-large)
+    container: 99px, icon: 66px, radius: var(--radius-lg)
   )
 );
 
@@ -31,7 +31,7 @@ $size: (
     font-size: inherit;
     width: 1.5em;
     height: 1.5em;
-    border-radius: var(--radius-small);
+    border-radius: var(--radius-sm);
     [class^="tri-"],
     [class*=" tri-"] {
       &::before {

package/framework/src/components/_modal.scss

@@ -66,7 +66,7 @@ body:has(.modal.is-active) {
 
   .modal-content {
     background-color: getColor('background');
-    border-radius: var(--radius) var(--radius) 0 0;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
     color: getColor('font');
     overflow: auto;
     position: relative;
@@ -80,7 +80,7 @@ body:has(.modal.is-active) {
     @include tablet {
       max-height: calc(100vh - 120px);
       width: $modal-content-width;
-      border-radius: $radius;
+      border-radius: var(--radius-lg);
     }
 
     // Annulation des propriétés du composant box, se trouvant dans une modal

package/framework/src/components/_otp.scss

@@ -6,7 +6,7 @@
     @include hover();
     outline: none;
     border: var(--border);
-    border-radius: var(--radius-small);
+    border-radius: var(--radius-sm);
     background: transparent;
     width: 33px;
     height: 48px;

package/framework/src/components/_pagination.scss

@@ -29,7 +29,7 @@
     min-width: 2.25em;
     height: 35px;
     width: 35px;
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     padding-left: 0.75em;
     padding-right: 0.75em;
     white-space: nowrap;

package/framework/src/components/_popover.scss

@@ -73,7 +73,7 @@
     @include position-top();
 
     background-color: getColor('font');
-    border-radius: var(--radius-small);
+    border-radius: var(--radius-sm);
     box-shadow: $shadow;
     color: getColor('background');
     display: inline-block;

package/framework/src/components/_product-tour.scss

@@ -4,7 +4,7 @@
     visibility: hidden;
     opacity: 0;
     background-color: getColor('background');
-    border-radius: $radius;
+    border-radius: var(--radius-sm);
     box-shadow: $shadow;
     width: 350px;
     padding: $spacing-3 * 2;
@@ -92,7 +92,7 @@
             top: 0;
             left: 0;
             background: white;
-            border-radius: 9999px;
+            border-radius: var(--radius-full);
             box-shadow: $shadow;
             transform: translate(-50%, -50%);
 

package/framework/src/components/_prompt.scss

@@ -2,7 +2,7 @@ $height-prompt-item: 64px;
 
 .prompt {
     box-shadow: 0 0 0 1px var(--color-stroke);
-    border-radius: var(--radius-small);
+    border-radius: var(--radius-sm);
     overflow: hidden;
     background-color: getColor('background');
     &[aria-disabled=true] {
@@ -35,7 +35,7 @@ $height-prompt-item: 64px;
         padding: 16px 16px 0px 16px !important;
         margin:0 !important;
         &-img {
-            border-radius: 8px;
+            border-radius: var(--radius-sm);
             overflow: hidden;
         }
         &-file {
@@ -72,7 +72,7 @@ $height-prompt-item: 64px;
         }
         &-delete {
             background-color: getColor('main-fade');
-            border-radius: 100px;
+            border-radius: var(--radius-full);
             height: 20px;
             width: 20px;
         }
@@ -125,7 +125,7 @@ $height-prompt-item: 64px;
             width: 36px !important;
         }
         &-microphone {
-            border-radius: 100px;
+            border-radius: var(--radius-full);
         }
         &-tool-submit.streaming {
             padding: 0;
@@ -152,6 +152,6 @@ $height-prompt-item: 64px;
         background-color: getColor('background');
         height: 16px;
         width: 16px;
-        border-radius: 3px;
+        border-radius: var(--radius-xs);
     }
 }

package/framework/src/components/_radio.scss

@@ -46,7 +46,7 @@
   .radio-container {
     &:before,
     &:after {
-      border-radius: 9999px;
+      border-radius: var(--radius-full);
     }
   }
 }

package/framework/src/components/_range.scss

@@ -25,14 +25,13 @@
     .range-track {
       width: 100%;
       height: 8px;
-      border-radius: var(--radius);
+      border-radius: var(--radius-full);
       position: absolute;
       margin: auto;
       top: 0;
       bottom: 0;
       @include mobile {
         height: 4px;
-        border-radius: var(--radius-small);
       }
     }
 

package/framework/src/components/_segmented-control.scss

@@ -1,5 +1,5 @@
 .segmented-control {
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   padding: $spacing-1;
   background-color: getColor('background');
   display: flex;
@@ -27,7 +27,7 @@
 
   .segmented-control-item {
     padding: $spacing-3 $spacing-4;
-    border-radius: var(--radius-small);
+    border-radius: var(--radius-sm);
     font-size: 16px;
     text-align: center;
     border: 2px solid transparent;

package/framework/src/components/_select.scss

@@ -44,7 +44,7 @@ $status-select: (
 
   &-options {
     box-shadow: 0 0 8px #0000001a;
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     overflow: hidden;
     position: absolute;
     z-index: 1001;

package/framework/src/components/_stepper.scss

@@ -20,7 +20,7 @@
     content: "";
     display: block;
     height: 4px;
-    border-radius: var(--radius-small);
+    border-radius: var(--radius-full);
     background-size: 200% !important;
     background-color: getColor('neutral');
   }
@@ -130,7 +130,7 @@
 .step-bars {
   height: 4px;
   background: getColor('disabled');
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-full);
   display: none;
 }
 

package/framework/src/components/_sticker.scss

@@ -1,7 +1,7 @@
 $sticker-height: 35px;
 
 .sticker {
-  border-radius: 9999px;
+  border-radius: var(--radius-full);
   font-size: 16px;
   flex-grow: 0;
   display: inline-flex;
@@ -72,7 +72,7 @@ $sticker-height: 35px;
 
   // deprecated
   &.is-stretched {
-    border-radius: var(--radius) 0;
+    border-radius: var(--radius-sm) 0;
     padding: 0 10px;
     position: relative;
     margin-right: 10px;
@@ -92,12 +92,12 @@ $sticker-height: 35px;
     }
 
     &::before {
-      border-radius: var(--radius) 0 0 var(--radius);
+      border-radius: var(--radius-sm) 0 0 var(--radius-sm);
       left: -6px;
     }
 
     &::after {
-      border-radius: 0 var(--radius) var(--radius) 0;
+      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
       right: -7px;
     }
   }
@@ -116,7 +116,7 @@ $sticker-height: 35px;
 .has-hat-mobile {
   .is-hat {
     display: inline-block;
-    border-radius: var(--radius) var(--radius) 0 0;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
     position: absolute;
     top: -$sticker-height;
     left: 0;