@design-factory/design-factory 20.0.0-next.1 → 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

@@ -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/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,9 +108,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 +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