@trilogy-ds/styles 4.1.2-beta-4 → 4.1.3-beta-1

package/framework/src/base/_color.scss

@@ -1,28 +1,29 @@
 @use "sass:map";
+@use 'sass:list';
 
 @function getColor( $name ) {
-  @return var(--color-#{nth(map-get($colors,$name),2)});
+  @return var(--color-#{list.nth(map.get($colors,$name),2)});
 }
 
 @function getColorValue( $name ) {
-  @return #{nth(map-get($colors,$name),1)}
+  @return #{list.nth(map.get($colors,$name),1)}
 }
 
 @function getColorBrandName( $name ) {
-  @return #{nth(map-get($colors,$name),2)}
+  @return #{list.nth(map.get($colors,$name),2)}
 }
 
 :root {
   @each $name, $color in $colors {
-    --color-#{nth($color,2)}: #{nth($color,1)};
+    --color-#{list.nth($color,2)}: #{list.nth($color,1)};
   }
 }
 
 @function invertColor ($colorName) {
-  @return var(--color-#{nth(map-get($colors,$colorName),3)})
+  @return var(--color-#{list.nth(map.get($colors,$colorName),3)})
 }
 
 @function fadeColor ($colorName) {
-  $name: map-get($fade-colors,$colorName);
+  $name: map.get($fade-colors,$colorName);
   @return getColor($name);
 }

package/framework/src/base/_helpers.scss

@@ -1,3 +1,5 @@
+@use 'sass:list';
+
 .is-sticky-top {
   position: sticky !important;
   top: 0;
@@ -110,7 +112,14 @@ $alignments: (
 // Typography
 @mixin typography-size($target: '') {
   @each $size in $sizes {
-    $i: index($sizes, $size);
+
+          $i: list.index($sizes, $size);
+
+          .is-size-#{$i}#{if($target == '', '', '-' + $target)} {
+            font-size: $size !important;
+          }
+
+    $i: list.index($sizes, $size);
 
     .is-size-#{$i}#{if($target == '', '', '-' + $target)} {
       font-size: $size !important;
@@ -197,8 +206,8 @@ $alignments: (
 
 @mixin typography-colors() {
   @each $name, $color in $colors {
-    $brandName: nth($color, 2);
-    $color: nth($color, 1);
+    $brandName: list.nth($color, 2);
+    $color: list.nth($color, 1);
     $color-invert: invertColor($name);
 
     .has-text-#{$brandName} {

package/framework/src/components/_modal.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $modal-content-width: 640px !default;
 $modal-content-margin-mobile: 20px !default;
 $modal-close-dimensions: 40px !default;
@@ -54,7 +56,7 @@ body:has(.modal.is-active) {
     @each $dimension in $dimensions-extended {
       &.is-#{$dimension} {
         .modal-content {
-          width: map-get($modal-dimensions, $dimension);
+          width: map.get($modal-dimensions, $dimension);
         }
       }
     }

package/framework/src/components/_pagination.scss

@@ -10,14 +10,14 @@
   .pagination-next,
   .pagination-link,
   .pagination-ellipsis {
-    @include control;
-    @include unselectable;
     font-size: 1em;
     padding-left: 0.5em;
     padding-right: 0.5em;
     justify-content: center;
     margin: 2.5px;
     text-align: center;
+    @include control;
+    @include unselectable;
   }
 
   .pagination-previous,

package/framework/src/components/_price.scss

@@ -1,3 +1,5 @@
+@use 'sass:list';
+
 $price-levels: (
   [$text-64, $text-44, $text-28, $text-16],
   [$text-56, $text-32, $text-22, $text-16],
@@ -16,9 +18,9 @@ $price-levels: (
   --font-size: #{$text-64};
 
   @each $price-level in $price-levels {
-    $i: index($price-levels, $price-level);
-    $font-size: nth($price-level, 1);
-    $strike-font-size: nth($price-level, 2);
+    $i: list.index($price-levels, $price-level);
+    $font-size: list.nth($price-level, 1);
+    $strike-font-size: list.nth($price-level, 2);
 
     &.is-level-#{$i} {
       --font-size: #{$font-size};
@@ -63,9 +65,9 @@ $price-levels: (
 
 
   @each $price-level in $price-levels {
-    $i: index($price-levels, $price-level);
-    $font-size: nth($price-level, 1);
-    $strike-font-size: nth($price-level, 2);
+    $i: list.index($price-levels, $price-level);
+    $font-size: list.nth($price-level, 1);
+    $strike-font-size: list.nth($price-level, 2);
 
     &.is-level-#{$i} {
       --font-size: #{$font-size};

package/framework/src/components/_tabs.scss

@@ -12,10 +12,6 @@
   -ms-overflow-style: none !important;
   scrollbar-width: none;
 
-  @include mobile {
-    text-align: left;
-  }
-
   &::-webkit-scrollbar {
     width: 0 !important;
     height: 0 !important;
@@ -90,11 +86,12 @@
       outline: none;
       padding: 6px 14px;
       font-size: $text-14;
+      border: 0 solid transparent;
+      border-bottom: 2px solid transparent;
+
       @include desktop {
         font-size: $text-16;
       }
-      border: 0px solid transparent;
-      border-bottom: 2px solid transparent;
 
       .tab-icon {
         margin-top: 2px;

package/framework/src/elements/_button.scss

@@ -1,4 +1,7 @@
+@use 'sass:list';
+
 $button-border-width: 2px !default;
+$button-colors: () !default;
 
 .buttons {
   width: 100%;
@@ -22,20 +25,19 @@ $button-border-width: 2px !default;
 }
 
 .button {
-  @include control;
-  @include unselectable;
-  @extend %buttons-states;
-
   background-color: white;
   border-width: $button-border-width;
   border-radius: var(--radius-small);
   cursor: pointer;
-  justify-content: center;
+  justify-content: center !important;
   text-align: center;
   white-space: nowrap;
   padding: 0 $spacing-4;
   text-decoration: inherit;
   font-weight: $weight-semibold;
+  @include control;
+  @include unselectable;
+  @extend %buttons-states;
 
   @include mobile {
     width: 100%;
@@ -43,9 +45,9 @@ $button-border-width: 2px !default;
   }
 
   @each $name, $pair in $button-colors {
-    $variantName: nth($pair, 1);
-    $colorBG: getColor(#{nth($pair, 2)});
-    $colorText: getColor(nth($pair, 3));
+    $variantName: list.nth($pair, 1);
+    $colorBG: getColor(#{list.nth($pair, 2)});
+    $colorText: getColor(list.nth($pair, 3));
 
     &.is-#{$variantName} {
       background-color: $colorBG;

package/framework/src/elements/_entry.scss

@@ -1,13 +1,13 @@
 .input,
 .textarea {
-  @include input;
-
   padding-left: $spacing-4;
   padding-right: $spacing-4;
   font-size: $size-medium;
   max-width: 100%;
   width: 100%;
 
+  @include input;
+
   // Colors
   @each $name in $colors-brand-functionnal {
     $color: getColor($name);
@@ -87,7 +87,7 @@
     -webkit-appearance: none;
     background-repeat: no-repeat;
     background-color: getColor('background') ;
-    background-position: center;    
+    background-position: center;
   }
 
   &[type="search"] {

package/framework/src/elements/_icon.scss

@@ -34,12 +34,6 @@ $size: (
 
     [class^="tri-"],
     [class*=" tri-"] {
-      &::before {
-        width: 1em;
-        height: 1em;
-        content: "\00a0";
-        margin: 0;
-      }
       display: flex;
       -webkit-mask-repeat: no-repeat;
       mask-repeat: no-repeat;
@@ -48,6 +42,13 @@ $size: (
       -webkit-mask-size: cover;
       mask-size: cover;
       background-color: currentColor;
+
+      &::before {
+        width: 1em;
+        height: 1em;
+        content: "\00a0";
+        margin: 0;
+      }
     }
 
   @each $name, $sizeConfig in $size {
@@ -123,6 +124,16 @@ $size: (
 
     &.is-animated {
         .tri-notification_top {
+          animation-name: bellring;
+          animation-duration: 6s;
+          animation-iteration-count: infinite;
+          animation-timing-function: ease-in-out;
+          animation-delay: -2s;
+          animation-direction: initial;
+          transform-origin: center top;
+          -moz-animation: none;
+          -moz-transform-origin: center top;
+
             @keyframes bellring {
                 0% {
                     transform: rotate(-5deg);
@@ -161,18 +172,18 @@ $size: (
                 }
             }
 
-            animation-name: bellring;
-            animation-duration: 6s;
-            animation-iteration-count: infinite;
-            animation-timing-function: ease-in-out;
-            animation-delay: -2s;
-            animation-direction: initial;
-            transform-origin: center top;
-            -moz-animation: none;
-            -moz-transform-origin: center top;
         }
 
         .tri-notification_bottom {
+          animation-name: bellbounce !important;
+          animation-duration: 6s;
+          animation-iteration-count: infinite;
+          animation-timing-function: initial;
+          animation-delay: -2s;
+          animation-direction: normal;
+          transform-origin: center top;
+          -moz-animation: none;
+
             @keyframes bellbounce {
                 0% {
                     transform: translateX(-1px) rotate(-5deg);
@@ -219,14 +230,6 @@ $size: (
                 }
             }
 
-            animation-name: bellbounce !important;
-            animation-duration: 6s;
-            animation-iteration-count: infinite;
-            animation-timing-function: initial;
-            animation-delay: -2s;
-            animation-direction: normal;
-            transform-origin: center top;
-            -moz-animation: none;
         }
     }
 

package/framework/src/elements/_list.scss

@@ -48,6 +48,9 @@ ol.list {
       justify-content: flex-start;
       align-items: flex-start;
     }
+    .list-item-content {
+      flex: 1; 
+    }
   }
 
   &.has-divider {

package/framework/src/elements/_paragraph.scss

@@ -1,3 +1,5 @@
+@use 'sass:list';
+
 $text-levels: (
     ($text-16, $text-20, $text-16),
     ($text-14, $text-18, $text-16),
@@ -14,9 +16,9 @@ $text-levels-mobile: (
 
 .text {
   @each $text-level in $text-levels {
-    $i: index($text-levels, $text-level);
-    $font-size: nth($text-level, 1);
-    $line-height: nth($text-level, 2);
+    $i: list.index($text-levels, $text-level);
+    $font-size: list.nth($text-level, 1);
+    $line-height: list.nth($text-level, 2);
 
     &.is-level-#{$i} {
       font-size: $font-size;
@@ -31,7 +33,7 @@ $text-levels-mobile: (
 
   @include mobile {
     @each $text-level-mobile in $text-levels-mobile {
-      $i: index($text-levels-mobile, $text-level-mobile);
+      $i: list.index($text-levels-mobile, $text-level-mobile);
     }
   }
 

package/framework/src/elements/_progress.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use 'sass:list';
 
 @import "../base/color";
 
@@ -165,9 +166,9 @@ $progress-circle-slices: (
 $slides-concat: '';
 
 @each $slice in $progress-circle-slices {
-  $name: nth($slice, 1);
-  $color: nth($slice, 2);
-  $i: index($progress-circle-slices, $slice);
+  $name: list.nth($slice, 1);
+  $color: list.nth($slice, 2);
+  $i: list.index($progress-circle-slices, $slice);
 
   @if $i > 1 {
     .progress-circle-background-#{$name} {

package/framework/src/elements/_select.scss

@@ -8,10 +8,11 @@ $status-select: (
 
   select {
     width: 100%;
-    @include input;
     padding-right: 40px;
     text-overflow: ellipsis;
 
+    @include input;
+
     &:focus {
       padding-left: 15px !important;
     }
@@ -20,7 +21,7 @@ $status-select: (
       $color: getColor($name);
       $color-invert: invertColor($name);
       $brandName: getColorBrandName($name);
-  
+
       &.is-#{$brandName} {
         border: 1px solid $color;
       }

package/framework/src/elements/_title.scss

@@ -1,6 +1,8 @@
 @use 'sass:math';
+@use 'sass:list';
 
 $title-weight: $weight-semibold;
+$title-high-weight: 550;
 $title-line-height: 1.1;
 $title-strong-color: inherit;
 $title-strong-weight: inherit;
@@ -57,10 +59,19 @@ $title-levels-mobile: (
 
   // new typography
   @each $title-level in $title-levels {
-    $i: index($title-levels, $title-level);
-    $font-size: nth($title-level, 1);
-    $line-height: nth($title-level, 2);
-    $font-family: nth($title-level, 3);
+    $i: list.index($title-levels, $title-level);
+    $font-size: list.nth($title-level, 1);
+    $line-height: list.nth($title-level, 2);
+    $font-family: list.nth($title-level, 3);
+
+    // Avoid Safari font weight issues
+    &.is-level-1 {
+      font-weight: $title-high-weight;
+    }
+
+    &.is-level-2 {
+      font-weight: $title-high-weight;
+    }
 
     &.is-level-#{$i} {
       font-size: $font-size;
@@ -107,9 +118,9 @@ $title-levels-mobile: (
 
   @include mobile {
     @each $title-level-mobile in $title-levels-mobile {
-      $i: index($title-levels-mobile, $title-level-mobile);
-      $font-size-mobile: nth($title-level-mobile, 1);
-      $line-height-mobile: nth($title-level-mobile, 2);
+      $i: list.index($title-levels-mobile, $title-level-mobile);
+      $font-size-mobile: list.nth($title-level-mobile, 1);
+      $line-height-mobile: list.nth($title-level-mobile, 2);
       &.is-level-#{$i} {
         font-size: $font-size-mobile;
         line-height: $line-height-mobile;

package/framework/src/elements/_toaster.scss

@@ -11,14 +11,15 @@ a.toaster {
 
 .toaster {
     @include apply-shadow-box();
-
-
   background-color: getColor('info-fade');
   border-radius: var(--radius);
   margin-bottom: 16px;
   position: relative;
     margin-left: 24px;
     margin-right: 24px;
+  box-shadow: none;
+  padding: $spacing-4;
+  display: flex;
 
     .toaster-close {
         padding-right: 0 !important ;
@@ -93,7 +94,6 @@ a.toaster {
         }
     }
 
-    display: flex;
 
     > .icon {
         flex: none;
@@ -114,9 +114,6 @@ a.toaster {
         }
     }
 
-    box-shadow: none;
-    padding: $spacing-4;
-
     .title,
     .text,
     .paragraph {

package/framework/src/grid/_columns.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use 'sass:list';
 
 $columnWidth: calc((100% / (var(--ColumnFraction))) - ((((var(--ColumnFraction)) - 1) / (var(--ColumnFraction))) * var(--ColumnGap)));
 $offsetWidth: calc((100% / (var(--offset))) - ((((var(--offset)) - 1) / (var(--offset))) * var(--ColumnGap)) + var(--ColumnGap));
@@ -56,8 +57,8 @@ $gap: 4px,
     }
   }
 
-  @for $i from 1 through length($gap) {
-    $item: nth($gap, $i);
+  @for $i from 1 through list.length($gap) {
+    $item: list.nth($gap, $i);
     &.is-mobile.has-gap-#{$i} {
       gap: $item;
 

package/framework/src/grid/_rows.scss

@@ -1,3 +1,5 @@
+@use 'sass:list';
+
 $gap: 4px,
 8px,
 12px,
@@ -22,8 +24,8 @@ $gap: 4px,
     gap: 16px;
   }
 
-  @for $i from 1 through length($gap) {
-    $item: nth($gap, $i);
+  @for $i from 1 through list.length($gap) {
+    $item: list.nth($gap, $i);
     &.has-gap-#{$i} {
       gap: $item;
     }

package/framework/src/theming/buttons_partial.scss

@@ -1,3 +1,5 @@
+@import "../base/color";
+
 $noDisabled: ":not(:disabled):not([aria-disabled=true]):not(.is-loading)";
 
 /*

package/framework/src/utilities/_background.scss

@@ -1,3 +1,5 @@
+@import "../base/color";
+
 .is-inverted {
   color: getColor('background');
 }

package/framework/src/utilities/_functions.scss

@@ -1,13 +1,17 @@
 @use "sass:math";
+@use 'sass:map';
+@use 'sass:string';
+@use 'sass:meta';
+
 @import "./derived-variables";
 
 @function encodecolor($string) {
-  @if type-of($string) == 'string' and str-index($string, '#') == 1 {
-    @return '%23' + str-slice( $string, 2);
+  @if meta.type-of($string) == 'string' and string.index($string, '#') == 1 {
+    @return '%23' + string.slice( $string, 2);
   }
 
-  @if type-of($string) == 'color' and str-index(#{$string}, '#') == 1 {
-    $hex: str-slice(ie-hex-str($string), 4);
+  @if meta.type-of($string) == 'color' and string.index(#{$string}, '#') == 1 {
+    $hex: string.slice(ie-hex-str($string), 4);
     $string: unquote('#{$hex}');
     @return '%23' + $string;
   }
@@ -52,14 +56,14 @@
         $color-rgb: map-merge($color-rgb, ($name: $value));
     }
 
-    @return map-get($color-rgb, "red") * 0.2126 + map-get($color-rgb, "green") * 0.7152 + map-get($color-rgb, "blue") * 0.0722;
+    @return map.get($color-rgb, "red") * 0.2126 + map.get($color-rgb, "green") * 0.7152 + map.get($color-rgb, "blue") * 0.0722;
 }
 
 /// Remove the unit of a length
 /// @param {Number} $number - Number to remove unit from
 /// @return {Number} - Unitless number
 @function strip-unit($number) {
-    @if type-of($number) == 'number' and not unitless($number) {
+    @if meta.type-of($number) == 'number' and not unitless($number) {
         @return math.div($number, $number * 0 + 1);
     }
 
@@ -67,7 +71,7 @@
 }
 
 @function num($input) {
-    @if type-of($input) != number {
+    @if meta.type-of($input) != number {
         @return null;
     }
 
@@ -90,5 +94,5 @@
 }
 
 @function zindex($key) {
-    @return map-get($zindex, $key);
+    @return map.get($zindex, $key);
 }

package/framework/src/utilities/_mixins.scss

@@ -362,12 +362,13 @@
 
 // import sass bulma
 @mixin input {
-  @include control;
   height: 56px;
   background-color: getColor('background');
-  border-color: getColor('neutral');
+  border-color: getColor('neutral') !important;
   color: getColor('font');
 
+  @include control;
+
   @include placeholder {
     color: getColor('font') !important;
     filter: grayscale(100%);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "4.1.2-beta-4",
+  "version": "4.1.3-beta-1",
   "author": "Bouygues Telecom",
   "license": "UNLICENSED",
   "files": [