@design-factory/design-factory 15.2.3 → 16.0.1

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

@@ -1,6 +1,10 @@
 .progress-bar {
+  --#{$prefix}progress-bar-border-radius: #{$progress-border-radius};
+  --#{$prefix}progress-bar-infinite-animation-duration: #{$df-progress-bar-infinite-animation-duration};
+  --#{$prefix}progress-bar-infinite-animation-function: #{$df-progress-bar-infinite-animation-function};
+
   position: relative;
-  border-radius: $progress-border-radius;
+  border-radius: var(--#{$prefix}progress-bar-border-radius);
   &.infinite-animation {
     width: 20%;
 
@@ -10,9 +14,9 @@
     @include rtl {
       animation-name: infinite-animation-rtl;
     }
-    animation-duration: $df-infinite-animation-duration;
+    animation-duration: var(--#{$prefix}progress-bar-infinite-animation-duration);
+    animation-timing-function: var(--#{$prefix}progress-bar-infinite-animation-function);
     animation-iteration-count: infinite;
-    animation-timing-function: linear;
   }
 }
 
@@ -48,22 +52,26 @@
 
 .df-dark-background-version {
   .progress {
-    background-color: $df-darkBackgroundVersion-progressbar-background-color;
+    --#{$prefix}progress-bg: #{$df-darkBackgroundVersion-progressbar-background-color};
   }
   .progress-bar {
-    background-color: $df-darkBackgroundVersion-progressbar-color;
+    --#{$prefix}progress-bar-bg: #{$df-darkBackgroundVersion-progressbar-color};
   }
 }
 
 .progressbar-text {
-  color: $df-text-color;
+  --#{$prefix}progress-bar-text-color: #{$df-progress-bar-text-color};
+  color: var(--#{$prefix}progress-bar-text-color);
 }
 
+// Flag angular
 // stylelint-disable-next-line selector-type-no-unknown
 df-progressbar {
-  display: $df-progress-bar-display;
+  --#{$prefix}progress-bar-display: #{$df-progress-bar-display};
+  display: var(--#{$prefix}progress-bar-display);
 }
 
+// Flag angular
 .df-progressindicator-container {
   df-progressbar {
     flex-grow: 1;

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

@@ -1,6 +1,7 @@
-$df-infinite-animation-duration: 2.2s !default; // can be changed to speed-up or slow down the infinite animation
-$df-text-color: $gray-600 !default;
+$df-progress-bar-infinite-animation-duration: 2.2s !default; // can be changed to speed-up or slow down the infinite animation
+$df-progress-bar-text-color: $gray-600 !default;
 $df-progress-bar-display: block !default;
+$df-progress-bar-infinite-animation-function: linear !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,23 +1,28 @@
 div[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;
-    font-size: $df-fieldset-legend-font-size;
+    font-size: var(--#{$prefix}radiogroup-font-size);
     display: block;
-    margin-bottom: $df-radiogroup-legend-margin-bottom;
+    margin-bottom: var(--#{$prefix}radiogroup-legend-margin-bottom);
   }
 }
-
-.form-check-input {
-  &:checked {
-    &[type="radio"] {
-      background-color: $df-form-check-radio-checked-bg-color;
-
-      &.disabled,
-      &[disabled] {
-        @if $enable-gradients {
-          background-image: escape-svg($df-form-check-radio-checked-disabled-bg-image), var(--#{$variable-prefix}gradient);
-        } @else {
-          background-image: escape-svg($df-form-check-radio-checked-disabled-bg-image);
+.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"] {
+        background-color: var(--#{$prefix}form-check-radio-checked-bg-color);
+  
+        &.disabled,
+        &[disabled] {
+          @if $enable-gradients {
+            background-image: var(--#{$prefix}form-check-radio-checked-disabled-bg-image), var(--#{$prefix}gradient);
+          } @else {
+            background-image: var(--#{$prefix}form-check-radio-checked-disabled-bg-image);
+          }
         }
       }
     }

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

@@ -1,40 +1,59 @@
 @use 'sass:math';
 
+// flag angular
 // stylelint-disable-next-line selector-type-no-unknown
 ngb-rating {
-  font-size: $df-rating-font-size;
-  color: $df-rating-color;
-  $star-margin: math.div($df-rating-star-to-star-distance, 2);
-  margin: $df-rating-number-to-stars-distance - $star-margin;
+  --#{$prefix}rating-font-size: #{$df-rating-font-size};
+  --#{$prefix}rating-color: #{$df-rating-color};
+  --#{$prefix}rating-tiny-color: #{$df-rating-tiny-color};
+  --#{$prefix}rating-hover-color: #{$df-rating-hover-color};
+  --#{$prefix}rating-active-color: #{$df-rating-active-color};
+  --#{$prefix}rating-disabled-color: #{$df-rating-disabled-color};
+  --#{$prefix}rating-disabled-cursor: #{$df-rating-disabled-cursor};
+  --#{$prefix}rating-star-to-star-distance: #{$df-rating-star-to-star-distance};
+  --#{$prefix}rating-number-to-stars-distance: #{$df-rating-number-to-stars-distance};
+  --#{$prefix}rating-padding: #{$df-rating-padding};
+  --#{$prefix}rating-focus-outline: #{$df-rating-focus-outline};
+  --#{$prefix}rating-border: #{$df-rating-border};
+  --#{$prefix}rating-focus-border: #{$df-rating-focus-border};
+  --#{$prefix}rating-border-radius: #{$df-rating-border-radius};
+  --#{$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};
+
+  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: $star-margin;
+    margin: calc($star-margin);
   }
 
   // focus properties, avoid resizing of element
-  outline: $df-rating-focus-outline;
-  border: $df-rating-border;
-  border-radius: $df-rating-border-radius;
-  box-shadow: $df-rating-box-shadow;
-  border-color: $df-rating-border-color;
+  outline: var(--#{$prefix}rating-focus-outline);
+  border: var(--#{$prefix}rating-border);
+  border-radius: var(--#{$prefix}rating-border-radius);
+  box-shadow: var(--#{$prefix}rating-box-shadow);
+  border-color: var(--#{$prefix}rating-border-color);
 
   &:not([aria-disabled='true']):focus {
-    border: $df-rating-focus-border;
-    box-shadow: $df-rating-box-shadow;
+    border: var(--#{$prefix}rating-focus-border);
+    box-shadow: var(--#{$prefix}rating-focus-box-shadow);
   }
 
   &:hover {
-    color: $df-rating-hover-color;
+    color: var(--#{$prefix}rating-hover-color);
   }
 
   &:active {
-    color: $df-rating-active-color;
+    color: var(--#{$prefix}rating-active-color);
   }
 
   &[aria-disabled='true'] {
-    color: $df-rating-disabled-color;
-    cursor: $df-rating-disabled-cursor;
+    color: var(--#{$prefix}rating-disabled-color);
+    cursor: var(--#{$prefix}rating-disabled-cursor);
     span {
-      cursor: $df-rating-disabled-cursor !important;
+      cursor: var(--#{$prefix}rating-disabled-cursor) !important;
     }
   }
 
@@ -70,12 +89,12 @@ ngb-rating {
   }
 
   .df-rating-tiny {
-    color: $df-rating-tiny-color;
+    color: var(--#{$prefix}rating-tiny-color);
   }
-}
 
-@each $extension, $ratio in $df-size-ratios {
-  ngb-rating.df-rating-#{$extension} {
-    font-size: $ratio * $df-rating-font-size;
+  @each $extension, $ratio in $df-size-ratios {
+    &.df-rating-#{$extension} {
+      font-size: calc(#{$ratio} * var(--#{$prefix}rating-font-size));
+    }
   }
 }

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

@@ -2,19 +2,19 @@
 
 $df-rating-font-size: 1rem * map.get($df-size-ratios, 'md') !default;
 
-$df-rating-color: $form-check-input-checked-bg-color !default;
+$df-rating-color: shades-css-var('primary', 'bg-color') !default;
 $df-rating-tiny-color: $black !default;
-$df-rating-hover-color: $df-brand-primary-85 !default;
-$df-rating-active-color: $link-hover-color !default;
-$df-rating-disabled-color: $df-disabled-color !default;
+$df-rating-hover-color: shades-css-var('primary', 'bg-hover-color') !default;
+$df-rating-active-color: shades-css-var('primary', 'bg-active-color') !default;
+$df-rating-disabled-color: var(--#{$prefix}disabled-color) !default;
 $df-rating-disabled-cursor: $df-select-disabled-cursor !default;
-
 $df-rating-star-to-star-distance: 0.2em !default;
 $df-rating-number-to-stars-distance: 0.4em !default;
 $df-rating-padding: $btn-padding-y !default;
 $df-rating-focus-outline: none !default;
 $df-rating-border: $btn-border-width solid !default;
 $df-rating-focus-border: $btn-border-width solid transparent !default;
+$df-rating-focus-box-shadow: $input-btn-focus-box-shadow !default;
 $df-rating-border-radius: $btn-border-radius !default;
 $df-rating-box-shadow: 0 0 0 $input-btn-focus-width transparent !default;
 $df-rating-border-color: transparent !default;

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

@@ -3,32 +3,49 @@
     display: inline-block;
 }
 
-.nav-pills .nav-link {
-    border-left: $df-scrollspy-navpill-border-left;
-    color: $df-scrollspy-color;
-    padding-top: $df-scrollspy-padding-y;
-    padding-bottom: $df-scrollspy-padding-y;
+// Todo should we wrap this into a class specific for scrollspy ?
+.nav.nav-pills .nav-link {
+    --#{$prefix}scrollspy-navpill-border-width: #{$df-scrollspy-navpill-border-width};
+    --#{$prefix}scrollspy-navpill-border-left: #{$df-scrollspy-navpill-border-left};
+    --#{$prefix}scrollspy-navpill-active-border-left: #{$df-scrollspy-navpill-active-border-left};
+    --#{$prefix}scrollspy-navpill-hover-text-decoration: #{$df-scrollspy-navpill-hover-text-decoration};
+    --#{$prefix}scrollspy-navpill-active-font-weight: #{$df-scrollspy-navpill-active-font-weight};
+    --#{$prefix}scrollspy-color: #{$df-scrollspy-color};
+    --#{$prefix}scrollspy-active-color: #{$df-scrollspy-active-color};
+    --#{$prefix}scrollspy-font-size: #{$df-scrollspy-font-size};
+    --#{$prefix}scrollspy-padding-y: #{$df-scrollspy-padding-y};
+    --#{$prefix}scrollspy-padding-x: #{$df-scrollspy-padding-x};
+    --#{$prefix}scrollspy-active-padding-x: #{$df-scrollspy-active-padding-x};
+    border-left: var(--#{$prefix}scrollspy-navpill-border-left);
+    color: var(--#{$prefix}scrollspy-color);
+    padding-top: var(--#{$prefix}scrollspy-padding-y);
+    padding-bottom: var(--#{$prefix}scrollspy-padding-y);
     @include ltr {
-        padding-left: $df-scrollspy-padding-x;
+        padding-left: var(--#{$prefix}scrollspy-padding-x);
     }
     @include rtl {
-        padding-right: $df-scrollspy-padding-x;
+        padding-right: var(--#{$prefix}scrollspy-padding-x);
     }
-    font-size: $df-scrollspy-font-size;
+    font-size: var(--#{$prefix}scrollspy-font-size);
     margin-left: 1px;
     border-width: 1px;
     &.active {
-        font-weight: $df-scrollspy-navpill-active-font-weight;
-        border-left: $df-scrollspy-navpill-active-border-left;
+        color: var(--#{$prefix}scrollspy-active-color);
+        font-weight: var(--#{$prefix}scrollspy-navpill-active-font-weight);
+        border-left: var(--#{$prefix}scrollspy-navpill-active-border-left);
         margin-left: 0px;
         @include ltr {
-            padding-left: $df-scrollspy-active-padding-x;
+            padding-left: var(--#{$prefix}scrollspy-active-padding-x);
         }
         @include rtl {
-            padding-right: $df-scrollspy-active-padding-x;
+            padding-right: var(--#{$prefix}scrollspy-active-padding-x);
         }
     }
     &:hover {
-        text-decoration: $df-scrollspy-navpill-hover-text-decoration;
+        text-decoration: var(--#{$prefix}scrollspy-navpill-hover-text-decoration);
+    }
+    &:focus {
+        outline: 0;
+        box-shadow: $df-focused-inset-box-shadow;
     }
 }

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

@@ -1,9 +1,10 @@
 $df-scrollspy-navpill-border-width: 3px !default;
 $df-scrollspy-navpill-border-left: $df-scrollspy-navpill-border-width solid $gray-200 !default;
-$df-scrollspy-navpill-active-border-left: $df-scrollspy-navpill-border-width solid $primary !default;
+$df-scrollspy-navpill-active-border-left: $df-scrollspy-navpill-border-width solid shades-css-var('primary', 'border-color') !default;
 $df-scrollspy-navpill-hover-text-decoration: underline !default;
 $df-scrollspy-navpill-active-font-weight: $font-weight-semibold !default;
 $df-scrollspy-color: $body-color !default;
+$df-scrollspy-active-color: shades-css-var('primary', 'text-color') !default;
 $df-scrollspy-font-size: $font-size-sm !default;
 $df-scrollspy-padding-y: calc(var(--#{$prefix}nav-link-padding-y) * 0.5625) !default;
 $df-scrollspy-padding-x: calc(var(--#{$prefix}nav-link-padding-x) + 1px) !default;