@trilogy-ds/styles 0.0.1-beta.9 → 0.0.3-beta-v4

package/framework/src/components/_timeline.scss

@@ -1,13 +1,12 @@
 @use 'sass:math';
 @import "../utilities/spacing";
 
-$timeline-marker-color: getColor('grey-lighter') !default;
+$timeline-marker-color: getColor('neutral-fade') !default;
 $timeline-marker-icon-size: 2.85em !default;
-$timeline-line-color: getColor('grey-lighter') !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;
+$timeline-marker-border: $timeline-marker-border-size solid $timeline-marker-color !default;
 $timeline-line-width: 0.125em !default;
 $timeline-line-style: solid !default;
 $timeline-line: $timeline-line-width $timeline-line-style $timeline-line-color !default;
@@ -32,8 +31,9 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
     margin-left: 0;
   }
 
-  .timeline-item,
-  .undone {
+  .timeline-item {
+    --font-color: #{getColor('neutral')};
+    --bg-color: #{getColor('background')};
     display: flex;
     display: -ms-flexbox;
     display: -webkit-flex;
@@ -43,9 +43,9 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
 
     &::before {
       content: '';
-      background-color: getColor('grey-lighter');
       display: block;
       width: $timeline-line-width;
+      background-color: var(--font-color);
       position: absolute;
       top: 49.80px;
       left: 3rem;
@@ -55,86 +55,32 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
     }
 
     .timeline-marker.is-icon {
-      background-color: getColor('alternate');
-      .icon {
-        color: aside;
-      }
+      background-color: var(--font-color);
+      color: var(--bg-color);
     }
 
-
+    &.active, &.done {
+      --font-color: #{getColor('main')};
+      --bg-color: #{getColor('background')};
+    }
 
     &.active {
-      .timeline-marker.is-icon {
-        background-color: getColor('alternate');
-        .icon {
-          color: getColor('background');
-        }
-      }
       .timeline-content {
         p.main-content {
           font-weight: 800;
         }
       }
-      &::before {
-        content: '';
-        background-color: getColor('alternate');
-        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('grey-light');
-        .icon {
-          color: getColor('grey-darker');
-        }
-      }
-      &::before {
-        content: '';
-        background-color: getColor('grey-light');
-        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 {
       position: absolute;
       background: $timeline-marker-color;
-      border-radius: 100%;
+      border-radius: 9999px;
       content: '';
       display: block;
       height: $timeline-marker-size;
@@ -154,7 +100,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
         }
 
         background: $timeline-marker-color;
-        border-radius: 100%;
+        border-radius: 9999px;
         display: block;
         overflow: hidden;
       }
@@ -169,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: 100%;
-
-        > i {
-          color: getColor('background');
-          font-size: $timeline-icon-size !important;
-        }
+        border-radius: 9999px;
       }
 
       &.is-outlined {
@@ -199,13 +139,12 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
 
       .heading {
         font-size: $text-12;
-        color: getColor('grey');
+        color: getColor('font');
         font-family: $family-sans-serif;
         text-transform: none;
         letter-spacing: 0;
         line-height: 15px;
         font-weight: 500;
-        color: #707070;
       }
 
       p {
@@ -213,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);
 
@@ -293,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);
 
@@ -314,51 +253,27 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
       .timeline-item {
         flex-direction: column;
         width: 100%;
+
         &:not(:last-child) {
           margin-right: 16px;
         }
 
         &::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('alternate');
-        }
-        &.undone
-        {
-          i {
-            background-color: getColor('font');
-          }
-          &::before  {
-            background-color: getColor('grey-lighter');
-          }
-        }
-        &.done::before {
-          background-color: getColor('font');
-        }
-        &.cancel::before {
-          background-color: getColor('grey-light');
         }
+
         .timeline-marker {
-          position: static ;
-          margin-left:0
+          position: static;
+          margin-left: 0
         }
+
         .timeline-content {
           margin-left: 0;
-          padding:0;
+          padding: 0;
           margin-top: 8px;
-          .main-content {
-            margin-left: 0;
-          }
 
         }
       }

package/framework/src/elements/_alert.scss

@@ -1,3 +1,4 @@
+/* @todo validate a.alert exist */
 a.alert {
   cursor: pointer;
   transition: box-shadow $animation-duration;
@@ -10,19 +11,24 @@ a.alert {
 }
 
 .alert {
-
-  border-radius: $radius;
-  margin-bottom: 16px;
+  border-radius: var(--radius);
   position: relative;
   display: flex;
   align-self: flex-start;
   box-shadow: none;
   padding: $spacing-4;
 
+  &.is-banner {
+
+    text-align: center;
+    border-radius: 0;
+    border: none !important;
+
+  }
+
   .text:first-child,
   .title:first-child {
     line-height: normal;
-    font-size: $text-16 !important;
   }
 
   .title,
@@ -47,12 +53,10 @@ a.alert {
     color: currentColor;
   }
 
-  @each $name, $pair in $colors-feedback {
-    $bg-color: nth($pair, 1);
-
+  @each $name in $colors-feedback {
     &.is-#{$name} {
-      background-color: getColor($bg-color);
-      border: 2px solid getColor($name);
+      background-color: fadeColor($name);
+      border: 1px solid getColor($name);
 
       .icon {
         color: getColor($name);
@@ -81,7 +85,6 @@ a.alert {
     }
   }
 
-  .title,
   .text,
   .paragraph {
     font-size: $text-14;

package/framework/src/elements/_all.scss

@@ -2,14 +2,13 @@
 @import '../utilities/spacing';
 
 @import 'alert';
+@import 'autocomplete';
 @import 'badge';
 @import 'box';
 @import 'button';
 @import 'chips';
 @import 'checkbox';
-@import 'checkradio';
 @import 'container';
-@import 'dot';
 @import 'entry';
 @import 'form';
 @import 'icon';
@@ -17,9 +16,7 @@
 @import 'loader';
 @import 'link';
 @import 'list';
-@import 'notification';
 @import 'toaster';
-@import 'options';
 @import 'progress';
 @import 'paragraph';
 @import 'radio';

package/framework/src/elements/_autocomplete.scss

@@ -0,0 +1,32 @@
+.is-autocomplete {
+    .autocomplete-menu {
+        display: none;
+    }
+
+    &.is-active {
+        .autocomplete-menu {
+            display: block;
+            border: 1px solid rgba(0,38,60,.4);
+            padding: calc($spacing-1 + 1px) calc($spacing-2 + 2px);
+            border-radius: 4px;
+            max-height: 220px;
+            overflow-y: auto;
+            background-color: getColor('background');
+            z-index: 10000;
+        }
+
+        .autocomplete-item {
+            cursor: pointer;
+            padding: calc($spacing-1 - 0.25px) calc($spacing-1 + 1px);
+
+            &.is-active, &[data-autocomplete-item-hover] {
+                @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');
+                padding: calc($spacing-1 - 1.25px) calc($spacing-4 - 1px);
+            }
+        }
+    }
+}

package/framework/src/elements/_badge.scss

@@ -1,81 +1,87 @@
 .title .badge {
-    margin-left: 0.6em;
-    margin-right: 0.6em;
+  margin-left: 0.6em;
+  margin-right: 0.6em;
 }
 
-@mixin badge {
-    display: inline-flex;
-    border-radius: 99em;
-    color: getColor('background');
-    background: getColor('alternate');;
-    font-size: $text-10;
-    min-height: $text-20;
-    min-width: $text-20;
-    justify-content: center;
-    align-items: center;
+.badge-container {
+  position: relative;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  min-width: 40px;
+  min-height: 40px;
 
-    &:empty {
-        min-width: $text-10;
-        min-height: $text-10;
-    }
+  .badge,
+  .badge-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
 
-    &.is-up {
-        position: absolute;
-        left: 50%;
-        top: $text-10;
-        right: $text-24;
+    &.is-bottom-left {
+      bottom: 0;
+      left: 0;
+      right: auto;
+      top: auto;
     }
 
-    &.is-inverted {
-        color: getColor('main');
-        background: getColor('background');
+    &.is-bottom-right {
+      bottom: 0;
+      right: 0;
+      top: auto;
     }
 
-    ul.menu-list li a & {
-        margin: 0 $text-15;
-        max-height: 17px;
+    &.is-top-left {
+      top: 0;
+      left: 0;
+      right: auto;
     }
-}
+  }
 
-.badge {
-    @include badge;
+  .badge-icon {
+    width: $text-20;
+    height: $text-20;
+  }
 }
 
-.badge-and-text {
-    display: flex;
-    align-items: center;
-
-    p {
-        margin-bottom: 0 !important;
+.badge {
+  display: inline-flex;
+  border-radius: 9999px;
+  color: getColor('background');
+  background: getColor('main');
+  font-size: $text-10;
+  min-height: $text-20;
+  min-width: $text-20;
+  justify-content: center;
+  align-items: center;
 
-        + .badge {
-            @include badge;
+  &:empty {
+    min-width: $text-10;
+    min-height: $text-10;
+  }
 
-            &.is-level {
-                position: relative;
-                margin-left: 60px;
-            }
-        }
-    }
+  &.is-inverted {
+    color: getColor('main') !important;
+    background: getColor('background');
+  }
 }
 
 [data-badge-number] {
-    position: relative;
+  position: relative;
 
-    &::after {
-        content: attr(data-badge-number);
-        position: absolute;
-        margin-left: -15px;
-        top: -7px;
-        color: getColor('background');
-        left: 100%;
-        background: getColor('main');
-        font-size: $text-10;
-        min-height: $text-20;
-        min-width: $text-20;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 100%;
-    }
+  &::after {
+    content: attr(data-badge-number);
+    position: absolute;
+    margin-left: -15px;
+    top: -7px;
+    color: getColor('background');
+    left: 100%;
+    background: getColor('main');
+    font-size: $text-10;
+    min-height: $text-20;
+    min-width: $text-20;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+  }
 }