@design-factory/design-factory 15.2.2 → 16.0.0

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

@@ -1,11 +1,12 @@
 @use 'sass:color';
+@use 'sass:map';
 
 @import '../button/button.utils';
 
 .toast {
   // DF CSS variables
-  --#{$prefix}toast-light-border-start-width: #{$df-toast-light-border-start-width};
-  --#{$prefix}toast-light-border-color-alpha: #{$df-toast-light-border-color-alpha};
+  --#{$prefix}toast-subtle-border-start-width: #{$df-toast-subtle-border-start-width};
+  --#{$prefix}toast-subtle-border-color-alpha: #{$df-toast-subtle-border-color-alpha};
   --#{$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};
@@ -14,27 +15,34 @@
   --#{$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-hover-color: #{rgba($color: $df-toast-btn-close-hover-color, $alpha: 0.2)};
   --#{$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-subtle-box-shadow-opacity: #{$df-toast-subtle-box-shadow-opacity};
+  --#{$prefix}toast-close-box-shadow-opacity: #{$df-toast-close-box-shadow-opacity};
 
   width: unset;
   max-width: var(--#{$prefix}toast-max-width);
   position: relative;
 
   &.df-toast-dismissible {
-    .toast-body, .toast-header {
+
+    .toast-body,
+    .toast-header {
       @include ltr {
         padding-right: var(--#{$prefix}toast-dismissible-padding-end);
       }
+
       @include rtl {
         padding-left: var(--#{$prefix}toast-dismissible-padding-end);
       }
     }
-    .toast-header + .toast-body {
+
+    .toast-header+.toast-body {
       @include ltr {
         padding-right: var(--#{$prefix}toast-padding-x);
       }
+
       @include rtl {
         padding-left: var(--#{$prefix}toast-padding-x);
       }
@@ -42,25 +50,31 @@
   }
 
 
-  &.df-toast-light {
+  &.df-toast-subtle {
     @include ltr {
-      border-left-width: var(--#{$prefix}toast-light-border-start-width);
+      border-left-width: var(--#{$prefix}toast-subtle-border-start-width);
     }
+
     @include rtl {
-      border-right-width: var(--#{$prefix}toast-light-border-start-width);
+      border-right-width: var(--#{$prefix}toast-subtle-border-start-width);
     }
   }
 
-  .toast-body, .toast-header {
+  .toast-body,
+  .toast-header {
     .btn-close {
+      color: var(--#{$prefix}toast-color);
       position: absolute;
       top: 0;
+
       @include ltr {
         right: 0;
       }
+
       @include rtl {
         left: 0;
       }
+
       z-index: $stretched-link-z-index + 1;
       border-radius: var(--#{$prefix}toast-btn-close-border-radius);
       border-width: var(--#{$prefix}toast-btn-close-border-width);
@@ -70,7 +84,7 @@
       height: var(--#{$prefix}toast-btn-close-size);
       opacity: 1;
 
-      &:hover { 
+      &:hover {
         background-color: var(--#{$prefix}toast-btn-close-hover-color);
       }
     }
@@ -96,93 +110,147 @@
     position: absolute;
     top: var(--#{$prefix}toast-icon-top);
     font-weight: var(--#{$prefix}toast-icon-font-weight);
+
     @include ltr {
       padding-left: var(--#{$prefix}toast-padding-x);
     }
+
     @include rtl {
       padding-right: var(--#{$prefix}toast-padding-x);
     }
   }
+
   &[dfInsertToastIcon] {
     div:first-of-type {
-      &.toast-body, &.toast-header {
+
+      &.toast-body,
+      &.toast-header {
         @include ltr {
           padding-left: calc(var(--#{$prefix}toast-icon-padding-start) + var(--#{$prefix}toast-padding-x));
         }
+
         @include rtl {
           padding-right: calc(var(--#{$prefix}toast-icon-padding-start) + var(--#{$prefix}toast-padding-x));
         }
       }
     }
   }
-}
-
-@each $state, $value in $theme-colors {
-  $toast-background: $value;
-  $toast-border: $value;
-  $toast-color: color-contrast($toast-background);
-  $toast-background-light: df-getBGColor(#{$state});
-  $toast-color-light: color-contrast($toast-background-light);
-
-  .toast-#{$state} {
-    // DF CSS Variable
-    --#{$prefix}toast-light-border-start-color: #{$toast-border};
-
-    --#{$prefix}toast-color: #{$toast-color};
-    --#{$prefix}toast-bg: #{$toast-background};
-    --#{$prefix}toast-border-color: #{$toast-border};
-    --#{$prefix}toast-header-bg: #{$toast-background};
-    --#{$prefix}toast-header-color: #{$toast-color};
-
-    @if $toast-color == $color-contrast-light or $toast-color == $white {
-      .btn-close {
-        filter: $btn-close-white-filter;
-      }
-    }
 
-    &.df-toast-light {
-      --#{$prefix}toast-bg: #{$toast-background-light};
-      --#{$prefix}toast-color: #{$toast-color-light};
-      --#{$prefix}toast-btn-close-hover-color: #{$df-toast-btn-close-hover-color};
-      --#{$prefix}toast-border-color: #{rgba(to-rgb($toast-border), var(--#{$prefix}toast-light-border-color-alpha))};
-
-      @include ltr {
-        border-left-color: var(--#{$prefix}toast-light-border-start-color);
-      }
-      @include rtl {
-        border-right-color: var(--#{$prefix}toast-light-border-start-color);
-      }
+  @each $state, $value in $theme-colors {
+    $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 {
+      $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');
+    $toast-icon-color: shades-css-var($state, 'border-color'); // todo add a icon color ?
+    $toast-text-color: shades-css-var($state, 'bg-color', true);
+    $toast-btn-close-color: map.get($shade-colors-text, $state + '-500');
+    $toast-subtle-bg-color: shades-css-var($state, 'bg-subtle-color');
+    $toast-subtle-text-color: shades-css-var($state, 'bg-subtle-color', true);
+    $toast-subtle-btn-close-color: map.get($shade-colors-text, $state + '-100');
+    $toast-subtle-hover-bg-color: shades-css-var($state, 'bg-subtle-hover-color');
+    $toast-subtle-active-bg-color: shades-css-var($state, 'bg-subtle-active-color');
+    $toast-subtle-border-color: shades-rgba-css-var-with-opacity($state, 'border-color');
+    $toast-subtle-border-start-color: shades-css-var($state, 'inert-color');
 
-      span.df-insert-icon {
-        color: $value;
-      }
+    &.toast-#{$state} {
+      // DF CSS Variable
+      --#{$prefix}toast-color: #{$toast-text-color};
+      --#{$prefix}toast-bg: #{$toast-bg};
+      --#{$prefix}toast-border-color: #{$toast-bg};
+      --#{$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 {
-        filter: none;
+        // 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))};
       }
 
       .toast-body {
         .btn.btn-link {
-          --#{$prefix}btn-color: var(--#{$prefix}link-color);
-          --#{$prefix}btn-hover-color: var(--#{$prefix}link-hover-color);
-          --#{$prefix}btn-bg: #{$toast-background-light};
-          --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix(color-contrast($primary), $primary, 15%))};
-          --#{$prefix}btn-active-color: var(--#{$prefix}link-color);
-          --#{$prefix}btn-hover-bg: #{$df-toast-btn-link-hover-color};
-          --#{$prefix}btn-active-bg: #{$df-toast-btn-link-hover-color};
+          // todo fix the focus link color
+          --#{$prefix}btn-color: #{$toast-text-color};
+          --#{$prefix}btn-hover-color: #{$toast-text-color};
+          --#{$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;
+          }
         }
       }
-    }
 
-    .toast-body {
-      .btn.btn-link {
-        --#{$prefix}btn-color: #{$toast-color};
-        --#{$prefix}btn-hover-color: #{$toast-color};
-        --#{$prefix}btn-bg: #{$toast-background};
-        --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($toast-color, $toast-background, 15%))};
-        --#{$prefix}btn-active-color: #{$toast-color};
-        --#{$prefix}btn-hover-bg: #{rgba($color: $df-toast-btn-link-hover-color, $alpha: 0.2)};
-        --#{$prefix}btn-active-bg: #{rgba($color: $df-toast-btn-link-hover-color, $alpha: 0.2)};
+      // Override toast light
+      &.df-toast-subtle {
+        // 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};
+
+        @include ltr {
+          border-left-color: var(--#{$prefix}toast-subtle-border-start-color);
+        }
+
+        @include rtl {
+          border-right-color: var(--#{$prefix}toast-subtle-border-start-color);
+        }
+
+        span.df-insert-icon {
+          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-bg: #{$toast-subtle-bg-color};
+            --#{$prefix}btn-active-color: var(--#{$prefix}link-color);
+            --#{$prefix}btn-hover-bg: #{$toast-subtle-hover-bg-color};
+            --#{$prefix}btn-active-bg: #{$toast-subtle-active-bg-color};
+            --#{$prefix}btn-focus-only-color: #{var(--#{$prefix}link-color)};
+            --#{$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 
+            }
+            &:focus {
+              box-shadow: $btn-focus-box-shadow;
+            }          }
+        }
       }
     }
   }

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

@@ -2,12 +2,12 @@
 
 $df-toast-insert-icon-space: 1.5rem !default;
 $df-toast-insert-icon-top: 1rem !default;
-$df-toast-light-border-start-width: $df-alert-size-default-border-left-width !default;
+$df-toast-subtle-border-start-width: $df-alert-size-default-border-start-width !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-hover-color: $df-btn-link-hover-bg-color !default;
-$df-toast-btn-link-hover-color: $df-toast-btn-close-hover-color !default;
-$df-toast-light-border-color-alpha: 0.4 !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;

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

@@ -1,87 +1,133 @@
 @use 'sass:math';
 
 .form-switch {
+  --#{$prefix}switch-height: #{math.div($form-switch-width, 2)};
+  --#{$prefix}switch-border-width: #{$df-switch-border-width};
+  --#{$prefix}switch-label-padding-start: #{$df-switch-label-padding-start};
+  --#{$prefix}switch-name-font-weight: #{$df-switch-name-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};
+  @if $enable-gradients {
+    --#{$prefix}switch-disabled-bg-image: #{escape-svg($df-switch-disabled-bg-image), var(--#{$prefix}gradient)};
+  } @else {
+    --#{$prefix}switch-disabled-bg-image: #{escape-svg($df-switch-disabled-bg-image)};
+  }
+  --#{$prefix}switch-disabled-inactive-background-color: #{$df-switch-disabled-inactive-background-color};
+  --#{$prefix}switch-disabled-inactive-border-color: #{$df-switch-disabled-inactive-border-color};
+  --#{$prefix}switch-disabled-cursor: #{$df-switch-disabled-cursor};
+  --#{$prefix}switch-rtl-checked-bg-position: #{$df-switch-rtl-checked-bg-position};
+  --#{$prefix}switch-rtl-bg-position: #{$df-switch-rtl-bg-position};
+  --#{$prefix}switch-name-padding-start: 0;
+  --#{$prefix}switch-padding-start: #{$form-switch-padding-start};
+  --#{$prefix}switch-input-padding-start: 0;
+
   display: flex;
   align-items: center;
 
-  .form-check-input {
-    height: math.div($form-switch-width, 2);
-    border-width: $df-switch-border-width;
-    @include rtl {
-      background-position: $df-switch-rtl-bg-position;
+  @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
+  }
+
+  @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')};
+      } @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')};
+      &:checked:not(.disabled):not([disabled]) {
+        background-color: var(--#{$prefix}switch-color);
+        border-color: var(--#{$prefix}switch-color);
+      }
+      .form-check-input {
+        &:focus {
+          box-shadow: #{$df-switch-box-shadow};
+        }
+      }
     }
+  }
 
-    &:checked {
+  &.form-check {
+    @include ltr { // override BS, there is no CSS var for this
+      padding-left: var(--#{$prefix}switch-padding-start);
+    }
+    @include rtl {
+      padding-right: var(--#{$prefix}switch-padding-start);
+    }
+    .form-check-input {
+      @include ltr {
+        margin-left: var(--#{$prefix}switch-input-padding-start);
+      }
       @include rtl {
-        background-position: $df-switch-rtl-checked-bg-position;
+        margin-right: var(--#{$prefix}switch-input-padding-start);
       }
     }
+  }
 
-    &.disabled,&[disabled] {
-      @if $enable-gradients {
-        background-image: escape-svg($df-switch-disabled-bg-image), var(--#{$variable-prefix}gradient);
-      } @else {
-        background-image: escape-svg($df-switch-disabled-bg-image);
+  .form-check-input {
+    &:focus {
+      &:not(:checked) {
+        @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+          --#{$prefix}box-shadow-color: #{$form-switch-color};
+        }
+      }
+      box-shadow: #{$df-switch-box-shadow};
+    }
+    height: var(--#{$prefix}switch-height);
+    border-width: var(--#{$prefix}switch-border-width);
+    @include rtl {
+      background-position: var(--#{$prefix}switch-rtl-bg-position);
+      &:checked {
+          background-position: var(--#{$prefix}switch-rtl-checked-bg-position);
       }
+    }
+
+    &.disabled,&[disabled] {
+      background-image: var(--#{$prefix}switch-disabled-bg-image);
       &:checked {
-        background-color: $df-switch-disabled-active-background-color;
-        border-color: $df-switch-disabled-active-border-color;
+        background-color: var(--#{$prefix}switch-disabled-active-bg-color);
+        border-color: var(--#{$prefix}switch-disabled-active-border-color);
       }
       &:not([checked]) {
-        background-color: $df-switch-disabled-inactive-background-color;
-        border-color: $df-switch-disabled-inactive-border-color;
+        background-color: var(--#{$prefix}switch-disabled-inactive-background-color);
+        border-color: var(--#{$prefix}switch-disabled-inactive-border-color);
       }
       ~ .form-check-label {
-        color: $df-switch-disabled-label-color;
-      }
-    }
-
-    @each $type, $color in $df-switch-additional-color-list {
-      &.df-switch-#{$type} {
-        &:focus {
-          box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width rgba($color, 0.25);
-        }
-        &:checked:not(.disabled):not([disabled]) {
-          background-color: $color;
-          border-color: $color;
-        }
+        color: var(--#{$prefix}switch-disabled-label-color);
       }
     }
   }
   .form-check-label {
     @include rtl {
-      padding-right: $df-switch-label-padding-start;
+      padding-right: var(--#{$prefix}switch-label-padding-start);
     }
     @include ltr {
-      padding-left: $df-switch-label-padding-start;
+      padding-left: var(--#{$prefix}switch-label-padding-start);
     }
   }
   .df-form-switch-name {
-    margin-left: $form-switch-padding-start * -1;
-    font-weight: $df-switch-label-name-font-weight;
+    font-weight: var(--#{$prefix}switch-name-font-weight);
     @include rtl {
-      padding-right: 0;
-      margin-right: $form-check-padding-start * -1;
+      padding-right: var(--#{$prefix}switch-name-padding-start);
     }
     @include ltr {
-      padding-left: 0;
+      padding-left: var(--#{$prefix}switch-name-padding-start);
     }
 
     &.df-form-switch-name-disabled {
-      color: $df-switch-disabled-label-color;
-      cursor: $df-switch-disabled-cursor;
+      color: var(--#{$prefix}switch-disabled-label-color);
+      cursor: var(--#{$prefix}switch-disabled-cursor);
     }
 
     .df-form-switch-container {
-      @include rtl {
-        margin-right: $form-check-padding-start;
-      }
       display: flex;
       align-items: center;
-      .form-check-input {
-        margin-left: 0;
-      }
       .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 {

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

@@ -2,16 +2,18 @@
 
 $df-switch-label-padding-start: .5em !default;
 $df-switch-border-width: 0.09375rem !default;
-$df-switch-label-name-font-weight: 500 !default;
+$df-switch-name-font-weight: 500 !default;
 $df-switch-additional-color-list: (
   'success': $brand-green
 ) !default;
-$df-switch-disabled-label-color: $gray-400 !default;
-$df-switch-disabled-active-background-color: $gray-200 !default;
+$df-switch-disabled-label-color: var(--#{$prefix}gray-400) !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;
 $df-switch-disabled-inactive-background-color: $white !default;
 $df-switch-disabled-inactive-border-color: $border-color !default;
-$df-switch-disabled-cursor: $df-disabled-cursor !default;
+$df-switch-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
 $df-switch-rtl-checked-bg-position: left center !default;
-$df-switch-rtl-bg-position: right center !default;
+$df-switch-rtl-bg-position: right center !default;
+$df-switch-box-shadow-opacity: $input-btn-focus-color-opacity !default;
+$df-switch-box-shadow: $form-check-input-focus-box-shadow !default;

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

@@ -1,10 +1,20 @@
 // stylelint-disable-next-line selector-type-no-unknown
+// Flag angular specific selectors
 ngb-typeahead-window.dropdown-menu {
+  --#{$prefix}typeahead-hover-color: #{$df-typeahead-hover-color};
+  --#{$prefix}typeahead-hover-bg: #{$df-typeahead-hover-bg};
+  --#{$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-highlight-font-family: #{$df-typeahead-highlight-font-family};
+  --#{$prefix}typeahead-max-height: #{$df-typeahead-max-height};
+  --#{$prefix}typeahead-highlight-font-weight: bold;
+
   box-shadow: $dropdown-box-shadow;
   border-style: none;
   max-width: 40rem;
   width: max-content;
-  max-height: $df-typeahead-max-height;
+  max-height: var(--#{$prefix}typeahead-max-height);
   overflow: auto;
   .dropdown-item {
     line-height: 1.75rem;
@@ -12,12 +22,12 @@ ngb-typeahead-window.dropdown-menu {
     cursor: pointer;
     // Hover of a typeahead item uses active state of the dropdown item
     &:not(:disabled):not(.disabled).active {
-      color: $df-typeahead-hover-color;
-      background-color: $df-typeahead-hover-bg;
+      color: var(--#{$prefix}typeahead-hover-color);
+      background-color: var(--#{$prefix}typeahead-hover-bg);
 
       &:active {
-        color: $df-typeahead-active-color;
-        background-color: $df-typeahead-active-bg-color;
+        color: var(--#{$prefix}typeahead-active-color);
+        background-color: var(--#{$prefix}typeahead-active-bg-color);
       }
 
       *:not([class^='icon-']) {
@@ -25,9 +35,9 @@ ngb-typeahead-window.dropdown-menu {
       }
     }
     .ngb-highlight {
-      color: $df-typeahead-highlight-color;
-      font-family: $df-typeahead-highlight-font-family;
-      font-weight: bold;
+      color: var(--#{$prefix}typeahead-highlight-color);
+      font-family: var(--#{$prefix}typeahead-highlight-font-family);
+      font-weight: var(--#{$prefix}typeahead-highlight-font-weight);
     }
     span[class^='icon-'] {
       position: relative;

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

@@ -5,6 +5,6 @@ $df-typeahead-hover-color: $dropdown-link-hover-color !default;
 $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: $primary !default;
+$df-typeahead-highlight-color: shades-css-var('primary', 'bg-color') !default;
 $df-typeahead-highlight-font-family: $font-family-sans-serif !default;
 $df-typeahead-max-height: 240px !default;

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

@@ -3,12 +3,14 @@
 @import 'bootstrap/scss/maps';
 @import 'bootstrap/scss/mixins';
 @import 'bootstrap/mixins-override';
-
 @import 'components/fonts/fonts-family';
 @import 'components/fonts/multi-lang.mixins';
 @import 'common.mixins';
 
 @import 'bootstrap/scss/root';
+@import 'common.root';
+@import 'components/fonts/fonts.root';
+@import 'components/inputs/inputs.root';
 
 $df-css-namespace-selector: '.design-factory-v2' !default;
 
@@ -52,6 +54,7 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
   @import 'bootstrap/utilities-override';
   @import 'bootstrap/scss/utilities/api';
 
+  /** DESIGN FACTORY IMPORTS **/
   @import 'common';
   @import 'components/accordion/accordion';
   @import 'components/fonts/icon-font';
@@ -87,19 +90,19 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
   @import 'components/collapse/collapse';
   @import 'components/progressbar/progressbar';
   @import 'components/spinner/spinner';
-  @import 'components/tooltip/tooltip';
   @import 'components/rating/rating';
   @import 'components/speechbubble/speechbubble';
   @import 'components/list/list';
   @import 'components/skip-links/skip-links';
   @import 'components/breadcrumbs/breadcrumbs';
+  @import 'components/stepper/stepper';
+  @import 'components/carousel/carousel';
   @import 'components/sidenav/sidenav';
   @import 'components/footer/footer';
   @import 'components/toast/toast';
 
   @import 'bootstrap/rtl-styles-override';
-  @import 'components/stepper/stepper';
-  @import 'components/carousel/carousel';
+
   -webkit-text-size-adjust: 100%; // 4
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
   margin: 0; // 1
@@ -145,16 +148,10 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
 @import 'components/spinner/spinner_container';
 @import 'components/button/button_container';
 @import 'components/pagination/pagination_container';
+@import 'components/brand-color/brand-color_container';
 /* stylelint-enable no-invalid-position-at-import-rule */
 
 // this css is needed when modal are open to have no scroll on the background.
 .df-modal-open {
   overflow: hidden;
 }
-
-// Generate breakpoint CSS variable to be used in media service
-:root {
-  @each $breakpoint, $value in $grid-breakpoints {
-    --#{$variable-prefix}breakpoint-#{$breakpoint}: #{$value};
-  }
-}