@trilogy-ds/styles 0.0.1-beta-4 → 0.0.1-beta.11

package/framework/src/components/_stepper.scss

@@ -1,133 +1,5 @@
 @use "sass:math";
 
-$step-width: 30px;
-$step-font-size: 18px;
-$step-gap: $step-width;
-$step-gap-desktop: $step-width * 3;
-
-
-// old stepper , déprécié since ( v2 )
-.stepper {
-  display: inline-flex;
-  position: relative;
-
-  @include mobile {
-    &::after {
-      content: attr(data-label-mobile);
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      font-weight: $weight-semibold;
-      color: getColor('alternate');
-    }
-  }
-
-  .step {
-    position: relative;
-    z-index: zindex('void');
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: $step-width;
-    height: $step-width;
-    border-radius: 100%;
-    background: getColor('grey-disabled');
-    color: getColor('background');
-    font-size: $step-font-size;
-    transition: background .15s ease;
-
-    &.is-done {
-      background: getColor('font');
-    }
-
-    &.is-current,
-    &.is-active {
-      background: getColor('alternate');
-    }
-  }
-
-  .step + .step {
-    margin-left: $step-gap;
-
-    @include desktop {
-      margin-left: $step-gap-desktop;
-    }
-
-    &::before {
-      content: '';
-      height: 4px;
-      width: $step-gap;
-      display: block;
-      position: absolute;
-      z-index: zindex('subzero');
-      left: -$step-gap;
-      top: 50%;
-      transform: translateY(-50%);
-      transition: background .15s ease;
-      background-color: getColor('grey-disabled');
-
-      @include desktop {
-        width: $step-gap-desktop;
-        margin-left: -$step-gap-desktop + $step-width;
-      }
-    }
-  }
-
-  // done steps successively
-  .step.is-done + .step.is-done::before {
-    background: getColor('font');
-  }
-
-  // done step followed by current step
-  .step.is-done + .step.is-current::before {
-    background: linear-gradient(90deg, getColor('font'), getColor('alternate'));
-  }
-
-  // active step followed by done step(s)
-  .step.is-active + .step.is-done::before {
-    background: linear-gradient(90deg, getColor('alternate'), getColor('font'));
-  }
-
-  // current step followed by unvisited step(s)
-  .step.is-current + .step::before {
-    background: linear-gradient(90deg, getColor('alternate'), getColor('grey-disabled') 75%);
-  }
-
-  // labels
-  .step[data-label] {
-    margin-bottom: 40px;
-
-    &::after {
-      position: absolute;
-      left: -$step-gap-desktop * 0.5;
-      right: -$step-gap-desktop * 0.5;
-      color: getColor('grey');
-      font-size: $size-7;
-      font-weight: $weight-semibold;
-      top: 50px;
-      text-align: center;
-
-      @include desktop {
-        content: attr(data-label);
-      }
-    }
-
-    // active or current step
-    &.is-current::after,
-    &.is-active::after {
-      color: getColor('alternate');
-    }
-  }
-}
-
-// back to grey label when going back in steps: the current step is followed by the active step
-.step[data-label].is-active ~ .step[data-label].is-current::after {
-  color: getColor('grey');
-}
-
-
-// Nouveau stepper
-
 .stepper-wrapper {
   display: flex;
   position: relative;
@@ -148,22 +20,24 @@ $step-gap-desktop: $step-width * 3;
   width: 100%;
   padding: $spacing-2;
 
-  &:before{
+  &:before {
     content: "";
     display: block;
     height: 4px;
-    background: getColor('grey-disabled');
+    background: getBGColor('font');
     border-radius: 4px;
   }
 
   &.is-error {
 
-    &:before{
+    &:before {
       background: getColor('error') !important;
     }
+
     .step-bars {
       background: getColor('error') !important;
     }
+
     color: getColor('font');
 
     .step-label {
@@ -176,9 +50,10 @@ $step-gap-desktop: $step-width * 3;
 
       &::before {
         content: "";
-        mask-image: url('./assets/icons/all/times-circle.svg') !important;
+        mask-image: url('./assets/icons/all/times.svg') !important;
         background-color: getColor('error') !important;
         border-width: 0;
+        mask-size: 20px;
         width: 20px;
         height: 20px;
         margin: 2px 8px 0 -8px;
@@ -193,17 +68,17 @@ $step-gap-desktop: $step-width * 3;
 
   &.is-done {
 
-    &:before{
+    &:before {
       background: getColor('font');
       transition: background-color 2s ease-in-out;
     }
+
     .step-bars {
       background: getColor('font');
       transition: background-color 2s ease-in-out;
     }
 
     .step-label {
-      color: getColor('font');
       padding-left: $spacing-2;
 
       &::before {
@@ -212,6 +87,7 @@ $step-gap-desktop: $step-width * 3;
         background-color: getColor('success');
         border-width: 0;
         min-width: 20px;
+        mask-size: 20px;
         height: 20px;
         margin: 2px 8px 0 -8px;
         align-self: baseline;
@@ -222,15 +98,16 @@ $step-gap-desktop: $step-width * 3;
   &.is-current,
   &.is-active {
 
-    &:before{
-      background: getColor('alternate');
+    &:before {
+      background: getColor('main');
       animation: cssload-width 2s cubic-bezier(0.45, 0, 1, 1);
       -o-animation: cssload-width 2s cubic-bezier(0.45, 0, 1, 1);
       -webkit-animation: cssload-width 2s cubic-bezier(0.45, 0, 1, 1);
       -moz-animation: cssload-width 2s cubic-bezier(0.45, 0, 1, 1);
     }
+
     .step-bars {
-      background: getColor('alternate');
+      background: getColor('main');
       animation: cssload-width 2s cubic-bezier(0.45, 0, 1, 1);
       -o-animation: cssload-width 2s cubic-bezier(0.45, 0, 1, 1);
       -webkit-animation: cssload-width 2s cubic-bezier(0.45, 0, 1, 1);
@@ -242,7 +119,6 @@ $step-gap-desktop: $step-width * 3;
       font-weight: 600;
       font-size: 22px;
       line-height: 24px;
-      color: getColor('font');
       transition: color 1.45s ease;
       width: max-content;
 
@@ -270,7 +146,7 @@ $step-gap-desktop: $step-width * 3;
 
 .step-bars {
   height: 4px;
-  background: getColor('grey-disabled');
+  background: getColor('disabled');
   border-radius: 4px;
   display: none;
 }
@@ -278,7 +154,7 @@ $step-gap-desktop: $step-width * 3;
 .step-label {
   display: flex;
   align-items: center;
-  color: getColor('grey');
+  color: getColor('font');
   font-style: normal;
   font-weight: 400;
   font-size: 16px;

package/framework/src/components/_tabs.scss

@@ -24,33 +24,23 @@
 
   &.is-inverted {
     background-color: getColor('font');
+
     .tabs > .tab {
-        color: getColor('background') !important;
+      color: getColor('background') !important;
 
-        &.is-active {
-            &::after {
-                content: "";
-                width: calc(100% - 16px);
-                height: 2px;
-                border-radius: 2px;
-                font-size: 20px;
-                background-color: getColor('background');
-                bottom: -2px;
-                left: 8px;
-            }
-        }
-        &:hover:not(.is-disabled) {
-          color: getColor('background') !important;
-          cursor: pointer;
-        }
+      &.is-active {
+        border-bottom-color: currentColor;
+      }
 
-        &:focus-visible {
-          border-color: getColor('background');
-        }
+      #{$hoverSelector} {
+        color: getColor('background') !important;
+        cursor: pointer;
+      }
+
+      &:focus-visible {
+        border-color: getColor('background');
+      }
 
-        &.is-disabled {
-            color: getColor('grey-light');
-        }
     }
   }
 
@@ -68,15 +58,15 @@
     display: inline-flex;
 
     &.is-centered {
-        justify-content: center;
+      justify-content: center;
     }
 
     &.is-right {
-        justify-content: flex-end;
+      justify-content: flex-end;
     }
 
     &.is-left {
-        justify-content: flex-start;
+      justify-content: flex-start;
     }
 
 
@@ -98,7 +88,7 @@
     }
 
     @include mobile {
-      justify-content: flex-start ;
+      justify-content: flex-start;
       > .tab:first-child {
         margin-left: 24px;
       }
@@ -112,14 +102,10 @@
       font-family: $body-family;
       text-decoration: none;
       outline: none;
-      padding:  6px;
+      padding: 6px 14px;
       font-size: $text-14;
-      border: 2px solid transparent;
-      border-radius: 4px;
-
-      &:not(:last-child) {
-        margin-right: 16px;
-      }
+      border: 0px solid transparent;
+      border-bottom: 2px solid getBGColor('font');
 
       .tab-icon {
         margin-top: 2px;
@@ -127,7 +113,7 @@
 
       &:not(button) {
         .tab-icon {
-            margin-top: 4px;
+          margin-top: 4px;
         }
       }
 
@@ -136,27 +122,16 @@
       }
 
 
-
       &.is-active {
-        color: getColor('alternate');
+        color: getColor('main');
         font-weight: $weight-semibold;
         position: relative;
+        border-bottom-color: getColor('main');
 
-        &::after {
-          content: "";
-          width: calc(100% - 16px);
-          height: 2px;
-          border-radius: 2px;
-          font-size: 20px;
-          background-color: getColor('alternate');
-          position: absolute;
-          bottom: -2px;
-          left: 8px
-        }
       }
 
       &:hover:not(.is-disabled) {
-        color: getColor('alternate');
+        color: getColor('main');
         cursor: pointer;
 
         .icon.is-small [class^=tri-]::before, .icon.is-small [class*=" tri-"]::before {
@@ -165,23 +140,23 @@
         }
       }
 
-      &:focus-visible{
+      &:focus-visible {
         border-color: currentColor;
-        color: getColor('alternate');
+        color: getColor('main');
       }
 
       .icon {
         height: 0;
       }
 
-      .icon.is-small, .icon.is-small{
+      .icon.is-small, .icon.is-small {
         font-size: 22px;
       }
 
-      &.is-disabled {
-        color: getColor('grey');
-        cursor: default;
+      &[disabled], &[aria-disabled=true] {
+        background-color: transparent !important;
       }
+
     }
   }
 
@@ -192,6 +167,7 @@
     .tab-panel {
       transition: opacity 2s ease-in-out;
       transition-delay: 1s;
+
       &:not(.is-active) {
         display: none;
       }
@@ -199,6 +175,7 @@
       &.is-active {
         animation: fade-in 250ms;
       }
+
       @keyframes fade-in {
         from {
           opacity: 0;

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: getBGColor('neutral') !default;
 $timeline-marker-icon-size: 2.85em !default;
-$timeline-line-color: getColor('grey-lighter') !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;
+$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,6 +31,18 @@ $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 {
     display: flex;
@@ -42,42 +53,32 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
     padding-bottom: $spacing-2;
 
     &::before {
-      content: '';
-      background-color: getColor('grey-lighter');
-      display: block;
-      width: $timeline-line-width;
-      position: absolute;
-      top: 49.80px;
-      left: 3rem;
-      bottom: 8px;
-      height: auto;
-      border-radius: 2px;
+      background-color: getBGColor('neutral');
     }
 
     .timeline-marker.is-icon {
-      background-color: getColor('alternate');
-      .icon {
-        color: aside;
-      }
+      background-color: getColor('main');
+      color: getColor('font');
     }
 
-
-
     &.active {
       .timeline-marker.is-icon {
-        background-color: getColor('alternate');
+        background-color: getColor('main');
+
         .icon {
           color: getColor('background');
         }
       }
+
       .timeline-content {
         p.main-content {
           font-weight: 800;
         }
       }
+
       &::before {
         content: '';
-        background-color: getColor('alternate');
+        background-color: getColor('main');
         display: block;
         width: $timeline-line-width;
         position: absolute;
@@ -89,13 +90,16 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
       }
 
     }
+
     &.done {
       .timeline-marker.is-icon {
         background-color: getColor('font');
+
         .icon {
           color: getColor('background')
         }
       }
+
       &::before {
         content: '';
         background-color: getColor('font');
@@ -112,14 +116,13 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
 
     &.cancel {
       .timeline-marker.is-icon {
-        background-color: getColor('grey-light');
-        .icon {
-          color: getColor('grey-darker');
-        }
+        background-color: getColor('neutral-dark');
+        color: getBGColor('neutral');
       }
+
       &::before {
         content: '';
-        background-color: getColor('grey-light');
+        background-color: getBGColor('neutral-dark');
         display: block;
         width: $timeline-line-width;
         position: absolute;
@@ -199,13 +202,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 {
@@ -314,6 +316,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
       .timeline-item {
         flex-direction: column;
         width: 100%;
+
         &:not(:last-child) {
           margin-right: 16px;
         }
@@ -330,32 +333,36 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
           height: 2px;
           border-radius: 2px;
         }
-        &.active::before  {
-          background-color: getColor('alternate');
+
+        &.active::before {
+          background-color: getColor('main');
         }
-        &.undone
-        {
-          i {
-            background-color: getColor('font');
-          }
-          &::before  {
-            background-color: getColor('grey-lighter');
+
+        &.undone {
+
+          &::before {
+            background-color: getBGColor('neutral');
           }
         }
+
         &.done::before {
           background-color: getColor('font');
         }
+
         &.cancel::before {
-          background-color: getColor('grey-light');
+          background-color: getBGColor('neutral-dark');
         }
+
         .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;
@@ -47,12 +48,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: getBGColor($name);
+      border: 1px solid getColor($name);
 
       .icon {
         color: getColor($name);

package/framework/src/elements/_all.scss

@@ -7,7 +7,6 @@
 @import 'button';
 @import 'chips';
 @import 'checkbox';
-@import 'checkradio';
 @import 'container';
 @import 'dot';
 @import 'entry';
@@ -19,7 +18,6 @@
 @import 'list';
 @import 'notification';
 @import 'toaster';
-@import 'options';
 @import 'progress';
 @import 'paragraph';
 @import 'radio';