@trilogy-ds/styles 0.0.1-beta.9 → 0.0.2-alpha-prompt

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');
-        font-family: $family-sans-serif;
+        color: getColor('font');
+        font-family: $family-primary;
         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/components/_title.scss

@@ -0,0 +1,151 @@
+@use 'sass:math';
+
+$title-weight: $weight-semibold;
+$title-high-weight: 550;
+$title-line-height: 1.1;
+$title-strong-color: inherit;
+$title-strong-weight: inherit;
+$title-sub-size: 0.5em;
+$title-sup-size: 0.5em;
+
+$subtitle-size: $text-16;
+$subtitle-weight: $weight-medium;
+$subtitle-size-tablet: $text-15;
+$subtitle-line-height: 1.2;
+$subtitle-strong-weight: $weight-semibold;
+
+$overline-size: $text-14;
+$overline-weight: $weight-semibold;
+$overline-line-height: 1.2;
+$overline-size-tablet: $text-15;
+
+$title-levels: (
+    ($text-48, $text-58, $family-secondary),
+    ($text-36, $text-44, $family-secondary),
+    ($text-28, $text-32, $family-primary),
+    ($text-24, $text-28, $family-primary),
+    ($text-20, $text-24, $family-primary),
+    ($text-16, $text-20, $family-primary)
+);
+$title-levels-mobile: (
+    ($text-32, $text-38),
+    ($text-28, $text-34),
+    ($text-22, $text-26),
+    ($text-20, $text-24),
+    ($text-18, $text-22),
+    ($text-16, $text-20)
+);
+
+.title,
+.subtitle,
+.overline {
+  word-break: break-word;
+
+  em,
+  span {
+    font-weight: inherit;
+  }
+
+  .tag {
+    vertical-align: middle;
+  }
+}
+
+.title {
+  font-size: $text-32;
+  font-weight: $title-weight;
+  line-height: $title-line-height;
+
+  // 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);
+
+    // 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;
+      line-height: $line-height;
+      font-family: $font-family;
+    }
+
+    &.is-medium {
+      font-weight: $weight-medium;
+    }
+
+    &.is-inverted {
+      color: getColor('background');
+    }
+
+    .details {
+      font-size: 80%;
+      color: getColor('neutral');
+      font-weight: $weight-normal;
+    }
+
+    &.is-section-title {
+      text-align: center;
+    }
+
+    @include tablet {
+      font-size: $text-40;
+    }
+
+    sup {
+      top: -0.5em;
+      font-size: $title-sup-size;
+    }
+
+    sub {
+      bottom: -0.5em;
+      font-size: $title-sub-size;
+    }
+
+    &.is-centered {
+      text-align: center;
+    }
+  }
+
+  @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);
+      &.is-level-#{$i} {
+        font-size: $font-size-mobile;
+        line-height: $line-height-mobile;
+      }
+    }
+  }
+}
+
+.subtitle {
+  color: getColor('font');
+  font-size: $subtitle-size;
+  font-weight: $subtitle-weight;
+  line-height: $subtitle-line-height;
+
+  &.is-inverted {
+    color: getColor('background');
+  }
+}
+
+.overline {
+  color: getColor('font');
+  font-size: $overline-size;
+  font-weight: $overline-weight;
+  line-height: $overline-line-height;
+
+  &.is-inverted {
+    color: getColor('background');
+  }
+}

package/framework/src/{elements → components/alert}/_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/components/alert/_index.scss

@@ -0,0 +1,2 @@
+@import "alert";
+@import "toaster";

package/framework/src/{elements → components/alert}/_toaster.scss

@@ -10,11 +10,8 @@ a.toaster {
 }
 
 .toaster {
-    @include apply-shadow-box();
-
-
-  background-color: getColor('bg-info');
-  border-radius: $radius;
+  background-color: getColor('info-fade');
+  border-radius: var(--radius);
   margin-bottom: 16px;
   position: relative;
     margin-left: 24px;
@@ -62,10 +59,9 @@ a.toaster {
         background: transparent;
     }
 
-  @each $name, $pair in $colors-feedback {
-    $bg-color: nth($pair, 1);
+  @each $name in $colors-feedback {
     &.is-#{$name} {
-      background-color: getColor($bg-color);
+      background-color: fadeColor($name);
       border: 2px solid getColor($name);
 
       .icon {

package/framework/src/components/input/_entry.scss

@@ -0,0 +1,135 @@
+.input, .textarea {
+  &:not(:disabled) {
+    &:active,
+    &:focus,
+    &:focus-visible:not(.icon) {
+      padding-left: 15px ;
+    }
+  }
+}
+
+.input,
+.textarea {
+  @include input;
+
+  padding-left: $spacing-4;
+  padding-right: $spacing-4;
+  font-size: $size-medium;
+  max-width: 100%;
+  width: 100%;
+
+  // Colors
+  @each $name in $colors-brand-functionnal {
+    $color: getColor($name);
+    $color-invert: invertColor($name);
+    $brandName: getColorBrandName($name);
+
+    &.is-#{$brandName} {
+      border: 1px solid $color;
+    }
+  }
+
+  // Sizes
+  &.is-small {
+    @include control-small;
+  }
+
+  &.is-large {
+    @include control-large;
+  }
+
+  &.is-fullwidth {
+    display: block;
+    width: 100%;
+  }
+
+  &.is-inline {
+    display: inline;
+  }
+
+  & label {
+    margin-top: 10px;
+  }
+}
+
+.input {
+  &::-ms-clear {
+    display: none;
+  }
+
+  &.is-small {
+    height: 24px;
+  }
+
+  &.is-rounded {
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+
+  &.is-static {
+    background-color: transparent;
+    border-color: transparent;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &::-webkit-search-cancel-button{
+    $colorSvg: encodecolor(getColorValue('main'));
+    position:absolute;
+    right: 0px;
+    bottom : 0px;
+    top:0px;
+    padding: 0 24px;
+    opacity: 1;
+    display: block;
+    background-image: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
+    background-size : 20px;
+    -webkit-appearance: none;
+    background-repeat: no-repeat;
+    background-color: getColor('background') ;
+    background-position: center;
+  }
+
+  &[type="search"] {
+    padding-right: 45px;
+    &:hover:not(:focus){
+      &::-webkit-search-cancel-button {
+        background-color: getColor('main-fade');
+      }
+    }
+    &:focus{
+      &::-webkit-search-cancel-button {
+        padding: 0 23px;
+      }
+    }
+  }
+
+
+}
+
+.textarea {
+  display: block;
+  max-width: 100%;
+  min-width: 100%;
+  resize: vertical;
+  padding-top: 15px;
+
+
+  &:not([rows]) {
+    max-height: 600px;
+    min-height: 120px;
+  }
+
+  &[rows] {
+    height: initial;
+  }
+
+  &.has-fixed-size {
+    resize: none;
+  }
+
+  &:focus-visible{
+    padding-top: 14px;
+    padding-bottom: 4px;
+  }
+}