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

package/package.json

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

package/scss/_variables.scss

@@ -27,7 +27,7 @@
 @import 'components/link/link.variables';
 @import 'components/list-group/list-group.variables';
 @import 'components/modal/modal.variables';
-@import 'components/navbar/navbar.variables';
+@import 'components/navbar-deprecated/navbar.variables';
 @import 'components/pagination/pagination.variables';
 @import 'components/popover/popover.variables';
 @import 'components/progressbar/progressbar.variables';

package/scss/bootstrap/_rtl-styles-override.scss

@@ -1,7 +1,8 @@
 @use 'sass:map';
+@use 'sass:meta';
 
 @if $df-enable-rtl {
-  [dir='rtl'] body {
+  [dir='rtl'] #{if(meta.variable-exists('df-css-namespace-selector'), $df-css-namespace-selector, 'body')} {
     text-align: right;
     // Navbar overrides
     .nav {

package/scss/bundle.scss

@@ -12,7 +12,7 @@
 @import 'components/fonts/multi-lang.mixins';
 @import 'common.mixins';
 
-@import 'components/navbar/navbar.mixins';
+@import 'components/navbar-deprecated/navbar.mixins';
 
 // Root
 @import 'bootstrap/scss/root';
@@ -79,7 +79,7 @@
 @import 'components/pagination/pagination';
 @import 'components/badge/badge';
 @import 'components/icon/amadeus-icon';
-@import 'components/navbar/navbar';
+@import 'components/navbar-deprecated/navbar';
 @import 'components/tabs/tabs';
 @import 'components/checkbox/checkbox';
 @import 'components/radio/radio';
@@ -105,8 +105,6 @@
 @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';

package/scss/components/accordion/_accordion.scss

@@ -29,6 +29,10 @@
         background-color: var(--df-color-primary-alt-hovered-background);
         color: var(--df-color-neutral-alt-default-foreground);
 
+        .df-subtitle {
+          color: var(--df-color-neutral-alt-hovered-foreground);
+        }
+
         &::after {
           background-color: var(--df-color-primary-alt-hovered-foreground);
         }
@@ -140,6 +144,12 @@
     .accordion-button {
       &:not(.collapsed) {
         box-shadow: 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);
+        }
       }
 
       &:focus-visible {
@@ -184,6 +194,10 @@
         background-color: var(--df-color-primary-alt-active-background);
         --df-inner-box-shadow-color: var(--df-color-primary-alt-active-background);
         --df-accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
+
+        .df-subtitle {
+          color: var(--df-color-neutral-alt-hovered-foreground);
+        }
       }
 
       &:focus-within {

package/scss/components/alert/_alert.scss

@@ -7,6 +7,12 @@
   border-style: solid; //need to define it for `tip alert` that is not present in bootstrap
   font-size: var(--df-typo-sizing-default);
 
+  &.alert-dismissible {
+    //overriding bootstrap padding-right for dismissible alert to support RTL
+    //TODO: remove if bootstrap fixes it in future release
+    padding-inline-end: $alert-dismissible-padding-r;
+  }
+
   // Alert collapsible
   hr {
     margin-block: var(--df-spacing-5);
@@ -140,3 +146,9 @@
     top: 7rem;
   }
 }
+
+.df-topnav:has(nav:nth-child(2)) ~ .df-app-container-content {
+  .df-page-alert {
+    top: 7rem;
+  }
+}

package/scss/components/card/_card.scss

@@ -25,15 +25,11 @@
     margin-block-end: var(--df-spacing-5);
   }
 
-  &.border-0 {
-    box-shadow: none;
-  }
-
-  &.btn-outline-primary {
+  &.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/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/popover/_popover.namespace.scss

@@ -39,7 +39,7 @@
   @include reset-text();
   @include font-size(var(--#{$prefix}popover-font-size));
   // Allow breaking very long words so they don't overflow the popover's bounds
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   background-color: var(--#{$prefix}popover-bg);
   background-clip: padding-box;
   border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);

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/stepper/_stepper.scss

@@ -41,6 +41,8 @@
     background-color: var(--df-color-inert-neutral-main-pageBackground);
     border: 1px solid transparent; // override to have same border as btn
     gap: 0;
+    // position relative to be above the line when the focus box-shadow is active
+    position: relative;
 
     --df-box-shadow-color: currentColor;
     --df-btn-active-border-color: transparent;

package/scss/components/tooltip/_tooltip.namespace.scss

@@ -30,7 +30,7 @@
   @include reset-text();
   @include font-size(var(--#{$prefix}tooltip-font-size));
   // Allow breaking very long words so they don't overflow the tooltip's bounds
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   opacity: 0;
 
   &.show {

package/scss/core.scss

@@ -0,0 +1,42 @@
+// Minimal global prerequisites for rendering encapsulated DF components
+@use '@design-factory/tokens/css/root-light.css';
+@use '@design-factory/tokens/css/root-dark.css';
+@use './components/fonts/icon-font';
+@use './components/fonts/font-awesome-icons';
+
+// These two files still rely on Sass @import-style shared globals (`$font-path`).
+@import './common.variables';
+@import './components/fonts/fonts-family';
+
+// Global page baseline.
+body {
+  margin: 0;
+  font-family: var(--df-typo-font-primaryFamily);
+  font-size: var(--df-typo-sizing-default);
+  font-weight: var(--df-typo-weight-regular);
+  line-height: 1.5;
+  color: var(--df-color-inert-neutral-main-foreground);
+  background-color: var(--df-color-inert-neutral-main-pageBackground);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+// Form/control inheritance baseline. Without this, native controls (like
+// alert close buttons) can keep browser-default fonts/line-height and look
+// different from DF-styled text.
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}

package/scss/namespace.scss

@@ -14,7 +14,7 @@
 @import 'bootstrap/scss/root';
 @import 'common.root';
 
-@import 'components/navbar/navbar.mixins';
+@import 'components/navbar-deprecated/navbar.mixins';
 
 @import '@design-factory/tokens/css/root-dark';
 
@@ -88,7 +88,7 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
   @import 'components/pagination/pagination';
   @import 'components/badge/badge';
   @import 'components/icon/amadeus-icon';
-  @import 'components/navbar/navbar';
+  @import 'components/navbar-deprecated/navbar';
   @import 'components/tabs/tabs';
   @import 'components/checkbox/checkbox';
   @import 'components/radio/radio';
@@ -114,8 +114,6 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
   @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';
@@ -123,8 +121,6 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
   @import 'components/tooltip/tooltip';
   @import 'components/waves/waves';
 
-  @import 'bootstrap/rtl-styles-override';
-
   // 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';
@@ -184,4 +180,6 @@ $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/drawer/_drawer.scss

@@ -1,154 +0,0 @@
-.df-drawer {
-  --df-drawer-z-index: 2010;
-  --df-drawer-size: max-content;
-  --df-drawer-min-size: 0;
-  --df-drawer-max-size: 100vw;
-
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-width: 0;
-  max-width: none;
-  height: var(--df-drawer-size);
-  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);
-    min-width: var(--df-drawer-min-size);
-    max-width: var(--df-drawer-max-size);
-    height: 100%;
-    min-height: 0;
-    max-height: none;
-  }
-
-  &.collapsing {
-    min-width: 0px !important;
-    min-height: 0px !important;
-  }
-
-  background-color: var(--df-color-inert-neutral-main-background);
-  z-index: var(--df-drawer-z-index);
-  position: fixed;
-
-  @include transition(0.25s ease);
-
-  &:not(.show) {
-    display: block;
-  }
-
-  &.inline-start {
-    inset-block: 0;
-    inset-inline-start: 0;
-
-    transform: translateX(-100%);
-    &.show {
-      transform: translateX(0);
-    }
-  }
-
-  &.inline-end {
-    inset-block: 0;
-    inset-inline-end: 0;
-
-    transform: translateX(100%);
-    &.show {
-      transform: translateX(0);
-    }
-
-    &.inline-start {
-      transform: translateX(0);
-      &.show {
-        transform: translateX(0);
-      }
-    }
-
-    .df-drawer-splitter {
-      inset-inline-end: auto;
-    }
-  }
-
-  // Block (top/bottom)
-  &.block-start {
-    inset-inline: 0;
-    inset-block-start: 0;
-
-    transform: translateY(-100%);
-    &.show {
-      transform: translateY(0);
-    }
-
-    .df-drawer-splitter {
-      inset-block-start: auto;
-    }
-  }
-
-  &.block-end {
-    inset-inline: 0;
-    inset-block-end: 0;
-
-    transform: translateY(100%);
-    &.show {
-      transform: translateY(0);
-    }
-  }
-
-  // Vertical splitter (default for inline drawers)
-  .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 .df-drawer-splitter,
-  &.block-end .df-drawer-splitter {
-    inset-inline: 0;
-    width: auto;
-    height: 8px;
-    cursor: ns-resize;
-  }
-}
-
-.df-drawer-backdrop {
-  --df-drawer-backdrop-z-index: 2000;
-  --df-drawer-backdrop-opacity: 0.9;
-
-  position: fixed;
-  inset: 0;
-  background-color: var(--df-color-backdrop-background);
-  z-index: var(--df-drawer-backdrop-z-index);
-
-  &.show {
-    opacity: var(--df-drawer-backdrop-opacity);
-    pointer-events: auto;
-  }
-}