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

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

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

package/framework/src/components/_price.scss

@@ -8,30 +8,6 @@ $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;
@@ -94,6 +70,7 @@ $price-levels: (
           &::before {
             border-width: 3px;
             margin-left: -6px;
+            margin-top: 4px;
             border-radius: 1px;
           }
           font-size: $text-10;
@@ -145,6 +122,16 @@ $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 {
@@ -183,7 +170,7 @@ $price-levels: (
 
   &.is-striked {
     position: relative;
-    color: getColor('neutral');
+    color: getBGColor('font');
 
     &::before {
       position: absolute;
@@ -192,24 +179,33 @@ $price-levels: (
       top: 50%;
       right: 0;
       border-top: 2px solid;
-      border-color: getColor('neutral');
+      border-color: getColor('font');
       border-radius: 5px;
       transform: rotate(-20deg);
     }
 
     &.is-inverted {
-      color: getColor('background');
+      color: getBGColor('font');
 
       &::before {
         border-color: getColor('background');
       }
     }
+
+    &.has-suptitle {
+      display: inline-flex;
+      margin-top: 0.55em;
+
+      .price-suptitle {
+        position: absolute;
+        top: -1.4em;
+      }
+    }
   }
 }
 
 .price-tag {
-  align-self: center;
-  background-color: getColor('accent');
+  background-color: getColor('alternate');
   margin-left: 10px;
   border-radius: 6px;
   display: inline-flex;
@@ -220,12 +216,11 @@ $price-levels: (
   line-height: 1em;
   align-items: baseline;
   position: relative;
-  margin-left: -4px;
   &::before {
     content: '';
     border-color: transparent;
-    border-bottom-color: getColor('accent');
-    border-left-color: getColor('accent');
+    border-bottom-color: getColor('alternate');
+    border-left-color: getColor('alternate');
     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: getColor('neutral-fade');
+  background-color: getBGColor('neutral');
   display: inline-block;
   margin: 16px 0;
 
@@ -19,7 +19,7 @@
     border: 2px solid transparent;
     height: 42px;
     color: getColor('font');
-    background-color: getColor('neutral-fade');
+    background-color: getBGColor('neutral');
 
     &: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: getColor('neutral');
+    background-color: getBGColor('neutral');
   }
 
   &.is-error {
@@ -204,7 +204,7 @@
 
 @keyframes progress {
   0%, 100% {
-    background-image: linear-gradient(to right, transparent 0, transparent 50%, getColor('neutral-fade') 50%, getColor('neutral-fade') 100%);
+    background-image: linear-gradient(to right, transparent 0, transparent 50%, getBGColor('neutral') 50%, getBGColor('neutral') 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: getColor('neutral-fade') !default;
+$timeline-marker-color: getBGColor('neutral') !default;
 $timeline-marker-icon-size: 2.85em !default;
-$timeline-line-color: getColor('neutral-fade') !default;
+$timeline-line-color: getBGColor('neutral') !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,9 +31,20 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
     margin-left: 0;
   }
 
-  .timeline-item {
-    --font-color: #{getColor('neutral')};
-    --bg-color: #{getColor('background')};
+  &::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 {
     display: flex;
     display: -ms-flexbox;
     display: -webkit-flex;
@@ -42,39 +53,85 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
     padding-bottom: $spacing-2;
 
     &::before {
-      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;
+      background-color: getBGColor('neutral');
     }
 
     .timeline-marker.is-icon {
-      background-color: var(--font-color);
-      color: var(--bg-color);
-    }
-
-    &.active, &.done {
-      --font-color: #{getColor('main')};
-      --bg-color: #{getColor('background')};
+      background-color: getColor('main');
+      color: getColor('font');
     }
 
     &.active {
+      .timeline-marker.is-icon {
+        background-color: getColor('main');
+
+        .icon {
+          color: getColor('background');
+        }
+      }
+
       .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 {
-      --font-color: #{getColor('neutral')};
-      --bg-color: #{getColor('neutral-fade')};
+      .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;
+      }
     }
 
     .timeline-marker {
@@ -115,7 +172,13 @@ $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 {
@@ -152,7 +215,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
       }
     }
 
-    @each $name in $colors-brand-functionnal {
+    @each $name in $colors-brand-funcionnal {
       $color: getColor($name);
       $brandName: getColorBrandName($name);
 
@@ -232,7 +295,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
         }
       }
 
-      @each $name, $pair in $colors-brand-functionnal {
+      @each $name, $pair in $colors-brand-funcionnal {
         $color: getColor($name);
         $brandName: getColorBrandName($name);
 
@@ -259,10 +322,35 @@ $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 {
@@ -275,6 +363,10 @@ $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,7 +11,9 @@ a.alert {
 }
 
 .alert {
+
   border-radius: var(--radius);
+  margin-bottom: 16px;
   position: relative;
   display: flex;
   align-self: flex-start;
@@ -47,7 +49,7 @@ a.alert {
 
   @each $name in $colors-feedback {
     &.is-#{$name} {
-      background-color: fadeColor($name);
+      background-color: getBGColor($name);
       border: 1px solid getColor($name);
 
       .icon {

package/framework/src/elements/_all.scss

@@ -9,6 +9,7 @@
 @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 getColor('neutral-fade');
-                border-bottom: 1px solid getColor('neutral-fade');
+                border-top: 1px solid var(--color-bg-hovered);
+                border-bottom: 1px solid var(--color-bg-hovered);
                 padding: calc($spacing-1 - 1.25px) calc($spacing-4 - 1px);
             }
         }
     }
-}
+}

package/framework/src/elements/_badge.scss

@@ -40,21 +40,18 @@
   display: flex;
   align-items: center;
 
-  .badge {
-    position: relative;
-    margin-right: 60px;
-  }
-
   p {
     margin-bottom: 0 !important;
 
-    & + .badge {
-      margin-left: 60px;
-      margin-right: 0;
-    }
+    + .badge {
+      @include badge;
 
+      &.is-level {
+        position: relative;
+        margin-left: 60px;
+      }
+    }
   }
-
 }
 
 [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-functionnal {
+    @each $name, $pair in $colors-brand-funcionnal {
       $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 getColor('neutral-fade');
+    border-top: 1px solid getBGColor('hovered');
     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: getColorValue('main-fade') !important;
-    color: getColorValue('disabled-fade') !important
+    background-color: getBGColorValue('main') !important;
+    color: getBGColorValue('disabled') !important
   }
 
   &.is-loading {

package/framework/src/elements/_chips.scss

@@ -55,20 +55,20 @@
         }
       }
       #{$hoverSelector} {
-        background-color: getColor('neutral-fade');
+        background-color: var(--color-bg-hovered);
       }
     }
 
     &.is-inverted {
       background-color: white;
-      color: getColor('accent');
+      color: getColor('alternate');
 
       &:active,
       &:hover,
       &:focus,
       &:focus-visible,
       &.is-active {
-        background-color: getColor('accent') !important;
+        background-color: getColor('alternate') !important;
         color: getColor('background') !important;
       }
     }

package/framework/src/elements/_dot.scss

@@ -0,0 +1,6 @@
+.dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 9999px;
+}

package/framework/src/elements/_entry.scss

@@ -9,7 +9,7 @@
   width: 100%;
 
   // Colors
-  @each $name in $colors-brand-functionnal {
+  @each $name in $colors-brand-funcionnal {
     $color: getColor($name);
     $color-invert: invertColor($name);
     $brandName: getColorBrandName($name);

package/framework/src/elements/_form.scss

@@ -5,19 +5,18 @@ $help-size: $size-small;
 $label-weight: $weight-bold;
 
 .field {
-  &.is-fullwidth {
-    div.control {
-      flex: 1;
-    }
+  &:not(:first-child) {
+    margin-top: $field-margin;
   }
 
-  .input-label {
-    display: inline-block;
-    margin-bottom: 6px;
+  &:not(:last-child) {
+    margin-bottom: 7.5px;
   }
 
-  .input-sample {
-    margin-bottom: 10px !important;
+  &.is-fullwidth {
+    div.control {
+      flex: 1;
+    }
   }
 
   @include mobile {
@@ -220,7 +219,7 @@ $label-weight: $weight-bold;
       @each $name, $pair in $colors-feedback {
         &.is-#{$name} {
           ~ .icon {
-            color: fadeColor($name);
+            color: getBGColor($name);
           }
         }
       }
@@ -234,7 +233,7 @@ $label-weight: $weight-bold;
       @each $name, $pair in $colors-feedback {
         &.is-#{$name} {
           ~ .icon {
-            color: fadeColor($name);
+            color: getBGColor($name)
           }
         }
       }
@@ -397,13 +396,14 @@ $label-weight: $weight-bold;
 
         &:hover,
         &:focus {
-          color: getColor('neutral');
+          color: getColor('neutral-dark');
         }
       }
     }
   }
 
   + .help {
+    margin: 4px 0;
     font-size: $text-12;
     font-weight: $weight-medium;
   }
@@ -560,7 +560,7 @@ $label-weight: $weight-bold;
 }
 
 .label {
-  color: getColor('neutral');
+  color: getColor('neutral-dark');
   display: block;
   font-size: $size-normal;
   font-weight: $label-weight;
@@ -584,7 +584,7 @@ $label-weight: $weight-bold;
   font-size: $help-size;
   margin-top: 2.5px;
 
-  @each $name, $pair in $colors-brand-functionnal {
+  @each $name, $pair in $colors-brand-funcionnal {
     $color: getColor($name);
     $brandName: getColorBrandName($name);
 

package/framework/src/elements/_icon.scss

@@ -71,7 +71,7 @@ $size: (
         max-width: 100%;
     }
 
-    @each $name, $pair in $colors-brand-functionnal {
+    @each $name, $pair in $colors-brand-funcionnal {
       $color: getColor($name);
       $brandName: getColorBrandName($name);
 

package/framework/src/elements/_loader.scss

@@ -21,7 +21,7 @@ $loader-items-bottom-offset: -40px;
 
     .loader-body {
         visibility: hidden;
-        background-color: getColor('accent');
+        background-color: getColor('alternate');
         animation: 2.5s linear 0s forwards infinite top_item;
     }
 

package/framework/src/elements/_other.scss

@@ -5,3 +5,40 @@
 .delete {
     @include delete;
 }
+
+.heading {
+    display: block;
+    font-size: 11px;
+    letter-spacing: 1px;
+    margin-bottom: 5px;
+    text-transform: uppercase;
+}
+
+.highlight {
+    @include block;
+
+    font-weight: $weight-normal;
+    max-width: 100%;
+    overflow: hidden;
+    padding: 0;
+
+    pre {
+        overflow: auto;
+        max-width: 100%;
+    }
+}
+
+.number {
+    align-items: center;
+    background-color: getBGColor('neutral-dark');
+    border-radius: 9999px;
+    display: inline-flex;
+    font-size: $size-medium;
+    height: 2em;
+    justify-content: center;
+    margin-right: 15px;
+    min-width: 2.5em;
+    padding: 2.5px 5px;
+    text-align: center;
+    vertical-align: top;
+}