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

package/scss/bundle.scss

@@ -1,4 +1,8 @@
-@import './themes/brand2023/variables';
+// 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';
@@ -113,8 +117,3 @@
 // issue with agnosui exports, to be fixed for DF 20
 /* stylelint-disable-next-line scss/load-partial-extension */
 @import '@agnos-ui/core-bootstrap/scss/agnosui.scss';
-
-// this css is needed when modal are open to have no scroll on the background.
-.df-modal-open {
-  overflow: hidden;
-}

package/scss/components/accordion/_accordion.variables.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 $accordion-padding-y: var(--df-spacing-4) !default;
 $accordion-padding-x: var(--df-spacing-5) !default;

package/scss/components/alert/_alert.scss

@@ -1,5 +1,5 @@
 @use 'alert.mixin' as alert-mixin;
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 .alert {
   color: var(--df-color-inert-neutral-main-foreground);

package/scss/components/badge/_badge.scss

@@ -1,5 +1,5 @@
 @use 'badge.mixins' as badge-mixin;
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 .badge {
   --df-box-shadow-color: var(--df-badge-solid-color-focus-main-border);

package/scss/components/brand-color/_brand-color.mixins.scss

@@ -1,6 +1,4 @@
-@use 'sass:color';
 @use 'sass:map';
-@use 'sass:meta';
 
 @mixin df-bg-color-css-var($utility) {
   @if map.has-key($utility, class) and map.get($utility, class) == 'bg' {

package/scss/components/brand-color/_brand-color.scss

@@ -1,12 +1,5 @@
-@use 'sass:map';
 @use 'brand-color.mixins' as brand-color-mixins;
 
-@each $color, $value in $gradients {
-  .bg-#{$color} {
-    background-image: linear-gradient(180deg, map.get($value, 'from'), map.get($value, 'to'));
-  }
-}
-
 // We need this mixin to achieve the outline focus in buttons on different backgrounds
 @each $key, $utility in $utilities {
   @include brand-color-mixins.df-bg-color-css-var($utility);

package/scss/components/button/_button.mixins.scss

@@ -11,7 +11,7 @@
 
   &:focus-visible {
     --df-btn-focus-box-shadow:
-      0 0 0 2px var(var(--df-inner-box-shadow-color), var(--df-body-bg)), 0 0 0 4px var(--df-box-shadow-color);
+      0 0 0 2px var(--df-inner-box-shadow-color, var(--df-body-bg)), 0 0 0 4px var(--df-box-shadow-color);
     --df-box-shadow-color: var(--df-button-#{$config}-#{$style}-color-#{$status}-default-border);
     box-shadow: var(--df-btn-focus-box-shadow);
 

package/scss/components/button/_button.namespace.scss

@@ -0,0 +1,42 @@
+// Rewrite of the btn-check utility. Coming from bootstrap _buttons.scss
+#{$df-css-namespace-selector} {
+  .btn-check + .btn:hover {
+    color: var(--df-btn-color);
+    background-color: var(--df-btn-bg);
+    border-color: var(--df-btn-border-color);
+  }
+
+  .btn-check:focus-visible + .btn {
+    border-color: var(--df-btn-hover-border-color);
+    outline: 0;
+    box-shadow: var(--df-btn-focus-box-shadow);
+  }
+
+  .btn-check:checked + .btn,
+  :not(.btn-check) + .btn:active {
+    color: var(--df-btn-active-color);
+    background-color: var(--df-btn-active-bg);
+    border-color: var(--df-btn-active-border-color);
+
+    &:focus-visible {
+      box-shadow: var(--df-btn-focus-box-shadow);
+    }
+  }
+
+  .btn-check:checked:focus-visible + .btn {
+    box-shadow: var(--df-btn-focus-box-shadow);
+  }
+
+  fieldset:disabled .btn {
+    @extend .disabled;
+  }
+
+  // Split button dropdowns re-write, from _button-group.scss
+  .dropup .dropdown-toggle-split::after,
+  .dropend .dropdown-toggle-split::after {
+    margin-inline-start: 0;
+  }
+  .dropstart .dropdown-toggle-split::before {
+    margin-inline-end: 0;
+  }
+}

package/scss/components/button/_button.scss

@@ -1,6 +1,5 @@
-@use 'sass:map';
 @use 'button.mixins' as btn-mixins;
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 .btn {
   --df-box-shadow-color: var(--df-btn-focus-shadow);
@@ -25,17 +24,11 @@
     'basic'
   ); // disabled styles for solid buttons it will work for all .btn not only btn-{$status}
 
-  &.disabled,
-  &:disabled {
-    .btn-check:checked + &,
-    :not(.btn-check) + &:active,
-    &:first-child:active,
-    &.active,
-    &.show {
+  &:is(.disabled, :disabled) {
+    &:is(:first-child:active, .active, .show) {
       color: var(--df-btn-disabled-color);
       background-color: var(--df-btn-disabled-bg);
       border-color: var(--df-btn-disabled-border-color);
-      //background-image: if($enable-gradients, none, null);
       @include box-shadow(none);
     }
 
@@ -59,6 +52,14 @@
   }
 }
 
+.btn-check:checked + .btn:is(.disabled, :disabled),
+:not(.btn-check) + .btn:is(.disabled, :disabled):active {
+  color: var(--df-btn-disabled-color);
+  background-color: var(--df-btn-disabled-bg);
+  border-color: var(--df-btn-disabled-border-color);
+  @include box-shadow(none);
+}
+
 // TODO - deprecate / remove in favor of btn btn-sm btn-outline-neutral df-btn-tertiary df-btn-icononly fal fa-xmark
 .btn-close {
   --df-box-shadow-width: 2px;
@@ -164,8 +165,7 @@
     }
   }
 
-  &.disabled,
-  &:disabled {
+  &:is(.disabled, :disabled) {
     + .btn {
       cursor: not-allowed;
       pointer-events: auto;

package/scss/components/button/_button.variables.scss

@@ -1,8 +1,15 @@
+@use '../../common.variables' as df;
+
 $btn-font-family: var(--df-typo-font-primaryFamily), sans-serif !default;
 $btn-font-weight: var(--df-typo-weight-medium) !default;
 $btn-disabled-opacity: 1 !default;
-$btn-link-focus-shadow-rgb: rgba(
-  var(--df-btn-focus-shadow-rgb),
-  0.5
-) !default; //TODO: remove when editing to-rgb function
+$btn-link-focus-shadow-rgb: unset !default;
 $btn-border-radius: var(--df-button-borderRadius-main-medium) !default;
+// Cannot be set as CSS var due to bootstrap _button-group.scss
+$btn-padding-x: $df-spacing-4 !default;
+$btn-padding-x-sm: $df-spacing-3 !default;
+$btn-padding-x-lg: $df-spacing-5 !default;
+$btn-padding-y: 0.3125rem !default;
+$btn-padding-y-sm: 0.21875rem !default;
+$btn-padding-y-lg: 0.59375rem !default;
+$btn-focus-box-shadow: df.$df-focus-box-shadow !default;

package/scss/components/card/_card.scss

@@ -5,6 +5,10 @@
 .card {
   box-shadow: var(--df-card-box-shadow);
 
+  .btn {
+    --df-inner-box-shadow-color: var(--df-color-inert-neutral-main-background);
+  }
+
   .card-title {
     font-weight: var(--df-typo-weight-medium);
   }

package/scss/components/card/_card.variables.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 $card-spacer-y: var(--df-spacing-5) !default;
 $card-spacer-x: var(--df-spacing-5) !default;

package/scss/components/carousel/_carousel.namespace.scss

@@ -0,0 +1,8 @@
+// Re-write of bootstrap carousel css vars as they were set in :root in bootstrap _carousel.scss
+#{$df-css-namespace-selector} {
+  .carousel {
+    --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
+    --#{$prefix}carousel-caption-color: #{$carousel-caption-color};
+    --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};
+  }
+}

package/scss/components/checkbox/_checkbox.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables.scss' as df;
+@use '../../common.variables.scss' as df;
 
 .form-check {
   padding-left: 0;
@@ -72,30 +72,28 @@
       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):not(:indeterminate) {
-      --df-box-shadow-color: var(--df-color-input-border);
-    }
+:is(.form-check-input[type='checkbox']:focus, .form-check .form-check-input[type='checkbox']:focus) {
+  box-shadow: none;
+  outline: none;
+}
 
-    box-shadow: #{df.$df-focus-box-shadow};
-    outline: none;
+:is(.form-check-input[type='checkbox']:focus-visible, .form-check .form-check-input[type='checkbox']:focus-visible) {
+  &:not(:checked):not(.is-invalid):not(.ng-invalid.ng-touched):not(:indeterminate) {
+    --df-box-shadow-color: var(--df-color-input-border);
   }
+
+  box-shadow: #{df.$df-focus-box-shadow};
+  outline: none;
 }
 
-.form-check:has(+ .form-check),
-.form-check + .form-check {
+.form-check:has(+ .form-check) {
   margin-bottom: var(--df-spacing-3);
 }
 
 .form-sm {
-  .form-check:has(+ .form-check),
-  .form-check + .form-check {
+  .form-check:has(+ .form-check) {
     margin-bottom: var(--df-spacing-2);
   }
 

package/scss/components/checkbox/_checkbox.variables.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables.scss' as df;
+@use '../../common.variables.scss' as df;
 
 $form-check-input-width: 1rem !default;
 $form-check-padding-start: $form-check-input-width + 0.375rem !default;
@@ -13,6 +13,7 @@ $form-check-input-focus-box-shadow: df.$df-focus-box-shadow !default;
 $form-check-input-checked-bg-color: var(--df-color-primary-main-default-background) !default;
 $form-check-input-checked-border-color: var(--df-color-primary-main-default-border) !default;
 $form-check-input-disabled-opacity: 1 !default;
+$form-check-margin-bottom: 0 !default;
 
 $form-check-min-height: calc(var(--df-typo-sizing-default) * $line-height-base) !default;
 

package/scss/components/collapse/_collapse.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 button.df-collapse {
   background-color: transparent;

package/scss/components/datepicker/_datepicker.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 .ngb-dp-navigation-select {
   column-gap: var(--df-spacing-2);
@@ -211,7 +211,7 @@ ngb-datepicker {
 }
 
 .df-input-datepicker-range {
-  &.df-focused {
+  &:focus-within {
     border: none;
     --df-box-shadow-color: var(--df-color-input-border);
 
@@ -220,4 +220,18 @@ ngb-datepicker {
       box-shadow: none !important; //overrides the box-shadow of the single input focus
     }
   }
+
+  div.input-group:has(input.df-input-withicon):has(.input-group-append):first-of-type {
+    .input-group-append {
+      border-radius: 0;
+      border-inline-end: none;
+    }
+  }
+
+  div.input-group:has(input.df-input-withicon):last-of-type {
+    input.df-input-withicon {
+      border-radius: 0;
+      border-inline-start: none;
+    }
+  }
 }

package/scss/components/drawer/_drawer.scss

@@ -4,6 +4,8 @@
   --df-drawer-min-size: 0;
   --df-drawer-max-size: 100vw;
 
+  display: flex;
+  flex-direction: column;
   width: 100%;
   min-width: 0;
   max-width: none;
@@ -11,6 +13,22 @@
   min-height: var(--df-drawer-min-size);
   max-height: var(--df-drawer-max-size);
 
+  .df-drawer-header {
+    padding: var(--df-spacing-6) var(--df-spacing-4) var(--df-spacing-5) var(--df-spacing-6);
+  }
+
+  .df-drawer-body {
+    padding: var(--df-spacing-6) var(--df-spacing-6) 0;
+  }
+
+  .df-drawer-footer {
+    display: flex;
+    justify-content: end;
+    padding: var(--df-spacing-6);
+    margin-top: auto;
+    flex-wrap: wrap;
+  }
+
   &.inline-start,
   &.inline-end {
     width: var(--df-drawer-size);
@@ -28,10 +46,9 @@
 
   background-color: var(--df-color-inert-neutral-main-background);
   z-index: var(--df-drawer-z-index);
+  position: fixed;
 
-  transition:
-    transform 0.25s ease,
-    visibility 0.25s ease;
+  @include transition(0.25s ease);
 
   &:not(.show) {
     display: block;
@@ -41,8 +58,10 @@
     inset-block: 0;
     inset-inline-start: 0;
 
-    // transform: translateX(-75%);
-    // &.show { transform: translateX(0); }
+    transform: translateX(-100%);
+    &.show {
+      transform: translateX(0);
+    }
   }
 
   &.inline-end {
@@ -54,7 +73,14 @@
       transform: translateX(0);
     }
 
-    .au-splitter {
+    &.inline-start {
+      transform: translateX(0);
+      &.show {
+        transform: translateX(0);
+      }
+    }
+
+    .df-drawer-splitter {
       inset-inline-end: auto;
     }
   }
@@ -69,7 +95,7 @@
       transform: translateY(0);
     }
 
-    .au-splitter {
+    .df-drawer-splitter {
       inset-block-start: auto;
     }
   }
@@ -85,18 +111,26 @@
   }
 
   // Vertical splitter (default for inline drawers)
-  .splitter {
+  .df-drawer-splitter {
+    display: flex;
     position: absolute;
     inset-block: 0;
     inset-inline-end: -4px; // half outside for visual separation
     width: 8px; // larger hit area
     cursor: ew-resize;
     background: transparent;
+
+    .df-drawer-splitter-handle {
+      --df-btn-bg: transparent;
+      flex-shrink: 0;
+      border: none;
+      cursor: ew-resize;
+    }
   }
 
   // Horizontal splitter for block drawers (height resize)
-  &.block-start .splitter,
-  &.block-end .splitter {
+  &.block-start .df-drawer-splitter,
+  &.block-end .df-drawer-splitter {
     inset-inline: 0;
     width: auto;
     height: 8px;

package/scss/components/dropdown/_dropdown.scss

@@ -1,5 +1,5 @@
 @use 'sass:color';
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 @use 'dropdown.mixins' as dropdown-mixins;
 
 .dropdown.show,
@@ -29,7 +29,7 @@
       margin-left: 0;
       margin-right: 0;
       line-height: 1rem;
-      font-weight: var(--df-typo-weight-medium);
+      font-weight: 300;
     }
 
     &.btn-sm {

package/scss/components/dropdown/_dropdown.variables.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 $dropdown-border-width: 0 !default;
 $dropdown-link-hover-bg: var(--df-color-primary-alt-hovered-background) !default;

package/scss/components/form/_form.scss

@@ -36,11 +36,19 @@
   }
 }
 
-// TODO see how to add CSS var for this globally
-.invalid-feedback,
-.valid-feedback,
-.warning-feedback {
-  font-size: var(--df-typo-sizing-small);
+@each $state, $name in ('valid': 'success', 'invalid': 'danger', 'warning': 'warning') {
+  .form-check-input.is-#{$state}:not(:disabled) {
+    ~ .form-check-label {
+      color: var(--df-color-neutral-alt-default-foreground);
+    }
+  }
+}
+
+.invalid-feedback:before {
+  content: '\f056';
+  font-family: 'Font Awesome 6 Pro', sans-serif;
+  font-weight: 300;
+  margin-inline-end: var(--df-spacing-2);
 }
 
 .form-control-sm {

package/scss/components/form/_form.variables.scss

@@ -1,3 +1,8 @@
+@use '../../common.variables' as df;
+
+$form-check-input-indeterminate-bg-color: var(--df-color-primary-main-default-background) !default;
+$form-check-input-indeterminate-border-color: var(--df-color-primary-main-default-border) !default;
+
 // we don't support boostrap form-range but have to set this variable to avoid sass compilation error
 $form-range-thumb-active-bg: tint-color($primary, 70%) !default;
 
@@ -13,6 +18,7 @@ $form-file-button-hover-bg: var(--df-button-outline-basic-color-primary-hovered-
 
 $form-feedback-valid-color: var(--df-color-success-alt-default-foreground) !default;
 $form-feedback-invalid-color: var(--df-color-danger-alt-default-foreground) !default;
+$form-feedback-font-style: var(--df-typo-sizing-small) !default;
 
 $form-validation-states: (
   'valid': (
@@ -21,7 +27,7 @@ $form-validation-states: (
     'icon': '',
     'tooltip-color': var(--df-color-success-main-default-foreground),
     'tooltip-bg-color': var(--df-color-success-main-default-background),
-    'focus-box-shadow': $input-btn-focus-box-shadow,
+    'focus-box-shadow': df.$df-focus-box-shadow,
     'border-color': var(--df-color-success-alt-default-border)
   ),
   'invalid': (
@@ -30,7 +36,7 @@ $form-validation-states: (
     'icon': '',
     'tooltip-color': var(--df-color-danger-main-default-foreground),
     'tooltip-bg-color': var(--df-color-danger-main-default-background),
-    'focus-box-shadow': $input-btn-focus-box-shadow,
+    'focus-box-shadow': df.$df-focus-box-shadow,
     'border-color': var(--df-color-danger-alt-default-border)
   ),
   'warning': (
@@ -39,7 +45,7 @@ $form-validation-states: (
     'icon': '',
     'tooltip-color': var(--df-color-warning-main-default-foreground),
     'tooltip-bg-color': var(--df-color-warning-main-default-background),
-    'focus-box-shadow': $input-btn-focus-box-shadow,
+    'focus-box-shadow': df.$df-focus-box-shadow,
     'border-color': var(--df-color-warning-alt-default-border)
   )
 ) !default;

package/scss/components/icon/_amadeus-icon.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 .df-logo-dim {
   height: 0.8125rem;

package/scss/components/inputs/_inputs.mixin.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use 'sass:selector';
 
 @mixin df-input-with-icon-validation-state($state, $color, $position) {
   $df-form-validation-states-names: (
@@ -31,15 +30,3 @@
     }
   }
 }
-
-@mixin df-iwi-root-start($parent) {
-  @at-root #{selector.replace(&, '.input-group', $parent + '> div.input-group:first-of-type')} {
-    @content;
-  }
-}
-
-@mixin df-iwi-root-end($parent) {
-  @at-root #{selector.replace(&, '.input-group', $parent + '> div.input-group:last-of-type')} {
-    @content;
-  }
-}

package/scss/components/inputs/_inputs.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use 'sass:string';
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 @use 'inputs.mixin' as input-mixins;
 
 .df-disabled {
@@ -131,28 +131,15 @@ input[type='search']::-webkit-search-decoration {
   }
 }
 
+.input-group:has(:is(.ng-invalid.ng-touched, .is-invalid)) {
+  @extend .is-invalid;
+}
+
 :is(.input-group.df-input-append, .input-group:has(input.df-input-withicon):has(.input-group-append)) {
   :is(input.df-input-withicon.append, .df-input-withicon:has(~ .input-group-append)) {
     border-inline-end-color: transparent; // override mandatory
-
-    @include input-mixins.df-iwi-root-end('.df-input-datepicker-range') {
-      border-left: none !important;
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
-    }
-    @include input-mixins.df-iwi-root-start('.df-input-datepicker-range.df-focused') {
-      border-inline-start: var(--df-color-primary-main-default-border) !important;
-    }
-
-    @include input-mixins.df-iwi-root-start('.df-input-datepicker-range.df-focused') {
-      border-block: var(--df-color-primary-main-default-border) !important;
-    }
-
-    @include input-mixins.df-iwi-root-end('.df-input-datepicker-range.df-focused') {
-      border-block: var(--df-color-primary-main-default-border) !important;
-    }
-
     box-shadow: none; // override mandatory
+
     &:focus-visible {
       border-inline-end-color: transparent; // override mandatory
       box-shadow: none; // override mandatory
@@ -172,26 +159,6 @@ input[type='search']::-webkit-search-decoration {
     border-start-start-radius: 0;
     border-end-start-radius: 0;
     padding-inline: var(--df-spacing-3);
-
-    @include input-mixins.df-iwi-root-start('.df-input-datepicker-range') {
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
-      border-inline-end: none;
-    }
-
-    @include input-mixins.df-iwi-root-end('.df-input-datepicker-range.df-focused') {
-      border-inline-end: #{$df-focused-border} !important;
-    }
-
-    @include input-mixins.df-iwi-root-start('.df-input-datepicker-range.df-focused') {
-      border-top: #{$df-focused-border} !important;
-      border-bottom: #{$df-focused-border} !important;
-    }
-
-    @include input-mixins.df-iwi-root-end('.df-input-datepicker-range.df-focused') {
-      border-top: #{$df-focused-border} !important;
-      border-bottom: #{$df-focused-border} !important;
-    }
   }
 
   &.df-focused .input-group-append {

package/scss/components/inputs/_inputs.variables.scss

@@ -1,6 +1,11 @@
+@use '../../common.variables' as df;
+
 $input-padding-x: var(--df-spacing-3) !default;
 $input-padding-x-sm: var(--df-spacing-3) !default;
 $input-padding-x-lg: var(--df-spacing-3) !default;
+$input-padding-y: 0.3125rem !default;
+$input-padding-y-sm: 0.21875rem !default;
+$input-padding-y-lg: 0.59375rem !default;
 
 $input-bg: var(--df-color-neutral-alt-default-background) !default;
 $input-disabled-color: var(--df-color-disabled-main-foreground) !default;
@@ -18,3 +23,5 @@ $input-plaintext-color: var(--df-color-neutral-alt-default-foreground) !default;
 
 $input-group-addon-bg: var(--df-color-addon-background) !default;
 $input-group-addon-padding-x: var(--df-spacing-3) !default;
+
+$input-focus-box-shadow: df.$df-focus-box-shadow !default;

package/scss/components/link/_link.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 a {
   color: var(--df-link-color-primary-default-foreground);