@design-factory/design-factory 17.1.0 → 18.0.1

package/styles/scss/components/toast/_toast.scss

@@ -1,5 +1,6 @@
 @use 'sass:color';
 @use 'sass:map';
+@use 'sass:meta';
 
 @import '../button/button.utils';
 
@@ -10,23 +11,26 @@
   --#{$prefix}toast-icon-top: #{$df-toast-insert-icon-top};
   --#{$prefix}toast-icon-font-weight: #{$df-icon-solid-font-weight};
   --#{$prefix}toast-icon-padding-start: #{$df-toast-insert-icon-space};
+  --#{$prefix}toast-btn-font-weight: #{$df-toast-btn-font-weight};
   --#{$prefix}toast-btn-close-border-radius: #{$df-toast-btn-close-border-radius};
   --#{$prefix}toast-btn-close-border-width: #{$df-toast-btn-close-border-width};
   --#{$prefix}toast-btn-close-padding-x: #{$df-toast-btn-close-padding-x};
   --#{$prefix}toast-btn-close-padding-y: #{$df-toast-btn-close-padding-y};
   --#{$prefix}toast-btn-close-margin-x: #{$df-toast-btn-close-margin-x};
   --#{$prefix}toast-btn-close-size: #{df-button-icononly-size($btn-padding-y-sm)};
-  --#{$prefix}toast-dismissible-padding-end: calc(var(--#{$prefix}toast-btn-close-margin-x) * 2 + var(--#{$prefix}toast-btn-close-size));
-  --#{$prefix}box-shadow-color-opacity: .5; // todo create var here I took the value of btn-focused opacity that is static too
+  --#{$prefix}toast-btn-close-icon-size: #{$df-toast-btn-close-icon-size};
+  --#{$prefix}toast-dismissible-padding-end: calc(
+    var(--#{$prefix}toast-btn-close-margin-x) * 2 + var(--#{$prefix}toast-btn-close-size)
+  );
   --#{$prefix}toast-subtle-box-shadow-opacity: #{$df-toast-subtle-box-shadow-opacity};
   --#{$prefix}toast-close-box-shadow-opacity: #{$df-toast-close-box-shadow-opacity};
+  --#{$prefix}toast-line-height: #{$df-toast-line-height};
 
   width: unset;
   max-width: var(--#{$prefix}toast-max-width);
   position: relative;
 
   &.df-toast-dismissible {
-
     .toast-body,
     .toast-header {
       @include ltr {
@@ -38,7 +42,7 @@
       }
     }
 
-    .toast-header+.toast-body {
+    .toast-header + .toast-body {
       @include ltr {
         padding-right: var(--#{$prefix}toast-padding-x);
       }
@@ -49,21 +53,17 @@
     }
   }
 
-
-  &.df-toast-subtle {
-    @include ltr {
-      border-left-width: var(--#{$prefix}toast-subtle-border-start-width);
-    }
-
-    @include rtl {
-      border-right-width: var(--#{$prefix}toast-subtle-border-start-width);
-    }
-  }
-
   .toast-body,
   .toast-header {
     .btn-close {
-      color: var(--#{$prefix}toast-color);
+      --#{$prefix}box-shadow-color: #{$df-toast-box-shadow-color};
+
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        @extend .btn, .btn-outline-secondary, .df-btn-tertiary;
+      } @else {
+        @extend .btn, .btn-link;
+      }
+
       position: absolute;
       top: 0;
 
@@ -79,18 +79,98 @@
       border-radius: var(--#{$prefix}toast-btn-close-border-radius);
       border-width: var(--#{$prefix}toast-btn-close-border-width);
       padding: var(--#{$prefix}toast-btn-close-padding-y) var(--#{$prefix}toast-btn-close-padding-x);
-      margin: calc(var(--#{$prefix}toast-padding-y) - 0.3em) var(--#{$prefix}toast-btn-close-margin-x);
+      margin: #{$df-toast-btn-close-margin};
       width: var(--#{$prefix}toast-btn-close-size);
       height: var(--#{$prefix}toast-btn-close-size);
       opacity: 1;
 
+      // override BS
+      background: transparent;
+      &:before {
+        content: '';
+        display: block;
+        overflow: hidden;
+        width: var(--#{$prefix}toast-btn-close-icon-size);
+        height: var(--#{$prefix}toast-btn-close-icon-size);
+        background: var(--#{$prefix}toast-color) center;
+        mask-image: #{escape-svg($btn-close-bg)};
+      }
+
       &:hover {
-        background-color: var(--#{$prefix}toast-btn-close-hover-color);
+        background-color: var(--#{$prefix}btn-hover-bg);
+        &:before {
+          background-color: var(--#{$prefix}btn-hover-color);
+        }
+      }
+
+      // To be kept after hover as it has the same specificity
+      &:active {
+        background-color: var(--#{$prefix}btn-active-bg);
+        &:before {
+          background-color: var(--#{$prefix}btn-active-color);
+        }
+      }
+
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        &:focus {
+          border-color: transparent;
+          box-shadow: none;
+        }
+        &:focus-visible {
+          box-shadow: var(--df-btn-focus-box-shadow);
+        }
+      }
+    }
+
+    .df-btn-tertiary {
+      // Balance the btn-sm padding to preserve the elements alignement and the toast height.
+      &:not(.btn-close) {
+        margin-top: calc(0rem - var(--df-btn-padding-y));
+      }
+
+      &:focus-visible {
+        --df-box-shadow-color: var(--#{$prefix}toast-color);
+      }
+
+      &:not(:hover) {
+        color: var(--#{$prefix}toast-color);
+      }
+    }
+  }
+
+  &.df-toast-subtle {
+    border-inline-start-width: var(--#{$prefix}toast-subtle-border-start-width);
+
+    .df-btn-tertiary:not(.btn-close) {
+      &:focus-visible {
+        --df-box-shadow-color: var(--#{$prefix}primary);
+      }
+
+      &:not(:hover) {
+        color: var(--#{$prefix}primary);
+      }
+
+      &:hover {
+        color: var(--#{$prefix}primary-700);
+        background-color: var(--#{$prefix}primary-100);
+
+        &:focus-visible {
+          --df-box-shadow-color: var(--#{$prefix}primary-700);
+        }
+      }
+
+      &:active {
+        color: var(--#{$prefix}primary-800);
+        background-color: var(--#{$prefix}primary-200);
+        &:focus-visible {
+          --df-box-shadow-color: var(--#{$prefix}primary-800);
+        }
       }
     }
   }
 
   .toast-body {
+    line-height: var(--#{$prefix}toast-line-height);
     padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
 
     .btn.btn-link {
@@ -100,6 +180,8 @@
       --#{$prefix}btn-line-height: 1;
       --#{$prefix}btn-border-radius: 0;
 
+      font-weight: var(--#{$prefix}toast-btn-font-weight);
+
       &:focus {
         text-decoration: none;
       }
@@ -122,7 +204,6 @@
 
   &[dfInsertToastIcon] {
     div:first-of-type {
-
       &.toast-body,
       &.toast-header {
         @include ltr {
@@ -140,7 +221,7 @@
     $toast-bg: shades-css-var($state, 'bg-color');
     $toast-close-box-shadow-color: shades-rgb-css-var($state, 'bg-color', true);
     $toast-subtle-close-box-shadow-color: shades-rgb-css-var('primary', 'bg-color');
-    @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
       $toast-subtle-close-box-shadow-color: shades-rgb-css-var($state, 'bg-subtle-color', true);
     }
     $toast-bg-hover: shades-css-var($state, 'bg-hover-color');
@@ -163,38 +244,31 @@
       --#{$prefix}toast-header-bg: #{$toast-bg};
       --#{$prefix}toast-header-color: #{$toast-text-color};
       --#{$prefix}toast-icon-color: #{$toast-icon-color};
-      --#{$prefix}box-shadow-color-opacity: 1;
-      --#{$prefix}toast-btn-link-focus-box-shadow: #{0 0 0 #{$btn-focus-width} shades-rgba-css-var-with-opacity($state, 'bg-color')};
-      --#{$prefix}toast-btn-close-hover-color: #{$toast-bg-hover};
-      --#{$prefix}inner-box-shadow-color: var(--#{$prefix}toast-bg); // To propagate to other 
-      --#{$prefix}toast-btn-close-bg: #{transparent escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$toast-btn-close-color}'><path d=' M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>")) center / $btn-close-width auto no-repeat};
-
-      // The btn-close-white-filter is not working if the background color is set.
-      .btn-close {
-        // override BS
-        background: var(--#{$prefix}toast-btn-close-bg);
-        --#{$prefix}box-shadow-color: #{rgba($toast-close-box-shadow-color, var(--#{$prefix}toast-close-box-shadow-opacity))};
-      }
+      --#{$prefix}toast-btn-link-focus-box-shadow: #{0
+        0
+        0
+        #{$btn-focus-width}
+        shades-rgba-css-var-with-opacity($state, 'bg-color')} !important;
+      --#{$prefix}inner-box-shadow-color: var(--#{$prefix}toast-bg); // To propagate to other
 
       .toast-body {
         .btn.btn-link {
           // todo fix the focus link color
           --#{$prefix}btn-color: #{$toast-text-color};
-          --#{$prefix}btn-hover-color: #{$toast-text-color};
+          --#{$prefix}btn-hover-color: var(--#{$prefix}black);
           --#{$prefix}btn-bg: #{$toast-bg};
           --#{$prefix}btn-link-focus-box-shadow: var(--#{$prefix}toast-btn-link-focus-box-shadow);
           --#{$prefix}btn-active-color: #{$toast-text-color};
-          --#{$prefix}btn-hover-bg: #{$toast-bg-hover};
           --#{$prefix}btn-active-bg: #{$toast-bg-hover};
           --#{$prefix}btn-focus-only-color: #{$toast-text-color};
           --#{$prefix}btn-focus-only-bg: transparent;
           --#{$prefix}btn-focus-only-border-color: transparent;
-          --#{$prefix}box-shadow-color: #{rgba($toast-close-box-shadow-color, var(--#{$prefix}toast-close-box-shadow-opacity))};
-          @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-            --#{$prefix}inner-box-shadow-color: var(--#{$prefix}toast-bg); // To propagate to other 
-          }
-          &:focus {
-            box-shadow: $btn-focus-box-shadow;
+          --#{$prefix}box-shadow-color: #{rgba(
+              $toast-close-box-shadow-color,
+              var(--#{$prefix}toast-close-box-shadow-opacity)
+            )} !important;
+          @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+            --#{$prefix}inner-box-shadow-color: var(--#{$prefix}toast-bg); // To propagate to other
           }
         }
       }
@@ -204,14 +278,15 @@
         // DO rename vars as it is for toast-subtle ....
         --#{$prefix}toast-subtle-border-start-color: #{$toast-subtle-border-start-color};
         --#{$prefix}border-color-opacity: var(--#{$prefix}toast-subtle-border-color-alpha);
-        --#{$prefix}box-shadow-color-opacity: 1;
         --#{$prefix}toast-bg: #{$toast-subtle-bg-color};
         --#{$prefix}toast-color: #{$toast-subtle-text-color};
-        --#{$prefix}toast-btn-close-hover-color: #{$toast-subtle-hover-bg-color};
         --#{$prefix}toast-border-color: #{$toast-subtle-border-color};
         --#{$prefix}toast-icon-color: #{$toast-subtle-border-start-color};
-        --#{$prefix}toast-btn-link-focus-box-shadow: #{0 0 0 #{$btn-focus-width} shades-rgba-css-var-with-opacity('primary', 'bg-subtle-color')}; // TODO check if  default box-shadow
-        --#{$prefix}toast-btn-close-bg: #{transparent escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$toast-subtle-btn-close-color}'><path d=' M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>")) center / $btn-close-width auto no-repeat};
+        --#{$prefix}toast-btn-link-focus-box-shadow: #{0
+          0
+          0
+          #{$btn-focus-width}
+          shades-rgba-css-var-with-opacity('primary', 'bg-subtle-color')}; // TODO check if  default box-shadow
 
         @include ltr {
           border-left-color: var(--#{$prefix}toast-subtle-border-start-color);
@@ -225,16 +300,10 @@
           color: var(--#{$prefix}toast-icon-color);
         }
 
-        .btn-close {
-          // override BS
-          background: var(--#{$prefix}toast-btn-close-bg);
-          --#{$prefix}box-shadow-color: #{rgba($toast-subtle-close-box-shadow-color, var(--#{$prefix}toast-subtle-box-shadow-opacity))};
-        }
-
         .toast-body {
           .btn.btn-link {
             --#{$prefix}btn-color: var(--#{$prefix}link-color);
-            --#{$prefix}btn-hover-color: var(--#{$prefix}link-hover-color);
+            --#{$prefix}btn-hover-color: #000;
             --#{$prefix}btn-bg: #{$toast-subtle-bg-color};
             --#{$prefix}btn-active-color: var(--#{$prefix}link-color);
             --#{$prefix}btn-hover-bg: #{$toast-subtle-hover-bg-color};
@@ -243,15 +312,16 @@
             --#{$prefix}btn-focus-only-bg: transparent;
             --#{$prefix}btn-focus-only-border-color: transparent;
             // TODO could be use the btn-link-color here at some point?
-            --#{$prefix}box-shadow-color: #{rgba(var(--#{$prefix}primary-500-rgb), var(--#{$prefix}toast-subtle-box-shadow-opacity))};
-            @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-              --#{$prefix}inner-box-shadow-color: var(--#{$prefix}toast-bg); // To propagate to other 
+            --#{$prefix}box-shadow-color: #{rgba(
+                var(--#{$prefix}primary-500-rgb),
+                var(--#{$prefix}toast-subtle-box-shadow-opacity)
+              )} !important;
+            @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+              --#{$prefix}inner-box-shadow-color: var(--#{$prefix}toast-bg); // To propagate to other
             }
-            &:focus {
-              box-shadow: $btn-focus-box-shadow;
-            }          }
+          }
         }
       }
     }
   }
-}
+}

package/styles/scss/components/toast/_toast.variables.scss

@@ -1,13 +1,18 @@
 @use 'sass:color';
 
 $df-toast-insert-icon-space: 1.5rem !default;
-$df-toast-insert-icon-top: 1rem !default;
+$df-toast-insert-icon-top: 0.75rem !default;
 $df-toast-subtle-border-start-width: $df-alert-size-default-border-start-width !default;
+$df-toast-btn-font-weight: $font-weight-normal !default;
 $df-toast-btn-close-border-radius: $df-btn-icononly-border-radius !default;
 $df-toast-btn-close-border-width: $df-btn-icononly-border-width !default;
 $df-toast-btn-close-padding-x: $df-btn-icononly-padding-x !default;
 $df-toast-btn-close-padding-y: $df-btn-icononly-padding-y !default;
 $df-toast-btn-close-margin-x: 0.5rem !default;
+$df-toast-btn-close-margin: calc(var(--#{$prefix}toast-padding-y) - 0.3em) var(--#{$prefix}toast-btn-close-margin-x) !default;
+$df-toast-btn-close-icon-size: 15px !default;
 $df-toast-subtle-border-color-alpha: 0.4 !default;
 $df-toast-subtle-box-shadow-opacity: 0.25 !default;
-$df-toast-close-box-shadow-opacity: 0.25 !default;
+$df-toast-close-box-shadow-opacity: 0.25 !default;
+$df-toast-box-shadow-color: $gray-900 !default;
+$df-toast-line-height: 1.3125rem !default;

package/styles/scss/components/toggle/_toggle.scss

@@ -1,10 +1,13 @@
 @use 'sass:math';
+@use 'sass:meta';
 
 .form-switch {
   --#{$prefix}switch-height: #{math.div($form-switch-width, 2)};
   --#{$prefix}switch-border-width: #{$df-switch-border-width};
+  --#{$prefix}switch-border-color: #{$df-switch-border-color};
   --#{$prefix}switch-label-padding-start: #{$df-switch-label-padding-start};
   --#{$prefix}switch-name-font-weight: #{$df-switch-name-font-weight};
+  --#{$prefix}switch-label-font-weight: #{$df-switch-label-font-weight};
   --#{$prefix}switch-disabled-label-color: #{$df-switch-disabled-label-color};
   --#{$prefix}switch-disabled-active-bg-color: #{$df-switch-disabled-active-bg-color};
   --#{$prefix}switch-disabled-active-border-color: #{$df-switch-disabled-active-border-color};
@@ -25,20 +28,23 @@
   display: flex;
   align-items: center;
 
-  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    --#{$prefix}box-shadow-color: #{shades-css-var('primary', 'bg-color')}; // same as $form-check-input-checked-bg-color: $component-active-bg
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    --#{$prefix}box-shadow-color: #{shades-css-var(
+        'primary',
+        'bg-color'
+      )}; // same as $form-check-input-checked-bg-color: $component-active-bg
   }
 
   @each $state, $color in $df-switch-additional-color-list {
     .df-switch-#{$state} {
       --#{$prefix}text-color-opacity: #{$df-switch-box-shadow-opacity};
-      @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-        --#{$prefix}box-shadow-color: #{shades-css-var($state, 'text-color')};
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        --#{$prefix}box-shadow-color: #{$color};
       } @else {
         --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($state, 'text-color')};
       }
-      --#{$prefix}switch-color: #{shades-css-var($state, 'text-color')};
-      --#{$prefix}switch-color-rgb: #{shades-rgb-css-var($state, 'text-color')};
+      --#{$prefix}switch-color: #{shades-css-var($state, 'bg-color')};
+      --#{$prefix}switch-color-rgb: #{shades-rgb-css-var($state, 'bg-color')};
       &:checked:not(.disabled):not([disabled]) {
         background-color: var(--#{$prefix}switch-color);
         border-color: var(--#{$prefix}switch-color);
@@ -52,7 +58,8 @@
   }
 
   &.form-check {
-    @include ltr { // override BS, there is no CSS var for this
+    @include ltr {
+      // override BS, there is no CSS var for this
       padding-left: var(--#{$prefix}switch-padding-start);
     }
     @include rtl {
@@ -69,9 +76,12 @@
   }
 
   .form-check-input {
+    &:not(:checked):not(.disabled):not([disabled]) {
+      border-color: var(--#{$prefix}switch-border-color);
+    }
     &:focus {
       &:not(:checked) {
-        @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
           --#{$prefix}box-shadow-color: #{$form-switch-color};
         }
       }
@@ -82,17 +92,18 @@
     @include rtl {
       background-position: var(--#{$prefix}switch-rtl-bg-position);
       &:checked {
-          background-position: var(--#{$prefix}switch-rtl-checked-bg-position);
+        background-position: var(--#{$prefix}switch-rtl-checked-bg-position);
       }
     }
 
-    &.disabled,&[disabled] {
+    &.disabled,
+    &[disabled] {
       background-image: var(--#{$prefix}switch-disabled-bg-image);
       &:checked {
         background-color: var(--#{$prefix}switch-disabled-active-bg-color);
         border-color: var(--#{$prefix}switch-disabled-active-border-color);
       }
-      &:not([checked]) {
+      &:not([checked]):not(:checked) {
         background-color: var(--#{$prefix}switch-disabled-inactive-background-color);
         border-color: var(--#{$prefix}switch-disabled-inactive-border-color);
       }
@@ -108,6 +119,7 @@
     @include ltr {
       padding-left: var(--#{$prefix}switch-label-padding-start);
     }
+    font-weight: var(--#{$prefix}switch-label-font-weight);
   }
   .df-form-switch-name {
     font-weight: var(--#{$prefix}switch-name-font-weight);
@@ -126,14 +138,6 @@
     .df-form-switch-container {
       display: flex;
       align-items: center;
-      .form-check-label {
-        // TODO when a CSS var is available for this, use it
-        @if $form-label-font-weight {
-          font-weight: $form-label-font-weight;
-        } @else {
-          font-weight: $font-weight-base;
-        }
-      }
     }
   }
 }

package/styles/scss/components/toggle/_toggle.variables.scss

@@ -1,12 +1,14 @@
 @use 'sass:math';
 
-$df-switch-label-padding-start: .5em !default;
+$df-switch-label-padding-start: 0.5em !default;
 $df-switch-border-width: 0.09375rem !default;
-$df-switch-name-font-weight: 500 !default;
+$df-switch-border-color: var(--#{$prefix}gray-600) !default;
+$df-switch-name-font-weight: 400 !default;
+$df-switch-label-font-weight: 500 !default;
 $df-switch-additional-color-list: (
-  'success': $brand-green
+  'success': $green-600
 ) !default;
-$df-switch-disabled-label-color: var(--#{$prefix}gray-400) !default;
+$df-switch-disabled-label-color: var(--#{$prefix}gray-900) !default;
 $df-switch-disabled-active-bg-color: var(--#{$prefix}gray-200) !default;
 $df-switch-disabled-active-border-color: $border-color !default;
 $df-switch-disabled-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$gray-400}'/></svg>") !default;

package/styles/scss/components/tooltip/_tooltip.scss

@@ -0,0 +1,12 @@
+.tooltip {
+  --#{$prefix}tooltip-border-radius-sm: #{$df-tooltip-border-radius-sm};
+  --#{$prefix}tooltip-border-radius-lg: #{$df-tooltip-border-radius-lg};
+
+  @each $extension, $ratio in $df-size-ratios {
+    &.tooltip-inner-#{$extension} {
+      .tooltip-inner {
+        @include border-radius(var(--#{$prefix}tooltip-border-radius-#{$extension}));
+      }
+    }
+  }
+}

package/styles/scss/components/tooltip/_tooltip.variables.scss

@@ -0,0 +1,2 @@
+$df-tooltip-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$df-tooltip-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;

package/styles/scss/components/typeahead/_typeahead.scss

@@ -6,6 +6,7 @@ ngb-typeahead-window.dropdown-menu {
   --#{$prefix}typeahead-active-color: #{$df-typeahead-active-color};
   --#{$prefix}typeahead-active-bg-color: #{$df-typeahead-active-bg-color};
   --#{$prefix}typeahead-highlight-color: #{$df-typeahead-highlight-color};
+  --#{$prefix}typeahead-hover-highlight-color: #{$df-typeahead-hover-highlight-color};
   --#{$prefix}typeahead-highlight-font-family: #{$df-typeahead-highlight-font-family};
   --#{$prefix}typeahead-max-height: #{$df-typeahead-max-height};
   --#{$prefix}typeahead-highlight-font-weight: bold;
@@ -30,8 +31,8 @@ ngb-typeahead-window.dropdown-menu {
         background-color: var(--#{$prefix}typeahead-active-bg-color);
       }
 
-      *:not([class^='icon-']) {
-        text-decoration: underline;
+      .ngb-highlight {
+        color: var(--#{$prefix}typeahead-hover-highlight-color);
       }
     }
     .ngb-highlight {
@@ -39,7 +40,8 @@ ngb-typeahead-window.dropdown-menu {
       font-family: var(--#{$prefix}typeahead-highlight-font-family);
       font-weight: var(--#{$prefix}typeahead-highlight-font-weight);
     }
-    span[class^='icon-'] {
+    span[class^='icon-'],
+    span[class^='fa-'] {
       position: relative;
       top: 0.1rem;
     }

package/styles/scss/components/typeahead/_typeahead.variables.scss

@@ -6,5 +6,6 @@ $df-typeahead-hover-bg: $dropdown-link-hover-bg !default;
 $df-typeahead-active-color: color-contrast(color.adjust($df-typeahead-hover-bg, $lightness: -10%)) !default;
 $df-typeahead-active-bg-color: color.adjust($df-typeahead-hover-bg, $lightness: -10%) !default;
 $df-typeahead-highlight-color: shades-css-var('primary', 'bg-color') !default;
+$df-typeahead-hover-highlight-color: shades-css-var('primary', 'bg-hover-color') !default;
 $df-typeahead-highlight-font-family: $font-family-sans-serif !default;
 $df-typeahead-max-height: 240px !default;

package/styles/scss/components/waves/_waves.scss

@@ -0,0 +1,15 @@
+@use 'sass:list';
+.df-waves-of-progress-bg {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+
+  @each $name, $colors in $df-waves-color-variations {
+    $bg: list.nth($colors, 1);
+    $line: list.nth($colors, 2);
+    &.df-waves-#{$name} {
+      --#{$prefix}waves-of-progress-bg-color: #{$bg};
+      --#{$prefix}waves-of-progress-line-color: #{$line};
+    }
+  }
+}

package/styles/scss/components/waves/_waves.variables.scss

@@ -0,0 +1,86 @@
+$df-waves-color-variations: (
+  dark-sky: (
+    $blue-800,
+    $blue-400
+  ),
+  vivid-sky: (
+    $blue-400,
+    $blue-800
+  ),
+  light-sky: (
+    $blue-100,
+    $blue-800
+  ),
+  dark-crimson: (
+    $red-800,
+    $red-400
+  ),
+  vivid-crimson: (
+    $red-400,
+    $red-800
+  ),
+  light-crimson: (
+    $red-100,
+    $red-800
+  ),
+  dark-pumpkin: (
+    $orange-800,
+    $orange-400
+  ),
+  vivid-pumpkin: (
+    $orange-400,
+    $orange-800
+  ),
+  light-pumpkin: (
+    $orange-100,
+    $orange-800
+  ),
+  dark-forest: (
+    $green-800,
+    $green-400
+  ),
+  vivid-forest: (
+    $green-400,
+    $green-800
+  ),
+  light-forest: (
+    $green-100,
+    $green-800
+  ),
+  dark-canary: (
+    $yellow-800,
+    $yellow-400
+  ),
+  vivid-canary: (
+    $yellow-400,
+    $yellow-800
+  ),
+  light-canary: (
+    $yellow-100,
+    $yellow-800
+  ),
+  dark-fuchsia: (
+    $pink-800,
+    $pink-400
+  ),
+  vivid-fuchsia: (
+    $pink-400,
+    $pink-800
+  ),
+  light-fuchsia: (
+    $pink-100,
+    $pink-800
+  ),
+  dark-violet: (
+    $purple-800,
+    $purple-400
+  ),
+  vivid-violet: (
+    $purple-400,
+    $purple-800
+  ),
+  light-violet: (
+    $purple-100,
+    $purple-800
+  )
+) !default;

package/styles/scss/df-styles-namespace.scss

@@ -103,7 +103,7 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
 
   @import 'bootstrap/rtl-styles-override';
 
-  @import '@agnos-ui/style-bootstrap/scss/agnosui';
+  @import '@agnos-ui/core-bootstrap/scss/agnosui';
 
   -webkit-text-size-adjust: 100%; // 4
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6

package/styles/scss/df-styles.scss

@@ -57,6 +57,8 @@
 /** DESIGN FACTORY IMPORTS **/
 @import 'common';
 @import 'components/fonts/icon-font';
+@import 'components/fonts/font-awesome-icons';
+@import 'components/fonts/font-awesome-icons-brands';
 @import 'components/fonts/fonts';
 @import 'components/accordion/accordion';
 @import 'components/separator/separator';
@@ -101,10 +103,11 @@
 @import 'components/footer/footer';
 @import 'components/toast/toast';
 @import 'components/scrollspy/scrollspy';
+@import 'components/tooltip/tooltip';
 
 @import 'bootstrap/rtl-styles-override';
 
-@import '@agnos-ui/style-bootstrap/scss/agnosui';
+@import '@agnos-ui/core-bootstrap/scss/agnosui';
 // this css is needed when modal are open to have no scroll on the background.
 .df-modal-open {
   overflow: hidden;