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

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

@@ -42,7 +42,7 @@
   }
 
   .card-text {
-    margin-block-end: var(--#{$prefix}card-text-block-end);
+    margin-block-end: var(--#{$prefix}card-text-margin-block-end);
 
     &:last-child {
       margin-block-end: 0;
@@ -67,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);
       }
@@ -160,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/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/collapse/_collapse.scss

@@ -1,3 +1,4 @@
+@use 'sass:meta';
 @import '../link/link.mixins';
 
 // @deprecated - will be removed in version 21
@@ -59,7 +60,11 @@ button.df-collapse {
 
   display: inline-flex;
   align-items: center;
-  gap: var(--#{$prefix}btn-icon-margin-end);
+  @if meta.variable-exists(df-btn-group-hover-box-shadow-color) {
+    gap: var(--#{$prefix}spacing-2);
+  } @else {
+    gap: var(--#{$prefix}btn-icon-margin-end);
+  }
 
   color: var(--#{$prefix}collapse-link-color);
   text-decoration: var(--#{$prefix}collapse-link-decoration);

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

@@ -4,15 +4,13 @@
   width: 100%;
 }
 
-.ngb-dp-navigation-select .form-select {
-  @include ltr {
-    padding-left: 0.5rem;
-    padding-right: 0;
-  }
-  @include rtl {
-    background-position: left 0.25rem center;
-    padding-left: 0;
-    padding-right: 0.5rem;
+.ngb-dp-navigation-select {
+  column-gap: var(--#{$prefix}spacing-2);
+  margin-inline: var(--#{$prefix}spacing-2);
+
+  .form-select {
+    padding-inline: var(--#{$prefix}spacing-3);
+    padding-block: var(--#{$prefix}spacing-2);
   }
 }
 
@@ -44,8 +42,8 @@
   justify-content: var(--#{$prefix}datepicker-navigation-arrow-justify-contents);
 
   .ngb-dp-arrow-btn {
-    padding-right: 0;
-    padding-left: 0;
+    margin-inline: 0;
+    padding-inline: 0;
     min-width: var(--#{$prefix}datepicker-arrow-width);
     height: var(--#{$prefix}datepicker-arrow-height);
     border-radius: var(--#{$prefix}datepicker-arrow-border-radius);

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);
@@ -72,6 +74,12 @@ body,
       font-weight: var(--#{$prefix}dropdown-toggle-font-weight); // Fix IE11 bug
     }
 
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      &.btn-sm {
+        --#{$prefix}dropdown-toggle-margin: var(--#{$prefix}spacing-2);
+      }
+    }
+
     & > [class*='icon-']:before {
       margin-inline-end: var(--#{$prefix}dropdown-toggle-margin);
     }
@@ -106,9 +114,11 @@ body,
 
 .dropdown-item {
   border: var(--#{$prefix}dropdown-item-border-width) solid transparent;
+
   &.active {
     font-weight: $df-dropdown-item-active-font-weight;
   }
+
   &:focus-visible,
   &.focus {
     @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
@@ -145,6 +155,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