@design-factory/design-factory 20.0.0-next.0 → 20.0.0-next.1

package/styles/scss/components/breadcrumbs/_breadcrumbs.scss

@@ -11,16 +11,19 @@
   --#{$prefix}breadcrumb-icon-margin: #{$df-breadcrumb-icon-margin};
   --#{$prefix}breadcrumb-icon-angle-left-content: #{$df-breadcrumb-icon-angle-left-content};
   --#{$prefix}breadcrumb-icon-angle-right-content: #{$df-breadcrumb-icon-angle-right-content};
+  --#{$prefix}breadcrumb-item-icon-margin-inline-end: #{$df-breadcrumb-item-icon-margin-inline-end};
 
   &.breadcrumb-sm {
     --#{$prefix}breadcrumb-font-size: #{$font-size-sm};
     --#{$prefix}breadcrumb-item-before-padding: #{$df-breadcrumb-item-before-padding-sm};
+    --#{$prefix}breadcrumb-item-icon-margin-inline-end: #{$df-breadcrumb-item-icon-margin-inline-end-sm};
   }
 
   &.breadcrumb-lg {
     // todo create a css variable for body-font-size-lg and sm
     --#{$prefix}breadcrumb-font-size: #{$font-size-lg};
     --#{$prefix}breadcrumb-item-before-padding: #{$df-breadcrumb-item-before-padding-lg};
+    --#{$prefix}breadcrumb-item-icon-margin-inline-end: #{$df-breadcrumb-item-icon-margin-inline-end-lg};
   }
 
   .breadcrumb-item {
@@ -52,7 +55,7 @@
     }
 
     .df-breadcrumb-item-icon {
-      margin-inline-end: $df-breadcrumb-item-icon-margin-inline-end;
+      margin-inline-end: var(--#{$prefix}breadcrumb-item-icon-margin-inline-end);
     }
 
     &:nth-of-type(2):before {

package/styles/scss/components/breadcrumbs/_breadcrumbs.variables.scss

@@ -8,7 +8,9 @@ $df-breadcrumb-item-display: none !default;
 $df-breadcrumb-icon-display: none !default;
 $df-breadcrumb-item-two-last-items-display: inline !default;
 
-$df-breadcrumb-item-icon-margin-inline-end: 0.125rem !default;
+$df-breadcrumb-item-icon-margin-inline-end: 0.25rem !default;
+$df-breadcrumb-item-icon-margin-inline-end-sm: 0.125rem !default;
+$df-breadcrumb-item-icon-margin-inline-end-lg: 0.5rem !default;
 
 $df-breadcrumb-icon-xs-display: inline !default;
 $df-breadcrumb-icon-color: shades-css-var('primary', 'inert-color') !default;

package/styles/scss/components/button/_button.scss

@@ -89,6 +89,14 @@
 
 .btn-close {
   --#{$prefix}box-shadow-width: #{$df-btn-close-focus-shadow-width};
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    &:hover {
+      background-color: var(--#{$prefix}button-text-basic-color-neutral-hovered-background);
+    }
+    &:active {
+      background-color: var(--#{$prefix}button-text-basic-color-neutral-pressed-background);
+    }
+  }
 }
 
 .show > .btn:not(:disabled):not(.disabled).dropdown-toggle {

package/styles/scss/components/card/_card.scss

@@ -32,6 +32,8 @@
   --#{$prefix}accordion-card-last-body-border-top: #{$df-accordion-card-last-body-border-top};
   --#{$prefix}accordion-card-between-border-radius: #{$df-accordion-card-between-border-radius};
   --#{$prefix}accordion-card-between-border-top: #{$df-accordion-card-between-border-top};
+  --#{$prefix}card-text-margin-block-end: #{$df-card-text-margin-block-end};
+  --#{$prefix}card-subtitle-margin-block-end: #{$df-card-subtitle-margin-block-end};
 
   box-shadow: var(--#{$prefix}card-box-shadow);
 
@@ -39,6 +41,18 @@
     font-weight: var(--#{$prefix}card-title-font-weight);
   }
 
+  .card-text {
+    margin-block-end: var(--#{$prefix}card-text-block-end);
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+
+  .card-subtitle {
+    margin-block-end: var(--#{$prefix}card-subtitle-margin-block-end);
+  }
+
   &.border-0 {
     box-shadow: none;
   }

package/styles/scss/components/card/_card.variables.scss

@@ -29,3 +29,5 @@ $df-accordion-card-last-border-bottom-width: 0px !default;
 $df-accordion-card-last-body-border-top: $border-width $border-style var(--#{$prefix}gray-200) !default;
 $df-accordion-card-between-border-radius: 0px !default;
 $df-accordion-card-between-border-top: $border-width $border-style var(--#{$prefix}gray-200) !default;
+$df-card-text-margin-block-end: 1rem !default;
+$df-card-subtitle-margin-block-end: 0.25rem !default;

package/styles/scss/components/carousel/_carousel.scss

@@ -8,7 +8,7 @@
   --#{$prefix}carousel-caption-padding-bottom: #{$df-carousel-caption-padding-bottom};
   --#{$prefix}carousel-caption-padding-top: #{$df-carousel-caption-padding-top};
   --#{$prefix}carousel-indicator-bg-size: 50% 50%;
-  &:focus {
+  &:focus-visible {
     outline: var(--#{$prefix}carousel-outline);
     box-shadow: $df-carousel-focused-box-shadow;
   }
@@ -38,7 +38,7 @@
     }
     background-size: var(--#{$prefix}carousel-indicator-bg-size);
   }
-  
+
   .carousel-caption {
     background-color: var(--#{$prefix}carousel-indicator-bg-color); // add
     bottom: var(--#{$prefix}carousel-caption-bottom); // override

package/styles/scss/components/datepicker/_datepicker.scss

@@ -50,7 +50,7 @@
     height: var(--#{$prefix}datepicker-arrow-height);
     border-radius: var(--#{$prefix}datepicker-arrow-border-radius);
 
-    &:focus {
+    &:focus-visible {
       outline: $df-datepicker-focused-outline;
       box-shadow: $df-datepicker-focused-box-shadow;
     }
@@ -348,6 +348,7 @@ ngb-datepicker {
 
     .input-group {
       --#{$prefix}iwi-dpr-focus-border: #{$df-input-datepicker-range-focus-border};
+      box-shadow: none !important;
     }
   }
 

package/styles/scss/components/dropdown/_dropdown.scss

@@ -109,7 +109,7 @@ body,
   &.active {
     font-weight: $df-dropdown-item-active-font-weight;
   }
-  &:focus,
+  &:focus-visible,
   &.focus {
     @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
       --#{$prefix}box-shadow-color: #{shades-css-var('primary', 'bg-subtle-active-color', true)};

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

@@ -22,7 +22,7 @@
 
 .df-rond-icon-only-focusable {
   outline: none;
-  &:focus {
+  &:focus-visible {
     &::before {
       box-shadow: $df-icon-focused-box-shadow;
       border-radius: 50%;
@@ -31,7 +31,7 @@
 }
 .df-square-icon-only-focusable {
   outline: none;
-  &:focus {
+  &:focus-visible {
     &::before {
       box-shadow: $df-icon-focused-box-shadow;
     }

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

@@ -93,7 +93,7 @@
   }
 
   box-shadow: none; // override mandatory
-  &:focus {
+  &:focus-visible {
     @include ltr {
       border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
     }
@@ -113,7 +113,7 @@
   }
   box-shadow: none; // override mandatory
   padding-left: 0px; // override mandatory
-  &:focus {
+  &:focus-visible {
     @include ltr {
       border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
     }

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

@@ -60,7 +60,7 @@
       border-radius: var(--#{$prefix}iwi-icon-border-radius);
       line-height: var(--#{$prefix}iwi-icon-line-height);
     }
-    &:focus {
+    &:focus-visible {
       outline: none; // override mandatory
       &:before {
         box-shadow: var(--#{$prefix}iwi-focused-box-shadow);
@@ -252,7 +252,7 @@ input[type='search']::-webkit-search-decoration {
     }
   }
 
-  &:has(input.df-input-withicon.prepend:focus) {
+  &:has(input.df-input-withicon.prepend:focus-visible) {
     @extend .df-focused;
   }
 }
@@ -264,7 +264,7 @@ input[type='search']::-webkit-search-decoration {
   &:has(.input-group-prepend) {
     @extend .df-input-prepend;
   }
-  &:has(input.df-input-withicon:focus) {
+  &:has(input.df-input-withicon:focus-visible) {
     @extend .df-focused;
   }
   .df-input-withicon:has(~ .input-group-append) {

package/styles/scss/components/modal/_modal.scss

@@ -41,6 +41,7 @@
   --#{$prefix}modal-xs-footer-margin-top: #{$df-modal-xs-footer-margin-top};
   --#{$prefix}modal-last-paragraph-margin-bottom: #{$df-modal-last-paragraph-margin-bottom};
   --#{$prefix}modal-footer-padding: #{$df-modal-footer-padding};
+  --#{$prefix}modal-body-padding: #{$df-modal-body-padding};
 
   overflow-x: hidden;
   overflow-y: auto;
@@ -70,11 +71,14 @@
             margin-right: auto;
             margin-left: 0;
           }
-          &:focus:not(:hover):not(:active) {
+          &:focus:not(:focus-visible) {
+            box-shadow: none;
+          }
+          &:focus-visible:not(:hover):not(:active) {
             color: var(--#{$prefix}modal-header-button-color-focus);
             --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-focus);
           }
-          &:focus:hover:not(:active) {
+          &:focus-visible:hover:not(:active) {
             --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-hover-focus);
             color: var(--#{$prefix}modal-header-button-color-hover-focus);
           }
@@ -84,16 +88,24 @@
             $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1a1a'><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: var(--#{$prefix}modal-header-button-color-hover-bg) $btn-close-bg center/0.8rem auto no-repeat;
           }
-          &:focus:active:not(:hover) {
+          &:focus-visible:active:not(:hover) {
             color: var(--#{$prefix}modal-header-button-active-color);
             --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-active-color);
 
             $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'><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: var(--#{$prefix}modal-header-button-active-bg) $btn-close-bg center/0.8rem auto no-repeat;
           }
-          &:focus:active:hover {
+          &:focus-visible:active:hover {
             --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-hover-focus);
           }
+          @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+            &:hover {
+              background-color: var(--#{$prefix}button-text-basic-color-neutral-hovered-background);
+            }
+            &:active {
+              background-color: var(--#{$prefix}button-text-basic-color-neutral-pressed-background);
+            }
+          }
         }
 
         .alert-modal-icon {
@@ -110,6 +122,7 @@
       }
 
       .modal-body {
+        padding: var(--#{$prefix}modal-body-padding);
         p:last-child {
           margin-bottom: var(--#{$prefix}modal-last-paragraph-margin-bottom);
         }

package/styles/scss/components/modal/_modal.variables.scss

@@ -24,5 +24,6 @@ $df-modal-xs-footer-margin-top: 0.9375rem !default;
 
 $df-modal-last-paragraph-margin-bottom: 0 !default;
 $df-modal-footer-padding: map.get($spacers, 5) map.get($spacers, 6) !default;
+$df-modal-body-padding: map.get($spacers, 5) map.get($spacers, 6) !default;
 $df-modal-btn-close-opacity: 1 !default;
 $df-modal-btn-close-hover-opacity: 1 !default;

package/styles/scss/components/pagination/_pagination.scss

@@ -78,11 +78,16 @@
       }
 
       &:focus {
+        box-shadow: none;
+      }
+
+      &:focus-visible {
         z-index: 2;
 
         &:hover {
           --#{$prefix}pagination-focus-bg: var(--#{$prefix}pagination-hover-bg);
         }
+        box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
       }
 
       z-index: initial; // overides z-index: 2 so that it is below the active page link

package/styles/scss/components/rating/_rating.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use 'sass:meta';
 
 // flag angular
 // stylelint-disable-next-line selector-type-no-unknown
@@ -20,6 +21,9 @@ ngb-rating {
   --#{$prefix}rating-box-shadow: #{$df-rating-box-shadow};
   --#{$prefix}rating-focus-box-shadow: #{$df-rating-focus-box-shadow};
   --#{$prefix}rating-border-color: #{$df-rating-border-color};
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    --#{$prefix}box-shadow-color: var(--#{$prefix}rating-color);
+  }
 
   font-size: var(--#{$prefix}rating-font-size);
   color: var(--#{$prefix}rating-color);
@@ -37,17 +41,23 @@ ngb-rating {
   box-shadow: var(--#{$prefix}rating-box-shadow);
   border-color: var(--#{$prefix}rating-border-color);
 
-  &:not([aria-disabled='true']):focus {
+  &:not([aria-disabled='true']):focus-visible {
     border: var(--#{$prefix}rating-focus-border);
     box-shadow: var(--#{$prefix}rating-focus-box-shadow);
   }
 
   &:hover {
     color: var(--#{$prefix}rating-hover-color);
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      --#{$prefix}box-shadow-color: var(--#{$prefix}rating-hover-color);
+    }
   }
 
   &:active {
     color: var(--#{$prefix}rating-active-color);
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      --#{$prefix}box-shadow-color: var(--#{$prefix}rating-active-color);
+    }
   }
 
   &[aria-disabled='true'] {
@@ -60,7 +70,13 @@ ngb-rating {
   }
 
   &.ng-invalid {
-    @extend .text-danger;
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      --#{$prefix}rating-color: var(--#{$prefix}color-danger-main-default-foreground);
+      --#{$prefix}rating-hover-color: var(--#{$prefix}color-danger-main-hovered-foreground);
+      --#{$prefix}rating-active-color: var(--#{$prefix}color-danger-main-pressed-foreground);
+    } @else {
+      @extend .text-danger;
+    }
   }
 
   //the 0px margins belows ensure that the full stars overlap the empty ones

package/styles/scss/components/scrollspy/_scrollspy.scss

@@ -32,6 +32,7 @@
   border-left: var(--#{$prefix}scrollspy-navpill-border-left);
   //used when not active for old branding for the border-left to imitate a scrollbar
   border-width: var(--#{$prefix}scrollspy-navpill-border-width);
+  display: flex;
 
   &.active {
     .df-icon-inlink {
@@ -59,7 +60,6 @@
     }
   }
 
-  &:focus,
   &:focus-visible {
     // we are using this new scss var and not --#{$prefix}scrollspy-color because it will impact the old branding
     --#{$prefix}box-shadow-color: #{$df-scrollspy-focus-box-shadow-color};

package/styles/scss/components/sidenav/_sidenav.scss

@@ -198,7 +198,7 @@
           }
         }
 
-        &:focus,
+        &:focus-visible,
         &.focus {
           // Title can never be focus
           --#{$prefix}box-shadow-color: var(--#{$prefix}sidenav-item-focused-box-shadow-color);
@@ -234,7 +234,7 @@
           font-weight: var(--#{$prefix}sidenav-item-active-font-weight);
           border-inline-start: var(--#{$prefix}sidenav-item-border-start-active);
 
-          &:focus,
+          &:focus-visible,
           &.focus {
             // Title can never be focus
             &:before {

package/styles/scss/components/stepper/_stepper.variables.scss

@@ -35,11 +35,11 @@ $df-stepper-step-padding-y: $btn-padding-y !default;
 $df-stepper-step-padding-x: 0.75rem !default;
 // TODO put a link in this ot the ratios of the button? Must be the same
 $df-stepper-step-padding-y-sm: $btn-padding-y * map.get($df-sizing-ratios, 'sm') !default;
-$df-stepper-step-padding-x-sm: $btn-padding-x * map.get($df-size-ratios, 'sm') !default;
+$df-stepper-step-padding-x-sm: calc($btn-padding-x * map.get($df-size-ratios, 'sm')) !default;
 $df-stepper-step-padding-y-lg: $btn-padding-y * map.get($df-sizing-ratios, 'lg') !default;
-$df-stepper-step-padding-x-lg: $btn-padding-x * map.get($df-size-ratios, 'lg') !default;
+$df-stepper-step-padding-x-lg: calc($btn-padding-x * map.get($df-size-ratios, 'lg')) !default;
 $df-stepper-step-padding-y-xl: $btn-padding-y * map.get($df-sizing-ratios, 'xl') !default;
-$df-stepper-step-padding-x-xl: $btn-padding-x * map.get($df-size-ratios, 'xl') !default;
+$df-stepper-step-padding-x-xl: calc($btn-padding-x * map.get($df-size-ratios, 'xl')) !default;
 $df-stepper-step-height: auto !default;
 $df-stepper-hl-height: 0px !default;
 $df-stepper-hl-margin: 2 * $border-width 0 0 0 !default; //0.5

package/styles/scss/components/tabs/_tabs.scss

@@ -63,6 +63,10 @@
     }
 
     &:focus {
+      box-shadow: none;
+    }
+
+    &:focus-visible {
       // override
       outline: var(--#{$prefix}tabs-focus-outline); // add to override default
       box-shadow: var(--#{$prefix}tabs-focus-box-shadow); // add
@@ -217,7 +221,7 @@
         }
       }
 
-      &:focus {
+      &:focus-visible {
         outline: 0;
         box-shadow: $df-tabs-focus-box-shadow;
       }

package/styles/scss/components/timepicker/_timepicker.scss

@@ -0,0 +1,5 @@
+ngb-timepicker {
+  .ngb-tp-spacer {
+    width: $df-timepicker-spacer-width !important;
+  }
+}

package/styles/scss/components/timepicker/_timepicker.variables.scss

@@ -0,0 +1 @@
+$df-timepicker-spacer-width: 1em !default;

package/styles/scss/components/toggle/_toggle.scss

@@ -24,6 +24,7 @@
   --#{$prefix}switch-name-padding-start: 0;
   --#{$prefix}switch-padding-start: #{$form-switch-padding-start};
   --#{$prefix}switch-input-padding-start: 0;
+  --#{$prefix}switch-container-margin-top: #{$df-switch-container-margin-top};
 
   display: flex;
   align-items: center;
@@ -138,7 +139,7 @@
     .df-form-switch-container {
       display: flex;
       align-items: center;
-      margin-top: #{($line-height-base - $form-check-input-width) * 0.5};
+      margin-top: var(--#{$prefix}switch-container-margin-top);
     }
   }
 }

package/styles/scss/components/toggle/_toggle.variables.scss

@@ -19,3 +19,4 @@ $df-switch-rtl-checked-bg-position: left center !default;
 $df-switch-rtl-bg-position: right center !default;
 $df-switch-box-shadow-opacity: $input-btn-focus-color-opacity !default;
 $df-switch-box-shadow: $form-check-input-focus-box-shadow !default;
+$df-switch-container-margin-top: #{($line-height-base - $form-check-input-width) * 0.5} !default;

package/styles/scss/components/tooltip/_tooltip.scss

@@ -1,12 +1,17 @@
 .tooltip {
   --#{$prefix}tooltip-border-radius-sm: #{$df-tooltip-border-radius-sm};
   --#{$prefix}tooltip-border-radius-lg: #{$df-tooltip-border-radius-lg};
+  --#{$prefix}tooltip-padding-x-sm: #{$df-tooltip-padding-x-sm};
+  --#{$prefix}tooltip-padding-x-lg: #{$df-tooltip-padding-x-lg};
+  --#{$prefix}tooltip-padding-y-sm: #{$df-tooltip-padding-y-sm};
+  --#{$prefix}tooltip-padding-y-lg: #{$df-tooltip-padding-y-lg};
 
   @each $extension, $ratio in $df-size-ratios {
     &.tooltip-inner-#{$extension} {
       .tooltip-inner {
         @include border-radius(var(--#{$prefix}tooltip-border-radius-#{$extension}));
         font-size: get-sizing-brand2023($extension, $ratio);
+        padding: var(--#{$prefix}tooltip-padding-y-#{$extension}) var(--#{$prefix}tooltip-padding-x-#{$extension});
       }
     }
   }

package/styles/scss/components/tooltip/_tooltip.variables.scss

@@ -1,2 +1,6 @@
 $df-tooltip-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
 $df-tooltip-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+$df-tooltip-padding-x-sm: 0.75rem !default;
+$df-tooltip-padding-x-lg: 0.75rem !default;
+$df-tooltip-padding-y-sm: 0.25rem !default;
+$df-tooltip-padding-y-lg: 0.375rem !default;

package/styles/scss/df-styles.scss

@@ -103,6 +103,7 @@
 @import 'components/footer/footer';
 @import 'components/toast/toast';
 @import 'components/scrollspy/scrollspy';
+@import 'components/timepicker/timepicker';
 @import 'components/tooltip/tooltip';
 
 @import 'bootstrap/rtl-styles-override';