@design-factory/styles 21.0.0-next.0 → 21.0.0

package/scss/components/list-group/_list-group.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 .list-group-item {
   &.disabled,
@@ -15,10 +15,6 @@
       // Override the default link behavior
       border-color: var(--df-list-group-border-color);
 
-      .df-skip-links &:not(:hover) {
-        background-color: var(--df-color-inert-neutral-main-background);
-      }
-
       &:focus-visible {
         --df-box-shadow-color: var(--df-list-group-active-color);
         box-shadow: df.$df-focus-inset-box-shadow;
@@ -57,6 +53,10 @@
   }
 }
 
+.df-skip-links .list-group-item.list-group-item-action:not(.disabled):not([disabled]):not(:hover):not(.active) {
+  background-color: var(--df-color-inert-neutral-main-background);
+}
+
 .list-group {
   $sizes: (
     'sm': (

package/scss/components/media/_media.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 .df-media-button-interactive {
   box-shadow: none;

package/scss/components/modal/_modal.namespace.scss

@@ -0,0 +1,13 @@
+#{$df-css-namespace-selector} {
+  // Re-write of the modal transitions, from bootstrap _modal.scss
+  .modal.fade .modal-dialog {
+    transform: $modal-fade-transform;
+    @include transition($modal-transition);
+  }
+  .modal.show .modal-dialog {
+    transform: $modal-show-transform;
+  }
+  .modal.modal-static .modal-dialog {
+    transform: $modal-scale-transform;
+  }
+}

package/scss/components/modal/_modal.scss

@@ -1,7 +1,11 @@
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 .modal-content {
   box-shadow: #{df.$df-box-shadow};
+
+  .btn {
+    --df-inner-box-shadow-color: var(--df-color-inert-neutral-main-background);
+  }
 }
 
 .modal-header {
@@ -44,6 +48,7 @@
 
     &:focus-visible {
       --df-box-shadow-color: var(--df-button-text-basic-color-neutral-default-foreground);
+      --df-inner-box-shadow-color: var(--df-color-inert-neutral-main-background);
       box-shadow: #{df.$df-focus-box-shadow};
     }
 

package/scss/components/navbar/_navbar.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 @use 'navbar.mixins' as navbar-mixins;
 
 .navbar {
@@ -107,7 +107,8 @@
       padding: calc((3.5rem - var(--df-typo-sizing-default) * $line-height-base) / 2) var(--df-spacing-5);
       outline: none;
       position: relative;
-      box-shadow: none;
+      // important needed to override bootstrap focus style for buttons with :first-child
+      box-shadow: none !important;
 
       &:focus-visible {
         &:before {

package/scss/components/pagination/_pagination.namespace.scss

@@ -0,0 +1,15 @@
+#{$df-css-namespace-selector} {
+  // Re-write of the page-link utility, from bootstrap _pagination.scss
+  .active > .page-link {
+    z-index: 3;
+    color: var(--df-pagination-active-color);
+    background-color: var(--#{$prefix}pagination-active-bg);
+    border-color: var(--df-pagination-active-border-color);
+  }
+  .disabled > .page-link {
+    color: var(--df-pagination-disabled-color);
+    pointer-events: none;
+    background-color: var(--df-pagination-disabled-bg);
+    border-color: var(--df-pagination-disabled-border-color);
+  }
+}

package/scss/components/pagination/_pagination.scss

@@ -1,11 +1,9 @@
 @use 'pagination.mixins' as pagination-mixins;
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 .pagination {
-  $df-pagination-first-icon-code: '\f323'; // .fa-chevrons-left
   $df-pagination-previous-icon-code: '\f053'; // .fa-chevron-left
   $df-pagination-next-icon-code: '\f054'; // .fa-chevron-right
-  $df-pagination-last-icon-code: '\f324'; // .fa-chevrons-right
 
   margin-bottom: 0; // reset the ul margin.
   align-items: center;
@@ -146,44 +144,47 @@
       calc(1.75rem + 2px)
     );
   }
+}
 
-  // TODO: Second Part
-  // second case: boundaryLinks = true
-  .with-boundary-links & {
-    .page-item:nth-of-type(1) {
-      @include ltr {
-        @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-first-icon-code);
-      }
-      @include rtl {
-        @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-last-icon-code);
-      }
+.with-boundary-links .pagination {
+  $df-pagination-first-icon-code: '\f323'; // .fa-chevrons-left
+  $df-pagination-last-icon-code: '\f324'; // .fa-chevrons-right
+  $df-pagination-previous-icon-code: '\f053'; // .fa-chevron-left
+  $df-pagination-next-icon-code: '\f054'; // .fa-chevron-right
+
+  .page-item:nth-of-type(1) {
+    @include ltr {
+      @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-first-icon-code);
     }
+    @include rtl {
+      @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-last-icon-code);
+    }
+  }
 
-    .page-item:nth-of-type(2) {
-      @include ltr {
-        @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-previous-icon-code);
-      }
-      @include rtl {
-        @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-next-icon-code);
-      }
+  .page-item:nth-of-type(2) {
+    @include ltr {
+      @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-previous-icon-code);
     }
+    @include rtl {
+      @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-next-icon-code);
+    }
+  }
 
-    .page-item:nth-last-of-type(2) {
-      @include ltr {
-        @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-next-icon-code);
-      }
-      @include rtl {
-        @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-previous-icon-code);
-      }
+  .page-item:nth-last-of-type(2) {
+    @include ltr {
+      @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-next-icon-code);
     }
+    @include rtl {
+      @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-previous-icon-code);
+    }
+  }
 
-    .page-item:nth-last-of-type(1) {
-      @include ltr {
-        @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-last-icon-code);
-      }
-      @include rtl {
-        @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-first-icon-code);
-      }
+  .page-item:nth-last-of-type(1) {
+    @include ltr {
+      @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-last-icon-code);
+    }
+    @include rtl {
+      @include pagination-mixins.replace-span-innertext-with-icon($df-pagination-first-icon-code);
     }
   }
 }

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

@@ -8,13 +8,13 @@ $pagination-padding-x-lg: var(--df-spacing-3) !default;
 $pagination-bg: var(--df-color-neutral-alt-default-background) !default;
 $pagination-color: var(--df-color-neutral-alt-default-foreground) !default;
 
-$pagination-focus-bg: var(--df-color-inert-neutral-main-background) !default;
+$pagination-focus-bg: var(--df-color-inert-neutral-pageBackground) !default;
 
 $pagination-hover-color: var(--df-color-primary-alt-hovered-foreground) !default;
 $pagination-hover-bg: var(--df-color-primary-alt-hovered-background) !default;
 
 $pagination-disabled-color: var(--df-color-disabled-main-foreground) !default;
-$pagination-disabled-bg: var(--df-color-inert-neutral-main-background) !default;
+$pagination-disabled-bg: var(--df-color-inert-neutral-pageBackground) !default;
 
 $pagination-active-color: var(--df-color-primary-alt-active-foreground) !default;
 $pagination-active-bg: var(--df-color-primary-alt-active-background) !default;

package/scss/components/popover/_popover.scss

@@ -27,8 +27,8 @@
 
   &.popover-sm {
     @include popover-mixins.popover-sizing(
-      var(--df-spacing-4),
-      var(--df-spacing-2),
+      var(--df-spacing-5),
+      var(--df-spacing-3),
       var(--df-typo-sizing-large),
       var(--df-typo-sizing-small),
       var(--df-borderRadius-main-small)

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

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 $popover-font-size: var(--df-typo-sizing-default) !default;
 $popover-max-width: 50vw !default;

package/scss/components/radio/_radio.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables.scss' as df;
+@use '../../common.variables.scss' as df;
 
 fieldset[role='radiogroup'] > legend {
   font-weight: var(--df-typo-weight-regular);
@@ -46,18 +46,18 @@ fieldset[role='radiogroup'] > legend {
       cursor: not-allowed;
     }
   }
+}
 
-  :is(&:focus, .form-check &:focus) {
-    box-shadow: none;
-    outline: none;
-  }
-
-  :is(&:focus-visible, .form-check &:focus-visible) {
-    &:not(:checked):not(.is-invalid) {
-      --df-box-shadow-color: var(--df-color-input-border);
-    }
+:is(.form-check-input[type='radio']:focus, .form-check .form-check-input[type='radio']:focus) {
+  box-shadow: none;
+  outline: none;
+}
 
-    box-shadow: #{df.$df-focus-box-shadow};
-    outline: none;
+:is(.form-check-input[type='radio']:focus-visible, .form-check .form-check-input[type='radio']:focus-visible) {
+  &:not(:checked):not(.is-invalid):not(.ng-invalid.ng-touched) {
+    --df-box-shadow-color: var(--df-color-input-border);
   }
+
+  box-shadow: #{df.$df-focus-box-shadow};
+  outline: none;
 }

package/scss/components/rating/_rating.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables.scss' as df;
+@use '../../common.variables.scss' as df;
 @use 'rating.mixins' as rating-mixins;
 
 // flag angular

package/scss/components/scrollspy/_scrollspy.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 // All bootstrap sass var overrides are found in the file _tabs.variables.scss
 
@@ -21,6 +21,27 @@
     .df-icon-inlink {
       color: var(--df-color-neutral-alt-active-foreground) !important;
     }
+
+    &:hover:not(:active) {
+      .df-icon-inlink {
+        color: var(--df-color-neutral-alt-activeHovered-foreground) !important;
+      }
+    }
+  }
+
+  &:active {
+    background-color: var(--df-color-primary-alt-pressed-background);
+    color: var(--df-color-primary-alt-pressed-foreground);
+
+    .df-icon-inlink {
+      color: var(--df-color-neutral-alt-pressed-foreground) !important;
+    }
+  }
+
+  &:hover:not(:active) {
+    .df-icon-inlink {
+      color: var(--df-color-neutral-alt-hovered-foreground) !important;
+    }
   }
 
   &:focus-visible {

package/scss/components/select/_select.namespace.scss

@@ -0,0 +1,13 @@
+// Re-write of the select arrow for dark theme working with namespace
+//TODO: we are forced to use the color instead of the token: https://github.com/Amadeus-xDLC/design-factory.design-system/issues/2840
+html:root[data-df-theme='dark'] #{$df-css-namespace-selector} {
+  .form-select {
+    --df-form-select-bg-img: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Pro%20v6.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20(Commercial%20License)%20Copyright%202026%20Fonticons%2C%20Inc.--%3E%3Cpath%20fill%3D%22%233a8bff%22%20d%3D%22M267.3%20395.3c-6.2%206.2-16.4%206.2-22.6%200l-192-192c-6.2-6.2-6.2-16.4%200-22.6s16.4-6.2%2022.6%200L256%20361.4%20436.7%20180.7c6.2-6.2%2016.4-6.2%2022.6%200s6.2%2016.4%200%2022.6l-192%20192z%22%2F%3E%3C%2Fsvg%3E');
+    &:open {
+      --df-form-select-bg-img: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Pro%20v6.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20(Commercial%20License)%20Copyright%202026%20Fonticons%2C%20Inc.--%3E%3Cpath%20fill%3D%22%233a8bff%22%20d%3D%22M244.7%20116.7c6.2-6.2%2016.4-6.2%2022.6%200l192%20192c6.2%206.2%206.2%2016.4%200%2022.6s-16.4%206.2-22.6%200L256%20150.6%2075.3%20331.3c-6.2%206.2-16.4%206.2-22.6%200s-6.2-16.4%200-22.6l192-192z%22%2F%3E%3C%2Fsvg%3E');
+    }
+    &:not([multiple]):disabled {
+      --df-form-select-bg-img: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Pro%20v6.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20(Commercial%20License)%20Copyright%202026%20Fonticons%2C%20Inc.--%3E%3Cpath%20fill%3D%22%23999999%22%20d%3D%22M267.3%20395.3c-6.2%206.2-16.4%206.2-22.6%200l-192-192c-6.2-6.2-6.2-16.4%200-22.6s16.4-6.2%2022.6%200L256%20361.4%20436.7%20180.7c6.2-6.2%2016.4-6.2%2022.6%200s6.2%2016.4%200%2022.6l-192%20192z%22%2F%3E%3C%2Fsvg%3E');
+    }
+  }
+}

package/scss/components/select/_select.scss

@@ -1,12 +1,15 @@
-@use '../../new-brand-common.variables.scss' as df;
+@use '../../common.variables.scss' as df;
 @use 'select.mixin' as select-mixins;
 
 //TODO: we are forced to use the color instead of the token: https://github.com/Amadeus-xDLC/design-factory.design-system/issues/2840
 html:root[data-df-theme='dark'] {
   .form-select {
-    --df-form-select-bg-img: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fafafa' d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
+    --df-form-select-bg-img: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Pro%20v6.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20(Commercial%20License)%20Copyright%202026%20Fonticons%2C%20Inc.--%3E%3Cpath%20fill%3D%22%233a8bff%22%20d%3D%22M267.3%20395.3c-6.2%206.2-16.4%206.2-22.6%200l-192-192c-6.2-6.2-6.2-16.4%200-22.6s16.4-6.2%2022.6%200L256%20361.4%20436.7%20180.7c6.2-6.2%2016.4-6.2%2022.6%200s6.2%2016.4%200%2022.6l-192%20192z%22%2F%3E%3C%2Fsvg%3E');
+    &:open {
+      --df-form-select-bg-img: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Pro%20v6.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20(Commercial%20License)%20Copyright%202026%20Fonticons%2C%20Inc.--%3E%3Cpath%20fill%3D%22%233a8bff%22%20d%3D%22M244.7%20116.7c6.2-6.2%2016.4-6.2%2022.6%200l192%20192c6.2%206.2%206.2%2016.4%200%2022.6s-16.4%206.2-22.6%200L256%20150.6%2075.3%20331.3c-6.2%206.2-16.4%206.2-22.6%200s-6.2-16.4%200-22.6l192-192z%22%2F%3E%3C%2Fsvg%3E');
+    }
     &:not([multiple]):disabled {
-      --df-form-select-bg-img: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23999999' d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
+      --df-form-select-bg-img: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Pro%20v6.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20(Commercial%20License)%20Copyright%202026%20Fonticons%2C%20Inc.--%3E%3Cpath%20fill%3D%22%23999999%22%20d%3D%22M267.3%20395.3c-6.2%206.2-16.4%206.2-22.6%200l-192-192c-6.2-6.2-6.2-16.4%200-22.6s16.4-6.2%2022.6%200L256%20361.4%20436.7%20180.7c6.2-6.2%2016.4-6.2%2022.6%200s6.2%2016.4%200%2022.6l-192%20192z%22%2F%3E%3C%2Fsvg%3E');
     }
   }
 }
@@ -14,7 +17,6 @@ html:root[data-df-theme='dark'] {
 /* Native select */
 .form-select {
   --df-box-shadow-color: var(--df-color-input-border);
-  --df-form-select-bg-img: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%231a1a1a' d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
 
   @each $state, $name in ('invalid': 'danger', 'warning': 'warning') {
     &.is-#{$state} {
@@ -28,6 +30,10 @@ html:root[data-df-theme='dark'] {
       background-position: left 0.5rem center;
     }
   }
+  &:open {
+    // chevron-up with button-text-basic-color-primary-default-foreground color (#0c66e1)
+    --df-form-select-bg-img: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Pro%20v6.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20(Commercial%20License)%20Copyright%202026%20Fonticons%2C%20Inc.--%3E%3Cpath%20fill%3D%22%230c66e1%22%20d%3D%22M244.7%20116.7c6.2-6.2%2016.4-6.2%2022.6%200l192%20192c6.2%206.2%206.2%2016.4%200%2022.6s-16.4%206.2-22.6%200L256%20150.6%2075.3%20331.3c-6.2%206.2-16.4%206.2-22.6%200s-6.2-16.4%200-22.6l192-192z%22%2F%3E%3C%2Fsvg%3E');
+  }
 
   &:focus {
     box-shadow: none;
@@ -61,7 +67,8 @@ html:root[data-df-theme='dark'] {
   }
 
   &:not([multiple]):disabled {
-    --df-form-select-bg-img: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23b3b3b3' d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
+    // chevron-down with color-disabled-main-foreground color (#b3b3b3)
+    --df-form-select-bg-img: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Pro%20v6.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20(Commercial%20License)%20Copyright%202026%20Fonticons%2C%20Inc.--%3E%3Cpath%20fill%3D%22%23b3b3b3%22%20d%3D%22M267.3%20395.3c-6.2%206.2-16.4%206.2-22.6%200l-192-192c-6.2-6.2-6.2-16.4%200-22.6s16.4-6.2%2022.6%200L256%20361.4%20436.7%20180.7c6.2-6.2%2016.4-6.2%2022.6%200s6.2%2016.4%200%2022.6l-192%20192z%22%2F%3E%3C%2Fsvg%3E');
   }
 }
 
@@ -74,10 +81,9 @@ html:root[data-df-theme='dark'] {
 .highlighted {
   color: var(--df-color-primary-alt-default-foreground);
   text-decoration: inherit !important;
-
-  .ng-option-marked & {
-    color: var(--df-color-primary-alt-hovered-foreground);
-  }
+}
+.ng-option-marked .highlighted {
+  color: var(--df-color-primary-alt-hovered-foreground);
 }
 
 // ng-select
@@ -138,13 +144,17 @@ html:root[data-df-theme='dark'] {
 
   .ng-arrow:before {
     font-family: 'Font Awesome 6 Pro', sans-serif;
-    content: '\f0d7';
-    font-weight: 900;
+    content: '\f078';
+    font-weight: 300;
     font-size: 1rem;
     width: 1.5rem;
     height: 1.5rem;
   }
 
+  &.ng-select-opened .ng-arrow:before {
+    content: '\f077';
+  }
+
   &.ng-select-focused > .ng-select-container {
     outline: 0;
     box-shadow: df.$df-focus-box-shadow;
@@ -158,6 +168,7 @@ html:root[data-df-theme='dark'] {
 
     .ng-arrow-wrapper {
       cursor: not-allowed;
+      color: var(--df-color-disabled-main-foreground);
     }
 
     .ng-value {
@@ -188,7 +199,7 @@ html:root[data-df-theme='dark'] {
   }
 
   .ng-select-container {
-    background-color: var(--df-color-inert-neutral-main-background);
+    background-color: var(--df-color-inert-neutral-pageBackground);
     border-radius: var(--df-borderRadius-main-medium);
     border: 1px solid var(--df-color-input-border);
 
@@ -359,7 +370,7 @@ html:root[data-df-theme='dark'] {
       outline: none;
 
       &:after {
-        background-color: var(--df-color-inert-neutral-main-background);
+        background-color: var(--df-color-inert-neutral-pageBackground);
         box-shadow: df.$df-focus-box-shadow;
       }
     }
@@ -384,6 +395,7 @@ html:root[data-df-theme='dark'] {
     margin-inline-start: 0.3rem;
     margin-inline-end: 0.375rem;
     display: flex;
+    color: var(--df-button-text-basic-color-primary-default-foreground);
 
     @include select-mixins.ngs-root('.form-control-lg') {
       margin-top: $df-select-value-margin-lg;
@@ -401,7 +413,12 @@ html:root[data-df-theme='dark'] {
 
   &:not(.ng-select-disabled):not(.df-ng-select-readonly) {
     .ng-arrow-wrapper:hover {
-      background-color: var(--df-color-primary-alt-hovered-background);
+      background-color: var(--df-button-text-basic-color-primary-hovered-background);
+      color: var(--df-button-text-basic-color-primary-hovered-foreground);
+    }
+    .ng-arrow-wrapper:active {
+      background-color: var(--df-button-text-basic-color-primary-pressed-background);
+      color: var(--df-button-text-basic-color-primary-pressed-foreground);
     }
   }
 
@@ -435,14 +452,13 @@ html:root[data-df-theme='dark'] {
     .ng-dropdown-panel-items {
       margin-bottom: 0px;
 
-      .ng-optgroup,
-      .ng-option {
+      :is(.ng-optgroup, .ng-option) {
         overflow: hidden;
         text-overflow: ellipsis;
 
         .form-check {
           margin-bottom: 0;
-          padding-bottom: $form-check-margin-bottom;
+          padding-bottom: 0.125rem;
           padding-inline-start: $form-check-padding-start + 0.5rem;
           margin-inline-start: -0.5em;
           overflow: hidden;

package/scss/components/select/_select.variables.scss

@@ -1,15 +1,13 @@
 $form-select-bg-size: 16px 16px !default; // In pixels because image dimensions
-$form-select-indicator: str-replace(
-  url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E"),
-  '#',
-  '%23'
-) !default;
+//TODO: we are forced to use the color instead of the token: https://github.com/Amadeus-xDLC/design-factory.design-system/issues/2840
+// chevron-down with button-text-basic-color-primary-default-foreground color (#0c66e1)
+$form-select-indicator: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Pro%20v6.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20(Commercial%20License)%20Copyright%202026%20Fonticons%2C%20Inc.--%3E%3Cpath%20fill%3D%22%230c66e1%22%20d%3D%22M267.3%20395.3c-6.2%206.2-16.4%206.2-22.6%200l-192-192c-6.2-6.2-6.2-16.4%200-22.6s16.4-6.2%2022.6%200L256%20361.4%20436.7%20180.7c6.2-6.2%2016.4-6.2%2022.6%200s6.2%2016.4%200%2022.6l-192%20192z%22%2F%3E%3C%2Fsvg%3E') !default;
 
 $form-select-disabled-color: var(--df-color-disabled-main-foreground) !default;
 $form-select-disabled-bg: var(--df-color-disabled-main-background) !default;
 
 $form-select-color: var(--df-color-inert-neutral-main-foreground) !default;
-$form-select-bg: var(--df-color-inert-neutral-main-background) !default;
+$form-select-bg: var(--df-color-inert-neutral-pageBackground) !default;
 
 $form-select-padding-x: $input-padding-x !default;
 $form-select-indicator-padding: calc(#{$form-select-padding-x} * 3) !default; // Extra padding for background-image

package/scss/components/sidenav/_sidenav-deprecated.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables.scss' as df;
+@use '../../common.variables.scss' as df;
 
 .df-sidenav-toggler {
   @extend .navbar-toggler;

package/scss/components/sidenav/_sidenav.scss

@@ -29,6 +29,10 @@
     }
   }
 
+  .df-sidenav-search-empty {
+    visibility: hidden;
+  }
+
   // TODO: rework when the topnav is implemented
   .df-sidenav-mobile-drawer {
     top: var(--df-navbar-height, 56px) !important;
@@ -54,6 +58,14 @@
     --df-drawer-max-size: max-content;
     // TODO: not needed when we have inline drawer
     z-index: 10;
+    transition: none;
+
+    &.inline-start {
+      transform: translateX(0);
+      &.show {
+        transform: translateX(0);
+      }
+    }
 
     &.show {
       --df-drawer-size: max-content;
@@ -73,6 +85,16 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    // Avoid layout shift when an item changed from unselected/selected
+    &::before {
+      content: attr(title);
+      font-weight: var(--df-typo-weight-bold);
+      visibility: hidden;
+      height: 0;
+      overflow: hidden;
+      display: block;
+    }
   }
 
   // Mobile header with back button
@@ -216,6 +238,10 @@
     &.df-sidenav-active-level {
       font-weight: var(--df-typo-weight-bold);
       background-color: var(--df-color-primary-alt-active-background);
+
+      &:hover {
+        background-color: var(--df-color-primary-alt-activeHovered-background);
+      }
     }
   }
 

package/scss/components/slider/_slider.scss

@@ -9,17 +9,17 @@
   $df-slider-bar-selected-color: var(--df-color-primary-main-default-background); // $barFillColor
   $df-slider-bar-color: $gray-300; // $barNormalColor
   $df-slider-bar-size: 0.25rem; // $barDimension
-  $df-slider-bar-disabled-color: var(--df-disabled-bg-color); // $barDisabledFillColor
-  $df-slider-bar-selected-disabled-color: var(--df-disabled-color); // $barDisabledFillColor
+  $df-slider-bar-disabled-color: var(--df-color-disabled-main-background); // $barDisabledFillColor
+  $df-slider-bar-selected-disabled-color: var(--df-color-disabled-main-foreground); // $barDisabledFillColor
   $df-slider-bar-leftout-selection-color: $red; // $barLeftOutSelectionColor
   $df-slider-bar-rightout-selection-color: $green; // $barRightOutSelectionColor
 
   // Pointer
   $df-slider-pointer-color: var(--df-color-primary-main-default-background); // $handleBgColor
-  $df-slider-pointer-box-shadow: var(--df-primary-500); // $handleBgColor
+  $df-slider-pointer-box-shadow: var(--df-color-primary-main-default-border); // $handleBgColor
   $df-slider-pointer-size: 1.25rem; // $handleSize
-  $df-slider-pointer-disabled-color: var(--df-disabled-color); // $handleDisabledColor
-  $df-slider-pointer-hover-color: var(--df-primary-700); // $handleHoverColor
+  $df-slider-pointer-disabled-color: var(--df-color-disabled-main-foreground); // $handleDisabledColor
+  $df-slider-pointer-hover-color: var(--df-color-primary-main-hovered-background); // $handleHoverColor
   $df-slider-pointer-active-color: var(--df-color-primary-main-default-background); // $handleActiveColor
 
   // Labels
@@ -47,13 +47,13 @@
   // Pointer
   $df-slider-pointer-size-sm: 1rem;
   $df-slider-pointer-size-lg: 1.5rem;
-  $df-slider-pointer-hover-border-color: var(--df-primary-800);
+  $df-slider-pointer-hover-border-color: var(--df-color-primary-main-default-background);
   $df-slider-pointer-hover-border-width: 0.0625rem;
 
   // Labels
   $df-slider-label-size-sm: 0.875rem;
   $df-slider-label-size-lg: 1.125rem;
-  $df-slider-label-disabled-color: var(--df-disabled-color); // TODO check color
+  $df-slider-label-disabled-color: var(--df-color-disabled-main-foreground); // TODO check color
 
   // Slider animation duration
   $df-slider-animation-duration: 0.3s;

package/scss/components/speechbubble/_speechbubble.scss

@@ -93,15 +93,11 @@
     );
     @extend .df-speech-right;
   }
+}
 
-  .df-font-sm & {
-    li {
-      border-radius: var(--df-borderRadius-main-small);
-    }
-  }
-  .df-font-lg & {
-    li {
-      border-radius: var(--df-borderRadius-main-large);
-    }
-  }
+.df-font-sm .df-speech li {
+  border-radius: var(--df-borderRadius-main-small);
+}
+.df-font-lg .df-speech li {
+  border-radius: var(--df-borderRadius-main-large);
 }

package/scss/components/stepper/_stepper.scss

@@ -38,7 +38,7 @@
   .df-stepper-step {
     min-width: 5.625rem; // TODO work with the negative margin even in mobile version
     // put it depending of the button padding and as the btn-sm size
-    background-color: var(--df-color-inert-neutral-main-background);
+    background-color: var(--df-color-inert-neutral-pageBackground);
     border: 1px solid transparent; // override to have same border as btn
     gap: 0;
 
@@ -171,6 +171,6 @@
 }
 
 .df-stepper-icon::before {
-  color: var(--df-color-inert-neutral-main-background);
+  color: var(--df-color-inert-neutral-pageBackground);
   vertical-align: middle;
 }