@trilogy-ds/styles 0.0.1-beta-107 → 0.0.1-beta-110

package/framework/src/components/_pagination.scss

@@ -1,115 +1,55 @@
 .pagination {
   font-size: $size-normal;
   margin: -2.5px;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
 
   .pagination-previous,
-  .pagination-next {
-    padding-left: 1em;
-    padding-right: 1em;
-    height: 35px;
-    width: 35px;
-    border-radius: 9999px;
+  .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;
   }
 
-  .pagination-link {
+  .pagination-previous,
+  .pagination-next,
+  .pagination-link,
+  .pagination-ellipsis {
+    @include hover();
+    color: getColor('font');
+    min-width: 2.25em;
     height: 35px;
+    width: 35px;
     border-radius: 9999px;
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+    white-space: nowrap;
   }
 
   .pagination-list {
     flex: 0 0 auto;
-  }
-
-}
-
-.pagination,
-.pagination-list {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  text-align: center;
-}
-
-.pagination-previous,
-.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;
-}
-
-.pagination-previous,
-.pagination-next,
-.pagination-link {
-  color: getColor('neutral-dark');
-  min-width: 2.25em;
-
-  @include hover();
-
-}
-
-.pagination-previous,
-.pagination-next {
-  padding-left: 0.75em;
-  padding-right: 0.75em;
-  white-space: nowrap;
-}
-
-.pagination-link {
-  &[aria-current] {
-    background-color: getColor('font');
-    color: getColor('background');
-
-    #{$hoverSelector}, &:focus, &:focus-within {
-      background-color: getColor('hovered');
-    }
-  }
-}
-
-.pagination-ellipsis {
-  color: getColor('background');
-  pointer-events: none;
-}
-
-.pagination-list {
-  flex-wrap: wrap;
-}
-
-@include mobile {
-  .pagination {
     flex-wrap: wrap;
-  }
-
-  .pagination-previous,
-  .pagination-next {
     flex-grow: 1;
-    flex-shrink: 1;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    text-align: center;
   }
 
-  .pagination-list {
-    li {
-      flex-grow: 1;
-      flex-shrink: 1;
-    }
-  }
-}
-
-@include tablet {
-  .pagination-list {
-    flex-grow: 1;
-    flex-shrink: 1;
-    justify-content: flex-start;
+  .pagination-previous {
     order: 1;
   }
 
-  .pagination-previous {
+  .pagination-list {
     order: 2;
   }
 
@@ -117,37 +57,24 @@
     order: 3;
   }
 
-  .pagination {
-    justify-content: space-between;
-
-    &.is-centered {
-      .pagination-previous {
-        order: 1;
-      }
-
-      .pagination-list {
-        justify-content: center;
-        order: 2;
-      }
-
-      .pagination-next {
-        order: 3;
+  .pagination-link {
+    &[aria-current] {
+      background-color: getColor('font');
+      color: getColor('background');
+      #{$hoverSelector}, &:focus, &:focus-within {
+        background: linear-gradient(
+            to top,
+            rgba(0, 0, 0, 0.25),
+            rgba(0, 0, 0, 0.25)
+        ) getColor('font') !important;
       }
     }
+  }
 
-    &.is-right {
-      .pagination-previous {
-        order: 1;
-      }
-
-      .pagination-next {
-        order: 2;
-      }
-
-      .pagination-list {
-        justify-content: flex-end;
-        order: 3;
-      }
-    }
+  .pagination-ellipsis {
+    pointer-events: none;
   }
+
 }
+
+

package/framework/src/components/_plus-symbol.scss

@@ -1,6 +1,6 @@
 $plus-symbol-size: 40px;
 
-@mixin plus-symbol($color: getBGColor('neutral-dark'), $text-color: getColor('neutral-dark')) {
+@mixin plus-symbol($color: getColor('neutral-fade'), $text-color: getColor('neutral')) {
     &::after {
         content: "+";
         display: inline-block;

package/framework/src/components/_price.scss

@@ -8,6 +8,30 @@ $price-levels: (
     ($text-20),
 );
 
+.price-container {
+  display: flex;
+  align-items: baseline;
+  column-gap: 12px;
+  flex-wrap: wrap;
+
+  .overline {
+    width: 100%;
+    flex: none;
+    margin: 0;
+    --font-size: #{$text-64};
+    font-size: calc(var(--font-size) * 0.4);
+
+    @each $price-level in $price-levels {
+      $i: index($price-levels, $price-level);
+      $font-size: nth($price-level, 1);
+
+      &:has(~ .price.is-level-#{$i}:not(.is-striked)) {
+        --font-size: #{$font-size};
+      }
+    }
+  }
+}
+
 .price {
   display: inline-flex;
   font-weight: $weight-semibold;
@@ -70,7 +94,6 @@ $price-levels: (
           &::before {
             border-width: 3px;
             margin-left: -6px;
-            margin-top: 4px;
             border-radius: 1px;
           }
           font-size: $text-10;
@@ -122,16 +145,6 @@ $price-levels: (
     color: getColor('background');
   }
 
-  &.has-suptitle {
-    display: flex;
-    flex-wrap: wrap;
-
-    .price-suptitle {
-      flex-basis: 100%;
-      font-size: 0.375em;
-    }
-  }
-
   &.has-description {
     .cents,
     .centimes {
@@ -170,7 +183,7 @@ $price-levels: (
 
   &.is-striked {
     position: relative;
-    color: getBGColor('font');
+    color: getColor('neutral');
 
     &::before {
       position: absolute;
@@ -179,33 +192,24 @@ $price-levels: (
       top: 50%;
       right: 0;
       border-top: 2px solid;
-      border-color: getColor('font');
+      border-color: getColor('neutral');
       border-radius: 5px;
       transform: rotate(-20deg);
     }
 
     &.is-inverted {
-      color: getBGColor('font');
+      color: getColor('background');
 
       &::before {
         border-color: getColor('background');
       }
     }
-
-    &.has-suptitle {
-      display: inline-flex;
-      margin-top: 0.55em;
-
-      .price-suptitle {
-        position: absolute;
-        top: -1.4em;
-      }
-    }
   }
 }
 
 .price-tag {
-  background-color: getColor('alternate');
+  align-self: center;
+  background-color: getColor('accent');
   margin-left: 10px;
   border-radius: 6px;
   display: inline-flex;
@@ -216,11 +220,12 @@ $price-levels: (
   line-height: 1em;
   align-items: baseline;
   position: relative;
+  margin-left: -4px;
   &::before {
     content: '';
     border-color: transparent;
-    border-bottom-color: getColor('alternate');
-    border-left-color: getColor('alternate');
+    border-bottom-color: getColor('accent');
+    border-left-color: getColor('accent');
     transform: rotate(45deg);
     border-style: solid;
     border-width: 5px;

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

@@ -1,7 +1,7 @@
 .segmented-control {
   border-radius: 6px;
   padding: $spacing-1;
-  background-color: getBGColor('neutral');
+  background-color: getColor('neutral-fade');
   display: inline-block;
   margin: 16px 0;
 
@@ -19,7 +19,7 @@
     border: 2px solid transparent;
     height: 42px;
     color: getColor('font');
-    background-color: getBGColor('neutral');
+    background-color: getColor('neutral-fade');
 
     &:not(:last-child) {
       margin-right: 4px;

package/framework/src/components/_stepper.scss

@@ -23,7 +23,7 @@
     height: 4px;
     border-radius: var(--radius-small);
     background-size: 200% !important;
-    background-color: getBGColor('neutral');
+    background-color: getColor('neutral');
   }
 
   &.is-error {
@@ -204,7 +204,7 @@
 
 @keyframes progress {
   0%, 100% {
-    background-image: linear-gradient(to right, transparent 0, transparent 50%, getBGColor('neutral') 50%, getBGColor('neutral') 100%);
+    background-image: linear-gradient(to right, transparent 0, transparent 50%, getColor('neutral-fade') 50%, getColor('neutral-fade') 100%);
   }
   0% {
     background-position: 100% 0;

package/framework/src/components/_timeline.scss

@@ -1,9 +1,9 @@
 @use 'sass:math';
 @import "../utilities/spacing";
 
-$timeline-marker-color: getBGColor('neutral') !default;
+$timeline-marker-color: getColor('neutral-fade') !default;
 $timeline-marker-icon-size: 2.85em !default;
-$timeline-line-color: getBGColor('neutral') !default;
+$timeline-line-color: getColor('neutral-fade') !default;
 $timeline-marker-size: 0.8em !default;
 $timeline-marker-border-size: 0.1em !default;
 $timeline-marker-border: $timeline-marker-border-size solid $timeline-marker-color !default;
@@ -31,20 +31,9 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
     margin-left: 0;
   }
 
-  &::before {
-    content: '';
-    display: block;
-    width: $timeline-line-width;
-    position: absolute;
-    top: 49.80px;
-    left: 3rem;
-    bottom: 8px;
-    height: auto;
-    border-radius: 2px;
-  }
-
-  .timeline-item,
-  .undone {
+  .timeline-item {
+    --font-color: #{getColor('neutral')};
+    --bg-color: #{getColor('background')};
     display: flex;
     display: -ms-flexbox;
     display: -webkit-flex;
@@ -53,85 +42,39 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
     padding-bottom: $spacing-2;
 
     &::before {
-      background-color: getBGColor('neutral');
+      content: '';
+      display: block;
+      width: $timeline-line-width;
+      background-color: var(--font-color);
+      position: absolute;
+      top: 49.80px;
+      left: 3rem;
+      bottom: 8px;
+      height: auto;
+      border-radius: 2px;
     }
 
     .timeline-marker.is-icon {
-      background-color: getColor('main');
-      color: getColor('font');
+      background-color: var(--font-color);
+      color: var(--bg-color);
     }
 
-    &.active {
-      .timeline-marker.is-icon {
-        background-color: getColor('main');
-
-        .icon {
-          color: getColor('background');
-        }
-      }
+    &.active, &.done {
+      --font-color: #{getColor('main')};
+      --bg-color: #{getColor('background')};
+    }
 
+    &.active {
       .timeline-content {
         p.main-content {
           font-weight: 800;
         }
       }
-
-      &::before {
-        content: '';
-        background-color: getColor('main');
-        display: block;
-        width: $timeline-line-width;
-        position: absolute;
-        top: 49.80px;
-        left: 3rem;
-        bottom: 8px;
-        height: auto;
-        border-radius: 2px;
-      }
-
-    }
-
-    &.done {
-      .timeline-marker.is-icon {
-        background-color: getColor('font');
-
-        .icon {
-          color: getColor('background')
-        }
-      }
-
-      &::before {
-        content: '';
-        background-color: getColor('font');
-        display: block;
-        width: $timeline-line-width;
-        position: absolute;
-        top: 49.80px;
-        left: 3rem;
-        bottom: 8px;
-        height: auto;
-        border-radius: 2px;
-      }
     }
 
     &.cancel {
-      .timeline-marker.is-icon {
-        background-color: getColor('neutral-dark');
-        color: getBGColor('neutral');
-      }
-
-      &::before {
-        content: '';
-        background-color: getBGColor('neutral-dark');
-        display: block;
-        width: $timeline-line-width;
-        position: absolute;
-        top: 49.80px;
-        left: 3rem;
-        bottom: 8px;
-        height: auto;
-        border-radius: 2px;
-      }
+      --font-color: #{getColor('neutral')};
+      --bg-color: #{getColor('neutral-fade')};
     }
 
     .timeline-marker {
@@ -172,13 +115,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
                             $timeline-marker-border-size * 0.5);
         line-height: size(0.75rem);
         padding: math.div($timeline-icon-size, 3);
-        background: $timeline-marker-color;
         border-radius: 9999px;
-
-        > i {
-          color: getColor('background');
-          font-size: $timeline-icon-size !important;
-        }
       }
 
       &.is-outlined {
@@ -215,7 +152,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
       }
     }
 
-    @each $name in $colors-brand-funcionnal {
+    @each $name in $colors-brand-functionnal {
       $color: getColor($name);
       $brandName: getColorBrandName($name);
 
@@ -295,7 +232,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
         }
       }
 
-      @each $name, $pair in $colors-brand-funcionnal {
+      @each $name, $pair in $colors-brand-functionnal {
         $color: getColor($name);
         $brandName: getColorBrandName($name);
 
@@ -322,35 +259,10 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
         }
 
         &::before {
-          content: '';
-          background-color: $timeline-line-color;
-          display: block;
           width: calc(100% - 58px);
-          position: absolute;
           top: 22.89px;
           left: 59px;
-          bottom: 8px;
           height: 2px;
-          border-radius: 2px;
-        }
-
-        &.active::before {
-          background-color: getColor('main');
-        }
-
-        &.undone {
-
-          &::before {
-            background-color: getBGColor('neutral');
-          }
-        }
-
-        &.done::before {
-          background-color: getColor('font');
-        }
-
-        &.cancel::before {
-          background-color: getBGColor('neutral-dark');
         }
 
         .timeline-marker {
@@ -363,10 +275,6 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
           padding: 0;
           margin-top: 8px;
 
-          .main-content {
-            margin-left: 0;
-          }
-
         }
       }
     }

package/framework/src/elements/_alert.scss

@@ -11,9 +11,7 @@ a.alert {
 }
 
 .alert {
-
   border-radius: var(--radius);
-  margin-bottom: 16px;
   position: relative;
   display: flex;
   align-self: flex-start;
@@ -49,7 +47,7 @@ a.alert {
 
   @each $name in $colors-feedback {
     &.is-#{$name} {
-      background-color: getBGColor($name);
+      background-color: fadeColor($name);
       border: 1px solid getColor($name);
 
       .icon {

package/framework/src/elements/_all.scss

@@ -9,7 +9,6 @@
 @import 'chips';
 @import 'checkbox';
 @import 'container';
-@import 'dot';
 @import 'entry';
 @import 'form';
 @import 'icon';

package/framework/src/elements/_autocomplete.scss

@@ -23,10 +23,10 @@
                 @include hoverRules();
                 margin-left: calc(2px - $spacing-3 );
                 margin-right: calc(2px - $spacing-3 );
-                border-top: 1px solid var(--color-bg-hovered);
-                border-bottom: 1px solid var(--color-bg-hovered);
+                border-top: 1px solid getColor('neutral-fade');
+                border-bottom: 1px solid getColor('neutral-fade');
                 padding: calc($spacing-1 - 1.25px) calc($spacing-4 - 1px);
             }
         }
     }
-}
+}

package/framework/src/elements/_badge.scss

@@ -40,18 +40,21 @@
   display: flex;
   align-items: center;
 
+  .badge {
+    position: relative;
+    margin-right: 60px;
+  }
+
   p {
     margin-bottom: 0 !important;
 
-    + .badge {
-      @include badge;
-
-      &.is-level {
-        position: relative;
-        margin-left: 60px;
-      }
+    & + .badge {
+      margin-left: 60px;
+      margin-right: 0;
     }
+
   }
+
 }
 
 [data-badge-number] {

package/framework/src/elements/_box.scss

@@ -69,7 +69,7 @@ a.box {
     border-left: $highlighted-border-width solid transparent;
     border-top-left-radius: calc(var(--radius) + $highlighted-border-width);
     border-bottom-left-radius: calc(var(--radius) + $highlighted-border-width);
-    @each $name, $pair in $colors-brand-funcionnal {
+    @each $name, $pair in $colors-brand-functionnal {
       $color: getColor($name);
       $brandName: getColorBrandName($name);
 
@@ -158,7 +158,7 @@ a.box {
     margin-right: calc(var(--padding-box)*-1);
     margin-bottom: calc(var(--padding-box)*-1);
     padding: var(--padding-box);
-    border-top: 1px solid getBGColor('hovered');
+    border-top: 1px solid getColor('neutral-fade');
     border-bottom-left-radius: var(--radius);
     border-bottom-right-radius: var(--radius);
   }

package/framework/src/elements/_button.scss

@@ -63,8 +63,8 @@ $button-border-width: 2px !default;
 
   &[disabled],
   &[aria-disabled=true] {
-    background-color: getBGColorValue('main') !important;
-    color: getBGColorValue('disabled') !important
+    background-color: getColorValue('main-fade') !important;
+    color: getColorValue('disabled-fade') !important
   }
 
   &.is-loading {