@design-factory/styles 21.0.0-next.0

package/scss/bootstrap/helpers/_color-bg.scss

@@ -0,0 +1,14 @@
+@each $color in ('neutral', 'primary', 'success', 'danger', 'warning', 'info', 'tip', 'chromatic1', 'chromatic2') {
+  .text-bg-#{$color} {
+    color: var(--df-color-#{$color}-main-default-foreground) !important;
+    background-color: var(--df-color-#{$color}-main-default-background) !important;
+  }
+}
+.text-bg-neutral-alt {
+  color: var(--df-color-neutral-alt-default-foreground) !important;
+  background-color: var(--df-color-neutral-alt-default-background) !important;
+}
+.text-bg-neutral-soft {
+  color: var(--df-color-neutral-soft-default-foreground) !important;
+  background-color: var(--df-color-neutral-soft-default-background) !important;
+}

package/scss/bundle.scss

@@ -0,0 +1,120 @@
+@import './themes/brand2023/variables';
+@import 'variables';
+@import 'bootstrap/maps';
+@import 'bootstrap/scss/maps';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/mixins-override';
+@import 'components/fonts/fonts-family';
+@import 'components/fonts/multi-lang.mixins';
+@import 'common.mixins';
+
+// Root
+@import 'bootstrap/scss/root';
+@import 'common.root';
+
+/** BOOTSTRAP IMPORTS **/
+// Components
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/type';
+@import 'bootstrap/scss/images';
+@import 'bootstrap/scss/containers';
+@import 'bootstrap/scss/grid';
+@import 'bootstrap/scss/tables';
+@import 'bootstrap/scss/forms';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/dropdown';
+@import 'bootstrap/scss/button-group';
+@import 'bootstrap/scss/nav';
+@import 'bootstrap/scss/navbar';
+@import 'bootstrap/scss/card';
+@import 'bootstrap/scss/accordion';
+@import 'bootstrap/scss/breadcrumb';
+@import 'bootstrap/scss/pagination';
+@import 'bootstrap/scss/badge';
+@import 'bootstrap/scss/alert';
+@import 'bootstrap/scss/progress';
+@import 'bootstrap/scss/list-group';
+@import 'bootstrap/scss/close';
+@import 'bootstrap/scss/modal';
+@import 'bootstrap/scss/tooltip';
+@import 'bootstrap/scss/popover';
+@import 'bootstrap/scss/carousel';
+@import 'bootstrap/scss/spinners';
+@import 'bootstrap/scss/utilities';
+@import 'bootstrap/scss/offcanvas';
+@import 'bootstrap/scss/placeholders';
+@import 'bootstrap/scss/toasts';
+
+// Helpers
+@import 'bootstrap/helpers';
+
+// Utilities
+@import 'bootstrap/utilities-override';
+@import 'bootstrap/scss/utilities/api';
+
+/** DESIGN FACTORY IMPORTS **/
+@import '@design-factory/tokens/css/root-dark';
+
+@import 'common';
+@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';
+@import 'components/modal/modal';
+@import 'components/typeahead/typeahead';
+@import 'components/alert/alert';
+@import 'components/datepicker/datepicker';
+@import 'components/form/form';
+@import 'components/pagination/pagination';
+@import 'components/badge/badge';
+@import 'components/icon/amadeus-icon';
+@import 'components/navbar/navbar';
+@import 'components/tabs/tabs';
+@import 'components/checkbox/checkbox';
+@import 'components/radio/radio';
+@import 'components/toggle/toggle';
+@import 'components/inputs/inputs';
+@import 'components/card/card';
+@import 'components/list-group/list-group';
+@import 'components/brand-color/brand-color';
+@import 'components/link/link';
+@import 'components/table/table';
+@import 'components/table/advancedtables';
+@import 'components/popover/popover';
+@import 'components/slider/slider';
+@import 'components/select/select';
+@import 'components/dropdown/dropdown';
+@import 'components/collapse/collapse';
+@import 'components/progressbar/progressbar';
+@import 'components/spinner/spinner';
+@import 'components/rating/rating';
+@import 'components/speechbubble/speechbubble';
+@import 'components/list/list';
+@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';
+
+// 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.mixin.scss

@@ -0,0 +1,94 @@
+@use 'sass:map';
+
+@mixin df-sizes($size) {
+  $accordion-sizing: (
+    'sm': (
+      'icon-width': var(--df-icons-sizing-small),
+      'font-size': var(--df-typo-sizing-small),
+      'padding-y': 0.65625rem,
+      //10.5px
+      'border-radius': var(--df-borderRadius-main-small)
+    ),
+    'default': (
+      'icon-width': var(--df-icons-sizing-default),
+      'font-size': var(--df-typo-sizing-default),
+      'padding-y': 0.75rem,
+      //12px
+      'border-radius': var(--df-borderRadius-main-medium)
+    ),
+    'lg': (
+      'icon-width': var(--df-icons-sizing-large),
+      'font-size': var(--df-typo-sizing-large),
+      'padding-y': 0.84375rem,
+      //13.5px
+      'border-radius': var(--df-borderRadius-main-large)
+    )
+  ) !default;
+
+  $icon-with: map.get($accordion-sizing, $size, 'icon-width');
+  $border-radius: map.get($accordion-sizing, $size, 'border-radius');
+
+  .accordion-button {
+    padding-block: map.get($accordion-sizing, $size, 'padding-y');
+    font-size: map.get($accordion-sizing, $size, 'font-size');
+
+    &::after {
+      width: $icon-with;
+      height: $icon-with;
+      background-size: $icon-with;
+    }
+  }
+
+  .accordion-body {
+    font-size: map.get($accordion-sizing, $size, 'font-size');
+  }
+
+  &.df-accordion-reverse {
+    .accordion-button {
+      &::before {
+        width: $icon-with;
+        height: $icon-with;
+        background-size: $icon-with;
+      }
+    }
+  }
+
+  &.df-accordion-radio {
+    .accordion-item:last-of-type {
+      > .accordion-header.collapsed > .accordion-button {
+        border-bottom-left-radius: calc($border-radius - var(--df-accordion-border-width));
+        border-bottom-right-radius: calc($border-radius - var(--df-accordion-border-width));
+      }
+    }
+  }
+
+  .accordion-item {
+    &:first-of-type {
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+
+      .accordion-button {
+        border-top-left-radius: calc($border-radius - var(--df-accordion-border-width));
+        border-top-right-radius: calc($border-radius - var(--df-accordion-border-width));
+      }
+    }
+
+    // Only set a border-radius on the last item if the accordion is collapsed
+    &:last-of-type {
+      border-bottom-left-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+
+      > .accordion-header .accordion-button {
+        &.collapsed {
+          border-bottom-left-radius: calc($border-radius - var(--df-accordion-border-width));
+          border-bottom-right-radius: calc($border-radius - var(--df-accordion-border-width));
+        }
+      }
+
+      > .accordion-collapse {
+        border-bottom-left-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
+    }
+  }
+}

package/scss/components/accordion/_accordion.scss

@@ -0,0 +1,201 @@
+@use 'accordion.mixin' as accordion-mixin;
+
+.accordion {
+  --df-box-shadow-color: var(--df-accordion-active-color);
+
+  .accordion-button {
+    font-weight: var(--df-typo-weight-bold);
+
+    .df-subtitle {
+      font-weight: var(--df-typo-weight-regular);
+    }
+
+    &:not(.collapsed):not(:focus) {
+      box-shadow: none;
+    }
+
+    &::after {
+      background-image: none;
+      background-color: var(--df-color-primary-alt-default-foreground);
+      mask-image: $accordion-button-icon;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+    }
+
+    &:not([aria-disabled='true']):not(.disabled):not([disabled]) {
+      &:hover {
+        --df-inner-box-shadow-color: var(--df-color-primary-alt-hovered-background);
+        --df-accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
+        background-color: var(--df-color-primary-alt-hovered-background);
+        color: var(--df-color-neutral-alt-default-foreground);
+
+        &::after {
+          background-color: var(--df-color-primary-alt-hovered-foreground);
+        }
+      }
+
+      &:active {
+        &::after {
+          background-color: var(--df-color-primary-alt-pressed-foreground);
+        }
+      }
+    }
+
+    &[aria-disabled='true'],
+    &.disabled,
+    &[disabled] {
+      color: var(--df-color-disabled-main-foreground);
+      background-color: var(--df-color-disabled-main-background);
+      opacity: 1;
+      cursor: not-allowed;
+
+      .df-subtitle,
+      .df-accordion-number {
+        color: var(--df-color-disabled-main-foreground);
+      }
+
+      &::after {
+        background-color: var(--df-color-disabled-main-foreground);
+      }
+    }
+
+    .df-accordion-number {
+      color: var(--df-color-subtext-foreground);
+      font-weight: var(--df-typo-weight-regular);
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+
+    &:focus-visible {
+      box-shadow: var(--df-accordion-btn-focus-box-shadow);
+    }
+  }
+
+  // Reverse accordion
+  &.df-accordion-reverse {
+    .accordion-button {
+      &::after {
+        content: none;
+      }
+
+      &::before {
+        flex-shrink: 0;
+        width: $accordion-icon-width;
+        height: $accordion-icon-width;
+        margin-inline-end: 0.5rem;
+        content: '';
+        background-repeat: no-repeat;
+        background-size: $accordion-icon-width;
+        background-color: var(--df-color-primary-alt-default-foreground);
+        mask-image: $accordion-button-icon;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        @include transition($accordion-icon-transition);
+      }
+
+      &:not(.collapsed) {
+        &::before {
+          transform: $accordion-icon-transform;
+        }
+      }
+
+      &:not([aria-disabled='true']):not(.disabled):not([disabled]) {
+        &:hover {
+          &::before {
+            background-color: var(--df-color-primary-alt-hovered-foreground);
+          }
+        }
+
+        &:active {
+          &::before {
+            background-color: var(--df-color-primary-alt-pressed-foreground);
+          }
+        }
+      }
+
+      &[aria-disabled='true'],
+      &.disabled,
+      &[disabled] {
+        &::before {
+          background-color: var(--df-color-disabled-main-foreground);
+        }
+      }
+    }
+  }
+
+  // Accordion with a separator
+  &.df-accordion-withsep {
+    .accordion-button {
+      &:not(.collapsed):not(:focus) {
+        box-shadow: inset 0 calc(-1 * var(--df-accordion-border-width)) 0 var(--df-accordion-border-color);
+      }
+    }
+  }
+
+  // Accordion with radio buttons
+  &.df-accordion-radio {
+    .accordion-item:last-of-type {
+      > .accordion-header.collapsed > .accordion-button {
+        border-bottom-left-radius: $accordion-border-radius;
+        border-bottom-right-radius: $accordion-border-radius;
+      }
+    }
+
+    // setting the cursor to pointer only if clickable
+    .accordion-header.collapsed {
+      .accordion-button:not(.disabled):not([disabled]) {
+        &:hover,
+        & *:hover {
+          cursor: pointer;
+        }
+      }
+
+      .accordion-button.disabled,
+      .accordion-button.disabled[disabled] {
+        &:hover,
+        & *:hover {
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    .accordion-button {
+      padding-inline: var(--df-spacing-5);
+
+      &:has(input[type='radio']:checked) {
+        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};
+      }
+
+      &:focus-within {
+        box-shadow: var(--df-accordion-btn-focus-box-shadow);
+
+        .form-check-input[type='radio']:focus-visible {
+          box-shadow: none;
+        }
+      }
+
+      &:after {
+        content: none;
+      }
+    }
+
+    input:focus {
+      box-shadow: none;
+    }
+  }
+
+  //sizing
+  @include accordion-mixin.df-sizes('default');
+
+  &.df-accordion-sm {
+    @include accordion-mixin.df-sizes('sm');
+  }
+
+  &.df-accordion-lg {
+    @include accordion-mixin.df-sizes('lg');
+  }
+}

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

@@ -0,0 +1,14 @@
+@use '../../new-brand-common.variables' as df;
+
+$accordion-padding-y: var(--df-spacing-4) !default;
+$accordion-padding-x: var(--df-spacing-5) !default;
+$accordion-color: var(--df-color-neutral-alt-default-foreground) !default;
+$accordion-bg: var(--df-color-neutral-alt-default-background) !default;
+$accordion-border-radius: var(--df-borderRadius-main-medium) !default;
+$accordion-body-padding-y: var(--df-spacing-5) !default;
+$accordion-body-padding-x: var(--df-spacing-5) !default;
+$accordion-button-active-bg: $accordion-bg !default;
+$accordion-button-active-color: $accordion-color !default;
+$accordion-button-focus-box-shadow: df.$df-focus-inset-box-shadow !default;
+$accordion-icon-width: 1.15rem !default;
+$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;

package/scss/components/alert/_alert.mixin.scss

@@ -0,0 +1,64 @@
+@use 'sass:map';
+
+@mixin df-sizes($size) {
+  $alert-sizing: (
+    'sm': (
+      'icon-width': var(--df-icons-sizing-small),
+      'font-size': var(--df-typo-sizing-small),
+      'collapse-button-margin-start': var(--df-spacing-3),
+      'collapse-button-gap': var(--df-spacing-2),
+      'height': 2.5rem,
+      //Size from figma
+      'btn-close-padding-block': 18px // needed to center close icon todo: change with wrappers
+    ),
+    'default': (
+      'icon-width': var(--df-icons-sizing-default),
+      'font-size': var(--df-typo-sizing-default),
+      'collapse-button-margin-start': var(--df-spacing-4),
+      'collapse-button-gap': var(--df-spacing-3),
+      'height': 3rem,
+      //Size from figma
+      'btn-close-padding-block': 21.5px // needed to center close icon todo: change with wrappers
+    ),
+    'lg': (
+      'icon-width': var(--df-icons-sizing-large),
+      'font-size': var(--df-typo-sizing-large),
+      'collapse-button-margin-start': var(--df-spacing-5),
+      'collapse-button-gap': var(--df-spacing-4),
+      'height': 3.5rem,
+      //Size from figma
+      'btn-close-padding-block': 25.5px // needed to center close icon todo: change with wrappers
+    )
+  ) !default;
+
+  $font-size: map.get($alert-sizing, $size, 'font-size');
+  $icon-width: map.get($alert-sizing, $size, 'icon-width');
+  $height: map.get($alert-sizing, $size, 'height');
+  $padding-y: calc(($height - $font-size) / 2);
+  font-size: $font-size;
+  padding-block: $padding-y;
+
+  .btn-close {
+    padding-block: map.get($alert-sizing, $size, 'btn-close-padding-block');
+  }
+
+  //TODO: edit with wrappers
+  //var(--df-spacing-3): spacing token between icon and text
+  &[dfInsertAlertIcon]:not(.df-page-alert) {
+    //1.25rem: is the padding on the left of the icon up to the alert border TODO add token
+    padding-inline-start: calc($icon-width + var(--df-spacing-3) + 1.25rem);
+  }
+
+  span.df-insert-icon {
+    margin-inline-start: calc(($icon-width + var(--df-spacing-3)) * -1);
+  }
+
+  .df-alert-collapse-main-text button.df-collapse {
+    gap: map.get($alert-sizing, $size, 'collapse-button-gap');
+    margin-inline-start: map.get($alert-sizing, $size, 'collapse-button-margin-start');
+  }
+  //TODO: change with wrappers
+  .df-alert-collapsed-text {
+    margin-inline-start: calc(($icon-width + var(--df-spacing-3)) * -1);
+  }
+}

package/scss/components/alert/_alert.scss

@@ -0,0 +1,142 @@
+@use 'alert.mixin' as alert-mixin;
+@use '../../new-brand-common.variables' as df;
+
+.alert {
+  color: var(--df-color-inert-neutral-main-foreground);
+  border-width: 0 0 0 var(--df-spacing-2);
+  border-style: solid; //need to define it for `tip alert` that is not present in bootstrap
+  font-size: var(--df-typo-sizing-default);
+
+  // Alert collapsible
+  hr {
+    margin-block: var(--df-spacing-5);
+  }
+
+  // Flag Angular SASS/CSS
+  // This will no longer be needed in AgnosUI todo wrappers
+  &[dfInsertAlertIcon] {
+    .df-alert-collapsed-text {
+      margin-block-start: var(--df-spacing-5);
+    }
+  }
+
+  // Alert icon
+  span.df-insert-icon {
+    position: absolute;
+  }
+
+  // For alert dismissible
+  .btn-close {
+    --df-btn-close-hover-opacity: 1;
+    --df-btn-close-opacity: 1;
+    background-image: none;
+    outline: 0;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
+      background-color: var(--df-button-text-basic-color-neutral-default-foreground);
+      mask-repeat: no-repeat;
+      mask-size: 0.75rem 0.75rem;
+      mask-position: center;
+    }
+
+    &:hover {
+      &:focus-visible {
+        --df-box-shadow-color: var(--df-button-text-basic-color-neutral-hovered-border);
+      }
+
+      background-color: var(--df-button-text-basic-color-neutral-hovered-background);
+
+      &::after {
+        background-color: var(--df-button-text-basic-color-neutral-hovered-foreground);
+      }
+    }
+
+    &:active {
+      &:focus-visible {
+        --df-box-shadow-color: var(--df-button-text-basic-color-neutral-pressed-border);
+      }
+
+      background-color: var(--df-button-text-basic-color-neutral-pressed-background);
+
+      &::after {
+        background-color: var(--df-button-text-basic-color-neutral-pressed-foreground);
+      }
+    }
+
+    //TODO change with wrappers
+    &:focus {
+      box-shadow: none;
+    }
+
+    &:focus-visible {
+      box-shadow: df.$df-focus-inset-box-shadow;
+      --df-box-shadow-color: var(--df-color-focus-main-border); //TODO: remove with wrappers
+    }
+  }
+
+  // Variants of the alerts
+  @each $state in ('success', 'danger', 'info', 'warning', 'tip') {
+    &.alert-#{$state} {
+      --df-inner-box-shadow-color: var(--df-color-#{$state}-subtle-background);
+      background-color: var(--df-color-#{$state}-subtle-background);
+      border-color: var(--df-color-#{$state}-alt-default-border);
+
+      .df-insert-icon {
+        color: var(--df-color-#{$state}-alt-default-foreground);
+      }
+
+      hr {
+        border-top-color: var(--df-color-separator-#{$state}-border);
+      }
+    }
+  }
+  //we use a different token for warning alert
+  &.alert-warning {
+    .df-insert-icon {
+      color: var(--df-color-icon-warning-foreground);
+    }
+  }
+
+  // For page alerts
+  &.df-page-alert {
+    padding-inline: 12%;
+    position: fixed;
+    top: 3.5rem; // below navbar
+    width: 100%;
+    z-index: 1038; // on top of all fixed elements but below modal and navbar (1030 bootstrap z-index fixed elements)
+    inset-inline-start: 0;
+  }
+
+  &.df-page-alert,
+  &.df-card-alert {
+    border-width: 0 0 var(--df-spacing-2) 0;
+    border-radius: 0;
+  }
+
+  // For collapsible alerts content
+  .df-alert-collapse-main-text {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  //sizing
+  @include alert-mixin.df-sizes('default');
+
+  &.df-alert-sm {
+    @include alert-mixin.df-sizes('sm');
+  }
+
+  &.df-alert-lg {
+    @include alert-mixin.df-sizes('lg');
+  }
+}
+
+.df-superheader ~ * {
+  .df-page-alert {
+    top: 7rem;
+  }
+}

package/scss/components/alert/_alert.variables.scss

@@ -0,0 +1,3 @@
+$alert-padding-x: 1.25rem !default; //needed for BS if we don't have icon //TODO check for token or remove when dealing with iconless alert
+$alert-border-radius: var(--df-borderRadius-main-small) !default;
+$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side

package/scss/components/badge/_badge.mixins.scss

@@ -0,0 +1,9 @@
+@mixin df-badge-sizing($height, $font-size, $padding-inline, $close-btn-width) {
+  font-size: $font-size;
+  height: $height;
+  --df-badge-padding-x: #{$padding-inline};
+
+  button {
+    width: $close-btn-width;
+  }
+}