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

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

@@ -5,9 +5,12 @@
     // TODO: remove the condition during DEZFACT-1675
     @if ($iconContent == $df-pagination-first-icon-code or $iconContent == $df-pagination-last-icon-code) {
       @extend %df-icon-style;
+      vertical-align: unset;
+      line-height: var(--#{$prefix}body-line-height);
     } @else {
       font-family: $df-font-awesome-font-family;
     }
+
     span:after {
       content: $iconContent;
     }
@@ -31,17 +34,29 @@
   --#{$prefix}pagination-active-link-font-weight: #{$df-pagination-active-link-font-weight};
 
   margin-bottom: var(--#{$prefix}pagination-margin-bottom);
+
   .page-item {
     @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
       &.active > .page-link {
         font-weight: var(--#{$prefix}pagination-active-link-font-weight);
+
         &:hover {
           background-color: var(--#{$prefix}pagination-hover-bg);
           color: var(--#{$prefix}pagination-hover-color);
         }
       }
+    } @else {
+      &.active > .page-link {
+        &,
+        &:hover {
+          background-color: var(--#{$prefix}pagination-active-bg);
+          color: var(--#{$prefix}pagination-active-color);
+        }
+      }
     }
+
     .page-link {
+      color: var(--#{$prefix}pagination-color); //override link behaviour
       height: var(--#{$prefix}pagination-size);
       min-width: var(--#{$prefix}pagination-size);
       border-radius: var(--#{$prefix}pagination-item-border-radius);
@@ -53,26 +68,49 @@
       &:hover {
         z-index: 1;
         text-decoration: $df-pagination-hover-text-decoration;
+        color: var(--#{$prefix}pagination-hover-color); //override link behaviour
+        background-color: var(--#{$prefix}pagination-hover-bg); //override link behaviour
+        border-color: var(--#{$prefix}pagination-hover-border-color); //override link behaviour
       }
+
       &:active {
         --#{$prefix}pagination-hover-bg: var(--#{$prefix}pagination-active-link-bg);
       }
+
       &: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
     }
+
     &.disabled {
       cursor: $df-pagination-disabled-cursor;
+      & > .page-link {
+        color: var(--#{$prefix}pagination-disabled-color);
+        pointer-events: none;
+        background-color: var(--#{$prefix}pagination-disabled-bg);
+        border-color: var(--#{$prefix}pagination-disabled-border-color);
+        font-weight: inherit;
+      }
     }
+
     .page-link[aria-label] {
       border-radius: var(--#{$prefix}pagination-direction-border-radius) !important;
+
       span {
         font-size: 0px; // use this trick because visibility: hidden is not working correctly on IE (it also hides the :after content)
         text-decoration: none;
+
         &:after {
           color: var(--#{$prefix}pagination-icon-color);
           position: absolute;
@@ -93,6 +131,7 @@
           // needs to override the styles of @extend %df-icon-style;
         }
       }
+
       &:hover {
         span:after {
           color: var(--#{$prefix}pagination-icon-hover-color);
@@ -101,12 +140,15 @@
       }
     }
   }
+
   .page-item.active .page-link {
     z-index: 2;
   }
+
   .page-item.disabled .page-link span:after {
     color: $pagination-disabled-color !important;
   }
+
   // TODO: First Part When icons customization feature will be added to ng-bootstrap, use it and remove following css
   // Link to ng-bootsrap issue : https://github.com/ng-bootstrap/ng-bootstrap/issues/899
   // css style to modify the arrow texts with DF icons
@@ -119,6 +161,7 @@
       @include replace-span-innertext-with-icon($df-pagination-next-icon-code);
     }
   }
+
   li.page-item:nth-last-of-type(1) {
     @include ltr {
       @include replace-span-innertext-with-icon($df-pagination-next-icon-code);
@@ -127,6 +170,7 @@
       @include replace-span-innertext-with-icon($df-pagination-previous-icon-code);
     }
   }
+
   .page-item + .page-item {
     @include ltr {
       margin-left: var(--#{$prefix}pagination-between-list-item-space);
@@ -135,10 +179,11 @@
       margin-right: var(--#{$prefix}pagination-between-list-item-space);
     }
   }
+
   &.pagination-lg {
     --#{$prefix}pagination-size: #{$df-pagination-size-lg};
     --#{$prefix}pagination-item-border-radius: #{$df-pagination-border-radius-lg};
-    --#{$prefix}pagination-item-font-size: #{$font-size-lg};
+    --#{$prefix}pagination-item-font-size: #{$df-pagination-font-size-lg};
     --#{$prefix}pagination-icon-offset-start: #{$df-pagination-icon-offset-start-lg};
     --#{$prefix}custom-pages-input-minwidth: #{$df-custom-pages-input-minwidth-lg};
   }
@@ -155,12 +200,13 @@
 .df-custom-pages {
   .pagination-sm {
     align-items: var(--#{$prefix}custom-pages-sm-vertical-alignment);
+
     .page-item {
       height: fit-content;
-      height: -moz-max-content;
     }
   }
 }
+
 // TODO: Second Part
 // second case: boundaryLinks = true
 .with-boundary-links {
@@ -173,6 +219,7 @@
         @include replace-span-innertext-with-icon($df-pagination-last-icon-code);
       }
     }
+
     .page-item:nth-of-type(2) {
       @include ltr {
         @include replace-span-innertext-with-icon($df-pagination-previous-icon-code);
@@ -181,6 +228,7 @@
         @include replace-span-innertext-with-icon($df-pagination-next-icon-code);
       }
     }
+
     .page-item:nth-last-of-type(2) {
       @include ltr {
         @include replace-span-innertext-with-icon($df-pagination-next-icon-code);
@@ -189,6 +237,7 @@
         @include replace-span-innertext-with-icon($df-pagination-previous-icon-code);
       }
     }
+
     .page-item:nth-last-of-type(1) {
       @include ltr {
         @include replace-span-innertext-with-icon($df-pagination-last-icon-code);

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

@@ -30,3 +30,6 @@ $df-pagination-direction-border-radius: 50% !default;
 $df-pagination-between-list-item-space: 0.2rem !default;
 $df-pagination-margin-bottom: 0px !default; // reset the ul margin.
 $df-custom-pages-sm-vertical-alignment: center !default;
+
+$df-pagination-font-size-lg: $font-size-lg !default;
+$df-pagination-font-size-active-lg: $font-size-lg !default;

package/styles/scss/components/popover/_popover.mixin.scss

@@ -30,7 +30,7 @@
   &.popover-sm {
     --#{$prefix}popover-padding: #{$df-popover-sm-padding};
     --#{$prefix}popover-header-margin: #{$df-popover-header-sm-margin};
-    --#{$prefix}popover-header-font-size: #{$h4-font-size};
+    --#{$prefix}popover-header-font-size: #{$df-popover-header-font-size-sm};
     --#{$prefix}popover-body-font-size: #{$font-size-sm};
     --#{$prefix}popover-body-margin: #{$df-popover-body-sm-margin};
     --#{$prefix}popover-border-radius: var(--#{$prefix}popover-border-radius-sm);

package/styles/scss/components/popover/_popover.scss

@@ -6,7 +6,7 @@
   --#{$prefix}popover-header-line-height: #{$df-popover-header-line-height};
   --#{$prefix}popover-header-margin: #{$df-popover-header-default-margin};
   --#{$prefix}popover-body-margin: #{$df-popover-body-default-margin};
-  --#{$prefix}popover-header-font-size: #{$h3-font-size};
+  --#{$prefix}popover-header-font-size: #{$df-popover-header-font-size};
   --#{$prefix}popover-body-font-size: #{$font-size-base};
   --#{$prefix}popover-border-radius-sm: #{$df-popover-border-radius-sm};
   --#{$prefix}popover-border-radius-lg: #{$df-popover-border-radius-lg};

package/styles/scss/components/popover/_popover.variables.scss

@@ -19,3 +19,7 @@ $df-popover-body-lg-margin: 0 !default;
 
 $df-popover-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
 $df-popover-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+
+$df-popover-header-font-size: $h3-font-size !default;
+$df-popover-header-font-size-sm: $h4-font-size !default;
+$df-popover-header-font-size-lg: $h2-font-size !default;

package/styles/scss/components/progressbar/_progressbar.scss

@@ -1,3 +1,13 @@
+.progress {
+  --#{$prefix}progress-border-width: #{$df-progress-border-width};
+  --#{$prefix}progress-border-style: #{$df-progress-border-style};
+  --#{$prefix}progress-border-color: #{$df-progress-border-color};
+
+  border-width: var(--#{$prefix}progress-border-width);
+  border-style: var(--#{$prefix}progress-border-style);
+  border-color: var(--#{$prefix}progress-border-color);
+}
+
 .progress-bar {
   --#{$prefix}progress-bar-border-radius: #{$progress-border-radius};
   --#{$prefix}progress-bar-infinite-animation-duration: #{$df-progress-bar-infinite-animation-duration};
@@ -53,6 +63,7 @@
 .df-dark-background-version {
   .progress {
     --#{$prefix}progress-bg: #{$df-darkBackgroundVersion-progressbar-background-color};
+    --#{$prefix}progress-border-color: #{$df-darkBackgroundVersion-progress-border-color};
   }
   .progress-bar {
     --#{$prefix}progress-bar-bg: #{$df-darkBackgroundVersion-progressbar-color};

package/styles/scss/components/progressbar/_progressbar.variables.scss

@@ -2,6 +2,11 @@ $df-progress-bar-infinite-animation-duration: 2.2s !default; // can be changed t
 $df-progress-bar-text-color: $gray-600 !default;
 $df-progress-bar-display: block !default;
 $df-progress-bar-infinite-animation-function: linear !default;
+$df-progress-border-width: 0.5px !default;
+$df-progress-border-style: solid !default;
+$df-progress-border-color: $gray-700 !default;
+
+$df-darkBackgroundVersion-progress-border-color: $white !default;
 
 /**
   Color of the progressbar background (~color of the progressbar with 0% progress) for the 'dark background' version

package/styles/scss/components/radio/_radio.scss

@@ -1,18 +1,24 @@
 @use 'sass:meta';
-
-div[role='radiogroup'] {
+//TODO: remove the old "div[role='radiogroup']" selector in DF 21
+div[role='radiogroup'],
+fieldset[role='radiogroup'] {
   --#{$prefix}radiogroup-legend-margin-bottom: #{$df-radiogroup-legend-margin-bottom};
   --#{$prefix}radiogroup-font-size: #{$df-fieldset-legend-font-size};
-  > span {
-    font-weight: bold;
+  --#{$prefix}radiogroup-legend-font-weight: #{$df-radio-group-legend-font-weight};
+  //TODO: remove the old "span" selector in DF 21
+  > span,
+  > legend {
+    font-weight: var(--#{$df-radio-group-legend-font-weight});
     font-size: var(--#{$prefix}radiogroup-font-size);
     display: block;
     margin-bottom: var(--#{$prefix}radiogroup-legend-margin-bottom);
   }
 }
+
 .form-check {
   --#{$prefix}form-check-radio-checked-bg-color: #{$df-form-check-radio-checked-bg-color};
   --#{$prefix}form-check-radio-checked-disabled-bg-image: #{escape-svg($df-form-check-radio-checked-disabled-bg-image)};
+
   .form-check-input {
     &:checked {
       &[type='radio'] {
@@ -34,6 +40,7 @@ div[role='radiogroup'] {
         &:not(:checked):not(.is-invalid):focus {
           --#{$prefix}box-shadow-color: #{$input-border-color};
         }
+
         &:disabled:checked {
           background-color: var(--#{$prefix}checkbox-disabled-border-color);
         }

package/styles/scss/components/radio/_radio.variables.scss

@@ -1,3 +1,4 @@
 $df-form-check-radio-checked-bg-color: $white !default;
 $df-form-check-radio-checked-disabled-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2.5' fill='#{$gray-300}'/></svg>") !default;
 $df-radiogroup-legend-margin-bottom: 0.5rem !default;
+$df-radio-group-legend-font-weight: bold !default;

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,11 +21,15 @@ 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);
   $star-margin: calc(var(--#{$prefix}rating-star-to-star-distance) * 0.5);
   margin: calc(var(--#{$prefix}rating-number-to-stars-distance) - $star-margin);
+
   span {
     margin: calc($star-margin);
   }
@@ -36,29 +41,42 @@ 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'] {
     color: var(--#{$prefix}rating-disabled-color);
     cursor: var(--#{$prefix}rating-disabled-cursor);
+
     span {
       cursor: var(--#{$prefix}rating-disabled-cursor) !important;
     }
   }
 
   &.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
@@ -94,7 +112,7 @@ ngb-rating {
 
   @each $extension, $ratio in $df-size-ratios {
     &.df-rating-#{$extension} {
-      font-size: calc(#{$ratio} * var(--#{$prefix}rating-font-size));
+      font-size: get-sizing-brand2023($extension, $ratio, var(--#{$prefix}rating-font-size));
     }
   }
 }

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};
@@ -76,3 +76,10 @@
     box-shadow: $df-focused-inset-box-shadow;
   }
 }
+
+.nav.nav-pills:not([role='tablist']) {
+  // remove default link color
+  a.nav-link {
+    border-bottom: 0;
+  }
+}

package/styles/scss/components/select/_select.mixin.scss

@@ -0,0 +1,34 @@
+@mixin df-select-border-radius-panel($border-radius-variable) {
+  .ng-dropdown-panel {
+    --#{$prefix}select-panel-border-radius: #{$border-radius-variable};
+    border-radius: var(--#{$prefix}select-panel-border-radius);
+
+    &.ng-select-bottom {
+      border-bottom-right-radius: #{$border-radius-variable};
+      border-bottom-left-radius: #{$border-radius-variable};
+
+      .ng-dropdown-panel-items {
+        .ng-option {
+          &:last-child {
+            border-bottom-right-radius: #{$border-radius-variable};
+            border-bottom-left-radius: #{$border-radius-variable};
+          }
+        }
+      }
+    }
+
+    &.ng-select-top {
+      border-top-right-radius: #{$border-radius-variable};
+      border-top-left-radius: #{$border-radius-variable};
+
+      .ng-dropdown-panel-items {
+        .ng-option {
+          &:first-child {
+            border-top-right-radius: #{$border-radius-variable};
+            border-top-left-radius: #{$border-radius-variable};
+          }
+        }
+      }
+    }
+  }
+}

package/styles/scss/components/select/_select.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:selector';
+@import 'select.mixin';
 
 .form-select,
 .ng-select {
@@ -193,6 +194,7 @@
     .ng-select-container {
       border-radius: var(--#{$prefix}select-border-radius-lg);
     }
+    @include df-select-border-radius-panel($df-select-panel-border-radius-lg);
   }
   &.form-control-sm {
     // add
@@ -200,6 +202,7 @@
     .ng-select-container {
       border-radius: var(--#{$prefix}select-border-radius-sm);
     }
+    @include df-select-border-radius-panel($df-select-panel-border-radius-sm);
   }
   &:not(.ng-select-multiple) {
     // override
@@ -340,7 +343,7 @@
       overflow: hidden; // add
       align-items: center;
       .ng-placeholder {
-        font-style: italic;
+        font-style: $df-form-placeholder-font-style;
         color: $input-placeholder-color;
         // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
         opacity: 1;
@@ -617,11 +620,10 @@
       }
     }
   }
-
+  @include df-select-border-radius-panel($df-select-panel-border-radius);
   .ng-dropdown-panel {
     background-color: #fff;
     border: var(--#{$prefix}select-panel-border); // override
-    border-radius: var(--#{$prefix}select-panel-border-radius); // add
     box-shadow: var(--#{$prefix}select-panel-box-shadow); // override
     overflow: auto;
     width: initial; // override
@@ -632,31 +634,15 @@
     }
     &.ng-select-bottom {
       top: calc(100% + #{$input-btn-focus-width} + 1px); // override
-      border-bottom-right-radius: 0.25rem;
-      border-bottom-left-radius: 0.25rem;
       .ng-dropdown-panel-items {
         .ng-option {
           white-space: initial; // override
-          &:last-child {
-            border-bottom-right-radius: 0.25rem;
-            border-bottom-left-radius: 0.25rem;
-          }
         }
       }
     }
     &.ng-select-top {
       bottom: calc(100% + #{$input-btn-focus-width} + 1px);
-      border-top-right-radius: 0.25rem;
-      border-top-left-radius: 0.25rem;
       margin-bottom: -1px;
-      .ng-dropdown-panel-items {
-        .ng-option {
-          &:first-child {
-            border-top-right-radius: 0.25rem;
-            border-top-left-radius: 0.25rem;
-          }
-        }
-      }
     }
     .ng-dropdown-header {
       // todo check when needed

package/styles/scss/components/select/_select.variables.scss

@@ -51,6 +51,8 @@ $df-select-value-margin: $form-select-padding-y !default;
 $df-select-value-margin-sm: $input-padding-y-sm !default;
 $df-select-value-margin-lg: $input-padding-y-lg !default;
 $df-select-panel-border-radius: 2px !default;
+$df-select-panel-border-radius-sm: 2px !default;
+$df-select-panel-border-radius-lg: 2px !default;
 $df-select-panel-box-shadow: var(--#{$prefix}box-shadow) !default;
 $df-select-optgroup-border: $border-width solid $border-color !default;
 $df-select-icon-color: $form-select-indicator-color !default;

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/speechbubble/_speechbubble.scss

@@ -145,3 +145,22 @@
   @include speech-color(var(--#{$prefix}speech-user-color), var(--#{$prefix}speech-user-bg-color));
   @extend .df-speech-right;
 }
+
+.df-font-sm {
+  .df-speech,
+  .df-speech-btn {
+    --#{$prefix}speech-border-radius: #{$df-speech-border-radius-sm};
+    --#{$prefix}speech-tail-radius-left: #{$df-speech-tail-radius-left-sm};
+    --#{$prefix}speech-tail-radius-right: #{$df-speech-tail-radius-right-sm};
+    --#{$prefix}speech-btn-border-radius: #{$df-speech-border-radius-sm};
+  }
+}
+.df-font-lg {
+  .df-speech,
+  .df-speech-btn {
+    --#{$prefix}speech-border-radius: #{$df-speech-border-radius-lg};
+    --#{$prefix}speech-tail-radius-left: #{$df-speech-tail-radius-left-lg};
+    --#{$prefix}speech-tail-radius-right: #{$df-speech-tail-radius-right-lg};
+    --#{$prefix}speech-btn-border-radius: #{$df-speech-border-radius-lg};
+  }
+}

package/styles/scss/components/speechbubble/_speechbubble.variables.scss

@@ -1,6 +1,8 @@
 $df-speech-size: 2.25em !default;
 $df-speech-bubble-height: 1.5em !default;
 $df-speech-border-radius: 0.25em !default;
+$df-speech-border-radius-sm: $df-speech-border-radius !default;
+$df-speech-border-radius-lg: $df-speech-border-radius !default;
 $df-speech-padding-y: 0.375em !default;
 $df-speech-padding-x: 1em !default;
 $df-speech-gap: 0.28em !default;
@@ -17,5 +19,9 @@ $df-speech-btn-position: relative !default;
 $df-speech-btn-z-index: 1 !default;
 $df-speech-tail-left: 'left' !default;
 $df-speech-tail-radius-left: $df-speech-border-radius $df-speech-border-radius $df-speech-border-radius 0 !default;
+$df-speech-tail-radius-left-sm: $df-speech-border-radius-sm $df-speech-border-radius-sm $df-speech-border-radius-sm 0 !default;
+$df-speech-tail-radius-left-lg: $df-speech-border-radius-lg $df-speech-border-radius-lg $df-speech-border-radius-lg 0 !default;
 $df-speech-tail-right: 'right' !default;
 $df-speech-tail-radius-right: $df-speech-border-radius $df-speech-border-radius 0 $df-speech-border-radius !default;
+$df-speech-tail-radius-right-sm: $df-speech-border-radius-sm $df-speech-border-radius-sm 0 $df-speech-border-radius-sm !default;
+$df-speech-tail-radius-right-lg: $df-speech-border-radius-lg $df-speech-border-radius-lg 0 $df-speech-border-radius-lg !default;

package/styles/scss/components/spinner/_spinner.scss

@@ -4,6 +4,9 @@
   --#{$prefix}spinner-border-width: #{$df-spinner-border-width};
   --#{$prefix}spinner-border-color: #{$df-spinner-border-color};
   --#{$prefix}spinner-btn-margin-with-text: #{$df-spinner-btn-margin-with-text};
+  --#{$prefix}spinner-outline-width: #{$df-spinner-outline-width};
+  --#{$prefix}spinner-outline-color: #{$df-spinner-outline-color};
+  --#{$prefix}spinner-outline-style: #{$df-spinner-outline-style};
 
   overflow: var(--#{$prefix}spinner-overflow);
   width: var(--#{$prefix}spinner-circumference);
@@ -13,6 +16,21 @@
   border-bottom-color: var(--#{$prefix}spinner-border-color);
   border-width: var(--#{$prefix}spinner-border-width);
 
+  outline-width: var(--#{$prefix}spinner-outline-width);
+  outline-color: var(--#{$prefix}spinner-outline-color);
+  outline-style: var(--#{$prefix}spinner-outline-style);
+
+  &::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border-width: var(--#{$prefix}spinner-outline-width);
+    border-style: var(--#{$prefix}spinner-outline-style);
+    border-color: var(--#{$prefix}spinner-outline-color);
+  }
+
   &.spinner-border-sm {
     --#{$prefix}spinner-border-width: #{$df-spinner-sm-border-width};
     --#{$prefix}spinner-circumference: #{$df-spinner-sm-circumference};
@@ -22,6 +40,7 @@
 .df-spinner-border-dark {
   @extend .spinner-border; // seems to extend also the CSS variables
   --#{$prefix}spinner-border-color: #{$df-spinner-dark-border-color};
+  --#{$prefix}spinner-outline-color: #{$df-darkBackgroundVersion-spinner-outline-color};
 }
 
 .btn {

package/styles/scss/components/spinner/_spinner.variables.scss

@@ -19,3 +19,9 @@ $df-progressindicator-backdrop-global-bg-color: $black !default;
 $df-progressindicator-backdrop-global-opacity: 0.5 !default;
 $df-progressindicator-backdrop-contextual-bg-color: $white !default;
 $df-progressindicator-backdrop-contextual-opacity: 0.5 !default;
+
+$df-spinner-outline-color: $gray-700 !default;
+$df-spinner-outline-style: solid !default;
+$df-spinner-outline-width: 0.5px !default;
+
+$df-darkBackgroundVersion-spinner-outline-color: $white !default;