@design-factory/design-factory 15.2.3 → 16.0.1

package/styles/scss/components/skip-links/_skip-links.scss

@@ -1,24 +1,39 @@
 .df-skip-links {
-  position: fixed;
-  top: $df-skip-links--top;
-  left: $df-skip-links--left;
-  z-index: $df-skip-links--zindex;
-}
-.df-skip-links__wrap {
-  min-width: $df-skip-links--min-width;
-  background: $df-skip-links-bg;
-  border-radius: $df-skip-links--border-radius;
-  box-shadow: $df-skip-links--shadow;
+  --#{$prefix}skip-links-shadow: $df-skip-links-shadow;
+  --#{$prefix}skip-links-border-radius: #{$df-skip-links-border-radius};
+  --#{$prefix}skip-links-top: #{$df-skip-links-top};
+  --#{$prefix}skip-links-start: #{$df-skip-links-start};
+  --#{$prefix}skip-links-min-width: #{$df-skip-links-min-width};
+  --#{$prefix}skip-links-zindex: #{$df-skip-links-zindex};
+  --#{$prefix}skip-links-bg: #{$df-skip-links-bg};
 
-  &:not(.focus) {
-    @include visually-hidden();
+  position: fixed;
+  top: var(--#{$prefix}skip-links-top);
+  @include ltr {
+    left: var(--#{$prefix}skip-links-start);
+  }
+  @include rtl {
+    right: var(--#{$prefix}skip-links-start);
   }
+  
+  z-index: var(--#{$prefix}skip-links-zindex);
+
+  .df-skip-links-wrap {
+    min-width: var(--#{$prefix}skip-links-min-width);
+    background: var(--#{$prefix}skip-links-bg);
+    border-radius: var(--#{$prefix}skip-links-border-radius);
+    box-shadow: var(--#{$prefix}skip-links-shadow);
+
+    &:not(.focus) {
+      @include visually-hidden();
+    }
 
-  > * {
-    margin-bottom: -$list-group-border-width;
+    > * {
+      margin-bottom: calc(-1 * var(--#{$prefix}list-group-border-width));
 
-    &:last-child {
-      margin-bottom: 0;
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 }

package/styles/scss/components/skip-links/_skip-links.variables.scss

@@ -1,7 +1,7 @@
-$df-skip-links--shadow: $df-box-shadow !default;
-$df-skip-links--border-radius: $border-radius !default;
-$df-skip-links--top: 1.25rem !default;
-$df-skip-links--left: 0.625rem !default;
-$df-skip-links--min-width: 12.5rem !default;
-$df-skip-links--zindex: $df-zindex-topmost !default;
+$df-skip-links-shadow: var(--#{$prefix}box-shadow) !default;
+$df-skip-links-border-radius: $border-radius !default;
+$df-skip-links-top: 1.25rem !default;
+$df-skip-links-start: 0.625rem !default;
+$df-skip-links-min-width: 12.5rem !default;
+$df-skip-links-zindex: $df-zindex-topmost !default;
 $df-skip-links-bg: $white !default;

package/styles/scss/components/slider/_slider.scss

@@ -115,7 +115,9 @@
       background: $df-slider-bar-disabled-color;
     }
 
-    .ngx-slider-pointer,.ngx-slider-draggable,.ngx-slider-tick {
+    .ngx-slider-pointer,
+    .ngx-slider-draggable,
+    .ngx-slider-tick {
       cursor: not-allowed;
     }
 
@@ -394,14 +396,13 @@
       transition: background-color linear $df-slider-animation-duration;
     }
   }
-}
-
-.df-slider-sm {
-  // add
-  @include setSliderSize($df-slider-bar-size-sm, $df-slider-pointer-size-sm, $df-slider-label-size-sm);
-}
+  &.df-slider-sm {
+    // add
+    @include setSliderSize($df-slider-bar-size-sm, $df-slider-pointer-size-sm, $df-slider-label-size-sm);
+  }
 
-.df-slider-lg {
-  // add
-  @include setSliderSize($df-slider-bar-size-lg, $df-slider-pointer-size-lg, $df-slider-label-size-lg);
+  &.df-slider-lg {
+    // add
+    @include setSliderSize($df-slider-bar-size-lg, $df-slider-pointer-size-lg, $df-slider-label-size-lg);
+  }
 }

package/styles/scss/components/slider/_slider.variables.scss

@@ -3,20 +3,20 @@ $df-slider-margin: 0.9375rem !default; // $sliderMargin
 $df-slider-margin-with-label: 2.1875rem !default; // $sliderMarginWithLabel
 
 // Bar
-$df-slider-bar-selected-color: $primary !default; // $barFillColor
+$df-slider-bar-selected-color: shades-css-var('primary', 'bg-color') !default; // $barFillColor
 $df-slider-bar-color: $gray-300 !default; // $barNormalColor
 $df-slider-bar-size: 0.25rem !default; // $barDimension
-$df-slider-bar-disabled-color: $df-disabled-bg-color !default; // $barDisabledFillColor
-$df-slider-bar-selected-disabled-color: $df-disabled-color !default; // $barDisabledFillColor
+$df-slider-bar-disabled-color: var(--#{$prefix}disabled-bg-color) !default; // $barDisabledFillColor
+$df-slider-bar-selected-disabled-color: var(--#{$prefix}disabled-color) !default; // $barDisabledFillColor
 $df-slider-bar-leftout-selection-color: $red !default; // $barLeftOutSelectionColor
 $df-slider-bar-rightout-selection-color: $green !default; // $barRightOutSelectionColor
 
 // Pointer
-$df-slider-pointer-color: $primary !default; // $handleBgColor
+$df-slider-pointer-color: shades-css-var('primary', 'bg-color') !default; // $handleBgColor
 $df-slider-pointer-size: 1.25rem !default; // $handleSize
-$df-slider-pointer-disabled-color: $df-disabled-color !default; // $handleDisabledColor
-$df-slider-pointer-hover-color: $primary !default; // $handleHoverColor
-$df-slider-pointer-active-color: $primary !default; // $handleActiveColor
+$df-slider-pointer-disabled-color: var(--#{$prefix}disabled-color) !default; // $handleDisabledColor
+$df-slider-pointer-hover-color: shades-css-var('primary', 'bg-color') !default; // $handleHoverColor
+$df-slider-pointer-active-color: shades-css-var('primary', 'bg-color') !default; // $handleActiveColor
 
 // Labels
 $df-slider-bubble-padding-y: 0.0625rem !default; // $bubblePaddingVertical
@@ -49,7 +49,7 @@ $df-slider-pointer-hover-border-width: 0.0625rem !default;
 // Labels
 $df-slider-label-size-sm: 0.875rem !default;
 $df-slider-label-size-lg: 1.125rem !default;
-$df-slider-label-disabled-color: $df-disabled-color !default; // TODO check color
+$df-slider-label-disabled-color: var(--#{$prefix}disabled-color) !default; // TODO check color
 /* Layout */
 $df-slider-group-margin: 1rem !default;
 

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

@@ -1,45 +1,65 @@
-@mixin speech-color($color) {
+@mixin speech-color($color, $bg-color) {
   ul::after,
   li {
-    background: $color;
-    color: color-contrast($color);
+    background: $bg-color;
+    color: $color;
   }
   li:last-child::after {
-    border-bottom-color: $color;
+    border-bottom-color: $bg-color;
   }
 }
 
 @mixin speech-orientation($tail, $radius) {
   li:last-child::after {
-    border-#{$tail}: $df-speech-tail-factor * $df-speech-gap solid transparent;
-    #{$tail}: -$df-speech-gap;
+    border-#{$tail}: calc(var(--#{$prefix}speech-tail-factor) * var(--#{$prefix}speech-gap)) solid transparent;
+    #{$tail}: calc(-1 * var(--#{$prefix}speech-gap));
   }
   &.df-speech {
     li:last-child {
       border-radius: $radius;
     }
     ul::after {
-      #{$tail}: -$df-speech-size;
+      #{$tail}: calc(-1 * var(--#{$prefix}speech-size));
     }
   }
 }
 
 .df-speech-btn {
   &.btn {
-    margin-top: $df-speech-btn-padding;
+    margin-top: var(--#{$prefix}speech-btn-padding);
   }
-  border-radius: $df-speech-btn-border-radius;
-  border: $df-speech-btn-border;
-  background: $df-speech-btn-background-color;
+  border-radius: var(--#{$prefix}speech-btn-border-radius);
+  border: var(--#{$prefix}speech-btn-border);
+  background: var(--#{$prefix}speech-btn-background-color);
 
   //Outline overlaps surroundings
-  position: $df-speech-btn-position;
+  position: var(--#{$prefix}speech-btn-position);
   &:focus {
-    z-index: $df-speech-btn-z-index;
+    z-index: var(--#{$prefix}speech-btn-z-index);
   }
 }
 
 .df-speech {
+  --#{$prefix}speech-size: #{$df-speech-size};
+  --#{$prefix}speech-bubble-height: #{$df-speech-bubble-height};
+  --#{$prefix}speech-border-radius: #{$df-speech-border-radius};
+  --#{$prefix}speech-padding-y: #{$df-speech-padding-y};
+  --#{$prefix}speech-padding-x: #{$df-speech-padding-x};
+  --#{$prefix}speech-gap: #{$df-speech-gap};
+  --#{$prefix}speech-tail-factor: #{$df-speech-tail-factor};
+  --#{$prefix}speech-interlocutor-bg-color: #{$df-speech-interlocutor-bg-color};
+  --#{$prefix}speech-interlocutor-color: #{$df-speech-interlocutor-color};
+  --#{$prefix}speech-user-bg-color: #{$df-speech-user-bg-color};
+  --#{$prefix}speech-user-color: #{$df-speech-user-color};
+  --#{$prefix}speech-btn-background-color: #{$df-speech-btn-background-color};
+  --#{$prefix}speech-btn-padding: #{$df-speech-btn-padding};
+  --#{$prefix}speech-btn-border-radius: #{$df-speech-btn-border-radius};
+  --#{$prefix}speech-btn-border: #{$df-speech-btn-border};
+  --#{$prefix}speech-btn-position: #{$df-speech-btn-position};
+  --#{$prefix}speech-btn-z-index: #{$df-speech-btn-z-index};
+  --#{$prefix}speech-tail-radius-left: #{$df-speech-tail-radius-left};
+  --#{$prefix}speech-tail-radius-right: #{$df-speech-tail-radius-right};
+
   ul {
     display: inline-block;
     //Deactivate default ul styling
@@ -50,19 +70,19 @@
       content: '';
       position: absolute;
       bottom: 0;
-      margin-bottom: $df-speech-gap;
-      width: $df-speech-size;
-      height: $df-speech-size;
+      margin-bottom: var(--#{$prefix}speech-gap);
+      width: var(--#{$prefix}speech-size);
+      height: var(--#{$prefix}speech-size);
       border-radius: 100%;
       display: none; //Avatar is by default disabled
     }
   }
 
   li {
-    padding: $df-speech-btn-padding;
-    line-height: $df-speech-bubble-height;
-    border-radius: $df-speech-border-radius;
-    margin: $df-speech-gap 2 * $df-speech-gap;
+    padding: var(--#{$prefix}speech-btn-padding);
+    line-height: var(--#{$prefix}speech-bubble-height);
+    border-radius: var(--#{$prefix}speech-border-radius);
+    margin: var(--#{$prefix}speech-gap) calc(2 * var(--#{$prefix}speech-gap));
     &:last-child {
       position: relative;
       &::after {
@@ -71,47 +91,47 @@
         bottom: 0;
         width: 0;
         height: 0;
-        border-bottom: 2 * $df-speech-tail-factor * $df-speech-gap solid;
+        border-bottom: calc(2 * var(--#{$prefix}speech-tail-factor) * var(--#{$prefix}speech-gap)) solid;
       }
     }
   }
 
   p {
-    padding: $df-speech-padding-y $df-speech-padding-x;
+    padding: var(--#{$prefix}speech-padding-y) var(--#{$prefix}speech-padding-x);
     margin-bottom: 0;
   }
 }
 
 .df-speech-left {
   @include ltr {
-    @include speech-orientation($df-speech-tail-left, $df-speech-tail-radius-left);
+    @include speech-orientation($df-speech-tail-left, var(--#{$prefix}speech-tail-radius-left));
   }
   @include rtl {
-    @include speech-orientation($df-speech-tail-right, $df-speech-tail-radius-right);
+    @include speech-orientation($df-speech-tail-right, var(--#{$prefix}speech-tail-radius-right));
   }
 }
 
 .df-speech-right {
   @include ltr {
-    @include speech-orientation($df-speech-tail-right, $df-speech-tail-radius-right);
+    @include speech-orientation($df-speech-tail-right, var(--#{$prefix}speech-tail-radius-right));
   }
   @include rtl {
-    @include speech-orientation($df-speech-tail-left, $df-speech-tail-radius-left);
+    @include speech-orientation($df-speech-tail-left, var(--#{$prefix}speech-tail-radius-left));
   }
 }
 
 .df-speech-interlocutor {
-  @include speech-color($df-speech-interlocutor-color);
+  @include speech-color(var(--#{$prefix}speech-interlocutor-color), var(--#{$prefix}speech-interlocutor-bg-color));
   @extend .df-speech-left;
 
   //Enable avatar
   &.df-speech {
     ul {
       @include ltr {
-        left: $df-speech-size;
+        left: var(--#{$prefix}speech-size);
       }
       @include rtl {
-        right: $df-speech-size;
+        right: var(--#{$prefix}speech-size);
       }
       position: relative;
       &::after {
@@ -122,6 +142,6 @@
 }
 
 .df-speech-user {
-  @include speech-color($df-speech-user-color);
+  @include speech-color(var(--#{$prefix}speech-user-color), var(--#{$prefix}speech-user-bg-color));
   @extend .df-speech-right;
 }

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

@@ -5,8 +5,10 @@ $df-speech-padding-y: 0.375em !default;
 $df-speech-padding-x: 1em !default;
 $df-speech-gap: 0.28em !default;
 $df-speech-tail-factor: 1.11 !default;
-$df-speech-interlocutor-color: $gray-50 !default;
-$df-speech-user-color: $primary !default;
+$df-speech-interlocutor-bg-color: $gray-50 !default;
+$df-speech-interlocutor-color: color-contrast($df-speech-interlocutor-bg-color) !default;
+$df-speech-user-bg-color: shades-css-var('primary', 'bg-color') !default;
+$df-speech-user-color: color-contrast($df-speech-user-bg-color) !default;
 $df-speech-btn-background-color: $white !default;
 $df-speech-btn-padding: 0.125em !default;
 $df-speech-btn-border-radius: 0 !default;

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

@@ -1,47 +1,47 @@
 .spinner-border {
-  overflow: $df-spinner-overflow;
-  width: $df-spinner-circumference;
-  height: $df-spinner-circumference;
-  border-right-color: $df-spinner-border-color;
-  border-top-color: $df-spinner-border-color;
-  border-bottom-color: $df-spinner-border-color;
-  border-width: $df-spinner-border-width;
-}
+  --#{$prefix}spinner-overflow: #{$df-spinner-overflow};
+  --#{$prefix}spinner-circumference: #{$df-spinner-circumference};
+  --#{$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};
+
+  overflow: var(--#{$prefix}spinner-overflow);
+  width: var(--#{$prefix}spinner-circumference);
+  height: var(--#{$prefix}spinner-circumference);
+  border-right-color: var(--#{$prefix}spinner-border-color);
+  border-top-color: var(--#{$prefix}spinner-border-color);
+  border-bottom-color: var(--#{$prefix}spinner-border-color);
+  border-width: var(--#{$prefix}spinner-border-width);
 
-.spinner-border-sm {
-  width: $df-spinner-sm-circumference;
-  height: $df-spinner-sm-circumference;
-  border-width: $df-spinner-sm-border-width;
+  &.spinner-border-sm {
+    --#{$prefix}spinner-border-width: #{$df-spinner-sm-border-width};
+    --#{$prefix}spinner-circumference: #{$df-spinner-sm-circumference};
+  }
 }
 
 .df-spinner-border-dark {
-  @extend .spinner-border;
-  border-right-color: $df-spinner-dark-border-color;
-  border-top-color: $df-spinner-dark-border-color;
-  border-bottom-color: $df-spinner-dark-border-color;
+  @extend .spinner-border; // seems to extend also the CSS variables
+  --#{$prefix}spinner-border-color: #{$df-spinner-dark-border-color};
 }
 
 .btn {
   .spinner-border-sm {
-    width: $df-spinner-btn-circumference;
-    height: $df-spinner-btn-circumference;
+    --#{$prefix}spinner-circumference: #{$df-spinner-btn-sm-circumference};
     @include ltr {
-      margin-left: $df-spinner-btn-margin-with-text;
+      margin-left: var(--#{$prefix}spinner-btn-margin-with-text);
     }
     @include rtl {
-      margin-right: $df-spinner-btn-margin-with-text;
+      margin-right: var(--#{$prefix}spinner-btn-margin-with-text);
     }
   }
   &.btn-sm {
     .spinner-border-sm {
-      width: $df-spinner-btn-sm-circumference;
-      height: $df-spinner-btn-sm-circumference;
+      --#{$prefix}spinner-circumference: #{$df-spinner-btn-sm-circumference};
     }
   }
   &.btn-lg {
     .spinner-border-sm {
-      width: $df-spinner-btn-lg-circumference;
-      height: $df-spinner-btn-lg-circumference;
+      --#{$prefix}spinner-circumference: #{$df-spinner-btn-lg-circumference};
     }
   }
 }
@@ -52,22 +52,27 @@
 
 .df-progressindicator-backdrop,
 .df-progressindicator-container {
+  --#{$prefix}progressindicator-container-zindex: #{$df-progressindicator-container-zindex};
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: $df-progressindicator-container-zindex;
+  z-index: var(--#{$prefix}progressindicator-container-zindex);
 }
 
 .df-progressindicator-backdrop {
+  --#{$prefix}progressindicator-backdrop-global-bg-color: #{$df-progressindicator-backdrop-global-bg-color};
+  --#{$prefix}progressindicator-backdrop-global-opacity: #{$df-progressindicator-backdrop-global-opacity};
+  --#{$prefix}progressindicator-backdrop-contextual-bg-color: #{$df-progressindicator-backdrop-contextual-bg-color};
+  --#{$prefix}progressindicator-backdrop-contextual-opacity: #{$df-progressindicator-backdrop-contextual-opacity};
   &.df-progressindicator-backdrop-global {
-    background-color: $df-progressindicator-backdrop-global-bg-color;
-    opacity: $df-progressindicator-backdrop-global-opacity;
+    background-color: var(--#{$prefix}progressindicator-backdrop-global-bg-color);
+    opacity: var(--#{$prefix}progressindicator-backdrop-global-opacity);
   }
   &.df-progressindicator-backdrop-contextual {
-    background-color: $df-progressindicator-backdrop-contextual-bg-color;
-    opacity: $df-progressindicator-backdrop-contextual-opacity;
+    background-color: var(--#{$prefix}progressindicator-backdrop-contextual-bg-color);
+    opacity: var(--#{$prefix}progressindicator-backdrop-contextual-opacity);
   }
 }