@design-factory/styles 21.0.0-next.0

package/scss/components/form/_form.scss

@@ -0,0 +1,101 @@
+.form-inline {
+  .form-group {
+    label {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.form-control {
+  --df-box-shadow-color: var(--df-color-input-border);
+  outline: none;
+
+  &:disabled {
+    cursor: not-allowed;
+
+    &::placeholder {
+      color: var(--df-color-disabled-main-foreground);
+    }
+  }
+
+  &::placeholder {
+    font-style: var(--df-typo-style-italic);
+  }
+
+  &[readonly] {
+    background-color: var(--df-color-disabled-main-background);
+    border-color: var(--df-color-disabled-main-border);
+    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+    opacity: 1;
+  }
+
+  @each $state, $name in ('valid': 'success', 'invalid': 'danger', 'warning': 'warning') {
+    &.is-#{$state} {
+      --df-box-shadow-color: var(--df-color-#{$name}-main-default-border);
+    }
+  }
+}
+
+// TODO see how to add CSS var for this globally
+.invalid-feedback,
+.valid-feedback,
+.warning-feedback {
+  font-size: var(--df-typo-sizing-small);
+}
+
+.form-control-sm {
+  & ~ .invalid-feedback,
+  & ~ .valid-feedback,
+  & ~ .warning-feedback {
+    font-size: var(--df-typo-sizing-xsmall);
+  }
+}
+
+.form-row {
+  // add
+  & ~ .invalid-feedback {
+    display: block;
+  }
+}
+
+// forms size small
+.form-sm {
+  .form-control,
+  .ng-select {
+    @extend .form-control-sm;
+  }
+
+  label {
+    font-size: var(--df-typo-sizing-small);
+  }
+
+  .input-group:has(input.df-input-withicon):has(.input-group-prepend) .input-group-prepend {
+    border-radius: var(--df-border-radius-sm); //needed to override common bootstrap file
+  }
+
+  .invalid-feedback,
+  .valid-feedback,
+  .warning-feedback {
+    font-size: var(--df-typo-sizing-xsmall);
+  }
+}
+
+// forms size large
+.form-lg {
+  .form-control,
+  .ng-select {
+    @extend .form-control-lg;
+  }
+
+  label {
+    font-size: var(--df-typo-sizing-large);
+  }
+
+  .input-group:has(input.df-input-withicon):has(.input-group-prepend) .input-group-prepend {
+    border-radius: var(--df-border-radius-lg);
+  }
+}
+
+.ng-invalid.ng-touched {
+  @extend .is-invalid;
+}

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

@@ -0,0 +1,48 @@
+// 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;
+
+$form-text-margin-top: var(--df-spacing-3) !default;
+$form-text-color: var(--df-color-neutral-alt-default-foreground) !default;
+
+$form-label-margin-bottom: var(--df-spacing-3) !default;
+
+// Putting stuff for bootstrap file upload but it is not part of our examples...
+$form-file-button-color: var(--df-button-outline-basic-color-primary-default-foreground) !default;
+$form-file-button-bg: var(--df-button-outline-basic-color-primary-default-background) !default;
+$form-file-button-hover-bg: var(--df-button-outline-basic-color-primary-hovered-background) !default;
+
+$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-validation-states: (
+  'valid': (
+    'color': var(--df-color-success-alt-default-foreground),
+    // not used as we set $enable-validation-icons to false
+    '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,
+    'border-color': var(--df-color-success-alt-default-border)
+  ),
+  'invalid': (
+    'color': var(--df-color-danger-alt-default-foreground),
+    // not used as we set $enable-validation-icons to false
+    '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,
+    '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': $input-btn-focus-box-shadow,
+    'border-color': var(--df-color-warning-alt-default-border)
+  )
+) !default;
+
+// cannot set css var here due to how it is used in bootstrap floating-label
+$form-floating-padding-x: $df-spacing-3 !default;

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

@@ -0,0 +1,29 @@
+@use '../../new-brand-common.variables' as df;
+
+.df-logo-dim {
+  height: 0.8125rem;
+  width: 6.125rem;
+}
+
+.df-rond-icon-only-focusable {
+  outline: none;
+
+  &:focus-visible {
+    &::before {
+      --df-box-shadow-color: var(--df-color-neutral-alt-default-border);
+      box-shadow: df.$df-focus-box-shadow;
+      border-radius: 50%;
+    }
+  }
+}
+
+.df-square-icon-only-focusable {
+  outline: none;
+
+  &:focus-visible {
+    &::before {
+      --df-box-shadow-color: var(--df-color-neutral-alt-default-border);
+      box-shadow: df.$df-focus-box-shadow;
+    }
+  }
+}

package/scss/components/image/_image.variables.scss

@@ -0,0 +1,2 @@
+$figure-caption-font-size: var(--df-typo-sizing-small) !default;
+$figure-caption-color: var(--df-color-subtext-foreground) !default;

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

@@ -0,0 +1,45 @@
+@use 'sass:map';
+@use 'sass:selector';
+
+@mixin df-input-with-icon-validation-state($state, $color, $position) {
+  $df-form-validation-states-names: (
+    'valid': 'success',
+    'invalid': 'danger',
+    'warning': 'warning'
+  );
+  $border-side: if($position == 'append', 'end', 'start');
+
+  &.is-#{$state} {
+    $colorName: map.get($df-form-validation-states-names, $state);
+    $box-shadow-color: var(--df-color-#{$colorName}-alt-default-border);
+    --df-box-shadow-color: #{$box-shadow-color};
+
+    .input-group-#{$position} {
+      border-color: var(--df-color-#{$colorName}-alt-default-border);
+      border-inline-#{$border-side}: 1px solid $color;
+    }
+
+    input.df-input-withicon {
+      border-color: var(--df-color-#{$colorName}-alt-default-border);
+      border-inline-#{$border-side}-color: transparent; // override mandatory
+    }
+
+    &.df-focused {
+      .input-group-#{$position} {
+        border-color: var(--df-color-#{$colorName}-alt-default-border) !important;
+      }
+    }
+  }
+}
+
+@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

@@ -0,0 +1,254 @@
+@use 'sass:map';
+@use 'sass:string';
+@use '../../new-brand-common.variables' as df;
+@use 'inputs.mixin' as input-mixins;
+
+.df-disabled {
+  background-color: var(--df-color-disabled-main-background);
+  cursor: not-allowed;
+  color: var(--df-color-disabled-main-foreground);
+  border-color: var(--df-color-disabled-main-border);
+
+  .input-group-text {
+    background-color: var(--df-color-disabled-main-background);
+    cursor: not-allowed;
+    color: var(--df-color-disabled-main-foreground);
+    border-color: var(--df-color-disabled-main-border);
+  }
+}
+
+%input-group-common {
+  @include transition($input-transition); // default bootstrap input has this property
+
+  align-items: center;
+  border-block: 1px solid var(--df-color-input-border);
+  min-width: $input-border-radius;
+  background-color: var(--df-color-neutral-alt-default-background);
+
+  // This class is to be able to remove the icon in an input with icon and to come back to a normal input look
+  // even if the html of the input group is staying.
+  &.df-is-empty {
+    padding-inline: 1px;
+
+    .input-group-text {
+      display: none;
+    }
+  }
+
+  button.input-group-text {
+    &:not(:disabled):not(.disabled) {
+      color: var(--df-color-primary-alt-default-foreground);
+      cursor: pointer;
+
+      &:hover {
+        &:before {
+          color: var(--df-color-primary-alt-hovered-foreground);
+          background-color: var(--df-color-primary-alt-hovered-background);
+        }
+      }
+
+      &:active {
+        &:before {
+          color: var(--df-color-primary-alt-pressed-foreground);
+          background-color: var(--df-color-primary-alt-pressed-background);
+        }
+      }
+    }
+    &:is(:disabled, .disabled) {
+      cursor: not-allowed;
+      color: var(--df-color-disabled-main-foreground);
+      background-color: var(--df-color-disabled-main-background);
+    }
+  }
+
+  .input-group-text {
+    height: 100%;
+    width: 100%;
+    border: none;
+    padding: 0;
+    background-color: var(--df-color-neutral-alt-default-background); // overrides bootstrap addon color
+
+    &:before {
+      font-size: 1rem;
+      height: 1.5rem;
+      width: 1.5rem;
+      border-radius: 50%;
+      line-height: 1.5rem;
+    }
+
+    &:focus-visible {
+      outline: none; // override mandatory
+      &:before {
+        background-color: var(--df-color-neutral-alt-default-background); // set bg to avoid anti-aliasing issue
+        box-shadow: df.$df-focus-box-shadow;
+      }
+    }
+  }
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+  display: none;
+}
+
+.input-group {
+  --df-box-shadow-color: var(--df-color-input-border);
+  color: var(--df-color-neutral-alt-default-foreground);
+
+  $validation-messages: '';
+  @each $state in map.keys($form-validation-states) {
+    $validation-messages: $validation-messages +
+      ':not(.' +
+      string.unquote($state) +
+      '-tooltip)' +
+      ':not(.' +
+      string.unquote($state) +
+      '-feedback)';
+  }
+
+  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
+    margin-inline-start: -1px;
+  }
+
+  // TODO - Remove it when ngbootstrap dropdown will be compliant with Bootstrap
+  &:not(.has-validation) {
+    > .dropdown:not(:last-child) {
+      > .dropdown-toggle {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+    }
+  }
+  > .dropdown:not(:first-child) {
+    > .dropdown-toggle {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+  }
+
+  > .form-control + .form-control {
+    margin-inline-start: -2px;
+  }
+}
+
+: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
+    }
+  }
+
+  @each $state, $data in $form-validation-states {
+    @include input-mixins.df-input-with-icon-validation-state($state, map.get($data, color), 'append');
+  }
+
+  .input-group-append {
+    @extend %input-group-common;
+
+    margin-inline-start: -2px;
+    border-inline-end: 1px solid var(--df-color-input-border);
+    border-radius: var(--df-borderRadius-main-medium);
+    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 {
+    border-color: #{$input-focus-border-color};
+    border-inline-start-color: transparent;
+  }
+}
+
+:is(.input-group.df-input-prepend, .input-group:has(input.df-input-withicon):has(.input-group-prepend)) {
+  :is(input.df-input-withicon.prepend, .input-group-prepend ~ .df-input-withicon) {
+    border-inline-start-color: transparent; // override mandatory
+    box-shadow: none; // override mandatory
+    padding-left: 0px; // override mandatory
+
+    &:focus-visible {
+      border-inline-start-color: transparent; // override mandatory
+      box-shadow: none; // override mandatory
+    }
+  }
+
+  @each $state, $data in $form-validation-states {
+    @include input-mixins.df-input-with-icon-validation-state($state, map.get($data, color), 'prepend');
+  }
+
+  .input-group-prepend {
+    @extend %input-group-common;
+
+    border-inline-start: 1px solid var(--df-color-input-border);
+    border-radius: var(--df-borderRadius-main-medium);
+    margin-inline-end: -2px;
+    padding-inline: var(--df-spacing-3);
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  &.df-focused .input-group-prepend {
+    border-color: #{$input-focus-border-color};
+    border-inline-end-color: transparent;
+  }
+
+  &:has(input.df-input-withicon.prepend:focus-visible) {
+    @extend .df-focused;
+  }
+}
+
+.input-group:has(input.df-input-withicon) {
+  &:has(input.df-input-withicon:focus-visible) {
+    @extend .df-focused;
+  }
+  .df-input-withicon:disabled ~ .input-group-append {
+    @extend .df-disabled;
+  }
+  .input-group-prepend:has(~ .df-input-withicon:disabled) {
+    @extend .df-disabled;
+  }
+}
+
+.input-group.df-focused {
+  border: none;
+}

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

@@ -0,0 +1,20 @@
+$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-bg: var(--df-color-neutral-alt-default-background) !default;
+$input-disabled-color: var(--df-color-disabled-main-foreground) !default;
+$input-disabled-bg: var(--df-color-disabled-main-background) !default;
+$input-disabled-border-color: var(--df-color-disabled-main-border) !default;
+
+$input-color: var(--df-color-neutral-alt-default-foreground) !default;
+$input-border-color: var(--df-color-input-border) !default;
+
+$input-border-radius: var(--df-borderRadius-main-medium) !default;
+$input-focus-border-color: var(--df-color-input-border) !default;
+
+$input-placeholder-color: var(--df-color-subtext-foreground) !default;
+$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;

package/scss/components/link/_link.scss

@@ -0,0 +1,150 @@
+@use '../../new-brand-common.variables' as df;
+
+a {
+  color: var(--df-link-color-primary-default-foreground);
+  border-bottom: 1px solid var(--df-link-color-primary-default-foreground);
+
+  &:focus-visible {
+    --df-box-shadow-color: var(--df-link-color-primary-default-border);
+    box-shadow: df.$df-focus-box-shadow;
+    outline: none;
+  }
+
+  &:hover {
+    --df-box-shadow-color: var(--df-link-color-primary-hovered-border);
+    color: var(--df-link-color-primary-hovered-foreground);
+    border-bottom-color: var(--df-link-color-primary-hovered-foreground);
+    background-color: var(--df-link-color-primary-hovered-background);
+    text-decoration: none;
+  }
+
+  &:active {
+    --df-box-shadow-color: var(--df-link-color-primary-pressed-border);
+    color: var(--df-link-color-primary-pressed-foreground);
+    border-bottom-color: var(--df-link-color-primary-pressed-foreground);
+    background-color: var(--df-link-color-primary-pressed-background);
+  }
+
+  &:visited {
+    color: var(--df-link-color-visited-default-foreground);
+    border-bottom-color: var(--df-link-color-visited-default-foreground);
+
+    &:hover {
+      color: var(--df-link-color-visited-hovered-foreground);
+      background-color: var(--df-link-color-visited-hovered-background);
+      border-bottom-color: var(--df-link-color-visited-hovered-foreground);
+    }
+
+    &:active {
+      color: var(--df-link-color-visited-pressed-foreground);
+      background-color: var(--df-link-color-visited-pressed-background);
+      border-bottom-color: var(--df-link-color-visited-pressed-foreground);
+    }
+  }
+
+  // Disabled Link
+  &[aria-disabled='true'],
+  &.df-link-icononly[aria-disabled='true'] {
+    &,
+    &:is(:hover, :active, :visited, :visited:hover) {
+      color: var(--df-link-color-disabled-foreground);
+      border-bottom-color: var(--df-link-color-disabled-foreground);
+      background: unset;
+      cursor: not-allowed;
+      outline: none;
+      box-shadow: none;
+    }
+  }
+
+  // Link styled as button
+  &.btn {
+    &:visited {
+      color: var(--df-btn-color);
+      border-color: var(--df-btn-border-color);
+
+      &:hover {
+        color: var(--df-btn-hover-color);
+        background-color: var(--df-btn-hover-bg);
+        border-color: var(--df-btn-hover-border-color);
+      }
+
+      &:active {
+        color: var(--df-btn-active-color);
+        background-color: var(--df-btn-active-bg);
+        border-color: var(--df-btn-active-border-color);
+      }
+    }
+
+    &:is(:hover, :active) {
+      border-width: var(--df-btn-border-width);
+    }
+  }
+
+  @include transition(
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out
+  );
+
+  &[href*='//'],
+  &[href*='mailto'],
+  &.df-link-external {
+    .fa-external-link {
+      display: none;
+    }
+
+    &:not(.df-link-icononly):after {
+      content: '\00a0\f08e'; // Empty space + .fa-external-link
+      font-family: 'Font Awesome 6 Pro', sans-serif;
+      position: relative;
+      bottom: -0.08em;
+    }
+  }
+}
+
+a.df-link-icononly {
+  border-bottom: 0;
+  text-decoration: none;
+  border-radius: var(--df-borderRadius-main-medium);
+  text-align: center;
+  display: flex;
+  color: var(--df-link-color-neutral-default-foreground);
+  align-items: center;
+  justify-content: center;
+  //overridden by sizing sm and lg
+  font-size: var(--df-typo-sizing-2xlarge);
+  line-height: 2.25rem;
+  height: 2.25rem;
+  width: 2.25rem;
+
+  &:hover {
+    color: var(--df-link-color-neutral-hovered-foreground);
+    background-color: var(--df-link-color-neutral-hovered-background);
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    --df-box-shadow-color: var(--df-link-color-neutral-default-foreground);
+    box-shadow: df.$df-focus-box-shadow;
+  }
+
+  &:active {
+    color: var(--df-link-color-neutral-pressed-foreground);
+    background-color: var(--df-link-color-neutral-pressed-background);
+  }
+
+  &.df-link-sm {
+    line-height: 1.875rem;
+    height: 1.875rem;
+    width: 1.875rem;
+    font-size: var(--df-typo-sizing-large);
+  }
+
+  &.df-link-lg {
+    line-height: 3rem;
+    height: 3rem;
+    width: 3rem;
+    font-size: var(--df-typo-sizing-3xlarge);
+  }
+}

package/scss/components/link/_link.variables.scss

@@ -0,0 +1,5 @@
+// Links
+$link-color: var(--df-link-color-primary-default-foreground) !default;
+$link-decoration: none !default;
+$link-hover-color: var(--df-link-color-primary-hovered-foreground) !default;
+$link-hover-decoration: none !default;

package/scss/components/list/_list.scss

@@ -0,0 +1,17 @@
+ol {
+  counter-reset: df-ol-counter;
+  list-style-type: none;
+  padding-left: 2.5rem;
+
+  & > li {
+    counter-increment: df-ol-counter;
+    position: relative;
+
+    &:before {
+      content: counter(df-ol-counter) '.' '\00a0 ';
+      font-weight: var(--df-typo-weight-bold);
+      position: absolute;
+      left: -1.75rem;
+    }
+  }
+}