@design-factory/design-factory 15.2.2 → 16.0.0

package/styles/scss/components/inputs/_inputs.scss

@@ -5,22 +5,23 @@
 
 %input-group-common {
   @include transition($input-transition); // default bootstrap input has this property
-  background-color: $df-iwi-input-group-bg-color;
+  background-color: var(--#{$prefix}iwi-input-group-bg-color);
   &.df-disabled {
     &, .input-group-text {
-      background-color: $df-iwi-input-group-disabled-bg-color;
-      cursor: $df-disabled-cursor;
+      background-color: var(--#{$prefix}iwi-input-group-disabled-bg-color);
+      cursor: var(--#{$prefix}disabled-cursor);
+      color: var(--#{$prefix}iwi-input-group-disabled-text-color);
     }
   }
   align-items: center;
-  border-top: $input-border-width solid $input-border-color;
-  border-bottom: $input-border-width solid $input-border-color;
+  border-top: var(--#{$prefix}iwi-input-border-width) solid $input-border-color;
+  border-bottom: var(--#{$prefix}iwi-input-border-width) solid $input-border-color;
 
   // This class is to be able to remove the icon in an input with icon and to come back to a normal input look
   // even if the html of the input group is staying.
   &.df-is-empty {
-    padding-left: $df-iwi-emptyspace-padding;
-    padding-right: $df-iwi-emptyspace-padding;
+    padding-left: var(--#{$prefix}iwi-emptyspace-padding);
+    padding-right: var(--#{$prefix}iwi-emptyspace-padding);
     .input-group-text {
       display: none;
     }
@@ -30,15 +31,15 @@
     &:not(:disabled):not(.disabled) {
       &:hover {
         &:before {
-          background-color: $df-iwi-icon-hover-bg-color;
-          cursor: $df-cursor-type;
+          background-color: var(--#{$prefix}iwi-icon-hover-bg-color);
+          cursor: var(--#{$prefix}cursor-type);
         }
       }
     }
     &:disabled,
     &.disabled {
-      cursor: $df-disabled-cursor;
-      background-color: $df-iwi-input-group-disabled-bg-color;
+      cursor: var(--#{$prefix}disabled-cursor);
+      background-color: var(--#{$prefix}iwi-input-group-disabled-bg-color);
     }
   }
 
@@ -47,19 +48,19 @@
     width: 100%;
     border: none;
     padding: 0;
-    background-color: $df-iwi-input-group-text-bg-color;
+    background-color: var(--#{$prefix}iwi-input-group-text-bg-color);
     &:before {
-      font-family: $df-font-family;
-      font-size: $df-iwi-icon-font-size;
-      height: $df-iwi-icon-height;
-      width: $df-iwi-icon-width;
-      border-radius: $df-iwi-icon-border-radius;
-      line-height: $df-iwi-icon-line-height;
+      font-family: var(--#{$prefix}font-family);
+      font-size: var(--#{$prefix}iwi-icon-font-size);
+      height: var(--#{$prefix}iwi-icon-height);
+      width: var(--#{$prefix}iwi-icon-width);
+      border-radius: var(--#{$prefix}iwi-icon-border-radius);
+      line-height: var(--#{$prefix}iwi-icon-line-height);
     }
     &:focus {
       outline: none; // override mandatory
       &:before {
-        box-shadow: $df-iwi-focused-box-shadow;
+        box-shadow: var(--#{$prefix}iwi-focused-box-shadow);
       }
     }
   }
@@ -71,57 +72,134 @@ input[type='search']::-webkit-search-decoration {
 }
 
 %df-iwi-icon {
-  color: $df-iwi-icon-font-color;
-  font-family: $df-font-family;
-  font-size: $df-iwi-icon-font-size;
-  height: $df-iwi-icon-height;
-  width: $df-iwi-icon-width;
-  border-radius: $df-iwi-icon-border-radius;
-  line-height: $df-iwi-icon-line-height;
+  color: var(--#{$prefix}iwi-icon-font-color);
+  font-family: var(--#{$prefix}font-family);
+  font-size: var(--#{$prefix}iwi-icon-font-size);
+  height: var(--#{$prefix}iwi-icon-height);
+  width: var(--#{$prefix}iwi-icon-width);
+  border-radius: var(--#{$prefix}iwi-icon-border-radius);
+  line-height: var(--#{$prefix}iwi-icon-line-height);
+}
+
+.input-group {
+  --#{$prefix}iwi-group-margin-between: #{$df-iwi-group-margin-between};
+  --#{$prefix}iwi-group-append-margin-left: #{$df-iwi-group-append-margin-left};
+  --#{$prefix}iwi-group-prepend-margin-end: #{$df-iwi-group-prepend-margin-end};
+  --#{$prefix}iwi-focused-box-shadow: #{$df-iwi-focused-box-shadow};
+  --#{$prefix}iwi-append-text-padding-right: #{$df-iwi-append-text-padding-right};
+  --#{$prefix}iwi-append-text-padding-left: #{$df-iwi-append-text-padding-left};
+  --#{$prefix}iwi-prepend-text-padding-right: #{$df-iwi-prepend-text-padding-right};
+  --#{$prefix}iwi-prepend-text-padding-left: #{$df-iwi-prepend-text-padding-left};
+  --#{$prefix}iwi-input-group-bg-color: #{$df-iwi-input-group-bg-color};
+  --#{$prefix}iwi-input-group-text-bg-color: #{$df-iwi-input-group-text-bg-color};
+  --#{$prefix}iwi-input-group-disabled-bg-color: #{$df-iwi-input-group-disabled-bg-color};
+  --#{$prefix}iwi-input-group-disabled-text-color: #{$df-iwi-input-group-disabled-text-color};
+  --#{$prefix}iwi-emptyspace-padding: #{$df-iwi-emptyspace-padding};
+  --#{$prefix}iwi-border-between-color: #{$df-iwi-border-between-color};
+  --#{$prefix}iwi-focused-border-between-color: #{$df-iwi-focused-border-between-color};
+  --#{$prefix}iwi-icon-hover-bg-color: #{$df-iwi-icon-hover-bg-color};
+  --#{$prefix}iwi-icon-font-size: #{$df-iwi-icon-font-size};
+  --#{$prefix}iwi-icon-border-radius: #{$df-iwi-icon-border-radius};
+  --#{$prefix}iwi-icon-line-height: #{$df-iwi-icon-line-height};
+  --#{$prefix}iwi-focused-border-color: #{$df-iwi-focused-border-color};
+  --#{$prefix}iwi-icon-display: #{$df-iwi-icon-display};
+  --#{$prefix}iwi-icon-text-align: #{$df-iwi-icon-text-align};
+  --#{$prefix}iwi-icon-font-color: #{$df-iwi-icon-font-color};
+  --#{$prefix}iwi-cross-line-height: #{$df-iwi-cross-line-height};
+  --#{$prefix}iwi-dpr-from-border-right: #{$df-iwi-dpr-from-border-right};
+  --#{$prefix}iwi-dpr-from-border-radius-top-right: #{$df-iwi-dpr-from-border-radius-top-right};
+  --#{$prefix}iwi-dpr-from-border-radius-bottom-right: #{$df-iwi-dpr-from-border-radius-bottom-right};
+  --#{$prefix}iwi-dpr-to-border-left: #{$df-iwi-dpr-to-border-left};
+  --#{$prefix}iwi-dpr-to-border-radius-top-left: #{$df-iwi-dpr-to-border-radius-top-left};
+  --#{$prefix}iwi-dpr-to-border-radius-bottom-left: #{$df-iwi-dpr-to-border-radius-bottom-left};
+  --#{$prefix}iwi-dpr-focus-border: #{$df-iwi-dpr-focus-border};
+  --#{$prefix}iwi-input-border-width: #{$input-border-width};
+  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    --#{$prefix}box-shadow-color: #{$input-focus-border-color};
+  }
+
+  $validation-messages: "";
+  @each $state in map-keys($form-validation-states) {
+    $validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.unquote($state) + "-feedback)";
+  }
+
+  // RTL support
+  @include rtl {
+    > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
+      // todo maybe add margin-left: 0;
+      // also see the RTL
+      margin-right: calc(-1 * var(--#{$prefix}iwi-input-border-width));
+    }
+  }
+
+  // TODO - Remove it when ngbootstrap dropdown will be compliant with Bootstrap
+  &:not(.has-validation) {
+    > .dropdown:not(:last-child) {
+      > .dropdown-toggle {
+        @include border-end-radius(0);
+      }
+    }
+  }
+  > .dropdown:not(:first-child) {
+    > .dropdown-toggle {
+      @include border-start-radius(0);
+    }
+  }
+
+  > .form-control + .form-control {
+    @include ltr {
+      // margin-left: $df-iwi-group-prepend-margin-end;
+      margin-left: var(--#{$prefix}iwi-group-prepend-margin-end)
+    }
+    @include rtl {
+      // margin-right: $df-iwi-group-prepend-margin-end;
+      margin-right: var(--#{$prefix}iwi-group-prepend-margin-end);
+    }
+  }
 }
 
 .input-group.df-input-append {
   input.df-input-withicon.append {
     @include ltr {
-      border-right-color: $df-iwi-border-between-color; // override mandatory
+      border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
       @include df-iwi-root-right('.df-input-datepicker-range') {
-        border-left: $df-iwi-dpr-to-border-left !important;
-        border-top-left-radius: $df-iwi-dpr-to-border-radius-top-left;
-        border-bottom-left-radius: $df-iwi-dpr-to-border-radius-bottom-left;
+        border-left: var(--#{$prefix}iwi-dpr-to-border-left) !important;
+        border-top-left-radius: var(--#{$prefix}iwi-dpr-to-border-radius-top-left);
+        border-bottom-left-radius: var(--#{$prefix}iwi-dpr-to-border-radius-bottom-left);
       }
       @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
-        border-left: $df-iwi-dpr-focus-border !important;
+        border-left: var(--#{$prefix}iwi-dpr-focus-border) !important;
       }
     }
     @include rtl {
-      border-left-color: $df-iwi-border-between-color; // override mandatory
+      border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
       @include df-iwi-root-right('.df-input-datepicker-range') {
-        border-right: $df-iwi-dpr-to-border-left !important;
-        border-top-right-radius: $df-iwi-dpr-to-border-radius-top-left;
-        border-bottom-right-radius: $df-iwi-dpr-to-border-radius-bottom-left;
+        border-right: var(--#{$prefix}iwi-dpr-to-border-left) !important;
+        border-top-right-radius: var(--#{$prefix}iwi-dpr-to-border-radius-top-left);
+        border-bottom-right-radius: var(--#{$prefix}iwi-dpr-to-border-radius-bottom-left);
       }
       @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
-        border-right: $df-iwi-dpr-focus-border !important;
+        border-right: var(--#{$prefix}iwi-dpr-focus-border) !important;
       }
     }
 
     @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
-      border-top: $df-iwi-dpr-focus-border !important;
-      border-bottom: $df-iwi-dpr-focus-border !important;
+      border-top: var(--#{$prefix}iwi-dpr-focus-border) !important;
+      border-bottom: var(--#{$prefix}iwi-dpr-focus-border) !important;
     }
 
     @include df-iwi-root-right('.df-input-datepicker-range.df-focused') {
-      border-top: $df-iwi-dpr-focus-border !important;
-      border-bottom: $df-iwi-dpr-focus-border !important;
+      border-top: var(--#{$prefix}iwi-dpr-focus-border) !important;
+      border-bottom: var(--#{$prefix}iwi-dpr-focus-border) !important;
     }
 
     box-shadow: none; // override mandatory
     &:focus {
       @include ltr {
-        border-right-color: $df-iwi-border-between-color; // override mandatory
+        border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
       }
       @include rtl {
-        border-left-color: $df-iwi-border-between-color; // override mandatory
+        border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
       }
       box-shadow: none; // override mandatory
     }
@@ -134,56 +212,56 @@ input[type='search']::-webkit-search-decoration {
   .input-group-append {
     @extend %input-group-common;
     @include ltr {
-      margin-left: $df-iwi-group-append-margin-left;
-      border-right: $input-border-width solid $input-border-color;
+      margin-left: var(--#{$prefix}iwi-group-append-margin-left);
+      border-right: var(--#{$prefix}iwi-input-border-width) solid $input-border-color;
       border-radius: $input-border-radius;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
       @include df-iwi-root-left('.df-input-datepicker-range') {
-        border-top-right-radius: $df-iwi-dpr-from-border-radius-top-right;
-        border-bottom-right-radius: $df-iwi-dpr-from-border-radius-bottom-right;
-        border-right: $df-iwi-dpr-from-border-right;
+        border-top-right-radius: var(--#{$prefix}iwi-dpr-from-border-radius-top-right);
+        border-bottom-right-radius: var(--#{$prefix}iwi-dpr-from-border-radius-bottom-right);
+        border-right: var(--#{$prefix}iwi-dpr-from-border-right);
       }
       @include df-iwi-root-right('.df-input-datepicker-range.df-focused') {
-        border-right: $df-iwi-dpr-focus-border !important;
+        border-right: var(--#{$prefix}iwi-dpr-focus-border) !important;
       }
     }
     @include rtl {
-      margin-right: $df-iwi-group-append-margin-left;
-      border-left: $input-border-width solid $input-border-color;
+      margin-right: var(--#{$prefix}iwi-group-append-margin-left);
+      border-left: var(--#{$prefix}iwi-input-border-width) solid $input-border-color;
       border-radius: $input-border-radius 0 0 $input-border-radius;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
       @include df-iwi-root-left('.df-input-datepicker-range') {
-        border-top-left-radius: $df-iwi-dpr-from-border-radius-top-right;
-        border-bottom-left-radius: $df-iwi-dpr-from-border-radius-bottom-right;
-        border-left: $df-iwi-dpr-from-border-right;
+        border-top-left-radius: var(--#{$prefix}iwi-dpr-from-border-radius-top-right);
+        border-bottom-left-radius: var(--#{$prefix}iwi-dpr-from-border-radius-bottom-right);
+        border-left: var(--#{$prefix}iwi-dpr-from-border-right);
       }
       @include df-iwi-root-right('.df-input-datepicker-range.df-focused') {
-        border-left: $df-iwi-dpr-focus-border !important;
+        border-left: var(--#{$prefix}iwi-dpr-focus-border) !important;
       }
     }
     @include df-iwi-root-right('.df-input-datepicker-range.df-focused') {
-      border-top: $df-iwi-dpr-focus-border !important;
-      border-bottom: $df-iwi-dpr-focus-border !important;
+      border-top: var(--#{$prefix}iwi-dpr-focus-border) !important;
+      border-bottom: var(--#{$prefix}iwi-dpr-focus-border) !important;
     }
     @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
-      border-top: $df-iwi-dpr-focus-border !important;
-      border-bottom: $df-iwi-dpr-focus-border !important;
+      border-top: var(--#{$prefix}iwi-dpr-focus-border) !important;
+      border-bottom: var(--#{$prefix}iwi-dpr-focus-border) !important;
     }
-    padding-left: $df-iwi-append-text-padding-left;
-    padding-right: $df-iwi-append-text-padding-right;
+    padding-left: var(--#{$prefix}iwi-append-text-padding-left);
+    padding-right: var(--#{$prefix}iwi-append-text-padding-right);
     border-radius: $input-border-radius;
   }
 
   &.df-focused .input-group-append {
     @include ltr {
-      border-color: $df-iwi-focused-border-color;
-      border-left-color: $df-iwi-focused-border-between-color;
+      border-color: var(--#{$prefix}iwi-focused-border-color);
+      border-left-color: var(--#{$prefix}iwi-focused-border-between-color);
     }
     @include rtl {
-      border-color: $df-iwi-focused-border-color;
-      border-right-color: $df-iwi-focused-border-between-color;
+      border-color: var(--#{$prefix}iwi-focused-border-color);
+      border-right-color: var(--#{$prefix}iwi-focused-border-between-color);
     }
   }
 }
@@ -191,19 +269,19 @@ input[type='search']::-webkit-search-decoration {
 .input-group.df-input-prepend {
   input.df-input-withicon.prepend {
     @include ltr {
-      border-left-color: $df-iwi-border-between-color; // override mandatory
+      border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
     }
     @include rtl {
-      border-right-color: $df-iwi-border-between-color; // override mandatory
+      border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
     }
     box-shadow: none; // override mandatory
     padding-left: 0px; // override mandatory
     &:focus {
       @include ltr {
-        border-left-color: $df-iwi-border-between-color; // override mandatory
+        border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
       }
       @include rtl {
-        border-right-color: $df-iwi-border-between-color; // override mandatory
+        border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
       }
       box-shadow: none; // override mandatory
     }
@@ -216,18 +294,18 @@ input[type='search']::-webkit-search-decoration {
   .input-group-prepend {
     @extend %input-group-common;
     @include ltr {
-      border-left: $input-border-width solid $input-border-color;
-      margin-right: $df-iwi-group-prepend-margin-right;
-      padding-left: $df-iwi-prepend-text-padding-left;
-      padding-right: $df-iwi-prepend-text-padding-right;
+      border-left: var(--#{$prefix}iwi-input-border-width) solid $input-border-color;
+      margin-right: var(--#{$prefix}iwi-group-prepend-margin-end);
+      padding-left: var(--#{$prefix}iwi-prepend-text-padding-left);
+      padding-right: var(--#{$prefix}iwi-prepend-text-padding-right);
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
     @include rtl {
-      border-right: $input-border-width solid $input-border-color;
-      margin-left: $df-iwi-group-prepend-margin-right;
-      padding-right: $df-iwi-prepend-text-padding-left;
-      padding-left: $df-iwi-prepend-text-padding-right;
+      border-right: var(--#{$prefix}iwi-input-border-width) solid $input-border-color;
+      margin-left: var(--#{$prefix}iwi-group-prepend-margin-end);
+      padding-right: var(--#{$prefix}iwi-prepend-text-padding-left);
+      padding-left: var(--#{$prefix}iwi-prepend-text-padding-right);
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
@@ -236,55 +314,18 @@ input[type='search']::-webkit-search-decoration {
 
   &.df-focused .input-group-prepend {
     @include ltr {
-      border-color: $df-iwi-focused-border-color;
-      border-right-color: $df-iwi-focused-border-between-color;
+      border-color: var(--#{$prefix}iwi-focused-border-color);
+      border-right-color: var(--#{$prefix}iwi-focused-border-between-color);
     }
     @include rtl {
-      border-color: $df-iwi-focused-border-color;
-      border-left-color: $df-iwi-focused-border-between-color;
+      border-color: var(--#{$prefix}iwi-focused-border-color);
+      border-left-color: var(--#{$prefix}iwi-focused-border-between-color);
     }
   }
 }
 
+
 .input-group.df-focused {
   border: none;
 }
 
-.input-group {
-  $validation-messages: "";
-  @each $state in map-keys($form-validation-states) {
-    $validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.unquote($state) + "-feedback)";
-  }
-
-  // RTL support
-  @include rtl {
-    > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-      // todo maybe add margin-left: 0;
-      // also see the RTL
-      margin-right: -$input-border-width;
-    }
-  }
-
-  // TODO - Remove it when ngbootstrap dropdown will be compliant with Bootstrap
-  &:not(.has-validation) {
-    > .dropdown:not(:last-child) {
-      > .dropdown-toggle {
-        @include border-end-radius(0);
-      }
-    }
-  }
-  > .dropdown:not(:first-child) {
-    > .dropdown-toggle {
-      @include border-start-radius(0);
-    }
-  }
-
-  > .form-control + .form-control {
-    @include ltr {
-      margin-left: $df-iwi-group-prepend-margin-right;
-    }
-    @include rtl {
-      margin-right: $df-iwi-group-prepend-margin-right;
-    }
-  }
-}

package/styles/scss/components/inputs/_inputs.variables.scss

@@ -2,7 +2,7 @@
 // TODO factorize the common variables from this?
 $df-iwi-group-margin-between: -2 * $border-width !default;
 $df-iwi-group-append-margin-left: $df-iwi-group-margin-between !default;
-$df-iwi-group-prepend-margin-right: $df-iwi-group-margin-between !default;
+$df-iwi-group-prepend-margin-end: $df-iwi-group-margin-between !default;
 $df-iwi-focused-box-shadow: $df-focused-box-shadow !default;
 $df-iwi-append-text-padding-right: 0.375rem !default;
 $df-iwi-append-text-padding-left: 0.375rem !default;
@@ -11,6 +11,7 @@ $df-iwi-prepend-text-padding-left: 0.375rem !default;
 $df-iwi-input-group-bg-color: $input-bg !default;
 $df-iwi-input-group-text-bg-color: $df-iwi-input-group-bg-color !default;
 $df-iwi-input-group-disabled-bg-color: $df-disabled-bg-color !default;
+$df-iwi-input-group-disabled-text-color: $df-disabled-color !default;
 $df-iwi-emptyspace-padding: 1px !default; // to maintain the border radius visible it can not be 0px
 $df-iwi-border-between-color: transparent !default;
 $df-iwi-focused-border-between-color: $df-iwi-border-between-color !default;

package/styles/scss/components/link/_link.mixins.scss

@@ -1,58 +1,58 @@
-@import 'link.variables';
-
 @mixin df-link-normal {
-  color: $df-link-color;
-  border-bottom: $df-link-border-bottom;
+  color: var(--#{$prefix}link-color);
+  border-bottom: var(--#{$prefix}link-border-bottom);
 }
 
 @mixin df-link-hover {
-  color: $df-link-hover-color;
-  background-color: $df-link-hover-background;
-  border-bottom-width: $df-link-hover-border-bottom-width;
-  text-decoration: none;
+  color: var(--#{$prefix}link-hover-color);
+  background-color: var(--#{$prefix}link-hover-background);
+  border-bottom-width: var(--#{$prefix}link-hover-border-bottom-width);
+  text-decoration: var(--#{$prefix}link-hover-text-decoration);
 }
 
 @mixin df-link-visited {
-  color: $df-link-visited-color;
-  border-bottom-color: $df-link-visited-color;
+  color: var(--#{$prefix}link-visited-color);
+  border-bottom-color: var(--#{$prefix}link-visited-color);
   text-decoration: none;
 }
 
 @mixin df-link-focus {
-  outline: $df-link-focus-outline;
-  outline-offset: $df-link-focus-outline-offset;
-  box-shadow: $df-link-focus-box-shadow;
+  outline: var(--#{$prefix}link-focus-outline);
+  outline-offset: var(--#{$prefix}link-focus-outline-offset);
+  box-shadow: var(--#{$prefix}link-focus-box-shadow);
 }
 
 @mixin df-link-visited-hover {
-  background-color: $df-link-visited-hover-background;
-  border-bottom-width: $df-link-visited-hover-border-bottom-width;
+  color: var(--#{$prefix}link-visited-hover-text-color);
+  background-color: var(--#{$prefix}link-visited-hover-background);
+  border-bottom-width: var(--#{$prefix}link-visited-hover-border-bottom-width);
+  border-bottom-color: var(--#{$prefix}link-visited-hover-border-bottom-color);
 }
 
 @mixin df-link-disabled {
-  color: $df-link-disabled-color;
-  display: $df-link-disabled-display;
-  cursor: $df-link-disabled-cursor;
-  text-decoration: $df-link-disabled-text-decoration;
-  border-bottom-color: $df-link-disabled-border-bottom-color;
-  background-color: $df-link-disabled-background;
+  color: var(--#{$prefix}link-disabled-color);
+  display: var(--#{$prefix}link-disabled-display);
+  cursor: var(--#{$prefix}link-disabled-cursor);
+  text-decoration: var(--#{$prefix}link-disabled-text-decoration);
+  border-bottom-color: var(--#{$prefix}link-disabled-border-bottom-color);
+  background-color: var(--#{$prefix}link-disabled-background);
   outline: none;
   box-shadow: none;
 }
 
 @mixin df-link-active {
-  color: $df-link-active-color;
-  border-bottom-width: $df-link-active-border-bottom-width;
-  border-bottom-color: $df-link-active-color;
-  background-color: $df-link-active-background;
+  color: var(--#{$prefix}link-active-color);
+  border-bottom-width: var(--#{$prefix}link-active-border-bottom-width);
+  border-bottom-color: var(--#{$prefix}link-active-color);
+  background-color: var(--#{$prefix}link-active-background);
 }
 
 @mixin df-link-external-content {
   content: $df-link-external-icon;
-  font-family: $df-link-external-font-family;
+  font-family: var(--#{$prefix}link-external-font-family);
   position: relative;
-  bottom: $df-link-external-icon-bottom;
-  font-size: $df-link-external-icon-size;
+  bottom: var(--#{$prefix}link-external-icon-bottom);
+  font-size: var(--#{$prefix}link-external-icon-size);
 }
 
 @mixin df-link {
@@ -97,33 +97,33 @@
 }
 
 @mixin df-link-more-normal {
-  text-transform: $df-link-more-text-transform;
-  font-weight: $df-font-weight-semi-bold;
+  text-transform: var(--#{$prefix}link-more-text-transform);
+  font-weight: var(--#{$prefix}font-weight-semi-bold);
   white-space: nowrap;
-  background-color: $df-link-background;
+  background-color: var(--#{$prefix}link-background);
 
   .df-link-more-text {
     white-space: nowrap;
-    color: $df-link-color;
+    color: var(--#{$prefix}link-color);
     text-decoration: none;
   }
 
   .df-link-more-icon {
     position: relative;
-    top: $df-link-more-icon-top;
-    margin-left: $df-link-more-icon-margin-left;
+    top: var(--#{$prefix}link-more-icon-top);
+    margin-left: var(--#{$prefix}link-more-icon-margin-left);
     vertical-align: inherit;
   }
 }
 
 @mixin df-link-more-hover {
-  color: $df-link-color;
-  background-color: $df-link-hover-background;
+  color: var(--#{$prefix}link-color);
+  background-color: var(--#{$prefix}link-hover-background);
   text-decoration: none;
 
   .df-link-more-text {
     white-space: nowrap;
-    text-decoration: $df-link-more-text-decoration-underline;
+    text-decoration: var(--#{$prefix}link-more-text-decoration-underline);
   }
 
   .df-link-more-icon {
@@ -132,14 +132,14 @@
 }
 
 @mixin df-link-more-focus {
-  outline: $df-link-focus-outline;
-  outline-offset: $df-link-focus-outline-offset;
-  box-shadow: $df-link-focus-box-shadow;
-  background-color: $df-link-background;
+  outline: var(--#{$prefix}link-focus-outline);
+  outline-offset: var(--#{$prefix}link-focus-outline-offset);
+  box-shadow: var(--#{$prefix}link-focus-box-shadow);
+  background-color: var(--#{$prefix}link-background);
 
   .df-link-more-text {
     white-space: nowrap;
-    text-decoration: $df-link-more-text-decoration-underline;
+    text-decoration: var(--#{$prefix}link-more-text-decoration-underline);
   }
 
   .df-link-more-icon {
@@ -148,21 +148,21 @@
 }
 
 @mixin df-link-more-disabled {
-  display: $df-link-disabled-display;
-  cursor: $df-link-disabled-cursor;
-  text-decoration: $df-link-disabled-text-decoration;
+  display: var(--#{$prefix}link-disabled-display);
+  cursor: var(--#{$prefix}link-disabled-cursor);
+  text-decoration: var(--#{$prefix}link-disabled-text-decoration);
   outline: none;
   box-shadow: none;
-  background-color: $df-link-disabled-background;
+  background-color: var(--#{$prefix}link-disabled-background);
 
   .df-link-more-text {
     white-space: nowrap;
-    color: $df-link-disabled-color;
-    text-decoration: $df-link-disabled-text-decoration;
+    color: var(--#{$prefix}link-disabled-color);
+    text-decoration: var(--#{$prefix}link-disabled-text-decoration);
   }
 
   .df-link-more-icon {
-    color: $df-link-disabled-color;
+    color: var(--#{$prefix}link-disabled-color);
     text-decoration: none;
   }
 }