@trilogy-ds/styles 4.20.4-beta.1 → 4.20.4

package/framework/src/base/_helpers.scss

@@ -114,10 +114,15 @@ $alignments: (
 
 // Typography
 @mixin typography-size($target: '') {
+  $suffix: '';
+  @if $target != '' {
+    $suffix: '-' + $target;
+  }
+
   @each $size in $sizes {
     $i: index($sizes, $size);
 
-    .is-size-#{$i}#{if($target == '', '', '-' + $target)} {
+    .is-size-#{$i}#{$suffix} {
       font-size: $size !important;
     }
   }
@@ -429,7 +434,7 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex';
 }
 
 .is-bordered {
-  border: var(--border);
+  border: getBorder();
 }
 
 .is-vertical-paddingless {
@@ -791,19 +796,18 @@ $align-values: (
 }
 
 @each $alignment, $align-items in $align-values {
-  // FlexBox owns these breakpoints so container queries can override the viewport.
-  .is-aligned-#{$alignment}:not(:where(.flex-box)) {
+  .is-aligned-#{$alignment} {
     align-items: #{$align-items} !important;
   }
 
   @include mobile {
-    .is-aligned-#{$alignment}-mobile:not(:where(.flex-box)) {
+    .is-aligned-#{$alignment}-mobile {
       align-items: #{$align-items} !important;
     }
   }
 
   @include tablet {
-    .is-aligned-#{$alignment}-tablet:not(:where(.flex-box)) {
+    .is-aligned-#{$alignment}-tablet {
       align-items: #{$align-items} !important;
     }
   }
@@ -821,7 +825,7 @@ $align-values: (
   }
 
   @include desktop {
-    .is-aligned-#{$alignment}-desktop:not(:where(.flex-box)) {
+    .is-aligned-#{$alignment}-desktop {
       align-items: #{$align-items} !important;
     }
   }
@@ -833,7 +837,7 @@ $align-values: (
   }
 
   @include widescreen {
-    .is-aligned-#{$alignment}-widescreen:not(:where(.flex-box)) {
+    .is-aligned-#{$alignment}-widescreen {
       align-items: #{$align-items} !important;
     }
   }
@@ -845,7 +849,7 @@ $align-values: (
   }
 
   @include fullhd {
-    .is-aligned-#{$alignment}-fullhd:not(:where(.flex-box)) {
+    .is-aligned-#{$alignment}-fullhd {
       align-items: #{$align-items} !important;
     }
   }
@@ -857,7 +861,7 @@ $align-values: (
 }
 
 // FIXME : à supprimer car double-emploi avec .is-aligned-center (et même pas de spécificité par breakpoint)
-.is-aligned-center:not(:where(.flex-box)) {
+.is-aligned-center {
   align-items: center !important;
 }
 

package/framework/src/components/_accordion.scss

@@ -40,7 +40,7 @@
     }
 
     &:has(summary:focus-visible) {
-      outline: var(--border-active);
+      outline: getBorder('active');
       outline-offset: -2px;
     }
 

package/framework/src/components/_autocomplete.scss

@@ -15,7 +15,7 @@
     &.is-active {
       .autocomplete-menu {
         display: block;
-        border: var(--border);
+        border: getBorder();
         padding: calc($spacing-1 + 1px) calc($spacing-2 + 2px);
         border-radius: var(--radius-md);
         max-height: 220px;

package/framework/src/components/_box.scss

@@ -65,7 +65,8 @@ a.box {
   }
 
   &.is-active {
-    outline: var(--border-active);
+    outline: getBorder('active');
+    outline-offset: -2px;
   }
 
   &.is-offset-header {
@@ -97,8 +98,6 @@ a.box {
 
   &.is-highlighted {
     border-left: $highlighted-border-width solid transparent;
-    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);
@@ -193,7 +192,7 @@ a.box {
   .box-footer:not(.is-borderless):not([class*="has-background"])::before {
     content: '';
     display: block;
-    border-top: var(--border);
+    border-top: getBorder();
     position: relative;
     top: calc(var(--padding-box) * -1);
   }

package/framework/src/components/_card.scss

@@ -99,7 +99,7 @@ $basis-values: (
   }
 
   &.is-active {
-    outline: var(--border-active);
+    outline: getBorder('active');
 
     .card-content {
 

package/framework/src/components/_chips.scss

@@ -50,12 +50,12 @@
     padding: 6px $spacing-4;
     white-space: nowrap;
     cursor: pointer;
-    border: var(--border);
+    border: getBorder();
     &:not(.is-disabled) {
       &.is-active {
         background-color: getColor('main');
         color: white;
-        border: var(--border-active);
+        border: getBorder('active');
         padding: 5px ($spacing-4 - 1px);
         #{$hoverSelector} {
           background-color: getColor('main');

package/framework/src/components/_divider.scss

@@ -1,14 +1,12 @@
 @mixin divider {
   content:'';
   flex: 1;
-  height: 1px;
   background-color: getColor('neutral');
   border: 1px solid #{getColor('stroke-fade')};
   border-radius: var(--radius-full);
 }
 
 .divider {
-  height: 1px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -34,6 +32,10 @@
         margin-left: $spacing-4;
       }
     }
+    .icon{
+      height: auto;
+      width: auto;
+    }
   }
 
   &:not(.is-marginless) {

package/framework/src/components/_flex-box.scss

@@ -2,8 +2,6 @@
 
 .flex-box {
   display: flex;
-  // Reset on each FlexBox to avoid inheriting a nested parent's base alignment.
-  --flex-box-align: normal;
   --ColumnGap : 8px;
   gap: var(--ColumnGap);
   flex-direction: row;
@@ -250,22 +248,18 @@
 
   // ALIGN ITEMS
   &.is-aligned-start {
-    --flex-box-align: flex-start;
     align-items: flex-start;
   }
 
   &.is-aligned-end {
-    --flex-box-align: flex-end;
     align-items: flex-end;
   }
 
   &.is-aligned-center {
-    --flex-box-align: center;
     align-items: center;
   }
 
   &.is-aligned-stretch {
-    --flex-box-align: stretch;
     align-items: stretch;
   }
 
@@ -355,14 +349,6 @@
     }
   }
 
-  // A query container replaces viewport alignment, even when none of the
-  // responsive classes matches its width. Preserve any non-responsive value.
-  @container (min-width: 0px) {
-    &[class] {
-      align-items: var(--flex-box-align);
-    }
-  }
-
   @include container-mobile {
     &.is-aligned-start-mobile {
       align-items: flex-start;
@@ -415,42 +401,6 @@
     }
   }
 
-  @include container-widescreen {
-    &.is-aligned-start-widescreen {
-      align-items: flex-start;
-    }
-
-    &.is-aligned-end-widescreen {
-      align-items: flex-end;
-    }
-
-    &.is-aligned-center-widescreen {
-      align-items: center;
-    }
-
-    &.is-aligned-stretch-widescreen {
-      align-items: stretch;
-    }
-  }
-
-  @include container-fullhd {
-    &.is-aligned-start-fullhd {
-      align-items: flex-start;
-    }
-
-    &.is-aligned-end-fullhd {
-      align-items: flex-end;
-    }
-
-    &.is-aligned-center-fullhd {
-      align-items: center;
-    }
-
-    &.is-aligned-stretch-fullhd {
-      align-items: stretch;
-    }
-  }
-
   // JUSTIFY CONTENT
   &.is-justified-start {
     justify-content: flex-start;

package/framework/src/components/_list.scss

@@ -55,7 +55,7 @@ ol.list {
 
   &.has-divider {
     li {
-      border-bottom: var(--border);
+      border-bottom: getBorder();
       padding-bottom: $spacing-3;
       &:last-child {
         border-bottom: none;

package/framework/src/components/_otp.scss

@@ -5,7 +5,7 @@
   .otp {
     @include hover();
     outline: none;
-    border: var(--border);
+    border: getBorder();
     border-radius: var(--radius-sm);
     background: transparent;
     width: 33px;

package/framework/src/components/input/_input-icons.scss

@@ -47,7 +47,7 @@
       border-top-right-radius: var(--radius-sm) ;
       border-bottom-right-radius: var(--radius-sm) ;
       &:focus-visible{
-        outline: var(--border-active);
+        outline: getBorder('active');
         outline-offset: -2px;
       }
     }

package/framework/src/utilities/mixins/_mixins.scss

@@ -26,7 +26,7 @@
   @include control;
   height: $size-inputs;
   background-color: getColor('background');
-  border: var(--border);
+  border: getBorder();
   color: getColor('font');
 
   @include placeholder {
@@ -119,7 +119,7 @@
       }
 
       &:before {
-        border: var(--border);
+        border: getBorder();
       }
     }
 
@@ -249,7 +249,7 @@
       display: block;
       position: relative;
       padding: 40px 16px 16px;
-      border: var(--border);
+      border: getBorder();
       border-radius: var(--radius-md);
       box-sizing: border-box;
       background-color: getColor('background');

package/framework/src/utilities/variables/_color.scss

@@ -57,6 +57,22 @@ $fade-colors: (
   }
 }
 
+@function getBorder( $active: '' ) {
+   @if global-variable-exists(suffix-theme) {
+    @if $active == 'active' {
+      @return var(--border-active-#{$suffix-theme});
+    } @else {
+      @return var(--border-#{$suffix-theme});
+    }
+  } @else {
+    @if $active == 'active' {
+      @return var(--border-active);
+    } @else {
+      @return var(--border);
+    }
+  }
+}
+
 @function getColorValue( $name ) {
   @return #{nth(map-get($colors,$name),1)}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "4.20.4-beta.1",
+  "version": "4.20.4",
   "author": "Bouygues Telecom",
   "repository": {
     "type": "git",