@design-factory/design-factory 17.1.0 → 18.0.1

package/styles/scss/components/media/_media.variables.scss

@@ -1,8 +1,16 @@
 $df-interactive-media-padding: 0 !default;
 $df-interactive-media-focused-background-color: $gray-50 !default;
+$df-interactive-media-focus-box-shadow: $df-focused-box-shadow !default; // this value is the default value in buttons.scss of bootstrap
+$df-interactive-media-focus-outline: 0 !default;
+$df-interactive-media-focus-box-shadow-color: inherit !default;
 $df-interactive-media-hover-background-color: $gray-100 !default;
 $df-interactive-media-background-color: $white !default;
-$df-interactive-media-hover-focus-text-decoration: underline !default;
-$df-media-mr: 1em !default;
-$df-media-margin-end: $df-media-mr !default;
 $df-interactive-media-color: shades-css-var('primary', 'bg-color') !default;
+$df-media-border-radius-sm: 0 !default;
+$df-media-border-radius: 0 !default;
+$df-media-border-radius-lg: 0 !default;
+$df-interactive-media-date-color: var(--#{$prefix}gray-600) !default;
+$df-interactive-media-heading-font-size-sm: 1.125rem !default;
+$df-interactive-media-heading-font-size: 1.25rem !default;
+$df-interactive-media-heading-font-size-lg: 1.5rem !default;
+$df-interactive-media-heading-margin-block: 0.25rem !default;

package/styles/scss/components/modal/_modal.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 
 .modal {
   --#{$prefix}modal-backdrop-opacity: #{$df-modal-backdrop-opacity};
@@ -16,7 +17,7 @@
 
   --#{$prefix}modal-header-button-active-bg: #{shades-css-var(secondary, 'bg-subtle-active-color')};
 
-  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
     --#{$prefix}modal-header-button-color-focus: #{shades-css-var(secondary, 'text-color')};
     --#{$prefix}modal-header-button-color-hover-focus: #{shades-css-var(secondary, 'text-hover-color')};
   } @else {
@@ -25,6 +26,7 @@
   }
 
   --#{$prefix}modal-header-button-active-color: #{shades-css-var(secondary, 'bg-active-color')};
+  --#{$prefix}modal-header-padding: #{$df-modal-header-padding};
 
   --#{$prefix}modal-body-padding-x: #{$df-modal-body-padding-x};
   --#{$prefix}modal-body-alert-icon-size: #{$df-modal-body-alert-icon-size};
@@ -36,7 +38,7 @@
   --#{$prefix}modal-xs-button-close-position-end: #{$df-modal-xs-button-close-position-end};
   --#{$prefix}modal-xs-footer-margin-top: #{$df-modal-xs-footer-margin-top};
   --#{$prefix}modal-last-paragraph-margin-bottom: #{$df-modal-last-paragraph-margin-bottom};
-  --#{$prefix}modal-footer-padding: #{map.get($spacers, 5) map.get($spacers, 6)};
+  --#{$prefix}modal-footer-padding: #{$df-modal-footer-padding};
 
   overflow-x: hidden;
   overflow-y: auto;
@@ -48,11 +50,13 @@
       border: var(--#{$prefix}modal-border);
 
       .modal-header {
-        padding: map.get($spacers, 4) map.get($spacers, 6);
+        padding: var(--#{$prefix}modal-header-padding);
         .modal-title {
           word-break: var(--#{$prefix}modal-header-title-break-word);
         }
         .btn-close {
+          --#{$prefix}btn-close-hover-opacity: #{$df-modal-btn-close-hover-opacity};
+          --#{$prefix}btn-close-opacity: #{$df-modal-btn-close-opacity};
           padding-top: var(--#{$prefix}modal-header-button-close-padding-y);
           padding-bottom: var(--#{$prefix}modal-header-button-close-padding-y);
           color: var(--#{$prefix}modal-header-icon-font-color);

package/styles/scss/components/modal/_modal.variables.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $df-modal-backdrop-opacity: 0.4 !default;
 $df-modal-box-shadow: var(--#{$prefix}box-shadow) !default;
 $df-modal-border-radius: $border-radius-lg !default;
@@ -6,6 +8,7 @@ $df-modal-border: $border-width solid $border-color !default;
 $df-modal-header-title-break-word: break-word !default;
 $df-modal-header-button-close-padding-y: 0.5rem !default;
 $df-modal-header-button-close-border-radius: $df-btn-icononly-border-radius !default;
+$df-modal-header-padding: map.get($spacers, 4) map.get($spacers, 6) !default;
 
 $df-modal-body-padding-x: 1.5rem !default;
 $df-modal-body-alert-icon-size: 1.75rem !default;
@@ -20,3 +23,6 @@ $df-modal-xs-button-close-position-end: $df-modal-xs-button-close-position-top !
 $df-modal-xs-footer-margin-top: 0.9375rem !default;
 
 $df-modal-last-paragraph-margin-bottom: 0 !default;
+$df-modal-footer-padding: map.get($spacers, 5) map.get($spacers, 6) !default;
+$df-modal-btn-close-opacity: 1 !default;
+$df-modal-btn-close-hover-opacity: 1 !default;

package/styles/scss/components/navbar/_navbar.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use 'sass:meta';
 // We could add this to allow people to get the superheader height from anywhere in the page.
 // .df-superheader {
 //   --#{$prefix}navbar-height: #{$df-navbar-superheader-height};
@@ -8,7 +10,7 @@
   .df-page-alert {
     --#{$prefix}navbar-height: #{$df-navbar-superheader-height};
   }
-} 
+}
 // CSS for nav
 .navbar {
   --#{$prefix}active-border-width: #{$df-active-border-width};
@@ -70,7 +72,7 @@
   // Is it still used ?
   --#{$prefix}navbar-nav-link-box-shadow-color-rgb: #{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 {
     --#{$prefix}inner-box-shadow-color: #{$body-bg};
     --#{$prefix}box-shadow-color: var(--#{$prefix}navbar-color);
   }
@@ -107,7 +109,7 @@
     width: var(--#{$prefix}navbar-toggle-icon-width);
     height: var(--#{$prefix}navbar-toggle-icon-height);
   }
-  
+
   .navbar-brand {
     position: relative;
     display: flex;
@@ -128,7 +130,9 @@
   @each $color, $value in $utilities-bg {
     &.bg-#{$color} {
       $colorvalue: color-contrast(from-rgb($value));
-      --#{$prefix}navbar-toggler-icon-bg: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$colorvalue}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>"))};
+      --#{$prefix}navbar-toggler-icon-bg: #{escape-svg(
+          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$colorvalue}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>")
+        )};
       $text-color: shades-css-var($color, 'bg-color', true);
       $text-hover-color: shades-css-var($color, 'bg-hover-color', true);
       $text-active-color: shades-css-var($color, 'bg-active-color', true);
@@ -144,9 +148,12 @@
       // TODo check if still needed
       --#{$prefix}navbar-nav-link-box-shadow-color-rgb: #{shades-rgb-css-var($color, 'bg-color')};
       --#{$prefix}navbar-light-toggler-hover-bg: #{shades-css-var($color, 'bg-subtle-hover-color')};
-      --#{$prefix}navbar-nav-link-bg-hover-color: #{shades-css-var($color, 'bg-hover-color')}; // custom this with 2 shades le
+      --#{$prefix}navbar-nav-link-bg-hover-color: #{shades-css-var(
+          $color,
+          'bg-hover-color'
+        )}; // custom this with 2 shades le
       // plus add the color of the text plus the color of the focus
-      @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
         --#{$prefix}inner-box-shadow-color: #{shades-css-var($color, 'bg-color')};
         --#{$prefix}box-shadow-color: var(--#{$prefix}navbar-color);
       } @else {
@@ -168,7 +175,7 @@
       // }
       .navbar-toggler {
         &:focus {
-          @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+          @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
             --#{$prefix}inner-box-shadow-color: #{shades-css-var($color, 'bg-color')};
             --#{$prefix}box-shadow-color: var(--#{$prefix}navbar-color);
           } @else {
@@ -180,7 +187,7 @@
           background-color: #{shades-css-var($color, 'bg-hover-color')};
           &:focus {
             // verify the bg color change
-            @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+            @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
               --#{$prefix}inner-box-shadow-color: #{shades-css-var($color, 'bg-hover-color')};
               --#{$prefix}box-shadow-color: var(--#{$prefix}navbar-hover-color);
               --#{$prefix}navbar-toggle-box-shadow: #{$df-navbar-toggle-focused-box-shadow};
@@ -206,13 +213,13 @@
       // added to be put to default
       border-color: var(--#{$prefix}navbar-nav-link-border-color);
       box-shadow: none;
-    
+
       &:focus {
         // add
         color: var(--#{$prefix}navbar-nav-link-focus-color); // override
         background: var(--#{$prefix}navbar-nav-link-bg-focus-color); // add
         &:before {
-          content: "";
+          content: '';
           position: absolute;
           top: 0;
           bottom: 0;
@@ -230,7 +237,7 @@
         &:focus {
           //add
           color: var(--#{$prefix}navbar-hover-color); //override
-          @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+          @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
             --#{$prefix}box-shadow-color: var(--#{$prefix}navbar-hover-color);
             --#{$prefix}inner-box-shadow-color: var(--#{$prefix}navbar-nav-link-bg-hover-color);
             --#{$prefix}navbar-nav-link-box-shadow: #{$df-navbar-nav-link-box-shadow};
@@ -296,7 +303,7 @@
 // where your navbar collapses.
 .navbar-expand {
   // override
-  @each $breakpoint in map-keys($grid-breakpoints) {
+  @each $breakpoint in map.keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
     $infix: breakpoint-infix($next, $grid-breakpoints);
 
@@ -310,7 +317,7 @@
               left: calc(var(--#{$prefix}active-border-width));
             }
             &:after {
-              content: "";
+              content: '';
               position: absolute;
               top: 0;
               bottom: 0;
@@ -363,7 +370,7 @@
               }
             }
             &:after {
-              content: "";
+              content: '';
               position: absolute;
               top: 0;
               bottom: 0;
@@ -375,7 +382,7 @@
         }
 
         .navbar-collapse.d {
-          @each $breakpoint2 in map-keys($grid-breakpoints) {
+          @each $breakpoint2 in map.keys($grid-breakpoints) {
             $next2: breakpoint-next($breakpoint2, $grid-breakpoints);
             $infix2: breakpoint-infix($next2, $grid-breakpoints);
             &#{$infix2}-none {
@@ -388,7 +395,6 @@
   }
 }
 
-
 // fix to remove 1px indentation below the white border in the navbar header
 @include media-breakpoint-up(lg) {
   .navbar-brand,

package/styles/scss/components/pagination/_pagination.scss

@@ -1,5 +1,13 @@
+@use 'sass:meta';
+
 @mixin replace-span-innertext-with-icon($iconContent) {
   .page-link[aria-label] {
+    // TODO: remove the condition during DEZFACT-1675
+    @if ($iconContent == $df-pagination-first-icon-code or $iconContent == $df-pagination-last-icon-code) {
+      @extend %df-icon-style;
+    } @else {
+      font-family: $df-font-awesome-font-family;
+    }
     span:after {
       content: $iconContent;
     }
@@ -8,7 +16,7 @@
 
 .pagination {
   --#{$prefix}pagination-size: #{$df-pagination-size-base};
-  --#{$prefix}pagination-item-border-radius: #{$df-pagination-border-radius-base};
+  --#{$prefix}pagination-item-border-radius: #{$df-pagination-border-radius};
   --#{$prefix}pagination-item-font-size: #{$font-size-base};
   --#{$prefix}pagination-icon-offset-start: #{$df-pagination-icon-offset-start-base};
   --#{$prefix}pagination-icon-translateX-offset: #{$df-pagination-icon-translateX-offset};
@@ -17,10 +25,13 @@
   --#{$prefix}pagination-direction-border-radius: #{$df-pagination-direction-border-radius};
   --#{$prefix}pagination-margin-bottom: #{$df-pagination-margin-bottom};
   --#{$prefix}pagination-icon-color: #{$df-pagination-icon-color};
-  
+  --#{$prefix}pagination-icon-hover-color: #{$df-pagination-icon-hover-color};
+  --#{$prefix}box-shadow-color: #{$df-pagination-box-shadow-color};
+  --#{$prefix}pagination-active-link-bg: #{$df-pagination-active-link-bg};
+
   margin-bottom: var(--#{$prefix}pagination-margin-bottom);
   .page-item {
-    @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
       &.active > .page-link {
         &:hover {
           background-color: var(--#{$prefix}pagination-hover-bg);
@@ -39,7 +50,10 @@
       margin: 0 0.0625rem; // 0.0625rem = 1px with font-size=16
       &:hover {
         z-index: 1;
-        text-decoration: underline;
+        text-decoration: $df-pagination-hover-text-decoration;
+      }
+      &:active {
+        --#{$prefix}pagination-hover-bg: var(--#{$prefix}pagination-active-link-bg);
       }
       &:focus {
         z-index: 2;
@@ -59,11 +73,14 @@
         text-decoration: none;
         &:after {
           color: var(--#{$prefix}pagination-icon-color);
-          @extend %df-icon-style;
           position: absolute;
-          font-size: var(--#{$prefix}pagination-item-font-size) !important; // needs to override the styles of @extend %df-icon-style;
+          font-size: var(
+            --#{$prefix}pagination-item-font-size
+          ) !important; // needs to override the styles of @extend %df-icon-style;
           @include ltr {
-            left: var(--#{$prefix}pagination-icon-offset-start) !important; // needs to override the styles of @extend %df-icon-style;
+            left: var(
+              --#{$prefix}pagination-icon-offset-start
+            ) !important; // needs to override the styles of @extend %df-icon-style;
             transform: translateX(var(--#{$prefix}pagination-icon-translateX-offset));
           }
           @include rtl {
@@ -76,7 +93,8 @@
       }
       &:hover {
         span:after {
-          text-decoration: underline;
+          color: var(--#{$prefix}pagination-icon-hover-color);
+          text-decoration: $df-pagination-hover-text-decoration;
         }
       }
     }

package/styles/scss/components/pagination/_pagination.variables.scss

@@ -2,19 +2,26 @@ $df-pagination-size-base: 2.25rem !default;
 $df-pagination-size-sm: 1.75rem !default;
 $df-pagination-size-lg: 3rem !default;
 
-$df-pagination-border-radius-base: 0.175rem !default;
-$df-pagination-border-radius-sm: 0.15rem !default;
-$df-pagination-border-radius-lg: 0.2rem !default;
+$df-pagination-hover-text-decoration: underline !default;
+$df-pagination-active-link-bg: var(--#{$prefix}pagination-hover-bg) !default;
+
+$df-pagination-border-radius: $pagination-border-radius !default;
+$df-pagination-border-radius-sm: $pagination-border-radius-sm !default;
+$df-pagination-border-radius-lg: $pagination-border-radius-lg !default;
+
+$df-pagination-box-shadow-color: $pagination-focus-box-shadow !default;
+$df-pagination-boundaries-focus-box-shadow: $pagination-focus-box-shadow !default;
 
 $df-pagination-icon-offset-start-base: 50% !default;
 $df-pagination-icon-offset-start-lg: $df-pagination-icon-offset-start-base !default;
 $df-pagination-icon-offset-start-sm: $df-pagination-icon-offset-start-base !default;
 $df-pagination-icon-color: $df-font-icon-color !default;
+$df-pagination-icon-hover-color: $df-font-icon-color !default;
 $df-pagination-icon-translateX-offset: -$df-pagination-icon-offset-start-base !default;
 
 $df-pagination-first-icon-code: '\ef22' !default; // .icon-df-first-item
-$df-pagination-previous-icon-code: '\ea32' !default; // .icon-chevron-left
-$df-pagination-next-icon-code: '\ea33' !default; // .icon-chevron-right
+$df-pagination-previous-icon-code: '\f053' !default; // .fa-chevron-left
+$df-pagination-next-icon-code: '\f054' !default; // .fa-chevron-right
 $df-pagination-last-icon-code: '\ef23' !default; // .icon-df-last-item
 
 $df-pagination-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;

package/styles/scss/components/popover/_popover.mixin.scss

@@ -33,6 +33,7 @@
     --#{$prefix}popover-header-font-size: #{$h4-font-size};
     --#{$prefix}popover-body-font-size: #{$font-size-sm};
     --#{$prefix}popover-body-margin: #{$df-popover-body-sm-margin};
+    --#{$prefix}popover-border-radius: var(--#{$prefix}popover-border-radius-sm);
   }
   &.popover-lg {
     --#{$prefix}popover-padding: #{$df-popover-lg-padding};
@@ -40,5 +41,6 @@
     --#{$prefix}popover-header-font-size: #{$h2-font-size};
     --#{$prefix}popover-body-font-size: #{$font-size-lg};
     --#{$prefix}popover-body-margin: #{$df-popover-body-lg-margin};
+    --#{$prefix}popover-border-radius: var(--#{$prefix}popover-border-radius-lg);
   }
 }

package/styles/scss/components/popover/_popover.scss

@@ -8,6 +8,8 @@
   --#{$prefix}popover-body-margin: #{$df-popover-body-default-margin};
   --#{$prefix}popover-header-font-size: #{$h3-font-size};
   --#{$prefix}popover-body-font-size: #{$font-size-base};
+  --#{$prefix}popover-border-radius-sm: #{$df-popover-border-radius-sm};
+  --#{$prefix}popover-border-radius-lg: #{$df-popover-border-radius-lg};
 
   @include popover-mixin();
 }

package/styles/scss/components/popover/_popover.variables.scss

@@ -16,3 +16,6 @@ $df-popover-body-default-margin: 0 !default;
 
 $df-popover-header-lg-margin: 0 0 1rem !default;
 $df-popover-body-lg-margin: 0 !default;
+
+$df-popover-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$df-popover-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;

package/styles/scss/components/radio/_radio.scss

@@ -1,3 +1,5 @@
+@use 'sass:meta';
+
 div[role='radiogroup'] {
   --#{$prefix}radiogroup-legend-margin-bottom: #{$df-radiogroup-legend-margin-bottom};
   --#{$prefix}radiogroup-font-size: #{$df-fieldset-legend-font-size};
@@ -13,9 +15,9 @@ div[role='radiogroup'] {
   --#{$prefix}form-check-radio-checked-disabled-bg-image: #{escape-svg($df-form-check-radio-checked-disabled-bg-image)};
   .form-check-input {
     &:checked {
-      &[type="radio"] {
+      &[type='radio'] {
         background-color: var(--#{$prefix}form-check-radio-checked-bg-color);
-  
+
         &.disabled,
         &[disabled] {
           @if $enable-gradients {
@@ -26,5 +28,16 @@ div[role='radiogroup'] {
         }
       }
     }
+
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      &[type='radio'] {
+        &:not(:checked):not(.is-invalid):focus {
+          --#{$prefix}box-shadow-color: #{$input-border-color};
+        }
+        &:disabled:checked {
+          background-color: var(--#{$prefix}checkbox-disabled-border-color);
+        }
+      }
+    }
   }
 }

package/styles/scss/components/scrollspy/_scrollspy.scss

@@ -1,51 +1,78 @@
 .df-icon-inlink {
-    text-decoration: none;
-    display: inline-block;
+  text-decoration: none;
+  display: inline-block;
 }
 
 // Todo should we wrap this into a class specific for scrollspy ?
 .nav.nav-pills .nav-link {
-    --#{$prefix}scrollspy-navpill-border-width: #{$df-scrollspy-navpill-border-width};
-    --#{$prefix}scrollspy-navpill-border-left: #{$df-scrollspy-navpill-border-left};
-    --#{$prefix}scrollspy-navpill-active-border-left: #{$df-scrollspy-navpill-active-border-left};
-    --#{$prefix}scrollspy-navpill-hover-text-decoration: #{$df-scrollspy-navpill-hover-text-decoration};
-    --#{$prefix}scrollspy-navpill-active-font-weight: #{$df-scrollspy-navpill-active-font-weight};
-    --#{$prefix}scrollspy-color: #{$df-scrollspy-color};
-    --#{$prefix}scrollspy-active-color: #{$df-scrollspy-active-color};
-    --#{$prefix}scrollspy-font-size: #{$df-scrollspy-font-size};
-    --#{$prefix}scrollspy-padding-y: #{$df-scrollspy-padding-y};
-    --#{$prefix}scrollspy-padding-x: #{$df-scrollspy-padding-x};
-    --#{$prefix}scrollspy-active-padding-x: #{$df-scrollspy-active-padding-x};
-    border-left: var(--#{$prefix}scrollspy-navpill-border-left);
-    color: var(--#{$prefix}scrollspy-color);
-    padding-top: var(--#{$prefix}scrollspy-padding-y);
-    padding-bottom: var(--#{$prefix}scrollspy-padding-y);
-    @include ltr {
-        padding-left: var(--#{$prefix}scrollspy-padding-x);
+  --#{$prefix}scrollspy-navpill-border-width: #{$df-scrollspy-border-width}; // used only for old branding
+  --#{$prefix}scrollspy-navpill-border-left: #{$df-scrollspy-border-left};
+  --#{$prefix}scrollspy-navpill-active-border-left: #{$df-scrollspy-active-border-left};
+  --#{$prefix}scrollspy-navpill-hover-text-decoration: #{$df-scrollspy-hover-text-decoration};
+  --#{$prefix}scrollspy-navpill-hover-bg: #{$df-scrollspy-hover-bg};
+  --#{$prefix}scrollspy-navpill-hover-active-font-weight: #{$df-scrollspy-hover-active-font-weight};
+  --#{$prefix}scrollspy-navpill-active-font-weight: #{$df-scrollspy-active-font-weight};
+  --#{$prefix}scrollspy-color: #{$df-scrollspy-color};
+  --#{$prefix}scrollspy-active-color: #{$df-scrollspy-active-color};
+  --#{$prefix}scrollspy-font-size: #{$df-scrollspy-font-size};
+  --#{$prefix}scrollspy-padding-y: #{$df-scrollspy-padding-y};
+  --#{$prefix}scrollspy-padding-x: #{$df-scrollspy-padding-x};
+  --#{$prefix}scrollspy-active-padding-x: #{$df-scrollspy-active-padding-x};
+  --#{$prefix}scrollspy-margin-left: #{$df-scrollspy-margin-left};
+  --#{$prefix}scrollspy-active-margin-left: #{$df-scrollspy-active-margin-left};
+  color: var(--#{$prefix}scrollspy-color);
+  padding-top: var(--#{$prefix}scrollspy-padding-y);
+  padding-bottom: var(--#{$prefix}scrollspy-padding-y);
+  padding-inline-start: var(--#{$prefix}scrollspy-padding-x); // can be removed when we remove old branding
+  margin-block-end: $df-scrollspy-margin-y;
+  font-size: var(--#{$prefix}scrollspy-font-size);
+  // used in old branding to align non active scrollspy elements with the active one
+  // we are using margin-left and border-left because the scrollbar is on the left even in rtl
+  margin-left: var(--#{$prefix}scrollspy-margin-left);
+  border-left: var(--#{$prefix}scrollspy-navpill-border-left);
+  //used when not active for old branding for the border-left to imitate a scrollbar
+  border-width: var(--#{$prefix}scrollspy-navpill-border-width);
+
+  &.active {
+    .df-icon-inlink {
+      color: $df-scrollspy-icon-active-color !important;
     }
-    @include rtl {
-        padding-right: var(--#{$prefix}scrollspy-padding-x);
+
+    color: var(--#{$prefix}scrollspy-active-color);
+    font-weight: var(--#{$prefix}scrollspy-navpill-active-font-weight);
+    border-left: var(--#{$prefix}scrollspy-navpill-active-border-left); // can be removed when we remove old branding
+    margin-left: var(--#{$prefix}scrollspy-active-margin-left); // can be removed when we remove old branding
+    padding-inline-start: var(--#{$prefix}scrollspy-active-padding-x); // can be removed when we remove old branding
+  }
+
+  &:hover {
+    .df-icon-inlink {
+      color: $df-scrollspy-icon-active-color !important;
     }
-    font-size: var(--#{$prefix}scrollspy-font-size);
-    margin-left: 1px;
-    border-width: 1px;
+
+    --#{$prefix}inner-box-shadow-color: var(--#{$prefix}scrollspy-navpill-hover-bg);
+    text-decoration: var(--#{$prefix}scrollspy-navpill-hover-text-decoration);
+    background-color: var(--#{$prefix}scrollspy-navpill-hover-bg);
+
     &.active {
-        color: var(--#{$prefix}scrollspy-active-color);
-        font-weight: var(--#{$prefix}scrollspy-navpill-active-font-weight);
-        border-left: var(--#{$prefix}scrollspy-navpill-active-border-left);
-        margin-left: 0px;
-        @include ltr {
-            padding-left: var(--#{$prefix}scrollspy-active-padding-x);
-        }
-        @include rtl {
-            padding-right: var(--#{$prefix}scrollspy-active-padding-x);
-        }
-    }
-    &:hover {
-        text-decoration: var(--#{$prefix}scrollspy-navpill-hover-text-decoration);
+      font-weight: var(--#{$prefix}scrollspy-navpill-hover-active-font-weight);
     }
-    &:focus {
-        outline: 0;
-        box-shadow: $df-focused-inset-box-shadow;
+  }
+
+  &:focus,
+  &:focus-visible {
+    // we are using this new scss var and not --#{$prefix}scrollspy-color because it will impact the old branding
+    --#{$prefix}box-shadow-color: #{$df-scrollspy-focus-box-shadow-color};
+
+    &.active {
+      --#{$prefix}inner-box-shadow-color: #{$df-scrollspy-focus-active-inner-box-shadow};
+
+      &:hover {
+        --#{$prefix}inner-box-shadow-color: #{$df-scrollspy-focus-active-hover-inner-box-shadow};
+      }
     }
-}
+
+    outline: 0;
+    box-shadow: $df-focused-inset-box-shadow;
+  }
+}

package/styles/scss/components/scrollspy/_scrollspy.variables.scss

@@ -1,12 +1,23 @@
-$df-scrollspy-navpill-border-width: 3px !default;
-$df-scrollspy-navpill-border-left: $df-scrollspy-navpill-border-width solid $gray-200 !default;
-$df-scrollspy-navpill-active-border-left: $df-scrollspy-navpill-border-width solid shades-css-var('primary', 'border-color') !default;
-$df-scrollspy-navpill-hover-text-decoration: underline !default;
-$df-scrollspy-navpill-active-font-weight: $font-weight-semibold !default;
+$df-scrollspy-border-width: 1px !default;
+$df-scrollspy-active-border-width: 3px !default;
+//we are using the active border width to align with active elements
+$df-scrollspy-border-left: $df-scrollspy-active-border-width solid $gray-200 !default;
+$df-scrollspy-active-border-left: $df-scrollspy-active-border-width solid shades-css-var('primary', 'border-color') !default;
+$df-scrollspy-hover-text-decoration: underline !default;
+$df-scrollspy-active-font-weight: $font-weight-semibold !default;
 $df-scrollspy-color: $body-color !default;
 $df-scrollspy-active-color: shades-css-var('primary', 'text-color') !default;
 $df-scrollspy-font-size: $font-size-sm !default;
 $df-scrollspy-padding-y: calc(var(--#{$prefix}nav-link-padding-y) * 0.5625) !default;
 $df-scrollspy-padding-x: calc(var(--#{$prefix}nav-link-padding-x) + 1px) !default;
+$df-scrollspy-margin-y: 0 !default;
 $df-scrollspy-active-padding-x: var(--#{$prefix}nav-link-padding-x) !default;
-
+$df-scrollspy-focus-active-inner-box-shadow: unset !default;
+$df-scrollspy-focus-active-hover-inner-box-shadow: unset !default;
+$df-scrollspy-focus-box-shadow-color: unset !default;
+$df-scrollspy-hover-bg: unset !default;
+$df-scrollspy-hover-active-font-weight: unset !default;
+$df-scrollspy-icon-active-color: unset !default;
+$df-scrollspy-margin-left: 1px !default;
+$df-scrollspy-active-margin-left: 0 !default;
+$df-scrollspy-default-border-width: 1px !default;

package/styles/scss/components/select/_select.scss

@@ -1,4 +1,6 @@
 @use 'sass:map';
+@use 'sass:meta';
+@use 'sass:selector';
 
 .form-select,
 .ng-select {
@@ -14,7 +16,7 @@
   @each $state, $data in $form-validation-states {
     &.is-#{$state} {
       $colorName: map.get($df-form-validation-states-names, $state);
-      @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
         --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'border-color')};
       } @else {
         --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
@@ -67,7 +69,7 @@
 
 // TODO rtl feature see ng-select new theme
 @mixin ngs-root($child) {
-  @at-root #{selector-replace(&, ".ng-select", ".ng-select" + $child)} {
+  @at-root #{selector.replace(&, '.ng-select', '.ng-select' + $child)} {
     @content;
   }
 }
@@ -90,7 +92,7 @@
 %df-select-caret-down {
   color: var(--#{$prefix}select-icon-color);
   speak: none;
-  font-family: var(--#{$prefix}select-icon-font-family);
+  font-family: $df-select-icon-font-family;
   content: $df-select-icon-caret-down;
   font-weight: var(--#{$prefix}select-icon-solid-font-weight);
   font-size: var(--#{$prefix}select-icon-font-size);
@@ -151,7 +153,6 @@
   --#{$prefix}select-single-optionselected-color: #{$df-select-single-optionselected-color};
   --#{$prefix}select-icon-solid-font-weight: #{$df-select-icon-solid-font-weight};
   --#{$prefix}select-icon-font-size: #{$df-select-icon-font-size};
-  --#{$prefix}select-icon-font-family: #{$df-select-icon-font-family};
   --#{$prefix}select-input-font-weight: #{$df-select-input-font-weight};
   --#{$prefix}select-spinner-loader-border-left: #{$df-select-spinner-loader-border-left};
   --#{$prefix}select-value-disabled-bg-color: #{$df-select-value-disabled-bg-color};
@@ -173,7 +174,7 @@
   --#{$prefix}select-form-check-padding-bottom: #{$df-select-form-check-padding-bottom};
   --#{$prefix}select-option-lg-height: #{$df-select-option-lg-height};
   --#{$prefix}select-option-sm-height: #{$df-select-option-sm-height};
-  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
     --#{$prefix}box-shadow-color: #{$input-focus-border-color};
   } @else {
     --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
@@ -304,7 +305,7 @@
   @each $state, $data in $form-validation-states {
     &.is-#{$state} {
       $colorName: map.get($df-form-validation-states-names, $state);
-      @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
         --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'border-color')};
       } @else {
         --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
@@ -542,7 +543,7 @@
     &:after {
       //add
       content: $df-focused-cross-icon;
-      font-family: var(--#{$prefix}font-family);
+      font-family: $df-font-awesome-font-family;
       font-size: var(--#{$prefix}focused-cross-font-size); // TODO does it need to be changed for sm and lg?
       border-radius: var(--#{$prefix}focused-cross-border-radius);
       display: var(--#{$prefix}select-clear-button-display);
@@ -619,6 +620,7 @@
     border: var(--#{$prefix}select-panel-border); // override
     border-radius: var(--#{$prefix}select-panel-border-radius); // add
     box-shadow: var(--#{$prefix}select-panel-box-shadow); // override
+    overflow: auto;
     width: initial; // override
     min-width: var(--#{$prefix}select-panel-min-width); // add
     .ng-option + .ng-optgroup {