@design-factory/styles 21.1.0 → 22.0.0-next.0

package/package.json

@@ -2,14 +2,14 @@
   "name": "@design-factory/styles",
   "description": "Amadeus design system styles",
   "license": "BSD-3-Clause",
-  "version": "21.1.0",
+  "version": "22.0.0-next.0",
   "type": "module",
   "peerDependencies": {
     "bootstrap": "5.3.8",
-    "@agnos-ui/core-bootstrap": "~0.10.0",
-    "@design-factory/tokens": "21.1.0",
+    "@agnos-ui/core-bootstrap": "~0.11.0",
+    "@design-factory/tokens": "22.0.0-next.0",
     "ag-grid-community": "^35.0.0",
-    "@ng-select/ng-select": "^21.0.0"
+    "@ng-select/ng-select": "^23.0.0"
   },
   "peerDependenciesMeta": {
     "bootstrap": {

package/scss/bundle.scss

@@ -104,7 +104,6 @@
 @import 'components/breadcrumbs/breadcrumbs';
 @import 'components/stepper/stepper';
 @import 'components/carousel/carousel';
-@import 'components/sidenav/sidenav-deprecated';
 @import 'components/footer/footer';
 @import 'components/toast/toast';
 @import 'components/scrollspy/scrollspy';

package/scss/components/accordion/_accordion.mixin.scss

@@ -9,7 +9,7 @@
       //10.5px
       'border-radius': var(--df-borderRadius-main-small)
     ),
-    'default': (
+    'md': (
       'icon-width': var(--df-icons-sizing-default),
       'font-size': var(--df-typo-sizing-default),
       'padding-y': 0.75rem,

package/scss/components/accordion/_accordion.scss

@@ -26,6 +26,11 @@
       &:hover {
         --df-inner-box-shadow-color: var(--df-color-primary-alt-hovered-background);
         --df-accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
+
+        .df-subtitle {
+          color: var(--df-color-neutral-alt-hovered-foreground);
+        }
+
         background-color: var(--df-color-primary-alt-hovered-background);
         color: var(--df-color-neutral-alt-default-foreground);
 
@@ -36,10 +41,6 @@
         &::after {
           background-color: var(--df-color-primary-alt-hovered-foreground);
         }
-
-        .df-subtitle {
-          color: var(--df-color-neutral-alt-hovered-foreground);
-        }
       }
 
       &:active {
@@ -61,8 +62,7 @@
       opacity: 1;
       cursor: not-allowed;
 
-      .df-subtitle,
-      .df-accordion-number {
+      .df-subtitle {
         color: var(--df-color-disabled-main-foreground);
       }
 
@@ -72,7 +72,7 @@
     }
 
     .df-accordion-number {
-      color: var(--df-color-subtext-foreground);
+      color: var(--df-color-inert-neutral-main-foreground);
       font-weight: var(--df-typo-weight-regular);
     }
 
@@ -151,12 +151,6 @@
             inset 0 calc(-1 * var(--df-accordion-border-width)) 0 var(--df-accordion-border-color);
         }
       }
-
-      &:focus-visible {
-        box-shadow:
-          var(--df-accordion-btn-focus-box-shadow),
-          inset 0 calc(-1 * var(--df-accordion-border-width)) 0 var(--df-accordion-border-color);
-      }
     }
   }
 
@@ -219,7 +213,7 @@
   }
 
   //sizing
-  @include accordion-mixin.df-sizes('default');
+  @include accordion-mixin.df-sizes('md');
 
   &.df-accordion-sm {
     @include accordion-mixin.df-sizes('sm');

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

@@ -1,6 +1,6 @@
 @use '../../common.variables' as df;
 
-$btn-font-family: var(--df-typo-font-primaryFamily), sans-serif !default;
+$btn-font-family: var(--df-typo-font-primaryFamily), var(--df-typo-font-secondaryFamily) !default;
 $btn-font-weight: var(--df-typo-weight-medium) !default;
 $btn-disabled-opacity: 1 !default;
 $btn-link-focus-shadow-rgb: unset !default;

package/scss/components/card/_card.scss

@@ -25,15 +25,11 @@
     margin-block-end: var(--df-spacing-5);
   }
 
-  &.border-0 {
-    box-shadow: none;
-  }
-
   &.btn.btn-outline-primary {
     display: block;
     text-align: start;
     color: var(--df-color-neutral-alt-default-foreground);
-    border: none;
+    border: 1px solid var(--df-color-inert-neutral-main-border);
     border-radius: var(--df-borderRadius-main-small);
     height: inherit;
 
@@ -42,6 +38,7 @@
 
       &:not(:hover):not(:active) {
         color: var(--df-color-neutral-alt-default-foreground);
+        border-color: var(--df-color-inert-neutral-main-border);
       }
     }
 
@@ -52,16 +49,16 @@
 
       &:hover {
         background-color: var(--df-color-primary-alt-hovered-background);
-        border: none;
+        border-color: var(--df-color-inert-neutral-main-border);
 
         &:active {
           background-color: var(--df-btn-active-bg);
-          border: none;
+          border-color: var(--df-color-inert-neutral-main-border);
         }
       }
 
       &:active {
-        border: none;
+        border-color: var(--df-color-inert-neutral-main-border);
       }
     }
 
@@ -136,7 +133,6 @@
     border-radius: var(--df-card-border-radius);
 
     .card {
-      box-shadow: none;
       border-radius: 0;
 
       &:not(:last-of-type) {

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

@@ -3,9 +3,10 @@
 $card-spacer-y: var(--df-spacing-5) !default;
 $card-spacer-x: var(--df-spacing-5) !default;
 $card-title-spacer-y: var(--df-spacing-5) !default;
-$card-border-width: 0 !default;
+$card-border-width: 1px !default;
 $card-border-radius: var(--df-border-radius-lg) !default;
-$card-box-shadow: df.$df-box-shadow !default;
+$card-border-color: var(--df-color-inert-neutral-main-border) !default;
+$card-box-shadow: none !default;
 $card-inner-border-radius: var(--df-borderRadius-main-medium) !default;
 $card-cap-padding-y: var(--df-spacing-3) !default;
 $card-cap-padding-x: var(--df-spacing-5) !default;

package/scss/components/datepicker/_datepicker.scss

@@ -52,6 +52,7 @@
 
 ngb-datepicker {
   border-radius: var(--df-borderRadius-main-medium);
+  border: 1px solid var(--df-color-inert-neutral-main-border) !important; // override ng-bootstrap default border
   padding: var(--df-spacing-5);
   box-shadow: df.$df-box-shadow;
   background-color: var(--df-color-inert-neutral-main-background);

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

@@ -1,6 +1,7 @@
 @use '../../common.variables' as df;
 
-$dropdown-border-width: 0 !default;
+$dropdown-border-width: 1px !default;
+$dropdown-border-color: var(--df-color-inert-neutral-main-border) !default;
 $dropdown-link-hover-bg: var(--df-color-primary-alt-hovered-background) !default;
 $dropdown-link-hover-color: var(--df-color-neutral-alt-hovered-foreground) !default;
 $dropdown-link-active-bg: var(--df-color-primary-alt-active-background) !default;

package/scss/components/fonts/_fonts.variables.scss

@@ -10,7 +10,7 @@ $lead-font-size: var(--df-typo-sizing-2xlarge) !default;
 
 $headings-margin-bottom: var(--df-spacing-3) !default;
 $headings-font-weight: var(--df-typo-weight-medium) !default;
-$headings-font-family: var(--df-typo-font-primaryFamily), sans-serif !default;
+$headings-font-family: var(--df-typo-font-primaryFamily), var(--df-typo-font-secondaryFamily) !default;
 $headings-line-height: 1.5 !default;
 
 $font-size-base: var(--df-typo-sizing-default) !default; // Assumes the browser default, typically `16px`
@@ -65,4 +65,4 @@ $display-line-height: 1.1 !default;
 
 $small-font-size: $font-size-sm !default;
 
-$font-family-sans-serif: var(--df-typo-font-primaryFamily), sans-serif !default;
+$font-family-sans-serif: var(--df-typo-font-primaryFamily), var(--df-typo-font-secondaryFamily) !default;

package/scss/components/form/_form.scss

@@ -48,6 +48,7 @@
   font-family: 'Font Awesome 6 Pro', sans-serif;
   font-weight: 300;
   margin-inline-end: var(--df-spacing-2);
+  display: inline-block;
 }
 
 .form-control-sm {
@@ -85,6 +86,10 @@
   .warning-feedback {
     font-size: var(--df-typo-sizing-xsmall);
   }
+
+  .form-text {
+    font-size: var(--df-typo-sizing-xsmall);
+  }
 }
 
 // forms size large
@@ -101,6 +106,16 @@
   .input-group:has(input.df-input-withicon):has(.input-group-prepend) .input-group-prepend {
     border-radius: var(--df-border-radius-lg);
   }
+
+  .invalid-feedback,
+  .valid-feedback,
+  .warning-feedback {
+    font-size: var(--df-typo-sizing-default);
+  }
+
+  .form-text {
+    font-size: var(--df-typo-sizing-default);
+  }
 }
 
 .ng-invalid.ng-touched {

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

@@ -18,7 +18,6 @@ $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': (
@@ -38,15 +37,6 @@ $form-validation-states: (
     'tooltip-bg-color': var(--df-color-danger-main-default-background),
     'focus-box-shadow': df.$df-focus-box-shadow,
     'border-color': var(--df-color-danger-alt-default-border)
-  ),
-  'warning': (
-    'color': var(--df-color-warning-alt-default-foreground),
-    // not used as we set $enable-validation-icons to false
-    'icon': '',
-    'tooltip-color': var(--df-color-warning-main-default-foreground),
-    'tooltip-bg-color': var(--df-color-warning-main-default-background),
-    'focus-box-shadow': df.$df-focus-box-shadow,
-    'border-color': var(--df-color-warning-alt-default-border)
   )
 ) !default;
 

package/scss/components/link/_link.scss

@@ -87,19 +87,27 @@ a {
     box-shadow 0.15s ease-in-out
   );
 
-  &[href*='//'],
-  &[href*='mailto'],
-  &.df-link-external {
+  &:is([href*='//'], [href*='mailto'], &.df-link-external) {
     .fa-external-link {
       display: none;
     }
 
-    &:not(.df-link-icononly):after {
+    &:not(.df-link-icononly):not(.df-btn-icononly):after {
       content: '\00a0\f08e'; // Empty space + .fa-external-link
       font-family: 'Font Awesome 6 Pro', sans-serif;
       position: relative;
       bottom: -0.08em;
     }
+    // no need of empty space when inside a layout with gap provided (.btn, .df-btn, .df-sidenav-button)
+    &:not(.df-btn-icononly).df-btn:after {
+      content: '\f08e'; // .fa-external-link
+    }
+    &:not(.df-link-icononly).btn:after {
+      content: '\f08e'; // .fa-external-link
+    }
+    &:not(.df-link-icononly).df-sidenav-button:after {
+      content: '\f08e'; // .fa-external-link
+    }
   }
 }
 

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

@@ -1,9 +1,9 @@
 $modal-backdrop-bg: var(--df-color-backdrop-background) !default;
 $modal-backdrop-opacity: 1 !default;
 $modal-content-bg: var(--df-color-inert-neutral-main-background) !default;
-$modal-content-border-color: none !default;
+$modal-content-border-color: var(--df-color-inert-neutral-main-border) !default;
 $modal-content-border-radius: var(--df-borderRadius-main-large) !default;
-$modal-content-border-width: 0 !default;
+$modal-content-border-width: 1px !default;
 $modal-content-inner-border-radius: var(--df-borderRadius-main-large) !default;
 $modal-footer-margin-between: 0 !default;
 $modal-header-border-width: 0px !default;

package/scss/components/navbar-deprecated/_navbar.scss

@@ -47,7 +47,7 @@
     font-weight: var(--df-typo-weight-medium);
     padding: calc((3.5rem - var(--df-typo-sizing-large) * $line-height-base) / 2) var(--df-spacing-5);
 
-    font-family: var(--df-typo-font-primaryFamily), sans-serif;
+    font-family: var(--df-typo-font-primaryFamily), var(--df-typo-font-secondaryFamily);
     outline: none;
 
     &:focus-visible {

package/scss/components/radio/_radio.scss

@@ -5,7 +5,9 @@ fieldset[role='radiogroup'] > legend {
 }
 
 .form-check-input[type='radio'] {
-  --df-box-shadow-color: var(--df-color-primary-main-default-border);
+  &:not(.is-invalid):not(.ng-invalid.ng-touched) {
+    --df-box-shadow-color: var(--df-color-primary-main-default-border);
+  }
 
   &:checked {
     background-image: none;

package/scss/components/scrollspy/_scrollspy.scss

@@ -11,7 +11,6 @@
   padding-bottom: 0.28125rem; // 4.5px not a token in Figma
   margin-block-end: 1px;
   font-size: var(--df-typo-sizing-small);
-  display: flex;
 
   &.active {
     --df-inner-box-shadow-color: var(--df-color-primary-alt-active-background);

package/scss/components/select/_select.scss

@@ -420,6 +420,7 @@ html:root[data-df-theme='dark'] {
   .ng-dropdown-panel {
     background-color: var(--df-color-inert-neutral-main-background);
     border-radius: var(--df-borderRadius-main-medium);
+    border: 1px solid var(--df-color-inert-neutral-main-border);
     box-shadow: df.$df-box-shadow;
     overflow: auto;
     width: initial;

package/scss/components/speechbubble/_speechbubble.scss

@@ -24,10 +24,10 @@
   }
 
   li {
-    padding: 0.125em;
-    line-height: 1.5;
+    padding: 0.375em var(--df-spacing-5);
     border-radius: var(--df-borderRadius-main-medium);
     margin: #{$df-speech-gap} #{2 * $df-speech-gap};
+    line-height: 1.25;
 
     &:last-child {
       position: relative;
@@ -42,11 +42,6 @@
     }
   }
 
-  p {
-    padding: 0.375em var(--df-spacing-5);
-    margin-bottom: 0;
-  }
-
   &.df-speech-left {
     @include ltr {
       @include speechbubble-mixin.speech-orientation('left', $df-speech-tail-factor, $df-speech-gap, $df-speech-size);

package/scss/components/table/_advancedtables.scss

@@ -44,7 +44,7 @@
   --ag-header-height: 42px;
   --ag-row-height: 44px;
   --ag-data-color: var(--df-color-neutral-alt-default-foreground);
-  --ag-font-family: var(--df-typo-font-primaryFamily), sans-serif;
+  --ag-font-family: var(--df-typo-font-primaryFamily), var(--df-typo-font-secondaryFamily);
   --ag-header-background-color: var(--df-color-primary-subtle-background);
   --ag-header-cell-hover-background-color: var(--df-color-primary-alt-hovered-background);
   --ag-selected-row-background-color: var(--df-color-primary-alt-active-background);

package/scss/core.scss

@@ -11,7 +11,7 @@
 // Global page baseline.
 body {
   margin: 0;
-  font-family: var(--df-typo-font-primaryFamily);
+  font-family: var(--df-typo-font-primaryFamily), var(--df-typo-font-secondaryFamily);
   font-size: var(--df-typo-sizing-default);
   font-weight: var(--df-typo-weight-regular);
   line-height: 1.5;

package/scss/namespace.scss

@@ -113,7 +113,6 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
   @import 'components/breadcrumbs/breadcrumbs';
   @import 'components/stepper/stepper';
   @import 'components/carousel/carousel';
-  @import 'components/sidenav/sidenav-deprecated';
   @import 'components/footer/footer';
   @import 'components/toast/toast';
   @import 'components/scrollspy/scrollspy';
@@ -180,6 +179,5 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
 @import 'components/spinner/spinner.namespace';
 @import 'components/tooltip/tooltip.namespace';
 @import 'components/typeahead/typeahead.namespace';
-
 @import 'bootstrap/rtl-styles-override';
 /* stylelint-enable no-invalid-position-at-import-rule */

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

@@ -1,165 +0,0 @@
-@use '../../common.variables.scss' as df;
-
-.df-sidenav-toggler {
-  @extend .navbar-toggler;
-}
-
-.df-sidenav-toggler-icon {
-  line-height: 1.5rem;
-  display: block;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.df-sidenav-light {
-  width: 16.875rem;
-  background-color: var(--df-color-inert-neutral-main-background);
-  overflow-x: hidden;
-  border-inline-end: 1px solid var(--df-color-inert-neutral-main-border);
-
-  & > .df-scroll-content {
-    padding-top: var(--df-spacing-5);
-    padding-inline: var(--df-spacing-3);
-  }
-
-  // Three level of sidenav setup
-  .df-sidenav-list {
-    padding-inline: 0;
-
-    li {
-      list-style-type: none;
-    }
-
-    > .df-sidenav-list-withactivated > :is(button, a) {
-      font-weight: var(--df-typo-weight-bold);
-    }
-
-    .df-sidenav-list {
-      .df-sidenav-item {
-        // Second level override
-        padding-inline-start: calc(var(--df-spacing-5) + 0.5rem);
-      }
-
-      .df-sidenav-list {
-        font-size: var(--df-typo-sizing-small);
-
-        .df-sidenav-item {
-          // Third level override
-          padding-inline-start: calc(var(--df-spacing-5) + 1.25rem);
-        }
-      }
-    }
-
-    .df-sidenav-item {
-      .df-sidenav-collapse-icon {
-        color: var(--df-color-primary-alt-default-foreground);
-      }
-
-      width: 100%;
-      color: var(--df-color-inert-neutral-main-foreground);
-      position: relative; // mandatory for the focus shadow
-      border: none; // reset the default border
-      margin: 0 0 1px 0;
-      padding-top: 0;
-      padding-bottom: 0;
-      text-align: start;
-      padding-inline: var(--df-spacing-5);
-      background-color: var(--df-color-inert-neutral-main-background);
-      height: 2.5rem;
-      border-radius: var(--df-borderRadius-main-medium);
-
-      &:hover {
-        .df-sidenav-collapse-icon {
-          color: var(--df-color-primary-alt-hovered-foreground);
-        }
-      }
-      &:active {
-        .df-sidenav-collapse-icon {
-          color: var(--df-color-primary-alt-pressed-foreground);
-        }
-      }
-
-      &:not(.df-sidenav-title):hover {
-        background-color: var(--df-color-primary-alt-hovered-background);
-        &:active {
-          background-color: var(--df-color-primary-alt-pressed-background);
-        }
-      }
-
-      &:is(:focus-visible, .focus) {
-        // Title can never be focus
-        --df-box-shadow-color: var(--df-color-focus-main-border);
-        box-shadow: df.$df-focus-box-shadow;
-        outline: none;
-        z-index: 2;
-      }
-
-      &.active {
-        // Title are never active
-        background-color: var(--df-color-primary-alt-active-background);
-        color: var(--df-color-primary-alt-active-foreground);
-        font-weight: var(--df-typo-weight-bold);
-      }
-
-      &.df-sidenav-title {
-        height: 2.75rem;
-        font-size: var(--df-typo-sizing-small);
-      }
-    }
-  }
-
-  &.df-collapsing {
-    position: absolute;
-    height: 100%;
-    width: 0;
-    overflow: hidden;
-    @include transition(width 0.5s ease);
-  }
-
-  &.df-minimizing {
-    position: absolute;
-    width: 50px;
-    overflow: hidden;
-    @include transition(width 0.5s ease);
-  }
-
-  &.df-sidenav-menu-overlay {
-    position: absolute;
-    height: 100%;
-    z-index: $zindex-fixed + 7;
-  }
-
-  .df-sidenav-icon {
-    font-size: 1.25rem;
-    width: 1.5rem;
-    padding: 2px 2px 2px 2px;
-    margin-inline: -0.28125rem 0.5rem;
-  }
-}
-
-.df-main-content {
-  width: calc(100vw - 16.875rem);
-}
-
-.df-sidenav-wrapper {
-  position: relative;
-  max-width: 100%;
-  overflow: hidden; // in case the content can not be reduced more than the screen.
-}
-
-df-sidenav.df-collapse:not(.df-show) {
-  display: none !important;
-}
-
-.df-sidenav-overlay {
-  position: absolute;
-  background-color: var(--df-color-backdrop-background);
-  opacity: 0.5;
-  width: 100%;
-  height: 100%;
-  z-index: $zindex-fixed + 6;
-}
-
-.df-minimized:not(.df-show) {
-  width: 50px;
-}