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

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

@@ -13,4 +13,23 @@
   > .btn-group:not(:first-child) > .btn {
     @include border-start-radius($radius);
   }
-}
+}
+
+/*
+  Check if $variableName exists, if not, return the $defaultVariableName (without the prefix).
+
+  @param {String} $variableName - Variable name to check, should not include the prefix.
+  @param {String} $defaultVariableName - Default variable name to return if the primary variable does not exist, should not include the prefix.
+  @return {String} The variable name to use, either the primary or the default.
+*/
+@function varWithDefault($variableName, $defaultVariableName) {
+  @if meta.variable-exists($name: 'df-' + $variableName) or not
+    (meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023)
+  {
+    @return $variableName;
+  }
+  @if not meta.variable-exists($name: 'df-' + $defaultVariableName) {
+    @error "Variable 'df-#{$defaultVariableName}' does not exist.";
+  }
+  @return $defaultVariableName;
+}

package/styles/scss/components/button/_button_container.scss

@@ -2,12 +2,28 @@
 
 @each $state, $value in $theme-colors {
   $colorbtn: color-contrast($value);
-  $hover-background: if($colorbtn == $color-contrast-light, shade-color($value, $btn-hover-bg-shade-amount), tint-color($value, $btn-hover-bg-tint-amount));
-  $hover-border: if($colorbtn == $color-contrast-light, shade-color($value, $btn-hover-border-shade-amount), tint-color($value, $btn-hover-border-tint-amount));
+  $hover-background: if(
+    $colorbtn == $color-contrast-light,
+    shade-color($value, $btn-hover-bg-shade-amount),
+    tint-color($value, $btn-hover-bg-tint-amount)
+  );
+  $hover-border: if(
+    $colorbtn == $color-contrast-light,
+    shade-color($value, $btn-hover-border-shade-amount),
+    tint-color($value, $btn-hover-border-tint-amount)
+  );
   $hover-color: color-contrast($hover-background);
-  $active-background: if($colorbtn == $color-contrast-light, shade-color($value, $btn-active-bg-shade-amount), tint-color($value, $btn-active-bg-tint-amount));
+  $active-background: if(
+    $colorbtn == $color-contrast-light,
+    shade-color($value, $btn-active-bg-shade-amount),
+    tint-color($value, $btn-active-bg-tint-amount)
+  );
   $active-color: color-contrast($active-background);
-  $active-border: if($colorbtn == $color-contrast-light, shade-color($value, $btn-active-border-shade-amount), tint-color($value, $btn-active-border-tint-amount));
+  $active-border: if(
+    $colorbtn == $color-contrast-light,
+    shade-color($value, $btn-active-border-shade-amount),
+    tint-color($value, $btn-active-border-tint-amount)
+  );
 
   $active-background-outline: $value;
   $active-border-outline: $value;
@@ -19,7 +35,8 @@
   #{$df-css-namespace-selector} {
     .btn-check:checked,
     .btn-check:active {
-      & + .btn-#{$state}, & + .btn-outline-#{$state} {
+      & + .btn-#{$state},
+      & + .btn-outline-#{$state} {
         color: var(--#{$prefix}btn-active-color);
         background-color: var(--#{$prefix}btn-active-bg);
         border-color: var(--#{$prefix}btn-active-border-color);

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;
   }
@@ -53,6 +67,7 @@
 
     &:focus-visible {
       --#{$prefix}box-shadow-color: #{$df-card-focusable-focus-box-shadow-color};
+
       &:not(:hover):not(:active) {
         color: var(--#{$prefix}card-focusable-color);
       }
@@ -146,30 +161,47 @@
   }
 }
 
+.card-group {
+  --#{$prefix}card-box-shadow: #{$card-box-shadow};
+  --#{$prefix}card-border-radius: #{$card-border-radius};
+}
+
 @include media-breakpoint-up(md) {
   .card-group {
     box-shadow: var(--#{$prefix}card-box-shadow);
-    border-bottom-right-radius: var(--#{$prefix}card-border-radius);
-    border-bottom-left-radius: var(--#{$prefix}card-border-radius);
+    border-radius: var(--#{$prefix}card-border-radius);
 
     .card {
       box-shadow: none;
+      border-radius: 0;
 
       &:not(:last-of-type) {
         border-inline-end: var(--#{$prefix}card-group-between-border-width) solid
           var(--#{$prefix}card-group-between-border-color);
       }
 
-      &:first-of-type,
-      &:first-of-type .card-img-top {
-        border-start-start-radius: var(--#{$prefix}card-border-radius);
-        border-start-end-radius: 0;
+      .card-img-top {
+        border-radius: 0;
       }
 
-      &:last-of-type,
-      &:last-of-type .card-img-top {
-        border-start-end-radius: var(--#{$prefix}card-border-radius);
-        border-start-start-radius: 0;
+      &:first-of-type {
+        border-end-start-radius: var(--#{$prefix}card-border-radius);
+
+        &,
+        & .card-img-top {
+          border-start-start-radius: var(--#{$prefix}card-border-radius);
+          border-start-end-radius: 0;
+        }
+      }
+
+      &:last-of-type {
+        border-end-end-radius: var(--#{$prefix}card-border-radius);
+
+        &,
+        & .card-img-top {
+          border-start-end-radius: var(--#{$prefix}card-border-radius);
+          border-start-start-radius: 0;
+        }
       }
     }
   }

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/checkbox/_checkbox.scss

@@ -6,7 +6,8 @@
   @if (meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023) {
     --#{$prefix}checkbox-invalid-feedback-margin-start: #{-1em * math.div($form-check-padding-start, 0.875em)};
   } @else {
-    --#{$prefix}checkbox-invalid-feedback-margin-start: #{-1em * math.div($form-check-padding-start, $form-feedback-font-size)};
+    --#{$prefix}checkbox-invalid-feedback-margin-start: #{-1em *
+      math.div($form-check-padding-start, $form-feedback-font-size)};
   }
 
   --#{$prefix}checkbox-disabled-background-color: #{$df-checkbox-disabled-background-color};

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

@@ -49,11 +49,13 @@ body,
 
     &.btn-outline-primary {
       --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-hover-color);
+
       &:hover {
         --#{$prefix}btn-active-bg: var(--#{$prefix}btn-hover-bg);
         --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-hover-border-color);
         --#{$prefix}btn-active-color: var(--#{$prefix}btn-hover-color);
       }
+
       &:focus-visible {
         --#{$prefix}box-shadow-color: var(--#{$prefix}btn-hover-color);
         --#{$prefix}btn-focus-only-border-color: var(--#{$prefix}btn-hover-color);
@@ -106,10 +108,12 @@ body,
 
 .dropdown-item {
   border: var(--#{$prefix}dropdown-item-border-width) solid transparent;
+
   &.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)};
@@ -145,6 +149,19 @@ body,
   }
 }
 
+//Redefine bootstrap dropdown-item styles to override links behaviour
+a.dropdown-item {
+  &,
+  &:hover {
+    color: var(--#{$prefix}dropdown-link-color);
+    border-bottom-width: var(--#{$prefix}dropdown-item-border-width);
+  }
+
+  &:hover {
+    background-color: var(--#{$prefix}dropdown-link-hover-bg);
+  }
+}
+
 // Flag Angular
 // This style is needed due to a drop-start feature of bootstrap where the first child of the
 // btn-group with dropdown-toggle-split class has no rounded corners