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

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,10 @@
+// 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 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");
+    &: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");
+    }
+  }
+}

package/scss/components/select/_select.scss

@@ -1,4 +1,4 @@
-@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
@@ -74,10 +74,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
@@ -188,7 +187,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 +358,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;
       }
     }
@@ -435,14 +434,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

@@ -9,7 +9,7 @@ $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;
@@ -73,6 +77,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 +230,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;
 }

package/scss/components/table/_advancedtables.scss

@@ -1,5 +1,5 @@
 @use 'ag-grid-community/styles' as ag;
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 // TODO check new checkbox look and border radius
 @include ag.grid-styles(
@@ -37,7 +37,7 @@
 }
 
 .df-table.ag-theme-alpine {
-  --ag-background-color: var(--df-color-inert-neutral-main-background);
+  --ag-background-color: var(--df-color-neutral-alt-default-background);
   --ag-checkbox-border-radius: #{$form-check-input-border-radius};
   --ag-font-size: var(--df-typo-sizing-default);
   --ag-alpine-active-color: var(--df-color-primary-alt-active-background);
@@ -80,7 +80,7 @@
     background-color: var(--df-color-primary-subtle-background);
   }
 
-  &.df-table-white-header {
+  &.df-table-neutral-alt-header {
     --ag-header-background-color: var(--df-color-neutral-alt-default-background);
 
     .ag-header {
@@ -115,6 +115,11 @@
     color: var(--df-color-primary-alt-active-foreground);
   }
 
+  //Override ag-grid hover + selected to use hover background-color
+  .ag-row-hover.ag-row-selected::before {
+    background-image: linear-gradient(var(---ag-row-hover-color), var(--ag-row-hover-color));
+  }
+
   .ag-icon.ag-icon-desc {
     @extend .df-table-icon;
     @extend .fa-sort-amount-down;

package/scss/components/tabs/_tabs.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 .nav-link {
   &:visited {
@@ -36,6 +36,11 @@
       color: var(--df-nav-link-hover-color);
     }
 
+    &:active:not(.disabled):not(:disabled) {
+      background-color: var(--df-color-primary-alt-pressed-background);
+      color: var(--df-color-primary-alt-pressed-foreground);
+    }
+
     &:focus {
       box-shadow: none;
       outline: none;

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

@@ -1,7 +1,8 @@
-@use 'sass:color';
+@use '../../common.variables' as df;
 
 $toast-padding-y: 0.5625rem !default;
 $toast-padding-x: var(--df-spacing-5) !default;
 $toast-border-radius: var(--df-borderRadius-main-small) !default;
 $toast-border-width: 0 !default;
 $toast-font-size: var(--df-typo-sizing-small) !default;
+$toast-box-shadow: df.$df-box-shadow !default;

package/scss/components/toggle/_toggle.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables.scss' as df;
+@use '../../common.variables.scss' as df;
 
 .form-switch {
   display: flex;
@@ -62,7 +62,7 @@
       border-color: var(--df-color-toggle-border);
     }
 
-    &:focus-visible:not(:checked):not(:disabled):not(.is-invalid) {
+    &:focus-visible:not(:checked):not(:disabled):not(.is-invalid):not(.ng-invalid.ng-touched) {
       --df-box-shadow-color: var(--df-color-toggle-border);
     }
 

package/scss/namespace.scss

@@ -1,3 +1,8 @@
+// Overriding bootstrap is done in this way:
+// We declare sass vars BEFORE bootstrap sass vars.
+// We redefine mixins and functions AFTER bootstrap mixins and functions.
+// We declare component css override AFTER bootstrap component css.
+
 @import 'variables';
 @import 'bootstrap/maps';
 @import 'bootstrap/scss/maps';
@@ -6,12 +11,25 @@
 @import 'components/fonts/fonts-family';
 @import 'components/fonts/multi-lang.mixins';
 @import 'common.mixins';
-
 @import 'bootstrap/scss/root';
 @import 'common.root';
 
+@import 'components/navbar/navbar.mixins';
+
+@import '@design-factory/tokens/css/root-dark';
+
+:root {
+  // beautiful media service ONLY works when breakpoints css vars are defined at root level :)
+  @each $breakpoint, $value in $grid-breakpoints {
+    --df-breakpoint-#{$breakpoint}: #{$value};
+  }
+}
+
 $df-css-namespace-selector: '.design-factory-v2' !default;
 
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import 'components/button/button.namespace';
+
 #{$df-css-namespace-selector} {
   @import 'bootstrap/scss/reboot';
   @import 'bootstrap/scss/type';
@@ -54,11 +72,11 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
 
   /** DESIGN FACTORY IMPORTS **/
   @import 'common';
-  @import 'components/accordion/accordion';
   @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';
   @import 'components/button/button';
   @import 'components/media/media';
@@ -92,13 +110,18 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
   @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-deprecated';
   @import 'components/sidenav/sidenav';
+  @import 'components/drawer/drawer';
   @import 'components/footer/footer';
   @import 'components/toast/toast';
+  @import 'components/scrollspy/scrollspy';
+  @import 'components/timepicker/timepicker';
+  @import 'components/tooltip/tooltip';
+  @import 'components/waves/waves';
 
   @import 'bootstrap/rtl-styles-override';
 
@@ -106,26 +129,31 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
   /* stylelint-disable-next-line scss/load-partial-extension */
   @import '@agnos-ui/core-bootstrap/scss/agnosui.scss';
 
-  -webkit-text-size-adjust: 100%; // 4
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
-  margin: 0; // 1
-  font-family: $font-family-base;
-  font-size: $font-size-base;
-  font-weight: $font-weight-base;
-  line-height: $line-height-base;
-  color: $body-color;
-  background-color: $body-bg; // 2
-
-  .list-group-item + .list-group-item {
-    // Copy from Bootstrap 4.4.1 due to CSS namespacing and use of + selector
-    border-top-width: 0;
-
-    &.active {
-      margin-top: -$list-group-border-width;
-      border-top-width: $list-group-border-width;
-    }
+  // body
+  margin: 0;
+  font-family: var(--df-body-font-family);
+  font-size: var(--df-body-font-size);
+  font-weight: var(--df-body-font-weight);
+  line-height: var(--df-body-line-height);
+  color: var(--df-body-color);
+  text-align: var(--df-body-text-align);
+  background-color: var(--df-body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  // root level CSS, mostly from bootstrap _reboot.scss
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
+
+  a > code {
+    color: inherit;
   }
 
+  // making sure ag-grid legacy styles are used
+  --ag-legacy-styles-loaded: 'true';
+
+  // fixes display of validation feedback, coming from bootstrap _forms.scss
   @each $state, $data in $form-validation-states {
     @if ($state == 'valid' or $state == 'invalid') {
       .was-validated :#{$state},
@@ -145,16 +173,9 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
     }
   }
 }
-/* stylelint-disable no-invalid-position-at-import-rule */
-@import 'components/popover/popover_container';
-@import 'components/tooltip/tooltip_container';
-@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;
-}
+@import 'components/carousel/carousel.namespace';
+@import 'components/modal/modal.namespace';
+@import 'components/pagination/pagination.namespace';
+@import 'components/select/select.namespace';
+/* stylelint-enable no-invalid-position-at-import-rule */

package/scss/utilities.scss

@@ -1,4 +1,3 @@
-@import './themes/brand2023/variables';
 @import './variables';
 @import 'bootstrap/scss/mixins/breakpoints';
 @import './components/dropdown/dropdown.mixins';

package/scss/_new-brand-common.variables.scss

@@ -1,7 +0,0 @@
-$df-box-shadow: 0px 0px 8px var(--df-color-shadow-1) !default;
-$df-focus-box-shadow:
-  0 0 0 2px var(--df-inner-box-shadow-color, var(--df-body-bg)),
-  0 0 0 4px var(--df-box-shadow-color, var(--df-color-primary-main-default-border)) !default;
-$df-focus-inset-box-shadow:
-  inset 0 0 0 2px var(--df-inner-box-shadow-color, var(--df-body-bg)),
-  inset 0 0 0 4px var(--df-box-shadow-color, var(--df-color-primary-main-default-border)) !default;