@design-factory/design-factory 15.2.3 → 16.0.0

package/styles/scss/components/form/_form.scss

@@ -1,4 +1,23 @@
 @use 'sass:math';
+@use 'sass:map';
+
+form {
+  --#{$prefix}form-input-disabled-color: #{$df-disabled-input-color};
+  --#{$prefix}form-input-disabled-cursor: #{$df-input-disabled-cursor};
+  --#{$prefix}form-sm-label-margin-bottom: #{$df-label-margin-bottom-sm};
+  --#{$prefix}form-lg-label-margin-bottom: #{$df-label-margin-bottom-sm}; // strange that we use the same value
+  --#{$prefix}form-feedback-warning-color: #{$df-form-feedback-warning-color};
+  --#{$prefix}form-feedback-help-warning-color: #{$df-form-feedback-help-warning-color};
+  --#{$prefix}form-feedback-warning-icon: #{$df-form-feedback-warning-icon};
+  --#{$prefix}form-check-input-sm-width: #{$df-form-check-input-sm-width};
+  --#{$prefix}form-check-input-lg-width: #{$df-form-check-input-lg-width};
+  --#{$prefix}form-switch-sm-width: #{$df-form-switch-sm-width};
+  --#{$prefix}form-switch-sm-height: #{math.div($df-form-switch-sm-width, 2)};
+  --#{$prefix}form-switch-lg-width: #{$df-form-switch-lg-width};
+  --#{$prefix}form-switch-lg-height: #{math.div($df-form-switch-lg-width, 2)};
+  --#{$prefix}form-check-input-sm-margin-top: #{($line-height-sm - $df-form-check-input-sm-width) * 1};
+  --#{$prefix}form-check-input-lg-margin-top: #{($line-height-lg - $df-form-check-input-lg-width) * 0.5};
+}
 
 .form-inline {
   .form-group {
@@ -9,11 +28,17 @@
 }
 
 .form-control {
+  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    --#{$prefix}box-shadow-color: #{$input-focus-border-color};
+  } @else {
+    --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
+    --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity('primary', 'border-color')}
+  }
   &:disabled {
-    color: $df-disabled-input-color;
-    cursor: $df-input-disabled-cursor;
+    color: var(--#{$prefix}form-input-disabled-color);
+    cursor: var(--#{$prefix}form-input-disabled-cursor);
     &::placeholder {
-      color: $df-disabled-input-color;
+      color: var(--#{$prefix}form-input-disabled-color);
     }
   }
   &::placeholder {
@@ -30,9 +55,10 @@
 
 // Override warning state color
 .warning-feedback {
-  color: $df-form-feedback-help-warning-color;
+  color: var(--#{$prefix}form-feedback-help-warning-color);
 }
 
+// TODO see how to add CSS var for this globally
 .invalid-feedback,
 .valid-feedback,
 .warning-feedback {
@@ -46,8 +72,30 @@
   }
 }
 
+.df-custom-pages-input {
+  --#{$prefix}custom-pages-input-minwidth: #{$df-custom-pages-input-minwidth};
+  --#{$prefix}custom-pages-input-width: auto;
+  min-width: var(--#{$prefix}custom-pages-input-minwidth);
+  width: var(--#{$prefix}custom-pages-input-width);
+}
+.form-control,
+.form-check-input {
+  @each $state, $data in $form-validation-states {
+    $colorName: map.get($df-form-validation-states-names, $state);
+    &.is-#{$state} {
+      @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'border-color')};
+      } @else {
+        --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
+        --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($colorName, 'border-color')}
+      }
+    }
+  }
+}
+
 // forms size small
 .form-sm {
+  --#{$prefix}custom-pages-input-minwidth: #{$df-custom-pages-input-minwidth-sm};
   .form-control,
   .ng-select {
     @extend .form-control-sm;
@@ -55,50 +103,55 @@
 
   label {
     :not(.col-form-label) {
-      margin-bottom: $df-label-margin-bottom-sm;
+      // TODO check if can remove not used anywhere in our demo...
+      // maybe this is more &:not as in form.mixin.scss
+      margin-bottom: var(--#{$prefix}form-sm-label-margin-bottom);
     }
     font-size: $font-size-sm;
   }
 
   .form-check-input {
-    width: $df-form-check-input-sm-width;
-    height: $df-form-check-input-sm-width;
-    margin-top: ($line-height-sm - $df-form-check-input-sm-width) * 1;
+    width: var(--#{$prefix}form-check-input-sm-width);
+    height: var(--#{$prefix}form-check-input-sm-width);
+    margin-top: var(--#{$prefix}form-check-input-sm-margin-top);
   }
 
   .form-switch {
     .form-check-input {
       margin-top: 0;
-      width: $df-form-switch-sm-width;
-      height: math.div($df-form-switch-sm-width, 2);
+      width: var(--#{$prefix}form-switch-sm-width);
+      height: var(--#{$prefix}form-switch-sm-height);
     }
   }
 }
 
 // forms size large
 .form-lg {
+  --#{$prefix}custom-pages-input-minwidth: #{$df-custom-pages-input-minwidth-lg};
   .form-control {
     @extend .form-control-lg;
   }
 
   label {
     :not(.col-form-label) {
-      margin-bottom: $df-label-margin-bottom-sm;
+      // TODO check if can remove not used anywhere in our demo...
+      // maybe this is more &:not as in form.mixin.scss
+      margin-bottom: var(--#{$prefix}form-lg-label-margin-bottom);
     }
     font-size: $font-size-lg;
   }
 
   .form-check-input {
-    width: $df-form-check-input-lg-width;
-    height: $df-form-check-input-lg-width;
-    margin-top: ($line-height-lg - $df-form-check-input-lg-width) * .5;
+    width: var(--#{$prefix}form-check-input-lg-width);
+    height: var(--#{$prefix}form-check-input-lg-width);
+    margin-top: var(--#{$prefix}form-check-input-lg-margin-top);
   }
 
   .form-switch {
     .form-check-input {
       margin-top: 0;
-      width: $df-form-switch-lg-width;
-      height: math.div($df-form-switch-lg-width, 2);
+      width: var(--#{$prefix}form-switch-lg-width);
+      height: var(--#{$prefix}form-switch-lg-height);
     }
   }
 }

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

@@ -1,12 +1,18 @@
 @use 'sass:map';
 
-$df-disabled-input-color: $df-disabled-color !default;
-$df-input-disabled-cursor: $df-disabled-cursor !default;
+$df-disabled-input-color: var(--#{$prefix}disabled-color) !default;
+$df-input-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
 $df-label-margin-bottom-sm: 0.375rem !default;
 $df-form-feedback-warning-color: $warning !default;
 $df-form-feedback-help-warning-color: $brown !default;
 $df-form-feedback-warning-icon: '' !default;
 
+$df-form-validation-states-names: (
+  'valid': 'success',
+  'invalid': 'danger',
+  'warning': 'warning'
+) !default;
+
 // stylelint-disable scss/dollar-variable-default, scss/dollar-variable-pattern
 $form-validation-states: map.merge(
   (
@@ -17,7 +23,21 @@ $form-validation-states: map.merge(
   ),
   $form-validation-states
 );
+//updating focus box shadows
+@each $state, $data in $form-validation-states {
+  $form-validation-data: map.merge(
+    (
+      'focus-box-shadow': $input-btn-focus-box-shadow
+    ),
+    $data
+  );
+  $form-validation-states: map.set($form-validation-states, $state, $form-validation-data);
+}
+
 $df-form-check-input-sm-width: $form-check-input-width * map.get($df-size-ratios, 'sm') !default;
 $df-form-check-input-lg-width: $form-check-input-width * map.get($df-size-ratios, 'lg') !default;
 $df-form-switch-sm-width: $form-switch-width * map.get($df-size-ratios, 'sm') !default;
-$df-form-switch-lg-width: $form-switch-width * map.get($df-size-ratios, 'lg') !default;
+$df-form-switch-lg-width: $form-switch-width * map.get($df-size-ratios, 'lg') !default;
+$df-custom-pages-input-minwidth-sm: 2rem !default;
+$df-custom-pages-input-minwidth: 2.5rem !default;
+$df-custom-pages-input-minwidth-lg: 3rem !default;

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

@@ -24,7 +24,7 @@
   outline: none;
   &:focus {
     &::before {
-      box-shadow: $df-focused-box-shadow;
+      box-shadow: $df-icon-focused-box-shadow;
       border-radius: 50%;
     }
   }
@@ -33,7 +33,7 @@
   outline: none;
   &:focus {
     &::before {
-      box-shadow: $df-focused-box-shadow;
+      box-shadow: $df-icon-focused-box-shadow;
     }
   }
 }

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

@@ -1,3 +1,4 @@
 $df-amadeuslogo: "<svg enable-background='new 0 0 510.2 67.9' version='1.1' viewBox='0 0 510.2 67.9' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'><path fill='#ffffff' d='m269.7 0c-8.3 0-19.8 1.4-26.9 4v61.9c5.8 1.2 16.8 2 24.4 2 26 0 36.1-10.2 36.1-34.4 0.1-21-12.8-33.5-33.6-33.5m-12.2 12.6c2.4-0.5 7-1.1 11.6-1.1 10.6 0 18.8 5.9 18.8 22 0 15.5-4.1 22.9-20.2 22.9-5.2 0-10.3-0.8-10.3-0.8v-43zm204 52.9s9 2.4 21.7 2.4c12 0 27-4.1 27-20.3 0-10.6-7.8-15.1-20.5-19.7-6.9-2.5-12.7-4.8-12.7-9.5 0-2.3 1.7-6.7 10.5-6.7 8.2 0 16.6 3.8 16.6 3.8l3.7-10.8c-2.6-1.3-10.6-4.7-21.7-4.7-12.1 0-23.8 6.4-23.8 19.3 0 13.3 12.1 17.3 21.5 20.5 6.4 2.2 11.8 4.4 11.8 8.7 0 4.1-2.3 7.7-13.1 7.7-8.9 0-18.3-2-18.3-2l-2.7 11.3zm-31.9-15.2c-3.5 1.7-11 4.5-17.9 4.5-10 0-11.7-4.5-11.7-14.9v-39.3h-2.2c-3.3 0-10.6 0.6-12.4 0.9v40.3c0 17.6 4.3 26 22.2 26 13.7 0 21.7-5.3 22.2-5.3 0.2 0 4.9 2.9 14.3 2.9v-64c-1-0.2-8.1-0.9-11.7-0.9h-2.9v49.8zm-231.1-50.3c-13 0-23.2 3.2-27.1 5.2l3.1 10.9s10-3.6 19.8-3.6c8.4 0 12.7 2.4 12.7 10.6v4.7h-12.7c-21.6 0-28 9.9-28 20.8 0 14.5 11.3 19.1 21.6 19.1 12 0 18.9-5 19.8-5 0.7 0 3.1 2.6 14 2.6v-46c0-13.8-8.6-19.3-23.2-19.3m8.6 52.7c-3.1 1.2-10.7 3.7-16.2 3.7-6 0-10.6-2.1-10.6-8.7 0-5.7 3.1-9 11.4-9.3l15.4-0.6v14.9zm-174.9-52.7c-13 0-23.2 3.2-27.1 5.2l3.1 10.9s10-3.6 19.8-3.6c8.4 0 12.7 2.4 12.7 10.6v4.7h-12.7c-21.6 0-28 9.9-28 20.8 0 14.5 11.3 19.1 21.6 19.1 12 0 18.9-5 19.8-5 0.7 0 3.1 2.6 14 2.6v-46c0-13.8-8.6-19.3-23.2-19.3m8.7 52.7c-3.1 1.2-10.7 3.7-16.2 3.7-6 0-10.6-2.1-10.6-8.7 0-5.7 3.1-9 11.4-9.3l15.4-0.6v14.9zm73.1-13.7c-0.4 0.9-0.8 2.7-1.1 3.8-0.3-1-0.8-2.8-1.1-3.8l-12.8-32.9c-2.2-5.4-5.6-6.1-11.8-6.1-2.2 0-6.6 0.3-6.6 0.3l-6.6 66.6h14.6l3.2-44.7 13.9 33.8c1 2.6 3.1 3.7 7.3 3.7 4.1 0 6.2-1 7.3-3.7l13.7-33.8 3.2 44.7h14.6l-6.6-66.6s-4.4-0.3-6.6-0.3c-6.2 0-9.6 0.7-11.8 6.1l-12.8 32.9zm206.8 25.7s11.2 3.1 25.5 3.1c15.3 0 22.3-1.7 22.3-1.7v-11.3s-7.6 1.5-18.3 1.5c-9.3 0-15.1-1.2-15.1-1.2v-16h28.9v-11.3h-28.9v-15.3s5.7-1 14.1-1c9.5 0 18.1 1.5 18.1 1.5v-11.4s-7.5-1.6-19.8-1.6c-16.3 0-27 2.9-27 2.9v61.8z'/></svg>" !default;
 $df-brand-amadeus-logo-height: 0.8125rem !default;
 $df-brand-amadeus-logo-width: 6.125rem !default;
+$df-icon-focused-box-shadow: $df-focused-box-shadow !default;

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

@@ -3,6 +3,12 @@
   $rtl-border-side: if($position == 'append', 'left', 'right');
 
   &.is-#{$state} {
+    $colorName: map.get($df-form-validation-states-names, $state);
+    @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'border-color')};
+    } @else {
+      --#{$prefix}box-shadow-color: #{rgba($color, $input-btn-focus-color-opacity)}
+    }
     & ~ .#{$state}-feedback,
     .#{$state}-tooltip {
       display: block;
@@ -21,16 +27,14 @@
     input.df-input-withicon {
       border-color: $color;
       @include ltr {
-        border-#{$ltr-border-side}-color: $df-iwi-border-between-color; // override mandatory
+        border-#{$ltr-border-side}-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
       }
       @include rtl {
-        border-#{$rtl-border-side}-color: $df-iwi-border-between-color; // override mandatory
+        border-#{$rtl-border-side}-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
       }
     }
 
     &.df-focused {
-      box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25);
-
       .input-group-#{$position} {
         border-color: $color !important;
       }

package/styles/scss/components/inputs/_inputs.root.scss

@@ -0,0 +1,8 @@
+:root {
+  --#{$prefix}focused-cross-icon: #{$df-focused-cross-icon};
+  --#{$prefix}focused-cross-font-size: #{$df-focused-cross-font-size};
+  --#{$prefix}focused-cross-border-radius: #{$df-focused-cross-border-radius};
+  --#{$prefix}focused-cross-hover-background-color: #{$df-focused-cross-hover-background-color};
+  --#{$prefix}iwi-icon-height: #{$df-iwi-icon-height};
+  --#{$prefix}iwi-icon-width: #{$df-iwi-icon-width};
+}