@trilogy-ds/styles 4.1.3-beta-1 → 4.2.2-beta-1

package/framework/src/base/_color.scss

@@ -1,29 +1,28 @@
 @use "sass:map";
-@use 'sass:list';
 
 @function getColor( $name ) {
-  @return var(--color-#{list.nth(map.get($colors,$name),2)});
+  @return var(--color-#{nth(map-get($colors,$name),2)});
 }
 
 @function getColorValue( $name ) {
-  @return #{list.nth(map.get($colors,$name),1)}
+  @return #{nth(map-get($colors,$name),1)}
 }
 
 @function getColorBrandName( $name ) {
-  @return #{list.nth(map.get($colors,$name),2)}
+  @return #{nth(map-get($colors,$name),2)}
 }
 
 :root {
   @each $name, $color in $colors {
-    --color-#{list.nth($color,2)}: #{list.nth($color,1)};
+    --color-#{nth($color,2)}: #{nth($color,1)};
   }
 }
 
 @function invertColor ($colorName) {
-  @return var(--color-#{list.nth(map.get($colors,$colorName),3)})
+  @return var(--color-#{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,5 +1,3 @@
-@use 'sass:list';
-
 .is-sticky-top {
   position: sticky !important;
   top: 0;
@@ -14,7 +12,11 @@
 
 // Float
 .is-clearfix {
-  @include clearfix;
+  &::after {
+    clear: both;
+    content: ' ';
+    display: table;
+  }
 }
 
 .is-pulled-left {
@@ -112,14 +114,7 @@ $alignments: (
 // Typography
 @mixin typography-size($target: '') {
   @each $size in $sizes {
-
-          $i: list.index($sizes, $size);
-
-          .is-size-#{$i}#{if($target == '', '', '-' + $target)} {
-            font-size: $size !important;
-          }
-
-    $i: list.index($sizes, $size);
+    $i: index($sizes, $size);
 
     .is-size-#{$i}#{if($target == '', '', '-' + $target)} {
       font-size: $size !important;
@@ -206,8 +201,8 @@ $alignments: (
 
 @mixin typography-colors() {
   @each $name, $color in $colors {
-    $brandName: list.nth($color, 2);
-    $color: list.nth($color, 1);
+    $brandName: nth($color, 2);
+    $color: nth($color, 1);
     $color-invert: invertColor($name);
 
     .has-text-#{$brandName} {

package/framework/src/base/_loading.scss

@@ -81,7 +81,7 @@ p.is-loading,
 
     // we need the headings to have margins AND be inline
     @include heading-tags {
-        display: table; // FIXME: well... `@include clearfix;` didn't do the trick
+        display: table;
     }
 
     & & {

package/framework/src/components/_modal.scss

@@ -1,5 +1,3 @@
-@use 'sass:map';
-
 $modal-content-width: 640px !default;
 $modal-content-margin-mobile: 20px !default;
 $modal-close-dimensions: 40px !default;
@@ -56,7 +54,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,5 +1,3 @@
-@use 'sass:list';
-
 $price-levels: (
   [$text-64, $text-44, $text-28, $text-16],
   [$text-56, $text-32, $text-22, $text-16],
@@ -18,9 +16,9 @@ $price-levels: (
   --font-size: #{$text-64};
 
   @each $price-level in $price-levels {
-    $i: list.index($price-levels, $price-level);
-    $font-size: list.nth($price-level, 1);
-    $strike-font-size: list.nth($price-level, 2);
+    $i: index($price-levels, $price-level);
+    $font-size: nth($price-level, 1);
+    $strike-font-size: nth($price-level, 2);
 
     &.is-level-#{$i} {
       --font-size: #{$font-size};
@@ -65,9 +63,9 @@ $price-levels: (
 
 
   @each $price-level in $price-levels {
-    $i: list.index($price-levels, $price-level);
-    $font-size: list.nth($price-level, 1);
-    $strike-font-size: list.nth($price-level, 2);
+    $i: index($price-levels, $price-level);
+    $font-size: nth($price-level, 1);
+    $strike-font-size: nth($price-level, 2);
 
     &.is-level-#{$i} {
       --font-size: #{$font-size};

package/framework/src/components/_tabs.scss

@@ -86,12 +86,11 @@
       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,7 +1,4 @@
-@use 'sass:list';
-
 $button-border-width: 2px !default;
-$button-colors: () !default;
 
 .buttons {
   width: 100%;
@@ -25,19 +22,20 @@ $button-colors: () !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 !important;
+  justify-content: center;
   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%;
@@ -45,9 +43,9 @@ $button-colors: () !default;
   }
 
   @each $name, $pair in $button-colors {
-    $variantName: list.nth($pair, 1);
-    $colorBG: getColor(#{list.nth($pair, 2)});
-    $colorText: getColor(list.nth($pair, 3));
+    $variantName: nth($pair, 1);
+    $colorBG: getColor(#{nth($pair, 2)});
+    $colorText: getColor(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,6 +34,12 @@ $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;
@@ -42,13 +48,6 @@ $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 {
@@ -124,16 +123,6 @@ $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);
@@ -172,18 +161,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);
@@ -230,6 +219,14 @@ $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/_paragraph.scss

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

package/framework/src/elements/_progress.scss

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

package/framework/src/elements/_select.scss

@@ -8,11 +8,10 @@ $status-select: (
 
   select {
     width: 100%;
+    @include input;
     padding-right: 40px;
     text-overflow: ellipsis;
 
-    @include input;
-
     &:focus {
       padding-left: 15px !important;
     }
@@ -21,7 +20,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,5 +1,4 @@
 @use 'sass:math';
-@use 'sass:list';
 
 $title-weight: $weight-semibold;
 $title-high-weight: 550;
@@ -59,10 +58,10 @@ $title-levels-mobile: (
 
   // new typography
   @each $title-level in $title-levels {
-    $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);
+    $i: index($title-levels, $title-level);
+    $font-size: nth($title-level, 1);
+    $line-height: nth($title-level, 2);
+    $font-family: nth($title-level, 3);
 
     // Avoid Safari font weight issues
     &.is-level-1 {
@@ -118,9 +117,9 @@ $title-levels-mobile: (
 
   @include mobile {
     @each $title-level-mobile in $title-levels-mobile {
-      $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);
+      $i: index($title-levels-mobile, $title-level-mobile);
+      $font-size-mobile: nth($title-level-mobile, 1);
+      $line-height-mobile: nth($title-level-mobile, 2);
       &.is-level-#{$i} {
         font-size: $font-size-mobile;
         line-height: $line-height-mobile;

package/framework/src/elements/_toaster.scss

@@ -10,16 +10,12 @@ 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 ;
@@ -94,6 +90,7 @@ a.toaster {
         }
     }
 
+    display: flex;
 
     > .icon {
         flex: none;
@@ -114,6 +111,9 @@ a.toaster {
         }
     }
 
+    box-shadow: none;
+    padding: $spacing-4;
+
     .title,
     .text,
     .paragraph {

package/framework/src/grid/_columns.scss

@@ -1,5 +1,4 @@
 @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));
@@ -57,8 +56,8 @@ $gap: 4px,
     }
   }
 
-  @for $i from 1 through list.length($gap) {
-    $item: list.nth($gap, $i);
+  @for $i from 1 through length($gap) {
+    $item: nth($gap, $i);
     &.is-mobile.has-gap-#{$i} {
       gap: $item;
 

package/framework/src/grid/_rows.scss

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

package/framework/src/theming/buttons_partial.scss

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

package/framework/src/utilities/_background.scss

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

package/framework/src/utilities/_functions.scss

@@ -1,17 +1,13 @@
 @use "sass:math";
-@use 'sass:map';
-@use 'sass:string';
-@use 'sass:meta';
-
 @import "./derived-variables";
 
 @function encodecolor($string) {
-  @if meta.type-of($string) == 'string' and string.index($string, '#') == 1 {
-    @return '%23' + string.slice( $string, 2);
+  @if type-of($string) == 'string' and str-index($string, '#') == 1 {
+    @return '%23' + str-slice( $string, 2);
   }
 
-  @if meta.type-of($string) == 'color' and string.index(#{$string}, '#') == 1 {
-    $hex: string.slice(ie-hex-str($string), 4);
+  @if type-of($string) == 'color' and str-index(#{$string}, '#') == 1 {
+    $hex: str-slice(ie-hex-str($string), 4);
     $string: unquote('#{$hex}');
     @return '%23' + $string;
   }
@@ -56,14 +52,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 meta.type-of($number) == 'number' and not unitless($number) {
+    @if type-of($number) == 'number' and not unitless($number) {
         @return math.div($number, $number * 0 + 1);
     }
 
@@ -71,7 +67,7 @@
 }
 
 @function num($input) {
-    @if meta.type-of($input) != number {
+    @if type-of($input) != number {
         @return null;
     }
 
@@ -94,5 +90,5 @@
 }
 
 @function zindex($key) {
-    @return map.get($zindex, $key);
+    @return map-get($zindex, $key);
 }

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

@@ -0,0 +1,19 @@
+@mixin arrow( $direction: 'down') {
+  background-color: currentColor;
+  content: "";
+  mask-image: url('./assets/icons/all/arrow-down.svg');
+
+  @if $direction == 'up' {
+    rotate: 180deg;
+  } @else if $direction == 'left' {
+    rotate: 90deg;
+  } @else if $direction == 'right' {
+    rotate: 270deg;
+  }
+
+  min-width: 15px;
+  min-height: 15px;
+  mask-size: 15px;
+  position: absolute;
+  display: inline-block;
+}

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

@@ -0,0 +1,86 @@
+%delete {
+  @extend %unselectable;
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background-color: rgba(black, 0.2);
+  border: none;
+  border-radius: 9999px;
+  cursor: pointer;
+  display: inline-block;
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-size: 0;
+  height: 20px;
+  max-height: 20px;
+  max-width: 20px;
+  min-height: 20px;
+  min-width: 20px;
+  outline: none;
+  position: relative;
+  vertical-align: top;
+  width: 20px;
+
+  &::before,
+  &::after {
+    background-color: #fff;
+    content: '';
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%) rotate(45deg);
+    transform-origin: center center;
+  }
+
+  &::before {
+    height: 2px;
+    width: 50%;
+  }
+
+  &::after {
+    height: 50%;
+    width: 2px;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: rgba(black, 0.3);
+  }
+
+  &:active {
+    background-color: rgba(black, 0.4);
+  }
+
+  // Sizes
+  &.is-small {
+    height: 16px;
+    max-height: 16px;
+    max-width: 16px;
+    min-height: 16px;
+    min-width: 16px;
+    width: 16px;
+  }
+
+  &.is-medium {
+    height: 24px;
+    max-height: 24px;
+    max-width: 24px;
+    min-height: 24px;
+    min-width: 24px;
+    width: 24px;
+  }
+
+  &.is-large {
+    height: 32px;
+    max-height: 32px;
+    max-width: 32px;
+    min-height: 32px;
+    min-width: 32px;
+    width: 32px;
+  }
+}
+
+@mixin delete {
+  @extend %delete;
+}

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

@@ -0,0 +1,11 @@
+@import "arrow";
+@import "delete";
+@import "markup-group";
+@import "mixins";
+@import "overlay";
+@import "pattern";
+@import "responsiveness";
+@import "spinner";
+@import "state";
+@import "unselectable";
+@import "utils";