@design-factory/design-factory 20.0.0 → 20.0.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@design-factory/design-factory",
   "description": "Amadeus design system",
   "license": "BSD-3-Clause",
-  "version": "20.0.0",
+  "version": "20.0.2",
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/styles/scss/components/checkbox/_checkbox.scss

@@ -54,6 +54,13 @@
   }
 }
 
+@if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  .form-check:has(+ .form-check),
+  .form-check + .form-check {
+    margin-bottom: var(--#{$prefix}spacing-3);
+  }
+}
+
 .form-check-input {
   &:not(:checked):not(.is-invalid):not(:indeterminate):focus {
     --#{$prefix}box-shadow-color: #{$df-checkbox-box-shadow-color};

package/styles/scss/components/select/_select.scss

@@ -399,8 +399,11 @@
       // add
       height: initial; // in single case we will only have one line
 
-      > .ng-select-container .ng-value-container .ng-value {
-        font-size: inherit;
+      > .ng-select-container .ng-value-container {
+        min-height: calc($input-height-lg - 2 * $input-border-width);
+        .ng-value {
+          font-size: inherit;
+        }
       }
     }
     &.form-control-sm {
@@ -409,6 +412,9 @@
 
       > .ng-select-container {
         height: inherit;
+        .ng-value-container {
+          min-height: calc($input-height-sm - 2 * $input-border-width);
+        }
       }
     }
     &.ng-select-disabled {
@@ -519,11 +525,14 @@
     margin-bottom: var(--#{$prefix}select-value-margin); // override
     @include ngs-root('.form-control-lg') {
       // add
-      margin-top: var(--#{$prefix}select-value-margin-lg); // override
+      margin-top: calc(
+        ($input-height-lg - 2 * $input-border-width - var(--#{$prefix}select-clear-button-height)) / 2
+      ); //override
     }
     @include ngs-root('.form-control-sm') {
       // add
       margin-top: var(--#{$prefix}select-value-margin-sm); // add
+      margin-bottom: var(--#{$prefix}select-value-margin-sm); // add
     }
     @include ltr {
       margin-left: var(--#{$prefix}select-clear-button-margin-left); // add
@@ -583,7 +592,12 @@
     margin-top: var(--#{$prefix}select-value-margin); // add
     @include ngs-root('.form-control-lg') {
       // add
-      margin-top: var(--#{$prefix}select-value-margin-lg); // override
+      margin-top: calc(
+        ($input-height-lg - 2 * $input-border-width - var(--#{$prefix}select-arrow-wrapper-height)) / 2
+      ); // add
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        font-size: var(--#{$prefix}typo-sizing-default); // in order to have the arrow verticaly aligned in large
+      }
     }
     @include ngs-root('.form-control-sm') {
       // add

package/styles/scss/components/typeahead/_typeahead.scss

@@ -25,6 +25,8 @@ ngb-typeahead-window.dropdown-menu {
     &:not(:disabled):not(.disabled).active {
       color: var(--#{$prefix}typeahead-hover-color);
       background-color: var(--#{$prefix}typeahead-hover-bg);
+      // mapped to a token in DF 21
+      font-weight: 400;
 
       &:active {
         color: var(--#{$prefix}typeahead-active-color);

package/styles/scss/df-styles-namespace.scss

@@ -7,6 +7,8 @@
 @import 'components/fonts/multi-lang.mixins';
 @import 'common.mixins';
 
+@import 'components/navbar/navbar.mixins';
+
 @import 'bootstrap/scss/root';
 @import 'common.root';
 @import 'components/fonts/fonts.root';

package/styles/scss/themes/brand2023/_variables.scss

@@ -780,7 +780,6 @@ $form-range-thumb-active-bg: var(--#{$prefix}primary-800) !default;
 $form-check-min-height: calc($font-size-base * $line-height-base) !default;
 $df-form-placeholder-font-style: var(--#{$prefix}typo-style-italic) !default;
 $form-label-margin-bottom: var(--#{$prefix}spacing-3) !default;
-$form-check-margin-bottom: var(--#{$prefix}spacing-3) !default;
 $form-select-feedback-icon-padding-end: calc($form-select-padding-x * 2.5 + $form-select-indicator-padding) !default;
 $form-text-margin-top: var(--#{$prefix}spacing-3) !default;
 
@@ -956,6 +955,8 @@ $df-select-value-height-sm: calc(var(--#{prefix}typo-sizing-small) * $line-heigh
 $df-select-value-height-lg: calc(var(--#{prefix}typo-sizing-large) * $line-height-lg) !default;
 $df-select-witharrow-clear-button-margin: var(--#{$prefix}spacing-3) !default;
 $df-select-disabled-bg: var(--#{$prefix}color-disabled-main-background) !default;
+$df-select-value-margin-sm: 0.125rem !default;
+$df-select-value-margin-lg: 0.5rem !default;
 
 // Sidenav
 $df-sidenav-item-active-bg-color: var(--#{$prefix}primary-200) !default; // todo define a var for this ?